Mobile shell, /scan feature, and responsive page rewrites

.gitignore

@@ -49,3 +49,6 @@ import-meta.d.ts
 # dev artifacts
 mprocs.log
 .playwright-mcp/
+/*.png
+
+/certificates

README.md

@@ -23,6 +23,20 @@ Then open <http://localhost:3000/setup> and create the first admin account.
 
 `pnpm pb:bootstrap` upserts a PocketBase superuser from the env vars — run it once after editing credentials, or whenever you rotate them.
 
+### Phone testing (HTTPS)
+
+iOS Safari will not hand out camera access over plain HTTP on a LAN IP — `getUserMedia` needs a secure context. For the scan feature:
+
+```bash
+pnpm dev:https                    # next + pocketbase, Next on HTTPS bound to 127.0.0.1 (loopback)
+# or, if you need to reach it from another device on your LAN:
+pnpm dev:next:lan                 # binds Next to 0.0.0.0 — only on a trusted network
+```
+
+Only use `dev:next:lan` on a network you control: the `/pb/*` rewrite forwards requests to PocketBase at the same origin, so any device that can reach your laptop's IP (and accept the self-signed cert) can hit PB directly. Bind to loopback whenever possible.
+
+Set `NEXT_PUBLIC_POCKETBASE_URL=/pb` in `.env.local` so the browser hits PocketBase through Next's origin (a rewrite in `next.config.ts` proxies `/pb/*` → the real PB instance — development builds only). Open `https://<your-laptop-ip>:3000` on the phone and accept the self-signed cert. `pnpm pb:seed` populates the database with demo assets, locations, and service schedules for the walkthrough.
+
 ## Run with Docker
 
 ```bash

e2e/mobile-shell.spec.ts

@@ -0,0 +1,126 @@
+import { expect, test } from "@playwright/test";
+import { getLanding, signIn } from "./helpers";
+
+async function ensureAuthed(
+  page: import("@playwright/test").Page,
+  skipReason = "Set E2E_AUTH_EMAIL and E2E_AUTH_PASSWORD to run the mobile shell e2e",
+) {
+  const email = process.env.E2E_AUTH_EMAIL;
+  const password = process.env.E2E_AUTH_PASSWORD;
+  test.skip(!email || !password, skipReason);
+
+  const landing = await getLanding(page);
+  test.skip(landing !== "login", "Mobile shell e2e requires setup complete");
+
+  await signIn(page, email!, password!);
+}
+
+test.describe("mobile shell", () => {
+  test("bottom nav is only visible on mobile viewports", async ({
+    page,
+  }, testInfo) => {
+    await ensureAuthed(page);
+    await page.goto("/dashboard");
+
+    const bottomNav = page.getByTestId("bottom-nav");
+    if (testInfo.project.name === "mobile-chromium") {
+      await expect(bottomNav).toBeVisible();
+      await expect(page.getByTestId("bottom-nav-scan")).toHaveAttribute(
+        "href",
+        "/scan",
+      );
+    } else {
+      await expect(bottomNav).toBeHidden();
+    }
+  });
+
+  test("mobile bottom nav routes each slot correctly", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "mobile-chromium",
+      "Runs only on mobile-chromium",
+    );
+
+    await ensureAuthed(page);
+
+    await page.getByTestId("bottom-nav-assets").click();
+    await page.waitForURL(/\/assets$/, { timeout: 10_000 });
+
+    await page.getByTestId("bottom-nav-services").click();
+    await page.waitForURL(/\/services$/, { timeout: 10_000 });
+
+    await page.getByTestId("bottom-nav-home").click();
+    await page.waitForURL(/\/dashboard$/, { timeout: 10_000 });
+
+    await page.getByTestId("bottom-nav-scan").click();
+    await page.waitForURL(/\/scan$/, { timeout: 10_000 });
+  });
+
+  test("more sheet opens and contains admin entries", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "mobile-chromium",
+      "Runs only on mobile-chromium",
+    );
+
+    await ensureAuthed(page);
+    await page.goto("/dashboard");
+
+    await page.getByTestId("bottom-nav-more").click();
+
+    const grid = page.getByTestId("more-sheet-grid");
+    await expect(grid).toBeVisible();
+    await expect(page.getByTestId("more-item-locations")).toBeVisible();
+    await expect(page.getByTestId("more-item-taxonomy")).toBeVisible();
+    await expect(page.getByTestId("more-item-labels")).toBeVisible();
+    await expect(page.getByTestId("more-item-settings")).toBeVisible();
+    await expect(page.getByTestId("more-sheet-signout")).toBeVisible();
+
+    await page.getByTestId("more-item-locations").click();
+    await page.waitForURL(/\/locations$/, { timeout: 10_000 });
+  });
+
+  test("assets list renders cards (not a table) on mobile", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "mobile-chromium",
+      "Runs only on mobile-chromium",
+    );
+
+    await ensureAuthed(
+      page,
+      "Set E2E_AUTH_EMAIL and E2E_AUTH_PASSWORD to run the assets card list e2e",
+    );
+    await page.goto("/assets");
+
+    // Card list is visible, mobile filters trigger is visible, no desktop table
+    await expect(page.getByTestId("asset-filters-mobile")).toBeVisible();
+    await expect(
+      page.getByTestId("asset-filters-mobile-trigger"),
+    ).toBeVisible();
+    await expect(page.locator("table")).toHaveCount(0);
+
+    const filterSheetButton = page.getByTestId("asset-filters-mobile-trigger");
+    await filterSheetButton.click();
+    await expect(page.getByTestId("asset-filters-sheet")).toBeVisible();
+    await expect(page.getByTestId("asset-sort-recent")).toBeVisible();
+  });
+
+  test("sidebar is visible on desktop viewports", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "chromium",
+      "Runs only on desktop chromium",
+    );
+
+    await ensureAuthed(page);
+    await page.goto("/dashboard");
+
+    await expect(page.getByTestId("bottom-nav")).toBeHidden();
+    await expect(page.locator('[data-slot="sidebar-container"]')).toBeVisible();
+  });
+});

e2e/pwa-manifest.spec.ts

@@ -0,0 +1,92 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("web app manifest", () => {
+  test("links a manifest from every served HTML page", async ({ page }) => {
+    for (const route of ["/", "/dashboard", "/assets", "/scan"]) {
+      await page.goto(route);
+
+      const manifestLink = page.locator('link[rel="manifest"]');
+      await expect(manifestLink).toHaveAttribute(
+        "href",
+        /\/manifest\.webmanifest/,
+      );
+    }
+  });
+
+  test("serves the manifest JSON with PWA fields", async ({ request }) => {
+    const response = await request.get("/manifest.webmanifest");
+    expect(response.status()).toBe(200);
+
+    const manifest = await response.json();
+    expect(manifest.id).toBe("/");
+    expect(manifest.name).toBe("Stowage");
+    expect(manifest.short_name).toBe("Stowage");
+    expect(manifest.start_url).toBe("/dashboard");
+    expect(manifest.display).toBe("standalone");
+    expect(manifest.orientation).toBe("any");
+    expect(manifest.theme_color).toBe("#c2410c");
+    expect(Array.isArray(manifest.icons)).toBe(true);
+    expect(manifest.icons.length).toBeGreaterThan(0);
+
+    const maskable = manifest.icons.filter(
+      (icon: { purpose?: string }) => icon.purpose === "maskable",
+    );
+    expect(maskable.length).toBeGreaterThanOrEqual(2);
+    const maskableSizes = maskable.map(
+      (icon: { sizes?: string }) => icon.sizes,
+    );
+    expect(maskableSizes).toContain("192x192");
+    expect(maskableSizes).toContain("512x512");
+    for (const icon of maskable) {
+      expect(icon.src).toMatch(/-maskable\.png$/);
+    }
+  });
+
+  test("declares a theme-color meta tag", async ({ page }) => {
+    await page.goto("/");
+    const themeColor = page.locator('meta[name="theme-color"]').first();
+    await expect(themeColor).toHaveCount(1);
+    const content = await themeColor.getAttribute("content");
+    expect(content).toMatch(/#[0-9a-fA-F]{6}/);
+  });
+
+  test("declares apple-touch-icon and web-app meta tags", async ({ page }) => {
+    await page.goto("/");
+    const apple = page.locator('link[rel="apple-touch-icon"]').first();
+    await expect(apple).toHaveAttribute("href", /\/apple-touch-icon\.png/);
+    await expect(apple).toHaveAttribute("sizes", "180x180");
+
+    // Next 16 emits `mobile-web-app-capable` (the standardised replacement for
+    // the deprecated `apple-mobile-web-app-capable`). iOS Safari accepts both.
+    const capable = page.locator('meta[name="mobile-web-app-capable"]').first();
+    await expect(capable).toHaveAttribute("content", "yes");
+
+    const title = page
+      .locator('meta[name="apple-mobile-web-app-title"]')
+      .first();
+    await expect(title).toHaveAttribute("content", "Stowage");
+
+    const maskIcon = page.locator('link[rel="mask-icon"]').first();
+    await expect(maskIcon).toHaveAttribute("href", /safari-pinned-tab\.svg$/);
+  });
+
+  test("serves all referenced icon files with 200", async ({ request }) => {
+    const icons = [
+      "/images/web/icon-192.png",
+      "/images/web/icon-512.png",
+      "/images/web/icon-192-maskable.png",
+      "/images/web/icon-512-maskable.png",
+      "/images/web/safari-pinned-tab.svg",
+      "/images/web/apple-touch-icon.png",
+      "/images/web/favicon.ico",
+      // iOS also requests these at the server root as a legacy fallback;
+      // mirroring the file there silences the 404 we saw in dev logs.
+      "/apple-touch-icon.png",
+      "/apple-touch-icon-precomposed.png",
+    ];
+    for (const url of icons) {
+      const response = await request.get(url);
+      expect(response.status(), `GET ${url}`).toBe(200);
+    }
+  });
+});