feat(honeycrisp): complete UI overhaul — Apple Notes clone with soft delete, command palette, context menus

[braden-w]

Redesigns Honeycrisp from a developer scaffold into a faithful Apple Notes clone: soft-delete schema, extracted state module, sidebar with Recently Deleted, context menus with move-to-folder, ⌘K command palette, visual polish, and word count tracking.

The app was structurally correct—three-column layout, folder CRUD, note CRUD, Tiptap + Yjs editor—but everything lived in a 296-line +page.svelte with flat styling. This PR surgically targets every gap between "working prototype" and "convincing Apple Notes clone" across 5 execution waves, each independently verifiable and committed separately.

Before                              After
┌──────────────────────────┐       ┌──────────────────────────┐
│  +page.svelte (296 lines)│       │  +page.svelte (103 lines)│ ← Layout only
│    ALL state              │       │  notes.svelte.ts (301)   │ ← Factory singleton
│    ALL actions            │       │  NoteCard.svelte (207)   │ ← Context menus
│    ALL layout             │       │  CommandPalette.svelte   │ ← ⌘K search
│    ALL derived state      │       │  Sidebar.svelte (191)    │ ← Collapsible, trash
│                           │       │  NoteList.svelte (223)   │ ← Date grouping
└──────────────────────────┘       └──────────────────────────┘

Wave 0: Schema + State Extraction

Notes table bumped to v2 with deletedAt field for soft delete. All reactive state, workspace observers, derived computations, and actions extracted from +page.svelte into createNotesState() factory following the established codebase pattern (saved-tab-state, browser-state).

// Factory encloses $state in a closure — Svelte 5 requires this
// for module-level state that gets reassigned by observers
function createNotesState() {
  let allNotes = $state<Note[]>(readNotes());

  workspaceClient.tables.notes.observe(() => {
    allNotes = readNotes(); // Reassignment works inside closure
  });

  const notes = $derived(allNotes.filter((n) => n.deletedAt === undefined));
  const deletedNotes = $derived(allNotes.filter((n) => n.deletedAt !== undefined));

  return {
    get notes() { return notes; },
    get deletedNotes() { return deletedNotes; },
    softDeleteNote(noteId) { ... },
    restoreNote(noteId) { ... },
    permanentlyDeleteNote(noteId) { ... },
  };
}
export const notesState = createNotesState();

Wave 1: Sidebar Overhaul

"Recently Deleted" smart folder with badge count. Folders section wrapped in Collapsible (Apple Notes style). Folder delete triggers AlertDialog confirmation instead of instant destruction. Duplicate footer button removed.

Wave 2: NoteCard + Context Menus

Extracted NoteCard.svelte with right-click context menus:

Normal mode               Recently Deleted mode
┌──────────────────────┐  ┌──────────────────────┐
│ 📌 Pin / Unpin       │  │ Restore              │
│ ───────────────────── │  │ ───────────────────── │
│ Move to Folder   ►   │  │ Delete Permanently   │
│ ───────────────────── │  └──────────────────────┘
│ 🗑️ Delete            │
└──────────────────────┘

Move to Folder submenu lists all user folders + "Unfiled" option. Permanent delete from Recently Deleted triggers AlertDialog confirmation. Date grouping expanded: Today → Yesterday → Previous 7 Days → Previous 30 Days → month names.

Wave 3: Command Palette

CommandPalette.svelte using shadcn Command.Dialog with ⌘K shortcut. Three groups: Folders (navigate), Notes (search by title/preview), Actions (New Note, New Folder).

Wave 4: Visual Polish + Cleanup

Note card selection upgraded to rounded-lg with softer bg-accent/30 hover. Arrow key navigation in the note list. Warmer empty states with keyboard shortcut hints. Removed redundant border-r on resizable pane that was creating a double-bar artifact alongside the Resizable.Handle.

Prop Drilling Elimination

Components were initially wired through 30+ forwarded props. A follow-up cleanup wave removed all prop drilling—every component now imports the notesState singleton directly, matching the established browser-state/saved-tab-state pattern. +page.svelte went from 296 lines of wiring harness to 103 lines of pure layout + document handle lifecycle.

Why factory function, not module-level exports?

Initial implementation used bare export { folders, notes, ... } with module-level $state. Svelte 5 rejects this: Cannot export state from a module if it is reassigned. The Y.Doc observers reassign state on every change, so the factory pattern (same as saved-tab-state.svelte.ts) is required.

Also in this PR

• feat(honeycrisp): Word count tracking for notes
• fix(fuji): Add hover states to table rows, prep timeline for action buttons
• fix(honeycrisp): Remove redundant border-r on resizable pane (double-bar fix)

Changelog

• Add soft delete for notes — deleted notes move to "Recently Deleted" instead of permanent destruction
• Add right-click context menus on notes with Pin, Move to Folder, and Delete actions
• Add ⌘K command palette for searching notes, navigating folders, and creating notes
• Add collapsible folder sections and "Recently Deleted" smart folder in sidebar
• Add AlertDialog confirmation for folder delete and permanent note delete
• Add arrow key navigation in the note list
• Add word count tracking to notes
• Fix double-bar visual artifact between resizable panels
• Fix missing hover states on Fuji table rows

[rupokghosh]

need this!