From da1af0af99be933b5940ccd98ba0d9fbd0d4cfbb Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 23 Jan 2025 11:15:09 +0100
Subject: [PATCH] Move menu bottomsheet to console

---
 package.json                                  |  4 +-
 pnpm-lock.yaml                                | 28 +++++-----
 .../bottom-sheet/SheetMenuBlock.svelte        | 54 +++++++++++++++++++
 .../bottom-sheet/bottomSheetMenu.svelte       | 50 +++++++++++++++++
 src/lib/components/bottom-sheet/index.ts      | 27 ++++++++++
 src/lib/components/breadcrumbs.svelte         |  3 +-
 src/lib/components/index.ts                   |  1 +
 src/lib/components/navbar.svelte              |  5 +-
 8 files changed, 152 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/components/bottom-sheet/SheetMenuBlock.svelte
 create mode 100644 src/lib/components/bottom-sheet/bottomSheetMenu.svelte
 create mode 100644 src/lib/components/bottom-sheet/index.ts

diff --git a/package.json b/package.json
index b7076fd06..1cdcfbac4 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
         "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193",
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5824678",
         "@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 ad9f34fc3..8662c3c61 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,11 +18,11 @@ 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@72b1958
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678(svelte@4.2.19)
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5824678
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5824678(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@1fe7674343bab0dc86d4cbc98c74055c9e87be0b':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1fe7674343bab0dc86d4cbc98c74055c9e87be0b}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678}
     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@72b1958':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@58246784b25c0184134dd08be1bd13639d8c6863':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@58246784b25c0184134dd08be1bd13639d8c6863}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -233,8 +233,8 @@ packages:
   '@appwrite.io/pink-icons@0.25.0':
     resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5824678':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5824678}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4041,19 +4041,19 @@ 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@1fe7674343bab0dc86d4cbc98c74055c9e87be0b(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678(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@72b1958(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@58246784b25c0184134dd08be1bd13639d8c6863(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
   '@appwrite.io/pink-icons@0.25.0': {}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674(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@5824678(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@1fe7674343bab0dc86d4cbc98c74055c9e87be0b(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@58246784b25c0184134dd08be1bd13639d8c6863(svelte@4.2.19)
       '@floating-ui/dom': 1.6.12
       '@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/bottom-sheet/SheetMenuBlock.svelte b/src/lib/components/bottom-sheet/SheetMenuBlock.svelte
new file mode 100644
index 000000000..51d5e1c7a
--- /dev/null
+++ b/src/lib/components/bottom-sheet/SheetMenuBlock.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import type { SheetMenu, SubMenu } from '$lib/components/bottom-sheet/index.js';
+    import { ActionMenu } from '@appwrite.io/pink-svelte';
+
+    export let menu: SubMenu;
+    export let isOpen: boolean;
+    export let navigateSubMenu: (menu: SheetMenu) => void;
+</script>
+
+{#if menu.title}
+    <span class="menu-title">{menu.title}</span>
+{/if}
+<ActionMenu.Root noPadding={true}>
+    {#each menu.items as menuItem}
+        {#if menuItem.href}
+            <ActionMenu.Item.Anchor
+                size="l"
+                leadingIcon={menuItem.leadingIcon}
+                trailingIcon={menuItem.trailingIcon}
+                href={menuItem.href}
+                on:click={() => {
+                    isOpen = false;
+                }}>
+                <span class="anchor">{menuItem.name}</span>
+            </ActionMenu.Item.Anchor>
+        {:else}
+            <ActionMenu.Item.Button
+                size="l"
+                leadingIcon={menuItem.leadingIcon}
+                trailingIcon={menuItem.trailingIcon}
+                on:click={() => {
+                    if (menuItem.subMenu) {
+                        navigateSubMenu(menuItem.subMenu);
+                    } else if (menuItem.onClick !== undefined) {
+                        menuItem.onClick();
+                        isOpen = false;
+                    }
+                }}>
+                {menuItem.name}
+            </ActionMenu.Item.Button>
+        {/if}
+    {/each}
+</ActionMenu.Root>
+
+<style lang="scss">
+    .menu-title {
+        padding: var(--space-3) var(--space-5);
+        display: block;
+        text-transform: uppercase;
+        font-size: var(--font-size-xs, 12px);
+        line-height: 130%; /* 15.6px */
+        letter-spacing: 0.96px;
+    }
+</style>
diff --git a/src/lib/components/bottom-sheet/bottomSheetMenu.svelte b/src/lib/components/bottom-sheet/bottomSheetMenu.svelte
new file mode 100644
index 000000000..8934de273
--- /dev/null
+++ b/src/lib/components/bottom-sheet/bottomSheetMenu.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import SheetMenuBlock from './SheetMenuBlock.svelte';
+    import { BottomSheet } from '@appwrite.io/pink-svelte';
+    import type { $$Props, SheetMenu } from '$lib/components/bottom-sheet/index';
+
+    export let menu: $$Props['menu'];
+    export let isOpen: $$Props['isOpen'] = false;
+    let sheetContainerRef: $$Props['sheetContainerRef'];
+    let activeMenu = menu;
+    let showDivider = true;
+
+    function navigateSubMenu(subMenu: SheetMenu) {
+        if (sheetContainerRef) {
+            const currentHeight = sheetContainerRef.offsetHeight;
+            sheetContainerRef.style.overflowY = 'hidden';
+            sheetContainerRef.style.maxHeight = `${currentHeight}px`;
+            activeMenu = subMenu;
+            requestAnimationFrame(() => {
+                if (sheetContainerRef) {
+                    const newHeight = sheetContainerRef.scrollHeight;
+                    sheetContainerRef.style.maxHeight = `${newHeight + 5}px`;
+                }
+            });
+        } else {
+            activeMenu = subMenu;
+        }
+        showDivider = activeMenu.bottom !== undefined;
+    }
+
+    function restoreMenu(isOpenState: boolean) {
+        showDivider = activeMenu.bottom !== undefined;
+        if (!isOpenState) {
+            setTimeout(() => {
+                activeMenu = menu;
+            }, 400);
+        }
+    }
+
+    $: restoreMenu(isOpen);
+</script>
+
+<BottomSheet.Default bind:isOpen useSlots={true} bind:sheetContainerRef bind:showDivider>
+    <div slot="top"><SheetMenuBlock menu={activeMenu.top} {navigateSubMenu} bind:isOpen /></div>
+    <div slot="bottom">
+        {#if activeMenu.bottom}<SheetMenuBlock
+                menu={activeMenu.bottom}
+                {navigateSubMenu}
+                bind:isOpen />{/if}
+    </div>
+</BottomSheet.Default>
diff --git a/src/lib/components/bottom-sheet/index.ts b/src/lib/components/bottom-sheet/index.ts
new file mode 100644
index 000000000..80cb607e4
--- /dev/null
+++ b/src/lib/components/bottom-sheet/index.ts
@@ -0,0 +1,27 @@
+import Menu from './bottomSheetMenu.svelte';
+import type { ComponentType } from 'svelte';
+
+export type $$Props = {
+    isOpen: boolean;
+    useSlots?: boolean;
+    sheetContainerRef?: HTMLDialogElement;
+    showDivider?: boolean;
+    menu: SheetMenu;
+};
+export type SubMenu = {
+    title?: string;
+    items: MenuItem[];
+};
+
+type MenuItem = {
+    name: string;
+    leadingIcon?: ComponentType;
+    trailingIcon?: ComponentType;
+    onClick?: () => void;
+    href?: string;
+    subMenu?: { top: SubMenu; bottom: SubMenu };
+};
+
+export type SheetMenu = { top: SubMenu; bottom: SubMenu };
+
+export default { Menu };
diff --git a/src/lib/components/breadcrumbs.svelte b/src/lib/components/breadcrumbs.svelte
index f5bf1cd89..57cc3e7cc 100644
--- a/src/lib/components/breadcrumbs.svelte
+++ b/src/lib/components/breadcrumbs.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { createMenubar, melt } from '@melt-ui/svelte';
-    import { Badge, Icon, BottomSheet, type SheetMenu } from '@appwrite.io/pink-svelte';
+    import { Badge, Icon, type SheetMenu } from '@appwrite.io/pink-svelte';
     import { IconChevronDown, IconChevronRight, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { BottomSheet } from '$lib/components';
 
     type Project = {
         name: string;
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index c760d57ad..80f6a9178 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -80,3 +80,4 @@ export { default as BottomModalAlert } from './bottomModalAlert.svelte';
 export { default as Navbar } from './navbar.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
 export { default as Sidebar } from './sidebar.svelte';
+export { default as BottomSheet } from './bottom-sheet/index';
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 034e50dde..97a497307 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -7,8 +7,7 @@
         Tooltip,
         Card,
         ActionList,
-        Input,
-        BottomSheet
+        Input
     } from '@appwrite.io/pink-svelte';
     import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
     import type { BaseNavbarProps } from '@appwrite.io/pink-svelte/dist/navbar/Base.svelte';
@@ -22,7 +21,7 @@
         IconSun,
         IconUser
     } from '@appwrite.io/pink-icons-svelte';
-    import { DropList, Support, Breadcrumbs } from '$lib/components';
+    import { DropList, Support, Breadcrumbs, BottomSheet } from '$lib/components';
     import { Feedback } from '$lib/components/feedback';
     import { feedback } from '$lib/stores/feedback';
     import { isMac } from '$lib/helpers/platform';