# 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** |