chore: add header prereqs

src/app/explorer/_components/HeaderBackground.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { cn } from "@/lib/cssUtils";
+import { useAtomValue } from "jotai";
+import { isNavStuckAtom, isSearchStuckAtom } from "../atoms";
+
+export const HeaderBackground = () => {
+  const isNavStuck = useAtomValue(isNavStuckAtom);
+  const isSearchStuck = useAtomValue(isSearchStuckAtom);
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-x-0 top-0 z-10 h-0 bg-card shadow-md transition-all duration-200 dark:bg-background",
+        {
+          "h-16": isNavStuck,
+          "h-[calc(theme(space.36)+theme(space.2))] bg-gradient-to-b from-card to-background sm:h-[calc(theme(space.28)-theme(space.2))] dark:from-background dark:to-card-secondary/50":
+            isSearchStuck,
+        },
+      )}
+    />
+  );
+};

src/app/explorer/components/InfiniteScrollGuilds.tsx → src/app/explorer/_components/InfiniteScrollGuilds.tsx

@@ -7,7 +7,7 @@ import { useIntersection } from "foxact/use-intersection";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
 import { searchAtom } from "../atoms";
-import { PAGE_SIZE } from "../constants";
+import { ACTIVE_SECTION, PAGE_SIZE } from "../constants";
 import { getGuildSearch } from "../fetchers";
 
 export const InfiniteScrollGuilds = () => {
@@ -45,7 +45,7 @@ export const InfiniteScrollGuilds = () => {
   const guilds = data?.pages.flatMap((page) => page.items) || [];
 
   return (
-    <section className="grid gap-2">
+    <section className="grid gap-2" id={ACTIVE_SECTION.exploreGuilds}>
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {isLoading
           ? Array.from({ length: PAGE_SIZE }, (_, i) => (

src/app/explorer/components/Search.tsx → src/app/explorer/_components/Search.tsx

@@ -29,7 +29,7 @@ export const Search = () => {
     window.history.replaceState(
       null,
       "",
-      `${pathname}?${newSearchParams.toString()}`,
+      [pathname, newSearchParams.toString()].filter(Boolean).join("?"),
     );
   }, [value, pathname]);
 

src/app/explorer/atoms.ts

@@ -1,3 +1,5 @@
 import { atom } from "jotai";
 
 export const searchAtom = atom<string | undefined>(undefined);
+export const isNavStuckAtom = atom(false);
+export const isSearchStuckAtom = atom(false);

src/app/explorer/constants.ts

@@ -1 +1,5 @@
 export const PAGE_SIZE = 24;
+export const ACTIVE_SECTION = {
+  yourGuilds: "your-guilds",
+  exploreGuilds: "explore-guilds",
+};

src/app/explorer/page.tsx

@@ -10,8 +10,10 @@ import {
   dehydrate,
 } from "@tanstack/react-query";
 import { Suspense } from "react";
-import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
-import { Search } from "./components/Search";
+import { HeaderBackground } from "./_components/HeaderBackground";
+import { InfiniteScrollGuilds } from "./_components/InfiniteScrollGuilds";
+import { Search } from "./_components/Search";
+import { ACTIVE_SECTION } from "./constants";
 import { getGuildSearch } from "./fetchers";
 
 const getAssociatedGuilds = async () => {
@@ -32,21 +34,29 @@ export default async function Explorer() {
   });
 
   return (
-    <main className="container mx-auto grid max-w-screen-lg gap-8 px-4 py-8">
-      <section className="pt-6 pb-8">
-        <h1 className="font-black text-5xl">Guildhall</h1>
-      </section>
-
-      <YourGuildsSection />
-
-      <section>
-        <Search />
-      </section>
-
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <InfiniteScrollGuilds />
-      </HydrationBoundary>
-    </main>
+    <>
+      <HeaderBackground />
+      <main className="container mx-auto grid max-w-screen-lg gap-8 px-4 py-8">
+        <section className="pt-6 pb-8">
+          <h1
+            className="font-black font-display text-5xl tracking-tight"
+            id={ACTIVE_SECTION.yourGuilds}
+          >
+            Guildhall
+          </h1>
+        </section>
+
+        <YourGuildsSection />
+
+        <section>
+          <Search />
+        </section>
+
+        <HydrationBoundary state={dehydrate(queryClient)}>
+          <InfiniteScrollGuilds />
+        </HydrationBoundary>
+      </main>
+    </>
   );
 }
 
@@ -58,7 +68,7 @@ async function YourGuildsSection() {
       <AuthBoundary
         fallback={
           <div className="flex items-center gap-4 rounded-2xl bg-card px-5 py-6">
-            <img src="/icons/robot.svg" alt="Guild Robot" className="size-8" />
+            <img src="/images/robot.svg" alt="Guild Robot" className="size-8" />
 
             <p className="font-semibold">
               Sign in to view your guilds or create new ones
@@ -93,7 +103,7 @@ async function YourGuilds() {
     </div>
   ) : (
     <div className="flex items-center gap-4 rounded-2xl bg-card px-5 py-6">
-      <img src="/icons/robot.svg" alt="Guild Robot" className="size-8" />
+      <img src="/images/robot.svg" alt="Guild Robot" className="size-8" />
 
       <p className="font-semibold">
         You&apos;re not a member of any guilds yet. Explore and join some below,