Navigation/Breadcrumbs in filerunner, pull Nav into a component

apps/cli/cli-core/src/open-folder.ts

@@ -21,6 +21,7 @@ const getCommand = () => {
   throw new Error("Idk what os this is");
 };
 
+// TODO: IGOR add openFile, or a flag to create file instead of dir if it doesn't exist. Trying to "Open .config file" in fileRunner brought me here 💀
 // Ripped from https://www.npmjs.com/package/open-file-explorer
 export async function openInExplorer(path: string) {
   // Create the directory if it doesn't exist
@@ -31,3 +32,4 @@ export async function openInExplorer(path: string) {
 
   return await promisifiedExecFile(getCommand(), [path]);
 }
+

apps/cli/cli-web/src/App.tsx

@@ -17,6 +17,7 @@ import { classNames } from "./utils/classnames";
 import { useFileRoute } from "./utils/useRoute";
 import { FileRunner } from "./components/filerunner";
 import { cliApi } from "./utils/api";
+import { ButtonDropdown } from "./components/common/button";
 
 const SubscriptionsHelper = () => {
   useConnectionStateToasts();
@@ -121,70 +122,31 @@ export default function AppCore() {
 
 const NavMenu = () => {
   return (
-    <Menu as="div" className="relative inline-block text-left">
-      <div>
-        <Menu.Button className="flex items-center rounded-sm  text-gray-50 hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
-          <span className="sr-only">{`Open options`}</span>
-          <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="py-1">
-            <Menu.Item>
-              {({ active }) => (
-                <a
-                  href="https://discord.gg/4wD3CNdsf6"
-                  className={classNames(
-                    active ? "bg-gray-100 text-indigo-700" : "text-gray-700",
-                    "flex flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
-                  )}
-                >
-                  <QuestionMarkCircleIcon className="h-4" aria-hidden="true" />
-                  {`Support`}
-                </a>
-              )}
-            </Menu.Item>
-            <Menu.Item>
-              {({ active }) => (
-                <a
-                  href="https://github.com/pingdotgg/sample_hooks/issues/new"
-                  className={classNames(
-                    active ? "bg-gray-100 text-indigo-700" : "text-gray-700",
-                    "flex flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
-                  )}
-                >
-                  <ArchiveBoxIcon className="h-4" aria-hidden="true" />
-                  {`File an Issue`}
-                </a>
-              )}
-            </Menu.Item>
-            <Menu.Item>
-              {({ active }) => (
-                <a
-                  href="https://docs.webhookthing.com"
-                  className={classNames(
-                    active ? "bg-gray-100 text-indigo-700" : "text-gray-700",
-                    "flex flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
-                  )}
-                >
-                  <BookOpenIcon className="h-4" aria-hidden="true" />
-                  {`Documentation`}
-                </a>
-              )}
-            </Menu.Item>
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <ButtonDropdown
+      label={`Open options`}
+      srlabel={true}
+      variant="text"
+      icon={<EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />}
+      items={[
+        {
+          name: "Support",
+          href: "https://discord.gg/4wD3CNdsf6",
+          icon: <QuestionMarkCircleIcon />,
+          type: "link",
+        },
+        {
+          name: "File an issue",
+          href: "https://github.com/pingdotgg/sample_hooks/issues/new",
+          icon: <ArchiveBoxIcon />,
+          type: "link",
+        },
+        {
+          name: "Documentation",
+          href: "https://docs.webhookthing.com",
+          icon: <BookOpenIcon className="h-5 w-5 flex-shrink-0" />,
+          type: "link",
+        },
+      ]}
+    />
   );
 };

apps/cli/cli-web/src/components/breadcrumbs.tsx

@@ -0,0 +1,170 @@
+import { FolderIcon, HomeIcon } from "@heroicons/react/20/solid";
+import { Link } from "wouter";
+import { Tooltip } from "./common/tooltip";
+import Button, {
+  ButtonDropdown,
+  ButtonLink,
+  ButtonProps,
+  SplitButtonDropdown,
+  type ListItemWithIcon,
+} from "./common/button";
+
+import { classNames } from "../utils/classnames";
+
+const pathArrToUrl = (pathArr: string[], nav?: string) => {
+  const url = nav ? `${pathArr.concat(nav).join("/")}` : `${pathArr.join("/")}`;
+
+  // make sure we always have a leading slash
+  if (!url.startsWith("/")) return `/${url}`;
+  return url;
+};
+
+export const Nav = (input: { path: string; actions?: ActionItems }) => {
+  const { path, actions } = input;
+
+  const pathArr = path.split("/").slice(1);
+
+  return (
+    <nav
+      className="flex items-center justify-between pb-4"
+      aria-label="Breadcrumb"
+    >
+      <Breadcrumbs path={path} pathArr={pathArr} />
+      {actions && <Actions items={actions} />}
+    </nav>
+  );
+};
+
+const Breadcrumbs = (input: { path: string; pathArr: string[] }) => {
+  const { path, pathArr } = input;
+
+  return (
+    <ol role="list" className="flex items-center">
+      <li className="flex-items-center">
+        <Link
+          href="/"
+          className={classNames(
+            "flex items-center text-gray-400",
+            path.length > 1 ? "hover:text-indigo-600" : "cursor-default"
+          )}
+        >
+          <HomeIcon className="h-5 flex-shrink-0" aria-hidden="true" />
+          <span className="sr-only">{`root`}</span>
+        </Link>
+      </li>
+      {path.length > 1 &&
+        pathArr.map((page, i) => (
+          <li key={page}>
+            <div className="flex items-center">
+              <svg
+                className="h-5 flex-shrink-0 text-gray-300"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                aria-hidden="true"
+              >
+                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+              </svg>
+              <Link
+                href={pathArrToUrl(pathArr.slice(0, pathArr.indexOf(page) + 1))}
+                className={classNames(
+                  "text-sm font-medium text-gray-400 ",
+                  i !== pathArr.length - 1
+                    ? "hover:text-indigo-600"
+                    : "cursor-default"
+                )}
+                aria-current={page ? "page" : undefined}
+              >
+                <Tooltip content={page}>
+                  <FolderIcon
+                    className={classNames(
+                      "inline h-5",
+                      i === pathArr.length - 1
+                        ? "hidden"
+                        : pathArr.join().length > 48
+                        ? ""
+                        : "sm:hidden"
+                    )}
+                    aria-hidden="true"
+                  />
+                </Tooltip>
+                <p
+                  className={classNames(
+                    i === pathArr.length - 1
+                      ? "inline truncate"
+                      : pathArr.join().length > 48
+                      ? "hidden"
+                      : "hidden sm:inline"
+                  )}
+                >
+                  {page}
+                </p>
+              </Link>
+            </div>
+          </li>
+        ))}
+    </ol>
+  );
+};
+
+type ActionsItemCommon = {
+  label: string;
+  srlabel?: boolean;
+};
+
+type ActionsItemButton = ActionsItemCommon &
+  ButtonProps & {
+    type: "button";
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  };
+
+type ActionsItemSplitButton = ActionsItemCommon &
+  ButtonProps & {
+    type: "splitButton";
+    items: ListItemWithIcon[];
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  };
+
+type ActionsItemDropdownButton = ActionsItemCommon &
+  ButtonProps & {
+    type: "dropdownButton";
+    items: ListItemWithIcon[];
+  };
+
+type ActionsItemLink = ActionsItemCommon &
+  ButtonProps & {
+    type: "link";
+    href?: string;
+  };
+
+type ActionsItem =
+  | ActionsItemLink
+  | ActionsItemButton
+  | ActionsItemSplitButton
+  | ActionsItemDropdownButton;
+
+// TODO: some better way to have icons here, ping code had `dropdownItemWithIcon`
+export type ActionItems = ActionsItem[];
+
+const Actions = (input: { items: ActionItems }) => {
+  return (
+    <div className="flex flex-row gap-1">
+      {input.items.map((item, i) => {
+        if (item.type === "link")
+          return (
+            <ButtonLink key={`${i}-breadcrumb}`} {...item}>
+              {item.label}
+            </ButtonLink>
+          );
+        if (item.type === "button")
+          return (
+            <Button key={`${i}-breadcrumb}`} {...item}>
+              {item.label}
+            </Button>
+          );
+        if (item.type === "splitButton")
+          return <SplitButtonDropdown {...item} />;
+        if (item.type === "dropdownButton") return <ButtonDropdown {...item} />;
+      })}
+    </div>
+  );
+};