Filter functionality

frontend/src/components/Header/Header.tsx

@@ -1,22 +1,64 @@
+import { useState } from "react";
+import type { FormEvent } from "react";
 import { Button, Form, InputGroup } from "react-bootstrap";
 import { Search } from "react-bootstrap-icons";
-import { Link } from "react-router-dom";
+import {
+  Link,
+  useLocation,
+  useNavigate,
+  useSearchParams,
+} from "react-router-dom";
+import { GRID_QUERY_STORAGE_KEY } from "../../constants/storageKeys";
 import styles from "./Header.module.css";
 
 export default function Header() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const committedSearch = searchParams.get("search") ?? "";
+  const [value, setValue] = useState(committedSearch);
+
+  // From other pages, fall back to the grid's last persisted query.
+  const homeQuery =
+    location.pathname === "/"
+      ? searchParams.toString()
+      : sessionStorage.getItem(GRID_QUERY_STORAGE_KEY) ?? "";
+  const homeHref = homeQuery ? `/?${homeQuery}` : "/";
+
+  // Adjusted during render, not an effect, so in-progress typing isn't clobbered.
+  const [prevCommittedSearch, setPrevCommittedSearch] = useState(committedSearch);
+  if (committedSearch !== prevCommittedSearch) {
+    setPrevCommittedSearch(committedSearch);
+    setValue(committedSearch);
+  }
+
+  function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    const params = new URLSearchParams(searchParams);
+    const trimmed = value.trim();
+    if (trimmed) {
+      params.set("search", trimmed);
+    } else {
+      params.delete("search");
+    }
+    navigate(`/?${params.toString()}`);
+  }
+
   return (
     <header className={styles.header}>
-      <Link className={styles.brand} to="/">
+      <Link className={styles.brand} to={homeHref}>
         Working Title
       </Link>
 
-      <Form className={styles.search}>
+      <Form className={styles.search} role="search" onSubmit={handleSubmit}>
         <InputGroup>
           <Form.Control
             placeholder="Search games..."
             aria-label="Search games"
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
           />
-          <Button variant="light" type="submit">
+          <Button variant="light" type="submit" aria-label="Search">
             <Search />
           </Button>
         </InputGroup>

frontend/src/components/Toolbar/Toolbar.module.css

@@ -1,12 +1,25 @@
 .toolbar {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
   height: var(--toolbar-height);
   padding: 0 1.5rem;
   background-color: #fff;
   border-bottom: 1px solid var(--color-border);
   color: var(--color-muted);
+  position: relative;
+}
+
+.menu {
+  position: relative;
+}
+
+.toolbar > .menu:first-child {
+  justify-self: start;
+}
+
+.toolbar > .menu:last-child {
+  justify-self: end;
 }
 
 .action {
@@ -20,9 +33,17 @@
   cursor: pointer;
 }
 
+.badge {
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: 50%;
+  background-color: var(--color-brand);
+}
+
 .pagination {
   display: inline-flex;
   align-items: center;
+  justify-self: center;
   gap: 0.75rem;
 }
 
@@ -46,3 +67,206 @@
   align-items: center;
   gap: 1rem;
 }
+
+.sortText {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.panel {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  z-index: 10;
+  background-color: #fff;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  color: var(--color-text);
+  font-size: 0.9rem;
+}
+
+.sort .panel {
+  right: 0;
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+  font-weight: 700;
+}
+
+.iconButton {
+  display: inline-flex;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.panelColumns {
+  display: flex;
+  gap: 1.5rem;
+  padding: 1rem;
+}
+
+.panelGroup {
+  border: none;
+  margin: 0;
+  padding: 0;
+  min-width: 180px;
+}
+
+.panelGroup legend {
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  padding: 0;
+}
+
+.checkList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-height: 220px;
+  overflow-y: auto;
+  padding-right: 0.5rem;
+}
+
+.checkOption {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.panelRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 0 1rem 1rem;
+  border-top: 1px solid var(--color-border);
+  padding-top: 1rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  font-weight: 700;
+  font-size: 0.85rem;
+}
+
+.field select,
+.field input[type="number"] {
+  font: inherit;
+  padding: 0.3rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  width: 110px;
+}
+
+.panelActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.primaryButton,
+.secondaryButton {
+  font: inherit;
+  font-weight: 700;
+  padding: 0.4rem 1rem;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.primaryButton {
+  border: none;
+  background-color: var(--color-brand);
+  color: #fff;
+}
+
+.secondaryButton {
+  border: 1px solid var(--color-border);
+  background: none;
+  color: inherit;
+}
+
+.menuItem {
+  display: block;
+  width: 100%;
+  text-align: left;
+  white-space: nowrap;
+  border: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.menuItem:hover,
+.menuItem:focus-visible {
+  background-color: var(--color-stripe-even);
+}
+
+.menuItem[aria-checked="true"] {
+  font-weight: 700;
+  color: var(--color-brand);
+}
+
+@media (max-width: 600px) {
+  .toolbar {
+    padding: 0 0.75rem;
+  }
+
+  .sortText {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+    line-height: 1.15;
+  }
+
+  .sortPrefix {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    opacity: 0.75;
+  }
+
+  .panel {
+    width: min(280px, calc(100vw - 2rem));
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+
+  .panelColumns {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .panelGroup {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .checkList {
+    max-height: 160px;
+  }
+
+  .panelRow {
+    flex-direction: column;
+  }
+
+  .field,
+  .field select,
+  .field input[type="number"] {
+    width: 100%;
+  }
+}