fix: correct bar dragging behavior and remove duplicate value display

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

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