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

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,