- Dashboard layout resolves tenanciesModuleByPort server-side (one
isTenanciesModuleEnabled call per port the user has access to) and
passes the map through AppShell → Sidebar. Atomic SSR — no
flicker of the nav entry in/out after hydration.
- Sidebar gains NavItemGated.requiresTenanciesModule. The Tenancies
entry (KeyRound icon, immediately below Berths) only renders when
the currently-active port has the flag flipped on. Per-port live
switch fires when the rep toggles ports without reload.
- /[portSlug]/tenancies + /[portSlug]/tenancies/[id] both call
isTenanciesModuleEnabled and notFound() when disabled — guards
against direct URL access even when the sidebar is hidden.
- API routes (/api/v1/tenancies, /[id], /berths/[id]/tenancies)
prepended with assertTenanciesModuleEnabled — matches design §
"All routes ... return 404 when off". NotFoundError maps to 404.
- Existing tenancy API tests get a makePortWithTenancies() helper
(calls enableTenanciesModule after makePort) so the gate is
satisfied. Affects 2 test files (16 tests retargeted).
Verified: tsc clean, 1493/1493 vitest.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bundles the prior autonomous-session output that was sitting unstaged:
- Em-dash sweep across src/ + tests/ (en-dash/em-dash to hyphen, ~2280 instances)
- country-flag-icons rollout (CountryFlag component, replaces emoji glyphs that
never rendered on Windows; lazy-loads the 3x2 SVG index as a single chunk
after the per-subpath dynamic-import approach silently failed in webpack)
- Admin IA Phase 1+2: 7-domain regroup, 41 to 38 pages, /admin/berths index,
redirects (ocr to ai, reports to dashboard, invitations to users),
docs/admin-ia-proposal.md
- Per-template email tester (registry + endpoint + UI on Email admin page)
- Cancel-document mode picker (delete-from-Documenso vs keep-for-audit)
- Dashboard PDF report: 25 widgets, SVG charts, date-range picker, 11 resolvers
- Customize-widgets per-region sortables at xl+ (charts/rails/feed); single
flat sortable below xl when the layout stacks; per-viewport saved orders
- Audit doc updates capturing each shipped item
- Lint fixes: react-compiler immutability in DonutChart (reduce instead of
let-reassign), set-state-in-effect disables in CountryFlag and
UploadForSigning preview-bytes effect, unused 'confirm' destructures in
interest contract + reservation tabs, unescaped apostrophe in test-template
card copy
User reported: "when I refresh the page with this size viewport it
switches between tablet and desktop view." The root cause was the
two-step tier resolution:
1. Server renders shell based on User-Agent (mobile vs desktop only).
2. Client mounts with that hint, useEffect runs matchMedia, may flip.
When the UA says "desktop" but the viewport is actually 900px (so
matchMedia says "tablet"), the chrome visibly switches mid-render.
Most painful on macOS Safari dragged below 1024.
Fix: AppShell writes a `pn-crm.viewport-tier` cookie (1-year, Lax) on
every matchMedia evaluation. The dashboard layout reads the cookie
and prefers it over the UA classifier for `initialFormFactor`. First
visit can still flicker (no cookie yet); every subsequent reload uses
the resolved tier and renders the correct chrome on first paint.
The cookie values are 'mobile' / 'tablet' / 'desktop' but the server's
initialFormFactor prop only accepts 'mobile' | 'desktop' (binary by
design — AppShell's useEffect resolves the actual tier client-side
from matchMedia). 'tablet' from the cookie collapses to 'desktop' on
SSR; AppShell's useEffect re-resolves to tablet immediately. The
fluent path on cookie hit is desktop -> tablet (no flicker because
both shells render the desktop tree; only the sidebar Sheet wrapper
differs, and that's invisible until opened).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Previously the app used a binary matchMedia split at 1023.98px, so iPad
portrait + half-screen-on-13"-Mac both fell into the mobile shell —
neither is really mobile. The tablet tier fills that gap.
- `use-is-mobile.ts` gains `useViewportTier()` returning
'mobile' | 'tablet' | 'desktop' (mobile < 768, tablet 768-1023,
desktop ≥ 1024). Backed by useSyncExternalStore so render reads
stay pure. `useIsMobile()` retained as a back-compat alias =
`tier !== 'desktop'` so existing call sites don't have to change
in lockstep.
- `app-shell.tsx` now renders three branches. Mobile + desktop
unchanged. Tablet renders the desktop shell, but the Sidebar lives
inside a left-side `<Sheet>` opened by a new leading logo button
in the Topbar. SheetContent width matches `--width-sidebar` so the
open state reads consistent. Children subtree position stays
invariant across tier flips so inline-edit drafts survive a resize.
- `topbar.tsx` accepts an optional `leadingSlot` rendered before the
back button + breadcrumbs in the LEFT column. AppShell mounts a
port-logo button in that slot on tablet (or a three-bar menu icon
when the port has no logo yet) that triggers the sheet.
- `page-header.tsx` was the dashboard "title card looks bad on
tablet" surface — the actions row was forced no-wrap at sm (640px)
which crushed the title on iPad-portrait. Stack point moved from
sm to lg, so tablet stacks vertically (title above, actions
below); desktop returns to side-by-side.
tsc clean, 1454/1454 vitest pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pre-fix the dashboard layout mounted BOTH the desktop and mobile shells
to the DOM on every page, hidden via CSS data-shell rules. Two Tabs
providers had data-state="active" concurrently, every fetch fired twice,
every component piece of state lived in two trees, a11y landmarks
duplicated, and half the click attempts hit the wrong layer.
New <AppShell> client wrapper mounts exactly ONE tree based on the
server-classified User-Agent (no hydration mismatch, no first-paint
flash on real mobile devices) plus a runtime matchMedia subscription
that swaps shells when the viewport crosses 1024px (e.g. desktop
browser resized).
Knock-on changes:
- Dashboard layout fetches once and hands the data to AppShell;
AppShell picks Desktop (Sidebar + Topbar + main) or MobileLayout
- Stripped the now-orphan data-shell CSS rules from globals.css —
nothing emits the attribute any more
- MobileLayout drops its data-shell="mobile" attribute (was the lever
the dead CSS rules pulled)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
