feat(mobile): show entity name in mobile topbar on detail pages

Detail pages (clients, yachts, companies, berths, invoices, expenses)
now push their entity name + a back-button toggle to the mobile
topbar via useMobileChrome, replacing the URL UUID fallback that was
rendering before.

Supporting changes:
  - useMobileChrome() no longer throws when called outside the
    MobileLayoutProvider — desktop-tree consumers get a no-op
    setChrome so callers don't have to branch on shell type.
  - setChrome is now stable across renders (useCallback) so callers'
    useEffect dependency arrays don't infinite-loop.
  - DetailPageShell now also pushes its entityName + cleans up on
    unmount, and hides its desktop-only sticky header on mobile so it
    doesn't double up with the topbar (no current callers, prep for
    Phase 4 migration).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/layout/mobile/mobile-layout-provider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
 
 type MobileChromeState = {
   title: string | null;
@@ -21,26 +21,31 @@ export function MobileLayoutProvider({ children }: { children: ReactNode }) {
     showBackButton: false,
   });
 
-  const value = useMemo<MobileChromeApi>(
-    () => ({
-      ...state,
-      setChrome: (next) => setState((prev) => ({ ...prev, ...next })),
-    }),
-    [state],
-  );
+  const setChrome = useCallback((next: Partial<MobileChromeState>) => {
+    setState((prev) => ({ ...prev, ...next }));
+  }, []);
+
+  const value = useMemo<MobileChromeApi>(() => ({ ...state, setChrome }), [state, setChrome]);
 
   return <MobileChromeContext.Provider value={value}>{children}</MobileChromeContext.Provider>;
 }
 
+const NOOP_SET_CHROME = () => {};
+const NOOP_CHROME: MobileChromeApi = {
+  title: null,
+  primaryAction: null,
+  showBackButton: false,
+  setChrome: NOOP_SET_CHROME,
+};
+
 /**
  * Page-level hook to push a title / back-button / primary action into the
- * mobile topbar. The provider is only mounted by `<MobileLayout>`, so
- * desktop-shell renders never call into this context.
+ * mobile topbar. Both the desktop and mobile shells render the same
+ * children, so this hook MUST be safe to call from either tree. When the
+ * provider is missing (desktop tree), it returns a no-op so callers don't
+ * have to branch on shell type.
  */
 export function useMobileChrome() {
   const ctx = useContext(MobileChromeContext);
-  if (!ctx) {
-    throw new Error('useMobileChrome must be used inside <MobileLayoutProvider>');
-  }
-  return ctx;
+  return ctx ?? NOOP_CHROME;
 }