From bb1b4c5d2925181c28c3fdbdbe8d3616a10ed1a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 8 Nov 2025 10:45:50 +0100
Subject: [PATCH] fix: correct bar dragging behavior and remove duplicate value
 display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed two issues with draggable bars:

1. Bar length now updates correctly during drag:
   - Convert dragged unit value back to the selected unit
   - Update input value with converted amount
   - Keep selectedUnit unchanged (user still inputting in same unit)
   - Disable transitions on ALL bars while ANY bar is dragging
   - This makes bars resize smoothly and correctly as you drag

2. Removed duplicate value display from bars:
   - Value is already shown above each bar
   - Removed redundant value display from inside the colored segment
   - Keeps only the percentage indicator inside bars
   - Cleaner, less cluttered visual design

The dragging now works intuitively: dragging any bar adjusts the input
value (in the currently selected unit) to match the dragged bar's value.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/converter/MainConverter.tsx    |  8 +++++---
 components/converter/VisualComparison.tsx | 12 ++----------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/components/converter/MainConverter.tsx b/components/converter/MainConverter.tsx
index 46ba3fa..5f02efc 100644
--- a/components/converter/MainConverter.tsx
+++ b/components/converter/MainConverter.tsx
@@ -125,9 +125,11 @@ export default function MainConverter() {
 
   // Handle value change from draggable bars
   const handleValueChange = useCallback((value: number, unit: string) => {
-    setInputValue(value.toString());
-    setSelectedUnit(unit);
-  }, []);
+    // Convert the dragged unit's value back to the currently selected unit
+    const convertedValue = convertUnit(value, unit, selectedUnit);
+    setInputValue(convertedValue.toString());
+    // Keep selectedUnit the same - user is still inputting in that unit
+  }, [selectedUnit]);
 
   return (
     <div className="w-full max-w-6xl mx-auto space-y-6">
diff --git a/components/converter/VisualComparison.tsx b/components/converter/VisualComparison.tsx
index e1d6c9f..6869be9 100644
--- a/components/converter/VisualComparison.tsx
+++ b/components/converter/VisualComparison.tsx
@@ -227,7 +227,7 @@ export default function VisualComparison({
               <div
                 className={cn(
                   "absolute inset-y-0 left-0",
-                  isDragging ? "transition-none" : "transition-all duration-500 ease-out"
+                  draggingUnit ? "transition-none" : "transition-all duration-500 ease-out"
                 )}
                 style={{
                   width: `${item.percentage}%`,
@@ -235,18 +235,10 @@ export default function VisualComparison({
                 }}
               />
               {/* Percentage label overlay */}
-              <div className="absolute inset-0 flex items-center justify-between px-3 text-xs font-bold pointer-events-none">
+              <div className="absolute inset-0 flex items-center px-3 text-xs font-bold pointer-events-none">
                 <span className="text-foreground drop-shadow-sm">
                   {Math.round(item.percentage)}%
                 </span>
-                <span
-                  className="tabular-nums drop-shadow-sm"
-                  style={{
-                    color: item.percentage > 30 ? 'white' : 'var(--foreground)',
-                  }}
-                >
-                  {item.percentage > 30 && formatNumber(item.value)}
-                </span>
               </div>
 
               {/* Drag hint on hover */}