chat.sad.ovh/src/lib/components/app-sidebar.svelte

<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 * 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>

<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>
                <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>
	<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>

										    <FriendComponent onclick={(e) => {
     											e.preventDefault();
     											currentPage = friend.id;
														}} {friend}></FriendComponent>
										</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>