refactor(webui): use central widget selection

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(", ");
 }
-