From 2f6d981ecf73fcdaefbbcbd2f35818a225dbcd65 Mon Sep 17 00:00:00 2001
From: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>
Date: Sun, 6 Oct 2024 10:28:53 +0200
Subject: [PATCH] meh

---
 .../shared/command/command-input.svelte       |  19 +++
 .../shared/command/command-list.svelte        | 125 +++++++++---------
 .../components/shared/command/command.svelte  |  90 +------------
 3 files changed, 92 insertions(+), 142 deletions(-)
 create mode 100644 src/lib/components/shared/command/command-input.svelte

diff --git a/src/lib/components/shared/command/command-input.svelte b/src/lib/components/shared/command/command-input.svelte
new file mode 100644
index 0000000..f099ae6
--- /dev/null
+++ b/src/lib/components/shared/command/command-input.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { Command } from 'bits-ui';
+
+	type Props = Command.InputProps & {
+		class?: string;
+	};
+
+	let { class: class_name = undefined, ...rest }: Props = $props();
+</script>
+
+<Command.Input
+	placeholder="Search..."
+	class={cn(
+		'inline-flex w-full truncate rounded-[inherit] bg-transparent px-4 text-lg transition-colors placeholder:text-gray-700 focus:outline-none focus:ring-0',
+		class_name
+	)}
+	{...rest}
+/>
diff --git a/src/lib/components/shared/command/command-list.svelte b/src/lib/components/shared/command/command-list.svelte
index cdb4d54..ef60285 100644
--- a/src/lib/components/shared/command/command-list.svelte
+++ b/src/lib/components/shared/command/command-list.svelte
@@ -1,71 +1,78 @@
 <script lang="ts">
 	import { Icons } from '$lib/assets/icons';
 	import { Badge } from '$lib/components/ui/badge';
-	import * as Command from '$lib/components/ui/command';
 	import { aside_items } from '$lib/config/sitemap';
+	import { command_open_state } from '$lib/stores';
 	import { cn } from '$lib/utils';
+	import { Command } from 'bits-ui';
 
-	type Props = {
-		search: string;
+	type Props = Command.ListProps & {
 		class?: string;
 	};
 
-	let { search, class: class_name = undefined, ...rest }: Props = $props();
+	let { class: class_name = undefined, ...rest }: Props = $props();
 </script>
 
-<Command.List class={cn('px-1 pb-1', class_name)} {...rest}>
-	<Command.Empty class="text-gray-600">
-		No results found for
-		<span class="font-semibold text-gray-1000">
-			"{search}"
-		</span>.
-	</Command.Empty>
-	{#each Object.entries(aside_items) as item}
-		{@const [group, links] = item}
-		<Command.Group
-			class="[&_[data-cmdk-group-heading]]:py-3 [&_[data-cmdk-group-heading]]:capitalize [&_[data-cmdk-group-heading]]:text-gray-700"
-		>
-			<Command.GroupHeading>
-				{group}
-			</Command.GroupHeading>
-			{#each links as link}
-				{@const disabled = link.status == 'soon'}
-				<Command.Item
-					value={link.title}
-					{disabled}
-					class="flex place-items-center gap-3 rounded-md py-3 hover:cursor-pointer hover:bg-gray-100 aria-selected:bg-gray-100"
-				>
-					{#snippet child({ props })}
-						<a href={link.href} {...props}>
-							{#if link.icon}
-								{@const Icon = link.icon}
-								<span class="text-gray-1000">
-									<Icon aria-hidden="true" width="16" height="16" />
-								</span>
-							{:else}
-								<span class="text-gray-1000">
-									<Icons.ArrowRight
-										width="16"
-										height="16"
-										class="text-gray-600"
-										aria-hidden="true"
-									/>
-								</span>
-							{/if}
-							<span>{link.title}</span>
-							{#if link.status === 'new'}
-								<Badge variant="blue" size="sm">New</Badge>
-							{/if}
-							{#if link.status === 'soon'}
-								<Badge variant="gray-subtle" size="sm">Soon</Badge>
-							{/if}
-							{#if link.status === 'draft'}
-								<Badge variant="purple-subtle" size="sm">Draft</Badge>
-							{/if}
-						</a>
-					{/snippet}
-				</Command.Item>
-			{/each}
-		</Command.Group>
-	{/each}
+<Command.List
+	class={cn('overflow-y-auto overflow-x-hidden border-t px-2 pb-2', class_name)}
+	{...rest}
+>
+	<Command.Viewport>
+		<Command.Empty class="flex w-full items-center justify-center pb-6 pt-8 text-sm text-gray-700">
+			No results found.
+		</Command.Empty>
+		{#each Object.entries(aside_items) as item}
+			{@const [group, links] = item}
+			<Command.Group>
+				<Command.GroupHeading class="px-3 pb-2 pt-4 text-xs font-medium capitalize text-gray-700">
+					{group}
+				</Command.GroupHeading>
+				<Command.GroupItems>
+					{#each links as link}
+						{@const disabled = link.status == 'soon'}
+						<Command.Item
+							onSelect={command_open_state.toggle}
+							{disabled}
+							value={link.title}
+							class={cn(
+								'flex h-10 cursor-pointer select-none items-center gap-2 px-3 py-2.5 text-sm outline-none data-[selected]:rounded-lg data-[selected]:bg-gray-alpha-100',
+								// disabled
+								'data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
+							)}
+						>
+							{#snippet child({ props })}
+								<a href={disabled ? undefined : link.href} {...props}>
+									{#if link.icon}
+										{@const Icon = link.icon}
+										<span class="text-gray-1000">
+											<Icon aria-hidden="true" width="16" height="16" />
+										</span>
+									{:else}
+										<span class="text-gray-1000">
+											<Icons.ArrowRight
+												width="16"
+												height="16"
+												class="text-gray-600"
+												aria-hidden="true"
+											/>
+										</span>
+									{/if}
+									<span>{link.title}</span>
+									{#if link.status === 'new'}
+										<Badge variant="blue" size="sm">New</Badge>
+									{/if}
+									{#if link.status === 'soon'}
+										<Badge variant="gray-subtle" size="sm">Soon</Badge>
+									{/if}
+									{#if link.status === 'draft'}
+										<Badge variant="purple-subtle" size="sm">Draft</Badge>
+									{/if}
+								</a>
+							{/snippet}
+						</Command.Item>
+					{/each}
+				</Command.GroupItems>
+			</Command.Group>
+		{/each}
+	</Command.Viewport>
 </Command.List>
diff --git a/src/lib/components/shared/command/command.svelte b/src/lib/components/shared/command/command.svelte
index d1cca1f..a874b2d 100644
--- a/src/lib/components/shared/command/command.svelte
+++ b/src/lib/components/shared/command/command.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-	import { Icons } from '$lib/assets/icons';
-	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
 	import * as Drawer from '$lib/components/ui/drawer';
-	import { aside_items } from '$lib/config/sitemap';
 	import { command_open_state } from '$lib/stores';
 	import { cn } from '$lib/utils';
 	import { Command, Dialog } from 'bits-ui';
 	import { MediaQuery } from 'runed';
+	import CommandInput from './command-input.svelte';
 	import CommandList from './command-list.svelte';
 
 	const is_desktop = new MediaQuery('(min-width: 640px)');
@@ -18,8 +16,6 @@
 			command_open_state.toggle();
 		}
 	}
-
-	let search = $state('');
 </script>
 
 <svelte:document onkeydown={doc_keydown} />
@@ -48,90 +44,18 @@
 				<Command.Root
 					class="flex h-full w-full flex-col self-start overflow-hidden rounded-xl border bg-background-100"
 				>
-					<Command.Input
-						class="inline-flex h-[53px] w-full truncate rounded-[inherit] bg-transparent px-4 text-lg transition-colors placeholder:text-gray-700 focus:outline-none focus:ring-0"
-						placeholder="Search..."
-					/>
-					<Command.List class="h-[436px] overflow-y-auto overflow-x-hidden border-t px-2 pb-2">
-						<Command.Viewport>
-							<Command.Empty
-								class="flex w-full items-center justify-center pb-6 pt-8 text-sm text-gray-700"
-							>
-								No results found.
-							</Command.Empty>
-							{#each Object.entries(aside_items) as item}
-								{@const [group, links] = item}
-								<Command.Group>
-									<Command.GroupHeading
-										class="px-3 pb-2 pt-4 text-xs font-medium capitalize text-gray-700"
-									>
-										{group}
-									</Command.GroupHeading>
-									<Command.GroupItems>
-										{#each links as link}
-											{@const disabled = link.status == 'soon'}
-											<Command.Item
-												onSelect={command_open_state.toggle}
-												{disabled}
-												value={link.title}
-												class={cn(
-													'flex h-10 cursor-pointer select-none items-center gap-2 px-3 py-2.5 text-sm outline-none data-[selected]:rounded-lg data-[selected]:bg-gray-alpha-100',
-													// disabled
-													'data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
-												)}
-											>
-												{#snippet child({ props })}
-													<a href={disabled ? undefined : link.href} {...props}>
-														{#if link.icon}
-															{@const Icon = link.icon}
-															<span class="text-gray-1000">
-																<Icon aria-hidden="true" width="16" height="16" />
-															</span>
-														{:else}
-															<span class="text-gray-1000">
-																<Icons.ArrowRight
-																	width="16"
-																	height="16"
-																	class="text-gray-600"
-																	aria-hidden="true"
-																/>
-															</span>
-														{/if}
-														<span>{link.title}</span>
-														{#if link.status === 'new'}
-															<Badge variant="blue" size="sm">New</Badge>
-														{/if}
-														{#if link.status === 'soon'}
-															<Badge variant="gray-subtle" size="sm">Soon</Badge>
-														{/if}
-														{#if link.status === 'draft'}
-															<Badge variant="purple-subtle" size="sm">Draft</Badge>
-														{/if}
-													</a>
-												{/snippet}
-											</Command.Item>
-										{/each}
-									</Command.GroupItems>
-								</Command.Group>
-							{/each}
-						</Command.Viewport>
-					</Command.List>
+					<CommandInput class="h-[53px]" />
+					<CommandList class="h-[436px]" />
 				</Command.Root>
 			</Dialog.Content>
 		</Dialog.Portal>
 	</Dialog.Root>
 {:else}
 	<Drawer.Root bind:open={$command_open_state}>
-		<Drawer.Content class="h-3/4" hide_dismiss_bar>
+		<Drawer.Content preventScroll class="h-3/4" hide_dismiss_bar>
 			<Command.Root>
-				<Drawer.Header class="flex h-[53px] items-center justify-between border-b px-2">
-					<!-- <Command.Input
-						hide_search_icon
-						placeholder="Search..."
-						class="h-7 flex-grow border-none text-lg"
-						bind:value={search}
-						wrapper_class="border-none w-full flex items-center"
-					/> -->
+				<Drawer.Header class="flex h-[53px] items-center justify-between px-2">
+					<CommandInput class="h-7" />
 					<Button
 						onclick={command_open_state.toggle}
 						size="sm"
@@ -141,7 +65,7 @@
 						Esc
 					</Button>
 				</Drawer.Header>
-				<CommandList {search} class="max-h-full" />
+				<CommandList class="h-[70dvh]" />
 			</Command.Root>
 		</Drawer.Content>
 	</Drawer.Root>