Add hover-reveal edit button to widget cards + auto-open edit mode

Each widget card now shows a settings icon in the top-right corner on
hover (desktop) or always-visible (mobile via mobile-touch-target).
Clicking it opens the WidgetConfigDialog directly in edit mode for that
widget (via a new editWidgetId prop on WidgetConfigDialog that
auto-enters the draft-edit path via useEffect).

Wired across all three widget surfaces:
- Dashboard (both mobile section + desktop grid)
- Service OverviewTab
- NamedDashboardPage

128 tests pass; build/lint green.
This commit is contained in:
Developer
2026-07-06 12:53:14 +00:00
parent 691d78ff06
commit eeb0cccbce
5 changed files with 74 additions and 21 deletions
+4 -2
View File
@@ -49,6 +49,7 @@ export function NamedDashboardPage() {
const dashboardScope = `named:${slug}`;
const { data: widgetRefs = [] } = useWidgetReferences(dashboardScope);
const [configOpen, setConfigOpen] = useState(false);
const [editWidgetId, setEditWidgetId] = useState<string | undefined>();
const items = useMemo(
() => parseItems(dashboard?.payload ?? {}),
@@ -96,7 +97,7 @@ export function NamedDashboardPage() {
{visibleWidgets.length > 0 ? (
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{visibleWidgets.map((widget) => (
<WidgetInstanceCard key={widget.id} widget={widget} />
<WidgetInstanceCard key={widget.id} widget={widget} onEdit={(id) => { setEditWidgetId(id); setConfigOpen(true); }} />
))}
</div>
) : null}
@@ -124,8 +125,9 @@ export function NamedDashboardPage() {
<WidgetConfigDialog
open={configOpen}
onClose={() => setConfigOpen(false)}
onClose={() => { setConfigOpen(false); setEditWidgetId(undefined); }}
dashboardScope={dashboardScope}
editWidgetId={editWidgetId}
/>
</div>
);