create-mithaq 0.0.0-stage → 0.1.1

package/template/templates/asas/src/ui/app-shell.tsx

@@ -0,0 +1,260 @@
+// The frame both screens may put at the root of a page: a collapsible sidebar holding the organization switcher, the nav and the user menu, and an inset holding the site header over the page.
+// A row that goes nowhere is not drawn, so there are no quick-create or inbox buttons, documents group, or help and search rows: none has a destination in this template.
+import { useState, useSyncExternalStore, type CSSProperties, type ReactNode } from 'react'
+import {
+  ArrowUpRight,
+  BookOpen,
+  Building2,
+  CalendarDays,
+  ClipboardList,
+  LayoutDashboard,
+  Settings2,
+  ShieldCheck,
+  Table2,
+  Tags,
+  UserCog,
+  UserRound,
+  Users,
+  type LucideIcon,
+} from 'lucide-react'
+import type { ShellProps } from 'mithaq/admin'
+import { useLocale, useNav, useScreen, useUser } from 'mithaq/admin/react'
+import { authArm } from '@/api.ts'
+import { locales, switchLocale } from '@/copy.ts'
+import { DiscardDialog } from '@/components/mithaq/form.tsx'
+import { NavSidebar, NavUserMenu, OrganizationSwitcher, type NavOrganization } from '@/components/mithaq/nav.tsx'
+import { buttonVariants } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import {
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/components/ui/sidebar'
+import { navLabel } from './screen-nav.tsx'
+
+export const regions = ['header', 'main'] as const
+
+/** One icon per nav entry, keyed by the entry's path under the screen, and `Table2` for any other. */
+const icons: Record<string, LucideIcon> = {
+  '/': LayoutDashboard,
+  '/users': UserRound,
+  '/organizations': Building2,
+  '/members': Users,
+  '/courses': BookOpen,
+  '/sessions': CalendarDays,
+  '/enrollments': ClipboardList,
+  '/tags': Tags,
+  '/roles': ShieldCheck,
+  '/member-roles': UserCog,
+  '/settings': Settings2,
+}
+export const iconOf = (path: string) => (Object.hasOwn(icons, path) ? icons[path]! : Table2)
+
+/**
+ * The path the browser is on. The server has no location, so nothing is
+ * marked current in the first paint and the entry is marked once it hydrates.
+ */
+const usePathname = () => useSyncExternalStore(() => () => {}, () => window.location.pathname, () => undefined)
+
+/**
+ * The locale switch and sign-out, in the user menu. The locale is a cookie and a reload, because the request middleware reads it before any route runs;
+ * the switch is asked first, in the app's discard dialog, where a form holds a change nobody saved.
+ */
+export function UserMenu() {
+  const { locale, t } = useLocale()
+  // The language asked for while a form holds a change nobody saved, which the
+  // app's own discard dialog confirms in the page's words.
+  const [asked, setAsked] = useState<string>()
+  return (
+    <>
+      <NavUserMenu
+        user={useUser()}
+        t={t}
+        locale={locale}
+        locales={locales}
+        onLocale={(next) => (window.onbeforeunload ? setAsked(next) : switchLocale({ to: next }))}
+        // Only once the provider has answered: its sign-out answers 200 with a
+        // session or without one, so a refusal stays where it is. `replace`,
+        // so Back does not return to the page signed out of. The sign-out that
+        // ends an impersonation answers the platform's address, where the staff
+        // member goes next.
+        onSignOut={() => void authArm('sign-out').then((answer) => answer.ok && window.location.replace(String(answer.body?.url ?? '/auth/sign-in')))}
+      />
+      <DiscardDialog open={asked !== undefined} onOpenChange={(open) => !open && setAsked(undefined)} onDiscard={() => switchLocale({ to: asked! })} t={t} />
+    </>
+  )
+}
+
+/**
+ * The organization switcher over the organizations the session came with. The host sends them with the session, so it is drawn with the page and never flashes a skeleton.
+ * Switching reloads the page, because every loader reads its rows under the active organization on the server.
+ */
+function Organizations() {
+  const { t } = useLocale()
+  const { organizations = [], activeOrganizationId } = useUser()
+  return (
+    <OrganizationSwitcher
+      organizations={organizations}
+      activeOrganizationId={activeOrganizationId}
+      t={t}
+      onSwitch={(organizationId) => void authArm('organization/set-active', { organizationId }).then((answer) => answer.ok && window.location.reload())}
+    />
+  )
+}
+
+/**
+ * One entry per destination, the shell's own first and the entities after.
+ * The dashboard is current on its own path alone; every other entry on its path and below it.
+ */
+function NavMain({ home }: { home?: string }) {
+  const { locale, t } = useLocale()
+  const screen = useScreen()
+  const pathname = usePathname()
+  const entries = [
+    { path: '/', label: home ?? t('dashboard.dashboard', 'Dashboard') },
+    ...[...useNav()].sort((one, other) => Number(!!one.kayan) - Number(!!other.kayan)).map((entry) => ({ path: entry.path, label: navLabel({ entry, screen, locale, t }) })),
+  ]
+  return (
+    <SidebarGroup>
+      <SidebarGroupContent className="flex flex-col gap-2">
+        <SidebarMenu>
+          {entries.map((entry) => {
+            const href = entry.path === '/' ? screen.path : `${screen.path}${entry.path}`
+            const Icon = iconOf(entry.path)
+            const isActive = pathname !== undefined && (pathname === href || (entry.path !== '/' && pathname.startsWith(`${href}/`)))
+            return (
+              <SidebarMenuItem key={entry.path}>
+                {/* A 44 pixel row wherever the sidebar is the phone's sheet. */}
+                <SidebarMenuButton
+                  isActive={isActive}
+                  className="max-md:h-11"
+                  render={
+                    <a href={href}>
+                      <Icon />
+                      <span>{entry.label}</span>
+                    </a>
+                  }
+                />
+              </SidebarMenuItem>
+            )
+          })}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+export const frame = { '--sidebar-width': 'calc(var(--spacing) * 72)', '--header-height': 'calc(var(--spacing) * 12)' } as CSSProperties
+
+/**
+ * The site header's bar, with the page's own title. It is sticky: its trigger is the only way back to a hidden sidebar, so it stays on screen however far the page is scrolled.
+ * Below sm the title may take two lines, set tight so both fit the bar, since on a phone it is often the record's only name; from sm up it is one line, cut at its end.
+ * From sm up the row wraps and the bar grows with it, so a form's controls that do not fit take a line of their own rather than run over the title or past the bar's end.
+ * A bar that wrapped is taller than `--header-height`, so it measures itself into `--header-bar-height`, which what sticks under it reads.
+ */
+export const headerBar = 'sticky top-0 z-10 bg-background rounded-t-[inherit] flex min-h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:min-h-(--header-height)'
+export const headerRow = 'flex w-full min-w-0 items-center gap-1 px-4 sm:flex-wrap sm:gap-y-2 sm:py-2 lg:gap-2 lg:px-6 [&_h1]:min-w-0 max-sm:[&_h1]:line-clamp-2 max-sm:[&_h1]:leading-tight max-sm:[&_h1]:wrap-break-word sm:[&_h1]:truncate [&_h1]:text-base [&_h1]:font-medium [&_h1]:tracking-normal'
+
+/**
+ * The header's own height on the document, as `--header-bar-height`, kept while the header is on screen and taken off with it.
+ * A variable of its own and never `--header-height`, which the bar's `min-h-(--header-height)` reads, so the measure would feed itself.
+ * A module function, so React hands the ref the same callback on every render and observes the header once.
+ */
+const measureHeader = (header: HTMLElement | null) => {
+  if (!header) return
+  const root = document.documentElement.style
+  // `borderBoxSize` is missing before Safari 15.4, so the header's own `offsetHeight` stands in there.
+  const observer = new ResizeObserver(([entry]) => {
+    if (entry) root.setProperty('--header-bar-height', `${entry.borderBoxSize?.[0]?.blockSize ?? (entry.target as HTMLElement).offsetHeight}px`)
+  })
+  observer.observe(header)
+  return () => {
+    observer.disconnect()
+    root.removeProperty('--header-bar-height')
+  }
+}
+
+/**
+ * The one way from a tenant screen to the platform app, in the header, for an actor whose own `user.role` holds a platform role that enters it.
+ * The link grants nothing here: the platform app's own server decides entry.
+ * Below xl it is its icon alone, a 44 pixel square on a phone, its words kept for a screen reader, so the page's title keeps the header's width.
+ */
+export function PlatformLink() {
+  const { t } = useLocale()
+  const platform = useUser().screens?.find((one) => one.name === 'platform')
+  if (!platform) return null
+  return (
+    <a href={platform.path} data-platform-link="" className={buttonVariants({ variant: 'outline', size: 'sm', className: 'ms-auto max-sm:size-11 max-xl:px-2.5 max-sm:px-0 [[data-node=controls]:not(:empty)~&]:ms-0' })}>
+      <span className="max-xl:sr-only">{t('dashboard.openPlatform', 'Open the platform')}</span>
+      <ArrowUpRight data-icon="inline-end" className="rtl:-scale-x-100" />
+    </a>
+  )
+}
+
+/** The sidebar on the side the document's direction starts from. */
+export function AppShell({ regions, brand, home }: ShellProps<readonly ['header', 'main'], ReactNode> & { brand?: ReactNode; home?: string }) {
+  const { dir, t } = useLocale()
+  return (
+    <SidebarProvider data-shell="app" style={frame}>
+      <NavSidebar variant="inset" side={dir === 'rtl' ? 'right' : 'left'} t={t}>
+        {/* One navigation landmark around the whole sidebar, named in the
+            page's language, so the switcher and the user menu are inside a
+            landmark as the links are. It is a box of its own and not a role on
+            the sidebar, whose props reach no element on a phone, where it is a
+            sheet. */}
+        <nav aria-label={t('admin.navigation', 'Navigation')} className="flex min-h-0 flex-1 flex-col">
+          <SidebarHeader>{brand ?? <Organizations />}</SidebarHeader>
+          <SidebarContent>
+            <NavMain home={home} />
+          </SidebarContent>
+          <SidebarFooter>
+            <UserMenu />
+          </SidebarFooter>
+        </nav>
+      </NavSidebar>
+      {/* `min-w-0` so the inset, a flex item beside the sidebar, never takes
+          the width of the widest thing a page holds: without it a table wider
+          than a phone would widen the document, header and trigger with it. A
+          wide table scrolls in its own frame instead. */}
+      <SidebarInset className="min-w-0">
+        <header data-region="header" ref={measureHeader} className={headerBar}>
+          <div className={headerRow}>
+            <SidebarTrigger aria-label={t('admin.toggleSidebar', 'Toggle Sidebar')} className="-ms-1 max-md:size-11" />
+            <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
+            {regions.header}
+            <PlatformLink />
+          </div>
+        </header>
+        <div className="flex min-w-0 flex-1 flex-col px-4 py-4 lg:px-6 lg:py-6">
+          {/* `min-w-0` so a table wider than the page scrolls rather than
+              pushing the sidebar off it. A div and not a `main`, because the
+              inset around it is already the page's one main landmark. */}
+          <div data-region="main" className="@container/main flex min-w-0 flex-1 flex-col gap-2">{regions.main}</div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+/**
+ * The platform's frame, the dashboard's with two changes: the app's name where the organization switcher sits, since staff work above every organization and switch to none of them,
+ * and the home entry named as its page names itself, so the nav and the page say one word.
+ */
+export function PlatformShell(props: ShellProps<readonly ['header', 'main'], ReactNode>) {
+  const { t } = useLocale()
+  return (
+    <AppShell
+      {...props}
+      brand={<span data-brand="" className="truncate px-2 py-1.5 text-base font-semibold">{t('platform.brand', 'Asas platform')}</span>}
+      home={t('platform.title', 'Platform')}
+    />
+  )
+}

package/template/templates/asas/src/ui/kpi-card.tsx

@@ -0,0 +1,25 @@
+// One figure on a card, which the dashboard's home and the portal's home both draw.
+import type { ReactNode } from 'react'
+import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+
+/**
+ * A figure on a card, marked with the figure it shows. On a phone, two to a row,
+ * a card is about 136 pixels wide, so there the padding is a step smaller, and
+ * below 220 pixels of card the figure is set in the body size, which holds a sum
+ * such as "SAR 5,150.00" on one line in either locale; one longer still breaks at
+ * the edge rather than being cut.
+ */
+export function KpiCard({ kpi, icon, title, value, footer }: { kpi: string; icon: ReactNode; title?: string; value: ReactNode; footer: ReactNode }) {
+  return (
+    <Card data-kpi={kpi} className="@container/card min-w-0">
+      <CardHeader className="max-sm:px-4">
+        <CardDescription className="flex items-center gap-2 text-sm font-medium">
+          <span className="text-muted-foreground inline-flex">{icon}</span>
+          <span>{title}</span>
+        </CardDescription>
+        <CardTitle className="min-w-0 text-base font-semibold tabular-nums wrap-break-word @[220px]/card:text-2xl @[250px]/card:text-3xl">{value}</CardTitle>
+      </CardHeader>
+      <CardFooter className="text-muted-foreground pt-2 text-xs max-sm:px-4">{footer}</CardFooter>
+    </Card>
+  )
+}

package/template/templates/asas/src/ui/record-page.tsx

@@ -0,0 +1,50 @@
+// The frame of one record: the form in `main`, what sits beside it in `side`, and the buttons a
+// person should not reach by accident in `danger`. A page fills only the regions this file exports,
+// which the build checks.
+import type { ReactNode } from 'react'
+import type { LayoutProps } from 'mithaq/admin'
+import { useKayan, useLocale, useRecord } from 'mithaq/admin/react'
+
+export const regions = ['main', 'side', 'danger'] as const
+
+export function RecordPage({ regions, page }: LayoutProps<readonly ['main', 'side', 'danger'], ReactNode>) {
+  const { t } = useLocale()
+  const record = useRecord()
+  return (
+    // main, side, danger in document order is how a phone stacks them: the danger zone last. From lg up
+    // the grid puts the side beside both and the danger zone back under the form; the second row's `1fr`
+    // takes whatever height the side adds, so the danger zone sits right under the form. A page with
+    // nothing beside its form gives the form the whole width. A side marked `data-lead`, such as an
+    // image beside its description, comes before the form on a phone instead.
+    <div data-layout="record" data-page={page.path} data-record={record ? 'row' : 'none'} className={regions.side ? 'grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(16rem,1fr)] lg:grid-rows-[auto_1fr]' : 'grid gap-4'}>
+      <div data-region="main" className="grid min-w-0 gap-4 lg:col-start-1">
+        {regions.main}
+      </div>
+      {regions.side ? <aside data-region="side" className="grid h-fit gap-4 max-lg:has-[[data-lead]]:order-first lg:col-start-2 lg:row-span-2 lg:row-start-1">{regions.side}</aside> : null}
+      {/* The danger zone, fenced by the destructive border, under the form rather than in its row. */}
+      {regions.danger ? (
+        <section data-region="danger" className="grid h-fit min-w-0 gap-2 rounded-lg border border-destructive/50 p-4 lg:col-start-1">
+          <h2 className="text-base font-medium text-destructive">{t('admin.dangerZone', 'Danger zone')}</h2>
+          <DangerWarning />
+          <div className="flex flex-wrap items-center gap-2">{regions.danger}</div>
+        </section>
+      ) : null}
+    </div>
+  )
+}
+
+/**
+ * What the danger zone says under its heading: the kayan's own sentence, or the shared one with the
+ * kind put in. Its own component, since only a kayan's page has a danger zone and `useKayan` refuses
+ * any other.
+ */
+function DangerWarning() {
+  const { t, locale } = useLocale()
+  const kayan = useKayan()
+  return (
+    <p className="text-muted-foreground text-sm">
+      {t(`${kayan.name}.dangerZoneWarning`)
+        ?? (t('admin.dangerZoneWarning', 'These actions change this {kind} for everyone.') ?? '').replace('{kind}', () => (t(`${kayan.name}.singular`) ?? kayan.name).toLocaleLowerCase(locale))}
+    </p>
+  )
+}

package/template/templates/asas/src/ui/rich-text-nodes.tsx

@@ -0,0 +1,15 @@
+// What every screen's rich text editor and viewer draw with: this project's
+// own node list, the one its server parses every write with, each class swapped
+// for its React subclass where one extends it, and the `/` menu's picks. A
+// provider each screen names, so no control, read view or panel can take
+// another list.
+import type { ReactNode } from 'react'
+import type { ProviderProps } from 'mithaq/admin'
+import { RichTextContext, defaultPicks, defaultViews, viewsOf } from '@/components/mithaq/rich-text.tsx'
+import { UploadPlugin, UploadView, imagePick } from '@/components/mithaq/upload.tsx'
+import { richTextNodes } from '../rich-text-nodes.ts'
+
+// The upload node's `/` entry "Image" opens its dialog in every editor.
+const value = { nodes: viewsOf(richTextNodes, [...defaultViews, UploadView]), picks: [...defaultPicks, imagePick], Plugin: UploadPlugin }
+
+export const RichTextNodes = ({ children }: ProviderProps<ReactNode>) => <RichTextContext value={value}>{children}</RichTextContext>

package/template/templates/asas/src/ui/screen-nav.tsx

@@ -0,0 +1,28 @@
+// The nav a page drawn whole puts in its shell's nav region, since such a page
+// has no tree for a `{ nav: {} }` node to sit in: one link per entry of the
+// screen's nav, which the host has already cut to the viewer, read through the hooks.
+import { use } from 'react'
+import type { NavEntry, ScreenClient, Translate } from 'mithaq/admin'
+import { ScreenContext, useLocale, useScreen } from 'mithaq/admin/react'
+import { currentOf } from '@/components/mithaq/nodes.tsx'
+
+/** What an entry is called: its own label, else its kayan's name in the singular for a global and the plural otherwise. */
+export const navLabel = ({ entry, screen, locale, t }: { entry: NavEntry; screen: ScreenClient; locale: string; t: Translate }) =>
+  entry.label?.[locale] ?? t(`${entry.kayan}.${screen.kayan[entry.kayan ?? '']?.single ? 'singular' : 'plural'}`, entry.kayan)
+
+export function ScreenNav() {
+  const { locale, t } = useLocale()
+  const screen = useScreen()
+  const kayan = use(ScreenContext)?.kayan?.name
+  return (
+    <ul className="flex flex-col gap-1">
+      {screen.nav.map((entry) => (
+        <li key={entry.page + entry.path}>
+          <a href={`${screen.path}${entry.path}`} aria-current={currentOf(entry, kayan)} className="text-sm">
+            {navLabel({ entry, screen, locale, t })}
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/template/templates/asas/src/ui/session-labels.tsx

@@ -0,0 +1,36 @@
+// How a session reads wherever a picker lists or holds one: its course by the
+// course's title, then when it starts, since a session's own title, the start
+// alone, makes two sessions on one day read alike.
+//
+// A session holds its course as an id, and a read populates no relationship, so
+// the courses are a second read: one of every course the picker's rows point at,
+// shared through the query client. Each read is the viewer's, so a course the
+// viewer may not read leaves the session's title, its start, as it was.
+import type { ReactNode } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import type { ProviderProps, Row } from 'mithaq/admin'
+import { useClient, useLocale, useScreen } from 'mithaq/admin/react'
+import { formatDate } from '@/components/mithaq/controls.tsx'
+import { nameOfRow, RowLabelContext, titleFieldOf, type UseRowLabel } from '@/components/mithaq/relationship-control.tsx'
+import { coursesOf } from '../enrollments/ui/session-cell.tsx'
+
+/** The session's course and its start, or nothing for any other kayan and for a session whose course is not read yet. */
+export const useSessionLabel: UseRowLabel = (target, rows) => {
+  const client = useClient()
+  const { locale } = useLocale()
+  const { kayan, maxLimit } = useScreen()
+  const sessions = target === 'sessions'
+  // Sorted, so the same courses in another order are the same query.
+  const ids = sessions ? [...new Set(rows.flatMap((one) => (typeof one.course === 'string' ? [one.course] : [])))].sort() : []
+  const { data: courses } = useQuery({ queryKey: ['session-courses', ids], queryFn: () => coursesOf({ client, ids, maxLimit }), enabled: ids.length > 0, staleTime: 30_000 })
+  if (!sessions) return undefined
+  return (row: Row) => {
+    const course = courses?.get(String(row.course))
+    const when = formatDate({ value: row.startsAt, locale })
+    // The date's own spaces are no-break ones, so a box too narrow for the whole label breaks between the course
+    // and the date and never inside the date.
+    return course && when ? `${nameOfRow({ row: course, title: titleFieldOf(kayan.courses), locale })} · ${when.replaceAll(' ', '\u00a0')}` : undefined
+  }
+}
+
+export const SessionLabels = ({ children }: ProviderProps<ReactNode>) => <RowLabelContext value={useSessionLabel}>{children}</RowLabelContext>

package/template/templates/asas/src/ui/table-page.tsx

@@ -0,0 +1,9 @@
+// The layout of a page that lists rows: one region, `main`.
+import type { ReactNode } from 'react'
+import type { LayoutProps } from 'mithaq/admin'
+
+export const regions = ['main'] as const
+
+export const TablePage = ({ regions, page }: LayoutProps<readonly ['main'], ReactNode>) => (
+  <div data-layout="table" data-page={page.path} className="grid gap-4">{regions.main}</div>
+)

package/template/templates/asas/src/ui/top-shell.tsx

@@ -0,0 +1,60 @@
+// The second frame both screens may put at the root of a page: the nav as a
+// bar across the top, the header under it, and one column below. The header is the app
+// shell's own bar with the user menu at its end in place of the sidebar
+// trigger, so both frames sign out and switch locale from the same menu. The
+// provider is there for the menu, whose primitives read the sidebar's context;
+// no sidebar is drawn.
+import { use, type ReactNode } from 'react'
+import type { ShellProps } from 'mithaq/admin'
+import { ScreenContext, useLocale, useScreen } from 'mithaq/admin/react'
+import { SidebarProvider } from '@/components/ui/sidebar'
+import { PlatformLink, UserMenu, frame, headerBar, headerRow } from './app-shell.tsx'
+
+export const regions = ['header', 'nav', 'main'] as const
+
+/** The dashboard's top shell, whose header links the platform app for staff the way the app shell's does. */
+export function TopShell(props: ShellProps<readonly ['header', 'nav', 'main'], ReactNode>) {
+  return <Top {...props} platform />
+}
+
+/**
+ * The portal's, the same shell with no platform link: the portal is where a
+ * tenant's people work, and staff reach the platform from the dashboard
+ * alone. Which of the two a page draws is the shell its screen names under
+ * `top`, never the URL.
+ */
+export function PortalTopShell(props: ShellProps<readonly ['header', 'nav', 'main'], ReactNode>) {
+  return <Top {...props} platform={false} />
+}
+
+function Top({ regions, platform }: ShellProps<readonly ['header', 'nav', 'main'], ReactNode> & { platform: boolean }) {
+  const { t } = useLocale()
+  const screen = useScreen()
+  // Home is current on the screen's own home alone, whose path is the
+  // screen's, and each entry on its kayan's pages; the current one is drawn in
+  // the foreground and the rest muted. On a phone each link is a 44 pixel row,
+  // a touch target.
+  const home = use(ScreenContext)?.path === screen.path
+  return (
+    <SidebarProvider data-shell="top" style={frame} className="flex-col">
+      <nav data-region="nav" aria-label={t('admin.mainNavigation', 'Main navigation')} className="mx-auto flex w-full max-w-4xl flex-wrap items-center gap-x-4 gap-y-1 px-6 pt-4 text-sm [&_a]:text-muted-foreground [&_a:hover]:text-foreground [&_a[aria-current=page]]:font-semibold [&_a[aria-current=page]]:text-foreground [&_ul]:flex [&_ul]:flex-row [&_ul]:flex-wrap [&_ul]:gap-x-4 [&_ul]:gap-y-1 max-sm:[&_a]:inline-flex max-sm:[&_a]:min-h-11 max-sm:[&_a]:min-w-11 max-sm:[&_a]:items-center max-sm:[&_a]:justify-center">
+        <a href={screen.path} aria-current={home ? 'page' : undefined}>{t('portal.home', 'Home')}</a>
+        {regions.nav}
+      </nav>
+      <header data-region="header" className={`${headerBar} mx-auto w-full max-w-4xl`}>
+        <div className={headerRow}>
+          {regions.header}
+          <div className="ms-auto flex items-center gap-2">
+            {platform ? <PlatformLink /> : null}
+            {/* The avatar alone on a phone, the whole card from sm up, so the
+                title keeps the room it needs. */}
+            <div className="w-12 sm:w-56">
+              <UserMenu />
+            </div>
+          </div>
+        </div>
+      </header>
+      <main data-region="main" className="mx-auto grid w-full max-w-4xl grid-cols-[minmax(0,1fr)] gap-4 p-6">{regions.main}</main>
+    </SidebarProvider>
+  )
+}