Sebastian Krüger
a6a6f84618
Fixed the draggable bars to show immediate visual feedback! Problem: Bars didn't resize during drag because: - Switching source unit kept relative proportions the same (log scale) - Bar width was using item.percentage which didn't update visually - No direct visual feedback for the dragged bar Solution: Use draggedPercentage state for immediate visual updates - Added draggedPercentage state to track visual position during drag - Save baseConversionsRef when drag starts (preserves original scale) - Calculate new value from percentage using BASE scale (not updated scale) - Use displayPercentage = isDragging ? draggedPercentage : item.percentage - Bar width and percentage label both use displayPercentage How it works now: 1. Mouse/touch down: save base conversions and current percentage 2. Mouse/touch move: calculate new percentage from drag delta 3. Set draggedPercentage state immediately (visual update!) 4. Calculate value from percentage using BASE scale 5. Call onValueChange to update conversions 6. Dragged bar shows draggedPercentage, others show calculated percentage 7. On release: clear draggedPercentage, bars settle to calculated positions Result: The dragged bar now visually follows your cursor in real-time! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Unit Converter
A spectacular, innovative unit conversion application built with modern web technologies to provide the best user experience for converting between various measurement units.
Tech Stack
- Next.js 16 - React framework with App Router and static export
- TypeScript - Type-safe development
- Tailwind CSS 4 - Modern utility-first CSS framework
- convert-units - Comprehensive unit conversion library
Features
Supported Units
23 measurement categories with 187 individual units:
- Angle, Apparent Power, Area, Current, Digital
- Each, Energy, Frequency, Illuminance, Length
- Mass, Pace, Parts Per, Power, Pressure
- Reactive Energy, Reactive Power, Speed, Temperature
- Time, Voltage, Volume, Volume Flow Rate
Innovative UX Features
- Real-time bidirectional conversion
- Smart context-aware interface with fuzzy search
- Visual comparison with color-coded categories
- Keyboard shortcuts for power users
- Mobile-first responsive design
- Conversion history with localStorage
- Dark mode support
Getting Started
Prerequisites
- Node.js 18+ or 20+
- pnpm (recommended) or npm
Installation
# Install dependencies
pnpm install
# Run development server
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start
Open http://localhost:3000 to see the app.
Project Structure
units-ui/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React components (coming soon)
├── lib/ # Utility functions (coming soon)
├── public/ # Static assets
└── IMPLEMENTATION_PLAN.md # Detailed implementation plan
Development
See IMPLEMENTATION_PLAN.md for the complete development roadmap.
License
MIT
Built with Next.js 16, Tailwind CSS 4, and convert-units