From fee36d2d9c6dd5eb6fe4d8dcd1abffbf0545e935 Mon Sep 17 00:00:00 2001
From: Felix Schlegel <felix.schlegel@gmx.de>
Date: Tue, 21 Jan 2025 00:19:42 +0100
Subject: [PATCH] feat: add basic project settings layout

---
 .../ProjectSettingsLayout.svelte              | 61 +++++++++++++++++++
 .../[projectId]/settings/general/+page.svelte |  6 +-
 .../[projectId]/settings/members/+page.svelte |  6 +-
 .../[projectId]/settings/review/+page.svelte  |  6 +-
 .../[projectId]/settings/slr/+page.svelte     |  6 +-
 5 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/composites/project-components/ProjectSettingsLayout.svelte

diff --git a/src/lib/components/composites/project-components/ProjectSettingsLayout.svelte b/src/lib/components/composites/project-components/ProjectSettingsLayout.svelte
new file mode 100644
index 00000000..a0c07e62
--- /dev/null
+++ b/src/lib/components/composites/project-components/ProjectSettingsLayout.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Settings from "lucide-svelte/icons/settings";
+    import Users from "lucide-svelte/icons/users";
+    import Snowflake from "lucide-svelte/icons/snowflake";
+    import ClipboardCheck from "lucide-svelte/icons/clipboard-check";
+    import { cn } from "$lib/utils/shadcn-helper";
+    import Separator from "$lib/components/primitives/separator/separator.svelte";
+
+    type TabValue = (typeof tabs)[number]["value"];
+    interface Props {
+        projectId: number;
+        selectedTab: TabValue;
+        children?: Snippet | undefined;
+    }
+
+    let { projectId, selectedTab, children = undefined }: Props = $props();
+
+    const tabs = [
+        {
+            icon: Settings,
+            label: "General",
+            value: "general",
+            href: `/project/${projectId}/settings/general`,
+        },
+        {
+            icon: Users,
+            label: "Members",
+            value: "members",
+            href: `/project/${projectId}/settings/members`,
+        },
+        { icon: Snowflake, label: "SLR", value: "slr", href: `/project/${projectId}/settings/slr` },
+        {
+            icon: ClipboardCheck,
+            label: "Review",
+            value: "review",
+            href: `/project/${projectId}/settings/review`,
+        },
+    ] as const;
+</script>
+
+<main class="flex flex-row w-full h-full px-[3.75rem] py-2.5 gap-4">
+    <div class="flex flex-col w-full max-w-[20%] h-full px-1.5 py-2.5 gap-2.5">
+        {#each tabs as tab}
+            <a
+                class={cn(
+                    "flex flex-row w-full items-center h-12 px-3 gap-3",
+                    tab.value === selectedTab ? "bg-slate-200 rounded-lg" : "",
+                )}
+                href={tab.href}
+            >
+                <tab.icon class="size-4" />
+                <span>{tab.label}</span>
+            </a>
+        {/each}
+    </div>
+    <Separator orientation="vertical" />
+    <div class="flex flex-col w-full h-full p-2.5 gap-3">
+        {@render children?.()}
+    </div>
+</main>
diff --git a/src/routes/project/[projectId]/settings/general/+page.svelte b/src/routes/project/[projectId]/settings/general/+page.svelte
index a6a81940..314e9732 100644
--- a/src/routes/project/[projectId]/settings/general/+page.svelte
+++ b/src/routes/project/[projectId]/settings/general/+page.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
+    import ProjectSettingsLayout from "$lib/components/composites/project-components/ProjectSettingsLayout.svelte";
+
     let { data } = $props();
-    const { project } = data;
+    const { projectId, loadingProject } = data;
 </script>
 
 <svelte:head>
     <title>General | Settings | {project.name}</title>
 </svelte:head>
 <h4>Project {project.id} Settings - General</h4>
+
+<ProjectSettingsLayout {projectId} selectedTab="general">General content</ProjectSettingsLayout>
diff --git a/src/routes/project/[projectId]/settings/members/+page.svelte b/src/routes/project/[projectId]/settings/members/+page.svelte
index 834bef0b..f564eda4 100644
--- a/src/routes/project/[projectId]/settings/members/+page.svelte
+++ b/src/routes/project/[projectId]/settings/members/+page.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
+    import ProjectSettingsLayout from "$lib/components/composites/project-components/ProjectSettingsLayout.svelte";
+
     let { data } = $props();
-    const { project } = data;
+    const { projectId, loadingProject } = data;
 </script>
 
 <svelte:head>
     <title>Members | Settings | {project.name}</title>
 </svelte:head>
 <h4>Project {project.id} Settings - Members</h4>
+
+<ProjectSettingsLayout {projectId} selectedTab="members">Members content</ProjectSettingsLayout>
diff --git a/src/routes/project/[projectId]/settings/review/+page.svelte b/src/routes/project/[projectId]/settings/review/+page.svelte
index bcb358f6..f8142764 100644
--- a/src/routes/project/[projectId]/settings/review/+page.svelte
+++ b/src/routes/project/[projectId]/settings/review/+page.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
+    import ProjectSettingsLayout from "$lib/components/composites/project-components/ProjectSettingsLayout.svelte";
+
     let { data } = $props();
-    const { project } = data;
+    const { projectId, loadingProject } = data;
 </script>
 
 <svelte:head>
     <title>Review | Settings | {project.name}</title>
 </svelte:head>
 <h4>Project {project.id} Settings - Review</h4>
+
+<ProjectSettingsLayout {projectId} selectedTab="review">Review content</ProjectSettingsLayout>
diff --git a/src/routes/project/[projectId]/settings/slr/+page.svelte b/src/routes/project/[projectId]/settings/slr/+page.svelte
index 80bd5fbb..dd40abb1 100644
--- a/src/routes/project/[projectId]/settings/slr/+page.svelte
+++ b/src/routes/project/[projectId]/settings/slr/+page.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
+    import ProjectSettingsLayout from "$lib/components/composites/project-components/ProjectSettingsLayout.svelte";
+
     let { data } = $props();
-    const { project } = data;
+    const { projectId, loadingProject } = data;
 </script>
 
 <svelte:head>
     <title>SLR | Settings | {project.name}</title>
 </svelte:head>
 <h4>Project {project.id} Settings - SLR</h4>
+
+<ProjectSettingsLayout {projectId} selectedTab="slr">SLR content</ProjectSettingsLayout>