fix(left-bar): always show New Group button, hide empty Ungrouped Agents folder

- New Group button is now always visible regardless of groups/ungrouped state
- Ungrouped Agents folder only shows when there are ungrouped sessions
This commit is contained in:
Pedram Amini
2026-01-31 18:38:45 -05:00
parent eb356318bd
commit 7e72966e2d

View File

@@ -2646,71 +2646,70 @@ function SessionListInner(props: SessionListProps) {
renderSessionWithWorktrees(session, 'flat', { keyPrefix: 'flat' })
)}
</div>
) : (
groups.length > 0 && (
/* UNGROUPED FOLDER - Groups exist, show as collapsible folder */
<div className="mb-1 mt-4">
) : groups.length > 0 && ungroupedSessions.length > 0 ? (
/* UNGROUPED FOLDER - Groups exist and there are ungrouped agents */
<div className="mb-1 mt-4">
<div
className="px-3 py-1.5 flex items-center justify-between cursor-pointer hover:bg-opacity-50 group"
onClick={() => setUngroupedCollapsed(!ungroupedCollapsed)}
onDragOver={handleDragOver}
onDrop={handleDropOnUngrouped}
>
<div
className="px-3 py-1.5 flex items-center justify-between cursor-pointer hover:bg-opacity-50 group"
onClick={() => setUngroupedCollapsed(!ungroupedCollapsed)}
onDragOver={handleDragOver}
onDrop={handleDropOnUngrouped}
className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider flex-1"
style={{ color: theme.colors.textDim }}
>
<div
className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider flex-1"
style={{ color: theme.colors.textDim }}
>
{ungroupedCollapsed ? (
<ChevronRight className="w-3 h-3" />
) : (
<ChevronDown className="w-3 h-3" />
)}
<Folder className="w-3.5 h-3.5" />
<span>Ungrouped Agents</span>
</div>
<button
onClick={(e) => {
e.stopPropagation();
createNewGroup();
}}
className="px-2 py-0.5 rounded-full text-[10px] font-medium hover:opacity-80 transition-opacity flex items-center gap-1"
style={{
backgroundColor: theme.colors.accent + '20',
color: theme.colors.accent,
border: `1px solid ${theme.colors.accent}40`,
}}
title="Create new group"
>
<Plus className="w-3 h-3" />
<span>New Group</span>
</button>
{ungroupedCollapsed ? (
<ChevronRight className="w-3 h-3" />
) : (
<ChevronDown className="w-3 h-3" />
)}
<Folder className="w-3.5 h-3.5" />
<span>Ungrouped Agents</span>
</div>
{!ungroupedCollapsed ? (
<div
className="flex flex-col border-l ml-4"
style={{ borderColor: theme.colors.border }}
>
{sortedUngroupedSessions.map((session) =>
renderSessionWithWorktrees(session, 'ungrouped', { keyPrefix: 'ungrouped' })
)}
</div>
) : (
/* Collapsed Ungrouped Palette - uses subdivided pills for worktrees */
<div
className="ml-8 mr-3 mt-1 mb-2 flex gap-1 h-1.5 cursor-pointer"
onClick={() => setUngroupedCollapsed(false)}
>
{sortedUngroupedParentSessions.map((s) =>
renderCollapsedPill(s, 'ungrouped-collapsed', () =>
setUngroupedCollapsed(false)
)
)}
</div>
)}
</div>
)
)}
{!ungroupedCollapsed ? (
<div
className="flex flex-col border-l ml-4"
style={{ borderColor: theme.colors.border }}
>
{sortedUngroupedSessions.map((session) =>
renderSessionWithWorktrees(session, 'ungrouped', { keyPrefix: 'ungrouped' })
)}
</div>
) : (
/* Collapsed Ungrouped Palette - uses subdivided pills for worktrees */
<div
className="ml-8 mr-3 mt-1 mb-2 flex gap-1 h-1.5 cursor-pointer"
onClick={() => setUngroupedCollapsed(false)}
>
{sortedUngroupedParentSessions.map((s) =>
renderCollapsedPill(s, 'ungrouped-collapsed', () =>
setUngroupedCollapsed(false)
)
)}
</div>
)}
</div>
) : null}
{/* NEW GROUP BUTTON - Always visible */}
<div className="mt-4 px-3">
<button
onClick={createNewGroup}
className="w-full px-2 py-1.5 rounded-full text-[10px] font-medium hover:opacity-80 transition-opacity flex items-center justify-center gap-1"
style={{
backgroundColor: theme.colors.accent + '20',
color: theme.colors.accent,
border: `1px solid ${theme.colors.accent}40`,
}}
title="Create new group"
>
<Plus className="w-3 h-3" />
<span>New Group</span>
</button>
</div>
{/* Flexible spacer to push group chats to bottom */}
<div className="flex-grow min-h-4" />