diff options
Diffstat (limited to 'ui/routes/(app)/ch')
| -rw-r--r-- | ui/routes/(app)/ch/[channel]/+page.svelte | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte index abec00d..ccf455c 100644 --- a/ui/routes/(app)/ch/[channel]/+page.svelte +++ b/ui/routes/(app)/ch/[channel]/+page.svelte @@ -1,8 +1,9 @@ <script> import { DateTime } from 'luxon'; import { page } from '$app/state'; - import ActiveChannel from '$lib/components/ActiveChannel.svelte'; import MessageInput from '$lib/components/MessageInput.svelte'; + import MessageRun from '$lib/components/MessageRun.svelte'; + import Message from '$lib/components/Message.svelte'; import { runs } from '$lib/runs.js'; const { data } = $props(); @@ -50,6 +51,12 @@ setLastRead(); }); + $effect(() => { + // This is just to force it to track messageRuns. + const _ = messageRuns; + document.querySelector('.message-run:last-child .message:last-child')?.scrollIntoView(); + }); + function handleKeydown(event) { if (event.key === 'Escape') { setLastRead(); // TODO: pass in "last message DT"? @@ -75,7 +82,19 @@ <svelte:window onkeydown={handleKeydown} /> <div class="active-channel" {onscroll} bind:this={activeChannel}> - <ActiveChannel {messageRuns} {deleteMessage} /> + {#each messageRuns as { sender, ownMessage, messages }} + <MessageRun + {sender} + class={{ + ['own-message']: ownMessage, + ['other-message']: !ownMessage + }} + > + {#each messages as message} + <Message {...message} editable={ownMessage} {deleteMessage} /> + {/each} + </MessageRun> + {/each} </div> <div class="create-message"> <MessageInput {sendMessage} /> |