Fixes review comments

package.json

@@ -41,7 +41,6 @@
 	"dependencies": {
 		"bits-ui": "^0.21.12",
 		"clsx": "^2.1.1",
-		"lucide-svelte": "^0.414.0",
 		"svelte-legos": "^0.2.3",
 		"tailwind-merge": "^2.4.0",
 		"tailwind-variants": "^0.2.1",

src/lib/assets/icons/index.ts

@@ -38,7 +38,7 @@ import LogoTurborepo from './logo-turborepo.svg?component';
 import LogoV0 from './logo-v0.svg?component';
 import LogoVercelCircle from './logo-vercel-circle.svg?component';
 import LogoVercel from './logo-vercel.svg?component';
-import MagnifyingGlass from './magnifying-glass.svg';
+import MagnifyingGlass from './magnifying-glass.svg?component';
 import Minus from './minus.svg?component';
 import Notification from './notification.svg?component';
 import Paperclip from './paperclip.svg?component';
@@ -52,6 +52,7 @@ import Tabs from './tabs.svg?component';
 import ThemeSwitchDark from './theme-switch-dark.svg?component';
 import ThemeSwitchLight from './theme-switch-light.svg?component';
 import ThemeSwitchSystem from './theme-switch-system.svg?component';
+import X from './x.svg?component';
 
 export const Icons = {
 	ArrowLeft,
@@ -107,5 +108,6 @@ export const Icons = {
 	Tabs,
 	ThemeSwitchDark,
 	ThemeSwitchLight,
-	ThemeSwitchSystem
+	ThemeSwitchSystem,
+	X
 };

src/lib/components/shared/command/command-list.svelte

@@ -3,8 +3,11 @@
 	import { Badge } from '$lib/components/ui/badge';
 	import { aside_items } from '$lib/config/sitemap';
 	import { cn } from '$lib/utils';
+	import { closeContext } from './index';
 
 	export let search: string;
+
+	const close = closeContext.get();
 </script>
 
 {#each Object.entries(aside_items) as item}
@@ -25,8 +28,12 @@
 		<svelte:element
 			this={disabled ? 'span' : 'a'}
 			href={link.href}
+			on:click={() => {
+				if (disabled || !$close) return;
+
+				$close();
+			}}
 			aria-disabled={disabled}
-			on:click={close}
 			aria-selected={false}
 			class={cn(
 				'flex place-items-center gap-2 rounded-md px-2 py-2 text-sm aria-selected:bg-gray-400',

src/lib/components/shared/command.svelte → src/lib/components/shared/command/command.svelte

@@ -3,7 +3,8 @@
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
 	import * as Drawer from '$lib/components/ui/drawer/index.js';
 	import { goto } from '$app/navigation';
-	import CommandList from './command/command-list.svelte';
+	import CommandList from './command-list.svelte';
+	import { closeContext } from "./index"
 
 	export let open = false;
 	const isDesktop = mediaQuery('(min-width: 600px)');
@@ -12,6 +13,8 @@
 
 	const close = () => (open = false);
 
+	closeContext.init(close);
+
 	let listRef: HTMLDivElement;
 
 	let selectedIndex = 0;
@@ -148,7 +151,7 @@
 
 {#if $isDesktop}
 	<Dialog.Root bind:open>
-		<Dialog.Content class="bg-background-100 p-0 sm:max-w-[640px]" includeX={false}>
+		<Dialog.Content class="p-0 sm:max-w-[640px]" includeX={false}>
 			<div class="flex flex-col">
 				<div class="flex h-[53px] place-items-center justify-between border-b px-3">
 					<input

src/lib/components/shared/command/index.ts

@@ -0,0 +1,5 @@
+import { context } from "$lib/utils";
+
+export type CloseFunc = () => void; 
+
+export const closeContext = context<CloseFunc | undefined>('gui-command-menu');

src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import X from 'lucide-svelte/icons/x';
+	import { Icons } from '$lib/assets/icons';
 	import * as Dialog from './index.js';
 	import { cn, flyAndScale } from '$lib/utils.js';
 
@@ -23,7 +23,7 @@
 		{transition}
 		{transitionConfig}
 		class={cn(
-			'bg-background fixed left-[50%] top-[15%] z-50 grid w-full max-w-lg translate-x-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full',
+			'fixed left-[50%] top-[15%] z-50 grid w-full max-w-lg translate-x-[-50%] gap-4 border bg-background-100 p-6 shadow-lg sm:rounded-lg md:w-full',
 			className
 		)}
 		{...$$restProps}
@@ -33,7 +33,7 @@
 			<DialogPrimitive.Close
 				class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
 			>
-				<X class="h-4 w-4" />
+				<Icons.X class="h-4 w-4" />
 				<span class="sr-only">Close</span>
 			</DialogPrimitive.Close>
 		{/if}

src/lib/utils.ts

@@ -2,6 +2,8 @@ import { type ClassValue, clsx } from 'clsx';
 import { cubicOut } from 'svelte/easing';
 import type { TransitionConfig } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
+import { getContext, setContext } from 'svelte';
+import { writable, type Writable } from 'svelte/store';
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
@@ -54,3 +56,11 @@ export const flyAndScale = (
 		easing: cubicOut
 	};
 };
+
+export const context = <T>(key: string) => {
+	return {
+		init: (value: T) => setContext(key, writable(value)),
+		get: (): Writable<T> => getContext(key),
+	};
+};
+

src/routes/header.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Icons } from '$lib/assets/icons';
 	import ThemeSwitcher from '$lib/components/shared/theme-switcher.svelte';
-	import Command from '$lib/components/shared/command.svelte';
+	import Command from '$lib/components/shared/command/command.svelte';
 
 	let open = false;