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

almost finish status support everywhere else, group setting start impl

Browse source
This commit is contained in:
Soph :3 2026-01-08 14:47:07 +02:00
parent 6b47888514
commit 92a95cb365
14 changed files with 770 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,34 +1,53 @@
<script lang="ts">
import { Status, type UserWithStatus } from '$lib';
import Crown from '@lucide/svelte/icons/crown';
const { onclick, user }: { onclick?: (e: MouseEvent) => void; user: UserWithStatus } = $props();
const {
onclick,
user,
crown
}: { crown: boolean; onclick?: (e: MouseEvent) => void; user: UserWithStatus } = $props();
</script>
<a
{onclick}
oncontextmenu={async (e) => {
e.preventDefault();
await navigator.clipboard.writeText(user.id);
}}
href="##"
class="flex items-center gap-2"
>
<div class="relative">
<div class="flex flex-row gap-2">
<div>
<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 class="relative">
{#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>
</div>
{user.username}
</a>
<div>
<a
{onclick}
oncontextmenu={async (e) => {
e.preventDefault();
await navigator.clipboard.writeText(user.id);
}}
href="##"
class="flex items-center gap-2"
>
{user.username}
{#if crown}
<Crown></Crown>
{/if}
</a>
<div class="pl-2 text-xs text-gray-400 italic">
{user.statusMessage}
</div>
</div>
</div>