From 8602507f3e46cb05be52c584d5f46af5554aa8ae Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 10:09:01 +0100
Subject: [PATCH 01/26] Fix items showing behind footer

---
 src/lib/layout/footer.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index 17a7fe890..11319db68 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -77,6 +77,8 @@
 <style lang="scss">
     .main-footer {
         margin-block-start: auto;
+        background-color: hsl(var(--p-body-bg-color));
+        z-index: 1;
     }
 
     .main-footer-start .inline-links-item {

From 736b12f327341ec10120bdd26f13109f537753f3 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 10:33:29 +0100
Subject: [PATCH 02/26] Fix progress card spacing issue

---
 src/lib/components/sidebar.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 088c8f6ad..5bbb87829 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -365,7 +365,6 @@
     }
 
     .progress-card {
-        width: 170px;
         height: 60px;
         display: flex;
         padding: 8px;

From 65787c94f2cae73f508c1022c7e11fd01e997d6b Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 11:19:22 +0100
Subject: [PATCH 03/26] Smooth out animation of progress card when going back
 and forth between icons mode

---
 src/lib/components/sidebar.svelte | 57 +++++++++++++------------------
 1 file changed, 24 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 5bbb87829..3b7938ffa 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { fade } from 'svelte/transition';
     import {
         Icon,
         Sidebar,
@@ -8,7 +9,8 @@
         Link,
         Button,
         Layout,
-        Avatar
+        Avatar,
+        Typography
     } from '@appwrite.io/pink-svelte';
 
     import {
@@ -96,11 +98,17 @@
                         on:click={() => {
                             sideBarIsOpen = false;
                         }}>
-                        <ProgressCircle size="s" progress={progressCard.percentage} />
-                        <div class="info" class:no-text={state === 'icons'}>
-                            <span class="title">{progressCard.title}</span>
-                            <span class="description">{progressCard.percentage}% complete</span>
+                        <div class="progressCircle">
+                            <ProgressCircle size="s" progress={progressCard.percentage} />
                         </div>
+                        {#if state !== 'icons'}
+                            <div class="info" in:fade={{ delay: 200, duration: 200 }}>
+                                <Typography.Text variant="m-600"
+                                    >{progressCard.title}</Typography.Text>
+                                <Typography.Text
+                                    >{progressCard.percentage}% complete</Typography.Text>
+                            </div>
+                        {/if}
                     </a>
                     <span slot="tooltip">Getting started</span>
                 </Tooltip>
@@ -366,11 +374,9 @@
 
     .progress-card {
         height: 60px;
+        width: 178px;
+        padding: var(--base-8, 8px);
         display: flex;
-        padding: 8px;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
         gap: var(--space-5, 10px);
         margin-block-end: var(--space-6, 12px);
         align-self: stretch;
@@ -378,37 +384,21 @@
         border: 1px solid var(--color-border-neutral, #ededf0);
         background: var(--color-bgcolor-neutral-default, #fafafb);
         transition: all 0.2s ease-in-out;
-
         .info {
+            position: absolute;
             display: flex;
             flex-direction: column;
             max-height: 40px;
             overflow: hidden;
+            opacity: 1;
+            transition: opacity 0.2s ease-in-out 0.2s;
+            margin-left: var(--base-36, 36px);
         }
 
-        .no-text {
-            display: none;
-        }
-
-        .title {
-            color: var(--color-fgcolor-neutral-secondary, #56565c);
-
-            font-size: var(--font-size-s, 14px);
-            font-style: normal;
-            font-weight: 600;
-            line-height: 140%; /* 19.6px */
-            letter-spacing: -0.063px;
-        }
-
-        .description {
-            color: var(--color-fgcolor-neutral-secondary, #56565c);
-
-            /* Desktop/Body M 400 */
-            font-size: var(--font-size-s, 14px);
-            font-style: normal;
-            font-weight: 400;
-            line-height: 140%; /* 19.6px */
-            letter-spacing: -0.063px;
+        .progressCircle {
+            display: flex;
+            height: 100%;
+            align-items: center;
         }
     }
 
@@ -416,6 +406,7 @@
         width: var(--base-32, 32px);
         border-color: transparent;
         background: transparent;
+        padding-left: var(--base-4, 4px);
     }
 
     .divider {

From 4fcf38fe0234ea159c18c2a5179a162d3b3377ce Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 11:59:55 +0100
Subject: [PATCH 04/26] Add new sidebar spec

---
 package.json   |  2 +-
 pnpm-lock.yaml | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 4f4430be7..38ff3e61b 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17",
         "@appwrite.io/pink-legacy": "^1.0.0",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@07edee17",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 84d3997b0..9c0de68da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@07edee17
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@07edee17(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -218,14 +218,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0781d67b6c017dc574bc09b1da45ab1c3d37ab8c':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0781d67b6c017dc574bc09b1da45ab1c3d37ab8c}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee1707e8eb0699c439e4c81f1bc2e4685244':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee1707e8eb0699c439e4c81f1bc2e4685244}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -239,8 +239,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.0':
     resolution: {integrity: sha512-EZk/wX8oDhIsCXf2A0oQjdNOaHvh5MnWbLQI4pAiGrdy5qQGPoU19AK6iVX6z3QoOq7geoEu0zVwAowBy5hZbQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@07edee17':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@07edee17}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4089,11 +4089,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0781d67b6c017dc574bc09b1da45ab1c3d37ab8c(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee1707e8eb0699c439e4c81f1bc2e4685244(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4106,9 +4106,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@07edee17(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee1707e8eb0699c439e4c81f1bc2e4685244(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0781d67b6c017dc574bc09b1da45ab1c3d37ab8c(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.2(svelte@4.2.19)

From d68e48b98c46c314960d53fa06d3c29f49be7add Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 12:17:06 +0100
Subject: [PATCH 05/26] Persist sidebar state

---
 src/lib/components/sidebar.svelte | 12 ++++++++++--
 src/lib/helpers/sidebar.ts        | 29 +++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/helpers/sidebar.ts

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 3b7938ffa..1c084104d 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -28,7 +28,8 @@
     import { feedback } from '$lib/stores/feedback';
     import { DropList } from '$lib/components/index';
     import { Feedback } from '$lib/components/feedback';
-    import type { ComponentType } from 'svelte';
+    import { type ComponentType, onMount } from 'svelte';
+    import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
 
     type $$Props = HTMLElement & {
         state?: 'closed' | 'open' | 'icons';
@@ -43,7 +44,7 @@
         subNavigation?: ComponentType;
     };
 
-    export let state: $$Props['state'] = 'closed';
+    export let state: $$Props['state'] = 'icons';
     export let project: $$Props['project'];
     export let avatar: $$Props['avatar'];
     export let progressCard: $$Props['progressCard'] = undefined;
@@ -59,6 +60,12 @@
         }
     }
 
+    onMount(() => {
+        state = getSidebarState();
+    });
+
+    $: updateSidebarState(state);
+
     const projectOptions = [
         { name: 'Auth', icon: IconUserGroup, slug: 'auth' },
         { name: 'Databases', icon: IconDatabase, slug: 'databases' },
@@ -72,6 +79,7 @@
 <div class:only-mobile={project === undefined}>
     <Sidebar.Base {...$$props} bind:state resizable={subNavigation === undefined}>
         <div slot="top">
+            {state}
             <div class="only-mobile top">
                 <div class="icons">
                     <Link.Button
diff --git a/src/lib/helpers/sidebar.ts b/src/lib/helpers/sidebar.ts
new file mode 100644
index 000000000..b563f5b33
--- /dev/null
+++ b/src/lib/helpers/sidebar.ts
@@ -0,0 +1,29 @@
+import { get } from 'svelte/store';
+import { user } from '$lib/stores/user';
+import { sdk } from '$lib/stores/sdk';
+
+const userPreferences = () => get(user)?.prefs;
+
+export function updateSidebarState(state: 'closed' | 'open' | 'icons') {
+    if (state === 'open' || state === 'icons') {
+        const currentPrefs = userPreferences();
+
+        const newPrefs = {
+            ...currentPrefs,
+            sidebarState: state
+        };
+
+        sdk.forConsole.account.updatePrefs(newPrefs);
+    }
+}
+
+export function getSidebarState(): 'open' | 'icons' {
+    const currentPrefs = userPreferences();
+    if (currentPrefs && currentPrefs.sidebarState) {
+        if (currentPrefs.sidebarState === 'open' || currentPrefs.sidebarState === 'icons') {
+            return currentPrefs.sidebarState;
+        }
+    }
+
+    return 'open';
+}

From 328babed43b6b147c8871b7406b3fee230759cf3 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 12:26:21 +0100
Subject: [PATCH 06/26] Persist sidebar state

---
 src/lib/components/sidebar.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 1c084104d..225dbafc2 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -79,7 +79,6 @@
 <div class:only-mobile={project === undefined}>
     <Sidebar.Base {...$$props} bind:state resizable={subNavigation === undefined}>
         <div slot="top">
-            {state}
             <div class="only-mobile top">
                 <div class="icons">
                     <Link.Button

From 8615cd540a5656e7a4347d697253f9887048d44c Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 13:18:44 +0100
Subject: [PATCH 07/26] Prevent showing background behind animating sidebar

---
 src/lib/layout/cover.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index 9d2ede14e..ba3858e37 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -23,6 +23,8 @@
         block-size: 152px;
         border-bottom: 1px solid var(--color-border-neutral, #2d2d31);
         background: var(--color-bgcolor-neutral-primary, #1d1d21);
+        margin-left: -190px;
+        padding-left: 190px;
     }
     .cover-container {
         position: relative;

From cb3407a4fbb2c1dd4ff1afc09ea95660a1b22877 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 13:25:10 +0100
Subject: [PATCH 08/26] Ensure on mobile menu is always closed, regardless of
 pref

---
 src/lib/components/sidebar.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 225dbafc2..9b451ccbe 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -30,6 +30,7 @@
     import { Feedback } from '$lib/components/feedback';
     import { type ComponentType, onMount } from 'svelte';
     import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     type $$Props = HTMLElement & {
         state?: 'closed' | 'open' | 'icons';
@@ -61,7 +62,7 @@
     }
 
     onMount(() => {
-        state = getSidebarState();
+        state = isSmallViewport ? 'closed' : getSidebarState();
     });
 
     $: updateSidebarState(state);

From 17fdd09de7014b2a749fd044e998e27cb76e5c93 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 13:38:12 +0100
Subject: [PATCH 09/26] Add tablet viewport check

---
 src/lib/components/navbar.svelte  | 7 ++++++-
 src/lib/components/sidebar.svelte | 6 ++----
 src/lib/stores/viewport.ts        | 5 +++++
 src/routes/+layout.svelte         | 3 ++-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 23ef38d6d..c23242628 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -77,7 +77,7 @@
 
 <Navbar.Base {...$$props}>
     <div slot="left" class="left">
-        <div class="only-mobile">
+        <div class="only-mobile-tablet">
             <button
                 class="sideNavToggle"
                 on:click={() => {
@@ -276,6 +276,11 @@
             display: none;
         }
     }
+    @media (min-width: 1024px) {
+        .only-mobile-tablet {
+            display: none;
+        }
+    }
 
     :global(.icons div:first-of-type:not(:has(.progress-card))) {
         height: 20px;
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 9b451ccbe..73b25e605 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -30,7 +30,7 @@
     import { Feedback } from '$lib/components/feedback';
     import { type ComponentType, onMount } from 'svelte';
     import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
-    import { isSmallViewport } from '$lib/stores/viewport';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
 
     type $$Props = HTMLElement & {
         state?: 'closed' | 'open' | 'icons';
@@ -61,9 +61,7 @@
         }
     }
 
-    onMount(() => {
-        state = isSmallViewport ? 'closed' : getSidebarState();
-    });
+    $: state = $isTabletViewport ? 'closed' : getSidebarState();
 
     $: updateSidebarState(state);
 
diff --git a/src/lib/stores/viewport.ts b/src/lib/stores/viewport.ts
index 7a4411d6f..159eb7c9d 100644
--- a/src/lib/stores/viewport.ts
+++ b/src/lib/stores/viewport.ts
@@ -1,11 +1,16 @@
 import { writable } from 'svelte/store';
 
 export const isSmallViewport = writable(false);
+export const isTabletViewport = writable(false);
 
 export function updateViewport() {
     if (typeof window !== 'undefined') {
         isSmallViewport.set(
             typeof window !== 'undefined' ? window.matchMedia('(max-width: 768px)').matches : false
         );
+
+        isTabletViewport.set(
+            typeof window !== 'undefined' ? window.matchMedia('(max-width: 1024px)').matches : false
+        );
     }
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e46c874d5..fc61a3179 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -27,6 +27,7 @@
     }
 
     onMount(async () => {
+        updateViewport();
         // handle sources
         if (isCloud) {
             const urlParams = $page.url.searchParams;
@@ -106,7 +107,7 @@
     }
 </script>
 
-<svelte:window on:resize={updateViewport} />
+<svelte:window on:resize={updateViewport} on:load={updateViewport} />
 
 <Root theme={resolveTheme($app.themeInUse)}>
     <Notifications />

From 7d1b4e8311f3468ffbd165b8959ad4d1e8eab5c1 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 14:03:24 +0100
Subject: [PATCH 10/26] Fix tablet navigation

---
 package.json                      |  2 +-
 pnpm-lock.yaml                    | 24 ++++++++++++------------
 src/lib/components/navbar.svelte  |  6 +++---
 src/lib/components/sidebar.svelte |  2 +-
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 38ff3e61b..f084b9c91 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17",
         "@appwrite.io/pink-legacy": "^1.0.0",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9c0de68da..540fb194c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -218,14 +218,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0781d67b6c017dc574bc09b1da45ab1c3d37ab8c':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0781d67b6c017dc574bc09b1da45ab1c3d37ab8c}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@18a5731b43f08e3ae18905fccc5ffe3274b93cfc':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@18a5731b43f08e3ae18905fccc5ffe3274b93cfc}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -239,8 +239,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.0':
     resolution: {integrity: sha512-EZk/wX8oDhIsCXf2A0oQjdNOaHvh5MnWbLQI4pAiGrdy5qQGPoU19AK6iVX6z3QoOq7geoEu0zVwAowBy5hZbQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4089,11 +4089,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0781d67b6c017dc574bc09b1da45ab1c3d37ab8c(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@18a5731b43f08e3ae18905fccc5ffe3274b93cfc(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4106,9 +4106,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0781d67(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0781d67b6c017dc574bc09b1da45ab1c3d37ab8c(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@18a5731b43f08e3ae18905fccc5ffe3274b93cfc(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.2(svelte@4.2.19)
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index c23242628..883b5c84d 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -269,9 +269,6 @@
     }
 
     @media (min-width: 768px) {
-        .only-desktop {
-            display: flex;
-        }
         .only-mobile {
             display: none;
         }
@@ -280,6 +277,9 @@
         .only-mobile-tablet {
             display: none;
         }
+        .only-desktop {
+            display: flex;
+        }
     }
 
     :global(.icons div:first-of-type:not(:has(.progress-card))) {
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 73b25e605..3c3ccd735 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -78,7 +78,7 @@
 <div class:only-mobile={project === undefined}>
     <Sidebar.Base {...$$props} bind:state resizable={subNavigation === undefined}>
         <div slot="top">
-            <div class="only-mobile top">
+            <div class="only-mobile-tablet top">
                 <div class="icons">
                     <Link.Button
                         variant="quiet-muted"

From e257b2ea7a887ffd2cdbbbae494556f1076dcaeb Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 14:04:45 +0100
Subject: [PATCH 11/26] Speed up filter, and set overlay full width

---
 src/lib/layout/shell.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 04143c061..9bab72515 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -169,14 +169,14 @@
 
     .overlay {
         position: fixed;
-        width: calc(100vw - 200px);
+        width: 100vw;
         height: 100vh;
         right: 0;
         top: 0;
         z-index: 10;
         background-color: #56565c1a;
         backdrop-filter: blur(5px);
-        transition: backdrop-filter 0.5s ease-in-out;
+        transition: backdrop-filter 0.2s ease-in-out;
 
         @media (min-width: 1024px) {
             display: none;

From 83e49e13c8923ed2b7a8be732c51b7859997a957 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 14:06:30 +0100
Subject: [PATCH 12/26] Fix navigation tablet view

---
 src/lib/components/sidebar.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 3c3ccd735..d392a3824 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -370,7 +370,8 @@
     }
 
     @media (min-width: 1024px) {
-        .only-mobile {
+        .only-mobile,
+        .only-mobile-tablet {
             display: none;
         }
         .only-desktop {

From 2789e4c511dc35523ff7ac3a81a42ad1cc5a748a Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 14:15:32 +0100
Subject: [PATCH 13/26] Disable animation when switching between organization
 overview page and projects

---
 src/lib/layout/shell.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 9bab72515..117bb967d 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -26,9 +26,11 @@
 
     $: selectedProject = loadedProjects.find((project) => project.isSelected);
     let y: number;
+    let showContentTransition = true;
 
     page.subscribe(({ url }) => {
         $showSubNavigation = url.searchParams.get('openNavbar') === 'true';
+        showContentTransition = !url.pathname.includes('organization');
     });
 
     /**
@@ -115,6 +117,7 @@
     <SideNavigation bind:state bind:subNavigation />
     <div
         class="content"
+        class:has-transition={showContentTransition}
         class:icons-content={state === 'icons'}
         class:no-sidebar={!showSideNavigation}>
         <section class="main-content" data-test={showSideNavigation}>
@@ -149,9 +152,7 @@
 
         @media (min-width: 1024px) {
             width: 100%;
-
             padding-left: 190px;
-            transition: all 0.3s ease-in-out;
 
             &.icons-content {
                 padding-left: 54px;
@@ -159,6 +160,12 @@
         }
     }
 
+    .has-transition {
+        @media (min-width: 1024px) {
+            transition: all 0.3s ease-in-out;
+        }
+    }
+
     .no-sidebar {
         padding-left: 0;
     }

From fd9d3598c4399b6f115545453fc5f6fb919f79d9 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 14:34:54 +0100
Subject: [PATCH 14/26] Fix sub navigation not overflowing content

---
 src/lib/layout/shell.svelte | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 117bb967d..2c2467f39 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -160,6 +160,13 @@
         }
     }
 
+    :global(main:has(.level-2-nav)) {
+        .content {
+            width: calc(100% - 200px);
+            margin-left: 200px;
+        }
+    }
+
     .has-transition {
         @media (min-width: 1024px) {
             transition: all 0.3s ease-in-out;

From 64a1cb2d1af764f665dca3c2c2e9f6a8b70da3ee Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 14:40:35 +0100
Subject: [PATCH 15/26] Fix persistence of sub navigation

---
 src/lib/layout/shell.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 2c2467f39..d42095347 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -72,7 +72,7 @@
 
     let sideBarIsOpen = false;
     let showAccountMenu = false;
-    let subNavigation: undefined | ComponentType = undefined;
+    let subNavigation: undefined | ComponentType = $page.data.subNavigation;
     let state: undefined | 'open' | 'closed' | 'icons' = 'closed';
     $: state = sideBarIsOpen ? 'open' : 'closed';
     $: state = subNavigation && !$isSmallViewport ? 'icons' : sideBarIsOpen ? 'open' : 'closed';

From 064add48270e3f7e4b3d7042a452f040f3b50d1d Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 15:05:42 +0100
Subject: [PATCH 16/26] Cleanup

---
 src/lib/components/sidebar.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index d392a3824..44fff1463 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -28,9 +28,9 @@
     import { feedback } from '$lib/stores/feedback';
     import { DropList } from '$lib/components/index';
     import { Feedback } from '$lib/components/feedback';
-    import { type ComponentType, onMount } from 'svelte';
+    import { type ComponentType } from 'svelte';
     import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
-    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
+    import { isTabletViewport } from '$lib/stores/viewport';
 
     type $$Props = HTMLElement & {
         state?: 'closed' | 'open' | 'icons';

From e4db14f08459d967e01f6602d35c3eff285c5e46 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 15:38:54 +0100
Subject: [PATCH 17/26] Add transition for submenu

---
 src/lib/components/sidebar.svelte |  5 +----
 src/lib/layout/navigation.svelte  | 11 +++++++----
 src/lib/layout/shell.svelte       | 17 +++++++++--------
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 44fff1463..433db3e57 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -28,7 +28,6 @@
     import { feedback } from '$lib/stores/feedback';
     import { DropList } from '$lib/components/index';
     import { Feedback } from '$lib/components/feedback';
-    import { type ComponentType } from 'svelte';
     import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
     import { isTabletViewport } from '$lib/stores/viewport';
 
@@ -42,7 +41,6 @@
         };
         sideBarIsOpen: boolean;
         showAccountMenu: boolean;
-        subNavigation?: ComponentType;
     };
 
     export let state: $$Props['state'] = 'icons';
@@ -51,7 +49,6 @@
     export let progressCard: $$Props['progressCard'] = undefined;
     export let sideBarIsOpen: boolean;
     export let showAccountMenu: boolean;
-    export let subNavigation = undefined;
 
     function toggleFeedback() {
         feedback.toggleFeedback();
@@ -76,7 +73,7 @@
 </script>
 
 <div class:only-mobile={project === undefined}>
-    <Sidebar.Base {...$$props} bind:state resizable={subNavigation === undefined}>
+    <Sidebar.Base {...$$props} bind:state resizable={true}>
         <div slot="top">
             <div class="only-mobile-tablet top">
                 <div class="icons">
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 25065389c..83c147429 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { slide } from '$lib/helpers/transition';
     import { getContext } from 'svelte';
     import type { Writable } from 'svelte/store';
 
     export let state: 'closed' | 'open' | 'icons' = 'open';
     export let subNavigation;
 
-    $: project = $page.params.project;
-
     $: subNavigation = $page.data.subNavigation;
     // We need to have this second variable, because we only want narrow
     // to change automatically if we change from having a second side nav to
@@ -44,14 +41,20 @@
     .level-2-nav {
         display: none;
 
-        @media (min-width: 768px) {
+        @media (min-width: 1024px) {
             display: block;
             position: fixed;
             z-index: 10;
             left: 200px;
             transition: left 0.2s ease-in-out;
+            margin-left: -5px;
         }
     }
+
+    :global(.level-2-nav nav) {
+        padding-left: 15px;
+    }
+
     .icons {
         left: 54px;
     }
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index d42095347..f11382642 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -75,7 +75,7 @@
     let subNavigation: undefined | ComponentType = $page.data.subNavigation;
     let state: undefined | 'open' | 'closed' | 'icons' = 'closed';
     $: state = sideBarIsOpen ? 'open' : 'closed';
-    $: state = subNavigation && !$isSmallViewport ? 'icons' : sideBarIsOpen ? 'open' : 'closed';
+    $: state = !$isSmallViewport ? 'icons' : sideBarIsOpen ? 'open' : 'closed';
 
     function handleResize() {
         sideBarIsOpen = false;
@@ -160,13 +160,6 @@
         }
     }
 
-    :global(main:has(.level-2-nav)) {
-        .content {
-            width: calc(100% - 200px);
-            margin-left: 200px;
-        }
-    }
-
     .has-transition {
         @media (min-width: 1024px) {
             transition: all 0.3s ease-in-out;
@@ -181,6 +174,14 @@
         min-height: calc(100vh - 30px);
     }
 
+    :global(main:has(.level-2-nav)) {
+        .main-content {
+            @media (min-width: 1024px) {
+                padding-left: 200px;
+            }
+        }
+    }
+
     .overlay {
         position: fixed;
         width: 100vw;

From 8eecd942ed89d094c00cb07064afd44ef6c28e27 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 16:19:51 +0100
Subject: [PATCH 18/26] Persist subnav

---
 src/lib/components/sidebar.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 433db3e57..67d3cb0c6 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -28,6 +28,7 @@
     import { feedback } from '$lib/stores/feedback';
     import { DropList } from '$lib/components/index';
     import { Feedback } from '$lib/components/feedback';
+    import { type ComponentType } from 'svelte';
     import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
     import { isTabletViewport } from '$lib/stores/viewport';
 
@@ -41,6 +42,7 @@
         };
         sideBarIsOpen: boolean;
         showAccountMenu: boolean;
+        subNavigation?: ComponentType;
     };
 
     export let state: $$Props['state'] = 'icons';
@@ -49,6 +51,7 @@
     export let progressCard: $$Props['progressCard'] = undefined;
     export let sideBarIsOpen: boolean;
     export let showAccountMenu: boolean;
+    export let subNavigation = undefined;
 
     function toggleFeedback() {
         feedback.toggleFeedback();

From bdcbc4b3aa40d6a0407172e18e2c5667a1b7d337 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 16:27:58 +0100
Subject: [PATCH 19/26] Show active state

---
 src/lib/components/sidebar.svelte | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 67d3cb0c6..7b772811b 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { fade } from 'svelte/transition';
+    import { page } from '$app/stores';
     import {
         Icon,
         Sidebar,
@@ -62,6 +63,7 @@
     }
 
     $: state = $isTabletViewport ? 'closed' : getSidebarState();
+    $: pathname = $page.url.pathname;
 
     $: updateSidebarState(state);
 
@@ -148,6 +150,7 @@
                             <a
                                 href={`/console/project-${project.$id}/${projectOption.slug}`}
                                 class="link"
+                                class:active={pathname.includes(projectOption.slug)}
                                 on:click={() => {
                                     sideBarIsOpen = false;
                                 }}
@@ -276,6 +279,15 @@
             }
         }
     }
+    .active {
+        background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
+        .link-text {
+            color: var(--color-fgcolor-neutral-primary);
+        }
+        .link-icon {
+            color: var(--color-fgcolor-neutral-primary);
+        }
+    }
 
     .icons .link {
         gap: 0;

From 98de48ba3275002379a06a0290280efad7333ff0 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 16:39:14 +0100
Subject: [PATCH 20/26] Swap to ActionMenu

---
 src/lib/components/navbar.svelte | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 883b5c84d..8797cf1bc 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -6,7 +6,7 @@
         Link,
         Tooltip,
         Card,
-        ActionList,
+        ActionMenu,
         Input,
         Button,
         Avatar
@@ -132,17 +132,20 @@
                 <div class="account-container">
                     <Card.Base padding="xxs" shadow={true}>
                         <Layout.Stack gap="xxs">
-                            <ActionList.Root>
-                                <ActionList.Item.Anchor
-                                    icon={IconUser}
-                                    title="Account"
-                                    href={`${base}/account`} />
+                            <ActionMenu.Root>
+                                <Layout.Stack gap="xxs">
+                                    <ActionMenu.Item.Anchor
+                                        leadingIcon={IconUser}
+                                        size="l"
+                                        href={`${base}/account`}>
+                                        Account</ActionMenu.Item.Anchor>
 
-                                <ActionList.Item.Button
-                                    icon={IconLogoutRight}
-                                    on:click={logout}
-                                    title="Sign out" />
-                            </ActionList.Root>
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconLogoutRight}
+                                        size="l"
+                                        on:click={logout}>Sign out</ActionMenu.Item.Button>
+                                </Layout.Stack>
+                            </ActionMenu.Root>
                             <Input.Select
                                 value={$app.theme === 'auto' ? 'system' : $app.theme}
                                 name="mode"

From 4f8f8384be8e8ddc9d81f092435625a2e3a528fa Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 16:46:19 +0100
Subject: [PATCH 21/26] Align search icon

---
 src/lib/components/sidebar.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 7b772811b..f94b78430 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -81,7 +81,7 @@
     <Sidebar.Base {...$$props} bind:state resizable={true}>
         <div slot="top">
             <div class="only-mobile-tablet top">
-                <div class="icons">
+                <div class="icons search-icon">
                     <Link.Button
                         variant="quiet-muted"
                         on:click={() => {
@@ -293,6 +293,10 @@
         gap: 0;
     }
 
+    .search-icon {
+        display: flex;
+    }
+
     .link-text {
         width: 128px;
         transition: all 0.2s ease-in-out;

From 9acc57cf28eb346453322fae9f583c9929c2e892 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 16:48:44 +0100
Subject: [PATCH 22/26] Increase gap

---
 src/lib/components/sidebar.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index f94b78430..712485275 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -433,7 +433,8 @@
     }
 
     .divider {
-        margin-block: var(--space-2, 4px);
+        margin-block-start: var(--space-2, 4px);
+        margin-block-end: var(--space-6, 12px);
         width: 100%;
     }
 

From d7a0195f1bc49172bb74299056ff1436a9e5e8c8 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 17:22:29 +0100
Subject: [PATCH 23/26] Fix tablet menu

---
 package.json                      |  4 ++--
 pnpm-lock.yaml                    | 28 ++++++++++++++--------------
 src/lib/components/sidebar.svelte | 10 +++++++---
 src/lib/layout/shell.svelte       |  4 ++--
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index f084b9c91..be2abede1 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
     "dependencies": {
         "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28ac795",
         "@appwrite.io/pink-legacy": "^1.0.0",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28ac795",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 540fb194c..6bdce2cbf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,14 +15,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28ac795
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28ac795(svelte@4.2.19)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.0
         version: 1.0.0
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28ac795
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28ac795(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -218,14 +218,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28ac795':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28ac795}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@18a5731b43f08e3ae18905fccc5ffe3274b93cfc':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@18a5731b43f08e3ae18905fccc5ffe3274b93cfc}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28ac79582e305e680ab7a5f131f2a3f594d86682':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28ac79582e305e680ab7a5f131f2a3f594d86682}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -239,8 +239,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.0':
     resolution: {integrity: sha512-EZk/wX8oDhIsCXf2A0oQjdNOaHvh5MnWbLQI4pAiGrdy5qQGPoU19AK6iVX6z3QoOq7geoEu0zVwAowBy5hZbQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28ac795':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28ac795}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4089,11 +4089,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@07edee17(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28ac795(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@18a5731b43f08e3ae18905fccc5ffe3274b93cfc(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28ac79582e305e680ab7a5f131f2a3f594d86682(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4106,9 +4106,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@18a5731(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28ac795(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@18a5731b43f08e3ae18905fccc5ffe3274b93cfc(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28ac79582e305e680ab7a5f131f2a3f594d86682(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.2(svelte@4.2.19)
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 712485275..dfedd439b 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -65,8 +65,6 @@
     $: state = $isTabletViewport ? 'closed' : getSidebarState();
     $: pathname = $page.url.pathname;
 
-    $: updateSidebarState(state);
-
     const projectOptions = [
         { name: 'Auth', icon: IconUserGroup, slug: 'auth' },
         { name: 'Databases', icon: IconDatabase, slug: 'databases' },
@@ -78,7 +76,13 @@
 </script>
 
 <div class:only-mobile={project === undefined}>
-    <Sidebar.Base {...$$props} bind:state resizable={true}>
+    <Sidebar.Base
+        {...$$props}
+        bind:state
+        resizable={true}
+        onResize={(sidebarState) => {
+            updateSidebarState(sidebarState);
+        }}>
         <div slot="top">
             <div class="only-mobile-tablet top">
                 <div class="icons search-icon">
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index f11382642..89e2ba5b4 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -15,7 +15,7 @@
     import { type Models } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
     import SideNavigation from '$lib/layout/navigation.svelte';
-    import { isSmallViewport } from '$lib/stores/viewport';
+    import { isTabletViewport } from '$lib/stores/viewport';
     import { hasOnboardingDismissed } from '$lib/helpers/onboarding';
 
     export let showSideNavigation = false;
@@ -75,7 +75,7 @@
     let subNavigation: undefined | ComponentType = $page.data.subNavigation;
     let state: undefined | 'open' | 'closed' | 'icons' = 'closed';
     $: state = sideBarIsOpen ? 'open' : 'closed';
-    $: state = !$isSmallViewport ? 'icons' : sideBarIsOpen ? 'open' : 'closed';
+    $: state = !$isTabletViewport ? 'icons' : sideBarIsOpen ? 'open' : 'closed';
 
     function handleResize() {
         sideBarIsOpen = false;

From c03f729fafa7e527e541602e9cee5d45bc37fff3 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 19:54:08 +0100
Subject: [PATCH 24/26] Conflict fixes

---
 src/lib/layout/shell.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 4576c5a49..3e2456d91 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -74,8 +74,8 @@
     let showAccountMenu = false;
     let subNavigation: undefined | ComponentType = $page.data.subNavigation;
     let state: undefined | 'open' | 'closed' | 'icons' = 'closed';
-    $: state = $sideBarIsOpen ? 'open' : 'closed';
-    $: state = !$isTabletViewport ? 'icons' : $sideBarIsOpen ? 'open' : 'closed';
+    $: state = $isSidebarOpen ? 'open' : 'closed';
+    $: state = !$isTabletViewport ? 'icons' : $isSidebarOpen ? 'open' : 'closed';
 
     function handleResize() {
         $isSidebarOpen = false;

From 912e97d1159b20633d6356968884267ce72a8cef Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 19:54:13 +0100
Subject: [PATCH 25/26] Add padding

---
 src/lib/layout/navigation.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 83c147429..059b577d6 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -52,7 +52,7 @@
     }
 
     :global(.level-2-nav nav) {
-        padding-left: 15px;
+        padding-left: 15px !important;
     }
 
     .icons {

From b67d878ececcf764b8110ce4da4ee2a8b83401af Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 19:56:06 +0100
Subject: [PATCH 26/26] Sidebar progresscard mobile width fix

---
 src/lib/components/sidebar.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 5f60a196f..2dbbd110f 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -447,7 +447,7 @@
 
     .progress-card {
         height: 60px;
-        width: 178px;
+        width: 168px;
         padding: var(--base-8, 8px);
         display: flex;
         gap: var(--space-5, 10px);
@@ -457,6 +457,10 @@
         border: 1px solid var(--color-border-neutral, #ededf0);
         background: var(--color-bgcolor-neutral-default, #fafafb);
         transition: all 0.2s ease-in-out;
+
+        @media (min-width: 1024px) {
+            width: 178px;
+        }
         .info {
             position: absolute;
             display: flex;