Confirm deletions

src-web/hooks/Confirm.tsx

@@ -1,21 +1,40 @@
+import type { ButtonProps } from '../components/core/Button';
 import { Button } from '../components/core/Button';
 import { HStack } from '../components/core/Stacks';
 
 interface Props {
   hide: () => void;
+  onResult: (result: boolean) => void;
+  confirmButtonColor?: ButtonProps['color'];
+  confirmButtonText?: string;
 }
-export function Confirm({ hide }: Props) {
+export function Confirm({
+  hide,
+  onResult,
+  confirmButtonColor = 'primary',
+  confirmButtonText = 'Confirm',
+}: Props) {
   const focusRef = (el: HTMLButtonElement | null) => {
     el?.focus();
   };
 
+  const handleHide = () => {
+    onResult(false);
+    hide();
+  };
+
+  const handleSuccess = () => {
+    onResult(true);
+    hide();
+  };
+
   return (
     <HStack space={2} justifyContent="end">
-      <Button className="focus" color="gray" onClick={hide}>
+      <Button className="focus" color="gray" onClick={handleHide}>
         Cancel
       </Button>
-      <Button className="focus" ref={focusRef} color="primary">
-        Confirm
+      <Button className="focus" ref={focusRef} color={confirmButtonColor} onClick={handleSuccess}>
+        {confirmButtonText}
       </Button>
     </HStack>
   );

src-web/hooks/useConfirm.tsx

@@ -1,14 +1,34 @@
+import type { ButtonProps } from '../components/core/Button';
 import { useDialog } from '../components/DialogContext';
 import { Confirm } from './Confirm';
 
 export function useConfirm() {
   const dialog = useDialog();
-  return ({ title, description }: { title: string; description?: string }) => {
-    dialog.show({
-      title,
-      description,
-      hideX: true,
-      render: Confirm,
+  return ({
+    title,
+    description,
+    confirmButtonColor,
+    confirmButtonText,
+  }: {
+    title: string;
+    description?: string;
+    confirmButtonColor?: ButtonProps['color'];
+    confirmButtonText?: string;
+  }) => {
+    return new Promise((resolve: (r: boolean) => void) => {
+      dialog.show({
+        title,
+        description,
+        hideX: true,
+        render: ({ hide }) => (
+          <Confirm
+            hide={hide}
+            onResult={resolve}
+            confirmButtonColor={confirmButtonColor}
+            confirmButtonText={confirmButtonText}
+          />
+        ),
+      });
     });
   };
 }