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
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}
</ScrollAreaPrimitive.Viewport>
@@ -41,13 +41,12 @@ export function StreamListSidebar({
}, [currentIndex]);
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">
<List className="size-3.5 text-white/40" />
<span className="truncate text-sm font-medium text-white/90">
{streamName}
<span className="truncate text-sm font-medium text-white/90 mr-auto">
{items.length} messages
</span>
<span className="ml-auto text-xs text-white/40">{items.length}</span>
<KeyHint
keys="L"
onClick={onToggle}
@@ -144,7 +143,7 @@ function ChatRowContent({ particle }: { particle: Particle }) {
switch (particle.type) {
case 'text':
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}
</p>
);
+1 -10
View File
@@ -14,20 +14,11 @@ function decideMode(
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(
streamParticle: Particle & { type: 'stream' },
userId: string | undefined,
): { mode: StreamViewMode; toggle: () => void } {
const [mode, setMode] = useState<StreamViewMode>(() =>
decideMode(streamParticle, userId),
);
const [mode, setMode] = useState<StreamViewMode>('player');
// Re-decide when navigating between streams without an unmount.
const [prevStreamId, setPrevStreamId] = useState(streamParticle.id);