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>

src/components/DumpCard.tsx

@@ -106,7 +106,6 @@ export function DumpCard(
             )}
           </div>
         </div>
-
       </div>
     </li>
   );

src/components/FeedTabBar.tsx

@@ -2,6 +2,7 @@ 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 { TabBar } from "./TabBar.tsx";
 
 export function FeedTabBar() {
   const location = useLocation();
@@ -11,44 +12,20 @@ export function FeedTabBar() {
   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 });
-  }
+  const tabs = [
+    { key: "hot" as FeedTab, label: <Trans>Hot</Trans> },
+    { key: "new" as FeedTab, label: <Trans>New</Trans> },
+    { key: "journal" as FeedTab, label: <Trans>Journal</Trans> },
+    ...(user
+      ? [{ key: "followed" as FeedTab, label: <Trans>Followed</Trans> }]
+      : []),
+  ];
 
   return (
-    <div className="feed-sort-scroller">
-    <div className="feed-sort">
-      <button
-        type="button"
-        className={`feed-sort-btn${tab === "hot" ? " active" : ""}`}
-        onClick={() => setTab("hot")}
-      >
-        <Trans>Hot</Trans>
-      </button>
-      <button
-        type="button"
-        className={`feed-sort-btn${tab === "new" ? " active" : ""}`}
-        onClick={() => setTab("new")}
-      >
-        <Trans>New</Trans>
-      </button>
-      <button
-        type="button"
-        className={`feed-sort-btn${tab === "journal" ? " active" : ""}`}
-        onClick={() => setTab("journal")}
-      >
-        <Trans>Journal</Trans>
-      </button>
-      {user && (
-        <button
-          type="button"
-          className={`feed-sort-btn${tab === "followed" ? " active" : ""}`}
-          onClick={() => setTab("followed")}
-        >
-          <Trans>Followed</Trans>
-        </button>
-      )}
-    </div>
-    </div>
+    <TabBar
+      tabs={tabs}
+      activeTab={tab}
+      onChange={(t) => navigate(`/?tab=${t}`, { replace: true })}
+    />
   );
 }

src/components/JournalCard.tsx

@@ -1,5 +1,6 @@
 import { useContext } from "react";
 import { Link, useNavigate } from "react-router";
+import { Plural, Trans } from "@lingui/react/macro";
 import type { Dump } from "../model.ts";
 import { API_URL } from "../config/api.ts";
 import { relativeTime } from "../utils/relativeTime.ts";
@@ -73,12 +74,18 @@ export function JournalCard(
         </time>
       </Tooltip>
       {dump.commentCount > 0 && (
-        <span>
-          {dump.commentCount} {dump.commentCount === 1 ? "comment" : "comments"}
+        <span className="dump-card-comment-count">
+          <Plural
+            value={dump.commentCount}
+            one="# comment"
+            other="# comments"
+          />
         </span>
       )}
       {dump.isPrivate && isOwner && (
-        <span className="dump-card-private-badge">private</span>
+        <span className="dump-card-private-badge">
+          <Trans>private</Trans>
+        </span>
       )}
     </div>
   );

src/components/NewPlaylistForm.tsx

@@ -27,7 +27,13 @@ export function NewPlaylistForm(
         className={toggleClassName}
         onClick={() => setOpen(true)}
       >
-        {toggleLabel ?? <>+<span className="btn-new-label"><Trans> New playlist</Trans></span></>}
+        {toggleLabel ?? (
+          <>
+            +<span className="btn-new-label">
+              <Trans>New playlist</Trans>
+            </span>
+          </>
+        )}
       </button>
 
       {open && (

src/components/PageShell.tsx

@@ -1,6 +1,5 @@
 import { type ReactNode } from "react";
 import { AppHeader } from "./AppHeader.tsx";
-import { SearchBar } from "./SearchBar.tsx";
 
 interface PageShellProps {
   children: ReactNode;
@@ -14,7 +13,7 @@ export function PageShell(
 ) {
   return (
     <div className="page-shell">
-      <AppHeader centerSlot={centerSlot ?? <SearchBar />} />
+      <AppHeader centerSlot={centerSlot} />
       <main
         className={`page-content${centered ? " page-content--centered" : ""}`}
       >

src/components/SearchBar.tsx

@@ -4,22 +4,35 @@ import { t } from "@lingui/core/macro";
 
 interface SearchBarProps {
   collapsible?: boolean;
+  expanded?: boolean;
+  onExpandedChange?: (v: boolean) => void;
 }
 
-export function SearchBar({ collapsible = false }: SearchBarProps) {
-  const [value, setValue] = useState(
-    () => new URLSearchParams(location.search).get("q") ?? "",
-  );
-  const [expanded, setExpanded] = useState(!collapsible);
+export function SearchBar(
+  { collapsible = false, expanded: expandedProp, onExpandedChange }:
+    SearchBarProps,
+) {
+  const isControlled = expandedProp !== undefined;
+  const [expandedState, setExpandedState] = useState(!collapsible);
+  const expanded = isControlled ? expandedProp! : expandedState;
   const inputRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
 
+  const [value, setValue] = useState(
+    () => new URLSearchParams(location.search).get("q") ?? "",
+  );
+
+  function setExpanded(v: boolean) {
+    if (!isControlled) setExpandedState(v);
+    onExpandedChange?.(v);
+  }
+
   useEffect(() => {
-    if (collapsible && expanded) inputRef.current?.focus();
-  }, [expanded, collapsible]);
+    if ((collapsible || isControlled) && expanded) inputRef.current?.focus();
+  }, [expanded, collapsible, isControlled]);
 
   function handleIconClick() {
-    if (!collapsible) return;
+    if (!collapsible && !isControlled) return;
     if (expanded) {
       setExpanded(false);
       setValue("");
@@ -33,14 +46,14 @@ export function SearchBar({ collapsible = false }: SearchBarProps) {
     const q = value.trim();
     if (!q) return;
     navigate(`/search?q=${encodeURIComponent(q)}&tab=dumps`);
-    if (collapsible) {
+    if (collapsible || isControlled) {
       setExpanded(false);
       setValue("");
     }
   }
 
   function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === "Escape" && collapsible) {
+    if (e.key === "Escape" && (collapsible || isControlled)) {
       setExpanded(false);
       setValue("");
     }
@@ -48,9 +61,9 @@ export function SearchBar({ collapsible = false }: SearchBarProps) {
 
   return (
     <form
-      className={`search-bar${collapsible ? " search-bar--collapsible" : ""}${
-        expanded ? " search-bar--expanded" : ""
-      }`}
+      className={`search-bar${
+        collapsible || isControlled ? " search-bar--collapsible" : ""
+      }${expanded ? " search-bar--expanded" : ""}`}
       onSubmit={handleSubmit}
       role="search"
     >
@@ -66,10 +79,12 @@ export function SearchBar({ collapsible = false }: SearchBarProps) {
         tabIndex={expanded ? 0 : -1}
       />
       <button
-        type={expanded && !collapsible ? "submit" : "button"}
+        type={expanded ? "submit" : "button"}
         className="search-bar-btn"
         aria-label={expanded ? t`Submit search` : t`Open search`}
-        onClick={collapsible ? handleIconClick : undefined}
+        onClick={!expanded && (collapsible || isControlled)
+          ? handleIconClick
+          : undefined}
       >
         🔍
       </button>

src/components/TabBar.tsx

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+
+interface Tab<T extends string> {
+  key: T;
+  label: ReactNode;
+}
+
+interface TabBarProps<T extends string> {
+  tabs: Tab<T>[];
+  activeTab: T;
+  onChange: (key: T) => void;
+  className?: string;
+  innerClassName?: string;
+}
+
+export function TabBar<T extends string>(
+  { tabs, activeTab, onChange, className, innerClassName }: TabBarProps<T>,
+) {
+  return (
+    <div className={`feed-sort-scroller${className ? ` ${className}` : ""}`}>
+      <div className={`feed-sort${innerClassName ? ` ${innerClassName}` : ""}`}>
+        {tabs.map(({ key, label }) => (
+          <button
+            key={key}
+            type="button"
+            className={`feed-sort-btn${activeTab === key ? " active" : ""}`}
+            onClick={() => onChange(key)}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}