feat(web): add createThemeMiddleware Hono middleware (ATB-53)

apps/web/src/middleware/__tests__/theme.test.ts

···
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { Hono } from "hono";
+import type { WebAppEnv, ResolvedTheme } from "../../lib/theme-resolution.js";
+import { createThemeMiddleware } from "../theme.js";
+
+vi.mock("../../lib/theme-resolution.js", () => ({
+  resolveTheme: vi.fn(),
+}));
+
+import { resolveTheme } from "../../lib/theme-resolution.js";
+
+const mockResolveTheme = vi.mocked(resolveTheme);
+
+const MOCK_THEME: ResolvedTheme = {
+  tokens: { "color-bg": "#ffffff", "color-primary": "#ff5c00" },
+  cssOverrides: null,
+  fontUrls: ["https://fonts.example.com/font.css"],
+  colorScheme: "light",
+};
+
+describe("createThemeMiddleware", () => {
+  beforeEach(() => {
+    mockResolveTheme.mockReset();
+    mockResolveTheme.mockResolvedValue(MOCK_THEME);
+  });
+
+  it("stores resolved theme in context for downstream handlers", async () => {
+    let capturedTheme: ResolvedTheme | undefined;
+
+    const app = new Hono<WebAppEnv>()
+      .use("*", createThemeMiddleware("http://appview.test"))
+      .get("/test", (c) => {
+        capturedTheme = c.get("theme");
+        return c.json({ ok: true });
+      });
+
+    const res = await app.request("http://localhost/test");
+    expect(res.status).toBe(200);
+    expect(capturedTheme).toEqual(MOCK_THEME);
+  });
+
+  it("passes Cookie header to resolveTheme", async () => {
+    const app = new Hono<WebAppEnv>()
+      .use("*", createThemeMiddleware("http://appview.test"))
+      .get("/test", (c) => c.json({ ok: true }));
+
+    await app.request("http://localhost/test", {
+      headers: { Cookie: "atbb-color-scheme=dark; session=abc" },
+    });
+
+    expect(mockResolveTheme).toHaveBeenCalledWith(
+      expect.any(String),
+      "atbb-color-scheme=dark; session=abc",
+      undefined
+    );
+  });
+
+  it("passes Sec-CH-Prefers-Color-Scheme header to resolveTheme", async () => {
+    const app = new Hono<WebAppEnv>()
+      .use("*", createThemeMiddleware("http://appview.test"))
+      .get("/test", (c) => c.json({ ok: true }));
+
+    await app.request("http://localhost/test", {
+      headers: { "Sec-CH-Prefers-Color-Scheme": "dark" },
+    });
+
+    expect(mockResolveTheme).toHaveBeenCalledWith(
+      expect.any(String),
+      undefined,
+      "dark"
+    );
+  });
+
+  it("passes appviewUrl to resolveTheme", async () => {
+    const app = new Hono<WebAppEnv>()
+      .use("*", createThemeMiddleware("http://custom-appview.example.com"))
+      .get("/test", (c) => c.json({ ok: true }));
+
+    await app.request("http://localhost/test");
+
+    expect(mockResolveTheme).toHaveBeenCalledWith(
+      "http://custom-appview.example.com",
+      undefined,
+      undefined
+    );
+  });
+
+  it("calls resolveTheme with undefined when Cookie and color-scheme headers are absent", async () => {
+    const app = new Hono<WebAppEnv>()
+      .use("*", createThemeMiddleware("http://appview.test"))
+      .get("/test", (c) => c.json({ ok: true }));
+
+    await app.request("http://localhost/test");
+
+    expect(mockResolveTheme).toHaveBeenCalledWith(
+      "http://appview.test",
+      undefined,
+      undefined
+    );
+  });
+
+  it("calls next() so the downstream handler executes", async () => {
+    const app = new Hono<WebAppEnv>()
+      .use("*", createThemeMiddleware("http://appview.test"))
+      .get("/test", (c) => c.json({ message: "handler ran" }));
+
+    const res = await app.request("http://localhost/test");
+    expect(res.status).toBe(200);
+    const body = await res.json() as { message: string };
+    expect(body.message).toBe("handler ran");
+  });
+});

apps/web/src/middleware/theme.ts

···
+import type { MiddlewareHandler } from "hono";
+import type { WebAppEnv } from "../lib/theme-resolution.js";
+import { resolveTheme } from "../lib/theme-resolution.js";
+
+export function createThemeMiddleware(appviewUrl: string): MiddlewareHandler<WebAppEnv> {
+  return async (c, next) => {
+    const cookieHeader = c.req.header("Cookie");
+    const colorSchemeHint = c.req.header("Sec-CH-Prefers-Color-Scheme");
+    const theme = await resolveTheme(appviewUrl, cookieHeader, colorSchemeHint);
+    c.set("theme", theme);
+    await next();
+  };
+}