v3: added site-wide categories, added admin category management, various visual fixes

src/components/FeedTabBar.tsx

@@ -1,17 +1,30 @@
+import { useNavigate, useParams } from "react-router";
 import { Trans } from "@lingui/react/macro";
 import { useAuth } from "../hooks/useAuth.ts";
 import { FEED_TABS, type FeedTab } from "../config/feedTabs.ts";
-import { useTabParam } from "../hooks/useTabParam.ts";
 import { useDefaultFeedTab } from "../hooks/useDefaultFeedTab.ts";
 import { TabBar } from "./TabBar.tsx";
+import { CategorySwitcher } from "./CategorySwitcher.tsx";
 
+/**
+ * Feed sort tabs (hot/new/journal/followed). Navigation stays within the
+ * current scope: `~` for all categories, or the active category slug — so the
+ * tabs link to `/~/new`, `/music/new`, etc.
+ */
 export function FeedTabBar() {
   const { user } = useAuth();
+  const navigate = useNavigate();
+  const { categorySlug, feedTab } = useParams();
+
   const [preferredTab] = useDefaultFeedTab();
   const defaultTab: FeedTab = preferredTab === "followed" && !user
     ? "hot"
     : preferredTab;
-  const [tab, setTab] = useTabParam<FeedTab>(FEED_TABS, defaultTab);
+  const active: FeedTab = (FEED_TABS as readonly string[]).includes(feedTab ?? "")
+    ? (feedTab as FeedTab)
+    : defaultTab;
+
+  const scope = categorySlug ?? "~";
 
   const tabs = [
     { key: "hot" as FeedTab, label: <Trans>Hot</Trans> },
@@ -25,8 +38,9 @@ export function FeedTabBar() {
   return (
     <TabBar
       tabs={tabs}
-      activeTab={tab}
-      onChange={setTab}
+      activeTab={active}
+      onChange={(t) => navigate(`/${scope}/${t}`)}
+      leading={<CategorySwitcher />}
     />
   );
 }