Update: cleanups, improvements

src/lib/components/billing/selectPaymentMethod.svelte

@@ -11,9 +11,9 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
 
-    export let methods: PaymentList;
     export let value: string;
     export let taxId = '';
+    export let methods: PaymentList;
 
     let showTaxId = false;
     let showPaymentModal = false;

src/lib/components/bottom-sheet/SheetMenuBlock.svelte

@@ -11,7 +11,7 @@
 {#if menu?.title}
     <span class="menu-title">{menu.title}</span>
 {/if}
-<ActionMenu.Root>
+<ActionMenu.Root width="100%">
     {#each menu.items as menuItem}
         {#if menuItem.href}
             <ActionMenu.Item.Anchor

src/lib/components/breadcrumbs.svelte

@@ -1,6 +1,14 @@
 <script lang="ts">
     import { createMenubar, melt } from '@melt-ui/svelte';
-    import { Badge, Icon, type SheetMenu, ActionMenu, Card } from '@appwrite.io/pink-svelte';
+    import {
+        Badge,
+        Icon,
+        type SheetMenu,
+        Layout,
+        ActionMenu,
+        Card,
+        Skeleton
+    } from '@appwrite.io/pink-svelte';
     import {
         IconChevronDown,
         IconChevronRight,
@@ -14,20 +22,13 @@
     import { base } from '$app/paths';
     import { newOrgModal } from '$lib/stores/organization';
     import { Click, trackEvent } from '$lib/actions/analytics';
-    import { page } from '$app/stores';
+    import type { Models } from '@appwrite.io/console';
 
-    type Project = {
-        name: string;
-        $id: string;
-        isSelected: boolean;
-        region: string;
-    };
     type Organization = {
         name: string;
         $id: string;
         tierName: string;
         isSelected: boolean;
-        projects: Array<Project>;
     };
 
     const {
@@ -62,13 +63,15 @@
         }
     } = createMenu();
 
-    export let organizations: Organization[] = [];
+    let isLoadingProjects = true;
+    let loadedProjects: Models.ProjectList = { total: 0, projects: [] };
 
-    $: selectedOrg = organizations.find((organization) => organization.isSelected);
-    $: selectedProject = $page.data.project;
+    export let organizations: Organization[] = [];
+    export let currentProject: Models.Project | null = null;
+    export let projects: Promise<Models.ProjectList> = Promise.resolve(loadedProjects);
 
-    let organisationBottomSheetOpen = false;
     let projectsBottomSheetOpen = false;
+    let organisationBottomSheetOpen = false;
 
     function createOrg() {
         trackEvent(Click.OrganizationClickCreate, { source: 'breadcrumbs' });
@@ -96,92 +99,89 @@
         }
     };
 
-    $: organizationsBottomSheet = !selectedOrg
-        ? switchOrganization
-        : ({
-              top: {
-                  items: [
-                      {
-                          name: 'Organization overview',
-                          href: `${base}/organization-${selectedOrg?.$id}`
-                      }
-                  ]
-              },
-              bottom:
-                  organizations.length > 1
-                      ? {
-                            items: [
-                                {
-                                    name: 'Switch organization',
-                                    trailingIcon: IconChevronRight,
-                                    subMenu: switchOrganization
-                                }
-                            ]
-                        }
-                      : {
-                            items: [
-                                {
-                                    name: 'Create organization',
-                                    leadingIcon: IconPlus,
-                                    onClick: createOrg
-                                }
-                            ]
-                        }
-          } satisfies SheetMenu);
-
-    $: projectsBottomSheet = {
-        top:
-            selectedOrg?.projects.length > 1
-                ? {
-                      title: 'Switch project',
-                      items: !selectedOrg
-                          ? []
-                          : selectedOrg?.projects
-                                .map((project, index) => {
-                                    if (index < 4) {
-                                        return {
-                                            name: project.name,
-                                            href: `${base}/project-${project.region}-${project.$id}/overview`
-                                        };
-                                    } else if (index === 4) {
-                                        return {
-                                            name: 'All projects',
-                                            href: `${base}/organization-${selectedOrg?.$id}`
-                                        };
-                                    }
-                                    return null;
-                                })
-                                .filter((project) => project !== null)
-                  }
-                : {
+    async function createProjectsBottomSheet(organization: Organization): Promise<SheetMenu> {
+        isLoadingProjects = true;
+        loadedProjects = await projects;
+        isLoadingProjects = false;
+
+        const createProjectItem = {
+            name: 'Create project',
+            trailingIcon: IconPlus,
+            href: `${base}/organization-${organization?.$id}?create-project`
+        };
+
+        if (loadedProjects.total > 1 && selectedOrg) {
+            const projectLinks = loadedProjects.projects.slice(0, 4).map((project) => ({
+                name: project.name,
+                href: `${base}/project-${project.region}-${project.$id}/overview/platforms`
+            }));
+
+            if (loadedProjects.projects.length > 4) {
+                projectLinks.push({
+                    name: 'All projects',
+                    href: `${base}/organization-${selectedOrg.$id}`
+                });
+            }
+
+            return {
+                top: { title: 'Switch project', items: projectLinks },
+                bottom: { items: [createProjectItem] }
+            };
+        }
+
+        return {
+            top: { items: [createProjectItem] },
+            bottom: { items: [createProjectItem] }
+        };
+    }
+
+    function createOrganizationBottomSheet(organization: Organization) {
+        return !organization
+            ? switchOrganization
+            : ({
+                  top: {
                       items: [
                           {
-                              name: 'Create project',
-                              trailingIcon: IconPlus,
-                              href: `${base}/organization-${selectedOrg?.$id}?create-project`
+                              name: 'Organization overview',
+                              href: `${base}/organization-${organization?.$id}`
                           }
                       ]
                   },
-        bottom:
-            selectedOrg?.projects.length > 1
-                ? {
-                      items: [
-                          {
-                              name: 'Create project',
-                              trailingIcon: IconPlus,
-                              href: `${base}/organization-${selectedOrg?.$id}?create-project`
-                          }
-                      ]
-                  }
-                : undefined
-    } satisfies SheetMenu;
+                  bottom:
+                      organizations.length > 1
+                          ? {
+                                items: [
+                                    {
+                                        name: 'Switch organization',
+                                        trailingIcon: IconChevronRight,
+                                        subMenu: switchOrganization
+                                    }
+                                ]
+                            }
+                          : {
+                                items: [
+                                    {
+                                        name: 'Create organization',
+                                        leadingIcon: IconPlus,
+                                        onClick: createOrg
+                                    }
+                                ]
+                            }
+              } satisfies SheetMenu);
+    }
 
     function onResize() {
         if ((organisationBottomSheetOpen || projectsBottomSheetOpen) && !$isSmallViewport) {
             organisationBottomSheetOpen = false;
             projectsBottomSheetOpen = false;
         }
     }
+
+    $: selectedOrg = organizations.find((org) => org.isSelected);
+
+    $: projectsBottomSheet = createProjectsBottomSheet(selectedOrg);
+
+    $: organizationsBottomSheet = createOrganizationBottomSheet(selectedOrg);
 </script>
 
 <svelte:window on:resize={onResize} />
@@ -208,7 +208,7 @@
                 organisationBottomSheetOpen = true;
             }}
             aria-label="Open organizations tab">
-            <span class="orgName" class:noProjects={!selectedProject}
+            <span class="orgName" class:noProjects={!currentProject}
                 >{selectedOrg?.name ?? 'Organization'}</span>
             <span class="not-mobile"
                 ><Badge variant="secondary" content={selectedOrg?.tierName ?? ''} /></span>
@@ -288,15 +288,15 @@
         </Card.Base>
     </div>
 
-    {#if selectedOrg && selectedProject}
+    {#if selectedOrg && currentProject}
         <span class="breadcrumb-separator">/</span>
         {#if !$isSmallViewport}
             <button
                 type="button"
                 class="trigger"
                 use:melt={$triggerProjects}
                 aria-label="Open projects tab">
-                <span class="projectName">{selectedProject.name}</span>
+                <span class="projectName">{currentProject.name}</span>
                 <Icon icon={IconChevronDown} size="s" />
             </button>
         {:else}
@@ -305,20 +305,28 @@
                 class="trigger"
                 on:click={() => (projectsBottomSheetOpen = true)}
                 aria-label="Open projects tab">
-                <span class="projectName">{selectedProject.name}</span>
+                <span class="projectName">{currentProject.name}</span>
                 <Icon icon={IconChevronDown} size="s" />
             </button>
         {/if}
 
         <div class="menu" use:melt={$menuProjects}>
             <Card.Base padding="xxxs" shadow={true}>
-                {#if selectedOrg.projects.length > 1}
-                    {#each selectedOrg.projects as project, index}
+                {#if isLoadingProjects}
+                    <div style:margin-inline="0.25rem" style:margin-block="0.25rem">
+                        <Layout.Stack gap="s">
+                            <!-- 2 should be enough -->
+                            <Skeleton width="100%" height={30} variant="line" />
+                            <Skeleton width="100%" height={30} variant="line" />
+                        </Layout.Stack>
+                    </div>
+                {:else if loadedProjects.total > 1}
+                    {#each loadedProjects.projects as project, index}
                         {#if index < 4}
                             <div use:melt={$itemProjects}>
                                 <ActionMenu.Root>
                                     <ActionMenu.Item.Anchor
-                                        href={`${base}/project-${project.region}-${project.$id}`}>
+                                        href={`${base}/project-${project.region}-${project.$id}/overview/platforms`}>
                                         {project.name}
                                     </ActionMenu.Item.Anchor>
                                 </ActionMenu.Root>
@@ -348,8 +356,12 @@
         </div>
     {/if}
 </div>
+
 <BottomSheet.Menu bind:isOpen={organisationBottomSheetOpen} menu={organizationsBottomSheet} />
-<BottomSheet.Menu bind:isOpen={projectsBottomSheetOpen} menu={projectsBottomSheet} />
+
+{#await projectsBottomSheet then menu}
+    <BottomSheet.Menu bind:isOpen={projectsBottomSheetOpen} {menu} />
+{/await}
 
 <style lang="scss">
     .menu {

src/lib/components/copy.svelte

@@ -43,8 +43,12 @@
         style:cursor="pointer"
         on:click|preventDefault|stopPropagation={handleClick}
         on:keyup={clickOnEnter}
-        on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}>
+        on:mouseenter={() => setTimeout(() => (content = copyText))}>
         <slot />
     </span>
-    <p slot="tooltip">{content}</p>
+    <p slot="tooltip" let:showing>
+        {#if showing}
+            {content}
+        {/if}
+    </p>
 </Tooltip>

src/lib/components/navbar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" context="module">
+    import type { HTMLAttributes } from 'svelte/elements';
+
     export type NavbarProject = {
         name: string;
         $id: string;
@@ -54,8 +56,9 @@
     import { isCloud } from '$lib/system.js';
     import { user } from '$lib/stores/user';
     import { Click, trackEvent } from '$lib/actions/analytics';
-    import type { HTMLAttributes } from 'svelte/elements';
     import { beforeNavigate } from '$app/navigation';
+    import { page } from '$app/state';
+    import type { Models } from '@appwrite.io/console';
 
     let showSupport = false;
 
@@ -67,7 +70,6 @@
             isSelected: boolean;
             showUpgrade: boolean;
             tierName: string;
-            projects: Array<NavbarProject>;
         }>;
         showAccountMenu: boolean;
     };
@@ -104,6 +106,8 @@
     export let avatar: $$Props['avatar'];
     export let sideBarIsOpen: $$Props['sideBarIsOpen'] = false;
     export let showAccountMenu = false;
+    export let currentProject: Models.Project = undefined;
+    export let projects: Promise<Models.ProjectList> = undefined;
 
     let activeTheme = $app.theme;
     let shouldAnimateThemeToggle = false;
@@ -115,7 +119,7 @@
     }
 
     $: currentOrg = organizations.find((org) => org.isSelected);
-    $: selectedProject = currentOrg?.projects.find((project) => project.isSelected);
+
     beforeNavigate(() => (showAccountMenu = false));
 </script>
 
@@ -135,13 +139,14 @@
             class="only-desktop">
             <img src={logo.src} alt={logo.alt} />
         </a>
-        <Breadcrumbs {organizations} />
-        {#if selectedProject && selectedProject.pingCount === 0}
+        <Breadcrumbs {organizations} {projects} {currentProject} />
+        {#if page.route?.id?.includes('project-') && currentProject && currentProject.pingCount === 0}
             <div class="only-desktop" style:margin-inline-start="-16px">
                 <Button.Anchor
-                    href={`${base}/project-${selectedProject.region}-${selectedProject.$id}/get-started`}
+                    size="xs"
                     variant="secondary"
-                    size="xs">Connect</Button.Anchor>
+                    href={`${base}/project-${currentProject.region}-${currentProject.$id}/get-started`}
+                    >Connect</Button.Anchor>
             </div>
         {/if}
     </div>