add explorer

guild.d.ts

@@ -0,0 +1,33 @@
+// dumping here types util it comes down properly
+
+export {}
+
+declare global {
+  type Guild = {
+    name: string;
+    id: string;
+    urlName: string;
+    createdAt: number;
+    updatedAt: number;
+    description: string;
+    imageUrl: string;
+    backgroundImageUrl: string;
+    visibility: Record<string, string>;
+    settings: Record<string, string>;
+    searchTags: string[];
+    categoryTags: string[];
+    socialLinks: Record<string, string>;
+    owner: string;
+  };
+
+  type PaginatedResponse<Item extends any> = {
+    page: number;
+    pageSize: number;
+    sortBy: string;
+    reverse: boolean;
+    searchQuery: string;
+    query: string;
+    items: Item[];
+    total: number;
+  };
+}

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
     "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
@@ -24,13 +25,16 @@
     "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "^5.60.2",
+    "@tanstack/react-query-devtools": "^5.61.0",
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "foxact": "^0.2.41",
-    "jotai": "^2.10.2",
+    "jotai": "^2.10.3",
     "next": "15.0.3",
     "next-themes": "^0.4.3",
     "react": "19.0.0-rc-66855b96-20241106",

src/app/explorer/_components/CreateGuildLink.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { buttonVariants } from "@/components/ui/Button";
+import { Plus } from "@phosphor-icons/react";
+import { useAtomValue } from "jotai";
+import Link from "next/link";
+import { isNavStuckAtom } from "../atoms";
+
+export const CreateGuildLink = () => {
+  const isNavStuck = useAtomValue(isNavStuckAtom);
+  return (
+    <Link
+      href="/create-guild"
+      aria-label="Create guild"
+      prefetch={false}
+      className={buttonVariants({
+        variant: "ghost",
+        size: "sm",
+        className: [
+          // Temporarily, until we don't migrate the scrollable Tabs component
+          "min-h-11 w-11 gap-1.5 px-0 sm:min-h-0 sm:w-auto sm:px-3",
+          {
+            "text-white": !isNavStuck,
+          },
+        ],
+      })}
+    >
+      <Plus />
+      <span className="hidden sm:inline-block">Create guild</span>
+    </Link>
+  );
+};

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

@@ -0,0 +1,78 @@
+"use client";
+
+import { GuildCard, GuildCardSkeleton } from "@/components/GuildCard";
+import { useInfiniteQuery } from "@tanstack/react-query";
+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 { getGuildSearch } from "../fetchers";
+
+export const InfiniteScrollGuilds = () => {
+  const search = useAtomValue(searchAtom);
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useInfiniteQuery({
+      queryKey: ["guilds", search || ""],
+      queryFn: getGuildSearch(search),
+      initialPageParam: 1,
+      staleTime: Number.POSITIVE_INFINITY,
+      enabled: search !== undefined,
+      getNextPageParam: (lastPage) =>
+        lastPage.total / lastPage.pageSize <= lastPage.page
+          ? undefined
+          : lastPage.page + 1,
+    });
+
+  const [setIntersection, isIntersected, resetIsIntersected] = useIntersection({
+    rootMargin: "700px",
+  });
+
+  useEffect(() => {
+    if (!isFetchingNextPage) {
+      resetIsIntersected();
+    }
+  }, [resetIsIntersected, isFetchingNextPage]);
+
+  useEffect(() => {
+    if (isFetchingNextPage) return;
+    if (isIntersected && hasNextPage) {
+      fetchNextPage();
+    }
+  }, [isIntersected, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const guilds = data?.pages.flatMap((page) => page.items) || [];
+
+  return (
+    <section className="grid gap-2">
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {isLoading
+          ? Array.from({ length: PAGE_SIZE }, (_, i) => (
+              <GuildCardSkeleton key={i} />
+            ))
+          : guilds.map((guild) => <GuildCard key={guild.id} guild={guild} />)}
+      </div>
+      <div
+        ref={useCallback(
+          (element: HTMLDivElement | null) => {
+            setIntersection(element);
+          },
+          [setIntersection],
+        )}
+        aria-hidden
+      />
+
+      {guilds.length === 0 && !isLoading && search ? (
+        <p className="mt-6 text-center text-foreground-secondary">
+          `No results for "${search}"`
+        </p>
+      ) : (
+        <p className="mt-6 text-center text-foreground-secondary">
+          {isFetchingNextPage
+            ? "Loading more..."
+            : hasNextPage || "No More Data"}
+        </p>
+      )}
+    </section>
+  );
+};

src/app/explorer/_components/StickyNavbar.tsx

@@ -0,0 +1,91 @@
+"use client";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup";
+import useIsStuck from "@/hooks/useIsStuck";
+import useScrollspy from "@/hooks/useScrollSpy";
+import { cn } from "@/lib/cssUtils";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { type PropsWithChildren, useEffect } from "react";
+import { activeSectionAtom, isNavStuckAtom, isSearchStuckAtom } from "../atoms";
+import { ACTIVE_SECTION } from "../constants";
+
+export const smoothScrollTo = (id: string) => {
+  const target = document.getElementById(id);
+
+  if (!target) return;
+
+  window.scrollTo({
+    behavior: "smooth",
+    top: target.offsetTop,
+  });
+};
+
+const Nav = () => {
+  const isNavStuck = useAtomValue(isNavStuckAtom);
+  const isSearchStuck = useAtomValue(isSearchStuckAtom);
+  const [activeSection, setActiveSection] = useAtom(activeSectionAtom);
+  const spyActiveSection = useScrollspy(Object.values(ACTIVE_SECTION), 100);
+  useEffect(() => {
+    if (!spyActiveSection) return;
+    setActiveSection(
+      spyActiveSection as (typeof ACTIVE_SECTION)[keyof typeof ACTIVE_SECTION],
+    );
+  }, [spyActiveSection, setActiveSection]);
+
+  return (
+    <ToggleGroup
+      type="single"
+      className="gap-2"
+      size={isSearchStuck ? "sm" : "lg"}
+      variant={isNavStuck ? "secondary" : "mono"}
+      onValueChange={(value) =>
+        value &&
+        setActiveSection(
+          value as (typeof ACTIVE_SECTION)[keyof typeof ACTIVE_SECTION],
+        )
+      }
+      value={activeSection}
+    >
+      <ToggleGroupItem
+        value={ACTIVE_SECTION.yourGuilds}
+        className={cn("rounded-xl transition-all", {
+          "rounded-lg": isSearchStuck,
+        })}
+        onClick={() => smoothScrollTo(ACTIVE_SECTION.yourGuilds)}
+      >
+        Your guilds
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value={ACTIVE_SECTION.exploreGuilds}
+        className={cn("rounded-xl transition-all", {
+          "rounded-lg": isSearchStuck,
+        })}
+        onClick={() => smoothScrollTo(ACTIVE_SECTION.exploreGuilds)}
+      >
+        Explore guilds
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+};
+
+export const StickyNavbar = ({ children }: PropsWithChildren) => {
+  const setIsNavStuck = useSetAtom(isNavStuckAtom);
+  const isSearchStuck = useAtomValue(isSearchStuckAtom);
+  const { ref: navToggleRef } = useIsStuck(setIsNavStuck);
+
+  return (
+    <div
+      className={cn(
+        "sticky top-0 z-10 flex h-16 w-full items-center transition-all",
+        {
+          "h-12": isSearchStuck,
+        },
+      )}
+      ref={navToggleRef}
+    >
+      <div className="relative flex w-full items-center justify-between">
+        <Nav />
+        {children}
+      </div>
+    </div>
+  );
+};

src/app/explorer/_components/StickySearch.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Input } from "@/components/ui/Input";
+import useIsStuck from "@/hooks/useIsStuck";
+import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr";
+import { useDebouncedValue } from "foxact/use-debounced-value";
+import { useSetAtom } from "jotai";
+import { usePathname, useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import { isSearchStuckAtom, searchAtom } from "../atoms";
+
+const Search = () => {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const [value, setValue] = useState(
+    searchParams?.get("search")?.toString() || "",
+  );
+
+  const debouncedValue = useDebouncedValue(value, 200);
+  const setSearch = useSetAtom(searchAtom);
+
+  useEffect(() => {
+    setSearch(debouncedValue);
+  }, [debouncedValue, setSearch]);
+
+  useEffect(() => {
+    const newSearchParams = new URLSearchParams(
+      Object.entries({ search: value }).filter(([_, value]) => value),
+    );
+    window.history.replaceState(
+      null,
+      "",
+      [pathname, newSearchParams.toString()].filter(Boolean).join("?"),
+    );
+  }, [value, pathname]);
+
+  return (
+    <div className="relative flex flex-col gap-3 sm:flex-row sm:gap-0">
+      <Input
+        className="relative h-12 grow rounded-xl border pr-6 pl-10 text-md"
+        size="lg"
+        placeholder="Search verified guilds"
+        onChange={({ currentTarget }) => setValue(currentTarget.value)}
+        value={value}
+      />
+      <div className="absolute left-4 flex h-12 items-center justify-center">
+        <MagnifyingGlass className="text-foreground-secondary" />
+      </div>
+    </div>
+  );
+};
+
+export const StickySearch = () => {
+  const setIsSearchStuck = useSetAtom(isSearchStuckAtom);
+  const { ref: searchRef } = useIsStuck(setIsSearchStuck);
+
+  return (
+    <div className="sticky top-12 z-10" ref={searchRef}>
+      <Suspense>
+        <Search />
+      </Suspense>
+    </div>
+  );
+};

src/app/explorer/atoms.ts

@@ -0,0 +1,9 @@
+import { atom } from "jotai";
+import { ACTIVE_SECTION } from "./constants";
+
+export const searchAtom = atom<string | undefined>(undefined);
+export const isNavStuckAtom = atom(false);
+export const isSearchStuckAtom = atom(false);
+export const activeSectionAtom = atom<
+  (typeof ACTIVE_SECTION)[keyof typeof ACTIVE_SECTION]
+>(ACTIVE_SECTION.yourGuilds);