From b0a11f178519643f3317503f51383a76ac4ce9da Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Wed, 29 Apr 2026 14:16:30 +0200
Subject: [PATCH] feat(mobile): add MobileLayout shell composing topbar +
 content + bottom tabs + more sheet

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

diff --git a/src/components/layout/mobile/mobile-layout.tsx b/src/components/layout/mobile/mobile-layout.tsx
new file mode 100644
index 0000000..9bac103
--- /dev/null
+++ b/src/components/layout/mobile/mobile-layout.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+
+import { MobileLayoutProvider } from './mobile-layout-provider';
+import { MobileTopbar } from './mobile-topbar';
+import { MobileBottomTabs } from './mobile-bottom-tabs';
+import { MoreSheet } from './more-sheet';
+
+/**
+ * Mobile shell: fixed compact topbar + scrollable content + fixed bottom tab
+ * bar. Renders only when CSS reveals it (data-shell="mobile") — both shells
+ * are in the DOM, see src/app/globals.css. The bottom tabs and More sheet
+ * derive the active port slug from the URL themselves, so this layout takes
+ * no portSlug prop.
+ */
+export function MobileLayout({ children }: { children: ReactNode }) {
+  const [moreOpen, setMoreOpen] = useState(false);
+
+  return (
+    <div data-shell="mobile" className="min-h-screen bg-background">
+      <MobileLayoutProvider>
+        <MobileTopbar />
+        <main className="pt-[calc(52px+env(safe-area-inset-top))] pb-[calc(56px+env(safe-area-inset-bottom))] min-h-screen">
+          {children}
+        </main>
+        <MobileBottomTabs onMoreClick={() => setMoreOpen(true)} />
+        <MoreSheet open={moreOpen} onOpenChange={setMoreOpen} />
+      </MobileLayoutProvider>
+    </div>
+  );
+}