letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(launch-readiness-batch): UAT drains, navigation refactor, launch infra, trackers

Browse Source 
Bundles the rest of the in-flight work from this UAT round into one
checkpoint. Each sub-area is independent; see the headings below.

UAT polish (drained 11 findings from active-uat.md):
- Dialog primitive default bumped sm:max-w-xl/lg:max-w-3xl →
  sm:max-w-2xl/lg:max-w-4xl so multi-field forms + PDF previews
  aren't cramped at 1440-1920px.
- Notes tab badge aggregation: new countFor{Client,Yacht,Company}
  Aggregated helpers in notes.service mirror the listFor*Aggregated
  symmetric-reach joins. yacht-tabs + company-tabs render the
  badge; client-tabs already had badge support.
- Supplemental-info form polish bundle: BrandedAuthShell gains a
  `width: 'sm' | 'md'` prop (md uses min-h-dvh scroll instead of
  fixed inset-0 pin so long forms scroll naturally). Form picks up
  port branding (logoUrl + backgroundUrl + appName) via
  loadByToken. Address fields completed (street + city + region +
  postal + country). Port name eyebrow + success-state copy added.
- new-document-menu Upload-file landing toast: per-file completion
  emits toast.success with action link to the destination entity
  or folder.
- interest-tabs OverviewTab "from client" pill on Email + Phone
  rows via new EditableRow `inheritedFrom` prop.
- create-document-wizard subject picker → segmented button strip
  (5 types visible at once).

Launch infra:
- UTM column wiring (Init 1b step 4): migration
  0089_website_submissions_utm.sql adds utm_source/medium/campaign/
  term/content + composite index (port_id, utm_source, received_at)
  for per-campaign rollups. website-inquiries intake accepts the
  five fields. Residential intake intentionally untouched per audit
  scope.
- Invoicing module gate (Init 1c spike): new
  invoices-module.service + invoices layout guard + registry entry
  invoices_module_enabled (default false). Audit conclusion in
  launch-readiness.md: payments table is canonical money path;
  /invoices flow is parallel infrastructure now hidden by default.

Smart-back navigation refactor:
- Replaced breadcrumb component with history-aware Back button.
  New route-labels.ts + use-smart-back hook +
  navigation-history-tracker so back falls through to the parent
  route when there's no prior page in history.
- Sidebar / topbar / mobile-topbar adopt the new pattern; old
  breadcrumb-store kept for back-compat consumers but the
  breadcrumbs component is gone.
- 6 detail pages (admin/errors per-id + codes, invoices/
  upload-receipts, reports kind, tenancies detail, analytics
  metric, client detail) migrated.

Trackers + docs:
- docs/launch-readiness.md — master pre-launch tracker. Includes
  the reports gap audit (cross-cutting filter set, Marketing +
  Financial blockers, custom builder remaining entities, scheduled
  CSV/XLSX, template scope picker).
- docs/superpowers/audits/active-uat.md — 15 findings flipped
  OPEN → SHIPPED locally with fix-applied notes; 4 OPEN remaining
  (each blocked on user input or cross-repo).
- CLAUDE.md — minor session notes carried forward.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-05-27 22:42:37 +02:00
parent 3bdf59e917
commit cb8292464c
62 changed files with 2944 additions and 662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/layout/app-shell.tsx
View File

@@ -5,6 +5,7 @@ import { useEffect, useState, type ComponentProps, type ReactNode } from 'react'
import { cn } from '@/lib/utils';
import { Sidebar } from '@/components/layout/sidebar';
import { Topbar } from '@/components/layout/topbar';
import { NavigationHistoryTracker } from '@/components/layout/navigation-history-tracker';
import { MobileLayoutProvider } from '@/components/layout/mobile/mobile-layout-provider';
import { MobileTopbar } from '@/components/layout/mobile/mobile-topbar';
import { MobileBottomTabs } from '@/components/layout/mobile/mobile-bottom-tabs';
@@ -27,6 +28,10 @@ interface AppShellProps {
/** Per-port `tenancies_module_enabled` resolution. Gates the Tenancies
* sidebar entry SSR-side so the nav doesn't flicker in/out. */
tenanciesModuleByPort: Record<string, boolean>;
/** Per-port `expenses_module_enabled` resolution. Gates the Expenses
* + How-to-upload-receipts sidebar entries SSR-side. Defaults to
* true so existing ports keep the feature. */
expensesModuleByPort: Record<string, boolean>;
/**
* Server-rendered form-factor hint (from the request User-Agent). The
* shell mounts the matching tree on first render so we never paint the
@@ -90,6 +95,7 @@ export function AppShell({
ports,
portLogoUrls,
tenanciesModuleByPort,
expensesModuleByPort,
initialFormFactor,
children,
}: AppShellProps) {
@@ -142,6 +148,7 @@ export function AppShell({
ports,
portLogoUrls,
tenanciesModuleByPort,
expensesModuleByPort,
};
// Chrome subtree per tier.
@@ -218,6 +225,11 @@ export function AppShell({
return (
<MobileLayoutProvider>
{/* Records every in-app navigation so useSmartBack can return the
rep to the page they were actually on (e.g. Sarah Doe -> Yacht
-> Back -> Sarah) instead of always falling back to the
logical URL parent. Renders nothing. */}
<NavigationHistoryTracker />
<div
className={cn(
'bg-background',

70
src/components/layout/back-button.tsx Normal file
View File

@@ -0,0 +1,70 @@
'use client';
import Link from 'next/link';
import type { Route } from 'next';
import { ChevronLeft } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useSmartBack } from '@/hooks/use-smart-back';
interface BackButtonProps {
/** Visual treatment. Desktop shows chevron + "Back to X" label;
* mobile shows chevron only with the destination in aria-label so
* the 44px tap target stays uncluttered in the narrow topbar. */
variant: 'desktop' | 'mobile';
}
/**
* Contextual back button. Replaces the legacy breadcrumb chain that
* lived in the desktop topbar and the unconditional `router.back()`
* affordance on mobile. Returns nothing on top-level pages where the
* sidebar is the natural way out.
*
* Resolves its target via `useSmartBack()` - prefers a registered
* detail-page hint, falls back to URL-derived parent route.
*/
export function BackButton({ variant }: BackButtonProps) {
const target = useSmartBack();
if (!target) return null;
// Next typed-routes can't know that hint.href / URL-derived parents
// resolve to a registered route at compile time, so cast.
const href = target.href as Route;
if (variant === 'mobile') {
return (
<Link
href={href}
aria-label={`Back to ${target.label}`}
className={cn(
'size-11 inline-flex items-center justify-center rounded-full -ml-1',
'text-white/95 active:bg-white/10 transition-colors',
)}
>
<ChevronLeft className="size-[22px] stroke-[2.25]" aria-hidden />
</Link>
);
}
return (
<Link
href={href}
aria-label={`Back to ${target.label}`}
className={cn(
'inline-flex h-8 items-center gap-1 rounded-md px-2 -ml-2 min-w-0',
'text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent',
'transition-colors',
)}
title={`Back to ${target.label}`}
>
<ChevronLeft className="h-4 w-4 shrink-0" aria-hidden />
{/* Label-only (iOS-style "< Settings"). The chevron already
communicates "back"; doubling up with a "Back to" prefix wastes
horizontal space in a topbar that's already crowded by the
centered search bar. Full intent is preserved in the tooltip
+ aria-label. */}
<span className="truncate max-w-[160px]">{target.label}</span>
</Link>
);
}

135
src/components/layout/breadcrumbs.tsx
View File

@@ -1,135 +0,0 @@
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ChevronRight } from 'lucide-react';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
} from '@/components/ui/breadcrumb';
import { useUIStore } from '@/stores/ui-store';
import { useBreadcrumbStore } from '@/stores/breadcrumb-store';
// Human-readable labels for route segments
const SEGMENT_LABELS: Record<string, string> = {
dashboard: 'Dashboard',
clients: 'Clients',
interests: 'Interests',
berths: 'Berths',
documents: 'Documents',
files: 'Files',
expenses: 'Expenses',
invoices: 'Invoices',
email: 'Email',
reminders: 'Reminders',
settings: 'Settings',
admin: 'Administration',
reports: 'Reports',
new: 'New',
edit: 'Edit',
profile: 'Profile',
};
// UUID v4-ish (or any 36-char hex+dash) - used to skip entity-id segments
// from the breadcrumbs since the page H1 already shows the entity name.
const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
function isIdSegment(segment: string): boolean {
return UUID_RE.test(segment);
}
function formatSegment(segment: string): string {
return (
SEGMENT_LABELS[segment] ?? segment.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
);
}
export function Breadcrumbs() {
const pathname = usePathname();
const currentPortSlug = useUIStore((s) => s.currentPortSlug);
const hint = useBreadcrumbStore((s) => s.hints[pathname]);
// Split pathname and filter empty segments
const rawSegments = pathname.split('/').filter(Boolean);
// Remove the portSlug segment and any UUID-ish entity-id segments - the
// page H1 already shows the entity name, no need to leak the raw id.
const segments = (
currentPortSlug ? rawSegments.filter((seg) => seg !== currentPortSlug) : rawSegments
).filter((seg) => !isIdSegment(seg));
if (segments.length === 0) return null;
// Build href for each segment from the URL.
const urlCrumbs = segments.map((segment, index) => {
const segmentsUpToHere = rawSegments.slice(0, rawSegments.indexOf(segment, index) + 1);
const href = '/' + segmentsUpToHere.join('/');
const label = formatSegment(segment);
const isLast = index === segments.length - 1;
return { label, href, isLast };
});
// When a detail page registered a hint, splice in the parent crumbs
// (e.g. the parent client name) and replace the trailing label with
// the entity's actual name (e.g. "B17"). This turns the URL-only
// "Clients › Interests" into "Clients › Mary Smith › Interest › B17"
// when the rep clicked from a client page. URL-only renders untouched
// when no hint is registered.
const crumbs = (() => {
if (!hint) return urlCrumbs;
const head = urlCrumbs.slice(0, -1).map((c) => ({ ...c, isLast: false }));
const parents = hint.parents.map((p) => ({
label: p.label,
href: p.href ?? pathname,
isLast: false,
}));
const lastUrlCrumb = urlCrumbs[urlCrumbs.length - 1];
const tail = {
label: hint.current,
href: lastUrlCrumb?.href ?? pathname,
isLast: true,
};
return [...head, ...parents, tail];
})();
return (
<Breadcrumb>
<BreadcrumbList className="text-sm gap-1.5">
{crumbs.map((crumb) => (
// Each crumb + its trailing separator share a single
// inline-flex `<li>` so flex-wrap can't strand the
// separator at end-of-line above the wrapped child crumb.
<BreadcrumbItem key={crumb.href}>
{crumb.isLast ? (
<BreadcrumbPage className="font-medium text-foreground truncate max-w-[160px]">
{crumb.label}
</BreadcrumbPage>
) : (
<>
<BreadcrumbLink asChild>
<Link
// eslint-disable-next-line @typescript-eslint/no-explicit-any
href={crumb.href as any}
className="text-muted-foreground hover:text-foreground transition-colors rounded px-1 -mx-1 truncate max-w-[160px]"
>
{crumb.label}
</Link>
</BreadcrumbLink>
<ChevronRight
className="w-3 h-3 text-muted-foreground/40"
aria-hidden
role="presentation"
/>
</>
)}
</BreadcrumbItem>
))}
</BreadcrumbList>
</Breadcrumb>
);
}

27
src/components/layout/mobile/mobile-topbar.tsx
View File

@@ -1,9 +1,10 @@
'use client';
import { ChevronLeft } from 'lucide-react';
import { useRouter, usePathname } from 'next/navigation';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { BackButton } from '@/components/layout/back-button';
import { useSmartBack } from '@/hooks/use-smart-back';
import { useMobileChrome } from './mobile-layout-provider';
/**
@@ -17,9 +18,13 @@ import { useMobileChrome } from './mobile-layout-provider';
* URL's last segment is title-cased as a fallback.
*/
export function MobileTopbar() {
const { title, primaryAction, showBackButton } = useMobileChrome();
const router = useRouter();
const { title, primaryAction } = useMobileChrome();
const pathname = usePathname();
// Mobile back affordance now derives from the same smart-back hook as
// the desktop topbar so the destination is consistent across viewports
// (and survives deep-link refresh). When useSmartBack returns null
// (top-level pages) the brand-mark fallback renders in its place.
const backTarget = useSmartBack();
// UUID detection - the URL's last segment on detail pages is the
// entity's UUID, and title-casing it produces an ugly "Abc 123 Uuid"
@@ -63,18 +68,8 @@ export function MobileTopbar() {
'flex items-center gap-2 px-3',
)}
>
{showBackButton ? (
<button
type="button"
onClick={() => router.back()}
aria-label="Go back"
className={cn(
'size-11 inline-flex items-center justify-center rounded-full -ml-1',
'text-white/95 active:bg-white/10 transition-colors',
)}
>
<ChevronLeft className="size-[22px] stroke-[2.25]" aria-hidden />
</button>
{backTarget ? (
<BackButton variant="mobile" />
) : (
<div
aria-label={portTitle || 'Home'}

57
src/components/layout/navigation-history-tracker.tsx Normal file
View File

@@ -0,0 +1,57 @@
'use client';
import { useEffect, useRef } from 'react';
import { usePathname } from 'next/navigation';
import { useBreadcrumbStore } from '@/stores/breadcrumb-store';
/**
* Tracks in-app navigation so `useSmartBack` can return the user to the
* page they were actually on rather than just the logical URL parent.
*
* Push/pop semantics: when the user navigates forward (new pathname,
* not equal to the current top of stack), the PREVIOUS pathname is
* pushed. When the user navigates to whatever's currently on top (i.e.
* pressed the back button or used browser back), the top is popped.
* This prevents the infamous back-button-loop ("press back, end up on
* the page you came from, press back again, return to the page you
* just left").
*
* Mounts once at the app shell so it sees every route change without
* unmounting. The store is in-memory only - a hard refresh clears the
* history and the back button falls through to its other resolution
* tiers (registered hint, then URL-derived parent).
*/
export function NavigationHistoryTracker() {
const pathname = usePathname();
// First render's "previous" is null so we don't push a synthetic
// entry. After the first navigation, this ref holds whatever pathname
// was active just before the latest route change.
const previousRef = useRef<string | null>(null);
useEffect(() => {
const previous = previousRef.current;
previousRef.current = pathname;
// No-op on initial mount and on idempotent renders.
if (previous === null || previous === pathname) return;
// Read the live store outside of React's subscription model so this
// effect doesn't re-fire on every store update (only on route changes).
const state = useBreadcrumbStore.getState();
const top = state.historyStack[state.historyStack.length - 1];
if (top === pathname) {
// The user navigated back to whatever was on top of the stack - pop
// it so the next "back" press uses the next-older entry (or falls
// through to logical parent when the stack is empty).
state.popHistory();
} else {
// Forward navigation: push the previous pathname so the back button
// on the page we just landed on can return to it.
state.pushHistory(previous);
}
}, [pathname]);
return null;
}

51
src/components/layout/sidebar.tsx
View File

@@ -14,6 +14,7 @@ import {
Building2,
Receipt,
FileText,
FileBarChart,
Inbox,
Camera,
Globe,
@@ -55,6 +56,11 @@ interface SidebarProps {
/** Per-port `tenancies_module_enabled` resolution. Gates the Tenancies
* sidebar entry. Resolved server-side in the dashboard layout. */
tenanciesModuleByPort?: Record<string, boolean>;
/** Per-port `expenses_module_enabled` resolution. Gates the Expenses
* + How-to-upload-receipts sidebar entries. Resolved server-side in
* the dashboard layout. Defaults to true (feature on) per port when
* the map is missing for the active port. */
expensesModuleByPort?: Record<string, boolean>;
}
interface NavItem {
@@ -80,6 +86,12 @@ interface NavItemGated extends NavItem {
/** When true, only render this item if the tenancies module is enabled
* for the current port. Resolved against `tenanciesModuleByPort`. */
requiresTenanciesModule?: boolean;
/** When true, only render this item if the expenses module is enabled
* for the current port. Resolved against `expensesModuleByPort`. */
requiresExpensesModule?: boolean;
/** When true, only render this item if Umami analytics is wired up
* for the port. */
umamiRequired?: boolean;
}
function buildNavSections(portSlug: string | undefined): NavSection[] {
@@ -123,17 +135,26 @@ function buildNavSections(portSlug: string | undefined): NavSection[] {
{
title: 'Insights',
marinaRequired: true,
umamiRequired: true,
items: [
// Reports surface (dashboard / clients / berths / interests
// builders, plus templates / schedules / runs). Routes existed
// since the report-builder ship but the sidebar entry was never
// wired - reps had to land here via direct link.
{
href: `${base}/reports`,
label: 'Reports',
icon: FileBarChart,
},
// Marketing / Umami integration. Distinct from the main dashboard
// (which is sales-focused) so the audience and the metrics don't
// compete for visual real estate. Whole section is hidden when
// Umami isn't wired up - see SidebarContent.
// compete for visual real estate. Hidden when Umami isn't wired
// up via the per-item umamiRequired flag below.
{
href: `${base}/website-analytics`,
label: 'Website analytics',
icon: Globe,
},
umamiRequired: true,
} as NavItemGated,
],
},
{
@@ -145,7 +166,12 @@ function buildNavSections(portSlug: string | undefined): NavSection[] {
title: 'Financial',
marinaRequired: true,
items: [
{ href: `${base}/expenses`, label: 'Expenses', icon: Receipt },
{
href: `${base}/expenses`,
label: 'Expenses',
icon: Receipt,
requiresExpensesModule: true,
} as NavItemGated,
// Invoices nav entry removed - the expense-to-PDF flow is the
// only invoicing surface now (employee expense reports). The
// standalone /invoices route still exists for any back-compat
@@ -157,7 +183,8 @@ function buildNavSections(portSlug: string | undefined): NavSection[] {
href: `${base}/invoices/upload-receipts`,
label: 'How to upload receipts',
icon: Camera,
},
requiresExpensesModule: true,
} as NavItemGated,
],
},
{
@@ -252,6 +279,7 @@ function SidebarContent({
hasMarinaAccess,
hasResidentialAccess,
tenanciesModuleEnabled,
expensesModuleEnabled,
user,
ports,
currentPort,
@@ -266,6 +294,7 @@ function SidebarContent({
hasMarinaAccess: boolean;
hasResidentialAccess: boolean;
tenanciesModuleEnabled: boolean;
expensesModuleEnabled: boolean;
user?: SidebarProps['user'];
ports?: Port[];
currentPort: Port | null;
@@ -389,6 +418,8 @@ function SidebarContent({
const gated = item as NavItemGated;
if (gated.requiresTenanciesModule && !tenanciesModuleEnabled)
return false;
if (gated.requiresExpensesModule && !expensesModuleEnabled) return false;
if (gated.umamiRequired && !umamiConfigured) return false;
return true;
})
.map((item) => (
@@ -482,6 +513,7 @@ export function Sidebar({
ports,
portLogoUrls,
tenanciesModuleByPort,
expensesModuleByPort,
}: SidebarProps) {
// Sidebar collapse removed - design preference is the always-expanded
// form. Forcibly false; the store flag stays for backwards-compat with
@@ -494,6 +526,12 @@ export function Sidebar({
const tenanciesModuleEnabled = currentPortId
? (tenanciesModuleByPort?.[currentPortId] ?? false)
: false;
// Expenses defaults to enabled when the port's entry is missing - the
// registry default is `true`, so a port that's never explicitly
// toggled the feature should keep it visible.
const expensesModuleEnabled = currentPortId
? (expensesModuleByPort?.[currentPortId] ?? true)
: true;
// Super admins see every section regardless of role rows.
const hasAdminAccess =
@@ -526,6 +564,7 @@ export function Sidebar({
hasMarinaAccess={hasMarinaAccess}
hasResidentialAccess={hasResidentialAccess}
tenanciesModuleEnabled={tenanciesModuleEnabled}
expensesModuleEnabled={expensesModuleEnabled}
user={user}
ports={ports}
currentPort={currentPort}

83
src/components/layout/topbar.tsx
View File

@@ -1,13 +1,11 @@
'use client';
import { ChevronLeft, Plus } from 'lucide-react';
import { useRouter, usePathname } from 'next/navigation';
import { Plus } from 'lucide-react';
import { useRouter } from 'next/navigation';
import type { Route } from 'next';
import type { ReactNode } from 'react';
import { useUIStore } from '@/stores/ui-store';
import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Separator } from '@/components/ui/separator';
@@ -19,7 +17,7 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
import { BackButton } from '@/components/layout/back-button';
import { CommandSearch } from '@/components/search/command-search';
import { Inbox } from '@/components/layout/inbox';
import { UserMenu } from '@/components/layout/user-menu';
@@ -36,58 +34,32 @@ interface TopbarProps {
export function Topbar({ ports, user, leadingSlot }: TopbarProps) {
const router = useRouter();
const pathname = usePathname();
const currentPortSlug = useUIStore((s) => s.currentPortSlug);
const base = currentPortSlug ? `/${currentPortSlug}` : '';
// Reuse the existing per-page chrome state (originally built for the
// mobile topbar) so any detail page that already declares
// `showBackButton: true` automatically gets the back affordance on
// desktop too. Saves duplicating the wiring across N detail headers.
const { showBackButton: mobileShowBack } = useMobileChrome();
// Auto-show on entity-detail pages: `/[portSlug]/[section]/[id]` and
// deeper. Top-level lists like `/[portSlug]/clients` stay clean.
// The mobile-chrome flag still wins when a page explicitly opts in.
// Pages that already render their own "back to X" link inline
// (residential interest detail, expense scan flow, etc.) opt OUT
// by setting the chrome flag to false on mount - the flag override
// path here lets them suppress this auto-show.
const segments = pathname.split('/').filter(Boolean);
const isDeepPage = segments.length > 2;
const showBackButton = mobileShowBack || isDeepPage;
return (
// Three-column grid: breadcrumbs left, search center, actions right.
// The brand logo lives in the sidebar header (per design feedback) so the
// topbar center is dedicated to the global search bar.
// Three-column grid: smart back button left, search center, actions right.
// The brand logo lives in the sidebar header so the topbar center is
// dedicated to the global search bar.
//
// Grid is `auto auto 1fr` instead of three fr-tracks: the left + right
// columns size to their actual content (logo trigger + breadcrumbs on
// the left; New / Inbox / Avatar on the right), and the search column
// soaks up the rest. The earlier `minmax(280px,800px)` center column
// auto-grew to the search bar's intrinsic `max-w-2xl` (672px), which
// squeezed the right column below the width of "+ New + Inbox +
// Avatar" and pushed the New button off-screen at every tablet +
// narrow-desktop width. With the center as a single fr-track, the
// right column always gets the space it needs.
// Grid is `auto auto 1fr` so the left + right columns size to their
// actual content (back-button label on the left; New / Inbox / Avatar
// on the right) and the search column soaks up the rest.
//
// Wayfinding model: the legacy breadcrumb chain was removed in favor
// of a single contextual back button ("Back to Clients", "Back to
// Sarah Doe"). Detail pages register their parent via
// `useBreadcrumbHint` so the label is entity-aware; everything else
// is URL-derived. See src/hooks/use-smart-back.ts.
<header className="relative grid h-14 grid-cols-[auto_1fr_auto] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
{/* LEFT: optional sidebar trigger (tablet) + optional back button + breadcrumbs */}
<div className="min-w-0 flex items-center gap-1.5">
{/* LEFT: optional sidebar trigger (tablet) + smart back button.
Hard-capped width so the column never extends into the
absolutely-positioned search bar's footprint. The cap is
conservative on smaller widths to leave the search bar
breathing room, more generous at xl. */}
<div className="min-w-0 flex items-center gap-1.5 max-w-[180px] lg:max-w-[220px] xl:max-w-[260px]">
{leadingSlot}
{showBackButton && (
<button
type="button"
onClick={() => router.back()}
aria-label="Go back"
title="Go back"
className={cn(
'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md',
'text-muted-foreground hover:text-foreground hover:bg-accent transition-colors',
)}
>
<ChevronLeft className="h-4 w-4" aria-hidden />
</button>
)}
<Breadcrumbs />
<BackButton variant="desktop" />
</div>
{/* CENTER (spacer): the search bar is absolutely positioned below
@@ -105,14 +77,17 @@ export function Topbar({ ports, user, leadingSlot }: TopbarProps) {
viewport, so plain `left: 50%` is already correct.
Caps scale by viewport tier so the bar doesn't crowd the side
columns:
columns. The previous max-w-2xl (672px) at xl ate so much of
the topbar that the back-button column on the left got
visually clipped by the search bar; tightened to max-w-xl so
a "Back to Administration"-class label can render in full:
base: max-w-md (28rem)
lg: max-w-xl (36rem)
xl: max-w-2xl (42rem)
lg: max-w-lg (32rem)
xl: max-w-xl (36rem)
The wrapper is pointer-events-none so it doesn't capture
clicks meant for the left/right columns underneath; only the
input itself receives pointer events. */}
<div className="pointer-events-none absolute inset-y-0 left-1/2 lg:left-[calc(50%-var(--width-sidebar)/2)] flex w-full max-w-md -translate-x-1/2 items-center px-4 lg:max-w-xl xl:max-w-2xl">
<div className="pointer-events-none absolute inset-y-0 left-1/2 lg:left-[calc(50%-var(--width-sidebar)/2)] flex w-full max-w-md -translate-x-1/2 items-center px-4 lg:max-w-lg xl:max-w-xl">
<div className="pointer-events-auto w-full min-w-0">
<CommandSearch />
</div>