feat: Add 'No messages yet!' to empty channels

This commit is contained in:
April Hall 2025-02-08 23:05:15 -05:00
parent 5e822fcba6
commit 9095251cb8
Signed by: arithefirst
GPG Key ID: 4508A15C4DB91C5B

View File

@ -11,6 +11,7 @@
import { onMount } from 'svelte';
import { v4 as uuidv4 } from 'uuid';
import type { PageData } from './$types';
import { blur } from 'svelte/transition';
const { data }: { data: PageData } = $props();
@ -65,10 +66,19 @@
<MessageLengthDialog messageLength={msg.length} bind:showDialog />
<div class="flex h-full flex-1 flex-col items-center justify-center gap-1 rounded-lg shadow-sm">
<div class="flex w-full flex-auto flex-grow flex-col-reverse overflow-x-hidden overflow-y-scroll rounded-lg border">
<div class="relative size-full flex-grow rounded-lg border">
{#if data.messages.length != 0 || socket?.messages.length != 0}
<div class="flex size-full flex-auto flex-col-reverse overflow-x-hidden overflow-y-scroll">
{@render message(socket?.messages ?? [])}
{@render message(data.messages)}
</div>
{:else}
<div class="abs-center text-center text-muted-foreground" in:blur={{ delay: 100 }} out:blur>
<h1 class="text-4xl">No messages yet!</h1>
<h2 class="mt-2 text-sm">Send a message to get the conversation started.</h2>
</div>
{/if}
</div>
<form bind:this={formref} class="flex w-full gap-1" onsubmit={submit}>
<textarea
placeholder="Type Here"