Read the review card fill from localStorage before picking a new one.

The review screen’s effect ran before draft hydration, so reload always generated a fresh color and overwrote the stored one.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/components/FinalReviewPreviewSurface.test.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useLayoutEffect } from "react";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { waitFor } from "@testing-library/react";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
 import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalReviewScreen";
 import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
+import { CREATE_FLOW_ANONYMOUS_KEY } from "../../app/(app)/create/utils/anonymousDraftStorage";
 import {
   dominantColorFromImageUrl,
   randomPreviewSurfaceColor,
@@ -60,6 +61,10 @@ function FinalReviewWithStateProbe({
 }
 
 describe("Final review preview surface", () => {
+  beforeEach(() => {
+    window.localStorage.removeItem(CREATE_FLOW_ANONYMOUS_KEY);
+    vi.mocked(randomPreviewSurfaceColor).mockClear();
+  });
   it("fills the card from the uploaded logo’s most common color", async () => {
     render(<FinalReviewWithAvatar />);
 
@@ -95,6 +100,34 @@ describe("Final review preview surface", () => {
     expect(vi.mocked(randomPreviewSurfaceColor)).toHaveBeenCalled();
   });
 
+  it("reuses a fallback saved only in localStorage across a fresh mount", async () => {
+    window.localStorage.setItem(
+      CREATE_FLOW_ANONYMOUS_KEY,
+      JSON.stringify({
+        title: "Oak Park Commons",
+        communityContext: "Local mutual aid.",
+        previewSurfaceColor: "hsl(200, 60%, 80%)",
+      }),
+    );
+    let latest: CreateFlowState = {};
+    render(
+      <FinalReviewWithStateProbe
+        initial={{
+          title: "Oak Park Commons",
+          communityContext: "Local mutual aid.",
+        }}
+        onState={(state) => {
+          latest = state;
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(latest.previewSurfaceColor).toBe("hsl(200, 60%, 80%)");
+    });
+    expect(vi.mocked(randomPreviewSurfaceColor)).not.toHaveBeenCalled();
+  });
+
   it("reuses the stored fallback instead of picking a new color", async () => {
     vi.mocked(randomPreviewSurfaceColor).mockClear();
     render(

tests/unit/resolvePreviewSurfaceFallback.test.ts

@@ -0,0 +1,71 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { CREATE_FLOW_ANONYMOUS_KEY } from "../../app/(app)/create/utils/anonymousDraftStorage";
+import {
+  persistDraftPreviewSurfaceColor,
+  readDraftPreviewSurfaceColor,
+  resolvePreviewSurfaceFallback,
+} from "../../app/(app)/create/utils/resolvePreviewSurfaceFallback";
+import { randomPreviewSurfaceColor } from "../../lib/create/previewSurfaceColor";
+
+vi.mock("../../lib/create/previewSurfaceColor", async (importOriginal) => {
+  const actual =
+    await importOriginal<
+      typeof import("../../lib/create/previewSurfaceColor")
+    >();
+  return {
+    ...actual,
+    randomPreviewSurfaceColor: vi.fn(() => "hsl(12, 50%, 80%)"),
+  };
+});
+
+describe("resolvePreviewSurfaceFallback", () => {
+  beforeEach(() => {
+    window.localStorage.removeItem(CREATE_FLOW_ANONYMOUS_KEY);
+    vi.mocked(randomPreviewSurfaceColor).mockClear();
+  });
+
+  it("reuses a valid fill already on React state", () => {
+    expect(resolvePreviewSurfaceFallback("hsl(200, 60%, 80%)")).toBe(
+      "hsl(200, 60%, 80%)",
+    );
+    expect(randomPreviewSurfaceColor).not.toHaveBeenCalled();
+  });
+
+  it("reuses a fill already on the anonymous draft", () => {
+    window.localStorage.setItem(
+      CREATE_FLOW_ANONYMOUS_KEY,
+      JSON.stringify({
+        title: "Oak Park Commons",
+        previewSurfaceColor: "hsl(200, 60%, 80%)",
+      }),
+    );
+    expect(resolvePreviewSurfaceFallback(undefined)).toBe(
+      "hsl(200, 60%, 80%)",
+    );
+    expect(randomPreviewSurfaceColor).not.toHaveBeenCalled();
+  });
+
+  it("picks once and writes it onto the anonymous draft", () => {
+    expect(resolvePreviewSurfaceFallback(undefined)).toBe(
+      "hsl(12, 50%, 80%)",
+    );
+    expect(randomPreviewSurfaceColor).toHaveBeenCalledTimes(1);
+    expect(readDraftPreviewSurfaceColor()).toBe("hsl(12, 50%, 80%)");
+    expect(resolvePreviewSurfaceFallback(undefined)).toBe(
+      "hsl(12, 50%, 80%)",
+    );
+    expect(randomPreviewSurfaceColor).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not replace a fill already stored on the draft", () => {
+    window.localStorage.setItem(
+      CREATE_FLOW_ANONYMOUS_KEY,
+      JSON.stringify({
+        title: "Oak Park Commons",
+        previewSurfaceColor: "hsl(200, 60%, 80%)",
+      }),
+    );
+    persistDraftPreviewSurfaceColor("hsl(12, 50%, 80%)");
+    expect(readDraftPreviewSurfaceColor()).toBe("hsl(200, 60%, 80%)");
+  });
+});