|
| 1 | +// A full-page view opened from a workbench carries `?from=<workbench id>`, |
| 2 | +// so the trail back survives reload and share. Without it the page is just |
| 3 | +// its own trail. |
| 4 | + |
| 5 | +import { useQuery } from "@tanstack/react-query"; |
| 6 | +import { Fragment, useSyncExternalStore } from "react"; |
| 7 | + |
| 8 | +import { listWorkbenches } from "@/chat/workbench-tenants"; |
| 9 | +import { useBench } from "../bench-context"; |
| 10 | +import { ArrowLeft } from "../lib/icons"; |
| 11 | +import { Link } from "../navigation"; |
| 12 | +import { tenantKeys } from "../query-client"; |
| 13 | +import { getPath, subscribeToPath } from "../router-store"; |
| 14 | +import { workbenchPath } from "../workbench-path"; |
| 15 | + |
| 16 | +const FROM_PARAM = "from"; |
| 17 | + |
| 18 | +/** `path` with the originating workbench appended, for any link that opens a |
| 19 | + * full-page view from a workbench. */ |
| 20 | +export function benchLink(path: string, benchId: string | null): string { |
| 21 | + if (benchId === null) return path; |
| 22 | + const url = new URL(path, window.location.origin); |
| 23 | + url.searchParams.set(FROM_PARAM, benchId); |
| 24 | + return `${url.pathname}${url.search}${url.hash}`; |
| 25 | +} |
| 26 | + |
| 27 | +export type PageCrumb = { readonly label: string; readonly href?: string }; |
| 28 | + |
| 29 | +function useFromWorkbench(): { readonly id: string; readonly name: string | null } | null { |
| 30 | + // The path store re-renders this on navigation; it keeps the pathname |
| 31 | + // only, so the query string is read fresh. |
| 32 | + useSyncExternalStore(subscribeToPath, getPath); |
| 33 | + const id = new URLSearchParams(window.location.search).get(FROM_PARAM); |
| 34 | + const { selectedTenantId } = useBench(); |
| 35 | + const tenantId = selectedTenantId ?? ""; |
| 36 | + const workbenches = useQuery({ |
| 37 | + queryKey: tenantKeys.workbenches(tenantId), |
| 38 | + enabled: id !== null && selectedTenantId !== null, |
| 39 | + queryFn: () => listWorkbenches(tenantId), |
| 40 | + }); |
| 41 | + if (id === null) return null; |
| 42 | + return { id, name: workbenches.data?.find((w) => w.id === id)?.title ?? null }; |
| 43 | +} |
| 44 | + |
| 45 | +/** The page's crumbs, prefixed with the originating workbench when the URL |
| 46 | + * names one; `back` is the arrow's target. Until the name resolves the page |
| 47 | + * shows its own trail. */ |
| 48 | +export function usePageCrumbs(crumbs: readonly PageCrumb[]): { |
| 49 | + readonly crumbs: readonly PageCrumb[]; |
| 50 | + readonly back: { readonly href: string; readonly name: string } | null; |
| 51 | +} { |
| 52 | + const from = useFromWorkbench(); |
| 53 | + if (from === null || from.name === null) return { crumbs, back: null }; |
| 54 | + const href = workbenchPath(from.id); |
| 55 | + return { |
| 56 | + crumbs: [ |
| 57 | + { label: from.name, href }, |
| 58 | + ...crumbs.map((crumb) => |
| 59 | + crumb.href === undefined ? crumb : { ...crumb, href: benchLink(crumb.href, from.id) }, |
| 60 | + ), |
| 61 | + ], |
| 62 | + back: { href, name: from.name }, |
| 63 | + }; |
| 64 | +} |
| 65 | + |
| 66 | +export function PageBack({ href, name }: { readonly href: string; readonly name: string }) { |
| 67 | + return ( |
| 68 | + <Link to={href} className="stage-crumb-back" aria-label={`Back to ${name}`}> |
| 69 | + <ArrowLeft size={16} aria-hidden="true" /> |
| 70 | + </Link> |
| 71 | + ); |
| 72 | +} |
| 73 | + |
| 74 | +export function PageCrumbs({ crumbs: pageCrumbs }: { readonly crumbs: readonly PageCrumb[] }) { |
| 75 | + const { crumbs, back } = usePageCrumbs(pageCrumbs); |
| 76 | + const lastIndex = crumbs.length - 1; |
| 77 | + const trail = crumbs.map((crumb, index) => ( |
| 78 | + <Fragment key={`${String(index)}-${crumb.label}`}> |
| 79 | + {index > 0 ? ( |
| 80 | + <span className="stage-crumbs-sep" aria-hidden="true"> |
| 81 | + / |
| 82 | + </span> |
| 83 | + ) : null} |
| 84 | + {index === lastIndex ? ( |
| 85 | + <span className="stage-crumb-current" aria-current="page"> |
| 86 | + {crumb.label} |
| 87 | + </span> |
| 88 | + ) : crumb.href === undefined ? ( |
| 89 | + <span className="stage-crumb-label">{crumb.label}</span> |
| 90 | + ) : ( |
| 91 | + <Link to={crumb.href} className="stage-crumb-link"> |
| 92 | + {crumb.label} |
| 93 | + </Link> |
| 94 | + )} |
| 95 | + </Fragment> |
| 96 | + )); |
| 97 | + |
| 98 | + // A one-level page has nowhere to go up to — a Breadcrumb landmark around |
| 99 | + // a bare page title is noise, so the landmark appears only for a real |
| 100 | + // trail. |
| 101 | + if (lastIndex === 0) { |
| 102 | + return <div className="stage-crumbs">{trail}</div>; |
| 103 | + } |
| 104 | + return ( |
| 105 | + <nav className="stage-crumbs" aria-label="Breadcrumb"> |
| 106 | + {back !== null ? <PageBack {...back} /> : null} |
| 107 | + {trail} |
| 108 | + </nav> |
| 109 | + ); |
| 110 | +} |
0 commit comments