valknar/units-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
24 Commits 1 Branch 0 Tags
b2fd1e9534da4b7c7c5fe196275c85969bb32d39
Commit Graph

3 Commits

Author SHA1 Message Date
Sebastian Krüger
b2fd1e9534 fix: add TypeScript declarations and fix build errors 
Fixed TypeScript compilation errors preventing Docker build:

1. Added type declarations for convert-units library:
   - Created types/convert-units.d.ts with proper interfaces
   - Defined Unit and Converter interfaces
   - Made value parameter optional in convert() function
   - Methods like measures() accessible on Converter instance

2. Fixed CommandPalette type error:
   - Added explicit type annotation to commands array
   - Made color property optional (color?: string)
   - Theme commands don't have color, measure commands do

Build now completes successfully:
- TypeScript compilation passes
- Static pages generate correctly
- Ready for Docker build

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-08 11:21:18 +01:00
Sebastian Krüger
eb556ddfce feat: ensure all category components use consistent hex colors 
Update all category-related UI components to use getCategoryColorHex() function
instead of CSS variables for consistent color application across the app.

Changes:
- MainConverter: category buttons now use hex colors for background/border
- MainConverter: quick result display uses hex color for text and border
- MainConverter: result cards use hex color for left border
- CommandPalette: measure commands use hex colors for color indicators
- SearchUnits: category color dots use hex colors

This ensures all category colors are consistently applied using the same
hex color values defined in the OKLCH color palette.

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-08 10:36:26 +01:00
Sebastian Krüger
7f7bc69d04 feat: implement Phase 4 - Command palette, visual comparison, and polish 
Add final layer of advanced features for spectacular UX:

⌨️ Command Palette (CommandPalette.tsx):
- Trigger with Ctrl/Cmd+K keyboard shortcut
- Search and execute commands instantly
- Quick access to all 23 measurement categories
- Theme switching commands (light/dark/system)
- Keyboard navigation (↑/↓ arrows, Enter to select)
- Escape to close
- Color-coded category commands
- Backdrop blur overlay
- Animated scale-in entrance
- Footer with keyboard hints
- Smart filtering by keywords

📊 Visual Comparison (VisualComparison.tsx):
- Toggle between grid and chart view
- Horizontal bar chart showing magnitude differences
- Animated bars with 500ms transitions
- Auto-calculated percentages relative to max value
- Color-coded bars matching category colors
- Tabular number formatting
- Clean, minimal design

🔄 Unit Swap Functionality:
- Swap button between From/To units
- ArrowLeftRight icon
- Automatically converts value on swap
- Two-unit quick converter mode
- Large result display with color accent
- Responsive layout

📱 Footer Component (Footer.tsx):
- Three-column grid layout (About, Features, Links)
- GitHub repository link
- convert-units library attribution
- Keyboard shortcuts reference
- Feature highlights
- Made with ❤️ message
- Responsive design (stacks on mobile)
- Copyright notice with current year
- Smooth hover transitions

🎨 Enhanced MainConverter:
- From/To unit selector with swap button
- Quick result display between selectors
- Toggle between grid and chart views
- BarChart3 icon for view switcher
- Integrated command palette
- Better spacing and layout
- Target unit state management
- Auto-update target unit on measure change

✨ Enhanced Page Layout:
- Sticky header with backdrop blur
- Flexbox layout for footer at bottom
- Keyboard shortcuts hint (/ and Ctrl+K)
- Improved header spacing
- Better visual hierarchy

Features Now Complete:
✅ Command palette with Ctrl+K
✅ Visual comparison bar charts
✅ Unit swap functionality
✅ Professional footer
✅ From/To quick converter
✅ Chart/Grid view toggle
✅ Sticky navigation header
✅ Full keyboard navigation

The app is now feature-complete with:
- 23 measurement categories
- 187 individual units
- Real-time conversion
- Fuzzy search (/)
- Command palette (Ctrl+K)
- Dark mode
- Conversion history
- Favorites & copy
- Visual comparisons
- Unit swapping
- Complete footer

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-08 10:20:32 +01:00