Files
beavergram/frontend/src/routes/app/[chatId]/+page.svelte
T

58 lines
1.4 KiB
Svelte

<script lang="ts">
import { untrack } from "svelte";
import ChatHeader from "#lib/components/ChatHeader.svelte";
import MessageList from "#lib/components/MessageList.svelte";
import { accounts } from "#lib/stores/accounts.svelte.js";
import { chats } from "#lib/stores/chats.svelte.js";
import { withoutMessage } from "#lib/stores/feed.svelte.js";
import { ui } from "#lib/stores/ui.svelte.js";
import { goto } from "$app/navigation";
import { page } from "$app/state";
const chatId = $derived(Number(page.params.chatId));
const linkedMessage = $derived(page.url.searchParams.get("message"));
$effect(() => {
if (accounts.selectedId === null) {
return;
}
chats.ensure(chatId);
chats.enrich(chatId);
});
$effect(() => {
if (linkedMessage === null) {
return;
}
const messageId = Number(linkedMessage);
untrack(() => {
if (Number.isSafeInteger(messageId)) {
ui.requestJump(chatId, messageId);
}
goto(withoutMessage(page.url), { replace: true, reset: false });
});
});
</script>
<div class="chat-view">
{#key chatId}
<ChatHeader {chatId} />
<div class="chat-body">
<MessageList {chatId} />
</div>
{/key}
</div>
<style lang="scss">
.chat-view {
display: flex;
flex-direction: column;
height: 100%;
}
.chat-body {
flex: 1;
min-height: 0;
}
</style>