# 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

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

## Phase 2: API Layer

Extract all Wails calls into service modules.

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

- [x] Extract `OverviewTab.svelte`
- [x] Extract `NotesTab.svelte`
- [x] 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