Developer
109e74db41
Web UI rework. Shared-components slice (drift prevention): - Migrate SectionCard, SelectionRailCard, TabbedCard, MetricCard, DiskSpaceCard, HoverEditButton, DialogFooter, ConfirmDialog, LibraryOverview, NowPlaying, SessionActivityPanel off @mui - HoverEditButton: MUI IconButton + EditOutlined -> Button + lucide Pencil - Status mapping uses the success Badge variant (chart-2) for healthy - Exported APIs preserved so consuming pages still compile (no page edits) - 11 behavioral Vitest component tests added Gate: build + lint + test green.
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface DialogFooterProps {
|
|
onCancel: () => void;
|
|
cancelLabel?: string;
|
|
onConfirm: () => void;
|
|
confirmLabel: string;
|
|
confirmBusyLabel?: string;
|
|
confirmDisabled?: boolean;
|
|
confirmColor?: "primary" | "error" | "warning" | "success" | "inherit";
|
|
confirmVariant?: "contained" | "outlined" | "text";
|
|
confirmStartIcon?: ReactNode;
|
|
secondaryAction?: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Resolve the legacy MUI color/variant props onto a shadcn Button variant so
|
|
* the exported API stays unchanged for consuming pages (ConfirmDialog here,
|
|
* plus Dashboard/Settings/Actions in later slices).
|
|
*/
|
|
function resolveConfirmVariant(
|
|
color: DialogFooterProps["confirmColor"],
|
|
variant: DialogFooterProps["confirmVariant"],
|
|
): "default" | "outline" | "ghost" | "destructive" {
|
|
if (color === "error") return "destructive";
|
|
if (variant === "outlined") return "outline";
|
|
if (variant === "text") return "ghost";
|
|
return "default";
|
|
}
|
|
|
|
/**
|
|
* Dialog action row: cancel + optional secondary action + confirm.
|
|
*
|
|
* Renders a horizontal Button row (`flex flex-row items-center gap-2`).
|
|
* Preserves cancel/confirm/secondary-action props and the busy/disabled label
|
|
* contract (renders `confirmBusyLabel` when provided, else `confirmLabel`).
|
|
*/
|
|
export function DialogFooter({
|
|
onCancel,
|
|
cancelLabel = "Cancel",
|
|
onConfirm,
|
|
confirmLabel,
|
|
confirmBusyLabel,
|
|
confirmDisabled,
|
|
confirmColor = "primary",
|
|
confirmVariant = "contained",
|
|
confirmStartIcon,
|
|
secondaryAction,
|
|
}: DialogFooterProps) {
|
|
return (
|
|
<div className="flex flex-row flex-wrap items-center justify-end gap-2">
|
|
<Button variant="ghost" onClick={onCancel}>
|
|
{cancelLabel}
|
|
</Button>
|
|
{secondaryAction ? (
|
|
<div className="flex flex-row items-center gap-2">
|
|
{secondaryAction}
|
|
</div>
|
|
) : null}
|
|
<Button
|
|
variant={resolveConfirmVariant(confirmColor, confirmVariant)}
|
|
disabled={confirmDisabled}
|
|
onClick={onConfirm}
|
|
>
|
|
{confirmStartIcon}
|
|
{confirmBusyLabel ?? confirmLabel}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|