Skip to content

feat(dashboard): redesign — masonry grid, draggable cards, collapsible panels, color tints - #3

Open
aaronFortuno wants to merge 8 commits into
fabgoodvibes:mainfrom
routecat:feat/dashboard-v2
Open

feat(dashboard): redesign — masonry grid, draggable cards, collapsible panels, color tints#3
aaronFortuno wants to merge 8 commits into
fabgoodvibes:mainfrom
routecat:feat/dashboard-v2

Conversation

@aaronFortuno

Copy link
Copy Markdown

Note: This PR builds on #1 (feat/i18n) and #2 (feat/dashboard-layout). The diff
includes those changes because they haven't been merged yet. The new work in this branch
is 4 commits / 409 insertions, 346 deletions — all in internal/dashboard/server.go.

Summary

Complete dashboard redesign focused on information density, personalisation, and usability. Every panel is now an
independent card that users can reorder, collapse, and colour-code to build their own preferred layout.

Changes

Wallet card breakup (12 independent cards)

The monolithic Wallet card has been split into focused, single-purpose cards:

Card Content
Status State badge, node ID, provider key, models (collapsible list)
Earnings Merged: hero sats total + today + pending + withdrawn + payout history
Gateway Connection, jobs, tokens, queue depth
Job Mode Always / When idle / Never buttons
Wallet Lightning address + setup form + fee disclaimer
Payout Threshold slider, fee estimate, 50-sat unlock
Bitcoin Price Live, yesterday's fix, 24h/7d averages
Karma Score, tier badge, free tier jobs, donation slider
GPU Name, utilisation bar, VRAM, temperature, power
Disk Free space bar, total, path
Model Config Keep warm toggle, context length selector
Ecash Local balance, proofs, claim button

Cards with data-needs-wallet are hidden until a Lightning address is configured.

Masonry layout (CSS columns)

  • Replaced CSS Grid with column-count: 4 masonry layout
  • Cards fill vertical space efficiently — no wasted whitespace when cards have different heights
  • Responsive: 4 → 3 → 2 → 1 columns at 1100/800/550px breakpoints

Drag-and-drop reordering

  • Every card has a ☰ drag handle in the title bar
  • Dragging shows a dashed placeholder gap at the insertion point (not a highlight on the target card)
  • Placeholder doesn't appear at the card's original position (no visual noise for no-op moves)
  • Card order persisted to localStorage and restored on reload

Collapsible cards

  • Click any card title to collapse/expand its content
  • Arrow indicator rotates to show state
  • Collapsed state persisted per card in localStorage

Card colour tints

  • Each card has a ● colour button that opens a 10-colour palette
  • Subtle background tints: blue, green, amber, red, purple, cyan, pink, lime, orange
  • Tints adapt to dark/light theme (different opacity values)
  • Colours persisted in localStorage and refreshed on theme change

Notification ticker

  • Notifications moved from a full-width panel to a 520px rotating ticker in the header bar
  • Messages cycle every 10 seconds with a smooth opacity transition
  • Badge shows notification count
  • Click opens a dropdown panel with full message details and timestamps
  • Dropdown closes when clicking outside

Verification

  • go vet ./... clean
  • go build succeeds
  • Manual: 4-column masonry layout renders correctly, responsive breakpoints work
  • Manual: drag-and-drop with placeholder gap, order persists across reloads
  • Manual: cards collapse/expand, state persists
  • Manual: colour picker applies tints, persists, adapts to theme toggle
  • Manual: notification ticker rotates messages, click opens dropdown
  • Manual: needs-wallet cards appear when Lightning address is configured
  • Manual: all existing functionality (wallet setup, model picker, job mode, ecash claim) still works

Stats

  • 4 commits, 409 insertions, 346 deletions
  • All changes in internal/dashboard/server.go (HTML/CSS/JS)
  • Zero Go backend changes (beyond the i18n wallet fix from the parent branch)

aaronFortuno and others added 8 commits April 6, 2026 11:18
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>
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>
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>
…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>
Major dashboard restructure for usability:

- Break the wallet mega-card into 12 independent cards: Status,
  Earnings (merged hero + pending + payouts), Gateway, Job Mode,
  Wallet (address only), Payout, Bitcoin Price, Karma, GPU, Disk,
  Model Config, and Ecash.
- 4-column responsive grid (4 → 3 → 2 → 1 columns at breakpoints).
- All cards are draggable — drag the ☰ handle to reorder. Card order
  is saved to localStorage and restored on reload.
- Cards with class "needs-wallet" are hidden until a Lightning address
  is configured (Job Mode, Payout, Karma, Model Config, Ecash).
- Removed the tab-based settings panel (no longer needed since each
  section is its own card).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Two new personalisation features for the dashboard:

- Cards are now collapsible: click the title to collapse/expand any
  card. A down-arrow indicates the state. Collapsed state is persisted
  per card in localStorage, so hidden cards stay hidden across reloads.

- Card color tints: each card has a small dot button next to the drag
  handle that opens a 10-color palette (blue, green, amber, red,
  purple, cyan, pink, lime, orange + none). Selecting a color applies
  a subtle background tint that adapts to dark/light theme. Colors
  are persisted in localStorage and restored on load and theme change.

All card content is wrapped in a .card-body div for clean collapse
toggling. Both features work alongside drag-and-drop reordering.

Fix: regenerated grid HTML from scratch to resolve malformed div
nesting (12 extra closing tags) that broke the 4-column layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace CSS grid with CSS column-count masonry layout (4 columns).
  Cards now fill vertical space efficiently like Pinterest — no wasted
  whitespace when cards have different heights. Responsive breakpoints
  at 1100px (3 cols), 800px (2 cols), 550px (1 col).

- Move notifications from a full-width card to a compact dropdown in
  the header bar, next to the language selector and theme toggle.
  Saves a full row of vertical space. Notifications open as a floating
  panel (360px wide, max 300px tall with scroll) on click.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Notifications:
- Replace the small dropdown button with a 260px rotating ticker in
  the header bar, airport-style. Messages cycle every 5s with a smooth
  opacity transition. Badge shows count. Click opens the full dropdown
  with all messages and timestamps.
- Dropdown closes when clicking outside.

Drag and drop:
- Replace the "highlight target card" feedback with a proper gap
  placeholder — a dashed amber outline shows exactly where the card
  will land between other cards. The placeholder follows the cursor
  position (above or below the hovered card's midpoint).
- The dragged card becomes semi-transparent (30% opacity) while the
  placeholder shows the insertion point clearly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant