import { Fragment } from "react"; import { useLocation, Link } from "wouter"; import { useTranslation } from "react-i18next"; import type { TFunction } from "i18next"; import { useGetTool, getGetToolQueryKey } from "@workspace/api-client-react"; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; type Crumb = { href?: string; label: string }; function buildCrumbs(location: string, t: TFunction): Crumb[] { const crumbs: Crumb[] = []; if (location.startsWith("/tools")) { crumbs.push({ href: "/tools", label: t("nav.browseTools") }); const match = location.match(/^\/tools\/(\d+)/); if (match) { crumbs.push({ href: `/tools/${match[1]}`, label: t("browse.tool") }); if (location.includes("/edit")) crumbs.push({ label: t("common.edit") }); } else if (location.startsWith("/tools/new")) { crumbs.push({ label: t("nav.addTool") }); } } else if (location.startsWith("/admin")) { crumbs.push({ href: "/admin", label: t("nav.admin") }); if (location.startsWith("/admin/redundancy")) crumbs.push({ label: t("nav.redundancy") }); } else if (location.startsWith("/watchlist")) { crumbs.push({ label: t("nav.watchlist") }); } else if (location.startsWith("/trash")) { crumbs.push({ label: t("nav.trash") }); } else if (location.startsWith("/compare")) { crumbs.push({ label: t("compare.title") }); } else if (location.startsWith("/analytics")) { crumbs.push({ label: t("nav.analytics") }); } else if (location.startsWith("/login")) { crumbs.push({ label: t("auth.signIn") }); } return crumbs; } export function Breadcrumbs() { const [location] = useLocation(); const { t } = useTranslation(); const detailMatch = location.match(/^\/tools\/(\d+)/); const toolId = detailMatch ? parseInt(detailMatch[1], 10) : 0; const { data: tool } = useGetTool(Number.isFinite(toolId) ? toolId : 0, { query: { queryKey: getGetToolQueryKey(toolId), enabled: Number.isFinite(toolId) && toolId > 0, }, }); const crumbs = buildCrumbs(location, t); if (crumbs.length <= 1) return null; if (toolId > 0 && tool?.name) { const idx = crumbs.findIndex((c) => c.href === `/tools/${toolId}`); if (idx >= 0) crumbs[idx].label = tool.name; } return ( {crumbs.map((crumb, i) => { const isLast = i === crumbs.length - 1; return ( {i > 0 && } {isLast || !crumb.href ? ( {crumb.label} ) : ( {crumb.label} )} ); })} ); }