BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prioritize session sidebar status indicators

Browse Source 
Prevents pinned icons from crowding live indicators
Shows chevrons on hover when status or pin takes priority
This commit is contained in:
Bohdan Triapitsyn
2026-06-24 18:45:26 +03:00
parent 569342b3c2
commit c97d5c79c1
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/session/sidebar/SessionNodeItem.tsx
+15 -6
View File
@@ -520,19 +520,28 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
title={t('sessions.sidebar.session.status.unread')} title={t('sessions.sidebar.session.status.unread')}
/> />
); );
const leadingIndicators = showStatusMarker || isPinnedSession ? ( const hideLeadingIndicatorOnHover = !alwaysShowActions && hasChildren && (showStatusMarker || isPinnedSession);
const showPinnedMarker = isPinnedSession && !showStatusMarker;
const pinnedMarkerContent = (
<Icon
name="pushpin"
className="h-3 w-3 flex-shrink-0 text-primary"
aria-label={t('sessions.sidebar.session.status.pinned')}
/>
);
const leadingIndicators = showStatusMarker || showPinnedMarker ? (
<span <span
className={cn( className={cn(
'pointer-events-none absolute inline-flex h-3.5 items-center justify-center gap-0.5 transition-opacity', 'pointer-events-none absolute left-0.5 inline-flex h-3.5 w-3.5 items-center justify-center transition-opacity',
isMinimalMode ? 'top-1/2 -translate-y-1/2' : 'top-[14.5px] -translate-y-1/2', isMinimalMode ? 'top-1/2 -translate-y-1/2' : 'top-[14.5px] -translate-y-1/2',
showStatusMarker && isPinnedSession ? 'left-[-6px] w-6' : 'left-0.5 w-3.5', hideLeadingIndicatorOnHover ? 'opacity-100 group-hover:opacity-0 group-focus-within:opacity-0' : '',
hasChildren && !alwaysShowActions ? 'opacity-100 group-hover:opacity-0 group-focus-within:opacity-0' : '',
)} )}
> >
{showStatusMarker ? statusMarkerContent : null} {showStatusMarker ? statusMarkerContent : null}
{isPinnedSession ? <Icon name="pushpin" className="h-3 w-3 flex-shrink-0 text-primary" aria-label={t('sessions.sidebar.session.status.pinned')}/> : null} {showPinnedMarker ? pinnedMarkerContent : null}
</span> </span>
) : null; ) : null;
const hideChevronUntilHover = hasChildren && !alwaysShowActions && (showStatusMarker || isPinnedSession);
const subsessionChevron = hasChildren ? ( const subsessionChevron = hasChildren ? (
<span <span
role="button" role="button"
@@ -556,7 +565,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
: inlineSubsessionChevron : inlineSubsessionChevron
? 'relative mr-0.5 shrink-0' ? 'relative mr-0.5 shrink-0'
: cn('absolute left-0.5', isMinimalMode ? 'top-1/2 -translate-y-1/2' : 'top-[14.5px] -translate-y-1/2'), : cn('absolute left-0.5', isMinimalMode ? 'top-1/2 -translate-y-1/2' : 'top-[14.5px] -translate-y-1/2'),
!metadataSubsessionChevron && !inlineSubsessionChevron && isMinimalMode && showStatusMarker && !alwaysShowActions !metadataSubsessionChevron && !inlineSubsessionChevron && hideChevronUntilHover
? 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto' ? 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto'
: '', : '',
)} )}