chore: update runed dependency to version 0.23.2 and refactor MediaQu…

…ery usage (#87) Co-authored-by: Davis SHYAKA <[email protected]>
shyakadavis · Feb 4, 2025 · f92d9d4 · f92d9d4
1 parent 0f4aa00
commit f92d9d4
Show file tree

Hide file tree

Showing 11 changed files with 13 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"runed": "^0.15.4",
+		"runed": "^0.23.2",
 		"shiki": "^2.3.0",
 		"svelte": "5.19.7",
 		"svelte-check": "^4.1.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/shared/command/command.svelte b/src/lib/components/shared/command/command.svelte
@@ -6,7 +6,7 @@
 	import * as Drawer from '$lib/components/ui/drawer';
 	import { aside_items } from '$lib/config/sitemap';
 	import { command_open_state } from '$lib/stores';
-	import { MediaQuery } from 'runed';
+	import { MediaQuery } from 'svelte/reactivity';
 
 	const is_desktop = new MediaQuery('(min-width: 640px)');
 
@@ -20,7 +20,7 @@
 
 <svelte:document onkeydown={doc_keydown} />
 
-{#if is_desktop.matches}
+{#if is_desktop.current}
 	<Command.Dialog bind:open={$command_open_state} close_button="esc" class="w-full max-w-[640px]">
 		<Command.Input placeholder="Search..." class="h-[53px] px-2 text-lg" hide_search_icon />
 		<Command.List class="h-[436px] max-h-none">

diff --git a/src/lib/components/ui/modal/index.ts b/src/lib/components/ui/modal/index.ts
@@ -1,4 +1,4 @@
-import { MediaQuery } from 'runed';
+import { MediaQuery } from 'svelte/reactivity';
 import { writable } from 'svelte/store';
 import ModalContent from './modal-content.svelte';
 import ModalDescription from './modal-description.svelte';

diff --git a/src/lib/components/ui/modal/modal-content.svelte b/src/lib/components/ui/modal/modal-content.svelte
@@ -25,7 +25,7 @@
 	});
 </script>
 
-{#if is_desktop.matches}
+{#if is_desktop.current}
 	<Dialog.Content
 		bind:ref
 		class={cn(

diff --git a/src/lib/components/ui/modal/modal-description.svelte b/src/lib/components/ui/modal/modal-description.svelte
@@ -11,7 +11,7 @@
 	let { children }: Props = $props();
 </script>
 
-{#if is_desktop.matches}
+{#if is_desktop.current}
 	<Dialog.Description class="text-base text-gray-1000">
 		{@render children?.()}
 	</Dialog.Description>

diff --git a/src/lib/components/ui/modal/modal-footer.svelte b/src/lib/components/ui/modal/modal-footer.svelte
@@ -24,7 +24,7 @@
 	});
 </script>
 
-{#if is_desktop.matches}
+{#if is_desktop.current}
 	<Dialog.Footer
 		class="sticky bottom-0 rounded-b-[inherit] border-t bg-background-200 px-6 py-3 dark:bg-background-100 sm:justify-between"
 	>

diff --git a/src/lib/components/ui/modal/modal-header.svelte b/src/lib/components/ui/modal/modal-header.svelte
@@ -12,7 +12,7 @@
 	let { children }: Props = $props();
 </script>
 
-{#if is_desktop.matches}
+{#if is_desktop.current}
 	<Dialog.Header
 		class={cn('sticky top-0 px-6 pt-6', {
 			'border-b bg-background-100 pb-3 pt-3': $is_overflowing || $is_single_button

diff --git a/src/lib/components/ui/modal/modal-title.svelte b/src/lib/components/ui/modal/modal-title.svelte
@@ -11,7 +11,7 @@
 	let { children }: Props = $props();
 </script>
 
-{#if is_desktop.matches}
+{#if is_desktop.current}
 	<Dialog.Title class="text-2xl">
 		{@render children?.()}
 	</Dialog.Title>

diff --git a/src/lib/components/ui/modal/modal-trigger.svelte b/src/lib/components/ui/modal/modal-trigger.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <!-- TODO: Is there a better way to do this? -->
-{#if is_desktop.matches}
+{#if is_desktop.current}
 	{#if child_prop}
 		<Dialog.Trigger class={class_name}>
 			{#snippet child({ props })}

diff --git a/src/lib/components/ui/modal/modal.svelte b/src/lib/components/ui/modal/modal.svelte
@@ -12,7 +12,7 @@
 	let { open = $bindable(false), children }: Props = $props();
 </script>
 
-{#if is_desktop.matches}
+{#if is_desktop.current}
 	<Dialog.Root bind:open>
 		{@render children?.()}
 	</Dialog.Root>