Shadcn Command Menu

1"use client";
2
3import * as React from "react";
4import { useRouter } from "next/navigation";
5
6import { ArrowRight, CornerDownLeftIcon } from "lucide-react";
7
8import { Button } from "@/components/ui/button";
9import {
10  ResponsiveCommand,
11  ResponsiveCommandEmpty,
12  ResponsiveCommandGroup,
13  ResponsiveCommandInput,
14  ResponsiveCommandItem,
15  ResponsiveCommandList,
16} from "@/components/ui/responsive-command";
17import {
18  ResponsiveDialog,
19  ResponsiveDialogContent,
20  ResponsiveDialogDescription,
21  ResponsiveDialogHeader,
22  ResponsiveDialogTitle,
23  ResponsiveDialogTrigger,
24} from "@/components/ui/revola";
25import { Separator } from "@/components/ui/separator";
26import { type Color, type ColorPalette } from "@/lib/colors";
27import { source, type Tree } from "@/lib/source";
28import { cn } from "@/lib/utils";
29
30import { useIsMac } from "@/hooks/use-is-mac";
31import { useMutationObserver } from "@/hooks/use-mutation-observer";
32
33type TreeNode = (typeof source.pageTree)["children"][number];
34
35function copyToClipboardWithoutMeta(value: string) {
36  navigator.clipboard.writeText(value);
37}
38
39type SimplifiedGroup = {
40  name: string;
41  children: Array<{
42    type: "page";
43    name: string;
44    url: string;
45    icon?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
46  }>;
47};
48
49type CommandMenuProps = {
50  tree: Tree["pageTree"];
51  colors: ColorPalette[];
52};
53
54// Transform the mixed tree structure into simplified groups
55function simplifyTreeStructure(tree: TreeNode[]): SimplifiedGroup[] {
56  const groups: SimplifiedGroup[] = [];
57  let currentGroup: SimplifiedGroup | null = null;
58
59  for (const item of tree) {
60    switch (item.type) {
61      case "separator": {
62        currentGroup = {
63          name: item.name?.toString() || "Untitled",
64          children: [],
65        };
66        groups.push(currentGroup);
67        break;
68      }
69      case "page": {
70        if (currentGroup) {
71          currentGroup.children.push({
72            type: "page",
73            name: item.name?.toString() || "Untitled",
74            url: item.url,
75            ...(item.icon && { icon: item.icon }),
76          });
77        } else {
78          groups.push({
79            name: item.name?.toString() || "Untitled",
80            children: [
81              {
82                type: "page",
83                name: item.name?.toString() || "Untitled",
84                url: item.url,
85// … truncated