add members sidebar + endpoint

src/lib/components/member-sidebar.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import UserRoundPlus from '@lucide/svelte/icons/user-round-plus';
+  import UserRoundMinus from '@lucide/svelte/icons/user-round-minus';
+  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+  import { useSidebar } from '$lib/components/ui/sidebar/context.svelte.js';
+  import { onMount } from 'svelte';
+  import User from './extra/User.svelte';
+  import type { SessionValidationResult } from '$lib/server/auth';
+  import { ServerID, type UserWithStatus } from '$lib';
+
+  // Props for the member sidebar.
+  let {
+    open = $bindable(true),
+    members = $bindable<UserWithStatus[]>([]),
+    user,
+    currentEntityId = $bindable<string | null>(null)
+  }: {
+    open: boolean;
+    members: UserWithStatus[];
+    user: SessionValidationResult['user'];
+    currentEntityId: string | null;
+  } = $props();
+
+  let sidebar_probably = useSidebar();
+
+  $effect(() => {
+    if (sidebar_probably.open != open) {
+      sidebar_probably.setOpen(open);
+    }
+  });
+</script>
+
+<Sidebar.Root side="right">
+  <Sidebar.Content>
+    <Sidebar.Group>
+      <Sidebar.GroupLabel>Members</Sidebar.GroupLabel>
+
+      <Sidebar.GroupContent>
+        <Sidebar.Menu>
+          {#each members as member (member.id)}
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton>
+                {#snippet child({ props })}
+                  <User user={member} />
+                {/snippet}
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+          {/each}
+        </Sidebar.Menu>
+      </Sidebar.GroupContent>
+    </Sidebar.Group>
+
+    {#if currentEntityId && ServerID.is(currentEntityId) && user}
+      <Sidebar.Group>
+        <Sidebar.GroupLabel>Server Actions</Sidebar.GroupLabel>
+
+        <Sidebar.GroupContent>
+          <Sidebar.Menu>
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton>
+                {#snippet child({ props })}
+                  <form method="POST" action="?/inviteUser" class="w-full">
+                    <input type="hidden" name="serverId" value={currentEntityId} />
+                    <button type="submit" class="flex w-full items-center gap-2" {...props}>
+                      <UserRoundPlus class="size-4" />
+                      <span>Invite User</span>
+                    </button>
+                  </form>
+                {/snippet}
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+
+            {#if user.id === members.find((m) => m.id === currentEntityId)?.ownerId}
+              <Sidebar.MenuItem>
+                <Sidebar.MenuButton>
+                  {#snippet child({ props })}
+                    <form method="POST" action="?/leaveServer" class="w-full">
+                      <input type="hidden" name="serverId" value={currentEntityId} />
+                      <button type="submit" class="flex w-full items-center gap-2" {...props}>
+                        <UserRoundMinus class="size-4" />
+                        <span>Leave Server</span>
+                      </button>
+                    </form>
+                  {/snippet}
+                </Sidebar.MenuButton>
+              </Sidebar.MenuItem>
+            {/if}
+          </Sidebar.Menu>
+        </Sidebar.GroupContent>
+      </Sidebar.Group>
+    {/if}
+  </Sidebar.Content>
+</Sidebar.Root>