v3: lots of small UI tweaks and fixes

src/components/AppHeader.tsx

@@ -1,11 +1,12 @@
 import { lazy, type ReactNode, Suspense, useState } from "react";
-import { Link, useNavigate } from "react-router";
+import { Link, useLocation, useNavigate } from "react-router";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useWS } from "../hooks/useWS.ts";
 import { NotificationBell } from "./NotificationBell.tsx";
 import { UserMenu } from "./UserMenu.tsx";
+import { SearchBar } from "./SearchBar.tsx";
 
 const DumpCreateModal = lazy(() =>
   import("./DumpCreateModal.tsx").then((m) => ({ default: m.DumpCreateModal }))
@@ -21,21 +22,51 @@ export function AppHeader(
   const { user } = useAuth();
   const { wsStatus, wsErrorMessage } = useWS();
   const navigate = useNavigate();
+  const location = useLocation();
+  const isSearchPage = location.pathname === "/search";
+  const [searchExpanded, setSearchExpanded] = useState(isSearchPage);
   const [createModalOpen, setCreateModalOpen] = useState(!!initialDumpUrl);
 
+  function handleSearchToggle() {
+    if (searchExpanded) {
+      if (isSearchPage) {
+        navigate(-1);
+      } else {
+        setSearchExpanded(false);
+      }
+    } else {
+      setSearchExpanded(true);
+    }
+  }
+
   return (
     <>
-      <header
-        className={`app-header${centerSlot ? " app-header--has-center" : ""}`}
-      >
+      <header className="app-header app-header--has-center">
         <Link to="/?tab=hot" className="app-header-brand">
-          🚚<span className="app-header-brand-name">{" "}{document.querySelector<HTMLMetaElement>('meta[name="site-name"]')
-            ?.content ?? "gerbeur"}</span>
+          🚚<span className="app-header-brand-name">
+            {" "}
+            {document.querySelector<HTMLMetaElement>('meta[name="site-name"]')
+              ?.content ?? "gerbeur"}
+          </span>
         </Link>
 
-        {centerSlot && <div className="app-header-center">{centerSlot}</div>}
+        <div className="app-header-center">
+          {centerSlot}
+          <SearchBar
+            expanded={searchExpanded}
+            onExpandedChange={setSearchExpanded}
+          />
+        </div>
 
         <nav className="app-header-nav">
+          <button
+            type="button"
+            className="nav-search-btn"
+            aria-label={searchExpanded ? t`Cancel search` : t`Search`}
+            onClick={handleSearchToggle}
+          >
+            {searchExpanded ? "✕" : "🔍"}
+          </button>
           {user
             ? (
               <>
@@ -68,7 +99,9 @@ export function AppHeader(
                   disabled={disableNew}
                   title={disableNew ? t`Server unreachable` : undefined}
                 >
-                  +<span className="btn-new-label"><Trans> Dump</Trans></span>
+                  +<span className="btn-new-label">
+                    <Trans>Dump</Trans>
+                  </span>
                 </button>
               </>
             )
@@ -82,6 +115,15 @@ export function AppHeader(
         </nav>
       </header>
 
+      {searchExpanded && (
+        <div className="header-search-below">
+          <SearchBar
+            expanded={searchExpanded}
+            onExpandedChange={setSearchExpanded}
+          />
+        </div>
+      )}
+
       {wsStatus === "disconnected" && wsErrorMessage && (
         <div className="app-header-status" role="alert">
           <strong>