Merge branch 'cw/improve-initiatives-ui-phase-default-filter-and-sessionstorage-persistence' into cw-merge-1772840034224

apps/web/src/routes/initiatives/index.test.tsx

@@ -0,0 +1,104 @@
+// @vitest-environment happy-dom
+import "@testing-library/jest-dom/vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+// ── Mocks ────────────────────────────────────────────────────────────────────
+
+vi.mock("@tanstack/react-router", () => ({
+  createFileRoute: () => () => ({}),
+  useNavigate: () => vi.fn(),
+}));
+
+vi.mock("@/lib/trpc", () => ({
+  trpc: {
+    listProjects: { useQuery: () => ({ data: [] }) },
+    useUtils: () => ({}),
+  },
+}));
+
+vi.mock("@/hooks", () => ({
+  useLiveUpdates: vi.fn(),
+  INITIATIVE_LIST_RULES: {},
+}));
+
+vi.mock("@/components/InitiativeList", () => ({
+  InitiativeList: () => <div data-testid="initiative-list" />,
+}));
+
+vi.mock("@/components/CreateInitiativeDialog", () => ({
+  CreateInitiativeDialog: () => null,
+}));
+
+// ── Import after mocks ───────────────────────────────────────────────────────
+
+import { DashboardPage } from "@/routes/initiatives/index";
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function renderPage() {
+  return render(<DashboardPage />);
+}
+
+// ── Tests ────────────────────────────────────────────────────────────────────
+
+describe("DashboardPage — statusFilter default and sessionStorage", () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+    vi.clearAllMocks();
+  });
+
+  it("defaults to 'active' when sessionStorage is empty", () => {
+    renderPage();
+    const select = screen.getByRole("combobox", { name: /status/i }) as HTMLSelectElement;
+    expect(select.value).toBe("active");
+  });
+
+  it("displays the 'Active' option as selected on first render", () => {
+    renderPage();
+    const select = screen.getByDisplayValue("Active") as HTMLSelectElement;
+    expect(select.value).toBe("active");
+  });
+
+  it("reads 'completed' from sessionStorage as initial value", () => {
+    sessionStorage.setItem("initiatives.statusFilter", "completed");
+    renderPage();
+    const select = screen.getByDisplayValue("Completed") as HTMLSelectElement;
+    expect(select.value).toBe("completed");
+  });
+
+  it("reads 'archived' from sessionStorage as initial value", () => {
+    sessionStorage.setItem("initiatives.statusFilter", "archived");
+    renderPage();
+    const select = screen.getByDisplayValue("Archived") as HTMLSelectElement;
+    expect(select.value).toBe("archived");
+  });
+
+  it("falls back to 'active' when sessionStorage contains an invalid value", () => {
+    sessionStorage.setItem("initiatives.statusFilter", "bogus");
+    renderPage();
+    const select = screen.getByDisplayValue("Active") as HTMLSelectElement;
+    expect(select.value).toBe("active");
+  });
+
+  it("writes the new value to sessionStorage when the filter changes", () => {
+    renderPage();
+    const select = screen.getByDisplayValue("Active");
+    fireEvent.change(select, { target: { value: "all" } });
+    expect(sessionStorage.getItem("initiatives.statusFilter")).toBe("all");
+  });
+
+  it("updates the select's displayed value after the filter changes", () => {
+    renderPage();
+    const select = screen.getByDisplayValue("Active");
+    fireEvent.change(select, { target: { value: "completed" } });
+    expect((select as HTMLSelectElement).value).toBe("completed");
+  });
+
+  it("writes 'archived' to sessionStorage when filter changes to archived", () => {
+    renderPage();
+    const select = screen.getByDisplayValue("Active");
+    fireEvent.change(select, { target: { value: "archived" } });
+    expect(sessionStorage.getItem("initiatives.statusFilter")).toBe("archived");
+  });
+});

apps/web/src/routes/initiatives/index.tsx

@@ -21,11 +21,35 @@ const filterOptions: { value: StatusFilter; label: string }[] = [
   { value: "archived", label: "Archived" },
 ];
 
-function DashboardPage() {
+export function DashboardPage() {
   const navigate = useNavigate();
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>(() => {
+    try {
+      const stored = sessionStorage.getItem("initiatives.statusFilter");
+      if (
+        stored === "all" ||
+        stored === "active" ||
+        stored === "completed" ||
+        stored === "archived"
+      ) {
+        return stored;
+      }
+    } catch {
+      // sessionStorage unavailable (SSR, private-browsing restriction, etc.)
+    }
+    return "active";
+  });
   const [projectFilter, setProjectFilter] = useState<string>("all");
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
+
+  const handleStatusFilterChange = (value: StatusFilter) => {
+    try {
+      sessionStorage.setItem("initiatives.statusFilter", value);
+    } catch {
+      // ignore
+    }
+    setStatusFilter(value);
+  };
   const projectsQuery = trpc.listProjects.useQuery();
 
   // Single SSE stream for live updates
@@ -55,9 +79,10 @@ function DashboardPage() {
             ))}
           </select>
           <select
+            aria-label="Status"
             value={statusFilter}
             onChange={(e) =>
-              setStatusFilter(e.target.value as StatusFilter)
+              handleStatusFilterChange(e.target.value as StatusFilter)
             }
             className="rounded-md border border-input bg-background px-3 py-1.5 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
           >