From bd8627dbbd0ee759dbd91f7f6dfe072653b6328a Mon Sep 17 00:00:00 2001
From: zzzhizhi <77013105+zzzhizhia@users.noreply.github.com>
Date: Tue, 3 Mar 2026 17:06:24 +0800
Subject: [PATCH] feat: wire up note deletion in analysis page

The delete API, client function, and UI button already existed but
were never connected. Add handleDeleteNote callback in the analysis
page and thread onDeleteNote prop through RightColumnTabs to
NotesPanel so the hover trash icon actually works.
---
 app/analyze/[videoId]/page.tsx   | 14 +++++++++++++-
 components/right-column-tabs.tsx |  5 ++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/analyze/[videoId]/page.tsx b/app/analyze/[videoId]/page.tsx
index 66b1a39..143a1c4 100644
--- a/app/analyze/[videoId]/page.tsx
+++ b/app/analyze/[videoId]/page.tsx
@@ -14,7 +14,7 @@ import { Topic, TranscriptSegment, VideoInfo, Citation, PlaybackCommand, Note, N
 import { normalizeWhitespace } from "@/lib/quote-matcher";
 import { hydrateTopicsWithTranscript, normalizeTranscript } from "@/lib/topic-utils";
 import { SelectionActionPayload, EXPLAIN_SELECTION_EVENT } from "@/components/selection-actions";
-import { fetchNotes, saveNote } from "@/lib/notes-client";
+import { fetchNotes, saveNote, deleteNote } from "@/lib/notes-client";
 import { EditingNote } from "@/components/notes-panel";
 import { useModePreference } from "@/lib/hooks/use-mode-preference";
 import { useTranslation } from "@/lib/hooks/use-translation";
@@ -1821,6 +1821,17 @@ export default function AnalyzePage() {
     }
   }, [videoId, videoDbId, user, promptSignInForNotes]);
 
+  const handleDeleteNote = useCallback(async (noteId: string) => {
+    try {
+      await deleteNote(noteId);
+      setNotes((prev) => prev.filter((n) => n.id !== noteId));
+      toast.success("Note deleted");
+    } catch (error) {
+      console.error("Failed to delete note", error);
+      toast.error("Failed to delete note");
+    }
+  }, []);
+
   const handleTakeNoteFromSelection = useCallback((payload: SelectionActionPayload) => {
     if (!user) {
       promptSignInForNotes();
@@ -2104,6 +2115,7 @@ export default function AnalyzePage() {
                   onSaveEditingNote={handleSaveEditingNote}
                   onCancelEditing={handleCancelEditing}
                   onAddNote={handleAddNote}
+                  onDeleteNote={handleDeleteNote}
                   isAuthenticated={!!user}
                   onRequestSignIn={handleAuthRequired}
                   selectedLanguage={selectedLanguage}
diff --git a/components/right-column-tabs.tsx b/components/right-column-tabs.tsx
index 5d90fa8..ce47633 100644
--- a/components/right-column-tabs.tsx
+++ b/components/right-column-tabs.tsx
@@ -57,6 +57,7 @@ interface RightColumnTabsProps {
     isLoading?: boolean;
   };
   onAddNote?: () => void;
+  onDeleteNote?: (noteId: string) => Promise<void>;
 }
 
 export interface RightColumnTabsHandle {
@@ -94,7 +95,8 @@ export const RightColumnTabs = forwardRef<RightColumnTabsHandle, RightColumnTabs
   currentSourceLanguage,
   onRequestExport,
   exportButtonState,
-  onAddNote
+  onAddNote,
+  onDeleteNote
 }, ref) => {
   const [activeTab, setActiveTab] = useState<"transcript" | "chat" | "notes">("transcript");
   const showTranslationSelector = translationSelectorEnabled;
@@ -243,6 +245,7 @@ export const RightColumnTabs = forwardRef<RightColumnTabsHandle, RightColumnTabs
               currentTime={currentTime}
               onTimestampClick={onTimestampClick}
               onAddNote={onAddNote}
+              onDeleteNote={onDeleteNote}
             />
           </TooltipProvider>
         </div>