Commit Graph

9 Commits

Author SHA1 Message Date
ecf7f060ec feat: Complete Ableton-style track layout redesign
Track height & spacing improvements:
- Increased DEFAULT_TRACK_HEIGHT from 180px to 240px for vertical controls
- Increased MIN_TRACK_HEIGHT from 60px to 120px
- Increased MAX_TRACK_HEIGHT from 300px to 400px
- Added COLLAPSED_TRACK_HEIGHT constant (48px)
- Reduced control panel gap from 8px to 6px for tighter spacing
- Added min-h-0 and overflow-hidden to prevent flex overflow
- Optimized fader container with max-h-[140px] constraint

Clip-style waveform visualization (Ableton-like):
- Wrapped waveform canvas in visible "clip" container
- Added border, rounded corners, and shadow for clip identity
- Added 16px clip header bar showing track name
- Implemented hover state for better interactivity
- Added gradient background from-foreground/5 to-transparent

Track height resize functionality:
- Added draggable bottom-edge resize handle
- Implemented cursor-ns-resize with hover feedback
- Constrain resizing to MIN/MAX height range
- Real-time height updates with smooth visual feedback
- Active state highlighting during resize

Effects section visual integration:
- Changed from solid background to gradient (from-muted/80 to-muted/60)
- Reduced device rack height from 192px to 176px for better proportion
- Improved visual hierarchy and connection to track row

Flexible VerticalFader component:
- Changed from fixed h-32 (128px) to flex-1 layout
- Added min-h-[80px] and max-h-[140px] constraints
- Allows parent container to control actual height
- Maintains readability and proportions at all sizes

CSS enhancements (globals.css):
- Added .track-clip-container utility class
- Added .track-clip-header utility class
- Theme-aware clip styling for light/dark modes
- OKLCH color space for consistent appearance

Visual results:
- Professional DAW appearance matching Ableton Live
- Clear clip/region boundaries for audio editing
- Better proportions for vertical controls (240px tracks)
- Resizable track heights (120-400px range)
- Improved visual hierarchy and organization

Files modified:
- types/track.ts (height constants)
- components/tracks/Track.tsx (layout + clip styling + resize)
- components/ui/VerticalFader.tsx (flexible height)
- app/globals.css (clip styling)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 16:41:58 +01:00
ecb5152d21 feat: boost light theme to true neon intensity
Cranked up the neon vibes in light theme to match dark theme energy!

Light Theme Neon Boost:
- Bright cyan-tinted backgrounds (180-200° hue)
- Vivid magenta primary (0.28 chroma - max intensity!)
- Rich magenta/purple foreground (20% lightness, 0.12 chroma)
- Electric cyan accent (90% lightness, 0.12 chroma, 180° hue)
- Saturated borders (0.08 chroma)
- Neon cyan waveforms (60% lightness, 0.26 chroma)
- Magenta progress bars (58% lightness, 0.28 chroma)

Color Intensity Increased:
- Primary: 0.28 chroma (was 0.22 - 27% boost!)
- Foreground: 0.12 chroma (was 0.05 - 140% boost!)
- Accent: 0.12-0.18 chroma (was 0.05-0.10 - doubled!)
- Borders: 0.08 chroma (was 0.03 - nearly tripled!)
- Waveforms: 0.26-0.28 chroma (was 0.22 - 20% boost!)

Hue Shift:
- Cyan dominance (180-200° backgrounds)
- Magenta accents (300-320° primaries/foregrounds)
- Electric color combinations throughout

Now both themes have matching neon energy:
- Dark: Neon cyberpunk (purple/cyan/magenta)
- Light: Bright neon pop (cyan/magenta/purple)

Both themes now pop with vibrant, eye-catching colors! 

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 08:40:38 +01:00
bc7158dbe0 feat: vibrant neon color palette for both themes
Replaced gentle grays with eye-catching neon/vibrant colors!

Dark Theme - Neon Cyberpunk:
- Deep purple/blue backgrounds (265-290° hue)
- Bright neon magenta primary (75% lightness, 0.25 chroma, 310° hue)
- Neon cyan foreground (92% lightness, cyan tint)
- Vibrant borders with purple glow (30% lightness, 0.05 chroma)
- Electric accent colors throughout
- Neon cyan waveforms with magenta progress

Light Theme - Vibrant Pastels:
- Soft purple-tinted backgrounds (280-290° hue)
- Vivid magenta primary (55% lightness, 0.22 chroma)
- Rich purple foreground (25% lightness)
- Colorful borders and accents
- High saturation throughout (0.15-0.22 chroma)
- Vibrant purple/cyan waveforms

Color Intensity:
- Increased chroma from 0.14-0.15 to 0.20-0.25
- Much more saturated, punchy colors
- Vibrant accent colors (cyan, magenta, purple, green)
- Neon-style success (green), warning (yellow), destructive (red)

Hue Shifts:
- Purple/magenta theme (260-320° range)
- Cyan accents (180-200°)
- Warm warnings (80°)
- Green success (160°)

This gives a bold, modern, energetic aesthetic perfect
for a creative audio application - like FL Studio or
Ableton Live's colorful themes!

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 08:39:23 +01:00
2948557e94 feat: soften light theme with gentler gray tones
Reduced contrast in light theme for softer, more comfortable appearance:

Background tones (darker, gentler):
- waveform-bg: 97% (was 99% - less bright)
- card: 96% (was 98% - softer)
- background: 93% (was 96% - more muted)
- muted: 90% (was 94% - darker)
- secondary/accent: 88% (was 92% - more visible)
- border: 85% (was 88% - stronger definition)
- input: 88% (was 92% - better contrast)

Foreground tones (lighter, softer):
- foreground: 28% (was 20% - less harsh)
- card-foreground: 28% (was 20% - softer)
- secondary-foreground: 32% (was 25% - lighter)
- muted-foreground: 48% (was 45% - easier to read)

Color adjustments:
- Reduced color intensity from 0.15 to 0.14
- Softer primary: oklch(58% 0.14 240)
- All colors slightly desaturated for gentler feel

Benefits:
- Reduced contrast reduces eye strain
- Softer, warmer appearance
- More comfortable for extended use
- Better balance between light and dark themes
- Modern low-contrast aesthetic
- Similar to Figma, Linear, or Notion's light modes

Both themes now have beautifully balanced, low-contrast
palettes that are easy on the eyes and professional.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 08:31:52 +01:00
0dfbdca00c feat: lighten dark theme for softer, gentler appearance
Significantly lightened all dark theme colors for reduced contrast:

Background tones (lighter, softer):
- waveform-bg: 16% (was 10% - too dark)
- background: 18% (was 12% - lifted significantly)
- card: 22% (was 15% - more visible)
- muted: 25% (was 18% - lighter)
- secondary: 28% (was 20% - softer)
- accent: 30% (was 22% - warmer)
- border: 32% (was 25% - more subtle)

Foreground tones (softer, less harsh):
- foreground: 78% (was 85% - reduced contrast)
- card-foreground: 78% (was 85% - softer)
- secondary-foreground: 75% (was 80% - gentler)
- muted-foreground: 58% (was 60% - slightly muted)

Color adjustments:
- Reduced color intensity (0.14 vs 0.15)
- Softer blue primary: oklch(68% 0.14 240)
- More muted accent colors throughout

Benefits:
- Much softer, gentler appearance
- Reduced contrast reduces eye strain
- More comfortable for long editing sessions
- Warmer, more inviting feel
- Modern low-contrast aesthetic
- Similar to VSCode's "Dark+" or Figma's dark mode

The theme now has a beautiful, soft low-contrast aesthetic
that's easy on the eyes while maintaining readability.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 08:30:24 +01:00
f74c8abbf9 feat: harmonize light theme with soft gray tones
Replaced harsh whites with a soft, professional light gray palette:

Light tones (lightest to darkest):
- waveform-bg: 99% - near-white for waveform area
- card: 98% - soft white for cards/panels
- background: 96% - main background (was 100% harsh white)
- muted: 94% - muted elements
- secondary/accent: 92% - secondary/accent elements
- input: 92% - input backgrounds
- border: 88% - borders and dividers

Dark tones (text, darker):
- foreground: 20% - main text (was 9.8% too dark)
- card-foreground: 20% - card text
- secondary-foreground: 25% - secondary text
- muted-foreground: 45% - muted text (lighter for better contrast)

Primary color:
- Changed to pleasant blue: oklch(55% 0.15 240)
- Matches dark theme primary color concept
- More modern than pure black

Benefits:
- Softer, more pleasant appearance
- Reduced eye strain in light mode
- Better harmony with dark mode
- Professional appearance like Figma, Linear, etc.
- Maintains excellent readability
- Consistent gray palette across both themes

Both light and dark themes now have harmonized gray palettes
that are easy on the eyes and professional-looking.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 08:28:23 +01:00
46ce75f3a5 feat: harmonize dark theme with softer gray tones
Replaced harsh white contrasts with a harmonized gray palette:

Background tones (darkest to lightest):
- waveform-bg: 10% - deepest black for waveform area
- background: 12% - main app background
- card: 15% - card/panel backgrounds
- muted: 18% - muted elements
- secondary: 20% - secondary elements
- accent: 22% - accent elements
- border: 25% - borders and dividers

Foreground tones (lighter, softer):
- foreground: 85% - main text (was 98% harsh white)
- card-foreground: 85% - card text
- secondary-foreground: 80% - secondary text
- muted-foreground: 60% - muted text

Primary color:
- Changed from white to blue: oklch(70% 0.15 240)
- More pleasant, less harsh than pure white
- Better visual hierarchy

Benefits:
- Reduced eye strain with softer contrasts
- More professional, cohesive appearance
- Better visual hierarchy
- Maintains readability while being easier on the eyes
- Harmonized gray scale throughout the interface

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 08:26:43 +01:00
ee48f9475f feat: add advanced audio effects and improve UI
Phase 6.5 Advanced Effects:
- Add Pitch Shifter with semitones and cents adjustment
- Add Time Stretch with pitch preservation using overlap-add
- Add Distortion with soft/hard/tube types and tone control
- Add Bitcrusher with bit depth and sample rate reduction
- Add AdvancedParameterDialog with real-time waveform visualization
- Add 4 professional presets per effect type

Improvements:
- Fix undefined parameter errors by adding nullish coalescing operators
- Add global custom scrollbar styling with color-mix transparency
- Add custom-scrollbar utility class for side panel
- Improve theme-aware scrollbar appearance in light/dark modes
- Fix parameter initialization when switching effect types

Integration:
- All advanced effects support undo/redo via EffectCommand
- Effects accessible via command palette and side panel
- Selection-based processing support
- Toast notifications for all effects

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 20:03:40 +01:00
591f726899 feat: initialize Next.js 16 project with Tailwind CSS 4 and Docker support
Phase 1 Implementation:
- Set up Next.js 16 with React 19, TypeScript 5, and Turbopack
- Configure Tailwind CSS 4 with OKLCH color system
- Implement dark/light theme support
- Create core UI components: Button, Card, Slider, Progress, Toast
- Add ThemeToggle component for theme switching
- Set up project directory structure for audio editor
- Create storage utilities for settings management
- Add Dockerfile with multi-stage build (Node + nginx)
- Configure nginx for static file serving with caching
- Add docker-compose.yml for easy deployment
- Configure static export mode for production

Tech Stack:
- Next.js 16 with Turbopack
- React 19
- TypeScript 5
- Tailwind CSS 4
- pnpm 9.0.0
- nginx 1.27 (for Docker deployment)

Build verified and working ✓

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 15:23:00 +01:00