From 61765ca32c1b0286f07c6b10d02c55dc5882c87e Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Tue, 2 Jun 2026 17:04:23 +0300
Subject: [PATCH] feat: show subsessions under parent sessions in mobile sheet

Nest child sessions (by parentID) under their parent in the mobile sessions
list, with a chevron in the row's left gutter to expand/collapse them
recursively. Top-level pagination counts only parent sessions; children whose
parent isn't in the same bucket stay top-level so nothing is hidden.

Expansion state lives in an in-memory store that survives closing and
reopening the sheet but resets on a full page reload.
---
 packages/ui/src/apps/MobileSessionsSheet.tsx  | 91 ++++++++++++++++---
 .../stores/useMobileSessionExpansionStore.ts  | 23 +++++
 2 files changed, 101 insertions(+), 13 deletions(-)
 create mode 100644 packages/ui/src/stores/useMobileSessionExpansionStore.ts

diff --git a/packages/ui/src/apps/MobileSessionsSheet.tsx b/packages/ui/src/apps/MobileSessionsSheet.tsx
index 9849987f..bf4bd05b 100644
--- a/packages/ui/src/apps/MobileSessionsSheet.tsx
+++ b/packages/ui/src/apps/MobileSessionsSheet.tsx
@@ -46,6 +46,7 @@ import { cn } from '@/lib/utils';
 import { listProjectWorktrees } from '@/lib/worktrees/worktreeManager';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { refreshGlobalSessions, useGlobalSessionsStore } from '@/stores/useGlobalSessionsStore';
+import { useMobileSessionExpansionStore } from '@/stores/useMobileSessionExpansionStore';
 import { useMobileSessionTreeStore } from '@/stores/useMobileSessionTreeStore';
 import { useProjectsStore } from '@/stores/useProjectsStore';
 import { orderWorktrees, useWorktreeOrderStore } from '@/stores/useWorktreeOrderStore';
@@ -100,6 +101,11 @@ const SESSIONS_PER_BUCKET = 7;
 // worktree sessions sit one level deeper. SessionRow adds 16px (dot + gap) on top.
 const PROJECT_SESSION_INDENT = 36;
 const WORKTREE_SESSION_INDENT = 52;
+// Extra left padding applied to each nested subsession level.
+const CHILD_INDENT_STEP = 18;
+
+const getParentId = (session: Session): string | null =>
+  (session as Session & { parentID?: string | null }).parentID ?? null;
 
 const normalizePath = (value?: string | null): string =>
   (value || '').replace(/\\/g, '/').replace(/\/+$/g, '');
@@ -248,6 +254,10 @@ const SessionRow: React.FC<{
   contextLabel?: string;
   /** When true, the row shows the two-step archive confirmation. */
   confirmingArchive?: boolean;
+  /** When true, a chevron is shown in the left gutter to toggle nested subsessions. */
+  hasChildren?: boolean;
+  expanded?: boolean;
+  onToggleChildren?: () => void;
   onSelect: () => void;
   /** When provided, an archive affordance is shown; first tap arms confirm, X cancels. */
   onRequestArchive?: () => void;
@@ -258,6 +268,9 @@ const SessionRow: React.FC<{
   indent,
   contextLabel,
   confirmingArchive = false,
+  hasChildren = false,
+  expanded = false,
+  onToggleChildren,
   onSelect,
   onRequestArchive,
   onConfirmArchive,
@@ -268,11 +281,27 @@ const SessionRow: React.FC<{
   return (
     <div
       className={cn(
-        'flex items-center gap-1 transition-colors',
+        'relative flex items-center gap-1 transition-colors',
         active && !confirmingArchive && 'bg-[color-mix(in_srgb,var(--primary)_10%,transparent)]',
         confirmingArchive && 'bg-[color-mix(in_srgb,var(--destructive)_8%,transparent)]',
       )}
     >
+      {hasChildren && onToggleChildren ? (
+        <button
+          type="button"
+          className="absolute z-10 flex w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          style={{ left: Math.max(indent - 32, 2), top: 0, bottom: 0, touchAction: 'manipulation' }}
+          aria-label={expanded
+            ? t('sessions.sidebar.session.subsessions.collapse')
+            : t('sessions.sidebar.session.subsessions.expand')}
+          onClick={(event) => {
+            event.stopPropagation();
+            onToggleChildren();
+          }}
+        >
+          <RiArrowDownSLine className={cn('size-[18px] transition-transform duration-150', expanded ? 'rotate-0' : '-rotate-90')} />
+        </button>
+      ) : null}
       <button
         type="button"
         className={cn(
@@ -489,6 +518,8 @@ export const MobileSessionsSheet: React.FC<MobileSessionsSheetProps> = ({ open,
   const setProjectExpanded = useMobileSessionTreeStore((state) => state.setProjectExpanded);
   const setWorktreeExpanded = useMobileSessionTreeStore((state) => state.setWorktreeExpanded);
   const worktreeOrderByProject = useWorktreeOrderStore((state) => state.orderByProject);
+  const expandedParents = useMobileSessionExpansionStore((state) => state.expandedParents);
+  const toggleParent = useMobileSessionExpansionStore((state) => state.toggleParent);
   const [query, setQuery] = React.useState('');
   const [editingProjectId, setEditingProjectId] = React.useState<string | null>(null);
   const [confirmingArchiveSessionId, setConfirmingArchiveSessionId] = React.useState<string | null>(null);
@@ -699,30 +730,64 @@ export const MobileSessionsSheet: React.FC<MobileSessionsSheetProps> = ({ open,
     });
   };
 
-  // Paginated flat list of a bucket's sessions. Used for both root/project-level
-  // sessions and the sessions nested under a worktree group.
+  // Paginated, tree-aware list of a bucket's sessions: top-level sessions paginate,
+  // and a parent with subsessions can be expanded to reveal its children (nested,
+  // recursively). Pagination counts only top-level sessions.
   const renderBucketSessions = (node: ProjectNode, bucket: WorktreeBucket, indent: number) => {
     const bucketKey = `${node.project.id}::${bucket.key}`;
+
+    // Group children by parent within this bucket, and treat sessions whose parent
+    // is not in this bucket as top-level so nothing is hidden.
+    const idsInBucket = new Set(bucket.sessions.map((entry) => entry.id));
+    const childrenByParent = new Map<string, Session[]>();
+    for (const candidate of bucket.sessions) {
+      const parentId = getParentId(candidate);
+      if (parentId && idsInBucket.has(parentId)) {
+        const list = childrenByParent.get(parentId) ?? [];
+        list.push(candidate);
+        childrenByParent.set(parentId, list);
+      }
+    }
+    const roots = bucket.sessions.filter((entry) => {
+      const parentId = getParentId(entry);
+      return !parentId || !idsInBucket.has(parentId);
+    });
+
     const visibleCount = visibleCountByBucket.get(bucketKey) ?? SESSIONS_PER_BUCKET;
-    const visibleSessions = bucket.sessions.slice(0, visibleCount);
-    const remaining = bucket.sessions.length - visibleSessions.length;
-    const canShowFewer = bucket.sessions.length > SESSIONS_PER_BUCKET && remaining === 0;
-    return (
-      <div>
-        {visibleSessions.map((session) => (
+    const visibleRoots = roots.slice(0, visibleCount);
+    const remaining = roots.length - visibleRoots.length;
+    const canShowFewer = roots.length > SESSIONS_PER_BUCKET && remaining === 0;
+
+    const renderNode = (session: Session, rowIndent: number): React.ReactNode => {
+      const children = childrenByParent.get(session.id) ?? [];
+      const hasChildren = children.length > 0;
+      const expanded = Boolean(expandedParents[session.id]);
+      return (
+        <React.Fragment key={session.id}>
           <SessionRow
-            key={session.id}
             session={session}
             active={currentSessionId === session.id}
-            indent={indent}
+            indent={rowIndent}
+            hasChildren={hasChildren}
+            expanded={expanded}
+            onToggleChildren={hasChildren ? () => toggleParent(session.id) : undefined}
             confirmingArchive={confirmingArchiveSessionId === session.id}
             onSelect={() => handleSelectSession(session)}
             onRequestArchive={() => handleRequestArchive(session.id)}
             onConfirmArchive={() => void handleConfirmArchive(session)}
           />
-        ))}
+          {hasChildren && expanded
+            ? children.map((child) => renderNode(child, rowIndent + CHILD_INDENT_STEP))
+            : null}
+        </React.Fragment>
+      );
+    };
+
+    return (
+      <div>
+        {visibleRoots.map((session) => renderNode(session, indent))}
         {remaining > 0 ? (
-          <ShowMoreRow indent={indent} onClick={() => showMoreBucketSessions(bucketKey, visibleSessions.length)} />
+          <ShowMoreRow indent={indent} onClick={() => showMoreBucketSessions(bucketKey, visibleRoots.length)} />
         ) : null}
         {canShowFewer ? (
           <ShowFewerRow indent={indent} onClick={() => resetBucketVisibleCount(bucketKey)} />
diff --git a/packages/ui/src/stores/useMobileSessionExpansionStore.ts b/packages/ui/src/stores/useMobileSessionExpansionStore.ts
new file mode 100644
index 00000000..e0e2d9d2
--- /dev/null
+++ b/packages/ui/src/stores/useMobileSessionExpansionStore.ts
@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+
+/**
+ * In-memory expand state for parent sessions (with subsessions) in the mobile
+ * sessions sheet. Deliberately NOT persisted: it survives closing and
+ * reopening the sheet (the sheet unmounts on close, but this module-level store
+ * does not), and resets on a full page reload.
+ */
+type MobileSessionExpansionStore = {
+  expandedParents: Record<string, boolean>;
+  toggleParent: (sessionId: string) => void;
+};
+
+export const useMobileSessionExpansionStore = create<MobileSessionExpansionStore>((set) => ({
+  expandedParents: {},
+  toggleParent: (sessionId) =>
+    set((state) => {
+      const next = { ...state.expandedParents };
+      if (next[sessionId]) delete next[sessionId];
+      else next[sessionId] = true;
+      return { expandedParents: next };
+    }),
+}));