Add command palette & cleanup

2022-10-08 16:44:07 +10:30
parent 9e331de44e
commit beba475864
19 changed files with 552 additions and 94 deletions
@@ -0,0 +1,35 @@
+import type React from "react";
+
+import { Combobox } from "@headlessui/react";
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+
+import type { Group } from "./Index.js";
+
+export interface GroupViewProps {
+  group: Group;
+}
+
+export const GroupView = ({ group }: GroupViewProps): JSX.Element => {
+  return (
+    <Combobox.Option
+      value={group.name}
+      className={({ active }) =>
+        `flex cursor-default select-none items-center rounded-md px-3 py-2 ${
+          active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+        }`
+      }
+    >
+      {({ active }) => (
+        <>
+          <group.icon
+            className={`h-6 w-6 flex-none text-gray-900 text-opacity-40 ${
+              active ? "text-opacity-100" : ""
+            }`}
+          />
+          <span className="ml-3 flex-auto truncate">{group.name}</span>
+          {active && <ChevronRightIcon className="h-5 text-gray-400" />}
+        </>
+      )}
+    </Combobox.Option>
+  );
+};
@@ -0,0 +1,268 @@
+/**
+ * Contextual
+ * - Reset nodedb
+ * - Map commands
+ * - Disconnect
+ * Debug commands
+ * - Re-configure
+ * - clear parts of store (messages, positions, telemetry etc)
+ *
+ * Application
+ * - Light/Dark mode
+ */
+
+import type React from "react";
+import { Fragment, useState } from "react";
+
+import { useDevice } from "@app/core/providers/useDevice.js";
+import { useAppStore } from "@app/core/stores/appStore.js";
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+import {
+  ArchiveBoxXMarkIcon,
+  ArrowPathIcon,
+  ArrowsRightLeftIcon,
+  BeakerIcon,
+  BugAntIcon,
+  Cog8ToothIcon,
+  CubeTransparentIcon,
+  DevicePhoneMobileIcon,
+  IdentificationIcon,
+  InboxIcon,
+  LinkIcon,
+  MapIcon,
+  MoonIcon,
+  PlusIcon,
+  QrCodeIcon,
+  Square3Stack3DIcon,
+  TrashIcon,
+  UsersIcon,
+  WindowIcon,
+  XCircleIcon,
+} from "@heroicons/react/24/outline";
+
+import { GroupView } from "./GroupView.js";
+import { NoResults } from "./NoResults.js";
+import { PaletteTransition } from "./PaletteTransition.js";
+import { SearchBox } from "./SearchBox.js";
+import { SearchResult } from "./SearchResult.js";
+
+export interface Group {
+  name: string;
+  icon: (props: React.ComponentProps<"svg">) => JSX.Element;
+  commands: Command[];
+}
+export interface Command {
+  name: string;
+  icon: (props: React.ComponentProps<"svg">) => JSX.Element;
+  action?: () => void;
+}
+
+export const CommandPalette = (): JSX.Element => {
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+
+  const { setQRDialogOpen, setActivePage, connection } = useDevice();
+  const { setSelectedDevice, removeDevice, selectedDevice } = useAppStore();
+
+  const groups: Group[] = [
+    {
+      name: "Goto",
+      icon: LinkIcon,
+      commands: [
+        {
+          name: "Messages",
+          icon: InboxIcon,
+          action() {
+            setActivePage("messages");
+          },
+        },
+        {
+          name: "Map",
+          icon: MapIcon,
+          action() {
+            setActivePage("map");
+          },
+        },
+        {
+          name: "Extensions",
+          icon: BeakerIcon,
+          action() {
+            setActivePage("extensions");
+          },
+        },
+        {
+          name: "Config",
+          icon: Cog8ToothIcon,
+          action() {
+            setActivePage("config");
+          },
+        },
+        {
+          name: "Channels",
+          icon: Square3Stack3DIcon,
+          action() {
+            setActivePage("channels");
+          },
+        },
+        {
+          name: "Peers",
+          icon: UsersIcon,
+          action() {
+            setActivePage("peers");
+          },
+        },
+        {
+          name: "Info",
+          icon: IdentificationIcon,
+          action() {
+            setActivePage("info");
+          },
+        },
+      ],
+    },
+    {
+      name: "Manage",
+      icon: DevicePhoneMobileIcon,
+      commands: [
+        {
+          name: "Switch Node",
+          icon: ArrowsRightLeftIcon,
+        },
+        {
+          name: "Connect New Node",
+          icon: PlusIcon,
+          action() {
+            setSelectedDevice(0);
+          },
+        },
+      ],
+    },
+    {
+      name: "Contextual",
+      icon: CubeTransparentIcon,
+      commands: [
+        {
+          name: "QR Code Generator",
+          icon: QrCodeIcon,
+          action() {
+            setQRDialogOpen(true);
+          },
+        },
+        {
+          name: "Reset Peers",
+          icon: TrashIcon,
+        },
+        {
+          name: "Disconnect",
+          icon: XCircleIcon,
+          action() {
+            void connection?.disconnect();
+            setSelectedDevice(0);
+            removeDevice(selectedDevice ?? 0);
+          },
+        },
+      ],
+    },
+    {
+      name: "Debug",
+      icon: BugAntIcon,
+      commands: [
+        {
+          name: "Reconfigure",
+          icon: ArrowPathIcon,
+          action() {
+            void connection?.configure();
+          },
+        },
+        {
+          name: "Clear Messages",
+          icon: ArchiveBoxXMarkIcon,
+        },
+      ],
+    },
+    {
+      name: "Application",
+      icon: WindowIcon,
+      commands: [
+        {
+          name: "Toggle Dark Mode",
+          icon: MoonIcon,
+        },
+      ],
+    },
+  ];
+
+  window.addEventListener("keydown", (e) => {
+    if (e.key === "k") {
+      e.preventDefault();
+    }
+    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+      setOpen(true);
+    }
+  });
+
+  const filtered =
+    query === ""
+      ? []
+      : groups
+          .map((group) => {
+            return {
+              ...group,
+              commands: group.commands.filter((command) => {
+                return `${group.name} ${command.name}`
+                  .toLowerCase()
+                  .includes(query.toLowerCase());
+              }),
+            };
+          })
+          .filter((group) => group.commands.length);
+
+  return (
+    <Transition.Root
+      show={open}
+      as={Fragment}
+      afterLeave={() => setQuery("")}
+      appear
+    >
+      <Dialog as="div" className="relative z-10" onClose={setOpen}>
+        <PaletteTransition>
+          <Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+            <Combobox<Command | string>
+              onChange={(input) => {
+                if (typeof input === "string") {
+                  setQuery(input);
+                } else if (input.action) {
+                  setOpen(false);
+                  input.action();
+                }
+              }}
+            >
+              <SearchBox setQuery={setQuery} />
+
+              {query === "" || filtered.length > 0 ? (
+                <Combobox.Options
+                  static
+                  className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                >
+                  <li className="p-2">
+                    <ul className="flex flex-col gap-2 text-sm text-gray-700">
+                      {filtered.map((group, index) => (
+                        <SearchResult key={index} group={group} />
+                      ))}
+                      {query === "" &&
+                        groups.map((group, index) => (
+                          <GroupView key={index} group={group} />
+                        ))}
+                    </ul>
+                  </li>
+                </Combobox.Options>
+              ) : (
+                query !== "" && filtered.length === 0 && <NoResults />
+              )}
+            </Combobox>
+          </Dialog.Panel>
+        </PaletteTransition>
+      </Dialog>
+    </Transition.Root>
+  );
+};
@@ -0,0 +1,16 @@
+import type React from "react";
+
+import { CommandLineIcon } from "@heroicons/react/24/outline";
+
+import { Mono } from "../Mono.js";
+
+export const NoResults = (): JSX.Element => {
+  return (
+    <div className="py-14 px-14 text-center">
+      <CommandLineIcon className="mx-auto h-6 text-slate-500" />
+      <Mono className="tracking-tighter">
+        Query does not match any avaliable commands
+      </Mono>
+    </div>
+  );
+};
@@ -0,0 +1,42 @@
+import type React from "react";
+import { Fragment } from "react";
+
+import { Transition } from "@headlessui/react";
+
+export interface PaletteTransitionProps {
+  children: React.ReactNode;
+}
+
+export const PaletteTransition = ({
+  children,
+}: PaletteTransitionProps): JSX.Element => {
+  return (
+    <>
+      <Transition.Child
+        as={Fragment}
+        enter="ease-out duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+      </Transition.Child>
+
+      <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0 scale-95"
+          enterTo="opacity-100 scale-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100 scale-100"
+          leaveTo="opacity-0 scale-95"
+        >
+          {children}
+        </Transition.Child>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,21 @@
+import type React from "react";
+
+import { Combobox } from "@headlessui/react";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+
+export interface SearchBoxProps {
+  setQuery: (query: string) => void;
+}
+
+export const SearchBox = ({ setQuery }: SearchBoxProps): JSX.Element => {
+  return (
+    <div className="relative">
+      <MagnifyingGlassIcon className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40" />
+      <Combobox.Input
+        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-gray-900 placeholder-gray-500 focus:ring-0"
+        placeholder="Search..."
+        onChange={(event) => setQuery(event.target.value)}
+      />
+    </div>
+  );
+};
@@ -0,0 +1,46 @@
+import type React from "react";
+
+import { Combobox } from "@headlessui/react";
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+
+import type { Group } from "./Index.js";
+
+export interface SearchResultProps {
+  group: Group;
+}
+
+export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
+  return (
+    <div className="rounded-md border border-gray-300 py-2 shadow-md">
+      <div className="flex items-center px-3 py-2">
+        <group.icon className="h-6 w-6 flex-none text-gray-900 text-opacity-40" />
+        <span className="ml-3 flex-auto truncate">{group.name}</span>
+      </div>
+      {group.commands.map((command, index) => (
+        <Combobox.Option
+          key={index}
+          value={command}
+          className={({ active }) =>
+            `mr-2 ml-4 flex cursor-pointer select-none items-center rounded-md px-3 py-1 ${
+              active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+            }`
+          }
+        >
+          {({ active }) => (
+            <>
+              <command.icon
+                className={`h-4 flex-none text-gray-900 text-opacity-40 ${
+                  active ? "text-opacity-100" : ""
+                }`}
+              />
+              <span className="ml-3">{command.name}</span>
+              {active && (
+                <ChevronRightIcon className="ml-auto h-4 text-gray-400" />
+              )}
+            </>
+          )}
+        </Combobox.Option>
+      ))}
+    </div>
+  );
+};