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:
@@ -0,0 +1,219 @@
|
||||
# 4.2 — Templates
|
||||
|
||||
**Previous Step:** ← [Sidebar](../4.1-sidebar/4.1-sidebar.md)
|
||||
**Next Step:** → [Theme System](../../05-theming/5.1-theme-system/5.1-theme-system.md)
|
||||
|
||||
---
|
||||
|
||||
## Page Metadata
|
||||
|
||||
| Property | Value |
|
||||
|----------|-------|
|
||||
| **Scenario** | 04 — File Organization |
|
||||
| **Page Number** | 4.2 |
|
||||
| **Platform** | Web (PWA), portable to macOS/Windows |
|
||||
| **Page Type** | Sidebar Section + Modal (template preview) |
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
**Page Purpose:** Provide ready-made starting documents that showcase CalcText's capabilities and help users get productive immediately. Templates are the product's best onboarding tool — they show by example.
|
||||
|
||||
**Success Criteria:**
|
||||
- First-time user finds a relevant template within 10 seconds
|
||||
- Templates demonstrate the product's unique features (variables, units, currencies, aggregators)
|
||||
- Using a template creates a new document (never modifies the template)
|
||||
|
||||
---
|
||||
|
||||
## Template Library
|
||||
|
||||
| Template | Description | Showcases |
|
||||
|----------|-------------|-----------|
|
||||
| **Budget** | Monthly income/expenses with categories | Variables, aggregators (sum, total), percentages |
|
||||
| **Invoice** | Service invoice with line items and tax | Variables, multiplication, percentages, currency |
|
||||
| **Unit Converter** | Common conversions with examples | Unit expressions (kg to lb, km to mi, °C to °F) |
|
||||
| **Trip Planner** | Travel budget with currency conversion | Currency conversion, date math, variables |
|
||||
| **Loan Calculator** | Mortgage/loan with monthly payments | Financial functions, percentages, variables |
|
||||
| **Blank** | Empty document | — (clean start) |
|
||||
|
||||
---
|
||||
|
||||
## Sidebar Templates Section
|
||||
|
||||
**OBJECT ID:** `sidebar-templates`
|
||||
|
||||
| Property | Value |
|
||||
|----------|-------|
|
||||
| Section header | "Templates" with 📋 icon |
|
||||
| Collapsible | Yes |
|
||||
| Default | Expanded on first launch, collapsed after first document created |
|
||||
| Item height | 32px (slightly taller than files — more padding) |
|
||||
| Item icon | Colored dot per template (visual distinction) |
|
||||
| Item label | Template name, text-xs |
|
||||
| Item sublabel | Brief description, text-3xs, muted, truncated |
|
||||
|
||||
### Template Item Interaction
|
||||
|
||||
| Action | Behavior |
|
||||
|--------|----------|
|
||||
| Click | Create new document from template. Title = template name. Opens in new tab. |
|
||||
| Hover | Show full description in tooltip |
|
||||
| Right-click | "Preview" option |
|
||||
|
||||
---
|
||||
|
||||
## Template Colors (Icon Dots)
|
||||
|
||||
| Template | Dot Color |
|
||||
|----------|-----------|
|
||||
| Budget | #10b981 (emerald) |
|
||||
| Invoice | #6366f1 (indigo) |
|
||||
| Unit Converter | #0d9488 (teal) |
|
||||
| Trip Planner | #f59e0b (amber) |
|
||||
| Loan Calculator | #7c3aed (violet) |
|
||||
| Blank | var(--border) (gray) |
|
||||
|
||||
---
|
||||
|
||||
## Template Content
|
||||
|
||||
### Budget Template
|
||||
```
|
||||
# Monthly Budget
|
||||
|
||||
// Income
|
||||
salary = 5000
|
||||
freelance = 1200
|
||||
total_income = salary + freelance
|
||||
|
||||
// Housing
|
||||
rent = 1500
|
||||
utilities = 150
|
||||
insurance = 80
|
||||
|
||||
// Living
|
||||
groceries = 400
|
||||
transport = 120
|
||||
subscriptions = 45
|
||||
|
||||
// Summary
|
||||
total_expenses = sum
|
||||
savings = total_income - total_expenses
|
||||
savings_rate = savings / total_income
|
||||
```
|
||||
|
||||
### Invoice Template
|
||||
```
|
||||
# Invoice #001
|
||||
|
||||
// Client: [Client Name]
|
||||
// Date: [Date]
|
||||
|
||||
// Services
|
||||
web_design = 2500
|
||||
development = 4000
|
||||
consulting = 150 * 8
|
||||
|
||||
// Expenses
|
||||
hosting = 29.99
|
||||
domain = 12.00
|
||||
|
||||
subtotal = sum
|
||||
|
||||
// Tax
|
||||
tax_rate = 10%
|
||||
tax = subtotal * tax_rate
|
||||
total = subtotal + tax
|
||||
```
|
||||
|
||||
### Unit Converter Template
|
||||
```
|
||||
# Unit Converter
|
||||
|
||||
// Weight
|
||||
75 kg in lb
|
||||
2.5 lb in kg
|
||||
100 g in oz
|
||||
|
||||
// Distance
|
||||
10 km in mi
|
||||
26.2 mi in km
|
||||
5280 ft in m
|
||||
|
||||
// Temperature
|
||||
100 °C in °F
|
||||
72 °F in °C
|
||||
0 °C in K
|
||||
|
||||
// Data
|
||||
1 GB in MB
|
||||
500 MB in GB
|
||||
1 TB in GB
|
||||
```
|
||||
|
||||
### Trip Planner Template
|
||||
```
|
||||
# Trip Planner
|
||||
|
||||
// Budget
|
||||
budget = $3000
|
||||
|
||||
// Flights
|
||||
flight_out = $450
|
||||
flight_back = $380
|
||||
|
||||
// Hotel
|
||||
nights = 7
|
||||
rate_per_night = $120
|
||||
hotel_total = nights * rate_per_night
|
||||
|
||||
// Daily expenses
|
||||
daily_food = $50
|
||||
daily_transport = $20
|
||||
daily_activities = $35
|
||||
daily_total = daily_food + daily_transport + daily_activities
|
||||
trip_expenses = daily_total * nights
|
||||
|
||||
// Summary
|
||||
total_cost = flight_out + flight_back + hotel_total + trip_expenses
|
||||
remaining = budget - total_cost
|
||||
```
|
||||
|
||||
### Loan Calculator Template
|
||||
```
|
||||
# Loan Calculator
|
||||
|
||||
// Loan Details
|
||||
principal = 250000
|
||||
annual_rate = 6.5%
|
||||
years = 30
|
||||
|
||||
// Monthly Calculation
|
||||
monthly_rate = annual_rate / 12
|
||||
num_payments = years * 12
|
||||
|
||||
// Monthly Payment
|
||||
monthly_payment = principal * (monthly_rate * (1 + monthly_rate) ^ num_payments) / ((1 + monthly_rate) ^ num_payments - 1)
|
||||
|
||||
// Total Cost
|
||||
total_paid = monthly_payment * num_payments
|
||||
total_interest = total_paid - principal
|
||||
|
||||
// Summary
|
||||
interest_ratio = total_interest / principal
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Technical Notes
|
||||
|
||||
- Templates are hardcoded in the app (not fetched from server). Stored as string constants.
|
||||
- Creating from template: deep copy content, assign new id/title, save to documents array.
|
||||
- Future: user-created templates (save document as template). Defer to v2.
|
||||
- Cross-platform: same template content across all platforms.
|
||||
|
||||
---
|
||||
|
||||
_Created using Whiteport Design Studio (WDS) methodology_
|
||||
Reference in New Issue
Block a user