From cfacc47ebbde8c64d22c66392d4d45816732a6a3 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 21 Jul 2026 12:34:39 +0200
Subject: [PATCH] refactor(webui): use central widget selection

---
 .../src/features/dashboard/DashboardPage.tsx  | 31 +++++-----------
 webui/src/styles/dashboard.css                | 35 -------------------
 2 files changed, 8 insertions(+), 58 deletions(-)

diff --git a/webui/src/features/dashboard/DashboardPage.tsx b/webui/src/features/dashboard/DashboardPage.tsx
index 30f1d70..72e10a9 100644
--- a/webui/src/features/dashboard/DashboardPage.tsx
+++ b/webui/src/features/dashboard/DashboardPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { RefreshCw, RotateCcw, SlidersHorizontal } from "lucide-react";
 import {
+  AdminSelectionList,
   Button,
   Card,
   MetricCard,
@@ -50,14 +51,9 @@ export default function DashboardPage({ settings, auth }: { settings: ApiSetting
     writeLayout(storageKey, next);
   }
 
-  function setWidgetVisible(widgetId: string, visible: boolean) {
+  function setVisibleWidgets(selected: string[]) {
     const allIds = widgets.map((widget) => widget.id);
-    const nextVisible = new Set(visibleWidgetIds);
-    if (visible) {
-      nextVisible.add(widgetId);
-    } else {
-      nextVisible.delete(widgetId);
-    }
+    const nextVisible = new Set(selected);
     saveLayout({
       known: allIds,
       visible: allIds.filter((id) => nextVisible.has(id))
@@ -93,21 +89,11 @@ export default function DashboardPage({ settings, auth }: { settings: ApiSetting
         title="Dashboard widgets"
         actions={<Button onClick={resetLayout}><RotateCcw size={16} /> Reset</Button>}>
           {widgets.length === 0 ? <p className="muted">No installed module exposes dashboard widgets yet.</p> :
-        <div className="dashboard-widget-picker">
-              {widgets.map((widget) =>
-          <label key={widget.id} className="dashboard-widget-toggle">
-                  <input
-              type="checkbox"
-              checked={visibleWidgetIds.includes(widget.id)}
-              onChange={(event) => setWidgetVisible(widget.id, event.currentTarget.checked)}
-            />
-                  <span>
-                    <strong>{widget.title}</strong>
-                    <small>{widget.description ?? widget.id}</small>
-                  </span>
-                </label>
-          )}
-            </div>
+        <AdminSelectionList
+          options={widgets.map((widget) => ({ id: widget.id, label: widget.title, description: widget.description ?? widget.id }))}
+          selected={visibleWidgetIds}
+          onChange={setVisibleWidgets}
+        />
         }
         </Card>
       }
@@ -183,4 +169,3 @@ function moduleLabels(modules: Array<{ id: string }>): string {
   if (!modules.length) return "Core shell only";
   return modules.slice(0, 4).map((module) => module.id).join(", ");
 }
-
diff --git a/webui/src/styles/dashboard.css b/webui/src/styles/dashboard.css
index fe1d709..bee8c89 100644
--- a/webui/src/styles/dashboard.css
+++ b/webui/src/styles/dashboard.css
@@ -32,39 +32,6 @@
   grid-column: 1 / -1;
 }
 
-.dashboard-widget-picker {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 12px;
-}
-
-.dashboard-widget-toggle {
-  min-width: 0;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 10px;
-  align-items: start;
-  border: var(--border-line);
-  border-radius: var(--radius-sm);
-  background: var(--panel-soft);
-  padding: 12px;
-}
-
-.dashboard-widget-toggle input {
-  margin-top: 3px;
-}
-
-.dashboard-widget-toggle strong,
-.dashboard-widget-toggle small {
-  display: block;
-}
-
-.dashboard-widget-toggle small {
-  color: var(--muted);
-  margin-top: 4px;
-  line-height: 1.35;
-}
-
 .dashboard-compact-list.detail-list div {
   grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
 }
@@ -82,7 +49,6 @@
 
 @media (max-width: 900px) {
   .dashboard-widget-grid,
-  .dashboard-widget-picker,
   .dashboard-widget-metrics.metric-grid {
     grid-template-columns: 1fr;
   }
@@ -94,4 +60,3 @@
     grid-column: 1;
   }
 }
-