command-palette

1"use client";
2 
3import {
4  ChevronRight,
5  Clock,
6  CornerDownLeft,
7  Loader2,
8  type LucideIcon,
9  Search,
10  X,
11} from "lucide-react";
12import { AnimatePresence, LayoutGroup, motion } from "motion/react";
13import type React from "react";
14import { useCallback, useEffect, useMemo, useRef, useState } from "react";
15import { cn } from "@/lib/utils";
16 
17export interface CommandItem {
18  id: string;
19  label: string;
20  description?: string;
21  icon?: LucideIcon;
22  shortcut?: string[];
23  keywords?: string[];
24  onSelect?: () => void;
25  children?: CommandGroup[]; // Support for sub-menus
26  disabled?: boolean;
27}
28 
29export interface CommandGroup {
30  id: string;
31  heading: string;
32  items: CommandItem[];
33}
34 
35export interface CommandPaletteProps {
36  open?: boolean;
37  onOpenChange?: (open: boolean) => void;
38  groups: CommandGroup[];
39  placeholder?: string;
40  emptyMessage?: string;
41  shortcut?: string[];
42  loading?: boolean;
43  showRecent?: boolean;
44  maxRecent?: number;
45}
46 
47interface FlattenedItem {
48  type: "group" | "item";
49  groupId: string;
50  groupHeading?: string;
51  item?: CommandItem;
52  score?: number;
53  matches?: [number, number][];
54}
55 
56interface PageState {
57  id: string;
58  title: string;
59  groups: CommandGroup[];
60}
61 
62export function CommandPalette({
63  open: controlledOpen,
64  onOpenChange,
65  groups: initialGroups,
66  placeholder = "Type a command or search...",
67  emptyMessage = "No results found.",
68  shortcut = ["⌘", "K"],
69  loading = false,
70  showRecent = true,
71  maxRecent = 5,
72}: CommandPaletteProps) {
73  const [internalOpen, setInternalOpen] = useState(false);
74  const [query, setQuery] = useState("");
75  const [selectedIndex, setSelectedIndex] = useState(0);
76  const [pages, setPages] = useState<PageState[]>([
77    { id: "root", title: "Root", groups: initialGroups },
78  ]);
79  const [recentItems, setRecentItems] = useState<CommandItem[]>([]);
80 
81  const inputRef = useRef<HTMLInputElement>(null);
82  const listRef = useRef<HTMLDivElement>(null);
83  const itemRefs = useRef<Map<number, HTMLDivElement>>(new Map());
84 
85  const isOpen = controlledOpen ?? internalOpen;
86  const setOpen = onOpenChange ?? setInternalOpen;
87  const currentPage = pages[pages.length - 1] || pages[0];
88 
89  // Load recent items from localStorage
90  useEffect(() => {
91    if (typeof window !== "undefined") {
92      const saved = localStorage.getItem("jolyui-command-recent");
93      if (saved) {
94        try {
95          setRecentItems(JSON.parse(saved));
96        } catch (e) {
97// … truncated