shiyue/cc-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add sidebar project collapse and search

Browse Source
This commit is contained in:
shiyue
2026-06-18 09:18:53 +08:00
parent c50ee527ea
commit a2126f4138
3 changed files with 295 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
public/app.js
View File

@@ -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 = `
<span class="session-project-name">${escapeHtml(group.name)}</span>
<button class="session-project-toggle" type="button" aria-expanded="${isCollapsed ? 'false' : 'true'}" aria-controls="${groupBodyId}" title="${isCollapsed ? '展开项目' : '折叠项目'}">
<span class="session-project-chevron" aria-hidden="true">${isCollapsed ? '▸' : '▾'}</span>
<span class="session-project-name">${escapeHtml(group.name)}</span>
</button>
<span class="session-project-header-actions">
<span class="session-project-count">${group.sessions.length}</span>
<button class="session-project-create" type="button" title="在此项目新建会话" aria-label="在此项目新建会话">+</button>
@@ -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) => {

4
public/index.html
View File

@@ -47,6 +47,10 @@
<div id="new-chat-dropdown" class="new-chat-dropdown" hidden>
<button id="import-session-btn">导入本地 CLI 会话</button>
</div>
<div class="session-search">
<input id="session-search-input" class="session-search-input" type="search" placeholder="检索会话 / 项目" autocomplete="off" aria-label="检索会话或项目">
<button id="session-search-clear" class="session-search-clear" type="button" title="清空检索" aria-label="清空检索" hidden>×</button>
</div>
</div>
<div id="session-list" class="session-list"></div>
<div class="sidebar-footer">

160
public/style.css
View File

@@ -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,