UI Command Menu

1"use client";
2 
3import {
4  type CommandMenuIcon,
5  CommandMenuItemRow,
6  type CommandMenuItemState,
7  type CommandMenuItemStyle,
8  type CommandMenuItemStyleContext,
9  commandMenuItemStyle,
10  commandMenuItemStyleContext,
11} from "@/components/remocn/command-menu-item";
12import {
13  type RemocnTheme,
14  revealedText,
15  useRemocnTheme,
16} from "@/lib/remocn-ui";
17 
18export type CommandMenuState = "opened" | "closed";
19 
20export interface CommandMenuEntry {
21  icon?: CommandMenuIcon;
22  label: string;
23  shortcut?: string;
24}
25 
26export interface CommandMenuProps {
27  state?: CommandMenuState;
28  style?: CommandMenuStyle;
29  query?: string;
30  revealCount?: number;
31  items?: CommandMenuEntry[];
32  selectedIndex?: number;
33  highlightedIndex?: number;
34  pressedIndex?: number;
35  itemStyles?: (CommandMenuItemStyle | undefined)[];
36  theme?: Partial<RemocnTheme>;
37  className?: string;
38}
39 
40const PANEL_WIDTH = 440;
41const CONTENT_WIDTH = PANEL_WIDTH - 16;
42const MAX_OVERLAY_ALPHA = 0.5;
43 
44export function filterCommandItems(
45  items: CommandMenuEntry[],
46  query: string,
47  revealCount?: number,
48): CommandMenuEntry[] {
49  const visible = (
50    revealCount === undefined ? query : revealedText(query, revealCount)
51  )
52    .trim()
53    .toLowerCase();
54  if (visible === "") return items;
55  return items.filter((item) => item.label.toLowerCase().includes(visible));
56}
57 
58export interface CommandMenuStyle {
59  backdropOpacity: number;
60  panelOpacity: number;
61  panelScale: number;
62  panelTranslateY: number;
63}
64 
65export interface CommandMenuStyleContext {
66  panelBg: string;
67  panelBorder: string;
68  inputFg: string;
69  placeholderFg: string;
70  mutedFg: string;
71  divider: string;
72  caret: string;
73  radius: number;
74  itemCtx: CommandMenuItemStyleContext;
75}
76 
77export function commandMenuStyleContext(
78  theme: RemocnTheme,
79): CommandMenuStyleContext {
80  return {
81    panelBg: theme.popover,
82    panelBorder: theme.border,
83    inputFg: theme.popoverForeground,
84    placeholderFg: theme.mutedForeground,
85    mutedFg: theme.mutedForeground,
86    divider: theme.border,
87    caret: theme.foreground,
88    radius: theme.radius,
89    itemCtx: commandMenuItemStyleContext(theme),
90  };
91}
92 
93export function commandMenuStyle(
94  state: CommandMenuState,
95  _ctx: CommandMenuStyleContext,
96): CommandMenuStyle {
97  switch (state) {
98    case "opened":
99      return {
100        backdropOpacity: 1,
101        panelOpacity: 1,
102        panelScale: 1,
103        panelTranslateY: 0,
104      };
105    default:
106      return {
107        backdropOpacity: 0,
108// … truncated