feat: whyrating - initial project from turbostarter boilerplate

apps/web/src/modules/common/layout/dashboard/action-bar.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Fragment } from "react";
+import * as z from "zod";
+
+import { isKey, useTranslation } from "@turbostarter/i18n";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@turbostarter/ui-web/breadcrumb";
+import { buttonVariants } from "@turbostarter/ui-web/button";
+import { Icons } from "@turbostarter/ui-web/icons";
+import { Separator } from "@turbostarter/ui-web/separator";
+import { SidebarTrigger } from "@turbostarter/ui-web/sidebar";
+
+import { pathsConfig } from "~/config/paths";
+import { TurboLink } from "~/modules/common/turbo-link";
+
+const ROOT_KEY = "home";
+
+const indexSchema = z.object({
+  index: z.string(),
+});
+
+const hasIndex = (value: unknown): value is z.infer<typeof indexSchema> => {
+  return indexSchema.safeParse(value).success;
+};
+
+const getDisplayKey = (rawKey: string, hasPrevious: boolean) => {
+  if (rawKey === "index") return hasPrevious ? null : ROOT_KEY;
+  return rawKey;
+};
+const isSkippedKey = (key: string) => ["user", "organization"].includes(key);
+
+const addCrumb = (
+  trail: { key: string; path?: string }[],
+  rawKey: string,
+  path?: string,
+) => {
+  const displayKey = getDisplayKey(rawKey, trail.length > 0);
+  if (!displayKey || isSkippedKey(rawKey)) return trail;
+  return [...trail, { key: displayKey, path }];
+};
+
+const getPath = (
+  obj: unknown,
+  target: string,
+  current: { key: string; path?: string }[] = [],
+): { key: string; path?: string }[] | null => {
+  if (!obj || typeof obj !== "object") return null;
+
+  for (const [rawKey, value] of Object.entries(
+    obj as Record<string, unknown>,
+  )) {
+    if (typeof value === "string") {
+      if (value === target) return addCrumb(current, rawKey, value);
+      continue;
+    }
+
+    if (typeof value === "function") {
+      const candidates = target.split("/").filter(Boolean);
+      for (const candidate of candidates) {
+        try {
+          const result = (value as (arg: string) => unknown)(candidate);
+          if (typeof result === "string") {
+            if (result === target) return addCrumb(current, rawKey, result);
+          } else if (result && typeof result === "object") {
+            const parentPath = addCrumb(
+              current,
+              rawKey,
+              hasIndex(result) ? result.index : undefined,
+            );
+            const found = getPath(result, target, parentPath);
+            if (found) return found;
+          }
+        } catch {
+          // Ignore callable errors and continue trying other candidates
+        }
+      }
+      continue;
+    }
+
+    if (value && typeof value === "object") {
+      const parentPath = addCrumb(
+        current,
+        rawKey,
+        hasIndex(value) ? value.index : undefined,
+      );
+      const found = getPath(value, target, parentPath);
+      if (found) return found;
+    }
+  }
+
+  return null;
+};
+
+export const DashboardActionBar = () => {
+  const { t, i18n } = useTranslation("common");
+  const pathname = usePathname();
+
+  const rawPath = getPath(pathsConfig, pathname);
+  const path =
+    rawPath?.length === 1 ? [{ ...rawPath[0], key: ROOT_KEY }] : rawPath;
+
+  const last = path?.at(-1);
+
+  return (
+    <header className="flex h-16 shrink-0 items-center justify-between gap-2 px-4 transition-[width,height] ease-linear md:px-6 lg:px-7">
+      <div className="flex items-center gap-2 pr-4">
+        <SidebarTrigger className="-ml-1" />
+        {path ? (
+          <>
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                {path.length > 1 &&
+                  path.slice(1, -1).map((item, index, array) => (
+                    <Fragment key={item.key}>
+                      <BreadcrumbItem>
+                        <BreadcrumbLink asChild>
+                          <TurboLink href={item.path ?? "#"}>
+                            {isKey(item.key, i18n, "common")
+                              ? t(item.key)
+                              : item.key}
+                          </TurboLink>
+                        </BreadcrumbLink>
+                      </BreadcrumbItem>
+                      {index < array.length - 1 && <BreadcrumbSeparator />}
+                    </Fragment>
+                  ))}
+
+                {last && (
+                  <>
+                    {path.length > 2 && <BreadcrumbSeparator />}
+                    <BreadcrumbItem>
+                      <BreadcrumbPage>
+                        {isKey(last.key, i18n, "common")
+                          ? t(last.key)
+                          : last.key}
+                      </BreadcrumbPage>
+                    </BreadcrumbItem>
+                  </>
+                )}
+              </BreadcrumbList>
+            </Breadcrumb>
+          </>
+        ) : null}
+      </div>
+
+      <div className="text-muted-foreground flex items-center gap-2">
+        <a
+          href="https://github.com/turbostarter"
+          rel="noopener noreferrer"
+          target="_blank"
+          className={buttonVariants({ variant: "ghost", size: "icon" })}
+        >
+          <Icons.Github className="size-5" />
+        </a>
+
+        <a
+          href="https://discord.gg/KjpK2uk3JP"
+          rel="noopener noreferrer"
+          target="_blank"
+          className={buttonVariants({ variant: "ghost", size: "icon" })}
+        >
+          <Icons.Discord className="size-5" />
+        </a>
+      </div>
+    </header>
+  );
+};