Merge pull request #1648 from appwrite/fix-feedback-navigation-cont3

Fix feedback navigation cont3

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@753c7733",
         "@appwrite.io/pink-legacy": "^1.0.0",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@753c7733",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@938dbd3",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

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@753c7733
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@753c7733(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@938dbd3
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@938dbd3(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -224,8 +224,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733efd753b1a94ab9d28fa3499b580a9f74':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733efd753b1a94ab9d28fa3499b580a9f74}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@938dbd3a95c30f3c85791a6cb7a31dd8adcc0da7':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@938dbd3a95c30f3c85791a6cb7a31dd8adcc0da7}
     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@753c7733':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@753c7733}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@938dbd3':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@938dbd3}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4093,7 +4093,7 @@ snapshots:
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733efd753b1a94ab9d28fa3499b580a9f74(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@938dbd3a95c30f3c85791a6cb7a31dd8adcc0da7(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@753c7733(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@938dbd3(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@753c7733efd753b1a94ab9d28fa3499b580a9f74(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@938dbd3a95c30f3c85791a6cb7a31dd8adcc0da7(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)

src/lib/components/breadcrumbs.svelte

@@ -196,7 +196,8 @@
                 organisationBottomSheetOpen = true;
             }}
             aria-label="Open organizations tab">
-            <span class="orgName">{selectedOrg?.name ?? 'Organization'}</span>
+            <span class="orgName" class:noProjects={!selectedProject}
+                >{selectedOrg?.name ?? 'Organization'}</span>
             <span class="not-mobile"
                 ><Badge variant="secondary" content={selectedOrg?.tierName ?? ''} /></span>
             <Icon icon={IconChevronDown} size="s" />
@@ -384,12 +385,8 @@
         }
     }
 
-    .item:first-of-type {
-        margin-top: 4px;
-    }
-    .item:last-of-type,
-    .switch-org {
-        margin-bottom: 4px;
+    .noProjects {
+        max-width: 150px;
     }
 
     :global(.item[data-highlighted]) {

src/lib/components/navbar.svelte

@@ -30,7 +30,7 @@
     import { base } from '$app/paths';
     import { logout } from '$lib/helpers/logout';
     import { app } from '$lib/stores/app';
-    import { isSmallViewport } from '$lib/stores/viewport';
+    import { isTabletViewport } from '$lib/stores/viewport';
 
     let showSupport = false;
 
@@ -179,7 +179,7 @@
         </div>
     </div>
 </Navbar.Base>
-{#if showAccountMenu && $isSmallViewport}
+{#if showAccountMenu && $isTabletViewport}
     <BottomSheet.Menu
         bind:isOpen={showAccountMenu}
         menu={{

src/lib/components/sidebar.svelte

@@ -118,9 +118,11 @@
                         </div>
                         {#if state !== 'icons'}
                             <div class="info" in:fade={{ delay: 200, duration: 200 }}>
-                                <Typography.Text variant="m-600"
-                                    >{progressCard.title}</Typography.Text>
                                 <Typography.Text
+                                    variant="m-500"
+                                    color="--color-fgcolor-neutral-secondary"
+                                    >{progressCard.title}</Typography.Text>
+                                <Typography.Text color="--color-fgcolor-neutral-secondary"
                                     >{progressCard.percentage}% complete</Typography.Text>
                             </div>
                         {/if}
@@ -270,6 +272,11 @@
         </div>
     </Sidebar.Base>
 </div>
+{#if subNavigation}
+    <div class="sub-navigation" class:icons={state === 'icons'}>
+        <svelte:component this={subNavigation} />
+    </div>
+{/if}
 
 <style lang="scss">
     .link {
@@ -414,6 +421,10 @@
         width: 18px;
         align-self: center;
         margin-inline: 8px;
+        @media (min-width: 1024px) {
+            margin-block-end: var(--space-2, 4px);
+            margin-block-start: var(--space-9, 24px);
+        }
     }
 
     .hidden,
@@ -497,4 +508,21 @@
     :global(button.collapse) {
         transform: translateX(-10px);
     }
+
+    .sub-navigation {
+        width: 400px;
+        height: calc(100vh - 48px);
+        display: flex;
+        justify-content: flex-end;
+        background-color: var(--color-bgcolor-neutral-primary, #fff);
+        z-index: 14;
+        position: fixed;
+        top: 48px;
+        transition: width 0.2s linear;
+
+        &.icons {
+            width: 266px;
+            transition: width 0.3s linear;
+        }
+    }
 </style>

src/lib/helpers/onboarding.ts

@@ -1,7 +1,33 @@
+import { get } from 'svelte/store';
+import { user } from '$lib/stores/user';
+import { sdk } from '$lib/stores/sdk';
+
+const userPreferences = () => get(user)?.prefs;
+
 export function hasOnboardingDismissed(projectId: string) {
-    return localStorage.getItem(`onboardingDismissed-${projectId}`) === 'true';
+    const currentPrefs = userPreferences();
+    const onboardingDismissed = currentPrefs.onboardingDismissed;
+    return (
+        onboardingDismissed &&
+        Array.isArray(onboardingDismissed) &&
+        onboardingDismissed.includes(projectId)
+    );
 }
 
-export function setHasOnboardingDismissed(projectId: string) {
-    localStorage.setItem(`onboardingDismissed-${projectId}`, 'true');
+export async function setHasOnboardingDismissed(projectId: string) {
+    const currentPrefs = userPreferences();
+    const onboardingDismissed = Array.isArray(currentPrefs?.onboardingDismissed)
+        ? currentPrefs.onboardingDismissed
+        : [];
+
+    if (!onboardingDismissed.includes(projectId)) {
+        onboardingDismissed.push(projectId);
+    }
+
+    const newPrefs = {
+        ...currentPrefs,
+        onboardingDismissed: onboardingDismissed
+    };
+
+    await sdk.forConsole.account.updatePrefs(newPrefs);
 }

src/lib/layout/cover.svelte

@@ -2,13 +2,14 @@
     import { Layout } from '@appwrite.io/pink-svelte';
 
     export let size: 'small' | 'medium' | 'large' | 'xl' = null;
+    export let blocksize = '152px';
 
     $: style = size
         ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
         : '';
 </script>
 
-<div class="top-cover-console">
+<div class="top-cover-console" style:block-size={blocksize}>
     <div class="cover-container" {style}>
         <Layout.Stack direction="row" alignItems="center">
             <slot name="header" />
@@ -22,7 +23,6 @@
         container-type: inline-size;
         padding-block-start: var(--base-32);
         padding-block-end: var(--base-16);
-        block-size: 152px;
         border-bottom: 1px solid var(--color-border-neutral, #2d2d31);
         background: var(--color-bgcolor-neutral-primary, #1d1d21);
         margin-left: -190px;

src/lib/layout/navigation.svelte

@@ -30,32 +30,3 @@
 </script>
 
 <svelte:window on:keydown={handleKeyDown} />
-
-{#if subNavigation}
-    <div class="level-2-nav" class:icons={state === 'icons'}>
-        <svelte:component this={subNavigation} />
-    </div>
-{/if}
-
-<style>
-    .level-2-nav {
-        display: none;
-
-        @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 !important;
-    }
-
-    .icons {
-        left: 54px;
-    }
-</style>

src/lib/layout/shell.svelte

@@ -177,7 +177,7 @@
         min-height: calc(100vh - 48px);
     }
 
-    :global(main:has(.level-2-nav)) {
+    :global(main:has(.sub-navigation)) {
         .main-content {
             @media (min-width: 1024px) {
                 padding-left: 200px;

src/routes/(console)/project-[project]/overview/header.svelte

@@ -21,7 +21,7 @@
         </svelte:fragment>
     </Cover>
 {:else}
-    <Cover>
+    <Cover blocksize="auto">
         <svelte:fragment slot="header">
             <Layout.Stack
                 direction={$isSmallViewport ? 'column' : 'row'}
@@ -39,8 +39,8 @@
                         <Button.Button
                             variant="secondary"
                             size="s"
-                            on:click={() => {
-                                setHasOnboardingDismissed($project.$id);
+                            on:click={async () => {
+                                await setHasOnboardingDismissed($project.$id);
                                 if (location.href.endsWith('get-started')) {
                                     goto(`${base}/project-${$project.$id}`);
                                 } else {

src/routes/(console)/project-[project]/overview/onboard.svelte

@@ -9,10 +9,6 @@
     import UsersImgSourceDark from './assets/users-dark.svg';
     import DiscordImgSource from './assets/discord.png';
     import DiscordImgSourceDark from './assets/discord-dark.png';
-    import PlatformWebImgSource from './assets/platform-web.png';
-    import PlatformWebImgSourceDark from './assets/platform-web-dark.png';
-    import PlatformServerImgSource from './assets/platform-server.png';
-    import PlatformServerImgSourceDark from './assets/platform-server-dark.png';
     import PlatformIosImgSource from './assets/platform-ios.svg';
     import PlatformIosImgSourceDark from './assets/platform-ios-dark.svg';
     import PlatformAndroidImgSource from './assets/platform-android.svg';
@@ -60,7 +56,9 @@
                                 </Layout.Stack>
                             </div>
                             <Layout.Stack gap="l">
-                                <Layout.Stack gap="l" direction="row">
+                                <Layout.Stack
+                                    gap="l"
+                                    direction={$isSmallViewport ? 'column' : 'row'}>
                                     <Card.Button on:click={() => addPlatform(0)} padding="s"
                                         ><Layout.Stack gap="xl"
                                             ><div class="card-top-image web-image-light"></div>
@@ -90,7 +88,9 @@
                                             </Layout.Stack>
                                         </Layout.Stack></Card.Button>
                                 </Layout.Stack>
-                                <Layout.Stack gap="l" direction="row">
+                                <Layout.Stack
+                                    gap="l"
+                                    direction={$isSmallViewport ? 'column' : 'row'}>
                                     <Card.Button on:click={() => addPlatform(3)} padding="s">
                                         <Layout.Stack gap="xxl">
                                             <img
@@ -347,6 +347,7 @@
             height: 160px;
             background-size: cover;
             background-position: center;
+            border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
 
             @media (min-width: 1200px) {
                 height: 187px;