Fix: dialog scroll, isDirty false positive, mobile edit btn, widget copy

Five fixes:

1. Dialog mobile scroll: DialogContent now has max-h-[calc(100dvh-2rem)]
   overflow-y-auto so dialogs that don't fit on screen can scroll
   instead of clipping their footer (and Cancel button) off-screen.

2. isDirty false positive: WidgetConfigDialog's SheetForm used
   isDirty={draft !== null} which was true the moment you opened edit
   mode, even with no changes. Now stores a draftBaseline at startEdit
   time and compares JSON.stringify(draft) !== JSON.stringify(baseline).
   The discard-confirmation only appears when something actually changed.

3. Mobile edit button always visible: the widget card's edit button was
   opacity-0 group-hover:opacity-100 (hover-only). Changed to
   md:opacity-0 md:group-hover:opacity-100 — always visible below md,
   hover-reveal at md+.

4. Copy button for referenced widgets: WidgetInstanceCard gains an onCopy
   prop. On the Dashboard, referenced widgets get a Copy icon button that
   triggers detachRef (creates an independent clone). The edit button on
   referenced widgets edits the original (shared config).

5. ConfirmDialog Cancel: fixed by #1 (the Cancel button was off-screen
   on mobile dialogs that couldn't scroll).

128 tests pass; lint/build green.
This commit is contained in:
Developer
2026-07-06 14:26:58 +00:00
parent a63467e163
commit 04871bd7d4
7 changed files with 114 additions and 39 deletions
+11 -3
View File
@@ -227,6 +227,7 @@ export function WidgetConfigDialog({
const [existingSearch, setExistingSearch] = useState("");
const [draft, setDraft] = useState<Draft | null>(null);
const [draftBaseline, setDraftBaseline] = useState<Draft | null>(null);
// When editWidgetId is set and the dialog opens, auto-enter edit mode for
// that widget (instead of showing the list view).
@@ -266,7 +267,7 @@ export function WidgetConfigDialog({
}
function startEdit(instance: WidgetInstance) {
setDraft({
const d: Draft = {
id: instance.id,
serviceId: instance.service_id,
widgetKind: instance.widget_kind,
@@ -274,11 +275,14 @@ export function WidgetConfigDialog({
config: instance.config,
enabled: instance.enabled,
sortOrder: instance.sort_order,
});
};
setDraft(d);
setDraftBaseline(d);
}
function reset() {
setDraft(null);
setDraftBaseline(null);
}
async function saveDraft() {
@@ -701,7 +705,11 @@ export function WidgetConfigDialog({
onCancel={draft ? reset : () => handleClose(false)}
saveLabel={draft ? "Save widget" : "Done"}
isPending={draft ? saveWidget.isPending : false}
isDirty={draft !== null}
isDirty={
draft !== null && draftBaseline !== null
? JSON.stringify(draft) !== JSON.stringify(draftBaseline)
: draft !== null && draft?.id === undefined
}
>
<div className="flex flex-col gap-4">{draftBody}</div>
</SheetForm>