From a2126f413850f5f63973eb6dfb994843f8760693 Mon Sep 17 00:00:00 2001 From: shiyue Date: Thu, 18 Jun 2026 09:18:53 +0800 Subject: [PATCH] feat: add sidebar project collapse and search --- public/app.js | 139 +++++++++++++++++++++++++++++++++++++--- public/index.html | 4 ++ public/style.css | 160 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 295 insertions(+), 8 deletions(-) diff --git a/public/app.js b/public/app.js index 8bff990..7630aaa 100644 --- a/public/app.js +++ b/public/app.js @@ -7,6 +7,7 @@ const RENDER_DEBOUNCE = 100; const COMPOSER_SUGGESTION_DEBOUNCE = 120; const DIVIDER_TIME_STORAGE_KEY = 'cc-web-show-divider-time'; + const PROJECT_COLLAPSE_STORAGE_KEY = 'cc-web-collapsed-projects'; const SLASH_COMMANDS = [ { cmd: '/clear', desc: '清除当前会话' }, @@ -166,6 +167,15 @@ let noteMode = false; let noteDraftSeq = 0; let isReloadingMcp = false; + let sessionSearchQuery = ''; + const collapsedProjectKeys = (() => { + try { + const parsed = JSON.parse(localStorage.getItem(PROJECT_COLLAPSE_STORAGE_KEY) || '[]'); + return new Set(Array.isArray(parsed) ? parsed.filter(Boolean) : []); + } catch { + return new Set(); + } + })(); const pendingNotesByTarget = new Map(); const userMessageIndex = new Map(); const expandedOldSessionAgents = new Set(); @@ -190,6 +200,8 @@ const newChatArrow = $('#new-chat-arrow'); const newChatDropdown = $('#new-chat-dropdown'); const importSessionBtn = $('#import-session-btn'); + const sessionSearchInput = $('#session-search-input'); + const sessionSearchClear = $('#session-search-clear'); const sessionList = $('#session-list'); const chatTitle = $('#chat-title'); const chatSessionIdBtn = $('#chat-session-id-btn'); @@ -2272,6 +2284,61 @@ return sessions.filter((s) => normalizeAgent(s.agent) === currentAgent); } + function normalizeSessionSearchQuery(query) { + return String(query || '').trim().toLowerCase(); + } + + function syncSessionSearchUi() { + if (!sessionSearchInput) return; + if (sessionSearchInput.value !== sessionSearchQuery) { + sessionSearchInput.value = sessionSearchQuery; + } + const hasQuery = !!normalizeSessionSearchQuery(sessionSearchQuery); + sessionSearchInput.classList.toggle('has-value', hasQuery); + if (sessionSearchClear) { + sessionSearchClear.hidden = !hasQuery; + sessionSearchClear.disabled = !hasQuery; + } + } + + function getSessionSearchText(session) { + const cwd = getSessionEffectiveCwd(session); + return [ + session?.title, + getSessionProjectName(session), + cwd, + session?.id, + shortSessionId(session?.id), + ].filter(Boolean).join('\n').toLowerCase(); + } + + function sessionMatchesSearch(session, normalizedQuery) { + if (!normalizedQuery) return true; + return getSessionSearchText(session).includes(normalizedQuery); + } + + function getProjectCollapseKey(group) { + const rawKey = group?.cwd || group?.name || ''; + return `${normalizeAgent(currentAgent)}:${rawKey}`; + } + + function persistCollapsedProjectKeys() { + try { + localStorage.setItem(PROJECT_COLLAPSE_STORAGE_KEY, JSON.stringify([...collapsedProjectKeys])); + } catch {} + } + + function setProjectCollapsed(groupKey, collapsed) { + if (!groupKey) return; + if (collapsed) { + collapsedProjectKeys.add(groupKey); + } else { + collapsedProjectKeys.delete(groupKey); + } + persistCollapsedProjectKeys(); + renderSessionList(); + } + function getSessionCwdFromCache(sessionId) { if (!sessionId) return ''; const cachedCwd = sessionCache.get(sessionId)?.snapshot?.cwd; @@ -5361,17 +5428,32 @@ function renderSessionList() { sessionList.innerHTML = ''; - const visibleSessions = getVisibleSessions(); - if (visibleSessions.length === 0) { + syncSessionSearchUi(); + const allVisibleSessions = getVisibleSessions(); + const normalizedSearchQuery = normalizeSessionSearchQuery(sessionSearchQuery); + const isSearchingSessions = !!normalizedSearchQuery; + const visibleSessions = isSearchingSessions + ? allVisibleSessions.filter((session) => sessionMatchesSearch(session, normalizedSearchQuery)) + : allVisibleSessions; + if (allVisibleSessions.length === 0) { const empty = document.createElement('div'); empty.className = 'session-list-empty'; empty.textContent = `暂无 ${AGENT_LABELS[currentAgent]} 会话，点击“新会话”开始。`; sessionList.appendChild(empty); return; } + if (visibleSessions.length === 0) { + const empty = document.createElement('div'); + empty.className = 'session-list-empty'; + empty.textContent = '没有匹配的会话或项目。'; + sessionList.appendChild(empty); + return; + } const { pinnedSessions, regularSessions } = splitPinnedSessions(visibleSessions); - const { visibleRegularSessions, hiddenOldSessions } = splitCollapsedOldSessions(regularSessions, pinnedSessions.length); + const { visibleRegularSessions, hiddenOldSessions } = isSearchingSessions + ? { visibleRegularSessions: regularSessions, hiddenOldSessions: [] } + : splitCollapsedOldSessions(regularSessions, pinnedSessions.length); if (pinnedSessions.length > 0) { const pinnedGroupEl = document.createElement('section'); pinnedGroupEl.className = 'session-project-group session-pinned-group'; @@ -5391,15 +5473,24 @@ } const { groups: projectGroups, ungroupedSessions } = groupSessionsByProject(visibleRegularSessions); - for (const group of projectGroups) { + projectGroups.forEach((group, groupIndex) => { + const groupKey = getProjectCollapseKey(group); + const isCollapsed = !isSearchingSessions && collapsedProjectKeys.has(groupKey); + const hasActiveSession = group.sessions.some((session) => session.id === currentSessionId); + const hasUnreadSession = group.sessions.some((session) => session.hasUnread); + const hasRunningSession = group.sessions.some((session) => session.isRunning); + const groupBodyId = `session-project-body-${groupIndex}`; const groupEl = document.createElement('section'); - groupEl.className = 'session-project-group'; + groupEl.className = `session-project-group${isCollapsed ? ' collapsed' : ''}${hasActiveSession ? ' has-active-session' : ''}${hasUnreadSession ? ' has-unread-session' : ''}${hasRunningSession ? ' has-running-session' : ''}`; const header = document.createElement('div'); header.className = 'session-project-header'; header.title = group.cwd || group.name; header.innerHTML = ` - ${escapeHtml(group.name)} + ${group.sessions.length} @@ -5407,9 +5498,18 @@ `; groupEl.appendChild(header); + const groupBody = document.createElement('div'); + groupBody.id = groupBodyId; + groupBody.className = 'session-project-sessions'; + groupBody.hidden = isCollapsed; for (const s of group.sessions) { - groupEl.appendChild(createSessionListItem(s)); + groupBody.appendChild(createSessionListItem(s)); } + groupEl.appendChild(groupBody); + + header.querySelector('.session-project-toggle').addEventListener('click', () => { + setProjectCollapsed(groupKey, !isCollapsed); + }); header.querySelector('.session-project-create').addEventListener('click', (e) => { e.stopPropagation(); @@ -5417,7 +5517,7 @@ }); sessionList.appendChild(groupEl); - } + }); for (const s of ungroupedSessions) { sessionList.appendChild(createSessionListItem(s)); @@ -6083,6 +6183,29 @@ }); } + if (sessionSearchInput) { + sessionSearchInput.addEventListener('input', () => { + sessionSearchQuery = sessionSearchInput.value; + renderSessionList(); + }); + sessionSearchInput.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && normalizeSessionSearchQuery(sessionSearchQuery)) { + e.stopPropagation(); + sessionSearchQuery = ''; + renderSessionList(); + sessionSearchInput.focus(); + } + }); + } + + if (sessionSearchClear) { + sessionSearchClear.addEventListener('click', () => { + sessionSearchQuery = ''; + renderSessionList(); + sessionSearchInput?.focus(); + }); + } + // Split new-chat button newChatBtn.addEventListener('click', () => showNewSessionModal()); newChatArrow.addEventListener('click', (e) => { diff --git a/public/index.html b/public/index.html index fc64209..d531116 100644 --- a/public/index.html +++ b/public/index.html @@ -47,6 +47,10 @@ +
+ + +
diff --git a/public/style.css b/public/style.css index a7f8998..cfb7a4b 100644 --- a/public/style.css +++ b/public/style.css @@ -178,6 +178,26 @@ html[data-theme='coolvibe'] .attachment-tray-note { border-color: rgba(191, 220, 228, 0.96); } +html[data-theme='coolvibe'] .session-search-input { + background: rgba(249, 253, 254, 0.86); + border-color: rgba(191, 220, 228, 0.96); +} + +html[data-theme='coolvibe'] .session-search::before { + color: #6d8d95; +} + +html[data-theme='coolvibe'] .session-search-input:focus { + border-color: rgba(8, 145, 178, 0.36); + box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1); +} + +html[data-theme='coolvibe'] .session-search-clear:hover, +html[data-theme='coolvibe'] .session-search-clear:focus-visible { + background: rgba(8, 145, 178, 0.12); + color: #0a6d83; +} + html[data-theme='coolvibe'] .session-project-header { background: linear-gradient(180deg, rgba(247, 251, 252, 0.94), rgba(239, 248, 250, 0.88)); color: #5f7f87; @@ -1021,6 +1041,68 @@ body.session-loading-active { justify-content: center; } .new-chat-btn:hover { background: var(--accent-hover); } +.session-search { + position: relative; + margin-top: 10px; +} +.session-search::before { + content: '⌕'; + position: absolute; + left: 10px; + top: 50%; + z-index: 1; + transform: translateY(-50%); + color: var(--text-muted); + font-size: 14px; + line-height: 1; + pointer-events: none; +} +.session-search-input { + width: 100%; + height: 34px; + padding: 0 34px 0 30px; + border: 1px solid var(--border-color); + border-radius: 8px; + background: rgba(255, 249, 242, 0.74); + color: var(--text-primary); + font: inherit; + font-size: 13px; + outline: none; + transition: background 0.16s, border-color 0.16s, box-shadow 0.16s; +} +.session-search-input::placeholder { + color: var(--text-muted); +} +.session-search-input:focus { + background: var(--bg-primary); + border-color: rgba(192, 85, 58, 0.34); + box-shadow: 0 0 0 3px rgba(192, 85, 58, 0.1); +} +.session-search-clear { + position: absolute; + right: 6px; + top: 50%; + z-index: 2; + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + padding: 0; + border: 0; + border-radius: 6px; + background: transparent; + color: var(--text-muted); + cursor: pointer; + font-size: 18px; + line-height: 1; +} +.session-search-clear:hover, +.session-search-clear:focus-visible { + background: var(--bg-tertiary); + color: var(--text-primary); + outline: none; +} .session-list { flex: 1; overflow-y: auto; @@ -1069,6 +1151,41 @@ body.session-loading-active { white-space: nowrap; flex: 1; } +.session-project-toggle { + min-width: 0; + flex: 1; + display: inline-flex; + align-items: center; + gap: 5px; + height: 24px; + padding: 0; + border: 0; + background: transparent; + color: inherit; + cursor: pointer; + font: inherit; + letter-spacing: inherit; + text-align: left; + text-transform: inherit; +} +.session-project-toggle:hover, +.session-project-toggle:focus-visible { + color: var(--text-secondary); + outline: none; +} +.session-project-toggle:focus-visible .session-project-name { + text-decoration: underline; + text-underline-offset: 3px; +} +.session-project-chevron { + width: 12px; + flex-shrink: 0; + color: var(--text-muted); + font-size: 10px; + line-height: 1; + text-align: center; + transform: translateY(-0.5px); +} .session-project-header-actions { display: inline-flex; align-items: center; @@ -1115,6 +1232,34 @@ body.session-loading-active { .session-pinned-header { color: var(--accent); } +.session-project-sessions[hidden] { + display: none; +} +.session-project-group.collapsed { + margin-bottom: 8px; +} +.session-project-group.collapsed .session-project-header { + margin-bottom: 0; +} +.session-project-group.has-active-session.collapsed .session-project-header { + color: var(--accent); +} +.session-project-group.has-active-session.collapsed .session-project-count { + background: var(--accent-light); + color: var(--accent); +} +.session-project-group.has-unread-session.collapsed .session-project-count::after, +.session-project-group.has-running-session.collapsed .session-project-count::after { + content: ''; + width: 6px; + height: 6px; + margin-left: 5px; + border-radius: 50%; + background: currentColor; +} +.session-project-group.has-running-session.collapsed .session-project-count::after { + animation: pulse 1.1s infinite; +} .session-item { display: flex; align-items: center; @@ -5007,6 +5152,8 @@ html[data-theme='coolvibe'] .settings-back:hover { } :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .agent-switch, +:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search-input, +:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search-clear, :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-list-empty, :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-project-header, :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-project-create, @@ -5077,6 +5224,15 @@ html[data-theme='coolvibe'] .settings-back:hover { color: var(--accent); } +:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search::before { + color: var(--text-muted); +} + +:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search-input:focus { + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(94, 205, 245, 0.12); +} + :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .file-browser-item.directory .file-browser-item-icon { background: var(--note-bg); border-color: var(--note-border); @@ -5085,6 +5241,10 @@ html[data-theme='coolvibe'] .settings-back:hover { :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-item:hover, :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-item-btn:hover, +:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search-clear:hover, +:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search-clear:focus-visible, +:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-project-toggle:hover, +:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-project-toggle:focus-visible, :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .chat-title:hover, :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .menu-btn:hover, :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .settings-btn:hover,