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