From 08026893d3e6306d8c61c28c3711aed630f473d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 8 Nov 2025 10:59:57 +0100
Subject: [PATCH] fix: keep source unit stable during drag - bars now update
 correctly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Critical fix: stopped switching selectedUnit during drag.

Problem:
- We were switching selectedUnit to the dragged unit
- This changed the conversion base
- All units maintained proportional relationships in log scale
- Bars didn't visually change size because ratios stayed the same
- On drag end, bars would snap back

Root cause: Switching source unit doesn't change bar proportions!
Example:
- Start: 1 meter → 3.28 feet (feet bar at 50% in log scale)
- Drag feet bar: switch to feet as source
- Now: 3.28 feet → 1 meter (meter bar at 50% in log scale)
- Proportions are IDENTICAL! No visual change!

Solution: Keep selectedUnit stable, only change inputValue
- Convert dragged value back to currently selected unit
- Update inputValue with converted amount
- selectedUnit stays unchanged
- All conversions scale proportionally from same base
- Bars resize because absolute values change!

How it works now:
- Dragging "feet" bar with "meters" selected
- Calculate new feet value from drag position
- Convert feet → meters: convertUnit(feetValue, 'ft', 'm')
- Update inputValue with meter equivalent
- All bars recalculate from meters (same base)
- Bars resize correctly because meter input changed!

Result: Bars now properly resize during drag AND stay at position on release!

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/converter/MainConverter.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/converter/MainConverter.tsx b/components/converter/MainConverter.tsx
index 76fd56b..1193114 100644
--- a/components/converter/MainConverter.tsx
+++ b/components/converter/MainConverter.tsx
@@ -128,11 +128,14 @@ export default function MainConverter() {
 
   // Handle value change from draggable bars
   const handleValueChange = useCallback((value: number, unit: string, dragging: boolean) => {
-    // When dragging a bar, switch to that unit as the source
     setIsDragging(dragging);
-    setInputValue(value.toString());
-    setSelectedUnit(unit);
-  }, []);
+
+    // Convert the dragged unit's value back to the currently selected unit
+    // This keeps the source unit stable while updating the value
+    const convertedValue = convertUnit(value, unit, selectedUnit);
+    setInputValue(convertedValue.toString());
+    // Keep selectedUnit unchanged
+  }, [selectedUnit]);
 
   return (
     <div className="w-full max-w-6xl mx-auto space-y-6">