C. Cassel
0d38bd3108
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>
43 lines
1.9 KiB
Markdown
43 lines
1.9 KiB
Markdown
# UX Scenarios: CalcText
|
|
|
|
> Design experiences, not screens — every page serves a user with a goal and an emotion.
|
|
|
|
**Created:** 2026-03-17
|
|
**Phase:** 3 (Scenario Outline) + Phase 4 (UX Design)
|
|
**Agents:** Freya (Page Specifications)
|
|
|
|
---
|
|
|
|
## Scenarios
|
|
|
|
| # | Scenario | Pages | Description |
|
|
|---|----------|-------|-------------|
|
|
| 01 | Workspace Shell | App Shell, Status Bar | The overall 3-panel layout that contains everything |
|
|
| 02 | Calculation Experience | Editor, Results Panel | The core — typing calculations, seeing results |
|
|
| 03 | Document Management | Tab Bar, New Document, Rename/Delete | Multi-document workflow |
|
|
| 04 | File Organization | Sidebar, Folder Tree, Templates, Recent/Favorites | Organizing calctext files |
|
|
| 05 | Theming | Theme Picker, Preset Themes, Custom Theme, Accent Color | Personalizing the workspace |
|
|
| 06 | Mobile Experience | Mobile Shell, Mobile Results, Mobile Sidebar | Responsive/touch adaptation |
|
|
|
|
---
|
|
|
|
## Page Index
|
|
|
|
_Updated as page specifications are created during Phase 4._
|
|
|
|
| Scenario | Page | Status | File |
|
|
|----------|------|--------|------|
|
|
| 01 | App Shell | Specified | 01-workspace-shell/1.1-app-shell/1.1-app-shell.md |
|
|
| 01 | Status Bar | Specified | 01-workspace-shell/1.2-status-bar/1.2-status-bar.md |
|
|
| 02 | Editor | Specified | 02-calculation-experience/2.1-editor/2.1-editor.md |
|
|
| 02 | Results Panel | Specified | 02-calculation-experience/2.2-results-panel/2.2-results-panel.md |
|
|
| 03 | Tab Bar & Document Lifecycle | Specified | 03-document-management/3.1-tab-bar/3.1-tab-bar.md |
|
|
| 04 | Sidebar & File Organization | Specified | 04-file-organization/4.1-sidebar/4.1-sidebar.md |
|
|
| 04 | Templates | Specified | 04-file-organization/4.2-templates/4.2-templates.md |
|
|
| 05 | Theme System | Specified | 05-theming/5.1-theme-system/5.1-theme-system.md |
|
|
| 06 | Mobile Experience | Specified | 06-mobile-experience/6.1-mobile-shell/6.1-mobile-shell.md |
|
|
|
|
---
|
|
|
|
_Created using Whiteport Design Studio (WDS) methodology_
|