feat(ui): thread sessions in sidebar list
Show sessions as parent/child threads with expand/collapse and improved agent row styling. Keep a 5-session cache to avoid refetching messages when switching between recently visited sessions.
This commit is contained in:
Shantur Rathore
@@ -483,214 +483,3 @@
|
||||
background-color: var(--surface-secondary);
|
||||
}
|
||||
|
||||
/* Session view utility */
|
||||
.session-view {
|
||||
@apply flex flex-1 min-h-0 flex-col;
|
||||
background-color: var(--surface-base);
|
||||
color: inherit;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Session list component */
|
||||
.session-list-container {
|
||||
@apply flex flex-col flex-1 min-h-0 relative;
|
||||
background-color: var(--surface-secondary);
|
||||
min-width: 200px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.session-sidebar {
|
||||
@apply flex flex-col min-h-0;
|
||||
background-color: var(--surface-secondary);
|
||||
}
|
||||
|
||||
.session-sidebar-header {
|
||||
@apply flex flex-col gap-2 w-full;
|
||||
}
|
||||
|
||||
.session-sidebar-title {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.session-sidebar-shortcuts {
|
||||
@apply flex flex-col gap-1;
|
||||
}
|
||||
|
||||
.session-sidebar-new {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.session-sidebar-controls {
|
||||
@apply flex flex-col gap-3;
|
||||
background-color: var(--surface-secondary);
|
||||
}
|
||||
|
||||
.session-sidebar-controls > * {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.session-sidebar-separator {
|
||||
background-color: var(--border-base);
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.session-resize-handle {
|
||||
@apply absolute top-0 w-1 h-full cursor-col-resize bg-transparent transition-colors;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.session-resize-handle--left {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.session-resize-handle--right {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.session-resize-handle:hover {
|
||||
background-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.session-resize-handle::before {
|
||||
content: "";
|
||||
@apply absolute top-0 h-full w-2;
|
||||
}
|
||||
|
||||
.session-resize-handle--left::before {
|
||||
right: 0;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
.session-resize-handle--right::before {
|
||||
left: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.session-list-header {
|
||||
@apply border-b relative;
|
||||
border-color: var(--border-base);
|
||||
}
|
||||
|
||||
.session-list-header h3 {
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.session-list {
|
||||
@apply flex-1;
|
||||
}
|
||||
|
||||
.session-list-item {
|
||||
@apply border-b last:border-b-0;
|
||||
border-color: var(--border-base);
|
||||
}
|
||||
|
||||
.session-item-base {
|
||||
@apply w-full flex flex-col gap-1 px-3 py-2.5 text-left transition-colors outline-none;
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.session-item-base:focus-visible {
|
||||
@apply ring-2 ring-offset-1;
|
||||
ring-color: var(--accent-primary);
|
||||
ring-offset-color: var(--surface-secondary);
|
||||
}
|
||||
|
||||
.session-item-row {
|
||||
@apply flex items-center gap-2 w-full;
|
||||
}
|
||||
|
||||
.session-item-header {
|
||||
@apply justify-between;
|
||||
}
|
||||
|
||||
.session-item-title-row {
|
||||
@apply flex items-center gap-2 min-w-0 flex-1;
|
||||
}
|
||||
|
||||
.session-item-meta {
|
||||
@apply justify-between items-center;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-secondary);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.session-item-active .session-item-meta {
|
||||
color: var(--text-secondary);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.session-item-actions {
|
||||
@apply flex items-center gap-1;
|
||||
}
|
||||
|
||||
.session-item-active {
|
||||
background-color: var(--list-item-highlight-bg);
|
||||
color: var(--text-primary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
box-shadow: inset 0 0 0 1px var(--list-item-highlight-border);
|
||||
}
|
||||
|
||||
.session-item-inactive {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.session-item-inactive:hover {
|
||||
background-color: var(--surface-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.session-item-active .session-item-close:hover {
|
||||
background-color: var(--surface-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.session-item-title {
|
||||
@apply flex-1 min-w-0;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.session-item-close {
|
||||
@apply flex-shrink-0 p-0.5 rounded transition-all;
|
||||
}
|
||||
|
||||
.session-item-close:focus-visible {
|
||||
@apply ring-2 ring-offset-1;
|
||||
ring-color: var(--accent-primary);
|
||||
ring-offset-color: inherit;
|
||||
}
|
||||
|
||||
.session-list-footer {
|
||||
@apply border-t;
|
||||
border-color: var(--border-base);
|
||||
}
|
||||
|
||||
.session-new-button {
|
||||
background-color: var(--surface-base);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-base);
|
||||
}
|
||||
|
||||
.session-new-button:hover {
|
||||
background-color: var(--surface-hover);
|
||||
}
|
||||
|
||||
.session-new-button:focus-visible {
|
||||
@apply ring-2 ring-offset-1;
|
||||
ring-color: var(--accent-primary);
|
||||
ring-offset-color: var(--surface-secondary);
|
||||
}
|
||||
|
||||
/* Responsive behavior for session list */
|
||||
@media (max-width: 768px) {
|
||||
.session-list-container {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.session-item-base {
|
||||
@apply px-2 py-2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -206,6 +206,58 @@ session-sidebar-controls .selector-trigger-primary {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
|
||||
.session-item-base.session-item-child {
|
||||
padding-left: 2.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.session-item-base.session-item-child::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 1.125rem;
|
||||
width: 1px;
|
||||
background-color: var(--text-secondary);
|
||||
opacity: 0.95;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.session-item-base.session-item-child.session-item-child-last::before {
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
.session-item-base.session-item-child::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1.125rem;
|
||||
width: 0.875rem;
|
||||
height: 1px;
|
||||
background-color: var(--text-secondary);
|
||||
opacity: 0.95;
|
||||
transform: translateY(-0.5px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.session-item-base.session-item-border-user {
|
||||
border-left: 4px solid var(--message-user-border);
|
||||
}
|
||||
|
||||
.session-item-base.session-item-border-assistant {
|
||||
border-left: 4px solid var(--message-assistant-border);
|
||||
}
|
||||
|
||||
.session-item-expander {
|
||||
@apply flex-shrink-0 p-0.5 rounded transition-colors;
|
||||
}
|
||||
|
||||
.session-item-expander--spacer {
|
||||
width: calc(0.875rem + 0.25rem);
|
||||
height: calc(0.875rem + 0.25rem);
|
||||
}
|
||||
|
||||
.session-item-base:focus-visible {
|
||||
@apply ring-2 ring-offset-1;
|
||||
ring-color: var(--accent-primary);
|
||||
@@ -221,7 +273,7 @@ session-sidebar-controls .selector-trigger-primary {
|
||||
}
|
||||
|
||||
.session-item-title-row {
|
||||
@apply flex items-center gap-2 min-w-0 flex-1;
|
||||
@apply flex items-start gap-2 min-w-0 flex-1;
|
||||
}
|
||||
|
||||
.session-item-meta {
|
||||
@@ -247,6 +299,16 @@ session-sidebar-controls .selector-trigger-primary {
|
||||
box-shadow: inset 0 0 0 1px var(--list-item-highlight-border);
|
||||
}
|
||||
|
||||
.session-item-base.session-item-kind-user.session-item-active {
|
||||
background-color: var(--session-user-active-bg);
|
||||
}
|
||||
|
||||
.session-item-base.session-item-kind-assistant.session-item-active {
|
||||
background-color: var(--session-assistant-active-bg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.session-item-inactive {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
@@ -256,6 +318,8 @@ session-sidebar-controls .selector-trigger-primary {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.session-item-active .session-item-close:hover {
|
||||
background-color: var(--surface-hover);
|
||||
color: var(--text-primary);
|
||||
@@ -266,6 +330,14 @@ session-sidebar-controls .selector-trigger-primary {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.session-item-title--clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.session-item-close {
|
||||
@apply flex-shrink-0 p-0.5 rounded transition-all;
|
||||
}
|
||||
|
||||
@@ -35,6 +35,10 @@
|
||||
--message-tool-bg: #f8f9fa;
|
||||
--message-tool-border: #6c757d;
|
||||
|
||||
/* Session list selection tints */
|
||||
--session-user-active-bg: color-mix(in oklab, var(--surface-secondary) 85%, var(--message-user-border));
|
||||
--session-assistant-active-bg: color-mix(in oklab, var(--surface-secondary) 85%, var(--message-assistant-border));
|
||||
|
||||
/* Semantic component colors */
|
||||
--session-status-working-fg: #b45309;
|
||||
--session-status-working-bg: rgba(245, 158, 11, 0.16);
|
||||
|
||||
Reference in New Issue
Block a user