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

implement a non-working version of the app, with no database and no

Browse source 
messages yet
This commit is contained in:
Soph :3 2026-01-02 18:53:48 +02:00
parent 8ba5b8ec90
commit f9c5c1cb36
90 changed files with 2278 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

142
src/lib/components/app-sidebar.svelte Normal file
View file

@ -0,0 +1,142 @@
<script lang="ts">
import { Status, type Friend, type Group, type Server } from "$lib";
import * as Collapsible from "$lib/components/ui/collapsible/index.js";
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
import MessagesSquare from "@lucide/svelte/icons/messages-square";
import MinusIcon from "@lucide/svelte/icons/minus";
import PlusIcon from "@lucide/svelte/icons/plus";
let { currentPage = $bindable<string|null>(), data, ...restProps }: {currentPage: string|null, data: { friends: Friend[], groups: Group[], servers: Server[] }}= $props();
</script>
<Sidebar.Root {...restProps}>
<Sidebar.Header>
<Sidebar.Menu>
<Sidebar.MenuItem>
<Sidebar.MenuButton size="lg">
<div
class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
>
<MessagesSquare class="size-4" />
</div>
<div class="flex flex-col gap-0.5 leading-none">
<span class="font-medium">chat.sad.ovh</span>
</div>
</Sidebar.MenuButton>
</Sidebar.MenuItem>
</Sidebar.Menu>
</Sidebar.Header>
<Sidebar.Content>
<Sidebar.Group>
<Sidebar.Menu>
<Collapsible.Root open={true} class="group/collapsible">
<Sidebar.MenuItem>
<Collapsible.Trigger>
<Sidebar.MenuButton>
Friends
<PlusIcon
class="ms-auto group-data-[state=open]/collapsible:hidden"
/>
<MinusIcon
class="ms-auto group-data-[state=closed]/collapsible:hidden"
/>
</Sidebar.MenuButton>
</Collapsible.Trigger>
<Collapsible.Content>
<Sidebar.MenuSub>
{#each data.friends as friend (friend.id)}
<Sidebar.MenuSubItem>
<Sidebar.MenuSubButton>
<a onclick={(e) => {
e.preventDefault();
currentPage = friend.id;
}} href="##" class="flex items-center gap-2">
<div class="relative">
<img src={friend.image} alt={friend.name} class="size-6 rounded-full" />
{#if friend.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 friend.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 friend.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>
{friend.name}
</a>
</Sidebar.MenuSubButton>
</Sidebar.MenuSubItem>
{/each}
</Sidebar.MenuSub>
</Collapsible.Content>
</Sidebar.MenuItem>
</Collapsible.Root>
<Collapsible.Root open={true} class="group/collapsible">
<Sidebar.MenuItem>
<Collapsible.Trigger>
<Sidebar.MenuButton>
Groups
<PlusIcon
class="ms-auto group-data-[state=open]/collapsible:hidden"
/>
<MinusIcon
class="ms-auto group-data-[state=closed]/collapsible:hidden"
/>
</Sidebar.MenuButton>
</Collapsible.Trigger>
<Collapsible.Content>
<Sidebar.MenuSub>
{#each data.groups as group (group.id)}
<Sidebar.MenuSubItem>
<Sidebar.MenuSubButton>
<a onclick={(e) => {
e.preventDefault();
currentPage = group.id;
}} href="##">
{group.name} ({group.members} members)
</a>
</Sidebar.MenuSubButton>
</Sidebar.MenuSubItem>
{/each}
</Sidebar.MenuSub>
</Collapsible.Content>
</Sidebar.MenuItem>
</Collapsible.Root>
<Collapsible.Root open={true} class="group/collapsible">
<Sidebar.MenuItem>
<Collapsible.Trigger>
<Sidebar.MenuButton>
Servers
<PlusIcon
class="ms-auto group-data-[state=open]/collapsible:hidden"
/>
<MinusIcon
class="ms-auto group-data-[state=closed]/collapsible:hidden"
/>
</Sidebar.MenuButton>
</Collapsible.Trigger>
<Collapsible.Content>
<Sidebar.MenuSub>
{#each data.servers as server (server.id)}
<Sidebar.MenuSubItem>
<Sidebar.MenuSubButton>
<a onclick={(e) => {
e.preventDefault();
currentPage = server.id;
}} href="##" class="flex items-center gap-2">
<img src={server.image} alt={server.name} class="size-6 rounded-full" />
{server.name}
</a>
</Sidebar.MenuSubButton>
</Sidebar.MenuSubItem>
{/each}
</Sidebar.MenuSub>
</Collapsible.Content>
</Sidebar.MenuItem>
</Collapsible.Root>
</Sidebar.Menu>
</Sidebar.Group>
</Sidebar.Content>
<Sidebar.Rail />
</Sidebar.Root>