fix awkward stream list experience
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user