feat: Major UI improvements for Link.Calculator

.github/workflows/update-screenshots.yml

@@ -0,0 +1,100 @@
+name: Update Screenshots
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'web/**'
+      - 'src/**'
+      - 'data/examples.lino'
+  workflow_dispatch:
+    inputs:
+      update_readme:
+        description: 'Update README.md with new screenshots'
+        type: boolean
+        default: true
+      update_use_cases:
+        description: 'Update USE-CASES.md with new screenshots'
+        type: boolean
+        default: true
+
+jobs:
+  update-screenshots:
+    name: Update Screenshots
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Install wasm-pack
+        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+
+      - name: Build WASM package
+        run: wasm-pack build --target web --out-dir web/public/pkg
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: web/package-lock.json
+
+      - name: Install web dependencies
+        working-directory: web
+        run: npm ci || npm install
+
+      - name: Install Playwright browsers
+        working-directory: web
+        run: npx playwright install chromium
+
+      - name: Build web app
+        working-directory: web
+        run: npm run build
+
+      - name: Start preview server
+        working-directory: web
+        run: |
+          npm run preview &
+          sleep 5
+
+      - name: Take screenshots
+        working-directory: web
+        run: |
+          npx playwright test e2e/screenshots.spec.ts --reporter=list || true
+
+      - name: Copy screenshots to docs
+        run: |
+          mkdir -p docs/use-cases
+          mkdir -p docs/screenshots
+          # Copy use-cases screenshots (generated by Playwright)
+          if [ -d "docs/use-cases" ] && ls docs/use-cases/*.png 1>/dev/null 2>&1; then
+            # Copy relevant screenshots for README
+            cp docs/use-cases/01-initial-state.png docs/screenshots/calculator-main.png 2>/dev/null || true
+            cp docs/use-cases/02-simple-arithmetic.png docs/screenshots/calculator-arithmetic.png 2>/dev/null || true
+            cp docs/use-cases/03-currency-conversion.png docs/screenshots/calculator-currency.png 2>/dev/null || true
+            cp docs/use-cases/08-datetime.png docs/screenshots/calculator-datetime.png 2>/dev/null || true
+            cp docs/use-cases/09-parentheses.png docs/screenshots/calculator-parentheses.png 2>/dev/null || true
+          fi
+
+      - name: Check for changes
+        id: changes
+        run: |
+          git add -A
+          if git diff --cached --quiet; then
+            echo "has_changes=false" >> $GITHUB_OUTPUT
+          else
+            echo "has_changes=true" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Commit and push changes
+        if: steps.changes.outputs.has_changes == 'true'
+        run: |
+          git config user.name 'github-actions[bot]'
+          git config user.email 'github-actions[bot]@users.noreply.github.com'
+          git commit -m "chore: update screenshots [skip ci]"
+          git push

README.md

@@ -14,7 +14,7 @@ A grammar-based expression calculator with DateTime and Currency support, built
 ## Screenshots
 
 ### Main Interface
-![Link Calculator Main Interface](docs/screenshots/calculator-main.png)
+![Link.Calculator Main Interface](docs/screenshots/calculator-main.png)
 
 ### Arithmetic Operations
 ![Arithmetic calculation with step-by-step explanation](docs/screenshots/calculator-arithmetic.png)
@@ -25,6 +25,8 @@ A grammar-based expression calculator with DateTime and Currency support, built
 ### Currency Conversions
 ![Currency arithmetic with automatic conversion](docs/screenshots/calculator-currency.png)
 
+> **📖 See [USE-CASES.md](docs/USE-CASES.md) for more detailed examples with screenshots**, including symbolic integration, math functions, dark theme, and more.
+
 ## Features
 
 ### Expression Parser

changelog.d/20260127_110314_ui_improvements.md

@@ -0,0 +1,17 @@
+### Changed
+
+- Rebranded to "Link.Calculator" with new SVG logo and updated tagline "Free open-source calculator dedicated to public domain"
+- Renamed "System" theme option to "Auto" for clarity
+- Added "Automatic" option as first choice in language selector for auto-detection
+- Moved input interpretation section before the result section and renamed it to "Input"
+- Removed "Expression" label from input field for cleaner UI
+- Changed input field from reactive updates to calculate-on-command: now requires clicking equals button or pressing Enter
+- Disabled manual resize indicator on textarea (auto-resize only)
+
+### Added
+
+- Calculate button (=) in the input field to trigger computation
+- Enter key support to submit calculation
+- Preferred currency setting with major fiat currencies and top 10 cryptocurrencies
+- Computation time display showing how long calculations take
+- Window resize handler for textarea auto-resize

changelog.d/20260127_113447_examples_and_tests.md

@@ -0,0 +1,11 @@
+### Added
+- Examples section showing 6 random examples from a centralized examples.lino file
+- React unit tests for App.tsx component (23 new tests covering branding, input, settings, examples, and footer)
+- USE-CASES.md documentation with screenshots of calculator features
+- CI/CD workflow for auto-updating screenshots when web code changes
+- New data/examples.lino file containing categorized calculator examples (arithmetic, currency, datetime, functions, integration)
+- E2E screenshot generation tests for documentation
+
+### Changed
+- Updated E2E tests to use explicit calculation trigger (Enter key or button click) instead of reactive calculation
+- Examples are now randomly selected from examples.lino on each page load for variety

data/examples.lino

@@ -0,0 +1,45 @@
+(example (expression "2 + 3") (description "Simple addition") (category "arithmetic"))
+(example (expression "10 - 4") (description "Simple subtraction") (category "arithmetic"))
+(example (expression "3 * 4") (description "Simple multiplication") (category "arithmetic"))
+(example (expression "15 / 3") (description "Simple division") (category "arithmetic"))
+(example (expression "(2 + 3) * 4") (description "Parentheses for grouping") (category "arithmetic"))
+(example (expression "2 + 3 * 4") (description "Operator precedence") (category "arithmetic"))
+(example (expression "-5 + 3") (description "Negative numbers") (category "arithmetic"))
+(example (expression "3.14 + 2.86") (description "Decimal numbers") (category "arithmetic"))
+(example (expression "100 * 1.5") (description "Multiplication with decimals") (category "arithmetic"))
+(example (expression "100 USD") (description "Currency value") (category "currency"))
+(example (expression "100 USD + 50 USD") (description "Same currency addition") (category "currency"))
+(example (expression "84 USD - 34 EUR") (description "Currency conversion") (category "currency"))
+(example (expression "100 USD in EUR") (description "Currency conversion") (category "currency"))
+(example (expression "$100 + €50") (description "Currency symbols") (category "currency"))
+(example (expression "1 USD + 1 EUR + 1 GBP") (description "Multiple currencies") (category "currency"))
+(example (expression "(Jan 27, 8:59am UTC) - (Jan 25, 12:51pm UTC)") (description "DateTime subtraction") (category "datetime"))
+(example (expression "(Jan 27, 8:59am UTC) - (Jan 26, 10:20am UTC)") (description "Time difference calculation") (category "datetime"))
+(example (expression "sin(0)") (description "Sine function") (category "functions"))
+(example (expression "cos(0)") (description "Cosine function") (category "functions"))
+(example (expression "sqrt(16)") (description "Square root") (category "functions"))
+(example (expression "sqrt(2)") (description "Irrational square root") (category "functions"))
+(example (expression "pow(2, 3)") (description "Power function") (category "functions"))
+(example (expression "2^3") (description "Power operator") (category "functions"))
+(example (expression "exp(0)") (description "Exponential") (category "functions"))
+(example (expression "ln(1)") (description "Natural logarithm") (category "functions"))
+(example (expression "log(100)") (description "Base-10 logarithm") (category "functions"))
+(example (expression "abs(-5)") (description "Absolute value") (category "functions"))
+(example (expression "floor(3.7)") (description "Floor function") (category "functions"))
+(example (expression "ceil(3.2)") (description "Ceiling function") (category "functions"))
+(example (expression "pi()") (description "Pi constant") (category "functions"))
+(example (expression "e()") (description "Euler constant") (category "functions"))
+(example (expression "sqrt(abs(-16))") (description "Nested functions") (category "functions"))
+(example (expression "sqrt(9 + 7)") (description "Function with expression argument") (category "functions"))
+(example (expression "min(5, 3)") (description "Minimum value") (category "functions"))
+(example (expression "max(5, 3)") (description "Maximum value") (category "functions"))
+(example (expression "factorial(5)") (description "Factorial") (category "functions"))
+(example (expression "deg(3.14159265358979)") (description "Radians to degrees") (category "functions"))
+(example (expression "rad(180)") (description "Degrees to radians") (category "functions"))
+(example (expression "integrate(x^2, x, 0, 3)") (description "Definite integral") (category "integration"))
+(example (expression "integrate(sin(x), x, 0, 3.14159265358979)") (description "Definite integral of sin(x)") (category "integration"))
+(example (expression "integrate sin(x)/x dx") (description "Indefinite integral (natural notation)") (category "integration"))
+(example (expression "integrate x^2 dx") (description "Indefinite integral of x squared") (category "integration"))
+(example (expression "integrate sin(x) dx") (description "Indefinite integral of sin(x)") (category "integration"))
+(example (expression "integrate cos(x) dx") (description "Indefinite integral of cos(x)") (category "integration"))
+(example (expression "integrate exp(x) dx") (description "Indefinite integral of exp(x)") (category "integration"))

docs/USE-CASES.md

@@ -0,0 +1,203 @@
+# Link.Calculator Use Cases
+
+This document showcases the various capabilities of Link.Calculator with screenshots and direct links to try each example.
+
+## Table of Contents
+
+- [Initial State](#initial-state)
+- [Simple Arithmetic](#simple-arithmetic)
+- [Currency Conversion](#currency-conversion)
+- [DateTime Calculations](#datetime-calculations)
+- [Parentheses Grouping](#parentheses-grouping)
+- [Symbolic Integration](#symbolic-integration)
+- [Definite Integrals](#definite-integrals)
+- [Math Functions](#math-functions)
+- [Dark Theme](#dark-theme)
+
+---
+
+## Initial State
+
+The calculator starts with a clean interface, ready to accept your expressions. Six example buttons are shown to help you get started.
+
+![Initial State](use-cases/01-initial-state.png)
+
+[Try it live](https://link-assistant.github.io/calculator/)
+
+---
+
+## Simple Arithmetic
+
+Basic arithmetic operations with step-by-step explanation.
+
+**Expression:** `2 + 3`
+
+![Simple Arithmetic](use-cases/02-simple-arithmetic.png)
+
+[Try this example](https://link-assistant.github.io/calculator/?q=KGV4cHJlc3Npb24lMjAlMjIyJTIwJTJCJTIwMyUyMik%3D)
+
+**Features shown:**
+- Basic addition
+- Step-by-step calculation breakdown
+- Links Notation input interpretation
+
+---
+
+## Currency Conversion
+
+Convert between currencies with real-time exchange rates.
+
+**Expression:** `84 USD - 34 EUR`
+
+![Currency Conversion](use-cases/03-currency-conversion.png)
+
+[Try this example](https://link-assistant.github.io/calculator/?q=KGV4cHJlc3Npb24lMjAlMjI4NCUyMFVTRCUyMC0lMjAzNCUyMEVVUiUyMik%3D)
+
+**Features shown:**
+- Multi-currency arithmetic
+- Real-time exchange rate display
+- Source and date of exchange rate data
+- Automatic currency conversion
+
+---
+
+## DateTime Calculations
+
+Calculate time differences between dates and times.
+
+**Expression:** `(Jan 27, 8:59am UTC) - (Jan 25, 12:51pm UTC)`
+
+![DateTime Calculations](use-cases/08-datetime.png)
+
+[Try this example](https://link-assistant.github.io/calculator/?q=KGV4cHJlc3Npb24lMjAlMjIoSmFuJTIwMjclMkMlMjA4JTNBNTlhbSUyMFVUQyklMjAtJTIwKEphbiUyMDI1JTJDJTIwMTIlM0E1MXBtJTIwVVRDKSUyMik%3D)
+
+**Features shown:**
+- DateTime parsing with multiple formats
+- Time difference calculation
+- Duration display in human-readable format
+- Step-by-step breakdown
+
+---
+
+## Parentheses Grouping
+
+Control operator precedence with parentheses.
+
+**Expression:** `(2 + 3) * 4`
+
+![Parentheses Grouping](use-cases/09-parentheses.png)
+
+[Try this example](https://link-assistant.github.io/calculator/?q=KGV4cHJlc3Npb24lMjAlMjIoMiUyMCUyQiUyMDMpJTIwKiUyMDQlMjIp)
+
+**Features shown:**
+- Parentheses for grouping operations
+- Correct operator precedence
+- Step-by-step breakdown
+
+---
+
+## Symbolic Integration
+
+Compute indefinite integrals with mathematical notation output.
+
+**Expression:** `integrate sin(x)/x dx`
+
+![Symbolic Integration](use-cases/04-integration.png)
+
+[Try this example](https://link-assistant.github.io/calculator/?q=KGV4cHJlc3Npb24lMjAlMjJpbnRlZ3JhdGUlMjBzaW4oeCklMkZ4JTIwZHglMjIp)
+
+**Features shown:**
+- Natural notation for integrals
+- LaTeX-rendered mathematical output
+- Function plot visualization
+- Symbolic result (Si(x) + C)
+
+---
+
+## Definite Integrals
+
+Compute definite integrals with numeric bounds.
+
+**Expression:** `integrate(x^2, x, 0, 3)`
+
+![Definite Integral](use-cases/06-definite-integral.png)
+
+[Try this example](https://link-assistant.github.io/calculator/?q=KGV4cHJlc3Npb24lMjAlMjJpbnRlZ3JhdGUoeCU1RTIlMkMlMjB4JTJDJTIwMCUyQyUyMDMpJTIyKQ%3D%3D)
+
+**Features shown:**
+- Definite integral syntax: `integrate(expression, variable, lower, upper)`
+- Numerical result
+- Step-by-step breakdown
+
+---
+
+## Math Functions
+
+Use built-in mathematical functions.
+
+**Expression:** `sqrt(16) + pow(2, 3)`
+
+![Math Functions](use-cases/07-math-functions.png)
+
+[Try this example](https://link-assistant.github.io/calculator/?q=KGV4cHJlc3Npb24lMjAlMjJzcXJ0KDE2KSUyMCUyQiUyMHBvdygyJTJDJTIwMyklMjIp)
+
+**Features shown:**
+- Square root function: `sqrt()`
+- Power function: `pow(base, exponent)`
+- Function call breakdown in steps
+- Combination of multiple functions
+
+**Available functions:**
+- Trigonometric: `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`
+- Exponential: `exp()`, `ln()`, `log()`
+- Power: `sqrt()`, `pow()`, `abs()`
+- Rounding: `floor()`, `ceil()`, `round()`
+- Constants: `pi()`, `e()`
+- Comparison: `min()`, `max()`
+- Other: `factorial()`
+
+---
+
+## Dark Theme
+
+Switch to dark mode for comfortable viewing in low-light environments.
+
+![Dark Theme](use-cases/05-dark-theme.png)
+
+**Features shown:**
+- Dark theme toggle in settings
+- Language selector
+- Preferred currency selector
+- Consistent styling across all components
+
+---
+
+## More Examples
+
+Try these additional expressions:
+
+| Category | Expression | Description |
+|----------|------------|-------------|
+| Arithmetic | `(2 + 3) * 4` | Parentheses for grouping |
+| Arithmetic | `2^3` | Power operator |
+| Currency | `100 USD in EUR` | Currency conversion |
+| Currency | `$100 + €50` | Currency symbols |
+| DateTime | `(Jan 27, 8:59am UTC) - (Jan 25, 12:51pm UTC)` | Time difference |
+| Functions | `sin(pi()/2)` | Trigonometric functions |
+| Functions | `ln(e())` | Natural logarithm |
+| Integration | `integrate cos(x) dx` | Indefinite integral |
+
+---
+
+## Getting Started
+
+1. Visit [Link.Calculator](https://link-assistant.github.io/calculator/)
+2. Type an expression in the input field
+3. Press **Enter** or click the **=** button to calculate
+4. View the result and step-by-step breakdown
+
+**Tips:**
+- Click any example button to quickly try it
+- Use the **Copy Link** button to share your calculation
+- Switch themes and languages in the settings menu
+- Report issues using the "Report Issue" link in the footer