Merge pull request #1872 from appwrite/misc-fixes

Misc fixes

src/lib/components/menu/menu.svelte

@@ -1,23 +1,39 @@
 <script lang="ts">
+    import { setContext, onMount } from 'svelte';
     import { Card } from '@appwrite.io/pink-svelte';
     import { createMenubar, melt } from '@melt-ui/svelte';
-    import { menuOpen } from '$lib/components/menu/store';
+    import { activeMenuId, menuOpen } from '$lib/components/menu/store';
 
+    const menuId = Math.random().toString(36).slice(2);
     const {
         elements: { menubar },
         builders: { createMenu }
     } = createMenubar();
 
     const {
-        elements: { trigger: trigger, menu: menu, separator: separator },
-        states: { open }
+        elements: { trigger, menu, separator },
+        states: { open },
+        builders // for submenu for same toggle state
     } = createMenu();
 
     function toggle() {
         open.update((state) => !state);
     }
 
-    $: menuOpen.set($open);
+    open.subscribe((state) => {
+        if (state) activeMenuId.set(menuId);
+        else activeMenuId.update((current) => (current === menuId ? null : current));
+    });
+
+    onMount(() => {
+        return activeMenuId.subscribe((id) => {
+            if (id !== menuId) open.set(false);
+        });
+    });
+
+    $: menuOpen.set($open as boolean);
+
+    setContext('menuBuilder', { builders, separator });
 </script>
 
 <div use:melt={$menubar}>

src/lib/components/menu/store.ts

@@ -1,3 +1,17 @@
 import { writable } from 'svelte/store';
+import type { createMenubar } from '@melt-ui/svelte';
 
 export const menuOpen = writable(false);
+
+export const activeMenuId = writable<string | null>(null);
+
+/**
+ * Full menu context passed to submenus —
+ * includes `builders` and shared `separator`.
+ */
+export type MenuContext = {
+    separator: ReturnType<
+        ReturnType<typeof createMenubar>['builders']['createMenu']
+    >['elements']['separator'];
+    builders: ReturnType<ReturnType<typeof createMenubar>['builders']['createMenu']>['builders'];
+};

src/lib/components/menu/subMenu.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
+    import { getContext } from 'svelte';
+    import { melt } from '@melt-ui/svelte';
+    import type { MenuContext } from './store';
     import { Card } from '@appwrite.io/pink-svelte';
-    import { createMenubar, melt } from '@melt-ui/svelte';
 
-    const {
-        builders: { createMenu }
-    } = createMenubar();
-
-    const {
-        elements: { separator: separator },
-        builders: { createSubmenu: createSubmenu }
-    } = createMenu();
+    // get parent builder for toggle state!
+    const { builders, separator } = getContext<MenuContext>('menuBuilder');
+    const { createSubmenu } = builders;
 
     const {
         elements: { subMenu: subMenu, subTrigger: subTrigger }

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

@@ -14,8 +14,7 @@
         canSeeProjects,
         canSeeTeams,
         isBilling,
-        isOwner,
-        scopes
+        isOwner
     } from '$lib/stores/roles';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
     import { IconGithub, IconPlus } from '@appwrite.io/pink-icons-svelte';
@@ -33,7 +32,6 @@
     $: avatars = $members.memberships?.map((m) => m.userName || m.userEmail) ?? [];
     $: organizationId = page.params.organization;
     $: path = `${base}/organization-${organizationId}`;
-    $: console.log($scopes);
     $: tabs = [
         {
             href: path,

src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.svelte

@@ -86,7 +86,7 @@
             if (page.url.searchParams.has('runtime')) {
                 runtime = page.url.searchParams.get('runtime') as Runtime;
             } else {
-                runtime = matchingRuntimes[0];
+                runtime = matchingRuntimes[0] as Runtime;
             }
         }
     });

src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/redeployModal.svelte

@@ -36,7 +36,7 @@
             invalidate(Dependencies.DEPLOYMENTS);
             if (redirect) {
                 goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func.$id}/deployments/deployment-${deployment.$id}`
+                    `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func.$id}/deployment-${deployment.$id}`
                 );
             }
             show = false;

src/routes/(console)/project-[region]-[project]/settings/updateName.svelte

@@ -11,8 +11,7 @@
     import { onMount } from 'svelte';
     import { project } from '../store';
     import { canWriteProjects } from '$lib/stores/roles';
-
-    const endpoint = sdk.forConsole.client.config.endpoint;
+    import { getProjectEndpoint } from '$lib/helpers/project';
 
     let name: string = null;
 
@@ -45,7 +44,7 @@
     Access Appwrite services using this project's API Endpoint and Project ID.
     <svelte:fragment slot="aside">
         <CopyInput label="Project ID" value={$project.$id} />
-        <CopyInput label="API Endpoint" value={endpoint} />
+        <CopyInput label="API Endpoint" value={getProjectEndpoint()} />
     </svelte:fragment>
     <svelte:fragment slot="actions">
         <Button

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte

@@ -29,8 +29,8 @@
     let showDelete = $state(false);
     let showCancel = $state(false);
 
-    onMount(async () => {
-        sdk.forConsole.client.subscribe(
+    onMount(() => {
+        return sdk.forConsole.client.subscribe(
             'console',
             async (response: RealtimeResponseEvent<Models.Deployment>) => {
                 if (
@@ -38,7 +38,7 @@
                         `sites.${page.params.site}.deployments.${page.params.deployment}.update`
                     )
                 ) {
-                    invalidate(Dependencies.DEPLOYMENTS);
+                    await invalidate(Dependencies.DEPLOYMENT);
                 }
             }
         );