v3: search engine, responsive header with compact user menu

src/components/FeedTabBar.tsx

@@ -0,0 +1,53 @@
+import { useLocation, useNavigate } from "react-router";
+import { useAuth } from "../hooks/useAuth.ts";
+
+export type FeedTab = "hot" | "new" | "journal" | "followed";
+export const VALID_TABS = new Set<string>(["hot", "new", "journal", "followed"]);
+
+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";
+
+  function setTab(t: FeedTab) {
+    navigate(`/?tab=${t}`, { replace: true });
+  }
+
+  return (
+    <div className="feed-sort">
+      <button
+        type="button"
+        className={`feed-sort-btn${tab === "hot" ? " active" : ""}`}
+        onClick={() => setTab("hot")}
+      >
+        Hot
+      </button>
+      <button
+        type="button"
+        className={`feed-sort-btn${tab === "new" ? " active" : ""}`}
+        onClick={() => setTab("new")}
+      >
+        New
+      </button>
+      <button
+        type="button"
+        className={`feed-sort-btn${tab === "journal" ? " active" : ""}`}
+        onClick={() => setTab("journal")}
+      >
+        Journal
+      </button>
+      {user && (
+        <button
+          type="button"
+          className={`feed-sort-btn${tab === "followed" ? " active" : ""}`}
+          onClick={() => setTab("followed")}
+        >
+          Followed
+        </button>
+      )}
+    </div>
+  );
+}