v3: consistent tabs url across app, maxy small fixes

src/pages/Search.tsx

@@ -10,6 +10,7 @@ import { ErrorCard } from "../components/ErrorCard.tsx";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useWS } from "../hooks/useWS.ts";
 import { useInfiniteScroll } from "../hooks/useInfiniteScroll.ts";
+import { useTabParam } from "../hooks/useTabParam.ts";
 import {
   deserializeDump,
   deserializePlaylist,
@@ -23,7 +24,8 @@ import {
 } from "../model.ts";
 import { DEFAULT_PAGE_SIZE, SEARCH_URL } from "../config/api.ts";
 
-type Tab = "dumps" | "users" | "playlists";
+const SEARCH_TABS = ["dumps", "users", "playlists"] as const;
+type Tab = (typeof SEARCH_TABS)[number];
 
 type SearchState =
   | { status: "idle" }
@@ -44,9 +46,9 @@ type SearchState =
   };
 
 export function Search() {
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
   const q = searchParams.get("q") ?? "";
-  const tab = (searchParams.get("tab") ?? "dumps") as Tab;
+  const [tab, setTab] = useTabParam<Tab>(SEARCH_TABS, "dumps");
 
   const { token, user } = useAuth();
   const { voteCounts, myVotes, castVote, removeVote } = useWS();
@@ -159,14 +161,6 @@ export function Search() {
       !state.dumps.loadingMore,
   );
 
-  function setTab(tab: Tab) {
-    setSearchParams((prev) => {
-      const next = new URLSearchParams(prev);
-      next.set("tab", tab);
-      return next;
-    }, { replace: true });
-  }
-
   const dumpCount = state.status === "loaded" ? state.dumps.total : null;
   const userCount = state.status === "loaded" ? state.users.length : null;
   const playlistCount = state.status === "loaded"
@@ -188,7 +182,7 @@ export function Search() {
       <main className="search-page">
         {q && (
           <TabBar
-            tabs={(["dumps", "users", "playlists"] as Tab[]).map((key) => ({
+            tabs={SEARCH_TABS.map((key) => ({
               key,
               label: tabLabel(
                 key,