Merge pull request #1247 from WatWowMap/feat/shell-and-ia

feat: 2.0 shell, routes, and per-user shell selection

Author: TurtIeSocks

app/App.tsx

@@ -1,7 +1,8 @@
+import { createBrowserRouter, RouterProvider } from 'react-router'
+import { ROUTER_ROUTES } from './routes'
+
+const router = createBrowserRouter(ROUTER_ROUTES)
+
 export function App() {
-  return (
-    <main className="grid min-h-dvh place-items-center bg-white font-sans">
-      <p className="text-lg text-neutral-500">ReactMap 2.0</p>
-    </main>
-  )
+  return <RouterProvider router={router} />
 }

app/layout/BottomNav.test.tsx

@@ -0,0 +1,47 @@
+import { afterAll, afterEach, beforeAll, expect, test } from 'bun:test'
+import { cleanup, render, within } from '@testing-library/react'
+import { MemoryRouter } from 'react-router'
+import { setupDom, teardownDom } from '../test-setup'
+import { BottomNav } from './BottomNav'
+
+// `@testing-library/dom`'s `screen` singleton snapshots `document` the
+// moment the module is first imported (dist/screen.js), so it only works
+// when a global document exists before any test file's imports run — which
+// means registering it process-wide via bunfig's preload, for every
+// workspace in this monorepo. That broke unrelated suites elsewhere (see
+// test-setup.ts). Using the queries `render` returns needs the DOM only once
+// the test body actually runs, so registering it here in beforeAll, scoped to
+// this file, is enough.
+beforeAll(setupDom)
+afterAll(teardownDom)
+
+// Every render is appended to the same document and stays there, so without
+// this each test sees the leftovers of the ones before it.
+afterEach(cleanup)
+
+// Queries are scoped to the container this render owns rather than the whole
+// body. The hub renders a link labelled Filters too, so a document-wide query
+// finds more than one and getByRole throws for being ambiguous. Whether that
+// happened depended on which files had already run, which is why this passed
+// locally and failed in CI.
+test('shows the four primary destinations in order', () => {
+  const { container } = render(
+    <MemoryRouter initialEntries={['/map']}>
+      <BottomNav />
+    </MemoryRouter>,
+  )
+  const labels = within(container)
+    .getAllByRole('link')
+    .map((link) => link.textContent)
+  expect(labels).toEqual(['Map', 'Filters', 'Alerts', 'Me'])
+})
+
+test('marks the active destination for assistive tech', () => {
+  const { container } = render(
+    <MemoryRouter initialEntries={['/filters']}>
+      <BottomNav />
+    </MemoryRouter>,
+  )
+  const active = within(container).getByRole('link', { name: 'Filters' })
+  expect(active.getAttribute('aria-current')).toBe('page')
+})

app/layout/BottomNav.tsx

@@ -0,0 +1,26 @@
+import { NavLink } from 'react-router'
+
+const DESTINATIONS = [
+  { to: '/map', label: 'Map' },
+  { to: '/filters', label: 'Filters' },
+  { to: '/alerts', label: 'Alerts' },
+  { to: '/profile', label: 'Me' },
+] as const
+
+export function BottomNav() {
+  return (
+    <nav className="fixed inset-x-0 bottom-0 grid grid-cols-4 border-t border-neutral-200 bg-white pb-[env(safe-area-inset-bottom)]">
+      {DESTINATIONS.map(({ to, label }) => (
+        <NavLink
+          key={to}
+          to={to}
+          className={({ isActive }) =>
+            `py-3 text-center text-sm ${isActive ? 'text-violet-600' : 'text-neutral-500'}`
+          }
+        >
+          {label}
+        </NavLink>
+      ))}
+    </nav>
+  )
+}

app/layout/Shell.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router'
+import { BottomNav } from './BottomNav'
+
+export function Shell() {
+  return (
+    <div className="min-h-dvh bg-white font-sans">
+      <main className="pb-16">
+        <Outlet />
+      </main>
+      <BottomNav />
+    </div>
+  )
+}

app/pages/AlertsPage.tsx

@@ -0,0 +1,8 @@
+export function AlertsPage() {
+  return (
+    <section className="p-6">
+      <h1 className="text-2xl font-semibold">Alerts</h1>
+      <p className="mt-2 text-neutral-500">Alerts arrive in a later plan.</p>
+    </section>
+  )
+}

app/pages/FiltersPage.tsx

@@ -0,0 +1,8 @@
+export function FiltersPage() {
+  return (
+    <section className="p-6">
+      <h1 className="text-2xl font-semibold">Filters</h1>
+      <p className="mt-2 text-neutral-500">Filters arrive in a later plan.</p>
+    </section>
+  )
+}

app/pages/Hub.test.tsx

@@ -0,0 +1,26 @@
+import { afterAll, afterEach, beforeAll, expect, test } from 'bun:test'
+import { cleanup, render, within } from '@testing-library/react'
+import { MemoryRouter } from 'react-router'
+import { setupDom, teardownDom } from '../test-setup'
+import { Hub } from './Hub'
+
+beforeAll(setupDom)
+afterAll(teardownDom)
+
+// Every render is appended to the same document and stays there, so without
+// this each test sees the leftovers of the ones before it. The bottom nav
+// renders a link labelled Filters as well, so a stale render from either file
+// can make the other's query ambiguous.
+afterEach(cleanup)
+
+test('links to the four primary surfaces without a session', () => {
+  const { container } = render(
+    <MemoryRouter>
+      <Hub />
+    </MemoryRouter>,
+  )
+  const hrefs = within(container)
+    .getAllByRole('link')
+    .map((link) => link.getAttribute('href'))
+  expect(hrefs).toEqual(['/map', '/filters', '/alerts', '/profile'])
+})

app/pages/Hub.tsx

@@ -0,0 +1,27 @@
+import { Link } from 'react-router'
+
+const DESTINATIONS = [
+  { to: '/map', label: 'Map' },
+  { to: '/filters', label: 'Filters' },
+  { to: '/alerts', label: 'Alerts' },
+  { to: '/profile', label: 'Profile' },
+] as const
+
+export function Hub() {
+  return (
+    <section className="p-6">
+      <h1 className="text-2xl font-semibold">Hub</h1>
+      <nav className="mt-4 grid grid-cols-2 gap-3">
+        {DESTINATIONS.map(({ to, label }) => (
+          <Link
+            key={to}
+            to={to}
+            className="rounded-lg border border-neutral-200 p-4 text-center text-sm font-medium"
+          >
+            {label}
+          </Link>
+        ))}
+      </nav>
+    </section>
+  )
+}

app/pages/Locales.tsx

@@ -0,0 +1,8 @@
+export function Locales() {
+  return (
+    <section className="p-6">
+      <h1 className="text-2xl font-semibold">Locales</h1>
+      <p className="mt-2 text-neutral-500">Locales arrive in a later plan.</p>
+    </section>
+  )
+}

app/pages/MapPage.tsx

@@ -0,0 +1,8 @@
+export function MapPage() {
+  return (
+    <section className="p-6">
+      <h1 className="text-2xl font-semibold">Map</h1>
+      <p className="mt-2 text-neutral-500">The map arrives in a later plan.</p>
+    </section>
+  )
+}