code-review-fix task 10.3: add confirmation dialog before delete-all annotations

This commit is contained in:
Marko Djordjevic 2026-02-18 20:28:46 +01:00
parent ed05bd6972
commit d113815403

View file

@ -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