fix(home): resync form and results to URL on back/forward navigation

Round-2 review: the previous version only consumed search params on
initial mount, so router.push from compare/swap/reset put history
entries that the back button couldn't restore. Now a useEffect watches
searchParams and resyncs username1/username2 + triggers a re-fetch when
the URL pair differs from the last fetched pair. lastFetchedPairRef
short-circuits the loop with our own router.push.

Author: mvanhorn

app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { Suspense, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { CompareForm } from "../components/compare-form";
 import { ResultDashboard } from "../components/result-dashboard";
 import { DashboardSkeleton } from "../components/skeletons";
@@ -16,14 +17,24 @@ type ApiResponse = {
   error?: string;
 };
 
-export default function HomePage() {
+function HomePageInner() {
   const { t } = useTranslation();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const initialUsernames = searchParams.getAll("username");
+  const initialUsername1 = initialUsernames[0] ?? "";
+  const initialUsername2 = initialUsernames[1] ?? "";
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [username1, setUsername1] = useState(initialUsername1);
+  const [username2, setUsername2] = useState(initialUsername2);
   const [data, setData] = useState<{
     user1: UserResult;
     user2: UserResult;
   } | null>(null);
+  // Track the URL pair we last fetched against so back/forward navigation
+  // can resync the form and results without re-fetching identical pairs.
+  const lastFetchedPairRef = useRef<[string, string] | null>(null);
 
   const localizeErrorMessage = (message?: string) => {
     switch (message) {
@@ -43,6 +54,11 @@ export default function HomePage() {
   };
 
   const handleCompare = async (u1: string, u2: string) => {
+    lastFetchedPairRef.current = [u1, u2];
+    router.push(
+      `/?username=${encodeURIComponent(u1)}&username=${encodeURIComponent(u2)}`,
+      { scroll: false }
+    );
     setLoading(true);
     setError(null);
     setData(null);
@@ -79,14 +95,56 @@ export default function HomePage() {
     }
   };
 
+  // Resync form + results to whatever the URL says — handles initial mount
+  // AND back/forward navigation. We fetch only when the URL pair differs from
+  // the last pair we fetched, so no infinite loop with the router.push above.
+  const syncToUrl = useEffectEvent((u1: string, u2: string) => {
+    setUsername1(u1);
+    setUsername2(u2);
+
+    if (!u1 || !u2) {
+      // Empty params: clear results so the empty state matches the URL.
+      lastFetchedPairRef.current = null;
+      setData(null);
+      setError(null);
+      return;
+    }
+
+    const last = lastFetchedPairRef.current;
+    if (last && last[0] === u1 && last[1] === u2) {
+      // URL already reflects the most recent fetch; nothing to do.
+      return;
+    }
+
+    void handleCompare(u1, u2);
+  });
+
+  useEffect(() => {
+    const params = searchParams.getAll("username");
+    syncToUrl(params[0] ?? "", params[1] ?? "");
+  }, [searchParams]);
+
   const skeleton = useMemo(() => <DashboardSkeleton />, []);
 
   const reset = () => {
     setData(null);
     setError(null);
+    setUsername1("");
+    setUsername2("");
+    router.push("/", { scroll: false });
   };
 
   const swapUsers = () => {
+    const nextUsername1 = username2;
+    const nextUsername2 = username1;
+
+    setUsername1(nextUsername1);
+    setUsername2(nextUsername2);
+    router.push(
+      `/?username=${encodeURIComponent(nextUsername1)}&username=${encodeURIComponent(nextUsername2)}`,
+      { scroll: false }
+    );
+
     if (!data) return;
     setData((d) => ({ user1: d!.user2, user2: d!.user1 }));
   };
@@ -97,6 +155,10 @@ export default function HomePage() {
 
       <div className="w-full flex-1 max-w-6xl mx-auto px-4 py-10 space-y-6">
         <CompareForm
+          username1={username1}
+          username2={username2}
+          setUsername1={setUsername1}
+          setUsername2={setUsername2}
           onSubmit={handleCompare}
           loading={loading}
           reset={reset}
@@ -126,3 +188,11 @@ export default function HomePage() {
     </main>
   );
 }
+
+export default function HomePage() {
+  return (
+    <Suspense fallback={<DashboardSkeleton />}>
+      <HomePageInner />
+    </Suspense>
+  );
+}