feat: add basic project settings layout

Author: Slartibartfass2

src/lib/components/composites/project-components/settings/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 overflow-hidden">
+    <div class="flex flex-col w-full min-w-[9rem] 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 overflow-y-auto">
+        {@render children?.()}
+    </div>
+</main>

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

@@ -1,6 +1,8 @@
 <script lang="ts">
+    import ProjectSettingsLayout from "$lib/components/composites/project-components/settings/ProjectSettingsLayout.svelte";
+
     let { data } = $props();
-    const { loadingProject } = data;
+    const { projectId, loadingProject } = data;
 </script>
 
 <svelte:head>
@@ -12,3 +14,5 @@
         <title>General | Settings</title>
     {/await}
 </svelte:head>
+
+<ProjectSettingsLayout {projectId} selectedTab="general">General content</ProjectSettingsLayout>

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

@@ -1,6 +1,8 @@
 <script lang="ts">
+    import ProjectSettingsLayout from "$lib/components/composites/project-components/settings/ProjectSettingsLayout.svelte";
+
     let { data } = $props();
-    const { loadingProject } = data;
+    const { projectId, loadingProject } = data;
 </script>
 
 <svelte:head>
@@ -12,3 +14,5 @@
         <title>Members | Settings</title>
     {/await}
 </svelte:head>
+
+<ProjectSettingsLayout {projectId} selectedTab="members">Members content</ProjectSettingsLayout>

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

@@ -1,6 +1,8 @@
 <script lang="ts">
+    import ProjectSettingsLayout from "$lib/components/composites/project-components/settings/ProjectSettingsLayout.svelte";
+
     let { data } = $props();
-    const { loadingProject } = data;
+    const { projectId, loadingProject } = data;
 </script>
 
 <svelte:head>
@@ -12,3 +14,5 @@
         <title>Review | Settings</title>
     {/await}
 </svelte:head>
+
+<ProjectSettingsLayout {projectId} selectedTab="review">Review content</ProjectSettingsLayout>

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

@@ -1,6 +1,8 @@
 <script lang="ts">
+    import ProjectSettingsLayout from "$lib/components/composites/project-components/settings/ProjectSettingsLayout.svelte";
+
     let { data } = $props();
-    const { loadingProject } = data;
+    const { projectId, loadingProject } = data;
 </script>
 
 <svelte:head>
@@ -12,3 +14,5 @@
         <title>SLR | Settings</title>
     {/await}
 </svelte:head>
+
+<ProjectSettingsLayout {projectId} selectedTab="slr">SLR content</ProjectSettingsLayout>