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

som more ux!!

Browse source
This commit is contained in:
Soph :3 2026-01-04 13:55:09 +02:00
parent f9c5c1cb36
commit 8a2c3d05c9
2 changed files with 107 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/lib/components/Friend.svelte Normal file
View file

@ -0,0 +1,23 @@
<script lang="ts">
import { Status, type Friend } from '$lib';
const {
onclick,
friend
}: { onclick?: (e: MouseEvent) => void, friend: Friend } = $props();
</script>
<a {onclick} 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>

99
src/lib/components/app-sidebar.svelte
View file

@ -1,10 +1,17 @@
<script lang="ts">
import { Status, type Friend, type Group, type Server } from "$lib";
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 * as Dialog from "$lib/components/ui/dialog/index.js";
import MessagesSquare from "@lucide/svelte/icons/messages-square";
import MinusIcon from "@lucide/svelte/icons/minus";
import PlusIcon from "@lucide/svelte/icons/plus";
import UserRoundPlus from '@lucide/svelte/icons/user-round-plus';
import UsersRound from '@lucide/svelte/icons/users-round';
import CirclePlus from '@lucide/svelte/icons/circle-plus';
import Input from "./ui/input/input.svelte";
import Button, { buttonVariants } from "./ui/button/button.svelte";
import FriendComponent from "./Friend.svelte";
let { currentPage = $bindable<string|null>(), data, ...restProps }: {currentPage: string|null, data: { friends: Friend[], groups: Group[], servers: Server[] }}= $props();
</script>
@ -23,6 +30,79 @@
<span class="font-medium">chat.sad.ovh</span>
</div>
</Sidebar.MenuButton>
<div class="w-full flex gap-2 justify-center">
<Dialog.Root>
<Dialog.Trigger>
<Button variant="outline" size="icon">
<UserRoundPlus />
</Button>
</Dialog.Trigger>
<Dialog.Content class="sm:max-w-[425px]">
<Dialog.Header>
<Dialog.Title>Add a friend</Dialog.Title>
<Dialog.Description>
Add a friend using their username.
</Dialog.Description>
</Dialog.Header>
<Input></Input>
<Dialog.Footer>
<Dialog.Close class={buttonVariants({ variant: "outline" })}>Cancel</Dialog.Close>
<Button type="submit">Send request.</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
<Dialog.Root>
<Dialog.Trigger>
<Button variant="outline" size="icon">
<UsersRound />
</Button>
</Dialog.Trigger>
<Dialog.Content class="sm:max-w-[425px]">
<Dialog.Header>
<Dialog.Title>Create a group</Dialog.Title>
<Dialog.Description>
Add friends into your group!
</Dialog.Description>
</Dialog.Header>
{#each data.friends as friend (friend.id)}
<FriendComponent onclick={(e) => {
e.preventDefault();
currentPage = friend.id;
}} {friend}></FriendComponent>
{/each}
<Dialog.Footer>
<Dialog.Close class={buttonVariants({ variant: "outline" })}>Cancel</Dialog.Close>
<Button type="submit">Create group</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
<Dialog.Root>
<Dialog.Trigger>
<Button variant="outline" size="icon">
<CirclePlus />
</Button>
</Dialog.Trigger>
<Dialog.Content class="sm:max-w-[425px]">
<Dialog.Header>
<Dialog.Title>Join a server</Dialog.Title>
<Dialog.Description>
Enter it's link into the input box here.
</Dialog.Description>
</Dialog.Header>
<Input></Input>
<Dialog.Footer>
<Dialog.Close class={buttonVariants({ variant: "outline" })}>Cancel</Dialog.Close>
<Button type="submit">Create group</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
</div>
</Sidebar.MenuItem>
</Sidebar.Menu>
</Sidebar.Header>
@ -47,22 +127,11 @@
{#each data.friends as friend (friend.id)}
<Sidebar.MenuSubItem>
<Sidebar.MenuSubButton>
<a onclick={(e) => {
<FriendComponent 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>
}} {friend}></FriendComponent>
</Sidebar.MenuSubButton>
</Sidebar.MenuSubItem>
{/each}