refactor nav to not use useSearchParams which blocks SSR

web/src/components/site/Navigation/Navpill/components/CategoryList.tsx

@@ -1,23 +1,27 @@
 import { Button, Flex } from "@chakra-ui/react";
-import { map } from "lodash/fp";
+import { usePathname } from "next/navigation";
 
 import { useCategoryList } from "src/api/openapi/categories";
 import { Category } from "src/api/openapi/schemas";
 import { Anchor } from "src/components/site/Anchor";
 import { Unready } from "src/components/site/Unready";
 
-const mapCategories = (selected?: string) =>
-  map((c: Category) => (
-    <Anchor key={c.id} href={`/c/${c.name}`} w="full">
-      <Button bgColor={c.name === selected ? "blackAlpha.200" : ""} w="full">
-        {c.name}
+function CategoryListItem(props: Category) {
+  const pathname = usePathname();
+
+  const href = `/c/${props.name}`;
+  const selected = href === pathname;
+
+  return (
+    <Anchor href={href} w="full">
+      <Button bgColor={selected ? "blackAlpha.200" : ""} w="full">
+        {props.name}
       </Button>
     </Anchor>
-  ));
-
-type Props = { category?: string };
+  );
+}
 
-export function CategoryList({ category }: Props) {
+export function CategoryList() {
   const { data } = useCategoryList();
   if (!data) return <Unready />;
 
@@ -36,7 +40,9 @@ export function CategoryList({ category }: Props) {
       alignItems="start"
       overflowY="scroll"
     >
-      {mapCategories(category)(data.categories)}
+      {data.categories.map((c) => (
+        <CategoryListItem key={c.id} {...c} />
+      ))}
     </Flex>
   );
 }

web/src/components/site/Navigation/Navpill/components/Menu.tsx

@@ -1,12 +1,8 @@
 import { Flex, VStack } from "@chakra-ui/react";
 
-import { useNavigation } from "src/components/site/Navigation/useNavigation";
-
 import { CategoryList } from "./CategoryList";
 
 export function Menu() {
-  const { category } = useNavigation();
-
   return (
     <VStack width="full" p={2}>
       <Flex
@@ -19,7 +15,7 @@ export function Menu() {
         pointerEvents="auto"
         gap={2}
       >
-        <CategoryList category={category} />
+        <CategoryList />
       </Flex>
     </VStack>
   );

web/src/components/site/Navigation/useNavigation.ts

@@ -1,32 +1,20 @@
 "use client";
 
-import { useSearchParams } from "next/navigation";
-import { z } from "zod";
-
 import { useGetInfo } from "src/api/openapi/misc";
 import { useSession } from "src/auth";
 
-export const QuerySchema = z.object({
-  category: z.string().optional(),
-});
-export type Query = z.infer<typeof QuerySchema>;
-
 // NOTE: Everything that involves data fetching here has a suitable fallback.
 // Most of the time, components will render <Unready /> but this is the data for
 // the navigation so it's a bit more important that we show something always.
 
 export function useNavigation() {
-  const query = useSearchParams();
   const { data: infoResult } = useGetInfo();
   const session = useSession();
 
-  const { category } = QuerySchema.parse(query);
-
   const title = infoResult?.title ?? "Storyden";
 
   return {
     isAdmin: session?.admin ?? false,
     title,
-    category,
   };
 }