feat: Implement HTTP caching for API routes and add a dashboard sidebar with city grouping and state persistence.

frontend/app/api/cities/route.ts

@@ -1,10 +1,11 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import { buildBackendRequestHeaders } from "@/lib/backend-auth";
+import { buildCachedJsonResponse } from "@/lib/http-cache";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 export const dynamic = "force-dynamic";
 
-export async function GET() {
+export async function GET(req: NextRequest) {
   if (!API_BASE) {
     return NextResponse.json(
       { error: "POLYWEATHER_API_BASE_URL is not configured" },
@@ -25,7 +26,11 @@ export async function GET() {
       );
     }
     const data = await res.json();
-    return NextResponse.json(data);
+    return buildCachedJsonResponse(
+      req,
+      data,
+      "public, max-age=0, s-maxage=300, stale-while-revalidate=1800",
+    );
   } catch (error) {
     return NextResponse.json(
       { error: "Failed to fetch cities", detail: String(error) },

frontend/app/api/city/[name]/summary/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { buildBackendRequestHeaders } from "@/lib/backend-auth";
+import { buildCachedJsonResponse } from "@/lib/http-cache";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -16,6 +17,7 @@ export async function GET(
 
   const { name } = await context.params;
   const forceRefresh = req.nextUrl.searchParams.get("force_refresh") ?? "false";
+  const bypassCache = forceRefresh === "true";
   const url = `${API_BASE}/api/city/${encodeURIComponent(name)}/summary?force_refresh=${forceRefresh}`;
 
   try {
@@ -31,7 +33,18 @@ export async function GET(
       );
     }
     const data = await res.json();
-    return NextResponse.json(data);
+    if (bypassCache) {
+      return NextResponse.json(data, {
+        headers: {
+          "Cache-Control": "no-store",
+        },
+      });
+    }
+    return buildCachedJsonResponse(
+      req,
+      data,
+      "public, max-age=0, s-maxage=20, stale-while-revalidate=60",
+    );
   } catch (error) {
     return NextResponse.json(
       { error: "Failed to fetch city summary", detail: String(error) },

frontend/app/api/history/[name]/route.ts

@@ -1,10 +1,11 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import { buildBackendRequestHeaders } from "@/lib/backend-auth";
+import { buildCachedJsonResponse } from "@/lib/http-cache";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
 export async function GET(
-  _req: Request,
+  req: NextRequest,
   context: { params: Promise<{ name: string }> },
 ) {
   if (!API_BASE) {
@@ -30,7 +31,11 @@ export async function GET(
       );
     }
     const data = await res.json();
-    return NextResponse.json(data);
+    return buildCachedJsonResponse(
+      req,
+      data,
+      "public, max-age=0, s-maxage=60, stale-while-revalidate=300",
+    );
   } catch (error) {
     return NextResponse.json(
       { error: "Failed to fetch history", detail: String(error) },