From bda8f6e433311112147d35dc0832101d53ccbea3 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 8 Apr 2025 13:47:26 +0200
Subject: [PATCH] Make sidebarproject bit more DRY

---
 .../components/studio/sidebarProject.svelte   | 77 ++++++++-----------
 1 file changed, 32 insertions(+), 45 deletions(-)

diff --git a/src/lib/components/studio/sidebarProject.svelte b/src/lib/components/studio/sidebarProject.svelte
index 0de5e9916..f807bb960 100644
--- a/src/lib/components/studio/sidebarProject.svelte
+++ b/src/lib/components/studio/sidebarProject.svelte
@@ -11,63 +11,50 @@
     } from '@appwrite.io/pink-icons-svelte';
     import { base } from '$app/paths';
     import { isSmallViewport } from '$lib/stores/viewport';
+    import type { ComponentType } from 'svelte';
 
     export let project;
     export let showChat;
     export let isOpen;
+
+    const menuItems: Array<
+        { type: 'divider' } | { type: 'item'; label: string; path: string; icon: ComponentType }
+    > = [
+        { type: 'item', label: 'Studio', path: 'studio', icon: IconTemplate },
+        { type: 'divider' },
+        { type: 'item', label: 'Auth', path: 'auth', icon: IconUserGroup },
+        { type: 'item', label: 'Databases', path: 'databases', icon: IconDatabase },
+        { type: 'item', label: 'Messaging', path: 'messaging', icon: IconAnnotation },
+        { type: 'item', label: 'Storage', path: 'storage', icon: IconFolder },
+        { type: 'divider' },
+        { type: 'item', label: 'Settings', path: 'settings', icon: IconCog }
+    ];
 </script>
 
 <nav style:--icon-fill="var(--fgcolor-neutral-tertiary)" class:isOpen>
     <Layout.Stack direction="column" justifyContent="space-between" height="100%">
         <Layout.Stack gap="xs">
-            <ActionMenu.Item.Anchor
-                href={`${base}/project-${project.$id}`}
-                leadingIcon={IconTemplate}
-                on:click={() => {
-                    isOpen = false;
-                }}
-                >{#if $isSmallViewport}Studio{/if}</ActionMenu.Item.Anchor>
-            <Divider />
-            <ActionMenu.Item.Anchor
-                href={`${base}/project-${project.$id}/auth`}
-                leadingIcon={IconUserGroup}
-                on:click={() => {
-                    isOpen = false;
-                }}
-                >{#if $isSmallViewport}Auth{/if}</ActionMenu.Item.Anchor>
-            <ActionMenu.Item.Anchor
-                href={`${base}/project-${project.$id}/databases`}
-                on:click={() => {
-                    isOpen = false;
-                }}
-                leadingIcon={IconDatabase}
-                >{#if $isSmallViewport}Databases{/if}</ActionMenu.Item.Anchor>
-            <ActionMenu.Item.Anchor
-                href={`${base}/project-${project.$id}/messaging`}
-                on:click={() => {
-                    isOpen = false;
-                }}
-                leadingIcon={IconAnnotation}
-                >{#if $isSmallViewport}Messaging{/if}</ActionMenu.Item.Anchor>
-            <ActionMenu.Item.Anchor
-                href={`${base}/project-${project.$id}/storage`}
-                on:click={() => {
-                    isOpen = false;
-                }}
-                leadingIcon={IconFolder}
-                >{#if $isSmallViewport}Storage{/if}</ActionMenu.Item.Anchor>
-            <Divider />
-            <ActionMenu.Item.Anchor
-                href={`${base}/project-${project.$id}/settings`}
-                on:click={() => {
-                    isOpen = false;
-                }}
-                leadingIcon={IconCog}
-                >{#if $isSmallViewport}Settings{/if}</ActionMenu.Item.Anchor>
+            {#each menuItems as menuItem}
+                {#if menuItem.type === 'item'}
+                    <ActionMenu.Item.Anchor
+                        href={`${base}/project-${project.$id}/${menuItem.path}`}
+                        leadingIcon={menuItem.icon}
+                        on:click={() => {
+                            if ($isSmallViewport) {
+                                isOpen = false;
+                            }
+                        }}
+                        >{#if $isSmallViewport}{menuItem.label}{/if}</ActionMenu.Item.Anchor>
+                {:else if menuItem.type === 'divider'}
+                    <Divider />
+                {/if}
+            {/each}
         </Layout.Stack>
         <ActionMenu.Item.Button
             on:click={() => {
-                isOpen = false;
+                if ($isSmallViewport) {
+                    isOpen = false;
+                }
                 showChat = !showChat;
             }}></ActionMenu.Item.Button>
     </Layout.Stack>