global store and shared integration on the common layout

intuitem · Dec 14, 2024 · 9c717ff · 9c717ff
1 parent 8849091
commit 9c717ff
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/...ernal)/experimental/CommandPalette.svelte → ...ents/CommandPalette/CommandPalette.svelte b/...ernal)/experimental/CommandPalette.svelte → ...ents/CommandPalette/CommandPalette.svelte
@@ -1,22 +1,24 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
 	import { Command } from 'cmdk-sv';
 	import { goto } from '$app/navigation';
 	import { onMount, onDestroy } from 'svelte';
+	import { writable } from 'svelte/store';
 
-	let open = false;
+	// Create a store for command palette visibility
+	export const commandPaletteOpen = writable(false);
 
 	// Custom case-insensitive filter
 	function caseInsensitiveFilter(value: string, search: string) {
-		// Normalize both value and search to lowercase for comparison
 		return value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
 	}
 
 	// Keyboard shortcut handler
 	function handleKeydown(e: KeyboardEvent) {
 		if (browser && (e.metaKey || e.ctrlKey) && e.key === 'k') {
 			e.preventDefault();
-			open = !open;
+			commandPaletteOpen.update((current) => !current);
 		}
 	}
 
@@ -25,20 +27,34 @@
 		{
 			label: 'Home',
 			value: '/',
-			onSelect: () => goto('/')
+			onSelect: () => {
+				commandPaletteOpen.set(false);
+				goto('/');
+			}
 		},
 		{
 			label: 'About',
 			value: '/about',
-			onSelect: () => goto('/about')
+			onSelect: () => {
+				commandPaletteOpen.set(false);
+				goto('/about');
+			}
 		},
 		{
 			label: 'Settings',
 			value: '/settings',
-			onSelect: () => goto('/settings')
+			onSelect: () => {
+				commandPaletteOpen.set(false);
+				goto('/settings');
+			}
 		}
 	];
 
+	// Close command palette on route change
+	$: if ($page.url.pathname) {
+		commandPaletteOpen.set(false);
+	}
+
 	// Add global event listener
 	onMount(() => {
 		if (browser) {
@@ -53,20 +69,18 @@
 	});
 </script>
 
-<Command.Dialog bind:open label="Command Menu">
+<Command.Dialog bind:open={$commandPaletteOpen} label="Command Menu">
 	<Command.Root filter={caseInsensitiveFilter}>
 		<Command.Input placeholder="Type a command..." />
 		<Command.List>
 			<Command.Empty>No results found.</Command.Empty>
-
 			<Command.Group heading="Navigation">
 				{#each navigationCommands as command}
 					<Command.Item value={command.label} onSelect={command.onSelect}>
 						{command.label}
 					</Command.Item>
 				{/each}
 			</Command.Group>
-
 			<Command.Separator />
 		</Command.List>
 	</Command.Root>

diff --git a/frontend/src/lib/components/CommandPalette/paletteData.ts b/frontend/src/lib/components/CommandPalette/paletteData.ts
diff --git a/frontend/src/routes/(app)/(internal)/experimental/+layout.svelte b/frontend/src/routes/(app)/(internal)/experimental/+layout.svelte
@@ -1,8 +1,3 @@
-<script>
-	import CommandPalette from './CommandPalette.svelte';
-</script>
-
-<CommandPalette />
 <div class="card bg-white shadow-lg">
 	<slot />
 </div>
diff --git a/frontend/src/routes/(app)/+layout.svelte b/frontend/src/routes/(app)/+layout.svelte
@@ -11,6 +11,8 @@
 	import { browser } from '$app/environment';
 	import * as m from '$paraglide/messages';
 
+	import CommandPalette from '$lib/components/CommandPalette/CommandPalette.svelte';
+	import commandPaletteOpen from '$lib/components/CommandPalette/CommandPalette.svelte';
 	let sidebarOpen = true;
 
 	$: classesSidebarOpen = (open: boolean) => (open ? 'ml-7 lg:ml-64' : 'ml-7');
@@ -57,6 +59,7 @@
 		</AppBar>
 	</svelte:fragment>
 	<!-- Router Slot -->
+	<CommandPalette />
 	<slot />
 	<!-- ---- / ---- -->
 </AppShell>