fix: bar stays at new position after drag ends

Fixed issue where bars would snap back to original position on drag release.

Problem:
- On mouseup/touchend, we cleared draggedPercentage immediately
- Conversions hadn't updated yet (async state updates)
- Bar switched from draggedPercentage to old item.percentage
- Bar visually "snapped back" to original position

Solution: Delay clearing drag state until conversions update
- On drag end: only clear draggingUnit, keep draggedPercentage
- Added useEffect that watches conversions + draggingUnit
- When !draggingUnit && draggedPercentage !== null → drag just ended
- This means conversions have updated, safe to clear visual state
- Now clears draggedPercentage and baseConversionsRef

Flow:
1. User releases mouse/touch
2. handleMouseUp/handleTouchEnd: calls onValueChange(..., false)
3. Sets draggingUnit = null (stops active drag)
4. Keeps draggedPercentage (maintains visual position)
5. MainConverter updates inputValue and selectedUnit
6. Conversions recalculate
7. useEffect detects: !draggingUnit && draggedPercentage
8. Clears draggedPercentage → bar smoothly transitions to calculated position

Result: Bar stays at dragged position and smoothly settles to final value!

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/converter/VisualComparison.tsx

@@ -137,9 +137,9 @@ export default function VisualComparison({
       }
     }
     setDraggingUnit(null);
-    setDraggedPercentage(null);
+    // Don't clear draggedPercentage yet - let it clear when conversions update
     activeBarRef.current = null;
-    baseConversionsRef.current = [];
+    // baseConversionsRef cleared after conversions update
   }, [draggingUnit, conversions, onValueChange]);
 
   // Touch drag handlers
@@ -197,9 +197,9 @@ export default function VisualComparison({
       }
     }
     setDraggingUnit(null);
-    setDraggedPercentage(null);
+    // Don't clear draggedPercentage yet - let it clear when conversions update
     activeBarRef.current = null;
-    baseConversionsRef.current = [];
+    // baseConversionsRef cleared after conversions update
   }, [draggingUnit, conversions, onValueChange]);
 
   // Add/remove global event listeners for drag
@@ -219,6 +219,15 @@ export default function VisualComparison({
     }
   }, [draggingUnit, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
 
+  // Clear drag state when conversions update after drag ends
+  useEffect(() => {
+    if (!draggingUnit && draggedPercentage !== null) {
+      // Drag has ended, conversions have updated, now clear visual state
+      setDraggedPercentage(null);
+      baseConversionsRef.current = [];
+    }
+  }, [conversions, draggingUnit, draggedPercentage]);
+
   if (conversions.length === 0) {
     return (
       <div className="text-center py-8 text-muted-foreground">