7e8110b2ff
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>
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
|
|
|
|
type MobileChromeState = {
|
|
title: string | null;
|
|
primaryAction: ReactNode | null;
|
|
showBackButton: boolean;
|
|
};
|
|
|
|
type MobileChromeApi = MobileChromeState & {
|
|
setChrome: (next: Partial<MobileChromeState>) => void;
|
|
};
|
|
|
|
const MobileChromeContext = createContext<MobileChromeApi | null>(null);
|
|
|
|
export function MobileLayoutProvider({ children }: { children: ReactNode }) {
|
|
const [state, setState] = useState<MobileChromeState>({
|
|
title: null,
|
|
primaryAction: null,
|
|
showBackButton: false,
|
|
});
|
|
|
|
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. 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);
|
|
return ctx ?? NOOP_CHROME;
|
|
}
|