verstak/docs/frontend-change-map.md

Frontend Change Map

Purpose

This document tracks the refactoring of App.svelte from a 4794-line monolith into a modular frontend architecture. Each step preserves behaviour exactly.

Phase 1: Documentation & Foundation

• Audit App.svelte (all 4794 lines read and mapped)
• Create docs/frontend-architecture.md
• Create docs/frontend-change-map.md

Phase 2: API Layer

Extract all Wails calls into service modules.

• Create lib/services/wails.js — base wailsCall helper
• Create lib/services/notes.js — listNotes, createNote, readNote, saveNote, renameNote, deleteNote
• Create lib/services/files.js — loadFolder, addFile, deleteFile, etc.
• Create lib/services/search.js — searchNodes, getNodeDetail, searchWorkspace
• Create lib/services/inbox.js — inbox capture and management
• Create lib/services/trash.js — trash operations
• Create lib/services/sync.js — sync status and trigger
• Create lib/services/journal.js — worklog CRUD and reports
• Create lib/services/actions.js — actions CRUD
• Create lib/services/links.js — links CRUD
• Create lib/services/activity.js — activity feed
• Create lib/services/nodes.js — tree, node CRUD, system views
• Create lib/services/suggestions.js — worklog suggestions
• Create lib/services/today.js — today dashboard
• Create lib/services/browserEvents.js — browser extension events
• Create lib/services/search.js — searchNodes
• Create lib/services/inbox.js — listInbox, captureClipboard, etc.
• Create lib/services/trash.js — loadTrash, restore, purge
• Create lib/services/sync.js — loadSyncStatus, runSync
• Create lib/services/journal.js — loadJournal, worklog CRUD
• Create lib/services/actions.js — listActions, createAction, deleteAction
• Create lib/services/links.js — listLinks, updateLink, deleteLink
• Create lib/services/activity.js — loadActivityFeed, loadCaseActivity

Phase 3: State Extraction

• Create lib/state/navigation.js — selectedSection, selectedNode, activeTab, navHistory
• Create lib/state/uiState.js — modals state, confirm state, rename state, drag state

Phase 4: Component Extraction — Layout

• Extract Sidebar.svelte — brand, nav items, workspace tree, footer
• Extract MainWorkspace.svelte — content routing
• Create AppShell.svelte — root layout wrapper

Phase 5: Component Extraction — Tab Content

• Extract OverviewTab.svelte
• Extract NotesTab.svelte
• Extract FilesTab.svelte
• Extract LinksTab.svelte
• Extract ActionsTab.svelte
• Extract WorklogTab.svelte
• Extract ActivityTabContent.svelte
• Extract InboxContent.svelte
• Extract InboxFullScreen.svelte
• Extract TrashContent.svelte
• Extract JournalScreen.svelte
• Extract ActivityFeedScreen.svelte
• Extract WelcomeScreen.svelte

Phase 6: Component Extraction — Modals

• Extract CreateNodeModal.svelte
• Extract WorklogModal.svelte
• Extract CreateActionModal.svelte
• Extract ImportModal.svelte
• Extract RenameModal.svelte
• Extract AssignInboxModal.svelte
• Extract EditLinkModal.svelte
• Extract ContextMenu.svelte

Phase 7: Extract Inline Components

• Extract NoteEditorHeader.svelte (note editor header with rename)
• Extract ErrorBanner.svelte
• Extract CaptureDropOverlay.svelte
• Extract SidebarFooter.svelte

Phase 8: Verification

• npm run build passes
• go test ./... passes
• Smoke checklist:
  1. Sidebar renders with system views
  2. Workspace tree loads and is expandable
  3. Selecting a node shows tabs
  4. Overview tab shows metadata and quick actions
  5. Notes tab — create, rename, delete notes
  6. Note editor — edit, preview, save, internal links, external links
  7. Files tab — browse, add file/folder, navigate breadcrumbs
  8. File preview — open, close
  9. Inbox — list, sort, group, assign, delete
  10. Trash — browse, restore, purge
  11. Journal — filter, export, worklog CRUD
  12. Activity feed — load and open events
  13. Today screen — dashboard, suggestions, browser events
  14. Settings — open/close, sections
  15. Context menu on workspace tree
  16. Create node modal — templates