arithefirst/svchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/routes/channel/[channel]/+page.svelte
View File

@ -11,6 +11,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import type { PageData } from './$types'; import type { PageData } from './$types';
import { blur } from 'svelte/transition';
const { data }: { data: PageData } = $props(); const { data }: { data: PageData } = $props();
@ -65,9 +66,18 @@
<MessageLengthDialog messageLength={msg.length} bind:showDialog /> <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 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">
{@render message(socket?.messages ?? [])} {#if data.messages.length != 0 || socket?.messages.length != 0}
{@render message(data.messages)} <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> </div>
<form bind:this={formref} class="flex w-full gap-1" onsubmit={submit}> <form bind:this={formref} class="flex w-full gap-1" onsubmit={submit}>
<textarea <textarea