add members from group, remove members from group, change title of group

src/lib/components/member-sidebar.svelte

@@ -9,22 +9,26 @@
   import {
     GroupID,
     ServerID,
+    type OverviewData,
     type OverviewGroup,
     type OverviewServer,
     type UserWithStatus
   } from '$lib';
   import Button from './ui/button/button.svelte';
+  import Input from './ui/input/input.svelte';
 
   // Props for the member sidebar.
   let {
     open = $bindable(true),
     members = $bindable<UserWithStatus[]>([]),
     user,
+    data,
     currentEntity,
     currentEntityId = $bindable<string | null>(null)
   }: {
     open: boolean;
     members: UserWithStatus[];
+    data: OverviewData;
     user: SessionValidationResult['user'];
     currentEntity: OverviewGroup | OverviewServer;
     currentEntityId: string | null;
@@ -104,15 +108,59 @@
                   </Tabs.Content>
                 {/if}
                 <Tabs.Content value="users">
-                  <div class="space-y-4 p-2">
+                  <div class="space-y-6 p-2">
                     {#if (currentEntity as OverviewGroup).permissions.addMembers || user.id == currentEntity.ownerId}
-                      <h1>you have permission to add members</h1>
+                      {@const addableMembers = data.friends.filter(
+                        (z) => !members.find((h) => h.id == z.id)
+                      )}
+
+                      {#if addableMembers.length !== 0}
+                        <form method="POST" action="?/addMembers" class="space-y-4">
+                          <input type="hidden" name="groupId" value={currentEntityId} />
+
+                          <h1>Add members</h1>
+
+                          {#each addableMembers as friend (friend.id)}
+                            <label class="flex items-center gap-2">
+                              <input type="checkbox" name="memberIds" value={friend.id} />
+                              <User crown={false} user={friend} />
+                            </label>
+                          {/each}
+
+                          <Button type="submit">Add selected members</Button>
+                        </form>
+                        <hr />
+                      {/if}
                     {/if}
+
                     {#if (currentEntity as OverviewGroup).permissions.changeTitle || user.id == currentEntity.ownerId}
-                      <h1>you have permission to change title</h1>
+                      <form method="POST" action="?/changeTitle" class="space-y-4">
+                        <input type="hidden" name="groupId" value={currentEntityId} />
+
+                        <h1>Change title</h1>
+
+                        <Input name="title" placeholder="New group title" required />
+
+                        <Button type="submit">Change title</Button>
+                      </form>
+                      <hr />
                     {/if}
+
                     {#if (currentEntity as OverviewGroup).permissions.removeMembers || user.id == currentEntity.ownerId}
-                      <h1>you have permission to remove members</h1>
+                      <form method="POST" action="?/removeMembers" class="space-y-4">
+                        <input type="hidden" name="groupId" value={currentEntityId} />
+
+                        <h1>Remove members</h1>
+
+                        {#each members.filter((z) => z.id != currentEntity.ownerId) as member (member.id)}
+                          <label class="flex items-center gap-2">
+                            <input type="checkbox" name="memberIds" value={member.id} />
+                            <User crown={false} user={member} />
+                          </label>
+                        {/each}
+
+                        <Button type="submit">Remove selected members</Button>
+                      </form>
                     {/if}
                   </div>
                 </Tabs.Content>

src/lib/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

src/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+	import InfoIcon from "@lucide/svelte/icons/info";
+	import Loader2Icon from "@lucide/svelte/icons/loader-2";
+	import OctagonXIcon from "@lucide/svelte/icons/octagon-x";
+	import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
+
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	{...restProps}
+	>{#snippet loadingIcon()}
+		<Loader2Icon class="size-4 animate-spin" />
+	{/snippet}
+	{#snippet successIcon()}
+		<CircleCheckIcon class="size-4" />
+	{/snippet}
+	{#snippet errorIcon()}
+		<OctagonXIcon class="size-4" />
+	{/snippet}
+	{#snippet infoIcon()}
+		<InfoIcon class="size-4" />
+	{/snippet}
+	{#snippet warningIcon()}
+		<TriangleAlertIcon class="size-4" />
+	{/snippet}
+</Sonner>