fix(left-bar): show New Group button inline with Ungrouped Agents header

- When ungrouped agents exist: inline button in header (like Group Chats)
- When no ungrouped agents: standalone full-width button (folder hidden)
- When no groups exist (flat list): standalone full-width button below sessions
This commit is contained in:
Pedram Amini
2026-02-01 01:19:41 -05:00
parent ef7ac9c6a2
commit ecdcd5b883

View File

@@ -2640,12 +2640,29 @@ function SessionListInner(props: SessionListProps) {
{/* SESSIONS - Flat list when no groups exist, otherwise show Ungrouped folder */}
{sessions.length > 0 && groups.length === 0 ? (
/* FLAT LIST - No groups exist yet, show sessions directly */
<div className="flex flex-col">
{sortedFilteredSessions.map((session) =>
renderSessionWithWorktrees(session, 'flat', { keyPrefix: 'flat' })
)}
</div>
/* FLAT LIST - No groups exist yet, show sessions directly with New Group button */
<>
<div className="flex flex-col">
{sortedFilteredSessions.map((session) =>
renderSessionWithWorktrees(session, 'flat', { keyPrefix: 'flat' })
)}
</div>
<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>
</>
) : groups.length > 0 && ungroupedSessions.length > 0 ? (
/* UNGROUPED FOLDER - Groups exist and there are ungrouped agents */
<div className="mb-1 mt-4">
@@ -2667,6 +2684,22 @@ function SessionListInner(props: SessionListProps) {
<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>
</div>
{!ungroupedCollapsed ? (
@@ -2692,25 +2725,25 @@ function SessionListInner(props: SessionListProps) {
</div>
)}
</div>
) : groups.length > 0 ? (
/* NO UNGROUPED AGENTS - Show standalone New Group button */
<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>
) : 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" />