Commit Graph

6 Commits

Author SHA1 Message Date
Lucas 'Paperboy' Rose-Winters f566ad1d93 feat(dashboard): implement responsive header with tab scrolling and overflow menus
Add comprehensive responsive header system with Google-quality UX:

Tab Navigation:
- Add TabScrollManager for horizontal scrolling tabs
- Left/Right navigation arrows appear when scrollable
- Edge fade indicators show more content exists
- Smooth scroll behavior with momentum
- Progressive sizing: full → icon+name → icon-only
- Automatic scroll position tracking

Button Overflow System:
- Add HeaderOverflowManager with ResizeObserver
- Three responsive modes based on container width:
  * Full mode (>900px): all buttons visible
  * Overflow mode (500-900px): priority + "More" (⋮) menu
  * Compact mode (<500px): priority + hamburger (☰) menu
- Priority buttons (Lock + Edit) always visible
- Smooth transitions between modes

Dropdown Menu:
- Professional slide-down animation
- Full keyboard navigation (arrows, Home, End, Escape)
- Click-outside-to-close behavior
- ARIA attributes for accessibility
- Focus management and trap
- Auto-refresh on edit mode changes
- High z-index (10003) ensures visibility above all UI

Cross-Tab Widget Dragging:
- Add collision detection for widget placement
- Implement moveWidgetToTab() with collision avoidance
- Find available positions in target tab automatically
- Update dragDrop.js to detect tab hover
- Visual feedback with tab highlight on hover
- Proper widget positioning after cross-tab move

Additional Features:
- Sort Tab button for current-tab-only auto-layout
- Mobile optimizations with compact buttons
- Responsive breakpoints at 768px and 480px
- Hardware-accelerated animations
- Touch-friendly 44px minimum targets

Files changed:
- New: tabScrollManager.js, headerOverflowManager.js
- Modified: dashboardTemplate.html, dashboardIntegration.js
- Modified: dashboardManager.js, dragDrop.js, style.css
- Modified: editModeManager.js (lock state default)
2025-10-27 14:48:38 +11:00
Lucas 'Paperboy' Rose-Winters 6af499b07a fix(dashboard): resolve presentCharacters widget styling and auto-layout issues
- Remove double left border accent on character cards by hiding inner border when inside widget container
- Increase maxAutoSize width from 3 to 4 columns to support large displays
- Fix viewport height calculation to use visible area instead of scrollable container height
- Change auto-layout boundary check from > to >= to prevent widgets extending beyond viewport
- Add Done button for cleaner edit mode exit UX
- Wire up Done button event listener in dashboardIntegration
2025-10-26 14:52:02 +11:00
Lucas 'Paperboy' Rose-Winters 8317471922 fix(dashboard): improve edit mode UX and remove redundant weather subtitle
- Disable contenteditable fields in edit widget mode to prevent keyboard popup
- Re-enable content editing when exiting edit mode
- Change button tooltip from 'Toggle Edit Mode' to 'Toggle Edit Widget Mode' for clarity
- Remove redundant 'WEATHER' subtitle from weather widget (only show single editable field)
- Prevents layout shift on mobile when keyboard appears during widget arrangement
2025-10-26 10:29:55 +11:00
Lucas 'Paperboy' Rose-Winters f84cbf794a feat(dashboard): add lock button to prevent accidental widget movement
- Add lock/unlock button to dashboard header (always visible)
- Lock state prevents dragging in both normal and edit modes
- Lock state prevents resizing in edit mode
- Icon changes: lock-open (unlocked) ↔ lock (locked)
- Hide resize handles and prevent grab cursor when locked
- Lock state persists across edit mode toggles
- Integrate lock checks in DragDropHandler and ResizeHandler
- Pass editManager reference to drag/resize handlers for lock state access
2025-10-25 19:50:17 +11:00
Lucas 'Paperboy' Rose-Winters 4ea1c55a75 fix(dashboard): correct rem-to-pixel conversion for drag overlay grid cells
- Convert rowHeight and gap from rem to pixels using gridEngine.remToPixels()
- Fix highlightGridCells() to use pixel values for positioning and sizing
- Fix showGridOverlay() to calculate container height in pixels
- Resolves issue where green highlight boxes rendered as tiny squished lines
- Follows same conversion pattern used in gridEngine.getPixelPosition()
2025-10-25 18:51:20 +11:00
Lucas 'Paperboy' Rose-Winters dd1de2191e feat(dashboard): implement complete edit mode UI system (Task 1.7)
- Add EditModeManager class with full edit mode lifecycle
- Implement edit mode toggle with save/cancel
- Create edit control buttons (save, cancel) in dashboard header
- Add grid overlay visualization (repeating gradient pattern)
- Build widget library sidebar with 6 widget types
- Implement per-widget controls (settings ⚙, delete ×)
- Add confirmation dialogs for delete/cancel/reset
- Store original layout for cancel functionality
- Event-driven architecture with change listeners
- Complete integration demo showing:
  - Drag and drop (from Task 1.5)
  - Resize handles (from Task 1.6)
  - Edit mode controls
  - Widget library
  - Status bar with real-time stats
- Create complete dashboard test harness with:
  - Dashboard header with edit toggle
  - Widget library sidebar
  - Edit/view mode switching
  - Per-widget controls on hover
  - Status bar (mode, widget count, grid units)
  - Production-ready UI/UX
- 470 lines core code, 920 lines complete demo
- All systems work together seamlessly
2025-10-23 10:11:51 +11:00