From ea3a76f77c172ae24b641d25f7437f1617939580 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 29 Jan 2025 16:01:47 +0100
Subject: [PATCH] Update viewport to store

---
 src/lib/components/breadcrumbs.svelte         | 48 +------------------
 src/lib/components/navbar.svelte              | 10 +---
 src/lib/layout/shell.svelte                   |  5 +-
 src/lib/stores/viewport.ts                    | 13 +++++
 .../get-started/header.svelte                 | 21 ++------
 .../project-[project]/overview/header.svelte  | 23 +++------
 .../project-[project]/overview/onboard.svelte | 15 ++----
 7 files changed, 33 insertions(+), 102 deletions(-)
 create mode 100644 src/lib/stores/viewport.ts

diff --git a/src/lib/components/breadcrumbs.svelte b/src/lib/components/breadcrumbs.svelte
index a6ac5818d..b21f20478 100644
--- a/src/lib/components/breadcrumbs.svelte
+++ b/src/lib/components/breadcrumbs.svelte
@@ -9,6 +9,7 @@
     } from '@appwrite.io/pink-icons-svelte';
     import { BottomSheet } from '$lib/components';
     import { onMount } from 'svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     type Project = {
         name: string;
@@ -60,7 +61,6 @@
     $: selectedOrg = organizations.find((organization) => organization.isSelected);
     $: selectedProject = selectedOrg?.projects.find((project) => project.isSelected);
 
-    let isSmallViewport = false;
     let organisationBottomSheetOpen = false;
     let projectsBottomSheetOpen = false;
 
@@ -162,19 +162,10 @@
                   }
                 : undefined
     };
-
-    function updateViewport() {
-        isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
-    }
-
-    onMount(() => {
-        updateViewport();
-    });
 </script>
 
-<svelte:window on:resize={updateViewport} />
 <div use:melt={$menubar}>
-    {#if !isSmallViewport}
+    {#if !$isSmallViewport}
         <span class="breadcrumb-separator">/</span>
         <button
             type="button"
@@ -365,29 +356,6 @@
         margin-block: -4px;
     }
 
-    .item {
-        position: relative;
-        user-select: none;
-        border-radius: 0.125rem;
-        z-index: 20;
-        outline: none;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-
-        margin: 0 4px;
-        padding: var(--space-3, 6px) var(--space-4, 8px) var(--space-3, 6px) var(--space-5, 10px);
-        color: var(--color-fgcolor-neutral-secondary, #56565c);
-
-        /* Desktop/Body M 400 */
-        font-family: var(--font-family-sansserif, Inter);
-        font-size: var(--font-size-S, 14px);
-        font-style: normal;
-        font-weight: 400;
-        line-height: 140%; /* 19.6px */
-        letter-spacing: -0.063px;
-    }
-
     .orgName,
     .projectName {
         white-space: nowrap;
@@ -472,18 +440,6 @@
         height: 1px;
         background-color: var(--color-border-neutral);
     }
-
-    .rightSlot {
-        margin-left: auto;
-        padding-left: 1.25rem;
-        display: flex;
-    }
-    .leftSlot {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-right: var(--space-4, 8px);
-    }
     .breadcrumb-separator {
         color: var(--color-fgcolor-neutral-tertiary, #97979b);
     }
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 78e18d60b..7c512284a 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -30,9 +30,9 @@
     import { base } from '$app/paths';
     import { logout } from '$lib/helpers/logout';
     import { app } from '$lib/stores/app';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     let showSupport = false;
-    let isSmallViewport = false;
 
     type $$Props = BaseNavbarProps & {
         links: Array<{ label: string; href: string }>;
@@ -45,11 +45,6 @@
         }>;
         showAccountMenu: boolean;
     };
-
-    function updateViewport() {
-        isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
-    }
-
     function updateTheme(theme: 'light' | 'dark' | 'system') {
         const themeInUse =
             theme === 'system'
@@ -79,7 +74,6 @@
     export let showAccountMenu = false;
 </script>
 
-<svelte:window on:resize={updateViewport} />
 <Navbar.Base {...$$props}>
     <div slot="left" class="left">
         <div class="only-mobile">
@@ -170,7 +164,7 @@
         </div>
     </div>
 </Navbar.Base>
-{#if showAccountMenu && isSmallViewport}
+{#if showAccountMenu && $isSmallViewport}
     <BottomSheet.Menu
         bind:isOpen={showAccountMenu}
         menu={{
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 9c56b067f..97cc927b6 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -15,6 +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';
 
     export let showSideNavigation = false;
     export let showHeader = true;
@@ -70,12 +71,10 @@
     let showAccountMenu = false;
     let subNavigation: undefined | ComponentType = undefined;
     let state: undefined | 'open' | 'closed' | 'icons' = 'closed';
-    let isSmallViewport = false;
     $: state = sideBarIsOpen ? 'open' : 'closed';
-    $: state = subNavigation && !isSmallViewport ? 'icons' : sideBarIsOpen ? 'open' : 'closed';
+    $: state = subNavigation && !$isSmallViewport ? 'icons' : sideBarIsOpen ? 'open' : 'closed';
 
     function handleResize() {
-        isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
         sideBarIsOpen = false;
         showAccountMenu = false;
     }
diff --git a/src/lib/stores/viewport.ts b/src/lib/stores/viewport.ts
new file mode 100644
index 000000000..491541bde
--- /dev/null
+++ b/src/lib/stores/viewport.ts
@@ -0,0 +1,13 @@
+import { writable } from 'svelte/store';
+
+const isSmallViewport = writable(false);
+
+function updateViewport() {
+    isSmallViewport.set(window.matchMedia('(max-width: 768px)').matches);
+}
+
+// Initialize on import
+updateViewport();
+window.addEventListener('resize', updateViewport);
+
+export { isSmallViewport };
diff --git a/src/routes/(console)/project-[project]/get-started/header.svelte b/src/routes/(console)/project-[project]/get-started/header.svelte
index 6a17546fd..cb29eb3af 100644
--- a/src/routes/(console)/project-[project]/get-started/header.svelte
+++ b/src/routes/(console)/project-[project]/get-started/header.svelte
@@ -1,25 +1,14 @@
 <script lang="ts">
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
-    import { onboarding, project } from '../store';
+    import { project } from '../store';
     import { hasOnboardingDismissed, setHasOnboardingDismissed } from '$lib/helpers/onboarding';
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Layout, Button, Typography } from '@appwrite.io/pink-svelte';
-    import { onMount } from 'svelte';
-
-    let isSmallViewport = false;
-
-    function updateViewport() {
-        isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
-    }
-
-    onMount(() => {
-        updateViewport();
-    });
+    import { isSmallViewport } from '$lib/stores/viewport';
 </script>
 
-<svelte:window on:resize={updateViewport} on:load={updateViewport} />
 {#if hasOnboardingDismissed($project.$id)}
     <Cover>
         <svelte:fragment slot="header">
@@ -33,11 +22,11 @@
     <Cover>
         <svelte:fragment slot="header">
             <Layout.Stack
-                direction={isSmallViewport ? 'column' : 'row'}
+                direction={$isSmallViewport ? 'column' : 'row'}
                 justifyContent="space-between"
-                alignItems={isSmallViewport ? 'flex-start' : 'center'}
+                alignItems={$isSmallViewport ? 'flex-start' : 'center'}
                 gap="xl">
-                <Layout.Stack direction="column" gap={isSmallViewport ? 's' : 'xs'}>
+                <Layout.Stack direction="column" gap={$isSmallViewport ? 's' : 'xs'}>
                     <Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
                         >Welcome, hoi</Typography.Title>
                     <Typography.Text size="m" color="--color-fgcolor-neutral-secondary"
diff --git a/src/routes/(console)/project-[project]/overview/header.svelte b/src/routes/(console)/project-[project]/overview/header.svelte
index 89d628053..8aafbe092 100644
--- a/src/routes/(console)/project-[project]/overview/header.svelte
+++ b/src/routes/(console)/project-[project]/overview/header.svelte
@@ -1,26 +1,15 @@
 <script lang="ts">
     import { Id } from '$lib/components';
-    import { Cover, CoverTitle } from '$lib/layout';
-    import { onboarding, project } from '../store';
+    import { Cover } from '$lib/layout';
+    import { project } from '../store';
     import { hasOnboardingDismissed, setHasOnboardingDismissed } from '$lib/helpers/onboarding';
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Layout, Button, Typography } from '@appwrite.io/pink-svelte';
-    import { onMount } from 'svelte';
     import { user } from '$lib/stores/user';
-
-    let isSmallViewport = false;
-
-    function updateViewport() {
-        isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
-    }
-
-    onMount(() => {
-        updateViewport();
-    });
+    import { isSmallViewport } from '$lib/stores/viewport';
 </script>
 
-<svelte:window on:resize={updateViewport} on:load={updateViewport} />
 {#if hasOnboardingDismissed($project.$id)}
     <Cover>
         <svelte:fragment slot="header">
@@ -34,11 +23,11 @@
     <Cover>
         <svelte:fragment slot="header">
             <Layout.Stack
-                direction={isSmallViewport ? 'column' : 'row'}
+                direction={$isSmallViewport ? 'column' : 'row'}
                 justifyContent="space-between"
-                alignItems={isSmallViewport ? 'flex-start' : 'center'}
+                alignItems={$isSmallViewport ? 'flex-start' : 'center'}
                 gap="xl">
-                <Layout.Stack direction="column" gap={isSmallViewport ? 's' : 'xs'}>
+                <Layout.Stack direction="column" gap={$isSmallViewport ? 's' : 'xs'}>
                     <Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
                         >Welcome, {$user.name}</Typography.Title>
                     <Typography.Text size="m" color="--color-fgcolor-neutral-secondary"
diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index f198b5887..e22118008 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[project]/overview/onboard.svelte
@@ -23,6 +23,7 @@
     import Wizard from './keys/wizard.svelte';
     import { wizard } from '$lib/stores/wizard';
     import { onMount } from 'svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     function createKey() {
         wizard.start(Wizard);
@@ -30,18 +31,8 @@
 
     export let projectId: string;
     export let hasPlatforms: boolean;
-    let isSmallViewport = false;
-
-    function updateViewport() {
-        isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
-    }
-
-    onMount(() => {
-        updateViewport();
-    });
 </script>
 
-<svelte:window on:resize={updateViewport} on:load={updateViewport} />
 <div style:container-type="inline-size">
     <div class="console-container">
         <div class="dashboard-content">
@@ -53,8 +44,8 @@
                         </div></Step.Item>
                     <Step.Item state="current"
                         ><Layout.Stack
-                            direction={isSmallViewport ? 'column' : 'row'}
-                            gap={isSmallViewport ? 'xl' : 'xxl'}>
+                            direction={$isSmallViewport ? 'column' : 'row'}
+                            gap={$isSmallViewport ? 'xl' : 'xxl'}>
                             <Layout.Stack gap="m">
                                 <h2>Add a platform</h2>
                                 <div class="build-info">