"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, } from "react"; import { createPortal } from "react-dom"; import { AnimatePresence, motion, useReducedMotion, } from "motion/react"; import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react"; import { Search01Icon, Home01Icon, DashboardSquare01Icon, File01Icon, FolderIcon, SettingsIcon, Moon02Icon, Sun03Icon, UserIcon, Notification03Icon, Copy01Icon, Add01Icon, LogoutIcon, Tick02Icon, } from "@hugeicons/core-free-icons"; import clsx from "clsx"; const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (d) => FA_DIGITS[Number(d)] ?? d); } export type CommandItem = { id: string; label: string; keywords?: string; shortcut?: string; icon: IconSvgElement; group: string; danger?: boolean; }; // Change Here const DEFAULT_COMMANDS: CommandItem[] = [ { id: "home", label: "رفتن به خانه", keywords: "خانه home", shortcut: "G H", icon: Home01Icon, group: "ناوبری", }, { id: "dashboard", label: "داشبورد", keywords: "dashboard پنل", shortcut: "G D", icon: DashboardSquare01Icon, group: "ناوبری", }, { id: "files", label: "فایل‌ها", keywords: "files فایل", shortcut: "G F", icon: File01Icon, group: "ناوبری", }, { id: "projects", label: "پروژه‌ها", keywords: "projects پروژه", icon: FolderIcon, group: "ناوبری", }, { id: "new-doc", label: "سند جدید", keywords: "new create سند", shortcut: "N", icon: Add01Icon, group: "عملیات", }, { id: "copy-link", label: "کپی لینک صفحه", keywords: "copy link کپی", shortcut: "⌘⇧C", icon: Copy01Icon, group: "عملیات", }, { id: "profile", label: "پروفایل من", keywords: "profile کاربر", icon: UserIcon, group: "عملیات", }, { id: "notifications", label: "اعلان‌ها", keywords: "notifications اعلان", shortcut: "⌘.", icon: Notification03Icon, group: "عملیات", }, { id: "theme-dark", label: "تم تیره", keywords: "dark theme تاریک", icon: Moon02Icon, group: "تنظیمات", }, { id: "theme-light", label: "تم روشن", keywords: "light theme روشن", icon: Sun03Icon, group: "تنظیمات", }, { id: "settings", label: "تنظیمات", keywords: "settings تنظیمات", shortcut: "⌘,", icon: SettingsIcon, group: "تنظیمات", }, { id: "logout", label: "خروج از حساب", keywords: "logout خروج", icon: LogoutIcon, group: "تنظیمات", danger: true, }, ]; function normalize(text: string) { return text.trim().toLowerCase().replace(/\s+/g, " "); } function matchesQuery(item: CommandItem, query: string) { if (!query) return true; const hay = normalize(`${item.label} ${item.keywords ?? ""} ${item.group}`); return query .split(/\s+/) .filter(Boolean) .every((part) => hay.includes(part)); } function isModKey(event: KeyboardEvent) { return event.metaKey || event.ctrlKey; } export type CommandPaletteProps = { commands?: CommandItem[]; /** Called when a command is chosen. */ onRun?: (item: CommandItem) => void; className?: string; /** Start open (useful in docs/preview). */ defaultOpen?: boolean; }; export default function CommandPalette({ commands = DEFAULT_COMMANDS, onRun, className, defaultOpen = false, }: CommandPaletteProps) { const reduce = useReducedMotion(); const listboxId = useId(); const hostRef = useRef(null); const inputRef = useRef(null); const [open, setOpen] = useState(defaultOpen); const [query, setQuery] = useState(""); const [activeIndex, setActiveIndex] = useState(0); const [lastRun, setLastRun] = useState(null); const [modLabel, setModLabel] = useState("Ctrl"); const [mounted, setMounted] = useState(false); /** Portal escapes preview `.dark` / `.light` — copy the nearest theme onto the overlay. */ const [portalTheme, setPortalTheme] = useState<"dark" | "light">("dark"); useEffect(() => { setMounted(true); }, []); useEffect(() => { const mac = /Mac|iPhone|iPad|iPod/.test(navigator.platform); setModLabel(mac ? "⌘" : "Ctrl"); }, []); useEffect(() => { if (!open) return; const host = hostRef.current; const themed = host?.closest(".dark, .light"); if (themed?.classList.contains("light")) { setPortalTheme("light"); return; } if (themed?.classList.contains("dark")) { setPortalTheme("dark"); return; } setPortalTheme( document.documentElement.classList.contains("dark") ? "dark" : "light", ); }, [open]); const filtered = useMemo(() => { const q = normalize(query); return commands.filter((item) => matchesQuery(item, q)); }, [commands, query]); const groups = useMemo(() => { const map = new Map(); for (const item of filtered) { const list = map.get(item.group) ?? []; list.push(item); map.set(item.group, list); } return [...map.entries()]; }, [filtered]); const flat = filtered; const close = useCallback(() => { setOpen(false); setQuery(""); setActiveIndex(0); }, []); const openPalette = useCallback(() => { setOpen(true); setQuery(""); setActiveIndex(0); }, []); const runCommand = useCallback( (item: CommandItem) => { setLastRun(item.label); onRun?.(item); close(); }, [close, onRun], ); useEffect(() => { const onKey = (event: KeyboardEvent) => { if (isModKey(event) && event.key.toLowerCase() === "k") { event.preventDefault(); setOpen((prev) => { if (prev) { setQuery(""); setActiveIndex(0); return false; } setQuery(""); setActiveIndex(0); return true; }); return; } if (!open) return; if (event.key === "Escape") { event.preventDefault(); close(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [close, open]); useEffect(() => { if (!open) return; const id = requestAnimationFrame(() => inputRef.current?.focus()); return () => cancelAnimationFrame(id); }, [open]); useEffect(() => { setActiveIndex(0); }, [query]); useEffect(() => { if (activeIndex >= flat.length) { setActiveIndex(Math.max(0, flat.length - 1)); } }, [activeIndex, flat.length]); const onInputKeyDown = (event: ReactKeyboardEvent) => { if (event.key === "ArrowDown") { event.preventDefault(); setActiveIndex((i) => (flat.length ? (i + 1) % flat.length : 0)); } else if (event.key === "ArrowUp") { event.preventDefault(); setActiveIndex((i) => flat.length ? (i - 1 + flat.length) % flat.length : 0, ); } else if (event.key === "Enter") { event.preventDefault(); const item = flat[activeIndex]; if (item) runCommand(item); } else if (event.key === "Home") { event.preventDefault(); setActiveIndex(0); } else if (event.key === "End") { event.preventDefault(); setActiveIndex(Math.max(0, flat.length - 1)); } }; let runningIndex = -1; return (

{lastRun ? ( اجرا شد:{" "} {lastRun} ) : (

با{" "} {modLabel}+K{" "} باز کن · ↑↓ انتخاب · Enter اجرا

)} {mounted ? createPortal( {open ? ( { if (e.target === e.currentTarget) close(); }} > ) : null} , document.body, ) : null}

); }