Add global toolbar slots to BreadcrumbBar component

This commit is contained in:
gsxdsm
2026-03-14 14:05:29 -07:00
parent 0851e81b47
commit bc5d650248

View File

@@ -2,6 +2,7 @@ import { Link } from "@/lib/router";
import { Menu } from "lucide-react"; import { Menu } from "lucide-react";
import { useBreadcrumbs } from "../context/BreadcrumbContext"; import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { useSidebar } from "../context/SidebarContext"; import { useSidebar } from "../context/SidebarContext";
import { useCompany } from "../context/CompanyContext";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Breadcrumb, Breadcrumb,
@@ -12,10 +13,12 @@ import {
BreadcrumbSeparator, BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"; } from "@/components/ui/breadcrumb";
import { Fragment } from "react"; import { Fragment } from "react";
import { PluginSlotOutlet } from "@/plugins/slots";
export function BreadcrumbBar() { export function BreadcrumbBar() {
const { breadcrumbs } = useBreadcrumbs(); const { breadcrumbs } = useBreadcrumbs();
const { toggleSidebar, isMobile } = useSidebar(); const { toggleSidebar, isMobile } = useSidebar();
const { selectedCompanyId, selectedCompany } = useCompany();
if (breadcrumbs.length === 0) return null; if (breadcrumbs.length === 0) return null;
@@ -31,22 +34,37 @@ export function BreadcrumbBar() {
</Button> </Button>
); );
const globalToolbarSlots = (
<PluginSlotOutlet
slotTypes={["toolbarButton"]}
context={{
companyId: selectedCompanyId ?? null,
companyPrefix: selectedCompany?.issuePrefix ?? null,
}}
className="flex items-center gap-1 ml-auto shrink-0 pl-2"
/>
);
// Single breadcrumb = page title (uppercase) // Single breadcrumb = page title (uppercase)
if (breadcrumbs.length === 1) { if (breadcrumbs.length === 1) {
return ( return (
<div className="border-b border-border px-4 md:px-6 h-12 shrink-0 flex items-center min-w-0 overflow-hidden"> <div className="border-b border-border px-4 md:px-6 h-12 shrink-0 flex items-center">
{menuButton} {menuButton}
<div className="min-w-0 overflow-hidden flex-1">
<h1 className="text-sm font-semibold uppercase tracking-wider truncate"> <h1 className="text-sm font-semibold uppercase tracking-wider truncate">
{breadcrumbs[0].label} {breadcrumbs[0].label}
</h1> </h1>
</div> </div>
{globalToolbarSlots}
</div>
); );
} }
// Multiple breadcrumbs = breadcrumb trail // Multiple breadcrumbs = breadcrumb trail
return ( return (
<div className="border-b border-border px-4 md:px-6 h-12 shrink-0 flex items-center min-w-0 overflow-hidden"> <div className="border-b border-border px-4 md:px-6 h-12 shrink-0 flex items-center">
{menuButton} {menuButton}
<div className="min-w-0 overflow-hidden flex-1">
<Breadcrumb className="min-w-0 overflow-hidden"> <Breadcrumb className="min-w-0 overflow-hidden">
<BreadcrumbList className="flex-nowrap"> <BreadcrumbList className="flex-nowrap">
{breadcrumbs.map((crumb, i) => { {breadcrumbs.map((crumb, i) => {
@@ -69,5 +87,7 @@ export function BreadcrumbBar() {
</BreadcrumbList> </BreadcrumbList>
</Breadcrumb> </Breadcrumb>
</div> </div>
{globalToolbarSlots}
</div>
); );
} }