feat(web): make the pinned 'in progress' section collapsible

This commit is contained in:
2026-08-02 21:26:30 +08:00
parent 597fd93b71
commit ee13e85e27
+25 -15
View File
@@ -1083,6 +1083,7 @@ export function SessionList(props: {
const [collapseOverrides, setCollapseOverrides] = useState<Map<string, boolean>>( const [collapseOverrides, setCollapseOverrides] = useState<Map<string, boolean>>(
() => new Map() () => new Map()
) )
const [runningSectionCollapsed, setRunningSectionCollapsed] = useState(false)
const autoExpandedSelectedSessionKeyRef = useRef<string | null>(null) const autoExpandedSelectedSessionKeyRef = useRef<string | null>(null)
const isGroupCollapsed = (group: SessionGroup): boolean => { const isGroupCollapsed = (group: SessionGroup): boolean => {
if (isFiltering) return false if (isFiltering) return false
@@ -1411,7 +1412,12 @@ export function SessionList(props: {
{runningSessions.length > 0 ? ( {runningSessions.length > 0 ? (
<div key="running-section"> <div key="running-section">
<div className="group/running flex min-w-0 w-full select-none items-center gap-2 rounded-lg py-1.5 pl-2 pr-2"> <div
className="group/running flex min-w-0 w-full select-none cursor-pointer items-center gap-2 rounded-lg py-1.5 pl-2 pr-2 transition-colors hover:bg-[var(--app-secondary-bg)]"
onClick={() => setRunningSectionCollapsed((value) => !value)}
title={t('sessions.runningSection')}
>
<ChevronIcon className="h-3.5 w-3.5 text-[var(--app-hint)] shrink-0" collapsed={runningSectionCollapsed} />
<span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center" aria-hidden="true"> <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center" aria-hidden="true">
<span className="h-1.5 w-1.5 rounded-full bg-[var(--app-badge-success-text)] animate-pulse" /> <span className="h-1.5 w-1.5 rounded-full bg-[var(--app-badge-success-text)] animate-pulse" />
</span> </span>
@@ -1422,20 +1428,24 @@ export function SessionList(props: {
({runningSessions.length}) ({runningSessions.length})
</span> </span>
</div> </div>
<div className="flex flex-col gap-0.5 ml-3 pl-1 py-1"> <div className="collapsible-panel" data-open={!runningSectionCollapsed || undefined}>
{runningSessions.map((s) => ( <div className="collapsible-inner">
<SessionItem <div className="flex flex-col gap-0.5 ml-3 pl-1 py-1">
key={s.id} {runningSessions.map((s) => (
session={s} <SessionItem
onSelect={props.onSelect} key={s.id}
showPath={false} session={s}
api={api} onSelect={props.onSelect}
selected={s.id === selectedSessionId} showPath={false}
showDetailedStatus={showDetailedStatus} api={api}
inRunningSection selected={s.id === selectedSessionId}
projectLabel={getGroupDisplayName(s.metadata?.worktree?.basePath ?? s.metadata?.path ?? 'Other')} showDetailedStatus={showDetailedStatus}
/> inRunningSection
))} projectLabel={getGroupDisplayName(s.metadata?.worktree?.basePath ?? s.metadata?.path ?? 'Other')}
/>
))}
</div>
</div>
</div> </div>
</div> </div>
) : null} ) : null}