From 66109a1ff990d36b60a6003eaa95e71445ab1dca Mon Sep 17 00:00:00 2001
From: pdelfan <pdelfan@gmail.com>
Date: Thu, 21 May 2026 17:13:00 -0700
Subject: [PATCH] feat: add delete card button to "add card to" modal

---
 .../addCardActions/AddCardActions.tsx         | 97 ++++++++++++++++---
 .../addCardToModal/AddCardToModalContent.tsx  |  1 +
 2 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/src/webapp/features/cards/components/addCardActions/AddCardActions.tsx b/src/webapp/features/cards/components/addCardActions/AddCardActions.tsx
index 7753c87c..80132bc9 100644
--- a/src/webapp/features/cards/components/addCardActions/AddCardActions.tsx
+++ b/src/webapp/features/cards/components/addCardActions/AddCardActions.tsx
@@ -14,9 +14,11 @@ import {
   Textarea,
   VisuallyHidden,
 } from '@mantine/core';
-import { BsExclamation } from 'react-icons/bs';
+import { BsExclamation, BsTrash2Fill } from 'react-icons/bs';
+import { MdOutlineStickyNote2 } from 'react-icons/md';
 
 interface Props {
+  cardId?: string;
   note?: string;
   noteId?: string;
   onUpdateNote: Dispatch<SetStateAction<string | undefined>>;
@@ -25,11 +27,13 @@ interface Props {
 
 export default function AddCardActions(props: Props) {
   const [showDeleteWarning, setShowDeleteWarning] = useState(false);
+  const [showDeleteCardWarning, setShowDeleteCardWarning] = useState(false);
   const [noteMode, setNoteMode] = useState(false);
   const [note, setNote] = useState(props.note);
   const MAX_NOTE_LENGTH = 500;
 
   const removeNote = useRemoveCardFromLibrary();
+  const removeCard = useRemoveCardFromLibrary();
 
   const handleDeleteNote = () => {
     if (!props.noteId) return;
@@ -51,6 +55,26 @@ export default function AddCardActions(props: Props) {
     });
   };
 
+  const handleDeleteCard = () => {
+    if (!props.cardId) return;
+
+    removeCard.mutate(props.cardId, {
+      onError: () => {
+        notifications.show({
+          message: 'Could not delete card',
+          color: 'red',
+          autoClose: 5000,
+          withCloseButton: true,
+          position: 'top-center',
+          icon: <BsExclamation />,
+        });
+      },
+      onSettled: () => {
+        props.onClose();
+      },
+    });
+  };
+
   if (noteMode) {
     return (
       <Card
@@ -118,6 +142,7 @@ export default function AddCardActions(props: Props) {
           <Text>Delete note?</Text>
           <Group gap={'xs'}>
             <Button
+              size="xs"
               color="red"
               onClick={handleDeleteNote}
               loading={removeNote.isPending}
@@ -127,36 +152,76 @@ export default function AddCardActions(props: Props) {
             <Button
               variant="light"
               color="gray"
+              size="xs"
               onClick={() => setShowDeleteWarning(false)}
             >
               Cancel
             </Button>
           </Group>
         </Group>
+      ) : showDeleteCardWarning ? (
+        <Group justify="space-between" gap={'xs'}>
+          <Text>Delete card?</Text>
+          <Group gap={'xs'}>
+            <Button
+              color="red"
+              size="xs"
+              onClick={handleDeleteCard}
+              loading={removeCard.isPending}
+            >
+              Delete
+            </Button>
+            <Button
+              variant="light"
+              color="gray"
+              size="xs"
+              onClick={() => setShowDeleteCardWarning(false)}
+            >
+              Cancel
+            </Button>
+          </Group>
+        </Group>
       ) : (
-        <Group gap={'xs'}>
-          <Button
-            variant="light"
-            size="xs"
-            color="gray"
-            onClick={(e) => {
-              e.stopPropagation();
-              setNoteMode(true);
-            }}
-          >
-            {note ? 'Edit note' : 'Add note'}
-          </Button>
-          {props.noteId && (
+        <Group gap={'xs'} justify="space-between">
+          <Group gap={'xs'}>
+            <Button
+              variant="light"
+              size="xs"
+              color="gray"
+              leftSection={<MdOutlineStickyNote2 />}
+              onClick={(e) => {
+                e.stopPropagation();
+                setNoteMode(true);
+              }}
+            >
+              {note ? 'Edit note' : 'Add note'}
+            </Button>
+            {props.noteId && (
+              <Button
+                variant="light"
+                color="red"
+                size="xs"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setShowDeleteWarning(true);
+                }}
+              >
+                Delete note
+              </Button>
+            )}
+          </Group>
+          {props.cardId && (
             <Button
               variant="light"
               color="red"
               size="xs"
+              leftSection={<BsTrash2Fill />}
               onClick={(e) => {
                 e.stopPropagation();
-                setShowDeleteWarning(true);
+                setShowDeleteCardWarning(true);
               }}
             >
-              Delete note
+              Delete card
             </Button>
           )}
         </Group>
diff --git a/src/webapp/features/cards/components/addCardToModal/AddCardToModalContent.tsx b/src/webapp/features/cards/components/addCardToModal/AddCardToModalContent.tsx
index 7eedb58c..d2b12c09 100644
--- a/src/webapp/features/cards/components/addCardToModal/AddCardToModalContent.tsx
+++ b/src/webapp/features/cards/components/addCardToModal/AddCardToModalContent.tsx
@@ -117,6 +117,7 @@ export default function AddCardToModalContent(props: Props) {
   return (
     <Stack>
       <AddCardActions
+        cardId={cardStatus.data.card?.id}
         note={isMyCard ? note : cardStatus.data.card?.note?.text}
         noteId={cardStatus.data.card?.note?.id}
         onUpdateNote={setNote}
-- 
2.51.2