feat(mobile): add DetailPageShell with sticky header + mobile sticky-action shelf

src/components/shared/detail-page-shell.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+/**
+ * Wrapper for entity detail pages (clients, yachts, companies, etc.). Renders:
+ *   - sticky compact header (entity name + status pill)
+ *   - the children (existing tab dropdown selector + tab body)
+ *   - optional sticky bottom action shelf, pinned above the bottom tab bar on
+ *     mobile (`pb-[calc(56px+env(safe-area-inset-bottom))]` content padding).
+ */
+export function DetailPageShell({
+  entityName,
+  status,
+  children,
+  bottomActions,
+  className,
+}: {
+  entityName: string;
+  status?: ReactNode;
+  children: ReactNode;
+  bottomActions?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn('flex flex-col min-h-full', className)}>
+      <div className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b border-border px-4 py-3 sm:px-6">
+        <div className="flex items-center gap-3 min-w-0">
+          <h2 className="truncate text-lg font-semibold text-foreground">{entityName}</h2>
+          {status ? <div className="ml-auto shrink-0">{status}</div> : null}
+        </div>
+      </div>
+
+      <div className={cn('flex-1 px-4 py-4 sm:px-6 sm:py-6', bottomActions && 'pb-24 sm:pb-6')}>
+        {children}
+      </div>
+
+      {bottomActions ? (
+        <div
+          className={cn(
+            'sm:hidden',
+            'fixed inset-x-0 bottom-[calc(56px+env(safe-area-inset-bottom))] z-30',
+            'border-t border-border bg-background/95 backdrop-blur px-4 py-3',
+            'flex items-center gap-2',
+          )}
+        >
+          {bottomActions}
+        </div>
+      ) : null}
+    </div>
+  );
+}