ui phase 2

client/src/layout/CustomerLayout.tsx

@@ -1,33 +1,94 @@
 'use client';
 import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
-import { Box, Stack } from '@mui/material';
-import { useLocale, useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { ErrorBoundary } from '@/components';
-import AppIconButton from '@/components/common/AppIconButton';
+import { Box, Stack, Tab, Tabs } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { AppIcon, AppIconButton, ErrorBoundary } from '@/components';
 import { NotificationBell } from '@/components/notifications';
 import { CONTENT_MAX_WIDTH } from '@/components/config';
 import { ROUTES } from '@/constants';
 import { LinkToPage } from '@/utils';
-import { useIsMobile } from '@/hooks';
+import { usePathname, useRouter } from '@/i18n/navigation';
 import { TopBar, BottomBar } from './components';
 import { DarkModeToggleButton } from './components/DarkModeButton';
-import { TOP_BAR_DESKTOP_HEIGHT, TOP_BAR_MOBILE_HEIGHT } from './config';
+import BrandLockup from './components/BrandLockup';
+import { matchActivePath } from './matchActivePath';
+import { PageTitleProvider, isCustomerRootTab, useRouteTitle } from './routeTitle';
+import { TOP_BAR_DESKTOP_HEIGHT, TOP_BAR_MOBILE_HEIGHT, TOP_NAV_DESKTOP_HEIGHT } from './config';
+
+/** The ≥md replacement for the mobile BottomBar — the same 5 tabs, inline in the header. */
+const CustomerDesktopNav: FunctionComponent<{ items: Array<LinkToPage> }> = ({ items }) => {
+  const pathname = usePathname();
+  const router = useRouter();
+  const activePath = matchActivePath(pathname, items.map((item) => item.path)) ?? false;
+
+  return (
+    <Box sx={{ display: { xs: 'none', md: 'block' }, borderTop: '1px solid', borderColor: 'divider' }}>
+      <Tabs
+        value={activePath}
+        onChange={(_event, value: string) => router.push(value)}
+        sx={{ minHeight: TOP_NAV_DESKTOP_HEIGHT, px: 2 }}
+      >
+        {items.map((item) => (
+          <Tab
+            key={item.path}
+            value={item.path}
+            label={item.title}
+            icon={item.icon ? <AppIcon icon={item.icon} size={18} /> : undefined}
+            iconPosition="start"
+            sx={{ minHeight: TOP_NAV_DESKTOP_HEIGHT }}
+          />
+        ))}
+      </Tabs>
+    </Box>
+  );
+};
+
+const CustomerHeader: FunctionComponent<{ bottomNavItems: Array<LinkToPage> }> = ({ bottomNavItems }) => {
+  const t = useTranslations('nav');
+  const tc = useTranslations('common');
+  const pathname = usePathname();
+  const router = useRouter();
+  const title = useRouteTitle();
+  const onRootTab = isCustomerRootTab(pathname);
+
+  return (
+    <TopBar
+      align={onRootTab ? 'center' : 'start'}
+      startNode={
+        onRootTab ? (
+          <AppIconButton
+            icon="support"
+            color="inherit"
+            title={t('support')}
+            onClick={() => router.push(ROUTES.SUPPORT_TICKETS)}
+          />
+        ) : (
+          <AppIconButton icon="back" title={tc('back')} onClick={() => router.back()} />
+        )
+      }
+      titleNode={onRootTab ? <BrandLockup /> : undefined}
+      title={onRootTab ? undefined : (title ?? undefined)}
+      endNode={
+        <Stack direction="row" sx={{ alignItems: 'center' }}>
+          <NotificationBell role="customer" />
+          <DarkModeToggleButton />
+        </Stack>
+      }
+      secondaryRow={<CustomerDesktopNav items={bottomNavItems} />}
+    />
+  );
+};
 
 /**
- * Customer (family) app shell — the primary, mobile-first experience.
- * A slim TopBar (a "Support / My Tickets" action at the start, the notification bell + dark-mode toggle at
- * the end), a scrollable content column constrained to reading width, and the 5-tab BottomBar
- * (Home/Bookings/Patients/Wallet/Profile) from the wireframe.
+ * Customer (family) app shell — the primary, mobile-first experience. A contextual TopBar (brand
+ * lockup on the 5 root tabs, page title + back chevron on pushed routes), a reading-width content
+ * column on a `background.default` canvas, and the 5-tab `BottomBar` on mobile — replaced by an
+ * inline desktop top-nav (`CustomerDesktopNav`) at `≥md`, where the mobile tab bar hides entirely.
  * @layout CustomerLayout
  */
 const CustomerLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
   const t = useTranslations('nav');
-  const tShell = useTranslations('shell');
   const tChrome = useTranslations('routeChrome');
-  const onMobile = useIsMobile();
-  const router = useRouter();
-  const locale = useLocale();
 
   const bottomNavItems: Array<LinkToPage> = useMemo(
     () => [
@@ -41,53 +102,42 @@ const CustomerLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
   );
 
   return (
-    <Stack sx={{ height: '100dvh' }}>
-      <Stack component="header">
-        <TopBar
-          title={tShell('customer_app')}
-          startNode={
-            <AppIconButton
-              icon="support"
-              color="inherit"
-              title={t('support')}
-              onClick={() => router.push(`/${locale}${ROUTES.SUPPORT_TICKETS}`)}
-            />
-          }
-          endNode={
-            <Stack direction="row" sx={{ alignItems: 'center' }}>
-              <NotificationBell role="customer" />
-              <DarkModeToggleButton />
-            </Stack>
-          }
-        />
-      </Stack>
+    <PageTitleProvider>
+      <Stack sx={{ height: '100dvh', bgcolor: 'background.default' }}>
+        <Stack component="header">
+          <CustomerHeader bottomNavItems={bottomNavItems} />
+        </Stack>
 
-      <Box
-        component="main"
-        sx={{
-          flexGrow: 1,
-          overflowY: 'auto',
-          width: '100%',
-          maxWidth: CONTENT_MAX_WIDTH,
-          mx: 'auto',
-          px: 2,
-          py: 2,
-          // AppBar is position: fixed — offset content by the top-bar height.
-          pt: `calc(${onMobile ? TOP_BAR_MOBILE_HEIGHT : TOP_BAR_DESKTOP_HEIGHT} + 8px)`,
-        }}
-      >
-        <ErrorBoundary
-          name="Customer"
-          title={tChrome('error_title')}
-          body={tChrome('error_body')}
-          retryLabel={tChrome('error_retry')}
+        <Box
+          component="main"
+          sx={{
+            flexGrow: 1,
+            overflowY: 'auto',
+            width: '100%',
+            // AppBar is position: fixed — offset content by the top-bar (+ desktop top-nav) height.
+            pt: {
+              xs: `calc(${TOP_BAR_MOBILE_HEIGHT} + 8px)`,
+              md: `calc(${TOP_BAR_DESKTOP_HEIGHT} + ${TOP_NAV_DESKTOP_HEIGHT} + 16px)`,
+            },
+          }}
         >
-          {children}
-        </ErrorBoundary>
-      </Box>
+          <Box sx={{ maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', px: 2, pb: 2 }}>
+            <ErrorBoundary
+              name="Customer"
+              title={tChrome('error_title')}
+              body={tChrome('error_body')}
+              retryLabel={tChrome('error_retry')}
+            >
+              {children}
+            </ErrorBoundary>
+          </Box>
+        </Box>
 
-      <BottomBar items={bottomNavItems} />
-    </Stack>
+        <Box sx={{ display: { xs: 'block', md: 'none' } }}>
+          <BottomBar items={bottomNavItems} />
+        </Box>
+      </Stack>
+    </PageTitleProvider>
   );
 };