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/components/layout/topbar.tsx

@@ -3,6 +3,7 @@
 import { ChevronLeft, Plus } from 'lucide-react';
 import { useRouter, usePathname } from 'next/navigation';
 import type { Route } from 'next';
+import type { ReactNode } from 'react';
 
 import { useUIStore } from '@/stores/ui-store';
 import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
@@ -27,9 +28,13 @@ import type { Port } from '@/lib/db/schema/ports';
 interface TopbarProps {
   ports: Port[];
   user?: { name: string; email: string };
+  /** Optional leading slot rendered before the breadcrumbs on tablet
+   *  viewports — used by AppShell to mount a sidebar trigger button
+   *  (logo) when the sidebar is hidden behind a slide-over Sheet. */
+  leadingSlot?: ReactNode;
 }
 
-export function Topbar({ ports, user }: TopbarProps) {
+export function Topbar({ ports, user, leadingSlot }: TopbarProps) {
   const router = useRouter();
   const pathname = usePathname();
   const currentPortSlug = useUIStore((s) => s.currentPortSlug);
@@ -55,8 +60,9 @@ export function Topbar({ ports, user }: TopbarProps) {
     // The brand logo lives in the sidebar header (per design feedback) so the
     // topbar center is dedicated to the global search bar.
     <header className="grid h-14 grid-cols-[minmax(0,1fr)_minmax(420px,800px)_minmax(0,1fr)] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
-      {/* LEFT: optional back button + breadcrumbs / page title */}
+      {/* LEFT: optional sidebar trigger (tablet) + optional back button + breadcrumbs */}
       <div className="min-w-0 flex items-center gap-1.5">
+        {leadingSlot}
         {showBackButton && (
           <button
             type="button"