From 8a2c3d05c913faedd4f86e5554c2b8d11b829bf5 Mon Sep 17 00:00:00 2001
From: fucksophie <git@sad.ovh>
Date: Sun, 4 Jan 2026 13:55:09 +0200
Subject: [PATCH] som more ux!!

---
 src/lib/components/Friend.svelte      | 23 +++++++
 src/lib/components/app-sidebar.svelte | 99 +++++++++++++++++++++++----
 2 files changed, 107 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/Friend.svelte

diff --git a/src/lib/components/Friend.svelte b/src/lib/components/Friend.svelte
new file mode 100644
index 0000000..3df0aca
--- /dev/null
+++ b/src/lib/components/Friend.svelte
@@ -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>
diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte
index 55b1a08..2823e63 100644
--- a/src/lib/components/app-sidebar.svelte
+++ b/src/lib/components/app-sidebar.svelte
@@ -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}