42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
/**
|
|
* StreamView — scrollable message log
|
|
*/
|
|
|
|
import { Component, For, createEffect, onMount } from "solid-js";
|
|
import { visibleMessages, useJournalStream } from "../stores/journalStream";
|
|
import { StreamMessageCard } from "./StreamMessage";
|
|
|
|
export const StreamView: Component = () => {
|
|
const stream = useJournalStream();
|
|
let containerRef: HTMLDivElement | undefined;
|
|
|
|
// Auto-scroll to bottom on new messages
|
|
const messages = () => visibleMessages();
|
|
|
|
createEffect(() => {
|
|
void messages().length; // track
|
|
if (!containerRef) return;
|
|
containerRef.scrollTop = containerRef.scrollHeight;
|
|
});
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
class="h-full overflow-y-auto px-3 py-2 space-y-2 bg-gray-50"
|
|
>
|
|
<For each={messages()}>
|
|
{(msg) => <StreamMessageCard message={msg} />}
|
|
</For>
|
|
<Show when={messages().length === 0}>
|
|
<p class="text-center text-gray-400 text-xs py-8">
|
|
{stream.connected
|
|
? "No messages yet. Start by posting something."
|
|
: "Connect to a session to see messages."}
|
|
</p>
|
|
</Show>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
import { Show } from "solid-js";
|