smooth hero cta swap

Author: dnywh

docs/auth-session-architecture.md

@@ -32,7 +32,7 @@ This means the first paint can briefly look signed-out on public pages. That is
 
 `UnreadMessagesProvider` belongs near the UI that displays or consumes unread state, such as tab-bar and chat layouts. It should not wrap the root layout.
 
-The unread check should stay deferred so it does not delay public HTML. If the unread dot disappears entirely, check the provider scope, the idle auth check, the `chat_threads` query, and the `unread_chat_thread_ids` RPC before moving the provider back to the root.
+The unread check should stay deferred so it does not delay public HTML. If the unread dot disappears entirely, check the provider scope, the idle auth check, and the unread `chat_messages` count before moving the provider back to the root.
 
 ## Homepage First Paint
 

e2e/home.spec.ts

@@ -146,9 +146,14 @@ test("homepage account button stays hidden while signed-in profile state loads",
   }
 
   const profileAccountButton = page.getByTestId("account-button-profile");
+  const heroSecondaryAction = page.getByTestId("hero-secondary-action");
 
   await expect(profileAccountButton).toHaveAttribute("href", "/profile");
   await expect(profileAccountButton).toHaveCSS("opacity", "1");
+  await expect(heroSecondaryAction).toHaveAttribute(
+    "href",
+    "/profile/listings/new"
+  );
   await expect(page.getByTestId("locale-picker-select")).toHaveCount(0);
 });
 
@@ -160,36 +165,34 @@ test("homepage account button links guests to sign in", async ({ page }) => {
     "/sign-in"
   );
   await expect(page.getByTestId("account-button-profile")).toHaveCount(0);
+  await expect(page.getByTestId("hero-secondary-action")).toHaveAttribute(
+    "href",
+    "/sign-up"
+  );
   await expect(page.getByTestId("locale-picker-select")).toBeVisible();
 });
 
 test("homepage unread chat dot appears after scoped unread check", async ({
   page,
 }) => {
-  await page.route(/\/rest\/v1\/chat_threads(?:\?|$)/, async (route) => {
-    if (route.request().method() !== "GET") {
+  await page.route(/\/rest\/v1\/chat_messages(?:\?|$)/, async (route) => {
+    const method = route.request().method();
+
+    if (method !== "GET" && method !== "HEAD") {
       await route.continue();
       return;
     }
 
     await route.fulfill({
       status: 200,
       contentType: "application/json",
-      body: JSON.stringify([{ id: "33333333-3333-4333-8333-333333333333" }]),
+      headers: {
+        "content-range": "0-0/1",
+        "access-control-expose-headers": "content-range",
+      },
+      body: method === "HEAD" ? "" : JSON.stringify([]),
     });
   });
-  await page.route(
-    /\/rest\/v1\/rpc\/unread_chat_thread_ids(?:\?|$)/,
-    async (route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: "application/json",
-        body: JSON.stringify([
-          { thread_id: "33333333-3333-4333-8333-333333333333" },
-        ]),
-      });
-    }
-  );
 
   await signIn(page, { email: DONOR_EMAIL, redirectTo: "/" });
 

src/components/HeroButtons/HeroButtons.tsx

@@ -15,17 +15,23 @@ export default function HeroButtons() {
         {t("browseMap")}
       </HeroActionButton>
       {user ? (
-        <HeroActionButton
+        <SecondaryHeroActionButton
           href="/profile/listings/new"
           variant="secondary"
           size="massive"
+          data-testid="hero-secondary-action"
         >
           {t("addListing")}
-        </HeroActionButton>
+        </SecondaryHeroActionButton>
       ) : (
-        <HeroActionButton href="/sign-up" variant="secondary" size="massive">
+        <SecondaryHeroActionButton
+          href="/sign-up"
+          variant="secondary"
+          size="massive"
+          data-testid="hero-secondary-action"
+        >
           {t("signUp")}
-        </HeroActionButton>
+        </SecondaryHeroActionButton>
       )}
     </ButtonContainer>
   );
@@ -41,6 +47,12 @@ const HeroActionButton = styled(Button)`
   }
 `;
 
+const SecondaryHeroActionButton = styled(HeroActionButton)`
+  @media (min-width: 768px) {
+    min-width: 13.5rem;
+  }
+`;
+
 const ButtonContainer = styled.div`
   margin-top: 1rem;
   width: 100%;

src/contexts/UnreadMessagesContext.tsx

@@ -21,14 +21,6 @@ type ChatMessagePayload = {
   thread_id: string | null;
 };
 
-type ChatThreadRow = {
-  id: string;
-};
-
-type UnreadThreadRow = {
-  thread_id: string | null;
-};
-
 type UnreadMessagesContextValue = {
   unreadCount: number;
   setUnreadCount: Dispatch<SetStateAction<number>>;
@@ -133,39 +125,19 @@ export function UnreadMessagesProvider({ children }: PropsWithChildren) {
           return;
         }
 
-        const { data: threads, error: threadsError } = await supabase
-          .from("chat_threads")
-          .select("id")
-          .or(`initiator_id.eq.${userId},owner_id.eq.${userId}`);
+        const { count, error } = await supabase
+          .from("chat_messages")
+          .select("id", { count: "exact", head: true })
+          .neq("sender_id", userId)
+          .is("read_at", null);
 
-        if (threadsError) {
-          console.error("Error checking chat threads:", threadsError);
+        if (error) {
+          console.error("Error checking unread messages:", error);
           return;
         }
 
-        const threadIds = ((threads as ChatThreadRow[] | null) ?? []).map(
-          (thread) => thread.id
-        );
-        const { data: unreadThreads, error: unreadThreadsError } =
-          threadIds.length > 0
-            ? await supabase.rpc("unread_chat_thread_ids", {
-                thread_ids: threadIds,
-              })
-            : { data: [], error: null };
-
-        if (unreadThreadsError) {
-          console.error("Error checking unread messages:", unreadThreadsError);
-          return;
-        }
-
-        const unreadThreadIds = new Set(
-          ((unreadThreads as UnreadThreadRow[] | null) ?? [])
-            .map((thread) => thread.thread_id)
-            .filter((threadId): threadId is string => Boolean(threadId))
-        );
-
         if (!isActive) return;
-        setUnreadCount(unreadThreadIds.size);
+        setUnreadCount(count ?? 0);
       } catch (error) {
         console.error("Error in checkUnreadMessages:", error);
       }

src/proxy.ts

@@ -45,6 +45,8 @@ function shouldUpdateSession(request: NextRequest) {
 }
 
 export async function proxy(request: NextRequest) {
+  // Public routes deliberately skip Supabase auth refresh for first-paint
+  // performance. Auth-aware client slots converge after hydration.
   const response = shouldUpdateSession(request)
     ? await updateSession(request)
     : createSignedOutResponse(request);