From e19851b8612595ab28d9b4a76a484a0c59ffdd53 Mon Sep 17 00:00:00 2001
From: Aidan Bleser <aidanbleser35@gmail.com>
Date: Thu, 25 Jul 2024 10:13:55 -0500
Subject: [PATCH] Fixes review comments

---
 package.json                                          |  1 -
 pnpm-lock.yaml                                        | 11 -----------
 src/lib/assets/icons/index.ts                         |  6 ++++--
 src/lib/assets/icons/x.svg                            |  5 +++++
 src/lib/components/shared/command/command-list.svelte |  9 ++++++++-
 .../components/shared/{ => command}/command.svelte    |  7 +++++--
 src/lib/components/shared/command/index.ts            |  5 +++++
 src/lib/components/ui/dialog/dialog-content.svelte    |  6 +++---
 src/lib/utils.ts                                      | 10 ++++++++++
 src/routes/header.svelte                              |  2 +-
 10 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/assets/icons/x.svg
 rename src/lib/components/shared/{ => command}/command.svelte (96%)
 create mode 100644 src/lib/components/shared/command/index.ts

diff --git a/package.json b/package.json
index 40170a0..44243b5 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 48b34f7..de23c12 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,6 @@ dependencies:
   clsx:
     specifier: ^2.1.1
     version: 2.1.1
-  lucide-svelte:
-    specifier: ^0.414.0
-    version: 0.414.0(svelte@4.2.18)
   svelte-legos:
     specifier: ^0.2.3
     version: 0.2.3(svelte@4.2.18)
@@ -1343,14 +1340,6 @@ packages:
   /lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  /lucide-svelte@0.414.0(svelte@4.2.18):
-    resolution: {integrity: sha512-LTEzcm5rix345H2rLxH0nBNZRaFx4I2yL48yDgiIkM9jtUb4LZ629e0MuUmeosS35dGnLFmnGeGNDOt9SKouDA==}
-    peerDependencies:
-      svelte: ^3 || ^4 || ^5.0.0-next.42
-    dependencies:
-      svelte: 4.2.18
-    dev: false
-
   /magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
     dependencies:
diff --git a/src/lib/assets/icons/index.ts b/src/lib/assets/icons/index.ts
index 6242db0..62b0a2a 100644
--- a/src/lib/assets/icons/index.ts
+++ b/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
 };
diff --git a/src/lib/assets/icons/x.svg b/src/lib/assets/icons/x.svg
new file mode 100644
index 0000000..bf4dbaf
--- /dev/null
+++ b/src/lib/assets/icons/x.svg
@@ -0,0 +1,5 @@
+<svg stroke-linejoin="round" color="currentColor" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M12.4697 13.5303L13 14.0607L14.0607 13L13.5303 12.4697L9.06065 7.99999L13.5303 3.53032L14.0607 2.99999L13 1.93933L12.4697 2.46966L7.99999 6.93933L3.53032 2.46966L2.99999 1.93933L1.93933 2.99999L2.46966 3.53032L6.93933 7.99999L2.46966 12.4697L1.93933 13L2.99999 14.0607L3.53032 13.5303L7.99999 9.06065L12.4697 13.5303Z"
+        fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/lib/components/shared/command/command-list.svelte b/src/lib/components/shared/command/command-list.svelte
index a3beeda..98c752b 100644
--- a/src/lib/components/shared/command/command-list.svelte
+++ b/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',
diff --git a/src/lib/components/shared/command.svelte b/src/lib/components/shared/command/command.svelte
similarity index 96%
rename from src/lib/components/shared/command.svelte
rename to src/lib/components/shared/command/command.svelte
index f55bb3b..130166b 100644
--- a/src/lib/components/shared/command.svelte
+++ b/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
diff --git a/src/lib/components/shared/command/index.ts b/src/lib/components/shared/command/index.ts
new file mode 100644
index 0000000..05952ed
--- /dev/null
+++ b/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');
\ No newline at end of file
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index d6d87c6..bf9bbd0 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/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}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 54e186e..5d4f200 100644
--- a/src/lib/utils.ts
+++ b/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),
+	};
+};
+
diff --git a/src/routes/header.svelte b/src/routes/header.svelte
index 2a98d6d..2242663 100644
--- a/src/routes/header.svelte
+++ b/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;