feat(web): implement complete workspace with themes, tabs, sidebar, and mobile

Transform CalcText from a single-document calculator into a full workspace application with multi-document support, theming, and responsive mobile experience. - Theme system: 5 presets (Light, Dark, Matrix, Midnight, Warm) + accent colors - Document model with localStorage persistence and auto-save - Tab bar with keyboard shortcuts (Ctrl+N/W/Tab/1-9), rename, close - Sidebar with search, recent, favorites, folders, templates, drag-and-drop - 5 templates: Budget, Invoice, Unit Converter, Trip Planner, Loan Calculator - Status bar with cursor position, engine status, dedication to Igor Cassel - Results panel: type-specific colors, click-to-copy, error hints - Format toolbar: H, B, I, //, color labels with live preview toggle - Syntax highlighting using theme CSS variables - Error hover tooltips - Mobile: bottom results tray, sidebar drawer, touch targets, safe areas - Docker multi-stage build (Rust WASM + Vite + Nginx) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 09:12:05 -04:00
parent 806e2f1ec6
commit 0d38bd3108
78 changed files with 8175 additions and 421 deletions
--- a/_bmad-output/_progress/00-design-log.md
+++ b/_bmad-output/_progress/00-design-log.md
@@ -0,0 +1,117 @@
+# Design Log
+
+**Project:** CalcText
+**Started:** 2026-03-17
+**Method:** Whiteport Design Studio (WDS)
+
+---
+
+## Backlog
+
+> Business-value items. Add links to detail files if needed.
+
+- [x] Create simplified product brief (brownfield) — Phase 1
+- [x] Define workspace scenarios — Phase 3
+- [x] Design app shell (3-panel layout: sidebar + editor + results) — Phase 4
+- [x] Design theme engine (Light, Dark, Matrix, custom) — Phase 4
+- [x] Design tab system for multi-document — Phase 4
+- [x] Design file sidebar with folders — Phase 4
+- [x] Design elevated results panel — Phase 4
+- [x] Design mobile experience — Phase 4
+
+---
+
+## Current
+
+| Task | Started | Agent |
+|------|---------|-------|
+| — | — | — |
+
+> Brownfield codebase scan completed 2026-03-17. See `A-Product-Brief/01-brownfield-analysis.md`
+
+**Rules:** Mark what you start. Complete it when done (move to Log). One task at a time per agent.
+
+---
+
+## Design Loop Status
+
+> Per-page design progress. Updated by agents at every design transition.
+
+| Scenario | Step | Page | Status | Updated |
+|----------|------|------|--------|---------|
+| 01-workspace-shell | 1.1 | App Shell | specified | 2026-03-17 |
+| 01-workspace-shell | 1.2 | Status Bar | specified | 2026-03-17 |
+| 02-calc-experience | 2.1 | Editor | specified | 2026-03-17 |
+| 02-calc-experience | 2.2 | Results Panel | specified | 2026-03-17 |
+| 03-doc-management | 3.1 | Tab Bar & Lifecycle | specified | 2026-03-17 |
+| 04-file-org | 4.1 | Sidebar | specified | 2026-03-17 |
+| 04-file-org | 4.2 | Templates | specified | 2026-03-17 |
+| 05-theming | 5.1 | Theme System | specified | 2026-03-17 |
+| 06-mobile | 6.1 | Mobile Shell | specified | 2026-03-17 |
+
+**Status values:** `discussed` -> `wireframed` -> `specified` -> `explored` -> `building` -> `built` -> `approved` | `removed`
+
+**How to use:**
+- **Append a row** when a page reaches a new status (do not overwrite — latest row per page is current status)
+- **Read on startup** to see where the project stands and what to suggest next
+
+---
+
+## Log
+
+### 2026-03-18 — Full workspace implementation complete
+- Theme system: 5 presets (Light, Dark, Matrix, Midnight, Warm) + 6 accent colors
+- Document model with localStorage persistence
+- Tab bar with multi-document support, rename, keyboard shortcuts
+- Sidebar with search, recent, favorites, folders, templates, drag-and-drop
+- 5 templates: Budget, Invoice, Unit Converter, Trip Planner, Loan Calculator
+- Status bar with cursor position, engine status, dedication to Igor Cassel
+- Results panel redesign: type-specific colors, click-to-copy
+- Format toolbar: H, B, I, //, color labels
+- Live Preview toggle (markdown → formatted)
+- Syntax highlighting using theme CSS variables
+- Error hover tooltips
+- Mobile experience: bottom results tray, sidebar drawer, touch targets, safe areas
+- Alignment toolbar re-integrated in header
+
+### 2026-03-17 — All 6 scenarios designed (Phase 4 complete)
+- 8 page specifications created across 6 scenarios
+- App Shell, Status Bar, Editor, Results Panel, Tab Bar, Sidebar, Templates, Theme System, Mobile
+- 5 preset themes defined (Light, Dark, Matrix, Midnight, Warm)
+- 7 accent color presets
+- Complete localStorage schema
+- Mobile experience redesigned: bottom results tray, sidebar drawer, touch gestures
+- 14 keyboard shortcuts defined
+- 5 templates with full content
+
+### 2026-03-17 — Simplified product brief completed (Phase 1)
+- Scope: workspace evolution (themes, tabs, sidebar, persistence)
+- Strategy: web-first, then replicate to macOS and Windows
+- Deferred: accounts, cloud sync, collaboration (backend needed)
+- Saved to `A-Product-Brief/project-brief.md`
+
+### 2026-03-17 — Brownfield codebase scan completed
+- Full web app scan: 6 components, 4 editor extensions, 3 hooks, 15 CSS tokens
+- Cross-platform comparison with macOS native app
+- Key findings: results panel too loud, no manual dark mode toggle, mobile experience gutted, no document model
+- Analysis saved to `A-Product-Brief/01-brownfield-analysis.md`
+
+### 2026-03-17 — Project initialized (Phase 0)
+- Type: brownfield
+- Complexity: complex (web application)
+- Tech stack: React 19 + CodeMirror 6 + Vite 7 + WASM
+- Component library: Custom CSS (CSS custom properties)
+- Brief level: simplified
+- Stakes: enterprise/high
+- Involvement: autonomous execution
+- Brainstorm session established product vision: evolve from single-document calculator to full workspace with themes, tabs, sidebar, file management
+
+---
+
+## About This Folder
+
+- **This file** — Single source of truth for project progress
+- **agent-experiences/** — Compressed insights from design discussions (dated files)
+- **wds-project-outline.yaml** — Project configuration from Phase 0 setup
+
+**Do not modify `wds-project-outline.yaml`** — it is the source of truth for project configuration.
--- a/_bmad-output/_progress/wds-project-outline.yaml
+++ b/_bmad-output/_progress/wds-project-outline.yaml
@@ -0,0 +1,50 @@
+# WDS Project Outline
+# Generated: 2026-03-17
+# Phase 0: Project Setup
+
+project_name: CalcText
+project_type: brownfield
+product_complexity: complex
+tech_stack: react
+component_library: custom
+root_folder: "_bmad-output"
+brief_level: simplified
+design_system_mode: recommended
+
+existing_materials:
+  has_materials: false
+  notes: "Brainstorm insights from party mode session available in conversation context"
+
+project_context:
+  stakes: enterprise
+  description: "Cross-platform notepad calculator evolving into a full workspace application"
+
+working_relationship:
+  involvement: autonomous
+  user_role: project_manager
+  recommendation_style: direct_guidance
+  stakeholder_notes: null
+
+# Brownfield Context
+brownfield:
+  existing_product: "CalcText Web App"
+  tech_stack_detail: "React 19 + CodeMirror 6 + Vite 7 + WASM engine"
+  current_state: "Two-column editor (input + results), PWA, light/dark theme"
+  evolution_goals:
+    - "Multi-theme system (Light, Dark, Matrix, custom)"
+    - "Tab system for multiple calctext documents"
+    - "File sidebar with folders and organization"
+    - "User accounts and cloud persistence (deferred - backend)"
+    - "Elevated results panel design"
+    - "Mobile experience redesign"
+
+# Phase Routing
+phases:
+  phase_0: completed
+  phase_1: "simplified brief (brownfield)"
+  phase_2: skipped
+  phase_3: "scenarios from brownfield analysis"
+  phase_4: "UX design with Freya"
+  phase_5: "custom component development"
+  phase_7: "design system extraction"
+  phase_8: "product evolution entry point"