feat: improve session sidebar archive and pagination controls

Add a toggle for displaying archived sessions in the sidebar menu
Load more sessions in smaller increments
Reset expanded session counts when collapsing groups or projects

packages/ui/src/components/session/SessionSidebar.tsx

@@ -176,7 +176,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   const [collapsedProjects, setCollapsedProjects] = React.useState<Set<string>>(new Set());
 
   const [projectRepoStatus, setProjectRepoStatus] = React.useState<Map<string, boolean | null>>(new Map());
-  const [expandedSessionGroups, setExpandedSessionGroups] = React.useState<Set<string>>(new Set());
+  const [visibleSessionCountByGroup, setVisibleSessionCountByGroup] = React.useState<Map<string, number>>(new Map());
   const [newWorktreeDialogOpen, setNewWorktreeDialogOpen] = React.useState(false);
   const [updateDialogOpen, setUpdateDialogOpen] = React.useState(false);
   const [openSidebarMenuKey, setOpenSidebarMenuKey] = React.useState<string | null>(null);
@@ -681,20 +681,43 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     [collapsedFolderIds, toggleFolderCollapse, createFolder, t],
   );
 
-  const toggleGroupSessionLimit = React.useCallback((groupId: string) => {
-    setExpandedSessionGroups((prev) => {
-      const next = new Set(prev);
-      if (next.has(groupId)) {
-        next.delete(groupId);
-      } else {
-        next.add(groupId);
-      }
+  const showMoreGroupSessions = React.useCallback((groupId: string, currentVisibleCount: number) => {
+    setVisibleSessionCountByGroup((prev) => {
+      const next = new Map(prev);
+      next.set(groupId, currentVisibleCount + 7);
       return next;
     });
   }, []);
 
+  const resetGroupSessionLimit = React.useCallback((groupId: string) => {
+    setVisibleSessionCountByGroup((prev) => {
+      if (!prev.has(groupId)) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.delete(groupId);
+      return next;
+    });
+  }, []);
+
+  const resetProjectSessionLimits = React.useCallback((projectId: string) => {
+    setVisibleSessionCountByGroup((prev) => {
+      let changed = false;
+      const next = new Map(prev);
+      const projectGroupPrefix = `${projectId}:`;
+      for (const groupId of next.keys()) {
+        if (groupId.startsWith(projectGroupPrefix)) {
+          next.delete(groupId);
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, []);
+
   const collapseAllProjects = React.useCallback(() => {
     ignoreIntersectionUntil.current = Date.now() + 150;
+    setVisibleSessionCountByGroup(new Map());
     setCollapsedProjects(() => {
       const allIds = new Set(projects.map((p) => p.id));
       try {
@@ -709,6 +732,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
 
   const expandAllProjects = React.useCallback(() => {
     ignoreIntersectionUntil.current = Date.now() + 150;
+    setVisibleSessionCountByGroup(new Map());
     setCollapsedProjects(() => {
       const empty = new Set<string>();
       try {
@@ -724,6 +748,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   const toggleProject = React.useCallback((projectId: string) => {
     // Ignore intersection events for a short period after toggling
     ignoreIntersectionUntil.current = Date.now() + 150;
+    resetProjectSessionLimits(projectId);
     setCollapsedProjects((prev) => {
       const next = new Set(prev);
       if (next.has(projectId)) {
@@ -741,7 +766,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       }
       return next;
     });
-  }, [isVSCode, safeStorage, scheduleCollapsedProjectsPersist]);
+  }, [isVSCode, resetProjectSessionLimits, safeStorage, scheduleCollapsedProjectsPersist]);
 
   const normalizedProjects = React.useMemo(() => {
     return projects
@@ -933,6 +958,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   }, [projectSections, homeDirectory]);
 
   const showRecentSection = useSessionDisplayStore((state) => state.showRecentSection);
+  const showArchivedSessions = useSessionDisplayStore((state) => state.showArchivedSessions);
 
   const activeNowSessions = React.useMemo(() => {
     if (!showRecentSection) {
@@ -1010,8 +1036,15 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   });
 
   const sectionsForSidebarRender = React.useMemo(() => {
+    const archiveFilteredSections = showArchivedSessions
+      ? sectionsForRender
+      : sectionsForRender.map((section) => ({
+        ...section,
+        groups: section.groups.filter((group) => !group.isArchivedBucket),
+      }));
+
     if (isVSCode || hasSessionSearchQuery || recentSessionIds.size === 0) {
-      return sectionsForRender;
+      return archiveFilteredSections;
     }
 
     const filterNodes = (nodes: SessionNode[]): SessionNode[] => {
@@ -1034,14 +1067,14 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       }, []);
     };
 
-    return sectionsForRender.map((section) => ({
+    return archiveFilteredSections.map((section) => ({
       ...section,
       groups: section.groups.map((group) => ({
         ...group,
         sessions: filterNodes(group.sessions),
       })),
     }));
-  }, [isVSCode, hasSessionSearchQuery, recentSessionIds, sectionsForRender]);
+  }, [isVSCode, hasSessionSearchQuery, recentSessionIds, sectionsForRender, showArchivedSessions]);
 
   const prLookupKeys = React.useMemo(() => {
     const keys = new Set<string>();
@@ -1247,13 +1280,14 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   );
 
   const toggleCollapsedGroup = React.useCallback((key: string) => {
+    resetGroupSessionLimit(key);
     setCollapsedGroups((prev) => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);
       else next.add(key);
       return next;
     });
-  }, []);
+  }, [resetGroupSessionLimit]);
 
   const prVisualStateByDirectoryBranch = React.useMemo(() => {
     const result = new Map<string, PrIndicator>();
@@ -1287,7 +1321,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         hasSessionSearchQuery={hasSessionSearchQuery}
         normalizedSessionSearchQuery={normalizedSessionSearchQuery}
         groupSearchDataByGroup={groupSearchDataByGroup}
-        expandedSessionGroups={expandedSessionGroups}
+        visibleSessionCount={visibleSessionCountByGroup.get(groupKey)}
         collapsedGroups={collapsedGroups}
         hideDirectoryControls={hideDirectoryControls}
         collapsedFolderIds={collapsedFolderIds}
@@ -1300,7 +1334,8 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         currentSessionDirectory={currentSessionDirectory}
         projectRepoStatus={projectRepoStatus}
         lastRepoStatus={lastRepoStatusRef.current}
-        toggleGroupSessionLimit={toggleGroupSessionLimit}
+        showMoreGroupSessions={showMoreGroupSessions}
+        resetGroupSessionLimit={resetGroupSessionLimit}
         mobileVariant={mobileVariant}
         alwaysShowActions={alwaysShowSidebarActions}
         activeProjectId={activeProjectId}
@@ -1325,7 +1360,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       hasSessionSearchQuery,
       normalizedSessionSearchQuery,
       groupSearchDataByGroup,
-      expandedSessionGroups,
+      visibleSessionCountByGroup,
       collapsedGroups,
       hideDirectoryControls,
       collapsedFolderIds,
@@ -1336,7 +1371,8 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       renderSessionNode,
       currentSessionDirectory,
       projectRepoStatus,
-      toggleGroupSessionLimit,
+      showMoreGroupSessions,
+      resetGroupSessionLimit,
       mobileVariant,
       alwaysShowSidebarActions,
       activeProjectId,

packages/ui/src/components/session/sidebar/SessionGroupSection.tsx

@@ -40,7 +40,7 @@ type Props = {
   hasSessionSearchQuery: boolean;
   normalizedSessionSearchQuery: string;
   groupSearchDataByGroup: WeakMap<SessionGroup, GroupSearchData>;
-  expandedSessionGroups: Set<string>;
+  visibleSessionCount?: number;
   collapsedGroups: Set<string>;
   hideDirectoryControls: boolean;
   collapsedFolderIds: Set<string>;
@@ -53,7 +53,8 @@ type Props = {
   currentSessionDirectory: string | null;
   projectRepoStatus: Map<string, boolean | null>;
   lastRepoStatus: boolean;
-  toggleGroupSessionLimit: (groupKey: string) => void;
+  showMoreGroupSessions: (groupKey: string, currentVisibleCount: number) => void;
+  resetGroupSessionLimit: (groupKey: string) => void;
   mobileVariant: boolean;
   alwaysShowActions: boolean;
   activeProjectId: string | null;
@@ -107,7 +108,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
     hasSessionSearchQuery,
     normalizedSessionSearchQuery,
     groupSearchDataByGroup,
-    expandedSessionGroups,
+    visibleSessionCount,
     collapsedGroups,
     hideDirectoryControls,
     collapsedFolderIds,
@@ -119,7 +120,8 @@ export function SessionGroupSection(props: Props): React.ReactNode {
     renderSessionNode,
     projectRepoStatus,
     lastRepoStatus,
-    toggleGroupSessionLimit,
+    showMoreGroupSessions,
+    resetGroupSessionLimit,
     mobileVariant,
     alwaysShowActions,
     activeProjectId,
@@ -156,9 +158,9 @@ export function SessionGroupSection(props: Props): React.ReactNode {
   const displayMode = useSessionDisplayStore((state) => state.displayMode);
   const foldersMap = useSessionFoldersStore((state) => state.foldersMap);
   const isMinimalMode = displayMode === 'minimal';
-  const isExpanded = expandedSessionGroups.has(groupKey);
   const isCollapsed = hasSessionSearchQuery ? false : collapsedGroups.has(groupKey);
   const maxVisible = hideDirectoryControls ? 10 : 5;
+  const nonArchivedVisibleCount = Math.max(maxVisible, visibleSessionCount ?? maxVisible);
   const groupMatchesSearch = hasSessionSearchQuery ? searchData?.groupMatches === true : false;
   const shouldFilterGroupContents = hasSessionSearchQuery;
   const sourceGroupNodes = React.useMemo(
@@ -255,8 +257,9 @@ export function SessionGroupSection(props: Props): React.ReactNode {
     ? ungroupedSessions
     : hasSessionSearchQuery
       ? ungroupedSessions
-      : (isExpanded ? ungroupedSessions : ungroupedSessions.slice(0, maxVisible));
+      : ungroupedSessions.slice(0, nonArchivedVisibleCount);
   const remainingCount = totalSessions - visibleSessions.length;
+  const canShowLess = !group.isArchivedBucket && !hasSessionSearchQuery && totalSessions > maxVisible && remainingCount === 0;
 
   // Virtualize the archived bucket once it grows past a threshold. The
   // archived list is the only group that can routinely hit hundreds or
@@ -617,21 +620,19 @@ export function SessionGroupSection(props: Props): React.ReactNode {
             : t('sessions.sidebar.group.empty.noSessionsInWorkspace')}
         </div>
       ) : null}
-      {remainingCount > 0 && !isExpanded ? (
+      {remainingCount > 0 ? (
         <button
           type="button"
-          onClick={() => toggleGroupSessionLimit(groupKey)}
+          onClick={() => showMoreGroupSessions(groupKey, visibleSessions.length)}
           className="mt-0.5 flex items-center justify-start rounded-md px-1.5 py-0.5 text-left text-xs text-muted-foreground/70 leading-tight hover:text-foreground hover:underline"
         >
-          {remainingCount === 1
-            ? t('sessions.sidebar.group.showMoreSingle', { count: remainingCount })
-            : t('sessions.sidebar.group.showMorePlural', { count: remainingCount })}
+          {t('sessions.sidebar.group.showMore')}
         </button>
       ) : null}
-      {isExpanded && totalSessions > maxVisible ? (
+      {canShowLess ? (
         <button
           type="button"
-          onClick={() => toggleGroupSessionLimit(groupKey)}
+          onClick={() => resetGroupSessionLimit(groupKey)}
           className="mt-0.5 flex items-center justify-start rounded-md px-1.5 py-0.5 text-left text-xs text-muted-foreground/70 leading-tight hover:text-foreground hover:underline"
         >
           {t('sessions.sidebar.group.showFewer')}

packages/ui/src/components/session/sidebar/SidebarHeader.tsx

@@ -63,8 +63,10 @@ export function SidebarHeader(props: Props): React.ReactNode {
 
   const displayMode = useSessionDisplayStore((state) => state.displayMode);
   const showRecentSection = useSessionDisplayStore((state) => state.showRecentSection);
+  const showArchivedSessions = useSessionDisplayStore((state) => state.showArchivedSessions);
   const setDisplayMode = useSessionDisplayStore((state) => state.setDisplayMode);
   const toggleRecentSection = useSessionDisplayStore((state) => state.toggleRecentSection);
+  const toggleArchivedSessions = useSessionDisplayStore((state) => state.toggleArchivedSessions);
 
   if (hideDirectoryControls) {
     return null;
@@ -210,6 +212,13 @@ export function SidebarHeader(props: Props): React.ReactNode {
                       <span>{t('sessions.sidebar.header.displayMode.showRecent')}</span>
                       {showRecentSection ? <Icon name="check" className="h-4 w-4 text-primary" /> : null}
                     </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={toggleArchivedSessions}
+                      className="flex items-center justify-between"
+                    >
+                      <span>{t('sessions.sidebar.header.displayMode.showArchived')}</span>
+                      {showArchivedSessions ? <Icon name="check" className="h-4 w-4 text-primary" /> : null}
+                    </DropdownMenuItem>
                   </>
                 ) : null}
                 <DropdownMenuSeparator />