added delete

vite-project/src/App.tsx

@@ -125,17 +125,33 @@ export function InputGroupDemo({ onSent }): {
   );
 }
 
-function NotesList({ notes }: { notes: Note[] }) {
+function NotesList({
+  notes,
+  onDelete,
+  deletingIds,
+}: {
+  notes: Note[];
+  onDelete?: (id: string) => void;
+  deletingIds?: Set<string>;
+}) {
   if (!notes.length) {
     return <p className="text-center">No notes yet.</p>;
   }
 
   return (
     <div className="space-y-4">
-      {notes.map((note) => (
+      {notes.map((note) => {
+        const isDeleting = deletingIds?.has(note.id) ?? false;
+        return (
           <Card key={note.id}>
             <CardHeader className="justify-end-safe">
-            <Button size="icon-sm" aria-label="Delete note" title="Delete note">
+              <Button
+                size="icon-sm"
+                aria-label="Delete note"
+                title="Delete note"
+                onClick={() => onDelete?.(note.id)}
+                disabled={isDeleting}
+              >
                 <Trash2Icon />
               </Button>
             </CardHeader>
@@ -152,7 +168,8 @@ function NotesList({ notes }: { notes: Note[] }) {
               </p>
             </CardFooter>
           </Card>
-      ))}
+        );
+      })}
     </div>
   );
 }
@@ -161,6 +178,7 @@ function App() {
   const [notes, setNotes] = useState<Note[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [loadError, setLoadError] = useState<string | null>(null);
+  const [deletingIds, setDeletingIds] = useState<Set<string>>(new Set());
 
   async function fetchUserNotes() {
     const resp = await fetch(`${baseUrl}/content/${username}`);
@@ -193,6 +211,34 @@ function App() {
     loadNotes();
   }
 
+  async function handleDelete(id: string) {
+    if (deletingIds.has(id)) return;
+
+    const prevNotes = notes;
+    setNotes((prev) => prev.filter((n) => n.id !== id));
+    setDeletingIds((prev) => {
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+
+    try {
+      await fetch(`${baseUrl}/content/${id}`, {
+        method: "DELETE",
+      });
+      setNotes((prev) => prev.filter((n) => n.id !== id));
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Unknown error";
+      setLoadError(msg);
+    } finally {
+      setDeletingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }
+  }
+
   useEffect(() => {
     loadNotes();
   }, []);
@@ -215,7 +261,11 @@ function App() {
               Failed to load notes: {loadError}
             </div>
           ) : null}
-          <NotesList notes={notes} />
+          <NotesList
+            notes={notes}
+            onDelete={handleDelete}
+            deletingIds={deletingIds}
+          />
         </div>
       </div>
     </div>