From 4df04e1a58cc6c5baa7e92de3f0a31a28c1cf85c Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Wed, 29 Apr 2026 14:12:15 +0200
Subject: [PATCH] feat(mobile): add MobileTopbar with title, back-button, and
 primary-action slots

---
 .../layout/mobile/mobile-topbar.tsx           | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/layout/mobile/mobile-topbar.tsx

diff --git a/src/components/layout/mobile/mobile-topbar.tsx b/src/components/layout/mobile/mobile-topbar.tsx
new file mode 100644
index 0000000..f6e5a40
--- /dev/null
+++ b/src/components/layout/mobile/mobile-topbar.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { ChevronLeft } from 'lucide-react';
+import { useRouter, usePathname } from 'next/navigation';
+
+import { cn } from '@/lib/utils';
+import { useMobileChrome } from './mobile-layout-provider';
+
+/**
+ * Fixed compact topbar (52px + safe-area top inset). Renders the page title
+ * (auto-truncating), an optional back button, and an optional primary action
+ * — all driven by `useMobileChrome()` from the active page.
+ */
+export function MobileTopbar() {
+  const { title, primaryAction, showBackButton } = useMobileChrome();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Fall back to the last path segment (Title Case) if no page-supplied title.
+  const fallbackTitle =
+    pathname
+      .split('/')
+      .filter(Boolean)
+      .pop()
+      ?.replace(/-/g, ' ')
+      .replace(/\b\w/g, (c) => c.toUpperCase()) ?? 'Port Nimara';
+
+  return (
+    <header
+      className={cn(
+        'fixed top-0 inset-x-0 z-40 bg-background border-b border-border',
+        'h-[calc(52px+env(safe-area-inset-top))] pt-safe-top',
+        'flex items-center gap-2 px-3',
+      )}
+    >
+      {showBackButton ? (
+        <button
+          type="button"
+          onClick={() => router.back()}
+          aria-label="Go back"
+          className="-ml-1 size-11 inline-flex items-center justify-center text-foreground"
+        >
+          <ChevronLeft className="size-5" />
+        </button>
+      ) : (
+        <div className="size-11" aria-hidden />
+      )}
+
+      <h1 className="flex-1 text-base font-semibold truncate text-foreground">
+        {title ?? fallbackTitle}
+      </h1>
+
+      <div className="size-11 inline-flex items-center justify-end">{primaryAction}</div>
+    </header>
+  );
+}