v3: lots of small UI tweaks and fixes

src/pages/Search.tsx

@@ -3,7 +3,7 @@ import { Link, useSearchParams } from "react-router";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { AppHeader } from "../components/AppHeader.tsx";
-import { SearchBar } from "../components/SearchBar.tsx";
+import { TabBar } from "../components/TabBar.tsx";
 import { DumpCard } from "../components/DumpCard.tsx";
 import { PlaylistCard } from "../components/PlaylistCard.tsx";
 import { ErrorCard } from "../components/ErrorCard.tsx";
@@ -178,28 +178,26 @@ export function Search() {
 
   return (
     <div className="page-shell">
-      <AppHeader centerSlot={<SearchBar />} />
+      <AppHeader />
       <main className="search-page">
         {q && (
-          <div className="search-tabs">
-            {(["dumps", "users", "playlists"] as Tab[]).map((tabKey) => (
-              <button
-                key={tabKey}
-                type="button"
-                className={`feed-sort-btn${tab === tabKey ? " active" : ""}`}
-                onClick={() => setTab(tabKey)}
-              >
-                {tabLabel(
-                  tabKey,
-                  tabKey === "dumps"
-                    ? dumpCount
-                    : tabKey === "users"
-                    ? userCount
-                    : playlistCount,
-                )}
-              </button>
-            ))}
-          </div>
+          <TabBar
+            tabs={(["dumps", "users", "playlists"] as Tab[]).map((key) => ({
+              key,
+              label: tabLabel(
+                key,
+                key === "dumps"
+                  ? dumpCount
+                  : key === "users"
+                  ? userCount
+                  : playlistCount,
+              ),
+            }))}
+            activeTab={tab}
+            onChange={setTab}
+            className="search-tabs"
+            innerClassName="search-tabs-inner"
+          />
         )}
 
         {state.status === "idle" && (