Command

1import { Search } from "lucide-solid";
2import type { Component, JSX } from "solid-js";
3import { For, Show, createMemo, createSignal, splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5import { Dialog, DialogContent } from "./dialog";
6 
7// ---------------------------------------------------------------------------
8// Command — a searchable command palette built on Dialog + native list
9// ---------------------------------------------------------------------------
10 
11export type CommandItem = {
12  value: string;
13  label: string;
14  group?: string;
15  shortcut?: string;
16  icon?: JSX.Element;
17  onSelect?: () => void;
18  disabled?: boolean;
19};
20 
21export type CommandProps = {
22  class?: string;
23  placeholder?: string;
24  items?: CommandItem[];
25  children?: JSX.Element;
26  emptyMessage?: string;
27};
28 
29export const Command: Component<CommandProps> = (props) => {
30  const [local] = splitProps(props, ["class", "placeholder", "items", "children", "emptyMessage"]);
31  const [query, setQuery] = createSignal("");
32 
33  const filtered = createMemo(() => {
34    const q = query().toLowerCase().trim();
35    if (!q) return local.items ?? [];
36    return (local.items ?? []).filter((i) => i.label.toLowerCase().includes(q));
37  });
38 
39  const groups = createMemo(() => {
40    const result = new Map<string, CommandItem[]>();
41    for (const item of filtered()) {
42      const key = item.group ?? "";
43      if (!result.has(key)) result.set(key, []);
44      result.get(key)?.push(item);
45    }
46    return result;
47  });
48 
49  return (
50    <div
51      class={cn(
52        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
53        local.class,
54      )}
55    >
56      <div class="flex items-center border-b px-3" cmdk-input-wrapper="">
57        <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
58        <input
59          class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
60          placeholder={local.placeholder ?? "Type a command or search..."}
61          value={query()}
62          onInput={(e) => setQuery(e.currentTarget.value)}
63          aria-label="Search commands"
64        />
65      </div>
66 
67      <div class="max-h-[300px] overflow-y-auto overflow-x-hidden">
68        <Show
69          when={filtered().length > 0 || local.children}
70          fallback={
71            <p class="py-6 text-center text-sm text-muted-foreground">
72// … truncated