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>
This commit is contained in:
117
_bmad-output/_progress/00-design-log.md
Normal file
117
_bmad-output/_progress/00-design-log.md
Normal file
@@ -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.
|
||||
Reference in New Issue
Block a user