som more ux!!
This commit is contained in:
parent
f9c5c1cb36
commit
8a2c3d05c9
2 changed files with 107 additions and 15 deletions
23
src/lib/components/Friend.svelte
Normal file
23
src/lib/components/Friend.svelte
Normal 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>
|
||||||
|
|
@ -2,9 +2,16 @@
|
||||||
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 Collapsible from "$lib/components/ui/collapsible/index.js";
|
||||||
import * as Sidebar from "$lib/components/ui/sidebar/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 MessagesSquare from "@lucide/svelte/icons/messages-square";
|
||||||
import MinusIcon from "@lucide/svelte/icons/minus";
|
import MinusIcon from "@lucide/svelte/icons/minus";
|
||||||
import PlusIcon from "@lucide/svelte/icons/plus";
|
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();
|
let { currentPage = $bindable<string|null>(), data, ...restProps }: {currentPage: string|null, data: { friends: Friend[], groups: Group[], servers: Server[] }}= $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -23,6 +30,79 @@
|
||||||
<span class="font-medium">chat.sad.ovh</span>
|
<span class="font-medium">chat.sad.ovh</span>
|
||||||
</div>
|
</div>
|
||||||
</Sidebar.MenuButton>
|
</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.MenuItem>
|
||||||
</Sidebar.Menu>
|
</Sidebar.Menu>
|
||||||
</Sidebar.Header>
|
</Sidebar.Header>
|
||||||
|
|
@ -47,22 +127,11 @@
|
||||||
{#each data.friends as friend (friend.id)}
|
{#each data.friends as friend (friend.id)}
|
||||||
<Sidebar.MenuSubItem>
|
<Sidebar.MenuSubItem>
|
||||||
<Sidebar.MenuSubButton>
|
<Sidebar.MenuSubButton>
|
||||||
<a onclick={(e) => {
|
|
||||||
|
<FriendComponent onclick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
currentPage = friend.id;
|
currentPage = friend.id;
|
||||||
}} href="##" class="flex items-center gap-2">
|
}} {friend}></FriendComponent>
|
||||||
<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.MenuSubButton>
|
||||||
</Sidebar.MenuSubItem>
|
</Sidebar.MenuSubItem>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue