diff --git a/apps/desktop/layer/renderer/src/components/ui/modal/stacked/hooks.tsx b/apps/desktop/layer/renderer/src/components/ui/modal/stacked/hooks.tsx index 1d5ca0ded..82a0ed257 100644 --- a/apps/desktop/layer/renderer/src/components/ui/modal/stacked/hooks.tsx +++ b/apps/desktop/layer/renderer/src/components/ui/modal/stacked/hooks.tsx @@ -126,10 +126,45 @@ export const useDialog = (): DialogInstance => { const { present } = useModalStack() const { t } = useTranslation() return { + /** + * Show a confirmation dialog with different visual variants + * @param options.variant - Visual style variant: + * - "ask" (default): Standard confirmation dialog + * - "warning": Warning dialog with yellow icon and yellow confirm button + * - "danger": Danger dialog with red icon and red confirm button + */ ask: useEventCallback((options) => { + const variant = options.variant || "ask" + + // Variant-specific configuration + const variantConfig = { + ask: { + icon: null, + confirmVariant: "primary" as const, + confirmClassName: "", + }, + warning: { + icon: , + confirmVariant: "primary" as const, + confirmClassName: "bg-yellow-600 hover:bg-yellow-700", + }, + danger: { + icon: , + confirmVariant: "primary" as const, + confirmClassName: "bg-red-600 hover:bg-red-700", + }, + } + + const config = variantConfig[variant] + return new Promise((resolve) => { present({ - title: options.title, + title: ( +
+ {config.icon} + {options.title} +
+ ), content: ({ dismiss }) => (
{options.message} @@ -146,6 +181,8 @@ export const useDialog = (): DialogInstance => { {options.cancelText ?? t("words.cancel", { ns: "common" })}