mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-08-21 14:46:19 +00:00
9a5b07c0b1
* feat(web-shell): improve sidebar session management * feat(web-shell): keep sessions accessible when sidebar is collapsed * test(web-shell): cover hover session details * test(web-shell): align workspace sidebar coverage * fix(web-shell): keep collapsed session actions open * fix(web-shell): layer collapsed session menus * fix(web-shell): address sidebar session details review findings (#9122) - sdk: route workspace session metadata PATCH through direct REST - collapsed switcher: cancel stale hover-close timers on reopen, keep the surface open while the group picker or keyboard focus is inside it, and emit the missing close signal when a tracked menu unmounts open - suppress the session menu's close focus restore when it started a rename - migrate the primary workspace expansion preference across the provisional-to-resolved cwd key change - honor a persisted workspace collapse over stale one-shot auto-expansion - drop the inert archived-row tab stop - align the constrained smoke test with the single-line details title * fix(web-shell): resolve standing sidebar session details blockers (#9122) - collapsed switcher: resolve pointer targets through composedPath and make the close timer's focus guard shadow-DOM aware so hover-open containment works in shadowDom portal mode - reset search state when the sidebar collapses so the autofocused search input no longer mounts inside the hover popover and steals keyboard focus - rename: propagate the daemon-resolved displayName (clamped to 256) instead of the locally typed string and cap both rename inputs at 256 characters - keep the session list scrollable clear of the fixed footer so rows stay hoverable, and close the details popover before each constrained re-hover in the smoke test - projects section: write the expansion preference outside the state updater, never lock hideProjectHeader consumers behind a stored collapse, and reset the one-shot show-all per session source and primary workspace - stop a double-click inside a mounted rename input from restarting the rename and discarding the typed text * fix: address round-6 review findings in serve metadata and sidebar (#9122) - serve: reject empty/whitespace displayName on the workspace metadata route so archived sessions never persist an empty custom_title record - serve: advertise workspace_session_metadata in the integration capability baseline to match the registry and unit baselines - sidebar: end the session scroll port above the fixed footer so rows can never park under it and block hover (drops stale clearances) - sidebar: reset search state whenever the collapsed surface closes so a stale autofocused input cannot steal composer focus on hover-open - sidebar: keep keyboard-opened collapsed switcher in keyboard semantics; a pointer graze no longer suppresses focus restoration - sidebar: busy-guard the archived rename menu item, align the group-create icon with its siblings, and reset per-section show-all on session-source change to match the flat list Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> * fix: address round-7 review findings in serve metadata and sidebar (#9122) * fix: address round-8 review findings in sidebar rename and switcher (#9122) * fix: address round-9 review findings in sidebar rename and menus (#9122) * fix: address round-10 review findings in sidebar actions and rename (#9122) * fix(web-shell): remove unsafe rename unmount cleanup * fix(web-shell): stabilize sidebar session mutations * fix(web-shell): polish sidebar session interactions * feat(web-shell): complete collapsed sidebar navigation --------- Co-authored-by: 钉萁 <dingqi.jww@alibaba-inc.com> Co-authored-by: Shaojin Wen <shaojin.wensj@alibaba-inc.com> Co-authored-by: qwen-code-dev-bot <qwen-code-dev@service.alibaba.com> Co-authored-by: qwen-code-dev-bot <qwen-code-dev-bot@users.noreply.github.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
1808 lines
32 KiB
CSS
1808 lines
32 KiB
CSS
.sidebar {
|
|
position: relative;
|
|
width: var(--web-shell-sidebar-width, 260px);
|
|
min-width: var(--web-shell-sidebar-width, 260px);
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 12px;
|
|
overflow: hidden;
|
|
background: var(--sidebar-background);
|
|
border-right: 1px solid var(--sidebar-border);
|
|
color: var(--sidebar-foreground);
|
|
font-family: var(--font-sans);
|
|
transition:
|
|
width 180ms ease,
|
|
min-width 180ms ease;
|
|
}
|
|
|
|
.resizing {
|
|
transition: none;
|
|
}
|
|
|
|
.collapsed {
|
|
width: 56px;
|
|
min-width: 56px;
|
|
align-items: center;
|
|
}
|
|
|
|
.newChatButton,
|
|
.pluginButton,
|
|
.footerButton,
|
|
.collapseButton,
|
|
.projectRow,
|
|
.sessionRow,
|
|
.sessionGroupHeader,
|
|
.sessionGroupActionButton,
|
|
.retry,
|
|
.iconButton,
|
|
.projectIconButton,
|
|
.sessionActionButton,
|
|
.groupMenuItem,
|
|
.secondaryButton,
|
|
.dangerButton {
|
|
appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.newChatButton,
|
|
.pluginButton,
|
|
.footerButton,
|
|
.projectRow {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 0 4px;
|
|
border-radius: 8px;
|
|
color: var(--sidebar-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.newChatButton,
|
|
.pluginButton {
|
|
height: 32px;
|
|
}
|
|
|
|
.newChatButton {
|
|
background: transparent;
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.pluginButton {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.primaryNav {
|
|
display: flex;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.newTaskNav {
|
|
display: flex;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
padding: 12px 0 2px;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.newTaskNavScrolled {
|
|
border-bottom-color: color-mix(
|
|
in srgb,
|
|
var(--sidebar-border) 55%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.newChatButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.48;
|
|
}
|
|
|
|
.newChatButton:hover,
|
|
.pluginButton:hover,
|
|
.footerButton:hover,
|
|
.projectRow:hover,
|
|
.sessionRow:hover,
|
|
.sessionRow:focus-visible,
|
|
.sessionGroupHeader:hover,
|
|
.sessionGroupHeader:focus-visible,
|
|
.sessionGroupActionButton:hover,
|
|
.sessionGroupActionButton:focus-visible,
|
|
.collapseButton:hover,
|
|
.collapseButton:focus-visible,
|
|
.iconButton:hover,
|
|
.iconButton:focus-visible,
|
|
.projectIconButton:hover,
|
|
.projectIconButton:focus-visible {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.newChatButton:focus-visible,
|
|
.pluginButton:focus-visible,
|
|
.footerButton:focus-visible,
|
|
.projectRow:focus-visible,
|
|
.sessionRow:focus-visible,
|
|
.sessionGroupHeader:focus-visible,
|
|
.sessionGroupActionButton:focus-visible,
|
|
.collapseButton:focus-visible,
|
|
.iconButton:focus-visible,
|
|
.projectIconButton:focus-visible,
|
|
.retry:focus-visible {
|
|
outline: 2px solid var(--sidebar-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.navIcon {
|
|
position: relative;
|
|
width: 24px;
|
|
height: 24px;
|
|
flex: 0 0 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: currentColor;
|
|
}
|
|
|
|
.navIcon svg,
|
|
.iconButton svg,
|
|
.collapseButton svg {
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.iconButton svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke-width: 1.8;
|
|
}
|
|
|
|
.topRow {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 4px 12px;
|
|
border-bottom: 1px solid var(--sidebar-border);
|
|
}
|
|
|
|
.topRow .newChatButton {
|
|
flex: 1 1 auto;
|
|
width: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.brandLogo {
|
|
flex: 0 0 28px;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.brandLogo svg {
|
|
width: 26px;
|
|
height: 26px;
|
|
display: block;
|
|
}
|
|
|
|
.brandName {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--sidebar-foreground);
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.collapsed .topRow {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.collapsed .topRow .newChatButton {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.workspacePicker {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.workspacePickerLabel {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.workspacePickerHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.workspaceAddIconButton {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.workspaceAddIconButton:hover {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-foreground);
|
|
}
|
|
|
|
.workspaceList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.workspaceSessionBody {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.liveWorkspaceLabel {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.projectsHeader {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
height: 32px;
|
|
gap: 4px;
|
|
padding-left: 8px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.pinnedSessionList {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.projectsHeaderToggle,
|
|
.projectsHeaderAction {
|
|
appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.projectsHeaderActions {
|
|
display: flex;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.projectsHeaderActions .projectsHeaderAction {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.projectsHeaderToggle {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.projectsHeaderToggle svg,
|
|
.projectsHeaderAction svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.projectsHeaderAction {
|
|
display: inline-flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.projectsHeaderAction:hover,
|
|
.projectsHeaderAction:focus-visible {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.projectSearch {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.projectSearch > svg {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 50%;
|
|
left: 10px;
|
|
width: 15px;
|
|
height: 15px;
|
|
color: var(--muted-foreground);
|
|
pointer-events: none;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.projectSearch input {
|
|
width: 100%;
|
|
padding-left: 32px;
|
|
}
|
|
|
|
.addWorkspaceButton {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
width: 100%;
|
|
padding: 6px 8px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
}
|
|
|
|
.addWorkspaceButton:hover {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-foreground);
|
|
}
|
|
|
|
.body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-right: -12px;
|
|
padding-right: 12px;
|
|
/* End the scroll port above the footer overlay so rows can never sit
|
|
under it (padding inside the scroll port would not: the port itself
|
|
still reaches the footer and rows parked at its bottom edge stay
|
|
unhoverable). */
|
|
margin-bottom: 40px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
scrollbar-gutter: stable;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.sectionTitle {
|
|
padding: 8px 8px 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.projectRow {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.projectRowExpanded {
|
|
}
|
|
|
|
.projectIconButton {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.projectIconButton svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.workspaceHeaderActions {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 2px;
|
|
margin-left: auto;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.workspaceHeaderAction {
|
|
appearance: none;
|
|
width: 24px;
|
|
height: 24px;
|
|
flex: 0 0 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.workspaceHeaderAction:hover,
|
|
.workspaceHeaderAction:focus-visible {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.workspaceHeaderAction:focus-visible {
|
|
outline: 2px solid var(--sidebar-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.workspaceHeaderAction svg {
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.projectName,
|
|
.sessionText {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.projectName {
|
|
flex: 0 1 auto;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.projectIconButton:last-child {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.projectHoverAction {
|
|
opacity: 0;
|
|
}
|
|
|
|
.projectRow:hover .projectHoverAction,
|
|
.projectRow:focus-within .projectHoverAction {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sessionList {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.sessionGroupSection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.sessionGroupHeaderRow {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.sessionGroupHeaderRow:hover,
|
|
.sessionGroupHeaderRow:focus-within {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.sessionGroupHeaderRow .sessionGroupHeader:hover,
|
|
.sessionGroupHeaderRow .sessionGroupHeader:focus-visible {
|
|
background: transparent;
|
|
}
|
|
|
|
.sessionGroupHeader {
|
|
min-width: 0;
|
|
height: 32px;
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 8px 0 20px;
|
|
border-radius: 8px;
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionGroupDot {
|
|
width: 8px;
|
|
height: 8px;
|
|
flex: 0 0 8px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.sessionGroupDotMuted {
|
|
background: var(--muted-foreground);
|
|
}
|
|
|
|
.sessionGroupTitle {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionGroupCount {
|
|
flex: 0 0 auto;
|
|
color: color-mix(in srgb, var(--muted-foreground) 86%, transparent);
|
|
}
|
|
|
|
.sessionGroupChevron {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sessionGroupChevron svg,
|
|
.sessionGroupActionButton svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.sessionGroupHeaderActions {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
opacity: 0;
|
|
transition: opacity 120ms ease;
|
|
}
|
|
|
|
.sessionGroupHeaderRow:hover .sessionGroupHeaderActions,
|
|
.sessionGroupHeaderRow:focus-within .sessionGroupHeaderActions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sessionGroupActionButton {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 7px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionGroupActionButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.38;
|
|
}
|
|
|
|
.sessionGroupList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.showAllSessions {
|
|
align-self: flex-start;
|
|
margin-left: 26px;
|
|
padding: 2px 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.showAllSessions:hover {
|
|
color: var(--sidebar-foreground);
|
|
}
|
|
|
|
.showAllSessions:focus-visible {
|
|
color: var(--sidebar-foreground);
|
|
outline: 2px solid var(--sidebar-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.sessionRow {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 2px 0 2px 26px;
|
|
border-radius: 8px;
|
|
color: color-mix(in srgb, var(--sidebar-foreground) 68%, transparent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.collapsedSessionPopover {
|
|
overscroll-behavior: contain;
|
|
width: min(
|
|
var(--collapsed-session-popover-width, 260px),
|
|
var(--radix-popover-content-available-width, 420px)
|
|
);
|
|
max-width: var(--radix-popover-content-available-width, 420px);
|
|
max-height: min(70vh, var(--radix-popover-content-available-height, 70vh));
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 8px;
|
|
overflow-y: auto;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.currentSession {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.busySession {
|
|
opacity: 0.72;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sessionDetailsTooltip {
|
|
width: min(360px, var(--radix-popover-content-available-width, 360px));
|
|
min-width: min(280px, var(--radix-popover-content-available-width, 280px));
|
|
max-width: var(--radix-popover-content-available-width, 360px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--border);
|
|
box-shadow: none;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.sessionDetailsHeader,
|
|
.sessionDetailsRow {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sessionDetailsHeader {
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.sessionDetailsTitle {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--popover-foreground);
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionDetailsTime {
|
|
flex: 0 0 auto;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.sessionDetailsRow {
|
|
color: var(--popover-foreground);
|
|
}
|
|
|
|
.sessionDetailsRow svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
color: var(--muted-foreground);
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.sessionDetailsRow span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionDetailsIdRow {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.sessionDetailsIdRow > span:first-child {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--muted-foreground);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionDetailsCopyButton {
|
|
width: 22px;
|
|
height: 22px;
|
|
flex: 0 0 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionDetailsCopyButton:hover,
|
|
.sessionDetailsCopyButton:focus-visible {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
outline: none;
|
|
}
|
|
|
|
.sessionDetailsCopyButton svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.sessionDetailsCopied {
|
|
flex: 0 0 auto;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.sessionText {
|
|
position: relative;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
margin-right: 4px;
|
|
overflow: hidden;
|
|
color: currentColor;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
/* The fade hints at a clipped tail; only overflowing titles clip, and the
|
|
hover measurement marks them via the overflow attribute. */
|
|
.sessionText[data-web-shell-title-overflow] {
|
|
mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent);
|
|
-webkit-mask-image: linear-gradient(
|
|
to right,
|
|
#000 calc(100% - 10px),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.sessionTextInner {
|
|
display: inline-block;
|
|
min-width: max-content;
|
|
}
|
|
|
|
.sessionRow:hover .sessionTextInner {
|
|
animation: sessionTitleScroll var(--session-title-scroll-duration, 0s) 1s
|
|
linear forwards;
|
|
}
|
|
|
|
.sessionRow:focus-within .sessionTextInner {
|
|
animation: sessionTitleScroll var(--session-title-scroll-duration, 0s) 0.3s
|
|
linear forwards;
|
|
}
|
|
|
|
.sessionStatusSlot {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 7px;
|
|
width: 18px;
|
|
height: 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.sessionStatusDot {
|
|
color: var(--agent-blue-500);
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
|
|
animation: sidebarPulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
.collapsedSessionStatusDot {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 1px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
color: var(--agent-blue-500);
|
|
animation: sidebarPulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
.collapsedSessionStatusApproval {
|
|
color: color-mix(in srgb, var(--success-color) 95%, var(--foreground));
|
|
}
|
|
|
|
.collapsedSessionStatusQuestion {
|
|
color: color-mix(in srgb, var(--agent-blue-500) 95%, var(--foreground));
|
|
}
|
|
|
|
.sessionTitlePin {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: 0 0 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionTitlePin:hover {
|
|
background: var(--accent);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.sessionTitlePin:disabled {
|
|
cursor: default;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.sessionTitlePin svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.sessionMetaSlot {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
height: 30px;
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.sessionAttention {
|
|
height: 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0 9px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--success-color) 10%, transparent);
|
|
color: color-mix(in srgb, var(--success-color) 95%, var(--foreground));
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionAttentionUserInput {
|
|
background: color-mix(in srgb, var(--agent-blue-500) 10%, transparent);
|
|
color: color-mix(in srgb, var(--agent-blue-500) 95%, var(--foreground));
|
|
}
|
|
|
|
.sessionAttention + .sessionLoading {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.sessionRow:hover .sessionMetaSlot,
|
|
.sessionRow:focus-within .sessionMetaSlot,
|
|
.sessionMetaSlot:has(.sessionActionButton:focus-visible),
|
|
.sessionMetaSlot:has([data-state='open']) {
|
|
min-width: var(--session-actions-width, 78px);
|
|
}
|
|
|
|
.sessionGitIcon {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-accent-fg, #8b5cf6);
|
|
}
|
|
|
|
.sessionGitIcon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.sessionLoading {
|
|
margin-right: 10px;
|
|
width: 12px;
|
|
height: 12px;
|
|
display: inline-flex;
|
|
border: 1.5px solid
|
|
color-mix(in srgb, var(--muted-foreground) 28%, transparent);
|
|
border-top-color: var(--muted-foreground);
|
|
border-radius: 999px;
|
|
animation: sidebarSpin 0.8s linear infinite;
|
|
}
|
|
|
|
.sessionRow:hover:not(.runningSession) .sessionGitIcon,
|
|
.sessionRow:focus-within:not(.runningSession) .sessionGitIcon,
|
|
.sessionRow:hover:not(.runningSession) .sessionAttention,
|
|
.sessionRow:focus-within:not(.runningSession) .sessionAttention,
|
|
.sessionMetaSlot:hover .sessionGitIcon,
|
|
.sessionMetaSlot:hover .sessionLoading,
|
|
.sessionMetaSlot:hover .sessionAttention,
|
|
.sessionMetaSlot:has(.sessionActionButton:focus-visible) .sessionGitIcon,
|
|
.sessionMetaSlot:has([data-state='open']) .sessionGitIcon,
|
|
.sessionMetaSlot:has(.sessionActionButton:focus-visible) .sessionLoading,
|
|
.sessionMetaSlot:has([data-state='open']) .sessionLoading,
|
|
.sessionMetaSlot:has(.sessionActionButton:focus-visible) .sessionAttention,
|
|
.sessionMetaSlot:has([data-state='open']) .sessionAttention {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sessionActions {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.sessionRow:hover:not(.runningSession) .sessionActions,
|
|
.sessionRow:focus-within:not(.runningSession) .sessionActions,
|
|
.sessionMetaSlot:hover .sessionActions,
|
|
.sessionActions:has(.sessionActionButton:focus-visible),
|
|
.sessionActions:has([data-state='open']) {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes sidebarSpin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes sessionTitleScroll {
|
|
to {
|
|
transform: translateX(calc(var(--session-title-scroll-distance, 0px) * -1));
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.sessionRow:hover .sessionTextInner,
|
|
.sessionRow:focus-within .sessionTextInner {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
@keyframes sidebarPulse {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent);
|
|
opacity: 0.72;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent);
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.iconButton,
|
|
.sessionActionButton,
|
|
.collapseButton {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionActionButton {
|
|
width: 26px;
|
|
height: 26px;
|
|
flex: 0 0 26px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.sessionActionButton:hover,
|
|
.sessionActionButton:focus-visible {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
.activeSessionActionButton {
|
|
color: var(--agent-blue-500);
|
|
}
|
|
|
|
.sessionActionButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.sessionActionButton svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.searchInput {
|
|
width: calc(100% - 16px);
|
|
height: 44px;
|
|
margin: -2px 8px 2px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.searchInput:focus-visible,
|
|
.renameInput:focus-visible {
|
|
border-color: var(--sidebar-ring);
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-ring) 18%, transparent);
|
|
}
|
|
|
|
.dialogSelect {
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.dialogInput:focus-visible,
|
|
.dialogSelect:focus-visible {
|
|
border-color: var(--sidebar-ring);
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-ring) 18%, transparent);
|
|
}
|
|
|
|
.groupMenu {
|
|
position: fixed;
|
|
z-index: 1100;
|
|
width: 240px;
|
|
max-height: min(320px, calc(100vh - 16px));
|
|
padding: 6px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 8px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
overflow-y: auto;
|
|
box-shadow:
|
|
0 10px 24px rgb(0 0 0 / 22%),
|
|
0 2px 6px rgb(0 0 0 / 16%);
|
|
}
|
|
|
|
.groupMenuItem {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 10px;
|
|
border-radius: 6px;
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans, system-ui, sans-serif);
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.groupMenuItem:hover,
|
|
.groupMenuItem:focus-visible,
|
|
.groupMenuItemActive {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
outline: 0;
|
|
}
|
|
|
|
.groupMenuName {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.groupMenuDot,
|
|
.groupMenuEmptyDot,
|
|
.groupMenuIcon {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.groupMenuDot {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.groupMenuEmptyDot {
|
|
border: 1px solid var(--muted-foreground);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.groupMenuIcon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.groupMenuCheck {
|
|
flex: 0 0 auto;
|
|
color: var(--agent-blue-500);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.groupMenuSeparator {
|
|
height: 1px;
|
|
margin: 6px 4px;
|
|
background: var(--sidebar-border);
|
|
}
|
|
|
|
.groupColorRed {
|
|
background: var(--accent-red);
|
|
}
|
|
|
|
.groupColorOrange {
|
|
background: var(--accent-orange);
|
|
}
|
|
|
|
.groupColorYellow {
|
|
background: var(--accent-yellow);
|
|
}
|
|
|
|
.groupColorGreen {
|
|
background: var(--accent-green);
|
|
}
|
|
|
|
.groupColorBlue {
|
|
background: var(--agent-blue-500);
|
|
}
|
|
|
|
.groupColorPurple {
|
|
background: var(--agent-purple-600);
|
|
}
|
|
|
|
.groupColorCustom {
|
|
box-shadow: inset 0 0 0 1px
|
|
color-mix(in srgb, var(--foreground) 28%, transparent);
|
|
}
|
|
|
|
.iconButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.38;
|
|
}
|
|
|
|
.renameForm {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.renameInput {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font: inherit;
|
|
}
|
|
|
|
.notice,
|
|
.retry {
|
|
padding: 8px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
text-align: left;
|
|
}
|
|
|
|
.notice {
|
|
padding: 4px 8px 4px 26px;
|
|
}
|
|
|
|
.retry {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.confirmContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.confirmDescription {
|
|
margin: 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.workspaceRemovalActivityList {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.confirmActions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.groupForm {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
font-family: var(--font-sans, system-ui, sans-serif);
|
|
}
|
|
|
|
.fieldStack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.dialogSelect {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.dialogInput {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.groupCustomColorRow {
|
|
display: grid;
|
|
grid-template-columns: 44px minmax(0, 1fr);
|
|
gap: 8px 10px;
|
|
align-items: end;
|
|
}
|
|
|
|
.groupColorPicker {
|
|
width: 44px;
|
|
height: 44px;
|
|
padding: 3px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 8px;
|
|
background: var(--background);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.groupHexField {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.groupColorError {
|
|
grid-column: 2;
|
|
color: var(--destructive, #dc2626);
|
|
font-size: 11px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.secondaryButton,
|
|
.dangerButton {
|
|
height: 28px;
|
|
padding: 0 12px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.secondaryButton {
|
|
border: 1px solid var(--border);
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.secondaryButton:disabled,
|
|
.dangerButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.dangerButton {
|
|
border: 1px solid var(--error-color);
|
|
background: transparent;
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.dangerButton:hover:not(:disabled),
|
|
.dangerButton:focus-visible:not(:disabled) {
|
|
background: var(--error-bg);
|
|
}
|
|
|
|
.footer {
|
|
position: absolute;
|
|
z-index: 5;
|
|
right: 12px;
|
|
bottom: 4px;
|
|
left: 12px;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding-top: 4px;
|
|
border-top: 1px solid var(--sidebar-border);
|
|
background: var(--sidebar-background);
|
|
}
|
|
|
|
.footerButton {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.footerPrimary,
|
|
.footerActions {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.footerPrimary {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.footerActions {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.footerButtonLabel {
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.footerCompact,
|
|
.footerTight {
|
|
gap: 4px;
|
|
}
|
|
|
|
.footerCompact .footerPrimary,
|
|
.footerCompact .footerActions,
|
|
.footerTight .footerPrimary,
|
|
.footerTight .footerActions {
|
|
gap: 4px;
|
|
}
|
|
|
|
.footerCompact .footerButton,
|
|
.footerTight .footerButton {
|
|
width: 26px;
|
|
height: 28px;
|
|
flex: 0 0 26px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.footerCompact .footerButtonLabel,
|
|
.footerTight .footerButtonLabel {
|
|
display: none;
|
|
}
|
|
|
|
.footerCompact .collapseButton,
|
|
.footerTight .collapseButton {
|
|
width: 26px;
|
|
height: 28px;
|
|
}
|
|
|
|
.collapseButton {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.version {
|
|
flex: 0 0 auto;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
user-select: text;
|
|
}
|
|
|
|
.collapsed .newChatButton,
|
|
.collapsed .pluginButton,
|
|
.collapsed .footerButton,
|
|
.collapsed .projectRow {
|
|
width: 32px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.collapsed .body {
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 2px;
|
|
margin-right: 0;
|
|
padding-right: 0;
|
|
margin-bottom: 220px;
|
|
}
|
|
|
|
.collapsed .newTaskNav {
|
|
justify-content: center;
|
|
}
|
|
|
|
.collapsed .primaryNav {
|
|
align-items: center;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.collapsed .sessionList {
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-right: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.collapsed .footer {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.collapsed .footerPrimary,
|
|
.collapsed .footerActions {
|
|
flex-direction: column;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.resizeHandle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -3px;
|
|
bottom: 0;
|
|
width: 6px;
|
|
cursor: col-resize;
|
|
touch-action: none;
|
|
}
|
|
|
|
.resizeHandle::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 2px;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: transparent;
|
|
content: '';
|
|
}
|
|
|
|
.resizeHandle:hover::after {
|
|
background: var(--sidebar-ring);
|
|
}
|
|
|
|
.collapsed .resizeHandle {
|
|
display: none;
|
|
}
|
|
|
|
.sessionActionButtonActive,
|
|
.sessionActionButtonActive:hover {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
.menuActive .sessionActions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.actionMenu {
|
|
position: fixed;
|
|
z-index: 1100;
|
|
min-width: 168px;
|
|
padding: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--popover);
|
|
color: var(--popover-foreground);
|
|
box-shadow:
|
|
0 2px 4px -2px rgb(0 0 0 / 10%),
|
|
0 8px 16px -4px rgb(0 0 0 / 18%);
|
|
}
|
|
|
|
.actionMenuItem {
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 8px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--popover-foreground);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.actionMenuItem:hover:not(:disabled),
|
|
.actionMenuItem:focus-visible:not(:disabled) {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
outline: none;
|
|
}
|
|
|
|
.actionMenuItem:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.actionMenuItemDanger:not(:disabled) {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.actionMenuItemDanger:hover:not(:disabled),
|
|
.actionMenuItemDanger:focus-visible:not(:disabled) {
|
|
background: var(--error-bg);
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.actionMenuIcon {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.actionMenuIcon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.actionMenuLabel {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.archivedSection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 4px;
|
|
border-top: 1px solid var(--sidebar-border);
|
|
}
|
|
|
|
.archivedHeader {
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 8px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.archivedHeader:hover,
|
|
.archivedHeader:focus-visible {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
outline: none;
|
|
}
|
|
|
|
.archivedChevron {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: 0 0 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.archivedChevron svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.archivedTitle {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
|
|
.archivedCount {
|
|
flex: 0 0 auto;
|
|
min-width: 20px;
|
|
height: 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 6px;
|
|
border-radius: 999px;
|
|
background: var(--secondary);
|
|
color: var(--secondary-foreground);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.archivedList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.archivedRow {
|
|
cursor: default;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar.mobileOpen {
|
|
display: flex;
|
|
z-index: 50;
|
|
/* The width var is shared with the desktop resize handle and can be wider
|
|
than a phone viewport; cap it so the drawer never overflows the screen. */
|
|
max-width: 100vw;
|
|
}
|
|
|
|
.resizeHandle {
|
|
display: none;
|
|
}
|
|
}
|