feat: add project members settings page

Author: Slartibartfass2

src/lib/components/composites/project-components/settings/ProjectMemberListEntrySkeleton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { Skeleton } from "$lib/components/primitives/skeleton";
+</script>
+
+<div class="flex flex-col md:flex-row items-center justify-between px-4 gap-4">
+    <div class="flex flex-col gap-1">
+        <Skeleton class="h-6 w-40 rounded-full" />
+        <Skeleton class="h-5 w-52 rounded-full" />
+    </div>
+    <Skeleton class="h-7 w-40 rounded-full" />
+</div>

src/routes/project/[projectId]/settings/members/+page.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
+    import ProjectMemberListEntry from "$lib/components/composites/project-components/settings/ProjectMemberListEntry.svelte";
+    import ProjectMemberListEntrySkeleton from "$lib/components/composites/project-components/settings/ProjectMemberListEntrySkeleton.svelte";
     import ProjectSettingsLayout from "$lib/components/composites/project-components/settings/ProjectSettingsLayout.svelte";
+    import Button from "$lib/components/primitives/button/button.svelte";
+    import Separator from "$lib/components/primitives/separator/separator.svelte";
 
     let { data } = $props();
-    const { projectId, loadingProject } = data;
+    const { user, projectId, loadingProject, loadingMembers } = data;
+    const numberOfSkeletons = 7;
 </script>
 
 <svelte:head>
@@ -15,4 +20,42 @@
     {/await}
 </svelte:head>
 
-<ProjectSettingsLayout {projectId} selectedTab="members">Members content</ProjectSettingsLayout>
+<ProjectSettingsLayout {projectId} selectedTab="members">
+    {#if user.isAdmin}
+        <div class="flex flex-row items-center justify-between">
+            <h1>Manage Access</h1>
+            <Button>Add User</Button>
+        </div>
+    {:else}
+        <h1>Members</h1>
+    {/if}
+    <div class="flex flex-col w-full h-fit rounded-md border gap-3 py-2.5">
+        {#await loadingMembers}
+            {#each { length: numberOfSkeletons }, i}
+                <ProjectMemberListEntrySkeleton />
+                {#if i < numberOfSkeletons - 1}
+                    <Separator />
+                {/if}
+            {/each}
+        {:then members}
+            {#each members as member, i}
+                <!-- TODO: Replace isInvitationPending with actual value -->
+                <ProjectMemberListEntry
+                    {member}
+                    isCurrentUser={member.id === user.id}
+                    isInvitationPending={i === 2}
+                    isAdminView={user.isAdmin}
+                />
+                {#if i < members.length - 1}
+                    <Separator />
+                {/if}
+            {/each}
+        {:catch error}
+            <div class="m-auto py-4">
+                <span class="text-error">
+                    Loading Project Members failed{error ? `: ${error.message}` : "."}
+                </span>
+            </div>
+        {/await}
+    </div>
+</ProjectSettingsLayout>

src/routes/project/[projectId]/settings/members/+page.ts

@@ -0,0 +1,15 @@
+import { BackendController } from "$lib/controller/backend-controller";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = ({ params }) => {
+    const projectId = Number(params.projectId);
+    const projectController = BackendController.getInstance().project(projectId);
+    const loadingMembers = projectController.getMembers();
+
+    // attach noop-catch to handle promise rejection correctly (see https://svelte.dev/docs/kit/load#Streaming-with-promises)
+    loadingMembers.catch(() => {});
+
+    return {
+        loadingMembers,
+    };
+};