Files

C. Cassel 0d38bd3108 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

3.9 KiB

Raw Blame History

1.2 — Status Bar

Previous Step: ← App Shell

Page Metadata

Property	Value
Scenario	01 — Workspace Shell
Page Number	1.2
Platform	Web (PWA), portable to macOS/Windows
Page Type	Persistent UI Strip (embedded in App Shell)
Viewport	All breakpoints

Overview

Page Purpose: Provide at-a-glance contextual information about the current document, engine status, and workspace state. Acts as a persistent information bar at the bottom of the workspace.

User Situation: User is working in the editor and glances down for context — current line/column, whether the engine is ready, what theme is active, and document stats.

Success Criteria:

Information readable at a glance without interrupting flow
No interactive elements that accidentally trigger (info-only, with 2 clickable shortcuts)
Consistent across all themes

Layout Structure

┌──────────────────────────────────────────────────────────────┐
│  [Ln 12, Col 8]  [42 lines]  │  [Engine ● Ready]  [Dark 🎨] │
│  ← left-aligned info          │         right-aligned info →  │
└──────────────────────────────────────────────────────────────┘

Height: 24px. Full width. Background: var(--bg-secondary). Border-top: 1px solid var(--border).

Spacing

Property	Token	Pixels
Height	—	24px
Padding horizontal	space-md	12px
Item gap	space-md	12px
Dot size (engine status)	—	6px
Dot margin-right	space-2xs	4px

Typography

Element	Size	Weight	Typeface	Color
All status text	text-3xs	400	system mono	var(--text)
Engine status (ready)	text-3xs	400	system mono	var(--success)
Engine status (loading)	text-3xs	400	system mono	var(--warning)
Theme name	text-3xs	500	system mono	var(--text)

Status Items

Left Group

OBJECT ID: statusbar-left

Item	Content	Update Trigger
Cursor position	`Ln {line}, Col {col}`	Cursor movement
Line count	`{n} lines`	Document change
Selection (conditional)	`{n} selected`	When text selected

Right Group

OBJECT ID: statusbar-right

Item	Content	Behavior
Engine status	`● Ready` (green dot) or `◌ Loading...` (amber, pulse)	Auto-updates on engine state change
Theme indicator	`{Theme Name} 🎨`	Click → opens theme picker (same as header button)
Offline (conditional)	`📡 Offline`	Only visible when offline

States

State	Engine Indicator	Additional
Ready	● green dot, "Ready"	—
Loading	◌ amber dot, pulse animation, "Loading..."	—
Error	● red dot, "Engine error"	Tooltip with error message
Offline	● green dot, "Ready"	+ "📡 Offline" appended

Responsive

Breakpoint	Behavior
>= 768px	Full status bar, all items visible
< 768px	Simplified: cursor position + engine dot only. Theme and line count hidden.

Technical Notes

Status bar reads from editor state (cursor, selection, line count) and engine hook (ready, error)
Theme indicator is the only clickable element — keeps status bar non-disruptive
On macOS/Windows: maps to native status bar or window title bar info