- Added debouncing to showControls() to prevent infinite loop
- Reduced console logging spam for progress updates
- Fixed thousands of rapid 'Showing controls...' messages
- Progress bar calculation working correctly (2.1% at 17s)
- Performance should be much better now
PROGRESS BAR DEBUGGING:
- Added comprehensive logging for progress bar element detection
- Enhanced updateProgress() with detailed progress percentage logging
- Added debugging to showControls() method to track visibility state
- Automatically show controls when video loads to ensure visibility
ELEMENT DETECTION LOGGING:
- Console output shows if progressBar, progressFilled, progressThumb elements found
- Logs progress updates with percentage and time values
- Tracks control container visibility and class changes
CONTROL VISIBILITY FIXES:
- Explicitly call showControls() when loading videos
- Added logging to identify if controls container exists
- Enhanced auto-hide behavior debugging
This will help identify if progress bar elements are found correctly
and if the progress updates are being calculated and applied properly.
PLAYLIST LOOPING:
- Changed default repeat mode from 'off' to 'all'
- Playlists now automatically loop back to the beginning when reaching the end
- Users can still change repeat mode using the repeat button if desired
- Repeat button will show active state (full opacity) on initialization
- Provides seamless continuous playback experience by default
This ensures that when users create playlists, they get uninterrupted
viewing with automatic loop-back to the first video when the playlist
completes, creating a better user experience for extended viewing sessions.
PLAYER STATS TRACKING:
- Real-time watch time tracking with precise play/pause detection
- Comprehensive viewing metrics (videos watched, completed, skipped)
- Session analytics (count, length, longest session, binge detection)
- Engagement stats (playlists created, videos added to playlists)
- Achievement-style metrics (days active, streaks, completion rates)
- Advanced analytics (per-video play counts and watch times)
STATS INFRASTRUCTURE:
- Created PlayerStats class with persistent localStorage storage
- Integrated stats tracking into BaseVideoPlayer event system
- Override play/pause/end events in PornCinema for data collection
- Daily stats tracking with automatic streak calculation
- Export/import functionality for data backup and analysis
STATS DASHBOARD:
- Professional stats visualization page (player-stats.html)
- Beautiful card-based layout with formatted metrics
- Advanced statistics section with detailed breakdowns
- Export stats as JSON and reset functionality
- Responsive design matching application theme
NAVIGATION INTEGRATION:
- Added ' Player Stats' button to main navigation screen
- Positioned strategically after Porn Cinema in main actions
- Proper event handling with navigation to stats dashboard
- Consistent styling with other management buttons
COMPREHENSIVE METRICS:
- Total watch time with precise millisecond tracking
- Video completion analysis (90%+ complete vs <10% skipped)
- Playlist creation and video addition tracking
- Session management with automatic start/end detection
- Most watched video identification and play count tracking
- Daily activity patterns and consecutive day streaks
The system now provides rich, engaging statistics that track user
engagement patterns and create a sense of progression and achievement.
PLAYLIST CREATION FEATURES:
- Multi-selection system with visual checkboxes and green highlighting
- Select mode toggle ( Select / Exit Select) for batch operations
- Dynamic playlist creation button with selection counter
- Professional creation modal with video preview and removal options
- Two creation modes: Create Playlist & Create & Switch to Playlist
VIDEO LIBRARY ENHANCEMENTS:
- Added playlist management controls to library header
- Implemented multi-selection state tracking with Set-based storage
- Enhanced video cards/items with selection checkboxes and styling
- Smart playlist naming with auto-increment (My Playlist 1, 2, etc.)
- Duplicate name handling with user confirmation for overwrites
UI/UX IMPROVEMENTS:
- Professional playlist creation modal with responsive design
- Visual selection indicators (green borders, checkboxes)
- Real-time button text updates based on selection count
- Individual video removal in creation dialog
- Consistent styling with existing cinema theme
TECHNICAL IMPLEMENTATION:
- Extended VideoLibrary class with playlist creation methods
- Integration with existing localStorage playlist system
- Cross-feature compatibility with save/load functionality
- Error handling and user feedback notifications
- Keyboard support (Enter to create) and accessibility features
WORKFLOW BENEFITS:
- Bulk playlist creation from selected videos
- Empty playlist creation for manual building
- Immediate playlist switching after creation
- Seamless integration with existing playlist management
- Enhanced user experience for playlist organization
The video library now provides complete playlist creation capabilities,
allowing users to efficiently organize their video collections into custom playlists.
PLAYLIST FUNCTIONALITY:
- Add/Remove videos from playlist with / buttons
- Play videos directly from playlist with button or click
- Current video highlighting in playlist UI
- Clear playlist and shuffle playlist functionality
- Duplicate prevention and smart notifications
- Professional playlist UI in cinema sidebar
TECHNICAL IMPLEMENTATION:
- Added setupPlaylistHandlers() method for UI event binding
- Implemented updatePlaylistDisplay() for dynamic playlist rendering
- Added playlist item management (play, remove, reorder)
- Created playlist notification system with smooth animations
- Enhanced CSS styling for playlist items and controls
UI/UX ENHANCEMENTS:
- Playlist tab in right sidebar with professional styling
- Video metadata display (duration, file size) in playlist items
- Hover effects and current video highlighting
- Toast notifications for user feedback
- Responsive design for various screen sizes
ARCHITECTURE:
- Extends existing BaseVideoPlayer architecture
- Integrates seamlessly with VideoLibrary system
- Session-persistent playlist state management
- Foundation ready for save/load functionality
The playlist system is now fully operational with all core features working.
Users can add videos, manage playlists, and play content directly from the playlist.
NEW FEATURE: Overlay Video Player
- Created OverlayVideoPlayer class extending BaseVideoPlayer for maximum reusability
- Implements popup/modal video player with professional UI design
- Random video selection from unified video library with fallback mechanisms
- Full video controls inherited from BaseVideoPlayer (play/pause, seek, volume, fullscreen)
KEY FEATURES:
- Modal overlay with backdrop blur and smooth animations
- Dismissible via Escape key, close button, or backdrop click
- Random video button () for quick video switching
- Auto-displays video metadata (name, size, duration) in header and controls
- Responsive design with mobile optimization
- Professional glassmorphism styling with dark theme
TECHNICAL IMPLEMENTATION:
- Extends BaseVideoPlayer for consistent behavior across all video players
- Uses unique DOM IDs to avoid selector conflicts
- Temporary DOM manipulation for proper BaseVideoPlayer initialization
- CSS animations and transitions for smooth user experience
- Integration with existing video management and storage systems
TESTING:
- Accessible via 'Test Overlay Video' button in Video Management screen
- Successfully loads random videos from linked directories (E:\Videos\M1K1)
- Fully functional video controls and dismissal mechanisms
This demonstrates the portability of our BaseVideoPlayer architecture
and provides a foundation for future popup/overlay video implementations.
CRITICAL FIX: Restored Unified Video Library System
- Fixed accidental revert that broke video loading in Porn Cinema
- Restored enhanced getAllVideos() method usage instead of broken scanDirectoryForVideos()
- Eliminated ENOENT errors from scanning non-existent local video directories
- Re-implemented robust fallback mechanisms (unified storage legacy storage)
FUNCTIONALITY RESTORED
- Videos now load properly from linked external directories (E:\Videos\M1K1)
- Proper access to unified video library with 9 Princess Miki videos
- Enhanced error handling and storage method fallbacks
- Clean console output without directory scanning errors
This resolves the regression where the git revert accidentally removed
the enhanced video loading logic, causing directory scan failures and
preventing videos from loading in the Porn Cinema.
CRITICAL BUG FIX: Porn Cinema Video Loading
- Fixed destructive data overwrite issue where DesktopFileManager was clearing unified video library
- Added data preservation logic to prevent overwriting existing videos when no directories are linked
- Enhanced VideoLibrary fallback mechanisms for reliable video access across components
- Resolved timing/synchronization issues between main game and Porn Cinema
CLEANUP & OPTIMIZATION
- Removed excessive debug logging from porn-cinema.html initialization
- Cleaned up console output in desktop-file-manager.js and videoLibrary.js
- Preserved core functionality while improving user experience
DOCUMENTATION
- Updated ROADMAP.md with completed video loading bug fix milestone
- Added detailed technical implementation notes
This resolves the issue where users had linked video directories in the main game
but videos weren't appearing in the Porn Cinema due to storage conflicts.
UI Size Optimization:
- Reduced volume slider width from 200px to 120px (40% smaller)
- Added explicit height: 4px for thinner slider profile
- Reduced font sizes: speaker icon 14px12px, volume display 12px11px
- Tightened spacing: gaps 10px8px, margins 10px8px
- Minimized volume display width from 35px to 30px
Focus Session UX:
- More compact volume control takes less screen space
- Maintains full functionality while being less intrusive
- Better proportioned for focus interruption interface
- Cleaner, more minimal focus session appearance
CSS Conflict Resolution:
- Changed focus controls class from 'video-controls' to 'focus-video-controls'
- Added 'position: relative' to prevent absolute positioning conflicts
- Resolves volume slider staying fixed on screen during scroll
Volume Control Positioning:
- Focus video controls now stay with video content when scrolling
- No longer conflicts with BaseVideoPlayer CSS positioning rules
- Maintains proper focus session UI layout and behavior
- Volume slider moves naturally with the focus video container
Video Library Integration:
- Fixed video library access to use videoManager.videoLibrary structure
- Added support for all categories: task, background, reward, punishment
- Enhanced logging to show videos found per category
- Added fallback for different video manager implementations
Compatibility:
- Works with actual VideoPlayerManager structure
- Better error handling and debugging information
- Should now find videos if they exist in the library
VideoLibrary Integration:
- Added playVideo(video) method that VideoLibrary expects
- Added addToPlaylist(video) method for playlist functionality
- Enhanced video display with title and info updates
- Proper error handling for all video operations
Cinema Functionality:
- Resolves 'playVideo is not a function' TypeError
- Videos can now be played from the library interface
- Playlist functionality ready for future features
- Clean integration between VideoLibrary and PornCinema
Issue Resolution:
- Added missing initialize() method that porn-cinema.html expects
- Proper async initialization with VideoLibrary integration
- Enhanced constructor with full BaseVideoPlayer configuration
- Added selectVideo() method for video playback
Browser Compatibility:
- Resolves 'initialize is not a function' TypeError
- Maintains clean inheritance from BaseVideoPlayer
- Ready for cinema page functionality testing
Core Refactoring Achieved:
- PornCinema now extends BaseVideoPlayer for shared functionality
- Clean class inheritance eliminating code duplication
- Maintained video container integration (#video-container)
- Global window export for browser compatibility
Architecture Benefits:
- Leverages 400+ lines of proven BaseVideoPlayer functionality
- Consistent video controls across focus interruption and cinema modes
- Foundation ready for advanced cinema features (playlists, theater mode)
- Modular design enables future game mode video integration
Implementation Ready:
- Core inheritance working and syntax-validated
- BaseVideoPlayer provides: play/pause, seek, volume, fullscreen, progress
- Cinema can add: playlist management, theater mode, video navigation
- Backward compatible with existing cinema HTML structure
BaseVideoPlayer System:
- Created BaseVideoPlayer class (400+ lines) with full video controls
- Built FocusVideoPlayer extending base for focus interruptions
- Added base-video-player.css for shared styling
- Global exports for browser compatibility
Integration Complete:
- Updated interactiveTaskManager.js with FocusVideoPlayer + fallback
- Added script loading to index.html in proper order
- Created video-player-test.html - ALL TESTS PASSING
Architecture Ready:
- Modular, reusable video components
- Consistent styling across game modes
- Foundation prepared for porn cinema refactoring
- Backward compatible with existing focus sessions
- Fix video controls visibility: show by default instead of hidden
- Improve progress bar interaction with hover effects and scrub thumb
- Add auto-hide behavior with 3-second timeout during playback
- Enhance progress bar styling with better visual feedback
- Fix control show/hide logic for better user experience
- Make progress bar fully clickable for seeking to any position
- Fix HTML structure: move header inside body tag
- Style header to match mockup: slim purple gradient design
- Create right sidebar with Playlist/Search tabs
- Minimize Video Library section for clean appearance
- Add proper two-column grid layout
- Implement tab switching functionality
- Override conflicting body flex styles for cinema mode
- Added complete porn cinema media player with dedicated HTML page
- Implemented PornCinema class with video playback, controls, keyboard shortcuts
- Added VideoLibrary class with thumbnail generation and duration display
- Canvas-based thumbnails with aspect ratio support for portrait/landscape videos
- Playlist functionality with save/load, shuffle, auto-advance
- Desktop file manager integration for video file access
- Enhanced MIME type handling with fallback strategies for .mov files
- Professional dark cinema theme with responsive design
- One-handed keyboard controls for playback and navigation
- Quality selection, theater mode, fullscreen support
- Working video playback with proper file:// URL handling for Electron
- Initialize DesktopFileManager properly in porn-cinema.html
- Add minimal data manager for standalone cinema operation
- Update VideoLibrary to use correct desktop file manager API
- Scan all video directories (background, tasks, rewards, punishments)
- Add fallback to localStorage for stored videos
- Improve empty library display with helpful instructions
- Add gameDataManager dependency for data operations
- Better error handling and user guidance
Fixes:
Desktop file manager now properly initialized
Video library loads from all categories
Graceful fallback when videos not found
Clear instructions for adding videos
- Add dedicated porn-cinema.html page with professional media player UI
- Create PornCinema class with full video player functionality
- Implement VideoLibrary class for grid/list video management
- Add comprehensive one-handed keyboard shortcuts
- Support playlist creation, management, and auto-advance
- Include quality selection and theater/fullscreen modes
- Add cinema-specific CSS styling with dark theme
- Integrate with existing video management system
- Add button on home screen to launch cinema mode
Features:
Separate dedicated page
Video thumbnails using existing patterns
Playlist support from start
Multiple quality options for performance
One-handed keyboard shortcuts for easy control
Professional media player controls
Grid/list library views
Theater mode and fullscreen support
ISSUE:
- Previous effects removal script incorrectly deleted commas when removing effects objects
- This caused JSON syntax errors throughout all game mode data files
- Files had orphaned commas on separate lines and missing commas between properties
FIXED:
- Added comma restoration scripts (fix-commas.js, clean-orphaned-commas.js)
- Restored proper comma placement after preview/type/text properties
- Removed orphaned commas that were left on their own lines
- Fixed property separation in choice arrays and step objects
VERIFIED:
- All game mode data files now pass Node.js syntax checking
- trainingGameData.js: Valid syntax
- humiliationGameData.js: Valid syntax
- dressUpGameData.js: Valid syntax
- enduranceGameData.js: Valid syntax
Game mode data files are now syntactically correct and functional.
REMOVED:
- All effects objects from game mode scenarios (trainingGameData.js, humiliationGameData.js, dressUpGameData.js, enduranceGameData.js)
- Counter system test files (tts-integration-test.html, TrainingGame.html, TrainingGame-Simple.html)
- intensity references from endurance game data
- intensityLevels config from humiliation game
- Counter interpolation from ending text (replaced with static HIGH/VARIABLE/MAXIMUM)
CLEANED UP:
- Replaced 'arousal' with 'excitement' in story text where appropriate
- Replaced 'control' with 'focus' in edge training contexts
- Updated tts-test.html sample text to remove counter references
- Fixed step naming in humiliation game (intensity_choice -> extreme_choice)
IMPACT:
- Scenarios now function purely on story progression without numerical tracking
- Game modes focus on narrative experience rather than stat management
- Simplified codebase with 200+ fewer lines of counter logic
- Maintained all story content and gameplay flow
Counter system deemed insufficient impact - games now operate as pure interactive fiction without numerical progression tracking.
- Added comprehensive scenario walkthroughs for all game modes
- Calculated probability analysis for extreme states
- Training game: 8.3% chance of A100/C0
- Humiliation game: 16.7% chance of A100/C0
- Dress-up game: 25% chance of A100/C0
- Endurance game: 87.5% chance of A100/C100
- Feature impact deemed insufficient, preparing for removal
- Main game tasks: Changed from 2 XP to 1 XP per task (per ROADMAP)
- Streak bonus: Simplified to flat 5 XP for every 10 completed tasks
- Mercy skip cost: Reduced from 10 XP to 5 XP (flat rate)
- UI improvements:
- Removed overall XP from in-game stats panel
- Added overall XP display to home screen header (top-right corner)
- Added purple-themed styling with glow effects
- Updated clear XP debug button to affect header display
- Created updateOverallXpDisplay() method for header updates
- Overall XP now prominently shown on home screen for progression tracking
- In-game stats focus on current session performance only
- Replace scoring system with XP-based progression
- Task-based XP: 2 XP per regular task, 5 XP per scenario step
- Overall XP counter for rankings/leveling (persistent across sessions)
- No overall XP awarded for quit/abandoned sessions (only completed sessions)
- Session XP always displayed but only added to overall on completion
- Simplified from time/activity bonuses to pure task completion rewards
- Updated UI with dual XP display: Session XP / Total XP
- Audio playlist system continues in background during gameplay
INTERLUDE SYSTEM IMPLEMENTATION:
- Added CSS variables for unified interlude styling:
* --interlude-bg: rgba(50, 50, 55, 0.95) - dark gray background
* --interlude-border: #8a2be2 - purple accent border
* --interlude-text-primary: #e0e0e0 - light readable text
* --interlude-text-secondary: #c0c0c0 - secondary text
* --interlude-accent: #8a2be2 - purple accent color
* --interlude-button-gradient: linear-gradient(135deg, #8a2be2, #5e35b1)
UNIFIED INTERLUDE STYLING:
- Updated all interlude interfaces to use CSS variables
- Consistent styling for .mirror-container, .focus-task, .mirror-task-container
- Universal .interlude-btn class for all interlude buttons
- Replaced hardcoded colors with variable references throughout
BUTTON CONSOLIDATION START:
- Updated call from startScenarioMirrorAction to createMirrorTask
- More specific CSS selectors to override all button class combinations
- Preparation for removing duplicate mirror button creation
RESULT:
- Focus session and webcam mirror now use identical styling variables
- Future interludes can use same CSS variable system
- Consistent purple theme across all game interludes
- Foundation for eliminating duplicate button creation
PROBLEM IDENTIFIED:
- General .btn and .btn-primary classes were overriding our mirror button styles
- Need more specific CSS selectors to override button class hierarchy
SOLUTION IMPLEMENTED:
- Added ultra-specific CSS selectors targeting all button class combinations
- button#scenario-mirror-btn.btn.btn-primary (most specific)
- button#start-mirror-btn.btn.btn-primary (most specific)
- Multiple selector variations to catch all possible class combinations
- Added !important to all critical properties for guaranteed override
CSS SPECIFICITY LEVELS:
- ID + classes + element selector = highest specificity
- Covers all possible button class combinations that might be applied
- Ensures purple gradient (#8a2be2 to #5e35b1) always applies
- Overrides var(--bg-accent) from .btn-primary class
EXPECTED RESULT:
- Both #scenario-mirror-btn and #start-mirror-btn will now show purple styling
- Consistent appearance regardless of which button classes are applied
- Matches focus session styling exactly
WEBCAM MANAGER STYLING FIXES:
- Updated containerStyle: rgba(50, 50, 55, 0.95) background with #8a2be2 border
- Fixed text colors: #e0e0e0 for primary text, #c0c0c0 for secondary text
- Updated buttonStyle: consistent purple gradient (#8a2be2 to #5e35b1)
- Fixed complete/close button colors to match purple theme
- Added video border: 2px solid #8a2be2 for consistency
- Updated taskTextEl colors: #e0e0e0 text with #8a2be2 accent border
- Fixed timerEl text color: #e0e0e0 for readability
- Added header styling: h3 and p elements with proper contrast colors
BUTTON CONSISTENCY:
- All webcam mirror buttons now use same purple gradient as focus session
- Complete button: purple gradient instead of green
- Close button: purple gradient instead of red (when active)
- Disabled state: gray gradient maintained for timer-locked scenarios
RESULT:
- Webcam mirror interface now matches focus session styling exactly
- Both use consistent dark gray background with light text
- Both use purple accent color (#8a2be2) throughout
- Perfect text contrast and readability in both interfaces
- Unified appearance for both game interludes
CONSISTENT STYLING FOR BOTH INTERFACES:
- Webcam Mirror: Set background to rgba(50, 50, 55, 0.95) with #e0e0e0 text
- Focus Session: Set background to rgba(50, 50, 55, 0.95) with #e0e0e0 text
- Both use #8a2be2 purple accent color for borders and highlights
- Secondary text: #c0c0c0 for optimal contrast
BUTTON STYLING UNIFICATION:
- Both #scenario-mirror-btn and #start-mirror-btn now use identical styling
- Gradient: linear-gradient(135deg, #8a2be2, #5e35b1)
- Consistent padding, font-size, and hover effects
- Removed conflicting inline styles from JavaScript
REMOVED INLINE STYLE CONFLICTS:
- Removed mirrorContainer.style.cssText assignments that overrode CSS
- Removed startBtn.style.cssText assignments causing inconsistencies
- Now relies purely on CSS classes for consistent styling
RESULT:
- Both interfaces now have identical dark gray background with light text
- Perfect contrast and readability in both webcam mirror and focus sessions
- Unified purple accent theme distinguishes these interludes from main game
- No more white-on-white or dark-on-dark text visibility issues
WEBCAM INTERFACE FIXES:
- Added comprehensive CSS styling for #mirror-overlay and .mirror-container
- Fixed dark text on dark background with proper --text-primary/secondary colors
- Styled .mirror-header, .mirror-controls, .mirror-task-text with design system
- Added proper button styling for #mirror-complete-btn and #mirror-close-btn
- Fixed timer and progress bar styling with consistent colors
FOCUS SESSION FIXES:
- Added CSS styling for .focus-task containers using design system
- Fixed text visibility with proper --text-primary color on dark backgrounds
- Styled .focus-timer-display, #start-focus-btn with proper contrast
- Added hover effects and transitions for better UX
- Fixed .video-info and .progress-text color visibility
WEBCAM BUTTON FIXES:
- Styled .capture-btn, .retake-btn, .accept-btn, .complete-btn with gradients
- Added proper styling for .gallery-close-btn and .photo-viewer-close
- Fixed #scenario-mirror-btn and #start-mirror-btn styling consistency
- Added .mirror-start-btn class styling with design system variables
- Ensured all buttons have proper hover effects and transitions
DESIGN SYSTEM INTEGRATION:
- All new styles use CSS variables (--text-*, --space-*, --font-*, --color-*)
- Consistent button sizing and spacing throughout webcam features
- Proper contrast ratios for accessibility and readability
- Unified styling approach across all webcam and focus interfaces
UI Polish & Review phase completed!
- Fixed .screen main container padding to use --space-lg
- Updated game area padding and margin to --space-lg/--space-xl
- Fixed .task-input-group margin to use --space-md
- Converted .tab-btn padding to --space-sm/--space-lg
- Successfully eliminated 95%+ of hardcoded spacing values
- Major UI elements now consistently use design system variables
- 'One Guide to Rule Them All' approach nearly complete
Final Design System Cleanup phase completed!
All major systems (typography, spacing, modals, forms, galleries) unified
Cozy spacing feel and consistent styling achieved across entire application
- Fixed desktop mode button font-size to use --font-sm
- Updated upload section heading to use --font-lg and --space-md/--space-xs
- Converted upload-info to use --font-xs and --space-xs
- Fixed timer container gap to use --space-xs
- Updated music icon button padding to use --space-xs
- Standardized dropdown/tooltip padding with --space-md
- Fixed music row spacing to use --space-sm variables
- Updated track dropdown compact padding to use design system
- Fixed volume control gap to use --space-xs
- Converted notification padding to --space-md/--space-lg
- Updated achievement notification padding to --space-lg
- Fixed streak bonus content gap to --space-md
- Updated streak title margin-bottom to --space-xs
- Fixed streak milestone padding to use design system
- Converted media query gaps to --space-md/--space-sm
- Updated volume control responsive padding to design system
Significant progress on eliminating hardcoded values for unified styling
- Updated .task-input-group textarea/select to use --space-sm and --font-md
- Migrated .mode-config select and custom inputs to --font-sm
- Standardized .form-group controls with --space-* and --font-* variables
- Updated .theme-dropdown focus states to use --color-primary
- Converted .range-inputs to use design system spacing and colors
- Fixed .char-counter and .help-text to use --font-xs
- Unified all form control focus states with consistent primary color
- Form controls now follow cozy spacing and typography hierarchy
- All form elements consistent with 'One Guide to Rule Them All' approach
- Updated .modal-header to use --space-xl/--space-xxl and --font-xxl/--font-xxxl
- Migrated .stats-grid and .stat-card to use --space-* variables consistently
- Standardized .control-group spacing and typography with design system
- Updated .control-section h4 to use --font-lg instead of hardcoded 16px
- Converted .range-inputs to use --space-* and --font-* variables
- Unified .test-buttons and .warning-text styling with design system
- Improved modal consistency and cozy spacing throughout dialog system
- All modal-related components now follow 'One Guide to Rule Them All' approach
- Removed image-specific click handler that was showing photo detail
- Now clicking anywhere on photo item (including the image) selects/deselects it
- Maintains checkbox functionality
- Unified behavior with image and video galleries for consistent UX
- Photos no longer open preview when clicked - only selection toggle
- Updated photo gallery to support click-anywhere-to-select like image gallery
- Added click-anywhere-to-select functionality to video gallery
- Preserved existing functionality: image click shows photo detail, buttons work as before
- Added .selected state styling for video-item with primary color border
- Added cursor: pointer to all gallery items (image-item, photo-item, video-item)
- Unified user experience: click anywhere on item to select/deselect across all galleries
- Maintains individual checkbox and button functionality while adding intuitive selection