v3: consistent tabs url across app, maxy small fixes

src/components/AppHeader.tsx

@@ -42,7 +42,7 @@ export function AppHeader(
   return (
     <>
       <header className="app-header app-header--has-center">
-        <Link to="/?tab=hot" className="app-header-brand">
+        <Link to="/" className="app-header-brand">
           🚚<span className="app-header-brand-name">
             {" "}
             {document.querySelector<HTMLMetaElement>('meta[name="site-name"]')

src/components/ChangePasswordModal.tsx

@@ -24,7 +24,7 @@ export function ChangePasswordModal({ onClose }: ChangePasswordModalProps) {
   const tooShort = newPassword.length > 0 &&
     newPassword.length < VALIDATION.PASSWORD_MIN;
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.SubmitEvent) => {
     e.preventDefault();
     if (mismatch || tooShort || !currentPassword || !newPassword) return;
 

src/components/DumpCreateModal.tsx

@@ -188,7 +188,7 @@ export function DumpCreateModal(
     return () => globalThis.removeEventListener("paste", handler);
   }, []);
 
-  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.SubmitEvent) => {
     e.preventDefault();
     if (comment.length > VALIDATION.DUMP_COMMENT_MAX) return;
     setSubmitState({ status: "submitting" });

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}
     />
   );
 }

src/components/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { type FormEvent, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 import { t } from "@lingui/core/macro";
 
@@ -41,11 +41,11 @@ export function SearchBar(
     }
   }
 
-  function handleSubmit(e: FormEvent) {
+  function handleSubmit(e: React.SubmitEvent) {
     e.preventDefault();
     const q = value.trim();
     if (!q) return;
-    navigate(`/search?q=${encodeURIComponent(q)}&tab=dumps`);
+    navigate(`/search?q=${encodeURIComponent(q)}`);
     if (collapsible || isControlled) {
       setExpanded(false);
       setValue("");