diff options
| -rw-r--r-- | ui/lib/components/ActiveChannel.svelte | 15 | ||||
| -rw-r--r-- | ui/lib/components/MessageRun.svelte | 10 | ||||
| -rw-r--r-- | ui/routes/(app)/ch/[channel]/+page.svelte | 23 |
3 files changed, 24 insertions, 24 deletions
diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte deleted file mode 100644 index 30b8385..0000000 --- a/ui/lib/components/ActiveChannel.svelte +++ /dev/null @@ -1,15 +0,0 @@ -<script> - import MessageRun from './MessageRun.svelte'; - - let { messageRuns, deleteMessage = async (id) => {} } = $props(); - - $effect(() => { - // This is just to force it to track messageRuns. - const _ = messageRuns; - document.querySelector('.message-run:last-child .message:last-child').scrollIntoView(); - }); -</script> - -{#each messageRuns as { sender, ownMessage, messages }} - <MessageRun {sender} {ownMessage} {messages} {deleteMessage} /> -{/each} diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte index f1facd3..f6e7ee1 100644 --- a/ui/lib/components/MessageRun.svelte +++ b/ui/lib/components/MessageRun.svelte @@ -1,14 +1,10 @@ <script> - import Message from '$lib/components/Message.svelte'; - - let { sender, messages, ownMessage, deleteMessage = async (id) => {} } = $props(); + let { sender, children, class: cssClass } = $props(); </script> -<div class="message-run" class:own-message={ownMessage} class:other-message={!ownMessage}> +<div class={['message-run', cssClass]}> <span class="username"> @{sender}: </span> - {#each messages as message} - <Message {...message} editable={ownMessage} {deleteMessage} /> - {/each} + {@render children?.()} </div> 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} /> |