feat(layout): add tablet viewport tier (mobile/tablet/desktop)

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>

src/hooks/use-is-mobile.ts

@@ -2,34 +2,83 @@
 
 import { useSyncExternalStore } from 'react';
 
-const MOBILE_QUERY = '(max-width: 1023.98px)';
+// 3-tier breakpoints aligned with Tailwind:
+//   mobile  : < 768px   (sm and below)
+//   tablet  : 768-1023  (md)
+//   desktop : >= 1024   (lg and up)
+//
+// Previously the app used a binary `(max-width: 1023.98px)` split, which
+// rendered the mobile shell on iPad portrait AND on a half-screen 13"
+// Mac browser — neither is really "mobile." The tablet tier fills that
+// gap so the desktop shell can render with a hidden-but-accessible
+// sidebar at those widths.
 
-function subscribe(callback: () => void): () => void {
-  const mq = window.matchMedia(MOBILE_QUERY);
+export type ViewportTier = 'mobile' | 'tablet' | 'desktop';
+
+const TABLET_QUERY = '(min-width: 768px) and (max-width: 1023.98px)';
+const DESKTOP_QUERY = '(min-width: 1024px)';
+
+function subscribeTier(callback: () => void): () => void {
+  const mqTablet = window.matchMedia(TABLET_QUERY);
+  const mqDesktop = window.matchMedia(DESKTOP_QUERY);
+  mqTablet.addEventListener('change', callback);
+  mqDesktop.addEventListener('change', callback);
+  return () => {
+    mqTablet.removeEventListener('change', callback);
+    mqDesktop.removeEventListener('change', callback);
+  };
+}
+
+function getTierSnapshot(): ViewportTier {
+  if (window.matchMedia(DESKTOP_QUERY).matches) return 'desktop';
+  if (window.matchMedia(TABLET_QUERY).matches) return 'tablet';
+  return 'mobile';
+}
+
+function getTierServerSnapshot(): ViewportTier {
+  // Server has no window — default to desktop so the desktop shell
+  // mounts on first paint. Client re-evaluates immediately on hydration
+  // (useSyncExternalStore is server-mismatch-safe).
+  return 'desktop';
+}
+
+/**
+ * Returns the active viewport tier. Backed by useSyncExternalStore so
+ * render reads stay pure (no useEffect → setState cascade); React
+ * Compiler-safe.
+ */
+export function useViewportTier(): ViewportTier {
+  return useSyncExternalStore(subscribeTier, getTierSnapshot, getTierServerSnapshot);
+}
+
+// ─── Back-compat alias ──────────────────────────────────────────────────────
+// Every existing call site treats "mobile OR tablet" as one bucket (e.g.
+// "show short labels", "stack vertically"). Returning `tier !== 'desktop'`
+// preserves that behaviour so the tier rollout doesn't have to touch
+// dozens of components in lockstep.
+
+const LEGACY_QUERY = '(max-width: 1023.98px)';
+
+function subscribeLegacy(callback: () => void): () => void {
+  const mq = window.matchMedia(LEGACY_QUERY);
   mq.addEventListener('change', callback);
   return () => mq.removeEventListener('change', callback);
 }
 
-function getSnapshot(): boolean {
-  return window.matchMedia(MOBILE_QUERY).matches;
+function getLegacySnapshot(): boolean {
+  return window.matchMedia(LEGACY_QUERY).matches;
 }
 
-function getServerSnapshot(): boolean {
-  // Server has no window — default to desktop. Client hydrates to the
-  // true viewport state without a flash because useSyncExternalStore
-  // is React 18's "this is server-mismatch safe" primitive.
+function getLegacyServerSnapshot(): boolean {
   return false;
 }
 
 /**
- * Returns true when the viewport is below the `lg` Tailwind breakpoint.
- * Backed by useSyncExternalStore so render reads stay pure (no
- * useEffect → setState cascade); React Compiler-safe.
- *
- * Not unit-tested: the repo's vitest is configured for environment='node'
- * (no @testing-library/react / DOM env). Verified through the mobile-shell
- * Playwright visual snapshots in Task 23.
+ * Returns true when the viewport is below the `lg` Tailwind breakpoint
+ * (i.e. mobile OR tablet). Kept as an alias for backwards compatibility
+ * with call sites that don't care about the mobile-vs-tablet distinction.
+ * New code should prefer `useViewportTier()` for explicit tier checks.
  */
 export function useIsMobile(): boolean {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return useSyncExternalStore(subscribeLegacy, getLegacySnapshot, getLegacyServerSnapshot);
 }