feat: add command menu for navigation

package.json

@@ -41,8 +41,11 @@
 	"dependencies": {
 		"bits-ui": "^0.21.12",
 		"clsx": "^2.1.1",
+		"cmdk-sv": "^0.0.18",
+		"svelte-legos": "^0.2.3",
 		"tailwind-merge": "^2.4.0",
-		"tailwind-variants": "^0.2.1"
+		"tailwind-variants": "^0.2.1",
+		"vaul-svelte": "^0.3.2"
 	},
 	"packageManager": "pnpm@9.5.0"
 }

src/lib/assets/icons/index.ts

@@ -15,6 +15,7 @@ import ClockDashed from './clock-dashed.svg?component';
 import CodeBracket from './code-bracket.svg?component';
 import Command from './command.svg?component';
 import Copy from './copy.svg?component';
+import Cross from './cross.svg?component';
 import Database from './database.svg?component';
 import ErrorStates from './error-states.svg?component';
 import ExternalSmall from './external-small.svg?component';
@@ -38,6 +39,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?component';
 import Minus from './minus.svg?component';
 import Notification from './notification.svg?component';
 import Paperclip from './paperclip.svg?component';
@@ -70,6 +72,7 @@ export const Icons = {
 	CodeBracket,
 	Command,
 	Copy,
+	Cross,
 	Database,
 	ErrorStates,
 	ExternalSmall,
@@ -93,6 +96,7 @@ export const Icons = {
 	LogoV0,
 	LogoVercelCircle,
 	LogoVercel,
+	MagnifyingGlass,
 	Minus,
 	Notification,
 	Paperclip,

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	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';
+
+	export let search: string;
+
+	let className = '';
+
+	export { className as class };
+
+	const navigate = (link: string) => {
+		goto(link);
+		command_open_state.toggle();
+	};
+</script>
+
+<Command.List class={cn('px-1 pb-1', className)} {...$$restProps}>
+	<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
+			heading={group}
+			class="[&_[data-cmdk-group-heading]]:py-3 [&_[data-cmdk-group-heading]]:capitalize [&_[data-cmdk-group-heading]]:text-gray-700"
+		>
+			{#each links as link}
+				{@const disabled = link.status == 'soon'}
+				<Command.Item
+					value={link.title}
+					onSelect={() => navigate(link.href)}
+					{disabled}
+					class="flex place-items-center gap-3 rounded-md py-3 hover:cursor-pointer hover:bg-gray-100 aria-selected:bg-gray-100"
+				>
+					{#if link.icon}
+						<span class="text-gray-1000">
+							<svelte:component this={link.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}
+				</Command.Item>
+			{/each}
+		</Command.Group>
+	{/each}
+</Command.List>

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Command from '$lib/components/ui/command';
+	import * as Drawer from '$lib/components/ui/drawer/index.js';
+	import { command_open_state } from '$lib/stores';
+	import { mediaQuery } from 'svelte-legos';
+	import CommandList from './command-list.svelte';
+
+	function doc_keydown(e: KeyboardEvent) {
+		if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			command_open_state.toggle();
+		}
+	}
+
+	const is_desktop = mediaQuery('(min-width: 640px)');
+
+	let search = '';
+</script>
+
+<svelte:document on:keydown={doc_keydown} />
+
+{#if $is_desktop}
+	<Command.Dialog
+		bind:open={$command_open_state}
+		class="top-[43%] max-w-[640px] sm:rounded-xl"
+		close_button="esc"
+	>
+		<Command.Input
+			placeholder="Search..."
+			hide_search_icon
+			bind:value={search}
+			class="h-[53px] p-0 px-1 text-lg"
+		/>
+		<CommandList {search} class="h-[436px] max-h-none" />
+	</Command.Dialog>
+{:else}
+	<Drawer.Root bind:open={$command_open_state}>
+		<Drawer.Content 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"
+					/>
+					<Button
+						on:click={command_open_state.toggle}
+						size="sm"
+						variant="secondary"
+						class="h-5 px-1.5 text-xs"
+					>
+						Esc
+					</Button>
+				</Drawer.Header>
+				<CommandList {search} class="max-h-full" />
+			</Command.Root>
+		</Drawer.Content>
+	</Drawer.Root>
+{/if}

src/lib/components/shared/demo.svelte

@@ -123,3 +123,9 @@
 		</details>
 	</div>
 </div>
+
+<style>
+	summary::-webkit-details-marker {
+		display: none;
+	}
+</style>

src/lib/components/ui/badge/index.ts

@@ -1,9 +1,9 @@
-import type { Icons } from '$lib/assets/icons';
+import { Icons } from '$lib/assets/icons';
 import { type VariantProps, tv } from 'tailwind-variants';
 
 export { default as Badge } from './badge.svelte';
 export const badge_variants = tv({
-	base: 'inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-full font-medium capitalize tabular-nums transition-colors hover:cursor-text focus:outline-none focus:ring-2 focus:ring-focus-color focus:ring-offset-2',
+	base: 'inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-full font-medium capitalize tabular-nums transition-colors hover:cursor-auto focus:outline-none focus:ring-2 focus:ring-focus-color focus:ring-offset-2',
 	variants: {
 		variant: {
 			gray: 'bg-gray-700 text-contrast-fg',

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import { cn } from '$lib/utils';
+	import type { Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Command as CommandPrimitive } from 'cmdk-sv';
+	import Command from './command.svelte';
+
+	// TODO: Yuck! I can't believe I'm defining a prop in 2 different places. (Check dialog-content.svelte)
+	// Find a way to define this prop in one place.
+	type $$Props = DialogPrimitive.Props &
+		CommandPrimitive.CommandProps & {
+			close_button?: 'esc' | 'x';
+		};
+
+	export let open: $$Props['open'] = false;
+	export let value: $$Props['value'] = undefined;
+	let class_name: string | undefined | null = undefined;
+	export { class_name as class };
+	export let close_button: $$Props['close_button'] = 'x';
+</script>
+
+<Dialog.Root bind:open {...$$restProps}>
+	<Dialog.Content class={cn('overflow-hidden p-0 shadow-lg', class_name)} {close_button}>
+		<Command
+			class={cn(
+				// Command Heading
+				'[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:capitalize [&_[data-cmdk-group-heading]]:text-gray-900',
+				// Command Group
+				'[&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2',
+				// Command Input
+				'[&_[data-cmdk-input-wrapper]_svg]:size-5 [&_[data-cmdk-input]]:h-12',
+				// Command Item
+				'[&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:size-5'
+			)}
+			{...$$restProps}
+			bind:value
+		>
+			<slot />
+		</Command>
+	</Dialog.Content>
+</Dialog.Root>

src/lib/components/ui/command/command-empty.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = CommandPrimitive.EmptyProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Empty class={cn('py-6 text-center text-sm', className)} {...$$restProps}>
+	<slot />
+</CommandPrimitive.Empty>

src/lib/components/ui/command/command-group.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	type $$Props = CommandPrimitive.GroupProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Group
+	class={cn(
+		'overflow-hidden p-1 text-gray-1000 [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-gray-900',
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Group>

src/lib/components/ui/command/command-input.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons';
+	import { cn } from '$lib/utils.js';
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+
+	type $$Props = CommandPrimitive.InputProps & {
+		wrapper_class?: string | undefined;
+		hide_search_icon?: boolean;
+	};
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: string = '';
+	export let wrapper_class: $$Props['wrapper_class'] = undefined;
+	export let hide_search_icon: $$Props['hide_search_icon'] = false;
+</script>
+
+<div class={cn('flex items-center border-b px-2', wrapper_class)} data-cmdk-input-wrapper="">
+	{#if !hide_search_icon}
+		<Icons.MagnifyingGlass class="mr-2 size-4 shrink-0 opacity-50" />
+	{/if}
+	<CommandPrimitive.Input
+		class={cn(
+			'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50',
+			className
+		)}
+		{...$$restProps}
+		bind:value
+	/>
+</div>

src/lib/components/ui/command/command-item.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+
+	type $$Props = CommandPrimitive.ItemProps;
+
+	export let asChild = false;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Item
+	{asChild}
+	class={cn(
+		'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-gray-alpha-100 aria-selected:text-gray-1000 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		className
+	)}
+	{...$$restProps}
+	let:action
+	let:attrs
+>
+	<slot {action} {attrs} />
+</CommandPrimitive.Item>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+
+	type $$Props = CommandPrimitive.ListProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<!-- ? This element is oddly trapping focus when you tab from `input` trying to get to `close`. i.e. it's input->list->close. Manually specifying `-1` because I don't think it should be focusable. -->
+<CommandPrimitive.List
+	tabindex={-1}
+	class={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.List>

src/lib/components/ui/command/command-separator.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+
+	type $$Props = CommandPrimitive.SeparatorProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Separator class={cn('-mx-1 h-px bg-gray-400', className)} {...$$restProps} />

src/lib/components/ui/command/command-shortcut.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<span class={cn('ml-auto text-xs tracking-widest text-gray-900', className)} {...$$restProps}>
+	<slot />
+</span>