diff --git a/(HOME)/.tauri/laputa-v2.key b/(HOME)/.tauri/laputa-v2.key deleted file mode 100644 index 5162b5c5..00000000 --- a/(HOME)/.tauri/laputa-v2.key +++ /dev/null @@ -1 +0,0 @@ -dW50cnVzdGVkIGNvbW1lbnQ6IHJzaWduIGVuY3J5cHRlZCBzZWNyZXQga2V5ClJXUlRZMEl5V3BxWUNBZU1LZWxOK3ZEZTZkdGhzM2l6cnpVUmIvUEtTTWgzLzNEU1VoZ0FBQkFBQUFBQUFBQUFBQUlBQUFBQUFpN2xxclpGK3YzRERub1EvZFdsdVdORktuOHZYVlB0S2U2QkhNdlMreElkRVdabTh6UllNYzNFb2VWYTVCayszNUpyOC94Z0dJS2pVQ3NSKzdKNEszZHpDZll0aGdtV1J6bWFXODc4VWJpOVFYdUhEai9tNHQ2U3ZRbVd1NHBkR01YS2ZrUDlPRVU9Cg== \ No newline at end of file diff --git a/(HOME)/.tauri/laputa-v2.key.pub b/(HOME)/.tauri/laputa-v2.key.pub deleted file mode 100644 index 3d7e6ee6..00000000 --- a/(HOME)/.tauri/laputa-v2.key.pub +++ /dev/null @@ -1 +0,0 @@ -dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDVCQTVDRkIzNkFGRTYwQjUKUldTMVlQNXFzOCtsVzROZmJLR0JFVGw1a1UzKzViY3dUcWFoaUttRFhhVk8rVUhrc29QL1FPeXUK \ No newline at end of file diff --git a/.gitignore b/.gitignore index 2c8de341..aa3e13ed 100644 --- a/.gitignore +++ b/.gitignore @@ -45,3 +45,18 @@ src-tauri/target # Generated mcp-server bundle (built by scripts/bundle-mcp-server.mjs) src-tauri/resources/ + +# Python cache +__pycache__/ +*.py[cod] + +# Dev screenshots +screenshots/ + +# Stale planning docs (keep locally if needed, not in repo) +REDESIGN-PLAN.md +SF-SYMBOLS-MIGRATION.md +CODE-HEALTH-REPORT.md + +# Local home dir artifact from worktree ops +(HOME)/ diff --git a/CODE-HEALTH-REPORT.md b/CODE-HEALTH-REPORT.md deleted file mode 100644 index 1db489ee..00000000 --- a/CODE-HEALTH-REPORT.md +++ /dev/null @@ -1,345 +0,0 @@ -# Code Health Report — Laputa App - -**Date:** 2026-02-20 -**Branch:** `main` -**Overall Project Score:** 9.33 / 10.0 (Green — up from 9.14) -**Tool:** CodeScene Code Health Analysis (project ID: 76865) -**Previous Report:** 2026-02-20 on `main` — 9.14 / 10.0 - ---- - -## Summary - -The Laputa App codebase scores **9.33** overall — a further improvement of **+0.19** from the previous report (9.14). The codebase remains solidly in **Green**, driven by the `vault.rs` refactoring (+2.59 to 8.81) and the `frontmatter.rs` refactoring (+2.79 to 9.68, now Green). Five files remain in the Yellow zone, down from six — `frontmatter.rs` has exited Yellow into Green. - -| Zone | Score Range | File Count | Description | -|------|------------|------------|-------------| -| Optimal | 10.0 | 8 | Perfect — optimized for human and AI comprehension | -| Green | 9.0 – 9.9 | 15 | High quality, minor issues only | -| Yellow | 4.0 – 8.9 | 5 | Problematic technical debt | -| Red | 1.0 – 3.9 | 0 | — | -| N/A | — | 6 | CSS files (4) and tiny utility files (2) — unsupported by CodeScene | - ---- - -## Refactoring Completed (vault.rs + frontmatter.rs) - -The following refactorings were executed on vault.rs and frontmatter.rs, raising both files significantly: - -### vault.rs: 6.22 → 8.81 (+2.59) - -Refactored in 5 commits across multiple phases: - -1. **Extracted `run_git` helper** — Consolidated duplicated git command execution into a single helper function, flattening git functions (`git_changed_files`, `git_uncommitted_new_files`). -2. **Decomposed `parse_md_file`** — Extracted `parse_frontmatter_fields`, `extract_title`, `extract_snippet`, and `extract_relationships` into focused sub-functions. Flattened deep nesting with early returns. -3. **Decomposed `scan_vault_cached`** — Extracted `process_vault_entry`, `collect_vault_entries`, `apply_git_status`, and `build_vault_response` as focused functions. -4. **Split large test assertion blocks** — Broke monolithic assertion blocks into per-field assertions for readability and maintainability. -5. **Converted internal functions to use `&Path`** instead of `&str` for vault/file paths, reducing string-heavy arguments. - -All 8 original code smells (3 Bumpy Roads, 4 Deep Nestings, 2 Complex Methods, 2 Large Methods, String-Heavy Args, Large Assertion Blocks) have been resolved. The CodeScene review now reports **zero code smells**. - -### frontmatter.rs: 6.89 → 9.68 (+2.79) — Yellow → Green - -Refactored in 4 commits: - -1. **Flattened `update_frontmatter_content`** — Used early returns and extracted `find_key_line_range` and `build_updated_content` helpers. Eliminated bumpy road (4 bumps) and deep nesting (4 levels). -2. **Simplified `FrontmatterValue::to_yaml_value`** — Extracted `needs_yaml_quoting` predicate, simplified match arms. Reduced cc from 17. -3. **Simplified `format_yaml_key`** — Extracted key-quoting rules into `key_needs_quoting` predicate. Reduced complex conditionals from 5. -4. **Extracted line-parsing helpers** — `line_is_key` and related helpers for clean YAML line detection. - -All original code smells (1 Bumpy Road, 1 Deep Nesting, 2 Complex Methods, 4 Complex Conditionals) have been resolved. Only one minor issue remains: **String Heavy Function Arguments** (73% of args are string types). - ---- - -## Change Summary vs Previous Report (Feb 17) - -| File | Previous | Current | Delta | Notes | -|------|----------|---------|-------|-------| -| `src/App.tsx` | 7.13 | **9.28** | **+2.15** | Yellow -> Green. Brain Method eliminated via hook extraction | -| `src/components/Inspector.tsx` | 7.49 | **9.02** | **+1.53** | Yellow -> Green. Decomposed into sub-components | -| `src-tauri/src/vault.rs` | 4.80 | **8.81** | **+4.01** | Still Yellow but near-Green. All code smells resolved | -| `src-tauri/src/frontmatter.rs` | 6.89* | **9.68** | **+2.79** | Yellow -> Green. All major smells resolved | -| `src/components/Editor.tsx` | 6.94 | **7.68** | **+0.74** | Still Yellow. DiffView/wikilinks extracted but Editor still too large | -| `src/components/Sidebar.tsx` | 9.02 | **9.14** | +0.12 | Green (stable) | -| `src/components/NoteList.tsx` | 8.11 | **8.05** | -0.06 | Yellow (stable, slight regression) | -| `src/components/QuickOpenPalette.tsx` | 9.55 | **9.55** | = | Green (unchanged) | -| `src-tauri/src/lib.rs` | 9.68 | **9.68** | = | Green (unchanged) | -| `src-tauri/src/main.rs` | 10.0 | **10.0** | = | Optimal (unchanged) | -| `src-tauri/src/git.rs` | 10.0 | **10.0** | = | Optimal (unchanged) | -| `src/components/StatusBar.tsx` | 10.0 | **9.23** | -0.77 | Regression: Optimal -> Green (new features added) | -| `src/mock-tauri.ts` | 10.0 | **9.37** | -0.63 | Regression: Optimal -> Green (new mock data added) | - -*frontmatter.rs was extracted from vault.rs; "previous" is its initial score after extraction. - -### New Files (not in previous report) - -| File | Score | Zone | Notes | -|------|-------|------|-------| -| `src/hooks/useNoteActions.ts` | **7.81** | Yellow | Extracted from App.tsx — still needs decomposition | -| `src/components/AIChatPanel.tsx` | **8.51** | Yellow | New feature — large component | -| `src/components/DynamicPropertiesPanel.tsx` | **9.06** | Green | Extracted from Inspector.tsx | -| `src/components/DiffView.tsx` | **9.09** | Green | Extracted from Editor.tsx | -| `src/utils/frontmatter.ts` | **9.24** | Green | Extracted from Inspector.tsx | -| `src/components/CommitDialog.tsx` | **9.38** | Green | New component | -| `src/hooks/useVaultLoader.ts` | **9.41** | Green | Extracted from App.tsx | -| `src/utils/wikilinks.ts` | **9.53** | Green | Extracted from Editor.tsx | -| `src/hooks/useTheme.ts` | **9.68** | Green | New hook | -| `src/components/EditableValue.tsx` | **10.0** | Optimal | Extracted from Inspector.tsx | -| `src/components/ResizeHandle.tsx` | **10.0** | Optimal | New component | -| `src/components/CreateNoteDialog.tsx` | **10.0** | Optimal | New component | -| `src/components/Toast.tsx` | **10.0** | Optimal | New component | -| `src/utils/typeColors.ts` | **10.0** | Optimal | New utility | -| `src/main.tsx` | **10.0** | Optimal | Entry point | - ---- - -## File-by-File Scores (All 34 Files) - -| File | LoC | Score | Zone | Key Issues | -|------|-----|-------|------|------------| -| `src-tauri/src/main.rs` | 6 | **10.0** | Optimal | None | -| `src-tauri/src/git.rs` | 423 | **10.0** | Optimal | None | -| `src/components/EditableValue.tsx` | 167 | **10.0** | Optimal | None | -| `src/components/ResizeHandle.tsx` | 74 | **10.0** | Optimal | None | -| `src/components/CreateNoteDialog.tsx` | 99 | **10.0** | Optimal | None | -| `src/components/Toast.tsx` | 28 | **10.0** | Optimal | None | -| `src/utils/typeColors.ts` | 37 | **10.0** | Optimal | None | -| `src/main.tsx` | 16 | **10.0** | Optimal | None | -| `src-tauri/src/frontmatter.rs` | 279 | **9.68** | Green | String-heavy function arguments (73%) | -| `src-tauri/src/lib.rs` | 80 | **9.68** | Green | String-heavy function arguments | -| `src/hooks/useTheme.ts` | 51 | **9.68** | Green | None significant | -| `src/components/QuickOpenPalette.tsx` | 145 | **9.55** | Green | Complex Method (cc=16) | -| `src/utils/wikilinks.ts` | 68 | **9.53** | Green | None significant | -| `src/hooks/useVaultLoader.ts` | 123 | **9.41** | Green | None significant | -| `src/components/CommitDialog.tsx` | 73 | **9.38** | Green | None significant | -| `src/mock-tauri.ts` | 894 | **9.37** | Green | None significant | -| `src/App.tsx` | 176 | **9.28** | Green | Complex Method: App() cc=16 / 130 LoC | -| `src/utils/frontmatter.ts` | 72 | **9.24** | Green | None significant | -| `src/components/StatusBar.tsx` | 159 | **9.23** | Green | None significant | -| `src/components/Sidebar.tsx` | 208 | **9.14** | Green | None significant | -| `src/components/DiffView.tsx` | 45 | **9.09** | Green | None significant | -| `src/components/DynamicPropertiesPanel.tsx` | 265 | **9.06** | Green | None significant | -| `src/components/Inspector.tsx` | 312 | **9.02** | Green | None significant | -| `src-tauri/src/vault.rs` | 1111 | **8.81** | Yellow | No code smells reported — near Green threshold | -| `src/components/AIChatPanel.tsx` | 364 | **8.51** | Yellow | Complex Method: AIChatPanel() cc=15 / 285 LoC | -| `src/components/NoteList.tsx` | 434 | **8.05** | Yellow | Complex Method: NoteListInner() cc=28 / 208 LoC | -| `src/hooks/useNoteActions.ts` | 280 | **7.81** | Yellow | Bumpy Road, Deep Nesting, Complex Method: useNoteActions() cc=30 / 169 LoC | -| `src/components/Editor.tsx` | 575 | **7.68** | Yellow | **Brain Method**: Editor() cc=61 / 385 LoC, Bumpy Road | -| `src/types.ts` | 38 | N/A | — | Type definitions only | -| `src/lib/utils.ts` | 6 | N/A | — | Utility (too small) | -| `src/App.css` | — | N/A | — | CSS not supported | -| `src/index.css` | — | N/A | — | CSS not supported | -| `src/components/Editor.css` | — | N/A | — | CSS not supported | -| `src/components/EditorTheme.css` | — | N/A | — | CSS not supported | - ---- - -## Technical Debt Hotspots - -Based on code health scores, file sizes, and change frequency: - -| Priority | File | Score | LoC | Risk Factor | -|----------|------|-------|-----|-------------| -| 1 | `src/components/Editor.tsx` | 7.68 | 575 | **Brain Method** (cc=61, 385 LoC) — worst single function in codebase | -| 2 | `src/hooks/useNoteActions.ts` | 7.81 | 280 | Brain Method (cc=30, 169 LoC), deep nesting in updateMockFrontmatter | -| 3 | `src/components/NoteList.tsx` | 8.05 | 434 | Complex Method (cc=28, 208 LoC) | -| 4 | `src/components/AIChatPanel.tsx` | 8.51 | 364 | Large component (cc=15, 285 LoC) — new, address before it grows | -| 5 | `src-tauri/src/vault.rs` | 8.81 | 1111 | Near-Green, no code smells — minor improvement needed to cross 9.0 | - ---- - -## Detailed Analysis — Files Scoring Below 9.0 - -### 1. `src/components/Editor.tsx` — Score: 7.68 (Now #1 Priority) - -The core `Editor` component function remains a **Brain Method** — the single worst function in the codebase at cc=61 and 385 LoC (3.2x the 120 LoC limit). - -**Code Smells Found:** - -| Smell | Location | Details | Severity | -|-------|----------|---------|----------| -| Bumpy Road | `Editor` (L154–575) | 2 bumps | High | -| Complex Method | `Editor` (L154–575) | cc = 61 (**Brain Method**) | High | -| Complex Conditional | `Editor:196` | 2 complex expressions | Medium | -| Large Method | `Editor` (L154–575) | 385 LoC (limit: 120) | Medium | - ---- - -### 2. `src/hooks/useNoteActions.ts` — Score: 7.81 - -Extracted from App.tsx. Contains the `updateMockFrontmatter` function which has deep nesting, plus the `useNoteActions` hook itself is still too large. - -**Code Smells Found:** - -| Smell | Location | Details | Severity | -|-------|----------|---------|----------| -| Bumpy Road | `updateMockFrontmatter` (L14–66) | 2 bumps | High | -| Deep Nesting | `updateMockFrontmatter` (L14–66) | 4 levels deep | High | -| Complex Method | `useNoteActions` (L93–280) | cc = 30 | Medium | -| Complex Method | `updateMockFrontmatter` (L14–66) | cc = 17 | Medium | -| Complex Method | `deleteMockFrontmatterProperty` (L68–91) | cc = 9 | Medium | -| Large Method | `useNoteActions` (L93–280) | 169 LoC (limit: 70) | Medium | - ---- - -### 3. `src/components/NoteList.tsx` — Score: 8.05 - -Slightly regressed from 8.11. The `NoteListInner` component and `buildRelationshipGroups` remain complex. - -**Code Smells Found:** - -| Smell | Location | Details | Severity | -|-------|----------|---------|----------| -| Complex Method | `NoteListInner` (L211–432) | cc = 28 | Medium | -| Complex Method | `buildRelationshipGroups` (L125–188) | cc = 13 | Medium | -| Large Method | `NoteListInner` (L211–432) | 208 LoC (limit: 120) | Medium | -| Overall Code Complexity | File-wide | High mean cyclomatic complexity | Medium | - ---- - -### 4. `src/components/AIChatPanel.tsx` — Score: 8.51 - -New file (mock AI chat feature). Already showing signs of complexity that should be addressed early. - -**Code Smells Found:** - -| Smell | Location | Details | Severity | -|-------|----------|---------|----------| -| Complex Method | `AIChatPanel` (L62–364) | cc = 15 | Medium | -| Large Method | `AIChatPanel` (L62–364) | 285 LoC (limit: 120) | Medium | - ---- - -### 5. `src-tauri/src/vault.rs` — Score: 8.81 - -Dramatically improved from 6.22. The CodeScene review reports **zero code smells** after the refactoring. The file is near the Green threshold (9.0) and may only need minor adjustments to cross it. - ---- - -## Quick Wins (Low Effort, High Impact) - -### 1. Decompose `Editor` into hooks (highest ROI) -**File:** `src/components/Editor.tsx` | **Impact:** cc 61 -> ~10 per hook -- Extract `useEditorExtensions()` — all CodeMirror extension setup (themes, keybindings, decorations) -- Extract `useEditorContent()` — content loading, saving, dirty state management -- Extract `useEditorKeymap()` — custom keymap handlers -- The `Editor` component becomes a thin composition + JSX layer - -### 2. Decompose `useNoteActions` hook -**File:** `src/hooks/useNoteActions.ts` | **Impact:** cc 30 -> ~8 per hook -- Extract `useFrontmatterSync()` — `updateMockFrontmatter` + `deleteMockFrontmatterProperty` -- Flatten `updateMockFrontmatter` with early returns and helper functions -- Keep `useNoteActions` as pure action dispatch (create, delete, rename) - -### 3. Split `NoteListInner` into sub-components -**File:** `src/components/NoteList.tsx` | **Impact:** cc 28 -> ~8 per component -- Extract `NoteListItem` component for individual note rendering -- Extract `RelationshipGroup` component for grouped entries -- Extract `buildRelationshipGroups` to a utility file - -### 4. Extract `AIChatPanel` hooks early -**File:** `src/components/AIChatPanel.tsx` | **Impact:** Prevent further complexity growth -- Extract `useChatMessages()` — message state, send/receive logic -- Extract `ChatMessage` component for individual message rendering - -### 5. Push `vault.rs` past 9.0 -**File:** `src-tauri/src/vault.rs` | **Impact:** 8.81 -> 9.0+ -- Minor: reduce string-heavy args further with `&Path` conversions -- Minor: simplify any remaining complex expressions - ---- - -## Path to 9.5 Overall - -**Current:** 9.33 (28 scored files, sum = 261.20) -**Target:** 9.5 - -To reach 9.5, all 5 Yellow files must reach at least 9.5: - -| File | Current | Target | Points Needed | -|------|---------|--------|---------------| -| `vault.rs` | 8.81 | 9.5 | +0.69 | -| `Editor.tsx` | 7.68 | 9.5 | +1.82 | -| `useNoteActions.ts` | 7.81 | 9.5 | +1.69 | -| `NoteList.tsx` | 8.05 | 9.5 | +1.45 | -| `AIChatPanel.tsx` | 8.51 | 9.5 | +0.99 | -| **Total points needed** | | | **+6.64** | - -**Projected score if all Yellow files reach 9.5:** (261.20 + 6.64) / 28 = **9.57** - -**Recommended execution order for maximum impact:** -1. `Editor.tsx` (7.68 -> 9.5) — highest user-facing impact, hook extraction is mechanical -2. `useNoteActions.ts` (7.81 -> 9.5) — extracted hook, straightforward decomposition -3. `NoteList.tsx` (8.05 -> 9.5) — component extraction -4. `AIChatPanel.tsx` (8.51 -> 9.5) — closest to target, prevent drift -5. `vault.rs` (8.81 -> 9.5) — near-Green already, minor tweaks - ---- - -## Refactoring ROI Summary - -| File | Current | Target | Defect Reduction | Speed Improvement | -|------|---------|--------|------------------|-------------------| -| `Editor.tsx` | 7.68 | 9.5 | 25–38% | 19–30% | -| `useNoteActions.ts` | 7.81 | 9.5 | 24–36% | 18–28% | -| `NoteList.tsx` | 8.05 | 9.5 | 22–33% | 16–26% | -| `AIChatPanel.tsx` | 8.51 | 9.5 | 18–27% | 13–21% | -| `vault.rs` | 8.81 | 9.5 | 10–18% | 8–14% | - ---- - -## Files in Good Shape - -These files need no immediate attention: - -**Optimal (10.0):** -- `src-tauri/src/main.rs` — 6 LoC, clean entry point -- `src-tauri/src/git.rs` — 423 LoC, well-structured -- `src/components/EditableValue.tsx` — 167 LoC, clean extracted component -- `src/components/ResizeHandle.tsx` — 74 LoC, simple component -- `src/components/CreateNoteDialog.tsx` — 99 LoC, clean dialog -- `src/components/Toast.tsx` — 28 LoC, minimal component -- `src/utils/typeColors.ts` — 37 LoC, simple utility -- `src/main.tsx` — 16 LoC, entry point - -**Green (9.0–9.9):** -- `src-tauri/src/frontmatter.rs` — 9.68 (up from 6.89! Only: string-heavy args) -- `src-tauri/src/lib.rs` — 9.68 (minor: string-heavy args) -- `src/hooks/useTheme.ts` — 9.68 (clean hook) -- `src/components/QuickOpenPalette.tsx` — 9.55 (minor: cc=16) -- `src/utils/wikilinks.ts` — 9.53 (clean utility) -- `src/hooks/useVaultLoader.ts` — 9.41 (clean hook) -- `src/components/CommitDialog.tsx` — 9.38 (clean component) -- `src/mock-tauri.ts` — 9.37 (large but clean) -- `src/App.tsx` — 9.28 (dramatically improved from 7.13) -- `src/utils/frontmatter.ts` — 9.24 (clean utility) -- `src/components/StatusBar.tsx` — 9.23 (slightly regressed from 10.0) -- `src/components/Sidebar.tsx` — 9.14 (stable) -- `src/components/DiffView.tsx` — 9.09 (clean extracted component) -- `src/components/DynamicPropertiesPanel.tsx` — 9.06 (clean extracted component) -- `src/components/Inspector.tsx` — 9.02 (dramatically improved from 7.49) - ---- - -## What Worked Since Last Report - -The following refactorings from the Feb 17 recommendations were executed: - -1. **App.tsx decomposition** (Plan C) — Extracted `useNoteActions`, `useVaultLoader`, and other hooks. App dropped from cc=56/381 LoC to cc=16/130 LoC. Score: 7.13 -> 9.28. -2. **Inspector.tsx decomposition** (Plan D) — Extracted `DynamicPropertiesPanel`, `EditableValue`, and `frontmatter.ts` utility. Score: 7.49 -> 9.02. -3. **vault.rs full refactoring** (Plan A) — Extracted `run_git` helper, decomposed `parse_md_file` and `scan_vault_cached`, split large assertion blocks, converted to `&Path` args. Score: 4.80 -> 8.81. **All code smells resolved.** -4. **frontmatter.rs full refactoring** (Plan B) — Flattened `update_frontmatter_content`, simplified `to_yaml_value` and `format_yaml_key`, extracted line-parsing helpers. Score: 6.89 -> 9.68. **Yellow -> Green.** -5. **Editor.tsx partial decomposition** (Plan B, Steps 2–3) — Extracted `DiffView.tsx` and `wikilinks.ts`. Score: 6.94 -> 7.68. - -## What Still Needs Work - -1. **Editor.tsx** — DiffView and wikilinks were extracted, but the core Editor function was NOT decomposed into hooks. It's now the worst function (cc=61, 385 LoC). Hook extraction (useEditorExtensions, useEditorContent, useEditorKeymap) is the next high-impact target. -2. **useNoteActions.ts** — Inherited App.tsx's `updateMockFrontmatter` complexity. Needs decomposition into smaller hooks. -3. **NoteList.tsx** — Slight regression, needs component extraction (NoteListItem, RelationshipGroup). -4. **AIChatPanel.tsx** — New file already showing complexity. Address early before it grows. -5. **vault.rs** — Near-Green at 8.81 with zero code smells. Minor tweaks may push it past 9.0. - ---- - -*Report generated by CodeScene MCP analysis on 2026-02-20. For interactive exploration, visit: https://codescene.io/projects/76865* -*Note: CodeScene MCP Server MCP-0.1.5 was used. Version MCP-0.2.0 is available — consider updating via `brew upgrade cs-mcp`.* diff --git a/REDESIGN-PLAN.md b/REDESIGN-PLAN.md deleted file mode 100644 index 49f2cac4..00000000 --- a/REDESIGN-PLAN.md +++ /dev/null @@ -1,362 +0,0 @@ -# Laputa App Redesign — Implementation Plan - -> Generated from `ui-design.pen` (V2) vs current implementation. **Analysis only — do not implement yet.** - ---- - -## Summary of Changes - -The V2 design introduces: a **Status Bar**, **Tab Bar** in the editor, an **Info Bar** (breadcrumb + actions), restructured **Sidebar** with Phosphor icons and collapsible groups with count badges, **IBM Plex Mono** for type pills, updated **color palette** (new primary `#155DFF`, new accent colors), and several layout/spacing refinements throughout. - ---- - -## Design Specs Reference (from .pen file) - -### Colors Changed -| Variable | Old (Light) | New (Light) | Old (Dark) | New (Dark) | -|---|---|---|---|---| -| `--primary` | `#2383E2` | `#155DFF` | `#4a9eff` | `#155DFF` | -| `--accent-green` | `#0F7B6C` | `#00B38B` | `#4caf50` | `#00B38B` | -| `--accent-purple` | `#9065B0` | `#A932FF` | `#9c72ff` | `#A932FF` | -| `--accent-blue` | `#2383E2` | `#155DFF` | `#4a9eff` | `#155DFF` | - -### New Color Variables (not in current CSS) -| Variable | Light | Dark | -|---|---|---| -| `--accent-yellow` | `#F0B100` | `#F0B100` | -| `--accent-blue-light` | `#155DFF14` | `#155DFF20` | -| `--accent-green-light` | `#00B38B14` | `#00B38B20` | -| `--accent-purple-light` | `#A932FF14` | `#A932FF20` | -| `--accent-red-light` | `#E03E3E14` | `#f4433620` | -| `--accent-yellow-light` | `#F0B10014` | `#F0B10020` | - -### Typography -- **Font**: Inter (primary), IBM Plex Mono (labels/pills) — **IBM Plex Mono not currently loaded** -- App title: 17px / Bold / letter-spacing -0.3 -- Sidebar items: 13px / Medium (font-weight 500) -- Sidebar section headers: 13px / Semibold (600) — currently 11px -- Type pills: 11px / IBM Plex Mono / normal weight / ALL CAPS -- Editor H1: 32px / Bold / lh 1.2 -- Editor H2: 24px / Semibold / lh 1.3 -- Editor body: 16px / Regular / lh 1.6 -- Info bar / breadcrumb: 12px -- Status bar: 11px - -### Panel Widths -| Panel | Design | Current | -|---|---|---| -| Sidebar | 250px | 250px ✅ | -| NoteList | 300px | 300px ✅ | -| Editor | flexible | flexible ✅ | -| Inspector | 260px (design) / 280px (spec) | 280px ✅ | - -### Border Radius Scale -- 4px (sm) — chips -- 6px (md) — buttons, inputs -- 8px (lg) — cards, dialogs -- 9999px — pills, badges (full-round) -- 16px — larger badges - ---- - -## Difference Map - -### 1. NEW: Status Bar (bottom of app) -**Files**: New component `StatusBar.tsx`, `App.tsx`, `App.css` -- 30px height, `bg: --sidebar`, `border-top: 1px --border` -- **Left**: box icon + "v0.4.2" | git-branch + "main" | refresh-cw (green) + "Synced 2m ago" -- **Right**: sparkles (purple) + "Claude Sonnet 4" | file-text + "1,247 notes" | bell icon | settings icon -- Padding: 0 8px, items aligned center, gap 12px between items -- Font: Inter 11px, text color `--muted-foreground` -- Separators: "|" in `--border` color -- **All icons**: Lucide, 13-14px - -### 2. NEW: Tab Bar (top of editor panel) -**Files**: `Editor.tsx` -- 45px height, `bg: --sidebar`, `border-bottom: 1px --sidebar-border` -- **Active tab**: `bg: --background`, border-right 1px `--border`, text 12px/500 `--foreground`, X close icon (14px lucide) -- **Inactive tab**: no fill, border-right + border-bottom 1px `--sidebar-border`, text 12px/normal `--muted-foreground`, X icon opacity 0 (show on hover) -- **Spacer**: fills remaining width, border-bottom 1px `--border` -- **Controls area** (right): border-left + border-bottom 1px `--border`, gap 12px, padding 0 12px - - Plus icon (Phosphor, 16px) - - Columns/split icon (Phosphor, 16px) — **disabled placeholder** - - Arrows-out-simple/expand icon (Phosphor, 16px) — **disabled placeholder** - -### 3. NEW: Breadcrumb Bar (below tab bar, above editor content) -**Files**: `Editor.tsx` -- 45px height, `bg: --background`, `border-bottom: 1px --border` -- Padding: 6px 16px -- **Left (breadcrumb)**: "Project" (12px, muted) › "Laputa App" (12px/500, foreground) · "1,284 words" (12px, muted) · "M" (12px/600, `--accent-yellow`) — M only when file modified -- **Right (actions)**: gap 12px, each 16px Phosphor icon in `--muted-foreground` - - magnifying-glass (search in file) - - git-branch (version history) — **disabled placeholder** - - cursor-text (focus mode) — **disabled placeholder** - - sparkle (AI assist) — **disabled placeholder** - - dots-three (more options) — **disabled placeholder** - -### 4. Sidebar Restructure -**Files**: `Sidebar.tsx` - -#### Header changes: -- Current: "Laputa" title + theme toggle button -- New: "Laputa" title (17px/700, -0.3 ls) + search icon (16px Phosphor magnifying-glass) + settings/gear icon (16px) -- Theme toggle moved elsewhere (or removed from header) -- Padding: 12px 16px, height 45px, border-bottom 1px - -#### Search bar added: -- Below header, padding 6px 12px, border-bottom 1px -- Input with magnifying-glass icon prefix, 13px text, placeholder "Search notes..." -- Height ~32px, border-radius 6px, bg `--secondary` - -#### Navigation section restructured: -**Current**: flat list of filters (All Notes, People, Events, Changes, Favorites, Trash) -**New**: Two items in top nav: -- "All Notes" — file-text icon (Phosphor 16px) + label 13px/500 + count badge (pill, bg `--secondary`, 10px text) -- "Favorites" — star icon (Phosphor 16px) + same style - -#### Section groups restructured: -**Current**: PROJECTS, EXPERIMENTS, RESPONSIBILITIES, PROCEDURES as expandable sections with items listed under each -**New**: Collapsible groups with consistent pattern: -- Each group: chevron-right (12px Lucide) + icon (18px Phosphor, bold) + label (13px/600) + count badge (pill) -- **Projects** — folder-open icon (Phosphor) -- **Experiments** — flask icon (Phosphor) -- **Responsibilities** — target icon (Phosphor) — **currently not in sidebar** -- **Procedures** — arrows-clockwise icon (Phosphor) -- **People** — users icon (Phosphor) — **moved from filter to section group** -- **Events** — calendar-blank icon (Phosphor) — **moved from filter to section group** -- **Topics** — tag icon (Phosphor) — **currently at bottom, now integrated as a group** - -Each group has: -- Container: padding 4px 6px, border-bottom 1px (disabled in some), vertical layout, gap 2px -- Header row: padding 6px 16px, corner-radius 4px, gap 8px, justify space-between -- Badge: height 20px, bg `--secondary`, corner-radius 9999px, padding 0 6px - -#### Removed from sidebar: -- "Untagged" filter — not in new design -- "Changes" filter — not in new design (modified files shown elsewhere) -- "Trash" filter — not in new design -- "People" as top-level filter — now a collapsible section group -- "Events" as top-level filter — now a collapsible section group - -#### Commit button: -- Same concept but refined: padding 12px, border-top 1px -- Button: fill `--primary`, corner-radius 6px, gap 6px, padding 8px 16px -- Icon: git-commit-horizontal (Lucide 14px) in `--primary-foreground` -- Text: "Commit & Push" (13px/500) -- Badge: bg `#ffffff40`, corner-radius 9px, text `--white` 10px/600 - -### 5. NoteList Changes -**Files**: `NoteList.tsx` - -#### Header: -- Current: title + count badge + create button -- New: "Notes" title (14px/600) + search icon (16px Phosphor) + plus icon (16px Phosphor) — gap 12px -- No separate count badge in header - -#### Search: -- Current: always-visible search input below header -- New: search icon in header (search may toggle inline or use command palette) -- **Remove the always-visible search input** or keep it hidden until search icon clicked - -#### Type pills: -- Current: rounded-full, border, `text-[11px]`, system font, "Projects 4" format -- New: `IBM Plex Mono` font, 11px, ALL CAPS format "ALL 24" / "PROJECTS 4" / "NOTES 12" / "EVENTS 5" -- Active pill: `bg: #4a9eff18` (blue tint), `border: 1px --primary`, text `--primary` -- Inactive pill: `border: 1px --border`, text `--muted-foreground` -- Pill padding: 2px 10px, corner-radius 9999px -- Height: ~18px (compact) -- Layout: absolute positioned at x offsets (12, 76, 166, 243) within 45px height container — effectively a horizontal scrollable row - -#### Note items: -- Selected: `bg: #2383E212` (very light blue), left accent bar 3px `#2383E2`, title 13px/600 -- Normal: border-bottom 1px `#E9E9E7`, title 13px/500, time 11px, snippet 12px/lh1.5 -- Padding: 10px 16px -- **No type badge** on individual items (simplified) -- **No status text** on items - -### 6. Editor Content Area -**⚠️ SKIP — Keep editor as-is. Editor changes in the design are NOT intentional.** - -### 7. Inspector Refinements -**Files**: `Inspector.tsx` - -#### Header: -- Current: collapsed toggle + title -- New: sliders-horizontal icon (16px Phosphor) + "Properties" (13px/600, `--muted-foreground`) + X close button (16px Phosphor) -- Height 45px, border-bottom 1px, padding 0 12px, gap 8px - -#### Properties section: -- Key-value rows: label (12px, muted) — value (12px, foreground), space-between -- Status badge: colored bg (e.g., `--accent-green-light`) with colored text (e.g., `--accent-green`), rounded, padding 1px 6px, 10px font -- "+ Add property" button: full-width, border 1px `--border`, corner-radius 6px, padding 6px 12px, centered text (12px, muted) - -#### Relationships section: -- Group title: 12px/600 foreground -- Link buttons: full-width, bg `--accent-blue-light`, corner-radius 6px, padding 6px 10px, text `--primary` 12px/500, icon (tag/flask, Phosphor 14px, 0.5 opacity) -- "+ Link existing" button: border 1px `--border`, corner-radius 6px, same padding - -#### Backlinks: -- Title: "Backlinks" 12px/600 + count 11px/500 muted -- Items: text `--primary` 12px - -#### History: -- Title: "History" 12px/600 -- Items: left border 2px `--border`, padding-left 10px -- Hash line: 11px foreground -- Date line: 10px muted - -### 8. Icon Library Change -**Current**: Lucide React throughout -**New**: **SF Symbols** (Apple's native icon set) for all new/redesigned icons. Use `sf-symbols-react` or inline SVGs extracted from SF Symbols app. - -**Note**: The Pencil design used Phosphor as a placeholder — Luca's intent is SF Symbols throughout. Map Phosphor names to SF Symbol equivalents: -- `magnifying-glass` → `magnifyingglass` -- `star` → `star.fill` -- `folder-open` → `folder` -- `flask` → `flask` -- `target` → `target` -- `arrows-clockwise` → `arrow.clockwise` -- `users` → `person.2` -- `calendar-blank` → `calendar` -- `tag` → `tag` -- `plus` → `plus` -- `columns` → `rectangle.split.2x1` -- `arrows-out-simple` → `arrow.up.left.and.arrow.down.right` -- `sliders-horizontal` → `slider.horizontal.3` -- `cursor-text` → `character.cursor.ibeam` -- `sparkle` → `sparkles` -- `dots-three` → `ellipsis` -- `git-branch` → `arrow.triangle.branch` -- `gear` → `gearshape` - -**Action**: Find the best approach for SF Symbols in React/Tauri (e.g., `sf-symbols-react`, SVG extraction, or native font) - ---- - -## Implementation Phases - -### Phase 1: Theme & Typography Updates -**Scope**: CSS variables, fonts, colors — no structural changes -**Files**: `src/index.css`, `index.html` (or font import) -**Estimated effort**: 1 Claude Code session - -1. **Add IBM Plex Mono font** — add Google Fonts import or npm package -2. **Update color variables in `index.css`**: - - `:root` (light): `--primary: #155DFF`, `--accent-green: #00B38B`, `--accent-purple: #A932FF`, `--accent-blue: #155DFF` - - `.dark`: same primary `#155DFF`, accent-green `#00B38B`, accent-purple `#A932FF` - - Add new variables: `--accent-yellow`, `--accent-blue-light`, `--accent-green-light`, `--accent-purple-light`, `--accent-red-light`, `--accent-yellow-light` (both modes) - - Update all `--ring`, `--sidebar-primary`, `--sidebar-ring` to match new primary - - Update app-specific vars: `--accent-blue`, `--accent-green`, `--accent-purple`, `--accent-blue-bg` etc. -3. **Update `theme.json`**: - - `headings.h2.fontSize`: 27 → 24 - - `editor.paddingHorizontal`: 40 → 64 - - `editor.paddingVertical`: 20 → 32 -4. **Install Phosphor Icons**: `pnpm add @phosphor-icons/react` - -### Phase 2: Sidebar Restructure -**Scope**: Sidebar layout, navigation, icons -**Files**: `src/components/Sidebar.tsx` -**Estimated effort**: 1 Claude Code session - -1. **Header**: Replace theme toggle with search icon (Phosphor `MagnifyingGlass`) + gear icon. Move theme toggle to status bar settings or a menu. -2. **Add search input** below header: Phosphor magnifying-glass prefix, 13px, bg `--secondary`, border-radius 6px -3. **Top nav**: Reduce to "All Notes" (Phosphor `FileText` 16px) and "Favorites" (Phosphor `Star` 16px), each with count badge pill -4. **Section groups**: Restructure to new pattern with: - - Consistent chevron + Phosphor icon (18px, bold) + label (13px/600) + count badge - - Icons: `FolderOpen` (Projects), `Flask` (Experiments), `Target` (Responsibilities), `ArrowsClockwise` (Procedures), `Users` (People), `CalendarBlank` (Events), `Tag` (Topics) - - Move People and Events from filters to section groups - - Remove "Untagged", "Changes", "Trash" from nav -5. **Commit button**: Update styling to match design (padding, badge style) -6. **Remove** People/Events/Changes/Trash/Untagged filter items - -### Phase 3: NoteList Updates -**Scope**: Header, type pills, note item styling -**Files**: `src/components/NoteList.tsx` -**Estimated effort**: 1 Claude Code session - -1. **Header**: Replace badge + create button with search icon (Phosphor `MagnifyingGlass`) + plus icon (Phosphor `Plus`), gap 12px -2. **Remove or hide** the always-visible search input — add toggle behavior on search icon click -3. **Type pills**: Switch to IBM Plex Mono, ALL CAPS format ("ALL 24", "PROJECTS 4"), update active/inactive styles per design -4. **Selected note**: Update to `bg: #2383E212`, left accent 3px `#2383E2` (update to new primary), remove type badge and status text from items -5. **Note items**: Adjust padding to 10px 16px, snippet line-height 1.5, remove type/status badges from individual items - -### Phase 4: Editor — Tab Bar & Info Bar -**Scope**: New sub-components within Editor -**Files**: `src/components/Editor.tsx`, `src/components/Editor.css` -**Estimated effort**: 1 Claude Code session - -1. **Tab Bar** (top of editor): - - 45px, bg `--sidebar`, border-bottom - - Active tab: bg `--background`, border-right, 12px/500 text, X close button - - Inactive tab: muted text, hidden X (show on hover) - - Right controls: Plus + Split (disabled) + Expand (disabled) — Phosphor icons -2. **Info Bar** (below tab bar): - - 45px, bg `--background`, border-bottom - - Left: breadcrumb `Type › Title · N words · M` (M in accent-yellow when modified) - - Right: icon buttons (magnifying-glass functional, git-branch/cursor-text/sparkle/dots-three as **disabled placeholders** with `opacity: 0.4, cursor: not-allowed`) -3. **Adjust editor content padding** to 32px 64px per design - -### Phase 5: Status Bar + Inspector Polish -**Scope**: New StatusBar component, Inspector refinements -**Files**: New `src/components/StatusBar.tsx`, `App.tsx`, `App.css`, `src/components/Inspector.tsx` -**Estimated effort**: 1 Claude Code session - -1. **StatusBar.tsx** (new component): - - 30px fixed at bottom, bg `--sidebar`, border-top 1px - - Left: version + branch + sync status - - Right: AI model + notes count + bell (disabled placeholder) + settings (disabled placeholder) - - All Lucide icons 13-14px -2. **App.tsx / App.css**: Add StatusBar below main content, wrap layout in vertical flex (main panels + status bar) -3. **Inspector refinements**: - - Header: Phosphor `SlidersHorizontal` icon + "Properties" label + Phosphor `X` close - - Status badge: use `--accent-*-light` bg colors with `--accent-*` text - - "+ Add property" and "+ Link existing" buttons: match border/radius/padding from design - - History items: left-border 2px timeline style, 10px date text - -### Phase 6: Icon Migration & Cleanup -**Scope**: Replace Lucide icons with Phosphor where specified -**Files**: All components -**Estimated effort**: 1 Claude Code session - -1. **Audit all icon usage** across components -2. **Replace with Phosphor** where the design specifies (sidebar nav, section icons, NoteList header, editor toolbar icons, inspector) -3. **Keep Lucide** for: chevrons, X/close, tab close, status bar icons, git-commit-horizontal -4. **Remove unused Lucide imports** -5. **Visual verification**: Run `pnpm dev` and compare with `ui-design-screenshot.png` - ---- - -## New Features as Disabled Placeholders - -These buttons/icons appear in the design but don't have backend functionality yet. Add them as disabled UI elements: - -| Element | Location | Icon | Notes | -|---|---|---|---| -| Split view | Tab bar controls | Phosphor `Columns` | `opacity: 0.4, cursor: not-allowed, title="Coming soon"` | -| Expand/focus | Tab bar controls | Phosphor `ArrowsOutSimple` | Same | -| Git branch viewer | Info bar right | Phosphor `GitBranch` | Same | -| Focus mode | Info bar right | Phosphor `CursorText` | Same | -| AI assist | Info bar right | Phosphor `Sparkle` | Same | -| More options | Info bar right | Phosphor `DotsThree` | Same | -| Bell/notifications | Status bar right | Lucide `Bell` | Same | -| Settings | Status bar right | Lucide `Settings` | Same | -| Gear/settings | Sidebar header | Phosphor `Gear` | Same | - ---- - -## Files Inventory - -| File | Changes | -|---|---| -| `src/index.css` | Color variables, font import | -| `src/theme.json` | H2 size, editor padding | -| `index.html` | IBM Plex Mono font link (if using CDN) | -| `package.json` | Add `@phosphor-icons/react` | -| `src/App.tsx` | Add StatusBar, adjust layout | -| `src/App.css` | Vertical flex for status bar | -| `src/components/Sidebar.tsx` | Major restructure | -| `src/components/NoteList.tsx` | Header, pills, item styling | -| `src/components/Editor.tsx` | Add TabBar, InfoBar sections | -| `src/components/Editor.css` | Tab/info bar styles | -| `src/components/Inspector.tsx` | Header, badges, history styling | -| `src/components/StatusBar.tsx` | **NEW** | diff --git a/SF-SYMBOLS-MIGRATION.md b/SF-SYMBOLS-MIGRATION.md deleted file mode 100644 index 50d8e849..00000000 --- a/SF-SYMBOLS-MIGRATION.md +++ /dev/null @@ -1,130 +0,0 @@ -# SF Symbols Migration Plan - -> Current state: All icons use either **Phosphor Icons** (`@phosphor-icons/react`) or **Lucide React** (`lucide-react`). This document maps every icon to its SF Symbol equivalent for future migration. - ---- - -## Icon Audit Summary (Phase 6 — 2026-02-17) - -| Category | Count | Files | Status | -|---|---|---|---| -| Phosphor icons | 22 | `Sidebar.tsx`, `Editor.tsx`, `NoteList.tsx`, `Inspector.tsx` | All used, migrate to SF Symbols | -| Phosphor types | 1 (`IconProps`) | `Sidebar.tsx` | Type only — replace when migrating | -| Lucide (app components) | 4 | `Sidebar.tsx`, `Editor.tsx` | Evaluate per-icon | -| Lucide (StatusBar) | 7 | `StatusBar.tsx` | Keep Lucide per design | -| Lucide (shadcn/ui) | 7 | `ui/select.tsx`, `ui/dropdown-menu.tsx`, `ui/dialog.tsx` | Keep Lucide — library internals | -| **Total icon imports** | **41** | **8 files** | **0 unused** | - -**Unused imports found**: None. All icon imports are actively used in JSX. - ---- - -## Phosphor Icons — Current Usage - -These are the primary UI icons introduced during the redesign. All should migrate to SF Symbols. - -| Phosphor Icon | SF Symbol Equivalent | File(s) | Usage | -|---|---|---|---| -| `MagnifyingGlass` | `magnifyingglass` | `Sidebar.tsx`, `NoteList.tsx`, `Editor.tsx` | Search icon in sidebar header, note list header, editor info bar | -| `Gear` | `gearshape` | `Sidebar.tsx` | Settings icon in sidebar header (disabled placeholder) | -| `FileText` | `doc.text` | `Sidebar.tsx` | "All Notes" nav item icon | -| `Star` | `star.fill` | `Sidebar.tsx` | "Favorites" nav item icon | -| `FolderOpen` | `folder` | `Sidebar.tsx` | "Projects" section group icon | -| `Flask` | `flask` | `Sidebar.tsx` | "Experiments" section group icon | -| `Target` | `target` | `Sidebar.tsx` | "Responsibilities" section group icon | -| `ArrowsClockwise` | `arrow.clockwise` | `Sidebar.tsx` | "Procedures" section group icon | -| `Users` | `person.2` | `Sidebar.tsx` | "People" section group icon | -| `CalendarBlank` | `calendar` | `Sidebar.tsx` | "Events" section group icon | -| `Tag` | `tag` | `Sidebar.tsx` | "Topics" section group icon | -| `TagSimple` | `tag` | `Sidebar.tsx` | "Untagged" nav item icon | -| `Trash` | `trash` | `Sidebar.tsx` | "Trash" nav item icon | -| `Plus` | `plus` | `NoteList.tsx`, `Editor.tsx` | Create note button, new tab button | -| `Columns` | `rectangle.split.2x1` | `Editor.tsx` | Split view button (disabled placeholder) | -| `ArrowsOutSimple` | `arrow.up.left.and.arrow.down.right` | `Editor.tsx` | Expand/focus button (disabled placeholder) | -| `GitBranch` | `arrow.triangle.branch` | `Editor.tsx` | Version history button (disabled placeholder) | -| `CursorText` | `character.cursor.ibeam` | `Editor.tsx` | Focus mode button (disabled placeholder) | -| `Sparkle` | `sparkles` | `Editor.tsx` | AI assist button (disabled placeholder) | -| `DotsThree` | `ellipsis` | `Editor.tsx` | More options button (disabled placeholder) | -| `SlidersHorizontal` | `slider.horizontal.3` | `Inspector.tsx` | Inspector header icon | -| `X` (Phosphor) | `xmark` | `Inspector.tsx` | Inspector close button | -| `IconProps` (type) | n/a | `Sidebar.tsx` | TypeScript type for icon component props | - ---- - -## Lucide React — Current Usage - -### App Components - -These Lucide icons are used in custom app components. Some may migrate to SF Symbols; others are kept for specific reasons. - -| Lucide Icon | SF Symbol Equivalent | File | Usage | Migration Notes | -|---|---|---|---|---| -| `ChevronRight` | `chevron.right` | `Sidebar.tsx` | Section group expand chevron | Keep Lucide or migrate — small utility icon | -| `ChevronDown` | `chevron.down` | `Sidebar.tsx` | Section group collapse chevron | Keep Lucide or migrate — small utility icon | -| `GitCommitHorizontal` | `circle.dotted` | `Sidebar.tsx` | Commit & Push button icon | Keep Lucide or migrate | -| `X` (Lucide) | `xmark` | `Editor.tsx` | Tab close button | Keep Lucide or migrate | -| `Package` | `shippingbox` | `StatusBar.tsx` | App version indicator | Keep Lucide — status bar uses Lucide per design | -| `GitBranch` (Lucide) | `arrow.triangle.branch` | `StatusBar.tsx` | Git branch indicator | Keep Lucide — status bar uses Lucide per design | -| `RefreshCw` | `arrow.clockwise` | `StatusBar.tsx` | Sync status indicator | Keep Lucide — status bar uses Lucide per design | -| `Sparkles` (Lucide) | `sparkles` | `StatusBar.tsx` | AI model indicator | Keep Lucide — status bar uses Lucide per design | -| `FileText` (Lucide) | `doc.text` | `StatusBar.tsx` | Notes count indicator | Keep Lucide — status bar uses Lucide per design | -| `Bell` | `bell` | `StatusBar.tsx` | Notifications (disabled placeholder) | Keep Lucide — status bar uses Lucide per design | -| `Settings` | `gearshape` | `StatusBar.tsx` | Settings (disabled placeholder) | Keep Lucide — status bar uses Lucide per design | - -### shadcn/ui Components (Keep Lucide) - -These are standard shadcn/ui library components that use Lucide as their built-in icon system. These should **not** be migrated — they are part of the component library's internal implementation. - -| Lucide Icon | File | Usage | -|---|---|---| -| `CheckIcon` | `ui/select.tsx` | Selected item indicator | -| `ChevronDownIcon` | `ui/select.tsx` | Select trigger arrow, scroll-down button | -| `ChevronUpIcon` | `ui/select.tsx` | Scroll-up button | -| `CheckIcon` | `ui/dropdown-menu.tsx` | Checkbox item indicator | -| `ChevronRightIcon` | `ui/dropdown-menu.tsx` | Sub-menu trigger arrow | -| `CircleIcon` | `ui/dropdown-menu.tsx` | Radio item indicator | -| `XIcon` | `ui/dialog.tsx` | Dialog close button | - ---- - -## Approach Options for SF Symbols in React/Tauri - -### Option 1: `sf-symbols-react` npm package -- **Pros**: Drop-in React components, familiar API (``) -- **Cons**: Third-party package, may lag behind Apple's symbol updates, limited weight/rendering options -- **Status**: Check npm for current maintenance state before adopting - -### Option 2: SVG extraction from SF Symbols app -- **Pros**: Exact Apple-quality vectors, no runtime dependency, full control over styling -- **Cons**: Manual export process per icon, potential licensing concerns (SF Symbols license restricts use to Apple platforms), need to manage SVG sprite or individual files -- **How**: Export SVGs from the SF Symbols macOS app, create a `src/icons/` directory with individual SVG components or a sprite sheet - -### Option 3: Apple's SF Symbols font (native approach via Tauri) -- **Pros**: Pixel-perfect on macOS, automatic weight matching, system-native feel -- **Cons**: Only works on macOS (not cross-platform), requires Tauri native font access, won't render in browser dev mode -- **How**: Use CSS `font-family: "SF Pro"` with Unicode code points, or invoke native APIs from Tauri's Rust backend - -### Option 4: Hybrid — SVG in browser, native in Tauri -- **Pros**: Best of both worlds — browser dev mode uses SVGs, production Tauri build uses native SF Symbols -- **Cons**: More complex build setup, need to maintain two icon systems -- **How**: Build an `` wrapper component that checks `window.__TAURI__` and renders native or SVG accordingly - -### Recommendation -**Option 2 (SVG extraction)** is the most practical starting point: -- Laputa is a macOS-only Tauri app, so SF Symbols licensing applies (Apple platform) -- SVGs work in both browser dev mode and Tauri production -- No third-party dependency to maintain -- Can later upgrade to Option 4 (hybrid native) for perfect macOS integration - ---- - -## Migration Steps (Future) - -1. Export all needed SF Symbol SVGs from the SF Symbols macOS app -2. Create `src/icons/sf-symbols/` with a React component per icon (or a single sprite) -3. Build a thin `` wrapper for consistent API -4. Replace Phosphor imports file-by-file (Sidebar → NoteList → Editor → Inspector) -5. Decide whether to also replace Lucide in StatusBar and utility icons (chevrons, X) -6. Keep Lucide in shadcn/ui components — do not modify those -7. Once all Phosphor icons are replaced, remove `@phosphor-icons/react` from dependencies -8. Run `pnpm build` and visually verify all icons render correctly diff --git a/__pycache__/select_demo_notes.cpython-310.pyc b/__pycache__/select_demo_notes.cpython-310.pyc deleted file mode 100644 index 56cab949..00000000 Binary files a/__pycache__/select_demo_notes.cpython-310.pyc and /dev/null differ diff --git a/analyze_broken_links.py b/analyze_broken_links.py deleted file mode 100644 index 9d7ea4dc..00000000 --- a/analyze_broken_links.py +++ /dev/null @@ -1,41 +0,0 @@ -#!/usr/bin/env python3 -"""Analyze which broken links are to existing vs non-existent notes.""" - -import sys -sys.path.insert(0, '/Users/luca/Workspace/laputa-app') -from select_demo_notes import build_graph, select_notes, LAPUTA_ROOT - -nodes, link_lookup = build_graph() -selected = select_notes(nodes, link_lookup, target_count=1000) - -print("\n🔍 Analyzing broken links...") - -# Count links by type -total_outlinks = 0 -resolved = 0 -unresolved_but_exists = 0 -unresolved_not_exists = 0 - -for path in selected: - node = nodes[path] - for link_ref in node['outlinks']: - total_outlinks += 1 - - if link_ref in link_lookup: - target = link_lookup[link_ref] - if target in selected: - resolved += 1 - else: - # Exists but not in selection - unresolved_but_exists += 1 - else: - # Doesn't exist at all - unresolved_not_exists += 1 - -print(f"Total outlinks: {total_outlinks}") -print(f" Resolved (in selection): {resolved} ({resolved/total_outlinks*100:.1f}%)") -print(f" Unresolved but note exists: {unresolved_but_exists} ({unresolved_but_exists/total_outlinks*100:.1f}%)") -print(f" Unresolved - note doesn't exist: {unresolved_not_exists} ({unresolved_not_exists/total_outlinks*100:.1f}%)") - -print(f"\nIf we include ALL existing notes (not just selected):") -print(f" Max possible resolution: {(resolved + unresolved_but_exists)/total_outlinks*100:.1f}%") diff --git a/screenshots/phase-1.png b/screenshots/phase-1.png deleted file mode 100644 index 2e8e5eb7..00000000 Binary files a/screenshots/phase-1.png and /dev/null differ diff --git a/screenshots/phase-2.png b/screenshots/phase-2.png deleted file mode 100644 index 43e4bc58..00000000 Binary files a/screenshots/phase-2.png and /dev/null differ diff --git a/screenshots/phase-3.png b/screenshots/phase-3.png deleted file mode 100644 index 77d98f50..00000000 Binary files a/screenshots/phase-3.png and /dev/null differ