sophie/chat.sad.ovh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add message rendering, fix sse cancling, add user id copying

Browse source
This commit is contained in:
Soph :3 2026-01-04 21:41:24 +02:00
parent f1539bdffa
commit 3a0f096ade
6 changed files with 155 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/lib/components/extra/User.svelte
View file

@ -1,22 +1,34 @@
<script lang="ts">
import { Status, type UserWithStatus } from '$lib';
import { Status, type UserWithStatus } from '$lib';
const {
onclick,
user
}: { onclick?: (e: MouseEvent) => void, user: UserWithStatus } = $props();
const { onclick, user }: { onclick?: (e: MouseEvent) => void; user: UserWithStatus } = $props();
</script>
<a {onclick} href="##" class="flex items-center gap-2">
<div class="relative">
<img src={"https://api.dicebear.com/7.x/pixel-art/svg?seed=" + user.username} alt={user.username} class="size-6 rounded-full" />
{#if user.status === Status.OFFLINE}
<span class="absolute bottom-0 end-0 block size-2 rounded-full bg-gray-500 ring-1 ring-white"></span>
{:else if user.status === Status.DND}
<span class="absolute bottom-0 end-0 block size-2 rounded-full bg-red-500 ring-1 ring-white"></span>
{:else if user.status === Status.ONLINE}
<span class="absolute bottom-0 end-0 block size-2 rounded-full bg-green-500 ring-1 ring-white"></span>
{/if}
</div>
{user.username}
<a
{onclick}
oncontextmenu={async (e) => {
e.preventDefault();
await navigator.clipboard.writeText(user.id);
}}
href="##"
class="flex items-center gap-2"
>
<div class="relative">
<img
src={'https://api.dicebear.com/7.x/pixel-art/svg?seed=' + user.username}
alt={user.username}
class="size-6 rounded-full"
/>
{#if user.status === Status.OFFLINE}
<span class="absolute end-0 bottom-0 block size-2 rounded-full bg-gray-500 ring-1 ring-white"
></span>
{:else if user.status === Status.DND}
<span class="absolute end-0 bottom-0 block size-2 rounded-full bg-red-500 ring-1 ring-white"
></span>
{:else if user.status === Status.ONLINE}
<span class="absolute end-0 bottom-0 block size-2 rounded-full bg-green-500 ring-1 ring-white"
></span>
{/if}
</div>
{user.username}
</a>

19
src/lib/utils.ts
View file

@ -4,6 +4,25 @@ import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
export function formatTimestamp(dateString: string) {
const date = new Date(dateString);
const now = new Date();
const isToday =
date.getDate() === now.getDate() &&
date.getMonth() === now.getMonth() &&
date.getFullYear() === now.getFullYear();
const pad = (n: number) => n.toString().padStart(2, '0');
if (isToday) {
return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
} else {
return `${pad(date.getDate())}/${pad(date.getMonth() + 1)}/${date.getFullYear()}, ${pad(
date.getHours()
)}:${pad(date.getMinutes())}`;
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;