feat: integrate Milkdown editor for note-taking functionality

- Added Milkdown dependencies: @milkdown/kit, @milkdown/react, @milkdown/theme-nord.
- Implemented MilkdownEditor component for rich text editing in notes.
- Updated /notes/$noteId route to include editable title and auto-saving functionality.
- Enhanced UI with loading states, saving indicators, and delete confirmation dialog.
- Applied Milkdown-specific CSS overrides for consistent theming and styling.
- Improved note update logic with debounced saving and cleanup on unmount.
This commit is contained in:
Roberto Musso
2026-02-22 22:47:05 +01:00
parent 7860ca6ad1
commit 2308158976
9 changed files with 3016 additions and 34 deletions

View File

@@ -23,20 +23,21 @@ APPEND to progress.txt (never replace, always append):
## USER REQUEST
{
"id": "US-015",
"title": "Inline project timeline and notes list in Project Detail",
"description": "As a user, I want to see the project's Gantt timeline and a list of its notes within the project detail scrollable view.",
"id": "US-016",
"title": "Milkdown note editor",
"description": "As a user, I want a full-screen Markdown editor for each note so that I can write rich content without leaving the app.",
"acceptanceCriteria": [
"Project Detail view includes a 'Project Timeline' section using the GanttChart component (from US-012) scoped to the current project's checkpoints",
"'+ Add' shadcn/ui Button (variant=outline, size=sm) in the timeline section header opens the add-checkpoint shadcn/ui Dialog with the project pre-selected",
"Notes section below Kanban shows a flat list using shadcn/ui Separator between rows: each row has note title + formatted createdAt date",
"'+ Add' shadcn/ui Button in notes header calls notes.create with a default title and navigates to /notes/:noteId",
"Clicking a note title navigates to /notes/:noteId",
"All buttons/dialogs use shadcn/ui components (already installed)",
"@milkdown/react and @milkdown/preset-commonmark installed; Milkdown editor renders at route /notes/:noteId",
"Supported Markdown: headings (H1-H6), bold, italic, inline code, code blocks, bullet lists, ordered lists, blockquotes",
"Note title editable as a shadcn/ui Input (variant borderless/ghost style) at the top of the page (separate from Milkdown content area)",
"Content auto-saves to SQLite via notes.update on Milkdown onChange event, debounced 500ms",
"Unsaved indicator shown using shadcn/ui Badge (variant=secondary, text 'Saving...') next to the title while save is pending",
"Back button uses shadcn/ui Button (variant=ghost, size=icon) with ArrowLeft Lucide icon; navigates to the previous route",
"All UI chrome uses shadcn/ui components (already installed)",
"Typecheck passes",
"Verify in browser using dev-browser skill"
],
"priority": 15,
"priority": 16,
"passes": false,
"notes": ""
}