From d113815403ef21b571ac0360813d1c2abde04905 Mon Sep 17 00:00:00 2001
From: Marko Djordjevic <marko.homoludens@gmail.com>
Date: Wed, 18 Feb 2026 20:28:46 +0100
Subject: [PATCH] code-review-fix task 10.3: add confirmation dialog before
 delete-all annotations

---
 src/app/page.tsx | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 36aa872..8033210 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,6 +11,15 @@ import TalibPatternPanel from '@/components/TalibPatternPanel';
 import TrainingPanel from '@/components/TrainingPanel';
 import { ThemeToggle } from '@/components/ThemeToggle';
 import KeyboardShortcutsModal from '@/components/KeyboardShortcutsModal';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
 import { useTheme } from 'next-themes';
 import { Settings, Tag, Layers } from 'lucide-react';
 import type { PredictionState, PredictionSpan, PerCandlePrediction, ModelInfoResponse, Disagreement, DisagreementType, PredictionSummary } from '@/types/predictions';
@@ -195,6 +204,7 @@ export default function Home() {
   
   // Disagreement filter state
   const [showOnlyDisagreements, setShowOnlyDisagreements] = useState(false);
+  const [deleteAllDialogOpen, setDeleteAllDialogOpen] = useState(false);
 
   // Fetch charts list
   const fetchCharts = useCallback(async () => {
@@ -877,7 +887,7 @@ export default function Home() {
         {/* Delete all annotations */}
         <div className="px-3 py-2 border-t border-sidebar-border flex-shrink-0">
           <button
-            onClick={handleDeleteAllAnnotations}
+            onClick={() => setDeleteAllDialogOpen(true)}
             disabled={!activeChartId}
             className="w-full px-2 py-1 text-[10px] text-destructive border border-destructive/30 rounded hover:bg-destructive/10 transition-colors disabled:opacity-50"
           >
@@ -885,6 +895,35 @@ export default function Home() {
           </button>
         </div>
 
+        {/* Confirmation dialog for delete-all annotations */}
+        <Dialog open={deleteAllDialogOpen} onOpenChange={setDeleteAllDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Delete All Annotations</DialogTitle>
+              <DialogDescription>
+                This will permanently delete all span and label annotations for the current chart.
+                This action cannot be undone.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <DialogClose asChild>
+                <button className="px-4 py-2 text-sm border rounded hover:bg-muted transition-colors">
+                  Cancel
+                </button>
+              </DialogClose>
+              <button
+                onClick={() => {
+                  setDeleteAllDialogOpen(false);
+                  handleDeleteAllAnnotations();
+                }}
+                className="px-4 py-2 text-sm bg-destructive text-destructive-foreground rounded hover:bg-destructive/90 transition-colors"
+              >
+                Confirm Delete
+              </button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
         {/* Export */}
         <div className="px-3 py-2 border-t border-sidebar-border flex-shrink-0">
           <button