alex/manage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/WidgetConfigDialog.tsx
+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>
frontend/src/components/WidgetInstance.tsx
+35 -25
View File
@@ -1,6 +1,6 @@
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Settings2 } from "lucide-react";
import { Settings2, Copy } from "lucide-react";
import { useServiceInstances } from "../hooks/useServices";
import { resolveWidget } from "../integrations/registry";
import type { WidgetInstance } from "../types";
@@ -8,31 +8,51 @@ import { SectionCard } from "./SectionCard";
interface Props {
widget: WidgetInstance;
/** When provided, a hover-reveal edit button appears in the top-right corner. */
/** When provided, an edit button appears in the top-right corner (hover on desktop, always on mobile). */
onEdit?: (widgetId: string) => void;
/** When provided, a copy/detach button appears next to edit (for referenced widgets). */
onCopy?: (widgetId: string) => void;
}
export function WidgetInstanceCard({ widget, onEdit }: Props) {
export function WidgetInstanceCard({ widget, onEdit, onCopy }: Props) {
const { data: services = [] } = useServiceInstances();
const resolved = resolveWidget(widget, services);
// Edit + copy buttons: always visible on mobile (below md), hover-reveal on desktop.
const actionButtons = (
<div className="absolute right-2 top-2 z-10 flex items-center gap-1">
{onCopy ? (
<Button
variant="ghost"
size="icon-sm"
className="opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100 mobile-touch-target"
onClick={() => onCopy(widget.id)}
aria-label="Create independent copy"
>
<Copy className="h-4 w-4" />
</Button>
) : null}
{onEdit ? (
<Button
variant="ghost"
size="icon-sm"
className="opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100 mobile-touch-target"
onClick={() => onEdit(widget.id)}
aria-label="Edit widget"
>
<Settings2 className="h-4 w-4" />
</Button>
) : null}
</div>
);
if (!resolved) {
const label = widget.service_id
? `Unknown widget: ${widget.widget_kind} (service-bound)`
: `Unknown widget: ${widget.widget_kind} (built-in)`;
return (
<div className="group relative">
{onEdit ? (
<Button
variant="ghost"
size="icon-sm"
className="absolute right-2 top-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 mobile-touch-target"
onClick={() => onEdit(widget.id)}
aria-label="Edit widget"
>
<Settings2 className="h-4 w-4" />
</Button>
) : null}
{(onEdit || onCopy) ? actionButtons : null}
<SectionCard title={widget.title}>
<Alert>
<AlertDescription>{label}</AlertDescription>
@@ -45,17 +65,7 @@ export function WidgetInstanceCard({ widget, onEdit }: Props) {
const Component = resolved.component;
return (
<div className="group relative">
{onEdit ? (
<Button
variant="ghost"
size="icon-sm"
className="absolute right-2 top-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 mobile-touch-target"
onClick={() => onEdit(widget.id)}
aria-label="Edit widget"
>
<Settings2 className="h-4 w-4" />
</Button>
) : null}
{(onEdit || onCopy) ? actionButtons : null}
<Component
widget={widget}
refreshIntervalMs={resolved.refreshIntervalMs}
frontend/src/components/ui/dialog.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ function DialogContent({
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100dvh-2rem)] overflow-y-auto -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
className
)}
{...props}
frontend/src/pages/Dashboard.tsx
+41 -5
View File
@@ -31,7 +31,7 @@ import {
useDeleteDashboardShortcut,
useSaveDashboardShortcut,
} from "../hooks/useDashboard";
import { useWidgetInstances, useWidgetReferences } from "../hooks/useWidgets";
import { useDetachWidgetReference, useWidgetInstances, useWidgetReferences } from "../hooks/useWidgets";
import { useServiceInstances } from "../hooks/useServices";
import { useIsMobile } from "../hooks/useIsMobile";
import type {
@@ -139,7 +139,11 @@ function MobileWidgetSections({
{SECTION_META[section.id].label}
</h3>
{section.widgets.map((widget) => (
<WidgetInstanceCard key={widget.id} widget={widget} onEdit={onEditWidget ? (id) => onEditWidget(id) : undefined} />
<WidgetInstanceCard
key={widget.id}
widget={widget}
onEdit={onEditWidget ? (id) => onEditWidget(id) : undefined}
/>
))}
</section>
))}
@@ -468,6 +472,13 @@ export function Dashboard() {
.sort((a, b) => a.sort_order - b.sort_order);
}, [widgetInstances, widgetReferences]);
// Track which visible widgets are references (for the copy/detach button).
const referencedWidgetIds = useMemo(
() => new Set(widgetReferences.map((r) => r.widget.id)),
[widgetReferences],
);
const detachRef = useDetachWidgetReference();
const mobileSections = useMemo(
() => groupWidgetsBySection(visibleWidgets, services),
[visibleWidgets, services],
@@ -567,10 +578,32 @@ export function Dashboard() {
</SectionCard>
{isMobile && mobileSections.length > 0 ? (
<MobileWidgetSections sections={mobileSections} onEditWidget={(id) => { setEditWidgetId(id); setWidgetDialogOpen(true); }} />
<MobileWidgetSections
sections={mobileSections}
onEditWidget={(id) => {
setEditWidgetId(id);
setWidgetDialogOpen(true);
}}
/>
) : (
visibleWidgets.map((widget) => (
<WidgetInstanceCard key={widget.id} widget={widget} onEdit={(id) => { setEditWidgetId(id); setWidgetDialogOpen(true); }} />
<WidgetInstanceCard
key={widget.id}
widget={widget}
onEdit={(id) => {
setEditWidgetId(id);
setWidgetDialogOpen(true);
}}
onCopy={
referencedWidgetIds.has(widget.id)
? () => {
// Detach: find the reference and clone it.
const ref = widgetReferences.find((r) => r.widget.id === widget.id);
if (ref) detachRef.mutate(ref.id);
}
: undefined
}
/>
))
)}
@@ -596,7 +629,10 @@ export function Dashboard() {
/>
<WidgetConfigDialog
open={widgetDialogOpen}
onClose={() => { setWidgetDialogOpen(false); setEditWidgetId(undefined); }}
onClose={() => {
setWidgetDialogOpen(false);
setEditWidgetId(undefined);
}}
dashboardScope="main"
editWidgetId={editWidgetId}
/>
frontend/src/pages/NamedDashboardPage.tsx
+12 -2
View File
@@ -97,7 +97,14 @@ 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} onEdit={(id) => { setEditWidgetId(id); setConfigOpen(true); }} />
<WidgetInstanceCard
key={widget.id}
widget={widget}
onEdit={(id) => {
setEditWidgetId(id);
setConfigOpen(true);
}}
/>
))}
</div>
) : null}
@@ -125,7 +132,10 @@ export function NamedDashboardPage() {
<WidgetConfigDialog
open={configOpen}
onClose={() => { setConfigOpen(false); setEditWidgetId(undefined); }}
onClose={() => {
setConfigOpen(false);
setEditWidgetId(undefined);
}}
dashboardScope={dashboardScope}
editWidgetId={editWidgetId}
/>
frontend/src/pages/__tests__/Dashboard.test.tsx
+1
View File
@@ -24,6 +24,7 @@ vi.mock("../../hooks/useSettings", () => ({
vi.mock("../../hooks/useWidgets", () => ({
useWidgetInstances: () => ({ data: [] }),
useWidgetReferences: () => ({ data: [] }),
useDetachWidgetReference: () => ({ mutate: () => {} }),
}));
vi.mock("../../hooks/useServices", () => ({
useServiceInstances: () => ({ data: [] }),
frontend/src/pages/service-tabs/OverviewTab.tsx
+12 -2
View File
@@ -49,7 +49,14 @@ export function OverviewTab({ instance }: { instance: ServiceInstance }) {
{visibleWidgets.length > 0 ? (
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{visibleWidgets.map((widget) => (
<WidgetInstanceCard key={widget.id} widget={widget} onEdit={(id) => { setEditWidgetId(id); setConfigOpen(true); }} />
<WidgetInstanceCard
key={widget.id}
widget={widget}
onEdit={(id) => {
setEditWidgetId(id);
setConfigOpen(true);
}}
/>
))}
</div>
) : (
@@ -72,7 +79,10 @@ export function OverviewTab({ instance }: { instance: ServiceInstance }) {
<WidgetConfigDialog
open={configOpen}
onClose={() => { setConfigOpen(false); setEditWidgetId(undefined); }}
onClose={() => {
setConfigOpen(false);
setEditWidgetId(undefined);
}}
serviceId={instance.id}
editWidgetId={editWidgetId}
/>