Skip to content

feat(dashboard): improve layout and UX — collapsible sections, tabs, 3-col grid - #2

Open
aaronFortuno wants to merge 4 commits into
fabgoodvibes:mainfrom
routecat:feat/dashboard-layout
Open

feat(dashboard): improve layout and UX — collapsible sections, tabs, 3-col grid#2
aaronFortuno wants to merge 4 commits into
fabgoodvibes:mainfrom
routecat:feat/dashboard-layout

Conversation

@aaronFortuno

@aaronFortuno aaronFortuno commented Apr 6, 2026

Copy link
Copy Markdown

Note: This PR builds on #1 (feat/i18n). The diff includes those changes
because they haven't been merged yet. Once #1 is merged, this PR's diff
will reduce to just the layout commit (194 insertions, 109 deletions).

If you prefer to review them separately, merge #1 first and I'll rebase this branch.

Summary

Dashboard layout and UX improvements that reduce visual clutter and improve access to daily
controls. Builds on feat/i18n (#1).

Problems addressed

  • Wallet "configured" banner — permanently visible green bar with no way to dismiss; body text
    stuck in OS locale instead of dashboard language
  • Notifications panel — always expanded at the top even when empty or already read
  • 4-column grid with whitespace — Earnings, BTC Price, and other short cards left half the page
    blank next to the very tall Wallet and Status columns
  • Models list — 20+ entries on capable GPUs, stretching the Status card far below other content
  • Settings buried in the Wallet card — payout threshold, karma, keep warm, context length all
    stacked vertically in a single massive card, with job mode (a daily-use control) hidden among them

Changes

Bug fix

  • i18n wallet banner — Wallet.Configured now sends the raw Lightning address from Go; the
    dashboard JS formats it with t() using the browser's selected locale. Fixes the string appearing
    in the OS language instead of the dashboard language.

Dismissable wallet banner

  • Added ✕ close button (only on the green "configured" banner, not on the orange "not configured"
    warning)
  • Dismissed state persisted to localStorage

Collapsible notifications

  • Panel collapsed by default — shows title + notification count badge
  • Click to expand/collapse; state persisted to localStorage

Collapsible models list

  • Status card shows a compact summary: active model name + installed count
  • Click to expand the full model picker
  • State persisted to localStorage

3-column grid

  • Changed from 1fr 1fr 1fr 1fr to 1fr 1fr 1fr
  • Card order rebalanced: Wallet spans rows on the left; Status/Earnings, Gateway/BTC, GPU/Disk fill
    the right two columns evenly
  • Responsive breakpoints adjusted

Settings tabs

  • Job mode selector (Always / When idle / Never) pulled out to always-visible position for quick
    daily access
  • Remaining settings organised into tabbed panels: Payout | Karma | Model
  • Tabs use the accent colour for the active state; panels switch instantly with no page reload

Before → After

Before After
4 columns, huge whitespace in cols 3-4 3 columns, balanced height
Wallet card: ~15 stacked sections Job mode visible + 3 tabbed panels
Models: 20 items always visible Collapsed summary, expand on demand
Notifications: always open Collapsed with badge counter
Wallet banner: no dismiss ✕ button, remembers preference

Verification

  • go vet ./... clean
  • go build succeeds
  • go test ./internal/dashboard/... passes
  • Manual: wallet banner dismisses and stays hidden on reload
  • Manual: notifications collapse/expand with localStorage persistence
  • Manual: models collapse/expand with summary text
  • Manual: settings tabs switch correctly (Payout/Karma/Model)
  • Manual: job mode buttons work and remain always visible
  • Manual: i18n wallet banner shows in dashboard language, not OS language
  • Manual: responsive layout at 900px and 650px breakpoints

Stats

  • 8 files changed, 194 insertions, 109 deletions
  • Primary change in internal/dashboard/server.go (HTML/CSS/JS)
  • 1 line fix in internal/tray/tray.go (wallet i18n bug)
  • dash.settings key added to all 6 locale files

Future work (separate PR)

  • Reorganise wallet card — decouple non-wallet settings (job mode, model config) into their own
    card(s)
  • Explore 4-column layout with compacted cards for earnings/gateway/btc/gpu/disk
  • Further reduce horizontal whitespace

aaronFortuno and others added 4 commits April 6, 2026 11:18
@aaronFortuno @claude
feat(i18n): add internationalisation package with 6 locales
bcb405c 
Add internal/i18n package with embedded JSON locale files for English,
Catalan, Spanish, French, German, and Italian. Provides T(key) for
Go-side translation with automatic fallback to English, Messages(lang)
for serving locale data to the dashboard JS, and DetectLocale() for
OS-level language detection (Windows API + LANG env fallback).

No existing code is modified — this commit only adds the new package.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@aaronFortuno @claude
feat(i18n): migrate system tray strings to i18n.T()
1169810 
Replace all hardcoded user-facing strings in the system tray with
i18n.T() calls: state labels, menu items, tooltips, error messages,
wallet warnings, and disk alerts. The locale is auto-detected from the
OS at tray startup via i18n.DetectLocale().

Behaviour is identical for English users — all keys resolve to the
same strings that were previously hardcoded.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@aaronFortuno @claude
feat(i18n): add dashboard internationalisation with language selector
7add2bf 
Migrate all user-facing strings in the web dashboard to i18n:

- Add /api/locale?lang=xx endpoint serving the full translation map
- Add /api/locales endpoint listing available languages with names
- Add JS t(key) function with localStorage-persisted language choice
- Add data-i18n attributes to ~60 static HTML elements
- Replace ~40 JS-generated strings with t() calls (state labels,
  wallet messages, model picker, confirm dialogs, chart labels, etc.)
- Add language dropdown selector next to the theme toggle

The dashboard auto-detects the browser language on first load and
falls back to English. Users can override via the dropdown, which
persists in localStorage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@aaronFortuno @claude
feat(dashboard): improve layout, collapsible sections, fix i18n walle…
816ea5c 
…t bug

Layout and UX improvements to the dashboard:

- Fix i18n bug: wallet banner body was translated Go-side (OS locale)
  instead of JS-side (dashboard locale). Now sends raw address and
  formats with t() in the browser.
- Wallet "configured" banner is now dismissable (x button, persisted
  to localStorage). Warning banner (not configured) stays permanent.
- Notifications panel collapsed by default with badge counter. Click
  to expand. State persisted to localStorage.
- Models list collapsed by default in Status card. Shows active model
  name + installed count as summary. Click to expand full list.
- Grid changed from 4 columns to 3 columns — eliminates the large
  whitespace gap when right-side cards (Earnings, BTC) are short.
  Card order: Status/Earnings, Gateway/BTC, GPU/Disk.
- Job mode selector (Always/When idle/Never) stays always visible
  for quick access — not buried under settings.
- Wallet settings reorganised into tabbed panels (Payout | Karma |
  Model) instead of a single collapsed details block. Active tab is
  highlighted, panels switch instantly.
- Added "dash.settings" i18n key to all 6 locale files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@aaronFortuno aaronFortuno mentioned this pull request Apr 6, 2026
Open
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@aaronFortuno