Complete 3.4.2: Desktop Enhancements - Implement dashboard-style layouts

2025-09-29 21:40:06 -04:00 · 2025-09-29 21:40:06 -04:00 · a60349b40c
commit a60349b40c
parent c05c3a63cc
6 changed files with 755 additions and 4 deletions
--- a/UI_UPDATE.MD
+++ b/UI_UPDATE.MD
@ -372,10 +372,10 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
 - Tablet gesture support with swipe-to-seek functionality (swipe left/right on video seeks forward/backward 10 seconds)
 - Device detection and responsive gesture handling that differs from mobile (chat toggle) and desktop (no gestures)

-#### 3.4.2: Desktop Enhancements
- [ ] Optimize for large screen viewing
- [ ] Create sidebar sizing options
- [ ] Implement dashboard-style layouts
+#### 3.4.2: Desktop Enhancements - COMPLETED 9/29/2025
+- [x] Optimize for large screen viewing
+- [x] Create sidebar sizing options
+- [x] Implement dashboard-style layouts

 ### Sub-task 3.5: Cross-Device Synchronization

--- a/assets/js/ui-controls.js
+++ b/assets/js/ui-controls.js
@ -43,6 +43,134 @@
        }
    }

+    // Dashboard toggle functionality
+    function toggleDashboard() {
+        const theater = document.querySelector('.theater');
+        const dashboardToggleBtn = document.querySelector('.video-player__toggle-dashboard-btn');
+
+        if (!theater || !dashboardToggleBtn) return;
+
+        const isEnabled = theater.classList.contains('dashboard-enabled');
+
+        if (isEnabled) {
+            theater.classList.remove('dashboard-enabled');
+            dashboardToggleBtn.setAttribute('aria-expanded', 'false');
+            AppState.dashboardEnabled = false;
+        } else {
+            theater.classList.add('dashboard-enabled');
+            dashboardToggleBtn.setAttribute('aria-expanded', 'true');
+            AppState.dashboardEnabled = true;
+            // Initialize dashboard data when first enabled
+            updateDashboardStats();
+            updateActiveUsers();
+        }
+
+        // Store preference in localStorage
+        try {
+            localStorage.setItem('dashboard-enabled', AppState.dashboardEnabled ? 'true' : 'false');
+        } catch (e) {
+            AppLogger.log('Audio notification failed:', e);
+        }
+    }
+
+    // Dashboard stats management
+    function updateDashboardStats() {
+        // Update viewer count in dashboard
+        const dashboardViewerCount = document.getElementById('statsViewersCount');
+        if (dashboardViewerCount) {
+            const viewers = AppState.viewers || 0;
+            dashboardViewerCount.textContent = viewers.toLocaleString();
+        }
+
+        // Update stream quality
+        const streamQuality = document.getElementById('statsStreamQuality');
+        if (streamQuality) {
+            // Get from URL or assume HD for now
+            streamQuality.textContent = 'HD';
+        }
+
+        // Update uptime
+        const uptime = document.getElementById('statsUptime');
+        if (uptime) {
+            const streamStartTime = AppState.streamStartTime || Date.now() - 60000; // Default to 1 minute
+            const elapsed = Date.now() - streamStartTime;
+            const minutes = Math.floor(elapsed / 60000);
+            const seconds = Math.floor((elapsed % 60000) / 1000);
+            uptime.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        }
+    }
+
+    // Active users widget update
+    function updateActiveUsers() {
+        const activeUsersContainer = document.getElementById('activeUsers');
+        if (!activeUsersContainer) return;
+
+        // This would typically poll for active users from server
+        if (window.ChatSystem && typeof window.ChatSystem.getActiveViewers === 'function') {
+            window.ChatSystem.getActiveViewers().then(users => {
+                displayActiveUsers(users);
+            }).catch(err => {
+                AppLogger.error('Failed to get active users:', err);
+            });
+        } else {
+            // Fallback: show placeholder
+            displayActiveUsers([]);
+        }
+    }
+
+    function displayActiveUsers(users) {
+        const activeUsersContainer = document.getElementById('activeUsers');
+        if (!activeUsersContainer) return;
+
+        let html = '';
+
+        if (users.length === 0) {
+            html = `
+                <div class="user-item">
+                    <div class="user-item__status online"></div>
+                    <div class="user-item__nickname">Welcome to chat!</div>
+                </div>
+            `;
+        } else {
+            users.forEach(user => {
+                const statusClass = user.is_online ? 'online' : 'offline';
+                const nickname = user.nickname || `User ${user.user_id.substring(0, 4)}...`;
+                html += `
+                    <div class="user-item">
+                        <div class="user-item__status ${statusClass}"></div>
+                        <div class="user-item__nickname">${escapeHtml(nickname)}</div>
+                    </div>
+                `;
+            });
+        }
+
+        activeUsersContainer.innerHTML = html;
+    }
+
+    // Add new activity to the dashboard
+    function addDashboardActivity(activity) {
+        const recentActivity = document.getElementById('recentActivity');
+        if (!recentActivity) return;
+
+        const activityHtml = `
+            <div class="activity-item">
+                <div class="activity-item__avatar">${activity.icon || '💬'}</div>
+                <div class="activity-item__content">
+                    <div class="activity-item__text">${escapeHtml(activity.text)}</div>
+                    <div class="activity-item__time">${activity.time || 'Just now'}</div>
+                </div>
+            </div>
+        `;
+
+        // Remove "Welcome" message if it exists and add new activity
+        const existingActivities = recentActivity.querySelectorAll('.activity-item');
+        if (existingActivities.length >= 5) {
+            existingActivities[existingActivities.length - 1].remove();
+        }
+
+        recentActivity.insertAdjacentHTML('afterbegin', activityHtml);
+    }
+
    // Chat toggle functionality
    function toggleChat() {
        const chatSection = document.getElementById('chatSection');
@ -510,16 +638,156 @@
        AppLogger.log('UI controls event listeners initialized');
    }

+    // HTML escape utility function
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // Initialize dashboard and resize functionality
+    function initializeDashboard() {
+        // Restore dashboard state from localStorage
+        try {
+            const savedDashboardState = localStorage.getItem('dashboard-enabled');
+            if (savedDashboardState === 'true' && window.innerWidth >= 1536) { // Only restore if screen is large enough
+                setTimeout(() => toggleDashboard(), 100); // Delay to ensure DOM is ready
+            }
+        } catch (e) {
+            // localStorage not available
+        }
+
+        // Set initial stream start time for uptime tracking
+        if (!AppState.streamStartTime) {
+            AppState.streamStartTime = Date.now();
+        }
+
+        // Update dashboard stats every 10 seconds
+        setInterval(() => {
+            if (AppState.dashboardEnabled) {
+                updateDashboardStats();
+            }
+        }, 10000);
+    }
+
+    // Resize handling for dashboard panels
+    let isResizing = false;
+    let currentResizeTarget = null;
+    let startX = 0;
+    let startWidth = 0;
+
+    function handleResizeMouseDown(event, target) {
+        isResizing = true;
+        currentResizeTarget = target;
+        startX = event.clientX;
+        const targetElement = document.querySelector(target === 'dashboard' ? '.theater__dashboard-section' : '.theater__video-section');
+        startWidth = targetElement ? targetElement.offsetWidth : 0;
+        document.addEventListener('mousemove', handleResizeMouseMove);
+        document.addEventListener('mouseup', handleResizeMouseUp);
+        document.body.style.cursor = 'col-resize';
+        event.preventDefault();
+    }
+
+    function handleResizeMouseMove(event) {
+        if (!isResizing || !currentResizeTarget) return;
+
+        const deltaX = event.clientX - startX;
+        const targetElement = document.querySelector(currentResizeTarget === 'dashboard' ? '.theater__dashboard-section' : '.theater__video-section');
+        if (!targetElement) return;
+
+        const newWidth = Math.max(200, startWidth + deltaX);
+        targetElement.style.width = newWidth + 'px';
+    }
+
+    function handleResizeMouseUp() {
+        isResizing = false;
+        currentResizeTarget = null;
+        document.removeEventListener('mousemove', handleResizeMouseMove);
+        document.removeEventListener('mouseup', handleResizeMouseUp);
+        document.body.style.cursor = '';
+    }
+
+    // Initialize event listeners
+    function initializeEventListeners() {
+        // Dashboard toggle button
+        const dashboardToggleBtn = document.querySelector('.video-player__toggle-dashboard-btn');
+        if (dashboardToggleBtn) {
+            DOMUtils.addEvent(dashboardToggleBtn, 'click', toggleDashboard);
+        }
+
+        // Dashboard toggle in sidebar
+        const dashboardSidebarToggle = document.querySelector('.dashboard__toggle-btn');
+        if (dashboardSidebarToggle) {
+            DOMUtils.addEvent(dashboardSidebarToggle, 'click', toggleDashboard);
+        }
+
+        // Resize handles
+        const resizeHandles = document.querySelectorAll('.resize-handle');
+        resizeHandles.forEach(handle => {
+            DOMUtils.addEvent(handle, 'mousedown', (e) => {
+                const target = handle.dataset.target;
+                handleResizeMouseDown(e, target);
+            });
+        });
+
+        // Keyboard shortcuts
+        DOMUtils.addEvent(document, 'keydown', handleKeyboardShortcuts);
+
+        // Window resize for mobile responsiveness
+        DOMUtils.addEvent(window, 'resize', handleWindowResize);
+
+        // Page visibility for notification clearing
+        DOMUtils.addEvent(document, 'visibilitychange', handleVisibilityChange);
+
+        // Touch gesture support for mobile
+        const videoSection = document.getElementById('videoSection');
+        if (videoSection) {
+            // Swipe gestures on video area for chat toggle
+            DOMUtils.addEvent(videoSection, 'touchstart', handleTouchStart, { passive: true });
+            DOMUtils.addEvent(videoSection, 'touchmove', handleTouchMove, { passive: true });
+            DOMUtils.addEvent(videoSection, 'touchend', handleTouchEnd, { passive: true });
+
+            // Double-tap on video for fullscreen
+            DOMUtils.addEvent(videoSection, 'touchend', handleVideoDoubleTap);
+        }
+
+        // Pull-to-refresh on the whole document (only on mobile)
+        DOMUtils.addEvent(document, 'touchstart', handlePullToRefreshTouchStart, { passive: true });
+        DOMUtils.addEvent(document, 'touchmove', handlePullToRefreshTouchMove, { passive: false });
+        DOMUtils.addEvent(document, 'touchend', handlePullToRefreshTouchEnd, { passive: true });
+
+        // Mobile navigation buttons
+        const mobileNav = document.getElementById('mobileNav');
+        if (mobileNav) {
+            mobileNav.addEventListener('click', function(event) {
+                const button = event.target.closest('.mobile-nav-btn');
+                if (button && button.dataset.action) {
+                    event.preventDefault();
+                    handleMobileNavAction(button.dataset.action);
+                }
+            });
+        }
+
+        // Initialize dashboard functionality
+        initializeDashboard();
+
+        AppLogger.log('UI controls event listeners initialized');
+    }
+
    // Public API
    window.UIControls = {
        showToast: showToast,
        hideToast: hideToast,
        toggleChat: toggleChat,
+        toggleDashboard: toggleDashboard,
        toggleFullscreen: toggleFullscreen,
        togglePictureInPicture: togglePictureInPicture,
        updateViewerCount: updateViewerCount,
        updateConnectionStatus: updateConnectionStatus,
        updateNotificationBadge: updateNotificationBadge,
+        updateDashboardStats: updateDashboardStats,
+        updateActiveUsers: updateActiveUsers,
+        addDashboardActivity: addDashboardActivity,
        playNotificationSound: playNotificationSound,
        handleMobileNavAction: handleMobileNavAction,
        DOMUtils: DOMUtils
--- a/index.php
+++ b/index.php
@ -315,6 +315,94 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
 </head>
 <body>
    <main class="theater" role="main">
+        <!-- Dashboard Sidebar for Desktop -->
+        <aside class="theater__dashboard-section" id="dashboardSection" aria-label="Dashboard">
+            <header class="dashboard__header">
+                <h2 class="dashboard__title">Dashboard</h2>
+                <div class="dashboard__controls">
+                    <button class="dashboard__toggle-btn" data-action="toggle-dashboard" aria-expanded="true" aria-label="Toggle dashboard">
+                        <span class="icon-dashboard-toggle icon-sm">«</span>
+                    </button>
+                </div>
+            </header>
+
+            <div class="dashboard__stats-grid">
+                <div class="stats-card">
+                    <div class="stats-card__icon">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                            <circle cx="9" cy="7" r="4"></circle>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                        </svg>
+                    </div>
+                    <div class="stats-card__content">
+                        <div class="stats-card__value" id="statsViewersCount">0</div>
+                        <div class="stats-card__label">Active Viewers</div>
+                    </div>
+                </div>
+
+                <div class="stats-card">
+                    <div class="stats-card__icon">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+                            <line x1="8" y1="21" x2="16" y2="21"></line>
+                            <line x1="12" y1="17" x2="12" y2="21"></line>
+                        </svg>
+                    </div>
+                    <div class="stats-card__content">
+                        <div class="stats-card__value" id="statsStreamQuality">HD</div>
+                        <div class="stats-card__label">Stream Quality</div>
+                    </div>
+                </div>
+
+                <div class="stats-card">
+                    <div class="stats-card__icon">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <polyline points="12,6 12,12 16,14"></polyline>
+                        </svg>
+                    </div>
+                    <div class="stats-card__content">
+                        <div class="stats-card__value" id="statsUptime">00:00</div>
+                        <div class="stats-card__label">Stream Uptime</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="dashboard__widgets">
+                <div class="widget">
+                    <header class="widget__header">
+                        <h3 class="widget__title">Recent Activity</h3>
+                    </header>
+                    <div class="widget__content" id="recentActivity">
+                        <div class="activity-item">
+                            <div class="activity-item__avatar">🎥</div>
+                            <div class="activity-item__content">
+                                <div class="activity-item__text">Stream started</div>
+                                <div class="activity-item__time">Just now</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="widget">
+                    <header class="widget__header">
+                        <h3 class="widget__title">Active Users</h3>
+                    </header>
+                    <div class="widget__content" id="activeUsers">
+                        <div class="user-item">
+                            <div class="user-item__status online"></div>
+                            <div class="user-item__nickname">Welcome to chat!</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Dashboard resize handle -->
+        <div class="resize-handle dashboard-resize" data-target="dashboard"></div>
+
        <section class="theater__video-section" id="videoSection" aria-label="Video Player">
            <header class="video-player__header">
                <div class="video-player__header-left">
@ -325,6 +413,9 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
                    </div>
                </div>
                <div class="video-player__header-controls">
+                    <button class="video-player__toggle-dashboard-btn" data-action="toggle-dashboard" aria-expanded="false" aria-label="Toggle dashboard" title="Toggle Dashboard">
+                        <span class="icon-dashboard icon-sm"></span> Dashboard
+                    </button>
                    <button class="stream-stats__refresh-btn" data-action="manual-refresh" title="Manual Stream Refresh" aria-label="Refresh stream">
                        <span class="icon-refresh icon-sm"></span> Refresh
                    </button>
--- a/static/css/components.css
+++ b/static/css/components.css
@ -806,6 +806,246 @@
 .video-responsive-tablet .video-player__header { padding: var(--spacing-3) var(--spacing-4) !important; }
 .video-responsive-desktop .video-player__header { padding: var(--spacing-4) var(--spacing-6) !important; }

+/* =================================================================
+   DASHBOARD COMPONENTS
+   ================================================================= */
+
+/* Dashboard header */
+.dashboard__header {
+    background: linear-gradient(135deg, var(--dodgers-blue-600) 0%, var(--dodgers-blue-400) 100%);
+    padding: var(--spacing-4) var(--spacing-5);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: var(--elevation-2);
+    z-index: 5;
+    border-bottom: 1px solid var(--dodgers-blue-300);
+}
+
+.dashboard__title {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2);
+}
+
+.dashboard__title::before {
+    content: '';
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'%3E%3C/svg%3E") no-repeat center center;
+    background-size: contain;
+    margin-right: var(--spacing-2);
+}
+
+.dashboard__controls {
+    display: flex;
+    gap: var(--spacing-2);
+}
+
+.dashboard__toggle-btn {
+    background: rgba(255,255,255,0.2);
+    border: 1px solid rgba(255,255,255,0.3);
+    color: white;
+    padding: var(--spacing-2) var(--spacing-3);
+    border-radius: var(--border-radius-lg);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+    transition: all var(--transition-fast);
+    backdrop-filter: blur(10px);
+}
+
+.dashboard__toggle-btn:hover {
+    background: rgba(255,255,255,0.3);
+    transform: translateY(-1px);
+}
+
+/* Stats grid */
+.dashboard__stats-grid {
+    display: grid;
+    gap: var(--spacing-3);
+    padding: var(--spacing-4) var(--spacing-5) var(--spacing-3);
+    grid-template-columns: 1fr;
+}
+
+.stats-card {
+    background: var(--color-surface);
+    border-radius: var(--border-radius-lg);
+    padding: var(--spacing-4);
+    border: 1px solid var(--color-outline-variant);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-3);
+    transition: all var(--transition-fast);
+    box-shadow: var(--elevation-1);
+}
+
+.stats-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--elevation-3);
+}
+
+.stats-card__icon {
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(135deg, var(--dodgers-blue-500), var(--dodgers-blue-300));
+    border-radius: var(--border-radius-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    flex-shrink: 0;
+}
+
+.stats-card__content {
+    flex: 1;
+    min-width: 0;
+}
+
+.stats-card__value {
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-bold);
+    color: var(--text-primary);
+    margin-bottom: var(--spacing-1);
+}
+
+.stats-card__label {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    font-weight: var(--font-weight-medium);
+}
+
+/* Dashboard widgets */
+.dashboard__widgets {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacing-4) var(--spacing-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+}
+
+.widget {
+    background: var(--color-surface);
+    border-radius: var(--border-radius-lg);
+    border: 1px solid var(--color-outline-variant);
+    box-shadow: var(--elevation-1);
+    overflow: hidden;
+}
+
+.widget__header {
+    padding: var(--spacing-4);
+    border-bottom: 1px solid var(--color-outline-variant);
+    background: var(--color-surface-variant);
+}
+
+.widget__title {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.widget__content {
+    padding: var(--spacing-4);
+}
+
+/* Activity items */
+.activity-item,
+.user-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-3);
+    padding: var(--spacing-2) 0;
+    border-bottom: 1px solid var(--color-outline-variant);
+}
+
+.activity-item:last-child,
+.user-item:last-child {
+    border-bottom: none;
+}
+
+.activity-item__avatar {
+    width: 32px;
+    height: 32px;
+    background: var(--dodgers-blue-500);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font-size-sm);
+    flex-shrink: 0;
+}
+
+.activity-item__content {
+    flex: 1;
+    min-width: 0;
+}
+
+.activity-item__text {
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+    margin-bottom: var(--spacing-1);
+}
+
+.activity-item__time {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+}
+
+/* User items */
+.user-item__status {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.user-item__status.online {
+    background: var(--color-success);
+    box-shadow: 0 0 6px rgba(var(--color-success-rgb), 0.5);
+}
+
+.user-item__status.offline {
+    background: var(--color-outline);
+}
+
+.user-item__nickname {
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+    font-weight: var(--font-weight-medium);
+}
+
+/* Responsive dashboard */
+@media (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-2xl) - 1px)) {
+    .dashboard__stats-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (min-width: var(--breakpoint-2xl)) {
+    .dashboard__stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stats-card {
+        padding: var(--spacing-3);
+    }
+
+    .stats-card__icon {
+        width: 40px;
+        height: 40px;
+    }
+
+    .stats-card__value {
+        font-size: var(--font-size-xl);
+    }
+}
+
 /* =================================================================
   VIDEO HEADER - Top section of video area
   ================================================================= */
--- a/static/css/layout.css
+++ b/static/css/layout.css
@ -128,3 +128,151 @@
        width: 320px;
    }
 }
+
+/* =================================================================
+   DASHBOARD SECTION - Left sidebar for desktop enhancements
+   ================================================================= */
+
+.theater__dashboard-section {
+    width: 280px;
+    background: var(--color-surface);
+    color: var(--text-primary);
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--border-color);
+    box-shadow: var(--shadow-dodgers-lg);
+    transition: transform var(--transition-slow);
+    position: relative;
+}
+
+.theater__dashboard-section.collapsed {
+    transform: translateX(-100%);
+    position: absolute;
+    left: 0;
+    height: 100%;
+}
+
+/* Desktop dashboard visibility */
+@media (min-width: var(--breakpoint-2xl)) {
+    .theater__dashboard-section {
+        display: flex;
+    }
+}
+
+/* Hide dashboard on smaller screens */
+@media (max-width: calc(var(--breakpoint-2xl) - 1px)) {
+    .theater__dashboard-section {
+        display: none;
+    }
+}
+
+/* =================================================================
+   DASHBOARD TOGGLE CONTROLS
+   ================================================================= */
+
+.dashboard-toggle {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--color-surface);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+    width: 40px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: var(--elevation-3);
+    z-index: 5;
+}
+
+.dashboard-toggle.right {
+    right: -40px;
+    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+    border-left: none;
+}
+
+.dashboard-toggle.left {
+    left: -40px;
+    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+    border-right: none;
+}
+
+/* =================================================================
+   RESIZE HANDLES
+   ================================================================= */
+
+.resize-handle {
+    position: absolute;
+    width: 4px;
+    background: var(--color-outline);
+    cursor: col-resize;
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+    z-index: 10;
+}
+
+.resize-handle:hover,
+.resize-handle.active {
+    opacity: 1;
+    background: var(--color-primary);
+}
+
+/* Video/Dashboard resize handle */
+.theater__dashboard-section + .resize-handle {
+    right: -2px;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+}
+
+/* Video/Chat resize handle */
+.theater__video-section + .resize-handle {
+    right: -2px;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+}
+
+/* =================================================================
+   DASHBOARD LAYOUT MODES
+   ================================================================= */
+
+/* Dashboard enabled - 3-column layout */
+.theater.dashboard-enabled {
+    display: grid;
+    grid-template-columns: 280px 1fr 350px;
+    grid-template-areas: "dashboard video chat";
+}
+
+.theater.dashboard-enabled .theater__dashboard-section {
+    grid-area: dashboard;
+}
+
+.theater.dashboard-enabled .theater__video-section {
+    grid-area: video;
+}
+
+.theater.dashboard-enabled .theater__chat-section {
+    grid-area: chat;
+}
+
+/* Dashboard disabled - Standard 2-column layout */
+.theater:not(.dashboard-enabled) .theater__dashboard-section {
+    display: none;
+}
+
+/* Responsive dashboard behavior */
+@media (min-width: var(--breakpoint-2xl)) {
+    .theater.dashboard-enabled {
+        grid-template-columns: auto 1fr 350px;
+    }
+}
+
+@media (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-2xl) - 1px)) {
+    .theater.dashboard-enabled {
+        grid-template-columns: 250px 1fr 350px;
+    }
+}
--- a/static/css/variables.css
+++ b/static/css/variables.css
@ -297,6 +297,10 @@
    --mq-lg-only: (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-xl) - 1px));
    --mq-xl-only: (min-width: var(--breakpoint-xl)) and (max-width: calc(var(--breakpoint-2xl) - 1px));

+    /* Dashboard visibility breakpoints */
+    --mq-dashboard-mobile: (max-width: calc(var(--breakpoint-2xl) - 1px));
+    --mq-dashboard-enabled: (min-width: var(--breakpoint-2xl));
+
    /* =================================================================
       Z-INDEX SCALE
       ================================================================= */