From c5339a24b4a9b48ff779890cf169d6e2ebcd70f7 Mon Sep 17 00:00:00 2001 From: Tomas Dvorak Date: Tue, 22 Sep 2026 17:59:19 +0200 Subject: [PATCH] feat(frontend): regroup settings dialog, icon renderer tiles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Settings splits into labelled sections — renderer, appearance, wallpaper and CSS, notifications, auth, backup — each with an icon header. Renderer options gain a per-style glyph and accent-highlighted selection; theme becomes a segmented Dark/Light control; the dialog widens to max-w-xl. Renderer switching itself verified working end-to-end (live switch + persistence across reload); unchanged code path since v2.0.0. Authored By: TDvorak Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- CHANGELOG.md | 4 + .../src/components/SettingsDialog.tsx | 238 ++++++++++-------- apps/frontend/src/components/chart.tsx | 1 - apps/frontend/src/i18n/cs.ts | 1 + apps/frontend/src/i18n/en.ts | 1 + apps/frontend/src/renderers/index.ts | 8 + 6 files changed, 148 insertions(+), 105 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0abe91c..2fea341 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,10 @@ All notable changes to Dash. Format follows ### Changed +- Settings dialog regrouped into icon-labelled sections (renderer, appearance, + wallpaper/CSS, notifications, auth, backup); renderer tiles now show a + per-style glyph and the theme picker is a segmented control + - Monitoring charts restyled to the Beszel school: titled chart cards with subtitles, soft area fills on a true time-scaled axis, unit-aware Y ticks, sorted dotted tooltips, and legend chips on multi-series charts diff --git a/apps/frontend/src/components/SettingsDialog.tsx b/apps/frontend/src/components/SettingsDialog.tsx index 0b84214..414bb15 100644 --- a/apps/frontend/src/components/SettingsDialog.tsx +++ b/apps/frontend/src/components/SettingsDialog.tsx @@ -1,8 +1,8 @@ import { useEffect, useRef, useState } from "react"; -import { Bell, Download, Lock, Upload } from "lucide-react"; +import { Bell, Download, HardDrive, Image, LayoutGrid, Lock, Moon, Palette, Sun, Upload, type LucideIcon } from "lucide-react"; import { useBoard } from "@/board/store"; import { api } from "@/api"; -import { rendererDescriptions, rendererLabels, rendererList } from "@/renderers"; +import { rendererDescriptions, rendererIcons, rendererLabels, rendererList } from "@/renderers"; import { cn } from "@/lib/utils"; import { LOCALES, t } from "@/i18n"; import { Button } from "@/components/ui/button"; @@ -44,6 +44,19 @@ const TRANSPORTS = { } as const; type TransportName = keyof typeof TRANSPORTS; +// Group — a labelled settings section. Icon + mono header keeps the dialog +// scannable now that it holds five distinct concerns. +function Group({ icon: Icon, title, children }: { icon: LucideIcon; title: string; children: React.ReactNode }) { + return ( +
+

+ {title} +

+ {children} +
+ ); +} + export function SettingsDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) { const board = useBoard(); const fileRef = useRef(null); @@ -143,82 +156,103 @@ export function SettingsDialog({ open, onOpenChange }: { open: boolean; onOpenCh return ( - + {t("settings.title")} {t("settings.desc")} -
-
- -
- {rendererList.map((r) => ( - + ); + })} +
+ + + +
+
+ +
+ {(["dark", "light"] as const).map((th) => ( + + ))} +
+
+
+ + +
-
- -
- - -
- -
- - -
- -
- -
- void board.setSetting("accent", e.target.value)} - className="h-8 w-12 cursor-pointer rounded-[6px] border border-border bg-surface p-0.5" - /> - +
+ +
+ void board.setSetting("accent", e.target.value)} + className="h-8 w-12 cursor-pointer rounded-[6px] border border-border bg-surface p-0.5" + /> + {board.accent || "—"} + +
-
+ -
- + -
- -
-