diff options
| author | Owen Jacobson <owen@grimoire.ca> | 2025-05-06 00:51:06 -0400 |
|---|---|---|
| committer | Owen Jacobson <owen@grimoire.ca> | 2025-05-06 00:53:43 -0400 |
| commit | adc1aef3dbc6b9d5f08f215d527a37e7cc59ddd9 (patch) | |
| tree | 6196d24333d5caad458a0084ca1fbb4abdc6cd40 /ui/routes | |
| parent | 5243c91d3a7c325088845cef198c2eb8906babc0 (diff) | |
Un-nest `Message` from `MessageRun`.
A `MessageRun` is a visual container with a specific layout - bordered, with a drop shadow, with a name badge on the top-left, which is either positioned to the left (`other-message`) or right (`own-message`). It is content-agnostic.
This facilitates putting things besides live messages inside of a message run. As a side effect, this gets rid of ActiveChannel; most of what it was doing makes more sense living in the channel view's `+page.svelte`.
Diffstat (limited to 'ui/routes')
| -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} /> |