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>
125 lines
3.9 KiB
Markdown
125 lines
3.9 KiB
Markdown
# 1.2 — Status Bar
|
|
|
|
**Previous Step:** ← [App Shell](../1.1-app-shell/1.1-app-shell.md)
|
|
|
|
---
|
|
|
|
## 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
|
|
|
|
---
|
|
|
|
**Previous Step:** ← [App Shell](../1.1-app-shell/1.1-app-shell.md)
|
|
|
|
---
|
|
|
|
_Created using Whiteport Design Studio (WDS) methodology_
|