1  # Workspace Notes Feature - Phased Implementation Plan
  2  
  3  ## Overview
  4  
  5  Add a note-taking panel to the right side of the Dashboard when viewing a workspace. Start with simple local storage, then evolve toward Logseq integration.
  6  
  7  ---
  8  
  9  ## Phase 1: Basic Local Notes (MVP)
 10  
 11  **Goal:** Get notes working quickly with minimal complexity.
 12  
 13  ### Features
 14  - [ ] Notes panel appears on right side when workspace selected
 15  - [ ] Simple textarea for markdown input
 16  - [ ] Notes saved per-workspace in browser storage
 17  - [ ] Auto-save on blur and periodic timer (5 seconds debounce)
 18  - [ ] Basic markdown rendering (bold, italic, links, code, lists)
 19  - [ ] Toggle between Edit/Preview modes
 20  - [ ] Empty state with helpful prompt
 21  
 22  ### Data Structure
 23  ```typescript
 24  interface WorkspaceNote {
 25    workspaceId: string;
 26    content: string;           // Raw markdown
 27    lastModified: string;      // ISO timestamp
 28    created: string;
 29  }
 30  ```
 31  
 32  ### Storage
 33  - Store in `workspaceConfig.notes: Record<workspaceId, WorkspaceNote>`
 34  - Syncs automatically with existing File System / Native backends
 35  
 36  ### UI Layout
 37  ```
 38  ┌──────────────────────────────────────────────────────────────────────┐
 39  │ Dashboard                                                             │
 40  ├────────────────────┬─────────────────────────────────────────────────┤
 41  │                    │  ┌──────────────────────────────────────────┐   │
 42  │   Sidebar          │  │ Workspace Detail Panel                   │   │
 43  │   (existing)       │  │ (action toolbar, tabs list, metadata)    │   │
 44  │                    │  └──────────────────────────────────────────┘   │
 45  │                    │  ┌──────────────────────────────────────────┐   │
 46  │                    │  │ Notes Panel                   [Edit|View] │   │
 47  │                    │  │ ─────────────────────────────────────────│   │
 48  │                    │  │                                          │   │
 49  │                    │  │  Markdown content here...                │   │
 50  │                    │  │                                          │   │
 51  │                    │  │                                          │   │
 52  │                    │  └──────────────────────────────────────────┘   │
 53  └────────────────────┴─────────────────────────────────────────────────┘
 54  ```
 55  
 56  ### Implementation Files
 57  - `src/components/notes/WorkspaceNotesPanel.svelte` - Main notes panel
 58  - `src/components/notes/MarkdownPreview.svelte` - Render markdown
 59  - `src/lib/types/notes.ts` - Type definitions
 60  - Update `Dashboard.svelte` to include notes panel
 61  
 62  ### Estimate
 63  - ~2-3 hours implementation
 64  
 65  ---
 66  
 67  ## Phase 2: Enhanced Editor
 68  
 69  **Goal:** Better editing experience without external dependencies.
 70  
 71  ### Features
 72  - [ ] Toolbar buttons (bold, italic, heading, link, code, list)
 73  - [ ] Keyboard shortcuts (Ctrl+B, Ctrl+I, etc.)
 74  - [ ] Syntax highlighting in edit mode
 75  - [ ] Split view option (edit + preview side by side)
 76  - [ ] Note word/character count
 77  - [ ] Full-screen edit mode
 78  - [ ] Export note as .md file
 79  
 80  ### Optional
 81  - [ ] Multiple notes per workspace (collapsible sections)
 82  - [ ] Note templates
 83  - [ ] Internal linking between workspace notes
 84  
 85  ---
 86  
 87  ## Phase 3: Logseq Integration
 88  
 89  **Goal:** Sync notes with Logseq for power users.
 90  
 91  ### Prerequisites
 92  - Logseq desktop app installed and running
 93  - Logseq HTTP API enabled (default port 12315)
 94  
 95  ### Features
 96  - [ ] Logseq connection settings in Options
 97  - [ ] Connection status indicator
 98  - [ ] Two-way sync: Extension ↔ Logseq
 99  - [ ] Each workspace gets a Logseq page (`Workspaces/WorkspaceName`)
100  - [ ] Attachments stored in Logseq assets folder
101  - [ ] Search notes via Logseq's full-text search
102  
103  ### Fallback Behavior
104  - If Logseq not available, fall back to local storage
105  - Show "Connect to Logseq" prompt in notes panel
106  - Never block user from taking notes
107  
108  ### Implementation
109  - See `docs/logseq-integration-addendum.md` for full API details
110  
111  ---
112  
113  ## Phase 4: Advanced Features (Future)
114  
115  - [ ] AI-powered note suggestions (Claude integration)
116  - [ ] Link detection from open tabs → auto-create note snippets
117  - [ ] Note search across all workspaces
118  - [ ] Tags and categorization
119  - [ ] Note sharing/export to other formats
120  
121  ---
122  
123  ## Technical Decisions
124  
125  ### Markdown Library Options (Phase 1)
126  1. **marked** - Fast, lightweight (~32KB), good enough for basics
127  2. **markdown-it** - More extensible, plugin system
128  3. **remark/unified** - Full AST, overkill for Phase 1
129  
130  **Recommendation:** Start with `marked` for Phase 1, consider `markdown-it` for Phase 2.
131  
132  ### Editor Options (Phase 2)
133  1. **CodeMirror 6** - Full-featured, good markdown mode
134  2. **Monaco** - VS Code editor, heavy
135  3. **Textarea + manual toolbar** - Simple, lightweight
136  
137  **Recommendation:** Simple textarea for Phase 1, evaluate CodeMirror for Phase 2.
138  
139  ---
140  
141  ## Start with Phase 1?
142  
143  Ready to implement Phase 1 now. This gives you:
144  - Working notes immediately
145  - Syncs with your existing File System backend
146  - Foundation for future Logseq integration
147  - No new dependencies (can use simple regex-based markdown rendering)