feat(dashboard): redesign — masonry grid, draggable cards, collapsible panels, color tints - #3
Open
aaronFortuno wants to merge 8 commits into
Open
feat(dashboard): redesign — masonry grid, draggable cards, collapsible panels, color tints#3aaronFortuno wants to merge 8 commits into
aaronFortuno wants to merge 8 commits into
Conversation
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>
aaronFortuno
force-pushed
the
feat/dashboard-v2
branch
from
April 6, 2026 18:31
5471b13 to
7f60a1b
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
Cards with
data-needs-walletare hidden until a Lightning address is configured.Masonry layout (CSS columns)
column-count: 4masonry layoutDrag-and-drop reordering
localStorageand restored on reloadCollapsible cards
localStorageCard colour tints
localStorageand refreshed on theme changeNotification ticker
Verification
go vet ./...cleango buildsucceedsStats
internal/dashboard/server.go(HTML/CSS/JS)