fix(site): show archived filter on agents page when chat list is empty (#23793)

While running scaletests I noticed the archived filter button on the
agents sidebar would disappear when the current filter had zero results.
This made it impossible to switch between active and archived views once
one side was empty.

The filter dropdown was only rendered inside the Pinned or first
time-group section header. When `visibleRootIDs` was empty, neither
header existed, so the filter had nowhere to attach.

This keeps the original dropdown placement on section headers when chats
exist. When the list is empty, the empty-state box itself now provides a
"View archived →" or "← Back to active" link so users can always switch
filters without needing the dropdown.

<img width="322" height="191" alt="image"
src="https://github.com/user-attachments/assets/7fd9ca09-5f72-4796-a925-7fab570fdff5"
/>

<img width="320" height="184" alt="image"
src="https://github.com/user-attachments/assets/2f856088-c2dc-4e34-9ece-84144a1adf79"
/>

Both archived & unarchived look the same when there's at least one
agent:

<img width="322" height="194" alt="image"
src="https://github.com/user-attachments/assets/42c4d54b-e500-45b1-b045-c126144c35bd"
/>
This commit is contained in:
Ethan
2026-03-31 12:57:46 +11:00
committed by GitHub
parent 75f1503b41
commit 348a3bd693
@@ -855,9 +855,9 @@ export const AgentsSidebar: FC<AgentsSidebarProps> = (props) => {
onReorderPinnedAgent?.(activeId, newIndex + 1);
};
// The filter dropdown attaches to the first visible section
// header. When pinned chats exist, that's the Pinned header;
// otherwise it falls through to the first non-empty time group.
// Attach the archived filter to the first visible section header.
// When the list is empty, fall back to contextual empty-state links
// instead of a floating standalone icon.
const showFilterOnPinned = pinnedChats.length > 0;
const firstNonEmptyGroup = showFilterOnPinned
? undefined
@@ -1069,15 +1069,19 @@ export const AgentsSidebar: FC<AgentsSidebarProps> = (props) => {
? "No archived agents"
: "No agents yet"}
</p>
{archivedFilter === "archived" && (
<button
type="button"
className="mt-2 cursor-pointer border-none bg-transparent p-0 text-xs text-content-secondary hover:text-content-primary hover:underline"
onClick={() => onArchivedFilterChange?.("active")}
>
Back to active
</button>
)}
<button
type="button"
className="mt-2 cursor-pointer border-none bg-transparent p-0 text-xs text-content-secondary hover:text-content-primary hover:underline"
onClick={() =>
onArchivedFilterChange?.(
archivedFilter === "archived" ? "active" : "archived",
)
}
>
{archivedFilter === "archived"
? "← Back to active"
: "View archived →"}
</button>
</div>
) : (
<div>