From 4e0264ca9581c5737b4dfe31b67b5b297cf0e7c9 Mon Sep 17 00:00:00 2001
From: Marko Djordjevic <marko.homoludens@gmail.com>
Date: Wed, 18 Feb 2026 20:37:27 +0100
Subject: [PATCH] code-review-fix task 12.4: add onPointerUp to confidence
 slider to reduce excessive callbacks

---
 src/components/PredictionPanel.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/PredictionPanel.tsx b/src/components/PredictionPanel.tsx
index baa3922..4af04ef 100644
--- a/src/components/PredictionPanel.tsx
+++ b/src/components/PredictionPanel.tsx
@@ -38,6 +38,7 @@ export default function PredictionPanel({
 }: PredictionPanelProps) {
   const [expanded, setExpanded] = useState(true);
   const [modelLoadError, setModelLoadError] = useState<string | null>(null);
+  const [localConfidence, setLocalConfidence] = useState<number | null>(null);
 
   const {
     visible,
@@ -143,14 +144,19 @@ export default function PredictionPanel({
               <div>
                 <div className="flex justify-between items-center mb-1">
                   <label className="text-[10px] text-muted-foreground">Confidence</label>
-                  <span className="text-[10px] font-mono text-foreground">{(confidenceThreshold * 100).toFixed(0)}%</span>
+                  <span className="text-[10px] font-mono text-foreground">{((localConfidence ?? confidenceThreshold) * 100).toFixed(0)}%</span>
                 </div>
                 <input
                   type="range"
                   min="0"
                   max="100"
-                  value={confidenceThreshold * 100}
-                  onChange={(e) => onConfidenceChange(Number(e.target.value) / 100)}
+                  value={(localConfidence ?? confidenceThreshold) * 100}
+                  onChange={(e) => setLocalConfidence(Number(e.target.value) / 100)}
+                  onPointerUp={(e) => {
+                    const value = Number((e.target as HTMLInputElement).value) / 100;
+                    setLocalConfidence(null);
+                    onConfidenceChange(value);
+                  }}
                   className="w-full h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
                 />
               </div>