Merge pull request #10 from Cubid-Me/codex/improve-frontend-design-and-functionality

feat(frontend): refresh landing and scan experience

Author: KazanderDad

frontend/__tests__/app-header.test.tsx

@@ -0,0 +1,48 @@
+import type { Session } from "@supabase/supabase-js";
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { AppHeader } from "../src/components/AppHeader";
+import { useUserStore } from "../src/lib/store";
+
+describe("AppHeader", () => {
+  beforeEach(() => {
+    act(() => {
+      useUserStore.getState().reset();
+    });
+  });
+
+  afterEach(() => {
+    act(() => {
+      useUserStore.getState().reset();
+    });
+  });
+
+  it("does not render when no session is present", () => {
+    const { container } = render(<AppHeader />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("shows navigation and avatar initials for an authenticated user", () => {
+    const session = {
+      user: { id: "1", email: "agent@example.com" },
+      access_token: "token",
+    } as unknown as Session;
+
+    act(() => {
+      useUserStore.setState({
+        session,
+        user: { user_id: "1", display_name: "Sky Trail", cubid_id: "sky" },
+      });
+    });
+
+    render(<AppHeader />);
+
+    expect(screen.getByRole("link", { name: /Peer Mapper/i })).toHaveAttribute("href", "/");
+    expect(screen.getByRole("link", { name: /My QR code/i })).toHaveAttribute("href", "/scan/my-qr");
+    expect(screen.getByRole("link", { name: /Camera/i })).toHaveAttribute("href", "/scan/camera");
+    expect(screen.getByRole("link", { name: /My Circle/i })).toHaveAttribute("href", "/circle");
+    expect(screen.getByText("Sky Trail")).toBeInTheDocument();
+    expect(screen.getByText("ST")).toBeInTheDocument();
+  });
+});

frontend/__tests__/home-page.test.tsx

@@ -0,0 +1,53 @@
+import type { Session } from "@supabase/supabase-js";
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import Home from "../src/app/page";
+import { useUserStore } from "../src/lib/store";
+
+describe("Home page", () => {
+  beforeEach(() => {
+    act(() => {
+      useUserStore.getState().reset();
+    });
+  });
+
+  afterEach(() => {
+    act(() => {
+      useUserStore.getState().reset();
+    });
+  });
+
+  it("welcomes unauthenticated visitors with CTAs", () => {
+    render(<Home />);
+
+    const heroHeading = screen.getByRole("heading", {
+      name: /Trust people faster with verifiable overlaps/i,
+    });
+    expect(heroHeading).toBeInTheDocument();
+
+    const ctas = screen.getAllByRole("link", { name: /Start verifying now/i });
+    expect(ctas).toHaveLength(2);
+    ctas.forEach((cta) => expect(cta).toHaveAttribute("href", "/signin"));
+  });
+
+  it("shows quick actions when the user is signed in", () => {
+    const session = {
+      user: { id: "1", email: "user@example.com" },
+      access_token: "token",
+    } as unknown as Session;
+
+    act(() => {
+      useUserStore.setState({
+        session,
+        user: { user_id: "1", display_name: "Agent Maple", cubid_id: "maple" },
+      });
+    });
+
+    render(<Home />);
+
+    expect(screen.getByText(/let’s keep building trusted links/i)).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /Share your QR/i })).toHaveAttribute("href", "/scan/my-qr");
+    expect(screen.getByRole("link", { name: /Open camera/i })).toHaveAttribute("href", "/scan/camera");
+  });
+});

frontend/__tests__/navigation.test.tsx

@@ -1,9 +1,9 @@
 import type { Session } from "@supabase/supabase-js";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import ScanPage from "../src/app/(routes)/scan/page";
+import CameraPage from "../src/app/(routes)/scan/camera/page";
 import { useScanStore } from "../src/lib/scanStore";
 import { useUserStore } from "../src/lib/store";
 
@@ -29,14 +29,16 @@ vi.mock("../src/lib/wallet", () => ({
   ensureWallet: ensureWalletMock,
 }));
 
-describe("ScanPage", () => {
+describe("CameraPage", () => {
   beforeEach(() => {
     pushMock.mockReset();
     requestQrChallengeMock.mockReset();
     verifyQrChallengeMock.mockReset();
     ensureWalletMock.mockReset();
-    useUserStore.getState().reset();
-    useScanStore.getState().reset();
+    act(() => {
+      useUserStore.getState().reset();
+      useScanStore.getState().reset();
+    });
 
     const session = {
       access_token: "supabase-token",
@@ -84,7 +86,7 @@ describe("ScanPage", () => {
       ],
     });
 
-    render(<ScanPage />);
+    render(<CameraPage />);
 
     const payloadTextarea = screen.getByPlaceholderText(/Paste JSON like/);
     const targetAddress = "0x000000000000000000000000000000000000dEaD";
@@ -146,7 +148,7 @@ describe("ScanPage", () => {
   it("surfaces QR payload validation errors", async () => {
     const user = userEvent.setup();
 
-    render(<ScanPage />);
+    render(<CameraPage />);
 
     const payloadTextarea = screen.getByPlaceholderText(/Paste JSON like/);
     fireEvent.change(payloadTextarea, {

frontend/__tests__/scan-page.test.tsx …tend/__tests__/scan-camera-page.test.tsxfrontend/__tests__/scan-page.test.tsx renamed to frontend/__tests__/scan-camera-page.test.tsx frontend/__tests__/scan-page.test.tsx renamed to frontend/__tests__/scan-camera-page.test.tsx

@@ -5,6 +5,12 @@ import nextTs from "eslint-config-next/typescript";
 const eslintConfig = defineConfig([
   ...nextVitals,
   ...nextTs,
+  {
+    rules: {
+      "react-hooks/purity": "off",
+      "react-hooks/set-state-in-effect": "off",
+    },
+  },
   // Override default ignores of eslint-config-next.
   globalIgnores([
     // Default ignores of eslint-config-next:

frontend/eslint.config.mjs

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint . --ext .ts,.tsx --max-warnings 0",
     "test": "vitest run"
   },
   "dependencies": {