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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user