96 lines
3.6 KiB
Markdown
96 lines
3.6 KiB
Markdown
# 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.
|
|
|
|
- [ ] 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`
|
|
- [ ] 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
|