diff --git a/public/index.html b/public/index.html index c9d967c..4b706a9 100644 --- a/public/index.html +++ b/public/index.html @@ -664,6 +664,95 @@ font-weight: 600; } + .popover { + position: fixed; + top: 60px; + right: 200px; + background: #2a2a2a; + border: 1px solid #3a3a3a; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + z-index: 1500; + min-width: 300px; + max-width: 400px; + } + + .popover-content { + padding: 0; + } + + .popover-header { + padding: 12px 16px; + border-bottom: 1px solid #3a3a3a; + font-size: 14px; + font-weight: 600; + color: #e0e0e0; + } + + #session-filter-list { + max-height: 400px; + overflow-y: auto; + } + + .session-filter-item { + padding: 12px 16px; + border-bottom: 1px solid #3a3a3a; + cursor: pointer; + transition: background 0.2s; + } + + .session-filter-item:last-child { + border-bottom: none; + } + + .session-filter-item:hover { + background: rgba(255, 255, 255, 0.05); + } + + .session-filter-item.selected { + background: rgba(255, 152, 0, 0.1); + border-left: 3px solid #ff9800; + padding-left: 13px; + } + + .session-filter-command { + font-weight: 600; + font-size: 13px; + margin-bottom: 4px; + display: flex; + align-items: center; + gap: 8px; + } + + .session-filter-cwd { + font-size: 11px; + color: #888; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .clear-filter-btn { + width: 100%; + padding: 12px 16px; + border: none; + border-top: 1px solid #3a3a3a; + background: #1a1a1a; + color: #e0e0e0; + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: background 0.2s; + } + + .clear-filter-btn:hover { + background: rgba(255, 255, 255, 0.05); + } + + .clear-filter-btn:active { + opacity: 0.7; + } + @media (prefers-color-scheme: light) { body { background: #f5f5f5; @@ -742,6 +831,9 @@

claude-remote

+
@@ -750,6 +842,14 @@
+ +
Active Sessions
@@ -1145,12 +1245,29 @@ } function renderSessions() { + // Update sessions count button text + updateSessionsCountButton(); + if (state.sessions.size === 0) { $sessions.innerHTML = '
No active sessions
'; return; } - $sessions.innerHTML = Array.from(state.sessions.values()).map(s => ` + // Filter sessions if focusSessionId is set + let sessionsToRender = Array.from(state.sessions.values()); + if (state.settings.focusSessionId !== null) { + const focusSession = state.sessions.get(state.settings.focusSessionId); + if (focusSession) { + sessionsToRender = [focusSession]; + } else { + // Filtered session no longer exists, clear filter + state.settings.focusSessionId = null; + saveSettings(); + updateSessionsCountButton(); + } + } + + $sessions.innerHTML = sessionsToRender.map(s => `
@@ -1723,6 +1840,81 @@ updateSettingsUI(); }; + // Session filtering + function updateSessionsCountButton() { + const $countText = document.getElementById('sessions-count-text'); + const total = state.sessions.size; + + if (state.settings.focusSessionId !== null) { + $countText.innerHTML = `Viewing 1 of ${total} ×`; + } else { + const label = total === 1 ? 'session' : 'sessions'; + $countText.textContent = `${total} ${label}`; + } + } + + window.openSessionFilter = () => { + renderSessionFilterList(); + const $popover = document.getElementById('session-filter-popover'); + $popover.style.display = 'block'; + + // Close on outside click + setTimeout(() => { + document.addEventListener('click', closeSessionFilterOnOutsideClick); + }, 0); + }; + + window.closeSessionFilter = () => { + const $popover = document.getElementById('session-filter-popover'); + $popover.style.display = 'none'; + document.removeEventListener('click', closeSessionFilterOnOutsideClick); + }; + + function closeSessionFilterOnOutsideClick(event) { + const $popover = document.getElementById('session-filter-popover'); + const $filterBtn = document.getElementById('sessions-filter-btn'); + + if (!$popover.contains(event.target) && !$filterBtn.contains(event.target)) { + closeSessionFilter(); + } + } + + window.setSessionFilter = (sessionId) => { + state.settings.focusSessionId = Number(sessionId); + saveSettings(); + closeSessionFilter(); + renderSessions(); + }; + + window.clearSessionFilter = () => { + state.settings.focusSessionId = null; + saveSettings(); + closeSessionFilter(); + renderSessions(); + }; + + function renderSessionFilterList() { + const $list = document.getElementById('session-filter-list'); + + if (state.sessions.size === 0) { + $list.innerHTML = '
No active sessions
'; + return; + } + + $list.innerHTML = Array.from(state.sessions.values()).map(s => { + const isSelected = state.settings.focusSessionId === s.id; + return ` +
+
+ ${escapeHtml(s.command || 'claude')} + ${renderStateBadge(s.state || 'ready')} +
+
${escapeHtml(s.cwd || '~')}
+
+ `; + }).join(''); + } + // Initialize loadSettings(); applySettings();