99 lines
4.9 KiB
TypeScript
99 lines
4.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useSearch, type SearchResult } from "@lynkd/messaging-inbox-sdk";
|
|
import { useUi } from "@/lib/ui-state";
|
|
import { Search, Hash, User, MessageSquare, FileText, LifeBuoy, CornerDownLeft, Inbox } from "lucide-react";
|
|
import clsx from "clsx";
|
|
|
|
const icons: Record<SearchResult["type"], typeof Hash> = {
|
|
channel: Hash, person: User, message: MessageSquare, file: FileText, ticket: LifeBuoy,
|
|
};
|
|
|
|
type Item = { key: string; icon: typeof Hash; title: string; subtitle?: string; run: () => void };
|
|
|
|
export function CommandPalette() {
|
|
const { paletteOpen, setPaletteOpen, openProfile, openThread } = useUi();
|
|
const { query, setQuery, results, loading } = useSearch();
|
|
const router = useRouter();
|
|
const [active, setActive] = useState(0);
|
|
const listRef = useRef<HTMLDivElement>(null);
|
|
|
|
const go = (r: SearchResult) => {
|
|
setPaletteOpen(false);
|
|
if (r.type === "person") openProfile(r.id);
|
|
else if (r.type === "ticket") router.push(`/support/${r.id}`);
|
|
else if (r.type === "message" && r.channelId) {
|
|
// a reply lives inside a thread (not the main list) → open the thread;
|
|
// otherwise deep-link so the channel view scrolls to + flashes it
|
|
if (r.parentId) { router.push(`/c/${r.channelId}`); openThread(r.channelId, r.parentId); }
|
|
else router.push(`/c/${r.channelId}?msg=${r.id}`);
|
|
}
|
|
else if (r.channelId) router.push(`/c/${r.channelId}`);
|
|
};
|
|
|
|
const items: Item[] = useMemo(() => {
|
|
if (!query) {
|
|
return [
|
|
{ key: "q1", icon: Hash, title: "Jump to #general", run: () => { setPaletteOpen(false); router.push("/c/c_general"); } },
|
|
{ key: "q2", icon: Inbox, title: "Open Inbox", run: () => { setPaletteOpen(false); router.push("/inbox"); } },
|
|
{ key: "q3", icon: LifeBuoy, title: "Support Center", run: () => { setPaletteOpen(false); router.push("/support"); } },
|
|
];
|
|
}
|
|
if (loading) return [];
|
|
return results.map((r) => ({ key: `${r.type}-${r.id}`, icon: icons[r.type], title: r.title, subtitle: r.subtitle, run: () => go(r) }));
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [query, loading, results]);
|
|
|
|
useEffect(() => { setActive(0); }, [query, results]);
|
|
|
|
if (!paletteOpen) return null;
|
|
|
|
const onKey = (e: React.KeyboardEvent) => {
|
|
if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(a + 1, items.length - 1)); }
|
|
else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); }
|
|
else if (e.key === "Enter") { e.preventDefault(); items[active]?.run(); }
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[60] flex items-start justify-center bg-black/50 p-4 pt-[12vh] backdrop-blur-sm animate-fade-in" onClick={() => setPaletteOpen(false)}>
|
|
<div role="dialog" aria-modal="true" aria-label="Search" className="w-full max-w-xl overflow-hidden rounded-card border border-border bg-elevated shadow-pop" onClick={(e) => e.stopPropagation()}>
|
|
<div className="flex items-center gap-3 border-b border-border px-4">
|
|
<Search size={18} className="text-muted" />
|
|
<input
|
|
autoFocus
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
onKeyDown={onKey}
|
|
placeholder="Search messages, channels, people, tickets…"
|
|
className="w-full bg-transparent py-4 text-[15px] outline-none placeholder:text-dim"
|
|
/>
|
|
<kbd className="rounded bg-hover px-1.5 py-0.5 font-mono text-[10px] text-dim">esc</kbd>
|
|
</div>
|
|
|
|
<div ref={listRef} className="max-h-[52vh] overflow-y-auto p-2">
|
|
{!query && <div className="px-2 py-1 text-[11px] font-bold uppercase text-dim">Quick actions</div>}
|
|
{query && loading && <div className="px-3 py-6 text-center text-[13px] text-muted">Searching…</div>}
|
|
{query && !loading && items.length === 0 && <div className="px-3 py-6 text-center text-[13px] text-muted">No results for “{query}”</div>}
|
|
{items.map((it, i) => (
|
|
<button
|
|
key={it.key}
|
|
onMouseEnter={() => setActive(i)}
|
|
onClick={it.run}
|
|
className={clsx("flex w-full items-center gap-3 rounded-control px-3 py-2 text-left", i === active ? "bg-hover" : "hover:bg-hover")}
|
|
>
|
|
<span className="grid h-8 w-8 shrink-0 place-items-center rounded-control bg-hover text-muted"><it.icon size={16} /></span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block truncate text-[14px] text-ink">{it.title}</span>
|
|
{it.subtitle && <span className="block truncate text-[12px] text-muted">{it.subtitle}</span>}
|
|
</span>
|
|
{i === active && <CornerDownLeft size={14} className="shrink-0 text-dim" />}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|