Skip to content

Sidebar: line up every session row in one column #682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GrigoryPervakov wants to merge 2 commits into
base: main
Choose a base branch
from
+14 −3
Open

Sidebar: line up every session row in one column #682

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e194723
Sidebar: line up every session row in one column
GrigoryPervakov Nov 11, 2026
b5dfbbc
Sidebar: keep a nested row's indent while it is renamed
GrigoryPervakov Nov 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions web/src/components/Chat/SessionSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -647,6 +647,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
: 'text-text-muted hover:bg-surface-raised hover:text-text-secondary'
}`}
>
<ExpandSlot />
<MessageSquare size={13} className="shrink-0 opacity-50" />
<div className="flex-1 min-w-0">
<div className="truncate text-xs in-data-[layout=page]:text-sm leading-tight italic">New chat</div>
Expand Down Expand Up @@ -795,6 +796,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
: 'text-text-faint hover:bg-surface-raised hover:text-text-muted'
}`}
>
<ExpandSlot />
<SessionOriginIcon session={s} />
<div className="flex-1 min-w-0">
<div className="truncate">{cleanTitle(s)}</div>
Expand Down Expand Up @@ -930,6 +932,11 @@ function GroupHeader({ label, count, collapsed, tone, onToggle }: {
}


/** Empty box the size of the expand chevron, so every row's icon and title sit in the same column. */
function ExpandSlot() {
return <span aria-hidden="true" className="shrink-0 -ml-0.5 -mr-1 w-[17px]" />;
}

/** Sidebar icon tint for review-loop observer sessions, by loop status. */
function reviewLoopIconTone(status: string): string {
switch (status) {
Expand Down Expand Up @@ -1202,7 +1209,11 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl

if (renaming) {
return (
<div className="flex items-center gap-2 px-3 py-1.5 mx-1 rounded-md bg-surface-raised">
<div
style={depth ? { paddingLeft: 12 + depth * 16 } : undefined}
className="flex items-center gap-2 px-3 py-1.5 mx-1 rounded-md bg-surface-raised"
>
<ExpandSlot />
<MessageSquare size={13} className="shrink-0 opacity-50" />
<TextField
bare
Expand Down Expand Up @@ -1253,7 +1264,7 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
: 'text-text-muted hover:bg-surface-raised hover:text-text-secondary'
}${isDropTarget ? ' ring-2 ring-inset ring-accent bg-accent/10' : ''}${isDragSource ? ' opacity-50' : ''}`}
>
{hasChildren && (
{hasChildren ? (
<button
type="button"
onClick={(e) => { e.preventDefault(); e.stopPropagation(); onToggleExpand?.(session.id); }}
Expand All @@ -1262,7 +1273,7 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
>
{expanded ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
</button>
)}
) : <ExpandSlot />}
<SessionOriginIcon session={session} />
{session.review_loop && (
<Repeat size={13} className={`shrink-0 ${reviewLoopIconTone(session.review_loop.status)}`} />
Expand Down
Loading