v3: lots of small UI tweaks and fixes

src/components/FeedTabBar.tsx

@@ -2,6 +2,7 @@ import { useLocation, useNavigate } from "react-router";
 import { Trans } from "@lingui/react/macro";
 import { useAuth } from "../hooks/useAuth.ts";
 import { type FeedTab, VALID_TABS } from "../config/feedTabs.ts";
+import { TabBar } from "./TabBar.tsx";
 
 export function FeedTabBar() {
   const location = useLocation();
@@ -11,44 +12,20 @@ export function FeedTabBar() {
   const rawTab = new URLSearchParams(location.search).get("tab") ?? "hot";
   const tab: FeedTab = VALID_TABS.has(rawTab) ? (rawTab as FeedTab) : "hot";
 
-  function setTab(t: FeedTab) {
-    navigate(`/?tab=${t}`, { replace: true });
-  }
+  const tabs = [
+    { key: "hot" as FeedTab, label: <Trans>Hot</Trans> },
+    { key: "new" as FeedTab, label: <Trans>New</Trans> },
+    { key: "journal" as FeedTab, label: <Trans>Journal</Trans> },
+    ...(user
+      ? [{ key: "followed" as FeedTab, label: <Trans>Followed</Trans> }]
+      : []),
+  ];
 
   return (
-    <div className="feed-sort-scroller">
-    <div className="feed-sort">
-      <button
-        type="button"
-        className={`feed-sort-btn${tab === "hot" ? " active" : ""}`}
-        onClick={() => setTab("hot")}
-      >
-        <Trans>Hot</Trans>
-      </button>
-      <button
-        type="button"
-        className={`feed-sort-btn${tab === "new" ? " active" : ""}`}
-        onClick={() => setTab("new")}
-      >
-        <Trans>New</Trans>
-      </button>
-      <button
-        type="button"
-        className={`feed-sort-btn${tab === "journal" ? " active" : ""}`}
-        onClick={() => setTab("journal")}
-      >
-        <Trans>Journal</Trans>
-      </button>
-      {user && (
-        <button
-          type="button"
-          className={`feed-sort-btn${tab === "followed" ? " active" : ""}`}
-          onClick={() => setTab("followed")}
-        >
-          <Trans>Followed</Trans>
-        </button>
-      )}
-    </div>
-    </div>
+    <TabBar
+      tabs={tabs}
+      activeTab={tab}
+      onChange={(t) => navigate(`/?tab=${t}`, { replace: true })}
+    />
   );
 }