fix awkward stream list experience

This commit is contained in:
Arjun Patel
2026-06-13 11:18:09 -07:00
parent 9249cb4107
commit 03ec264c93
3 changed files with 6 additions and 16 deletions
+1 -1
View File
@@ -16,7 +16,7 @@ function ScrollArea({
> >
<ScrollAreaPrimitive.Viewport <ScrollAreaPrimitive.Viewport
data-slot="scroll-area-viewport" data-slot="scroll-area-viewport"
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1" className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!w-full"
> >
{children} {children}
</ScrollAreaPrimitive.Viewport> </ScrollAreaPrimitive.Viewport>
@@ -41,13 +41,12 @@ export function StreamListSidebar({
}, [currentIndex]); }, [currentIndex]);
return ( return (
<aside className="dark flex w-96 shrink-0 flex-col border-l border-white/10 bg-zinc-950"> <aside className="dark flex max-w-60 shrink-0 flex-col border-l border-white/10 bg-zinc-950">
<div className="flex shrink-0 items-center gap-2 border-b border-white/10 px-4 py-3"> <div className="flex shrink-0 items-center gap-2 border-b border-white/10 px-4 py-3">
<List className="size-3.5 text-white/40" /> <List className="size-3.5 text-white/40" />
<span className="truncate text-sm font-medium text-white/90"> <span className="truncate text-sm font-medium text-white/90 mr-auto">
{streamName} {items.length} messages
</span> </span>
<span className="ml-auto text-xs text-white/40">{items.length}</span>
<KeyHint <KeyHint
keys="L" keys="L"
onClick={onToggle} onClick={onToggle}
@@ -144,7 +143,7 @@ function ChatRowContent({ particle }: { particle: Particle }) {
switch (particle.type) { switch (particle.type) {
case 'text': case 'text':
return ( return (
<p className="line-clamp-3 text-xs leading-relaxed whitespace-pre-line text-white/70"> <p className="line-clamp-2 text-xs leading-relaxed whitespace-pre-line text-white/70">
{particle.properties.content} {particle.properties.content}
</p> </p>
); );
+1 -10
View File
@@ -14,20 +14,11 @@ function decideMode(
return caughtUp ? 'list' : 'player'; return caughtUp ? 'list' : 'player';
} }
/**
* Which mode a stream opens in: the player (autoplay catch-up) when there's
* unseen content, the browsable list when the user is fully caught up.
* Decided once on entry from the playback marker vs. the stream's last
* activity — browsing afterwards advances the marker, but the mode only
* changes via the user's toggle.
*/
export function useStreamViewMode( export function useStreamViewMode(
streamParticle: Particle & { type: 'stream' }, streamParticle: Particle & { type: 'stream' },
userId: string | undefined, userId: string | undefined,
): { mode: StreamViewMode; toggle: () => void } { ): { mode: StreamViewMode; toggle: () => void } {
const [mode, setMode] = useState<StreamViewMode>(() => const [mode, setMode] = useState<StreamViewMode>('player');
decideMode(streamParticle, userId),
);
// Re-decide when navigating between streams without an unmount. // Re-decide when navigating between streams without an unmount.
const [prevStreamId, setPrevStreamId] = useState(streamParticle.id); const [prevStreamId, setPrevStreamId] = useState(streamParticle.id);