Add Soundboard View Mode with Dynamic Grid Layout

[minter]

Overview

Implements a new Soundboard View mode as an alternative to the traditional three-panel layout. Users can toggle between Traditional View and Soundboard View via the View menu, with full state preservation and profile-based persistence.

Key Features

🎹 Dynamic Grid Layout

• Responsive columns: 3-6 columns based on window width (900px-1400px+ breakpoints)
• No scrolling: Grid fills available vertical space with calc(100vh - 140px) constraint
• Playback controls always visible: Fixed 140px reserved at bottom
• Touch-friendly: Buttons scale to fill available space with proper gaps (12px)
• Visual feedback: Pulse animation for playing buttons, selection states, hover effects

🔍 Collapsible Search Panel

• 350px panel on the right side with smooth 0.3s animations
• Smart toggle icon: Magnifying glass + chevron
  • 🔍 → when panel is open (click to hide)
  • 🔍 ← when panel is collapsed (click to show)
• Full search functionality: Category filtering, omni-search, advanced search
• Drag & drop: Drag songs from search results directly to soundboard buttons
• State persistence: Panel state saved per profile

📑 Multiple Tabs

• 5 tabs for organizing different soundboard pages
• Custom tab names: Double-click to rename (like hotkeys/holding tank)
• Per-tab state: Each tab maintains its own button assignments

💾 File Import/Export

• .mxb file format (JSON-based)
• Single-page export: Saves active tab only (matches hotkeys pattern)
• Load/Save via toolbar: Standard file operations

⌨️ Keyboard Navigation

• Arrow keys: Grid-aware navigation with wrapping
• Enter/Space: Play selected button's song
• Delete/Backspace: Remove song from button (auto-stops if playing)
• Escape: Stop playback and clear selection
  • Plain ESC = immediate stop
  • Shift+ESC = fade out (respects preferences)

🎨 UI/UX Improvements

• Drag & drop: Move songs between buttons or from search results
• Visual states: Active, playing, hover, drop-target
• Empty state: "Drop song here" placeholders
• Tooltips: Context-aware button titles
• Bootstrap 5 integration: Follows existing UI patterns

Technical Implementation

New Modules

src/renderer/modules/soundboard/

• index.js (590 lines): Main module with event handling, initialization
• soundboard-grid.js (244 lines): Dynamic grid layout, responsive columns
• soundboard-data.js (655 lines): Save/load, file operations, button assignments
• soundboard-ui.js (167 lines): Tab management, drag-drop handlers
• soundboard-events.js (263 lines): Button clicks, keyboard navigation
• soundboard-search-panel.js (484 lines): Collapsible search with animations

src/renderer/modules/view-manager/

• index.js (367 lines): View switching, state preservation, IPC coordination

Integration Points

• Profile State: Soundboard state integrated into profile-state module
  • Button assignments saved per tab
  • Search panel state persisted
  • View preference per profile
• Audio Module: Uses existing audio playback infrastructure
• Search Module: Reuses search functionality with dedicated UI
• IPC: View toggle via menu shortcuts

CSS Updates

• 178 new lines in src/stylesheets/index.css
• Responsive grid with CSS custom properties
• Button states (hover, active, playing, selected)
• Pulse animation for playing buttons
• Search panel collapse/expand transitions
• Maintains existing color scheme and Bootstrap 5 integration

Architecture Patterns

✅ Follows existing module patterns (singleton exports, ES modules)
✅ Uses debug logger (no console.log)
✅ Context isolation compatible (secure API access)
✅ Two-phase initialization (bootstrap + dependency injection)
✅ Profile state integration
✅ Comprehensive documentation with READMEs

Documentation

• ✅ Module READMEs updated/created
• ✅ Implementation plan marked as completed
• ✅ View manager documentation added
• ✅ Code examples and usage patterns documented

Testing Recommendations

• Test view switching (Traditional ↔ Soundboard)
• Test profile switching with soundboard state
• Test file import/export (.mxb files)
• Test search panel toggle and state persistence
• Test keyboard navigation in grid
• Test drag & drop from search results
• Test button playback and visual feedback
• Test responsive behavior at different window sizes
• Test playback controls always visible (no clipping)

Screenshots

(Screenshots would go here showing the soundboard view, search panel toggle, etc.)

Breaking Changes

None. This is purely additive functionality.

Deployment Notes

• No database migrations required
• Profile state format extended (backward compatible)
• New .mxb file format introduced
• Menu updated with View toggle option (requires main process update)