chore: remove stale files and planning docs from repo
- Remove CODE-HEALTH-REPORT.md, REDESIGN-PLAN.md, SF-SYMBOLS-MIGRATION.md (stale planning artifacts) - Remove analyze_broken_links.py, select_demo_notes*.py, final_selection.py (demo-vault helper scripts) - Remove screenshots/phase-*.png (old design screenshots) - Remove __pycache__/ (Python bytecode) - Remove (HOME)/.tauri/*.key from tracking (private signing keys — should never be in git) - Update .gitignore to prevent future recurrence of all the above
This commit is contained in:
Test
@@ -1 +0,0 @@
|
||||
dW50cnVzdGVkIGNvbW1lbnQ6IHJzaWduIGVuY3J5cHRlZCBzZWNyZXQga2V5ClJXUlRZMEl5V3BxWUNBZU1LZWxOK3ZEZTZkdGhzM2l6cnpVUmIvUEtTTWgzLzNEU1VoZ0FBQkFBQUFBQUFBQUFBQUlBQUFBQUFpN2xxclpGK3YzRERub1EvZFdsdVdORktuOHZYVlB0S2U2QkhNdlMreElkRVdabTh6UllNYzNFb2VWYTVCayszNUpyOC94Z0dJS2pVQ3NSKzdKNEszZHpDZll0aGdtV1J6bWFXODc4VWJpOVFYdUhEai9tNHQ2U3ZRbVd1NHBkR01YS2ZrUDlPRVU9Cg==
|
||||
@@ -1 +0,0 @@
|
||||
dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDVCQTVDRkIzNkFGRTYwQjUKUldTMVlQNXFzOCtsVzROZmJLR0JFVGw1a1UzKzViY3dUcWFoaUttRFhhVk8rVUhrc29QL1FPeXUK
|
||||
15
.gitignore
vendored
15
.gitignore
vendored
@@ -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)/
|
||||
|
||||
@@ -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`.*
|
||||
362
REDESIGN-PLAN.md
362
REDESIGN-PLAN.md
@@ -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** |
|
||||
@@ -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 (`<SFSymbol name="magnifyingglass" />`)
|
||||
- **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 `<Icon>` 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 `<SFIcon name="..." size={} />` 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
|
||||
Binary file not shown.
@@ -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}%")
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
Reference in New Issue
Block a user