Add drag-and-drop reordering for note tabs, and a user-facing guide

Tabs can now be dragged to reorder within a group and to move between
sections in one gesture: dropping on a tab's left/right half inserts
before/after it and adopts that tab's section, while a dedicated zone
past the last group ungroups and appends at the end. A blue indicator
line shows the drop position while dragging.

core/notes.reorder() takes the full new page-id order computed
client-side (NotePanel.vue has the reactive list already) rather than
recomputing positions server-side, validates it against the current
page-id set, sets the moved page's section, then renumbers position.
POST /api/notes/reorder exposes it.

Also adds docs/notes-guide.md, an end-user walkthrough of the shared
notes panel (pages, sections, drag-and-drop, AI interaction) — the
existing docs were all developer-facing specs with no operating
instructions for the feature itself.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-20 07:27:38 +09:00
co-authored by Claude Opus 5
parent 1c21fc3406
commit 8b2231ea97
8 changed files with 245 additions and 3 deletions
+17
View File
@@ -6,6 +6,7 @@ import {
updateNotePage,
deleteNotePage,
renameNoteSection,
reorderNotePages,
type NotePage,
} from '../api/client'
@@ -81,6 +82,21 @@ export const useNotesStore = defineStore('notes', () => {
}
}
/**
* タブのドラッグ&ドロップ用。order には全ページIDをドラッグ後の新しい順序で渡す。
* section にドロップ先タブの所属セクションを渡せば、並べ替えと同時にセクション間の移動も反映される。
*/
async function reorder(pageId: number, section: string | null, order: number[]): Promise<void> {
error.value = null
flush()
try {
await reorderNotePages(pageId, section, order)
await load()
} catch (e) {
error.value = e instanceof Error ? e.message : '並べ替えに失敗しました'
}
}
async function removePage(id: number): Promise<void> {
error.value = null
try {
@@ -146,6 +162,7 @@ export const useNotesStore = defineStore('notes', () => {
edit,
setSection,
renameSection,
reorder,
flush,
}
})