v3: consistent tabs url across app, maxy small fixes

src/components/FeedTabBar.tsx

@@ -1,16 +1,12 @@
-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 { type FeedTab, FEED_TABS } from "../config/feedTabs.ts";
+import { useTabParam } from "../hooks/useTabParam.ts";
 import { TabBar } from "./TabBar.tsx";
 
 export function FeedTabBar() {
-  const location = useLocation();
-  const navigate = useNavigate();
   const { user } = useAuth();
-
-  const rawTab = new URLSearchParams(location.search).get("tab") ?? "hot";
-  const tab: FeedTab = VALID_TABS.has(rawTab) ? (rawTab as FeedTab) : "hot";
+  const [tab, setTab] = useTabParam<FeedTab>(FEED_TABS, "hot");
 
   const tabs = [
     { key: "hot" as FeedTab, label: <Trans>Hot</Trans> },
@@ -25,7 +21,7 @@ export function FeedTabBar() {
     <TabBar
       tabs={tabs}
       activeTab={tab}
-      onChange={(t) => navigate(`/?tab=${t}`, { replace: true })}
+      onChange={setTab}
     />
   );
 }