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
This commit is contained in:
Bohdan Triapitsyn
2026-06-02 13:25:28 +03:00
parent 6a88cd09cc
commit 2f3d5107e8
12 changed files with 99 additions and 31 deletions
@@ -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,
@@ -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')}
@@ -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 />
+2
View File
@@ -299,6 +299,7 @@ export const dict = {
'sessions.sidebar.header.displayMode.default': 'Default',
'sessions.sidebar.header.displayMode.minimal': 'Minimal',
'sessions.sidebar.header.displayMode.showRecent': 'Show recent section',
'sessions.sidebar.header.displayMode.showArchived': 'Show archived sessions',
'sessions.sidebar.header.displayMode.collapseAll': 'Collapse all',
'sessions.sidebar.header.displayMode.expandAll': 'Expand all',
'sessions.sidebar.header.search.matchCountSingle': '{count} match',
@@ -441,6 +442,7 @@ export const dict = {
'sessions.sidebar.group.pr.status.closed': 'Closed',
'sessions.sidebar.group.empty.noArchivedSessions': 'No archived sessions yet.',
'sessions.sidebar.group.empty.noSessionsInWorkspace': 'No sessions in this workspace yet.',
'sessions.sidebar.group.showMore': 'Show more sessions',
'sessions.sidebar.group.showMoreSingle': 'Show {count} more session',
'sessions.sidebar.group.showMorePlural': 'Show {count} more sessions',
'sessions.sidebar.group.showFewer': 'Show fewer sessions',
+2
View File
@@ -300,6 +300,7 @@ export const dict: Record<I18nKey, string> = {
"sessions.sidebar.header.displayMode.default": "Predeterminado",
"sessions.sidebar.header.displayMode.minimal": "Mínimo",
"sessions.sidebar.header.displayMode.showRecent": "Mostrar recientes",
"sessions.sidebar.header.displayMode.showArchived": "Mostrar sesiones archivadas",
"sessions.sidebar.header.displayMode.collapseAll": "Colapsar todo",
"sessions.sidebar.header.displayMode.expandAll": "Expandir todo",
"sessions.sidebar.header.search.matchCountSingle": "{count} coincidencia",
@@ -442,6 +443,7 @@ export const dict: Record<I18nKey, string> = {
"sessions.sidebar.group.pr.status.closed": "Cerrado",
"sessions.sidebar.group.empty.noArchivedSessions": "No hay sesiones archivadas aún.",
"sessions.sidebar.group.empty.noSessionsInWorkspace": "Aún no hay sesiones en este espacio de trabajo.",
"sessions.sidebar.group.showMore": "Mostrar más sesiones",
"sessions.sidebar.group.showMoreSingle": "Mostrar {count} más sesión",
"sessions.sidebar.group.showMorePlural": "Mostrar {count} más sesiones",
"sessions.sidebar.group.showFewer": "Mostrar menos sesiones",
+2
View File
@@ -300,6 +300,7 @@ export const dict: Record<I18nKey, string> = {
'sessions.sidebar.header.displayMode.default': '기본값',
'sessions.sidebar.header.displayMode.minimal': '최소',
'sessions.sidebar.header.displayMode.showRecent': '최근 섹션 표시',
'sessions.sidebar.header.displayMode.showArchived': '보관된 세션 표시',
'sessions.sidebar.header.displayMode.collapseAll': '모두 접기',
'sessions.sidebar.header.displayMode.expandAll': '모두 펼치기',
'sessions.sidebar.header.search.matchCountSingle': '{count}개 일치',
@@ -442,6 +443,7 @@ export const dict: Record<I18nKey, string> = {
'sessions.sidebar.group.pr.status.closed': '닫힘',
'sessions.sidebar.group.empty.noArchivedSessions': '보관된 세션이 없습니다',
'sessions.sidebar.group.empty.noSessionsInWorkspace': '아직 이 워크스페이스에 세션 없음',
'sessions.sidebar.group.showMore': '세션 더 보기',
'sessions.sidebar.group.showMoreSingle': '세션 {count}개 더 보기',
'sessions.sidebar.group.showMorePlural': '세션 {count}개 더 보기',
'sessions.sidebar.group.showFewer': '세션 접기',
+2
View File
@@ -134,6 +134,7 @@ export const dict: Record<I18nKey, string> = {
'sessions.sidebar.header.displayMode.default': 'Domyślny',
'sessions.sidebar.header.displayMode.minimal': 'Minimalny',
'sessions.sidebar.header.displayMode.showRecent': 'Pokaż sekcję ostatnich',
'sessions.sidebar.header.displayMode.showArchived': 'Pokaż zarchiwizowane sesje',
'sessions.sidebar.header.displayMode.collapseAll': 'Zwiń wszystkie',
'sessions.sidebar.header.displayMode.expandAll': 'Rozwiń wszystkie',
'sessions.sidebar.header.search.matchCountSingle': '{count} dopasowanie',
@@ -442,6 +443,7 @@ export const dict: Record<I18nKey, string> = {
'sessions.sidebar.group.pr.status.closed': 'Zamknięty',
'sessions.sidebar.group.empty.noArchivedSessions': 'Brak zarchiwizowanych sesji.',
'sessions.sidebar.group.empty.noSessionsInWorkspace': 'Brak sesji w tej przestrzeni roboczej.',
'sessions.sidebar.group.showMore': 'Pokaż więcej sesji',
'sessions.sidebar.group.showMoreSingle': 'Pokaż {count} więcej sesji',
'sessions.sidebar.group.showMorePlural': 'Pokaż {count} więcej sesji',
'sessions.sidebar.group.showFewer': 'Pokaż mniej sesji',
@@ -300,6 +300,7 @@ export const dict: Record<I18nKey, string> = {
"sessions.sidebar.header.displayMode.default": "Padrão",
"sessions.sidebar.header.displayMode.minimal": "Mínimo",
"sessions.sidebar.header.displayMode.showRecent": "Mostrar recentes",
"sessions.sidebar.header.displayMode.showArchived": "Mostrar sessões arquivadas",
"sessions.sidebar.header.displayMode.collapseAll": "Recolher tudo",
"sessions.sidebar.header.displayMode.expandAll": "Expandir tudo",
"sessions.sidebar.header.search.matchCountSingle": "{count} correspondência",
@@ -442,6 +443,7 @@ export const dict: Record<I18nKey, string> = {
"sessions.sidebar.group.pr.status.closed": "Fechada",
"sessions.sidebar.group.empty.noArchivedSessions": "Não há sessões archivadas ainda.",
"sessions.sidebar.group.empty.noSessionsInWorkspace": "Ainda não há sessões neste workspace.",
"sessions.sidebar.group.showMore": "Mostrar mais sessões",
"sessions.sidebar.group.showMoreSingle": "Mostrar mais {count} sessão",
"sessions.sidebar.group.showMorePlural": "Mostrar mais {count} sessões",
"sessions.sidebar.group.showFewer": "Mostrar menos sessões",
+2
View File
@@ -300,6 +300,7 @@ export const dict: Record<I18nKey, string> = {
"sessions.sidebar.header.displayMode.default": "За замовчуванням",
"sessions.sidebar.header.displayMode.minimal": "Мінімальний",
"sessions.sidebar.header.displayMode.showRecent": "Показувати нещодавні",
"sessions.sidebar.header.displayMode.showArchived": "Показувати архівовані сесії",
"sessions.sidebar.header.displayMode.collapseAll": "Згорнути все",
"sessions.sidebar.header.displayMode.expandAll": "Розгорнути все",
"sessions.sidebar.header.search.matchCountSingle": "{count} збіг",
@@ -442,6 +443,7 @@ export const dict: Record<I18nKey, string> = {
"sessions.sidebar.group.pr.status.closed": "Закрито",
"sessions.sidebar.group.empty.noArchivedSessions": "Заархівованих сесій ще немає.",
"sessions.sidebar.group.empty.noSessionsInWorkspace": "У цій гілці ще немає сесій.",
"sessions.sidebar.group.showMore": "Показати більше сесій",
"sessions.sidebar.group.showMoreSingle": "Показати більше сесій {count}",
"sessions.sidebar.group.showMorePlural": "Показати більше сесій {count}",
"sessions.sidebar.group.showFewer": "Показати менше сесій",
@@ -300,6 +300,7 @@ export const dict: Record<I18nKey, string> = {
'sessions.sidebar.header.displayMode.default': '默认',
'sessions.sidebar.header.displayMode.minimal': '精简',
'sessions.sidebar.header.displayMode.showRecent': '显示最近部分',
'sessions.sidebar.header.displayMode.showArchived': '显示已归档会话',
'sessions.sidebar.header.displayMode.collapseAll': '全部折叠',
'sessions.sidebar.header.displayMode.expandAll': '全部展开',
'sessions.sidebar.header.search.matchCountSingle': '{count} 个匹配',
@@ -442,6 +443,7 @@ export const dict: Record<I18nKey, string> = {
'sessions.sidebar.group.pr.status.closed': '已关闭',
'sessions.sidebar.group.empty.noArchivedSessions': '暂无已归档会话。',
'sessions.sidebar.group.empty.noSessionsInWorkspace': '该工作区暂无会话。',
'sessions.sidebar.group.showMore': '显示更多会话',
'sessions.sidebar.group.showMoreSingle': '再显示 {count} 个会话',
'sessions.sidebar.group.showMorePlural': '再显示 {count} 个会话',
'sessions.sidebar.group.showFewer': '显示更少会话',
@@ -313,6 +313,7 @@ export const dict: Record<I18nKey, string> = {
'sessions.sidebar.header.displayMode.default': '預設',
'sessions.sidebar.header.displayMode.minimal': '精簡',
'sessions.sidebar.header.displayMode.showRecent': '顯示最近部分',
'sessions.sidebar.header.displayMode.showArchived': '顯示已封存會話',
'sessions.sidebar.header.displayMode.collapseAll': '全部摺疊',
'sessions.sidebar.header.displayMode.expandAll': '全部展開',
'sessions.sidebar.header.search.matchCountSingle': '{count} 個符合',
@@ -455,6 +456,7 @@ export const dict: Record<I18nKey, string> = {
'sessions.sidebar.group.pr.status.closed': '已關閉',
'sessions.sidebar.group.empty.noArchivedSessions': '暫無已封存會話。',
'sessions.sidebar.group.empty.noSessionsInWorkspace': '該工作區暫無會話。',
'sessions.sidebar.group.showMore': '顯示更多會話',
'sessions.sidebar.group.showMoreSingle': '再顯示 {count} 個會話',
'sessions.sidebar.group.showMorePlural': '再顯示 {count} 個會話',
'sessions.sidebar.group.showFewer': '顯示更少會話',
@@ -6,9 +6,12 @@ export type SessionDisplayMode = 'default' | 'minimal';
type SessionDisplayStore = {
displayMode: SessionDisplayMode;
showRecentSection: boolean;
showArchivedSessions: boolean;
setDisplayMode: (mode: SessionDisplayMode) => void;
setShowRecentSection: (show: boolean) => void;
setShowArchivedSessions: (show: boolean) => void;
toggleRecentSection: () => void;
toggleArchivedSessions: () => void;
};
export const useSessionDisplayStore = create<SessionDisplayStore>()(
@@ -16,9 +19,12 @@ export const useSessionDisplayStore = create<SessionDisplayStore>()(
(set) => ({
displayMode: 'default',
showRecentSection: true,
showArchivedSessions: true,
setDisplayMode: (mode) => set({ displayMode: mode }),
setShowRecentSection: (show) => set({ showRecentSection: show }),
setShowArchivedSessions: (show) => set({ showArchivedSessions: show }),
toggleRecentSection: () => set((state) => ({ showRecentSection: !state.showRecentSection })),
toggleArchivedSessions: () => set((state) => ({ showArchivedSessions: !state.showArchivedSessions })),
}),
{
name: 'session-display-mode',