feat: draggable section groups in sidebar

- Wrap sidebar section groups in @dnd-kit sortable context
- Add grip-vertical drag handle visible on hover of section headers
- Sort sections by `order` property from Type document entries
- On drag end, compute new sequential order values and persist to
  each Type document's frontmatter via handleReorderSections
- Add onReorderSections callback from Sidebar → App.tsx → vault

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-02-21 17:29:42 +01:00
parent 1dfbbb8a9e
commit f805c7d1bf
2 changed files with 114 additions and 13 deletions

View File

@@ -112,6 +112,15 @@ function App() {
vault.updateEntry(typeEntry.path, { icon, color })
}, [vault, notes])
const handleReorderSections = useCallback((orderedTypes: { typeName: string; order: number }[]) => {
for (const { typeName, order } of orderedTypes) {
const typeEntry = vault.entries.find((e) => e.isA === 'Type' && e.title === typeName)
if (!typeEntry) continue
notes.handleUpdateFrontmatter(typeEntry.path, 'order', order)
vault.updateEntry(typeEntry.path, { order })
}
}, [vault, notes])
useAppKeyboard({
onQuickOpen: () => setShowQuickOpen(true),
onCreateNote: openCreateDialog,
@@ -161,7 +170,7 @@ function App() {
<div className="app-shell">
<div className="app">
<div className="app__sidebar" style={{ width: sidebarWidth }}>
<Sidebar entries={vault.entries} selection={selection} onSelect={setSelection} onSelectNote={notes.handleSelectNote} onCreateType={openCreateDialog} onCreateNewType={openCreateTypeDialog} onCustomizeType={handleCustomizeType} modifiedCount={vault.modifiedFiles.length} onCommitPush={() => setShowCommitDialog(true)} />
<Sidebar entries={vault.entries} selection={selection} onSelect={setSelection} onSelectNote={notes.handleSelectNote} onCreateType={openCreateDialog} onCreateNewType={openCreateTypeDialog} onCustomizeType={handleCustomizeType} onReorderSections={handleReorderSections} modifiedCount={vault.modifiedFiles.length} onCommitPush={() => setShowCommitDialog(true)} />
</div>
<ResizeHandle onResize={handleSidebarResize} />
<div className="app__note-list" style={{ width: noteListWidth }}>