chore(deps): update drawer to diadem-vaul-svelte + mobile/scout interaction fixes #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

ccev merged 8 commits into ccev:main from roundaboutluke:deps/diadem-vaul-svelte

Feb 5, 2026

package.json

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -60,7 +60,7 @@
  
    		"tailwind-merge": "^2.5.5",

    		"toml": "^3.0.0",

    		"uicons.js": "^2.2.0",

    		"vaul-svelte": "^0.3.2",

    		"diadem-vaul-svelte": "^0.1.3",

    		"winston": "^3.18.3",

    		"winston-daily-rotate-file": "^5.0.0",

    		"zod": "^4.1.12"

pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

src/components/map/Map.svelte

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -35,7 +35,7 @@
  
    		openFiltersetModal

    	} from "@/lib/features/filters/filtersetPageData.svelte";

    	import { filtersetPageReset } from "@/lib/features/filters/filtersetPages.svelte";

    	import { openMenu } from "@/lib/ui/menus.svelte";

    	import { Menu, openMenu } from "@/lib/ui/menus.svelte";

    	import { MapObjectLayerId, MapSourceId } from "@/lib/map/layers";

    	import { MapObjectFeatureType } from "@/lib/map/featuresGen.svelte";

    @@ -113,7 +113,7 @@
  
    			}

    			if (getCurrentSelectedFiltersetIsShared()) {

    				openMenu("filters");

    				openMenu(Menu.FILTERS);

    				filtersetPageReset();

    				tick().then(openFiltersetModal);

    			}

src/components/map/WeatherOverview.svelte

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -15,7 +15,7 @@
  
    	import { getIconType } from '@/lib/services/uicons.svelte.js';

    	import { watch } from 'runed';

    	import type { WeatherData } from '@/lib/types/mapObjectData/weather';

    	import { openMenu } from '@/lib/ui/menus.svelte.js';

    	import { closeMenu, openMenu } from "@/lib/ui/menus.svelte.js";

    	import { hasLoadedFeature, LoadedFeature } from '@/lib/services/initialLoad.svelte.js';

    	import { timestampToLocalTime } from '@/lib/utils/timestampToLocalTime';

    	import { currentTimestamp } from '@/lib/utils/currentTimestamp';

    @@ -37,7 +37,7 @@
  
    	async function onClick() {

    		isClicked = !isClicked;

    		openMenu(null);

    		closeMenu();

    		if (isClicked && getMap()?.isMoving()) {

    			ignoreWatch = true;

src/components/menus/DesktopMenu.svelte

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,5 +1,5 @@
  
    <script lang="ts">

    	import { getOpenedMenu, openMenu } from '@/lib/ui/menus.svelte.js';

    	import { closeMenu, getOpenedMenu, openMenu } from "@/lib/ui/menus.svelte.js";

    	import MenuContainer from '@/components/menus/MenuContainer.svelte';

    	import CloseButton from '@/components/ui/CloseButton.svelte';

    	import { slide } from 'svelte/transition';

    @@ -18,7 +18,7 @@
  
    			{m["nav_" + getOpenedMenu()]()}

    		</h1>

    		<CloseButton

    			onclick={() => openMenu(null)}

    			onclick={closeMenu}

    			class="mr-2"

    		/>

    	</div>

src/components/menus/MobileMenu.svelte

This file was deleted.

src/components/menus/mobile/MobileMenu.svelte

-Original file line number
+Diff line change
@@ -0,0 +1,15 @@
+    <script lang="ts">
+    	import { Drawer } from 'diadem-vaul-svelte';
+    	import { closeMenu, getOpenedMenu, Menu, openMenu } from "@/lib/ui/menus.svelte.ts";
+    	import MenuContainer from "@/components/menus/MenuContainer.svelte";
+    	import CloseButton from "@/components/ui/CloseButton.svelte";
+    	import { m } from "@/lib/paraglide/messages";
+    	import MobileMenuMain from "@/components/menus/mobile/MobileMenuMain.svelte";
+    	import MobileMenuStatic from "@/components/menus/mobile/MobileMenuStatic.svelte";
+    	let menu = $derived(getOpenedMenu())
+    </script>
+    <MobileMenuMain menus={[Menu.FILTERS, Menu.PROFILE]} />
+    <MobileMenuStatic menus={[Menu.SCOUT]} />

src/components/menus/mobile/MobileMenuMain.svelte

-Original file line number
+Diff line change
@@ -0,0 +1,53 @@
+    <script lang="ts">
+    	import { Drawer } from 'diadem-vaul-svelte';
+    	import { closeMenu, getOpenedMenu, Menu, openMenu } from "@/lib/ui/menus.svelte.ts";
+    	import MenuContainer from "@/components/menus/MenuContainer.svelte";
+    	import MobileTitle from "@/components/menus/mobile/MobileTitle.svelte";
+    	let {
+    		menus
+    	}: {
+    		menus: (Menu | null)[]
+    	} = $props()
+    	let activeSnapPoint: number = $state(0.55)
+    	let contentClass = $derived(activeSnapPoint === 1 ? "drawer-full" : "drawer-partial")
+    </script>
+    <Drawer.Root
+    	open={menus.includes(getOpenedMenu())}
+    	onOpenChangeComplete={closeMenu}
+    	closeOnOutsideClick={false}
+    	snapPoints={[0.62, 1]}
+    	bind:activeSnapPoint
+    >
+    	<Drawer.Portal>
+    		<Drawer.Content
+    			class="{contentClass} duration-150! fixed flex flex-col bottom-0 z-10 px-2 pt-2 w-full h-full border border-t-border bg-card/60 backdrop-blur-sm"
+    		>
+    			<MobileTitle />
+    			<div
+    				class="pb-20 content"
+    			>
+    				<MenuContainer />
+    			</div>
+    		</Drawer.Content>
+    	</Drawer.Portal>
+    </Drawer.Root>
+    <style>
+        :global(.drawer-full) {
+            & .content {
+                overflow-y: auto;
+            }
+        }
+        :global(.drawer-partial) {
+            border-top-left-radius: calc(var(--radius) + 4px);
+            border-top-right-radius: calc(var(--radius) + 4px);
+            & .content {
+                overflow-y: hidden;
+            }
+        }
+    </style>

src/components/menus/mobile/MobileMenuStatic.svelte

-Original file line number
+Diff line change
@@ -0,0 +1,33 @@
+    <script lang="ts">
+    	import { Drawer } from 'diadem-vaul-svelte';
+    	import { closeMenu, getOpenedMenu, Menu } from "@/lib/ui/menus.svelte.ts";
+    	import MenuContainer from "@/components/menus/MenuContainer.svelte";
+    	import MobileTitle from "@/components/menus/mobile/MobileTitle.svelte";
+    	let {
+    		menus
+    	}: {
+    		menus: (Menu | null)[]
+    	} = $props()
+    </script>
+    <Drawer.Root
+    	open={menus.includes(getOpenedMenu())}
+    	onOpenChangeComplete={closeMenu}
+    	closeOnOutsideClick={false}
+    >
+    	<Drawer.Portal>
+    		<Drawer.Content
+    			class="duration-150! fixed flex flex-col bottom-0 z-10 px-2 pt-2 w-full h-fit border border-t-border bg-card/60 backdrop-blur-sm rounded-t-xl"
+    		>
+    			<MobileTitle />
+    			<div
+    				class="pb-20 content"
+    			>
+    				<MenuContainer />
+    			</div>
+    		</Drawer.Content>
+    	</Drawer.Portal>
+    </Drawer.Root>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(deps): update drawer to diadem-vaul-svelte + mobile/scout interaction fixes #75

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!