feat(web): persist list-page filters in URL search params

Resources, projects, and allocations filter state now syncs to/from
URL so filters survive refresh and can be shared via link.
Text inputs are debounced (300ms) to avoid URL churn.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/src/app/(app)/projects/ProjectsClient.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { useUrlFilters } from "~/hooks/useUrlFilters.js";
+import { useDebounce } from "~/hooks/useDebounce.js";
 import { createPortal } from "react-dom";
 import { formatDate, formatMoney } from "~/lib/format.js";
 import type { Project, ColumnDef } from "@capakraken/shared";
@@ -177,9 +179,28 @@ interface ProjectRow {
 // ─── Main component ───────────────────────────────────────────────────────────
 
 export function ProjectsClient() {
-  const [search, setSearch] = useState("");
-  const [statusFilter, setStatusFilter] = useState<string>("");
-  const [orderTypeFilter, setOrderTypeFilter] = useState<string>("");
+  const [filters, setFilters] = useUrlFilters({ search: "", status: "", orderType: "" });
+  const { status: statusFilter, orderType: orderTypeFilter } = filters;
+
+  // Debounced local state for the search text input
+  const [searchInput, setSearchInput] = useState(filters.search);
+  const debouncedSearch = useDebounce(searchInput, 300);
+  const search = filters.search;
+
+  // Flush debounced input to URL
+  useEffect(() => {
+    setFilters({ search: debouncedSearch });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedSearch]);
+
+  // Keep local input in sync when URL changes externally (e.g. back/forward)
+  useEffect(() => {
+    setSearchInput(filters.search);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters.search]);
+
+  const setStatusFilter = useCallback((v: string) => setFilters({ status: v }), [setFilters]);
+  const setOrderTypeFilter = useCallback((v: string) => setFilters({ orderType: v }), [setFilters]);
   const [modalOpen, setModalOpen] = useState(false);
   const [wizardOpen, setWizardOpen] = useState(false);
   const [editingProject, setEditingProject] = useState<Project | null>(null);
@@ -346,7 +367,7 @@ export function ProjectsClient() {
   function openNewModal() { setEditingProject(null); setModalOpen(true); }
   function openEditModal(project: Project) { setEditingProject(project); setModalOpen(true); }
   function closeModal() { setModalOpen(false); setEditingProject(null); }
-  function clearAll() { setSearch(""); setStatusFilter(""); setOrderTypeFilter(""); }
+  function clearAll() { setSearchInput(""); setFilters({ search: "", status: "", orderType: "" }); }
 
   const exportSelectedCsv = useCallback(() => {
     const selected = projects.filter((p) => selection.selectedIds.has(p.id));
@@ -368,7 +389,7 @@ export function ProjectsClient() {
   }, [projects, selection.selectedIds]);
 
   const chips = [
-    ...(search ? [{ label: `Search: "${search}"`, onRemove: () => setSearch("") }] : []),
+    ...(search ? [{ label: `Search: "${search}"`, onRemove: () => { setSearchInput(""); setFilters({ search: "" }); } }] : []),
     ...(statusFilter ? [{ label: `Status: ${statusFilter}`, onRemove: () => setStatusFilter("") }] : []),
     ...(orderTypeFilter ? [{ label: `Type: ${orderTypeFilter}`, onRemove: () => setOrderTypeFilter("") }] : []),
   ];
@@ -531,8 +552,8 @@ export function ProjectsClient() {
         <input
           type="search"
           placeholder="Search projects..."
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
+          value={searchInput}
+          onChange={(e) => setSearchInput(e.target.value)}
           className="app-input max-w-xs"
         />
         <select

apps/web/src/app/(app)/resources/ResourcesClient.tsx

@@ -2,6 +2,8 @@
 
 import { createPortal } from "react-dom";
 import { useState, useEffect, useCallback, useMemo, useRef, type ReactNode } from "react";
+import { useUrlFilters } from "~/hooks/useUrlFilters.js";
+import { useDebounce } from "~/hooks/useDebounce.js";
 import Link from "next/link";
 import type { Resource, SkillEntry } from "@capakraken/shared";
 import { RESOURCE_COLUMNS } from "@capakraken/shared";
@@ -147,9 +149,48 @@ function BooleanBadge({ value }: { value: boolean }) {
 }
 
 export function ResourcesClient() {
-  const [search, setSearch] = useState("");
-  const [chapterFilter, setChapterFilter] = useState<string[]>([]);
-  const [isActiveFilter, setIsActiveFilter] = useState<ActiveFilter>("active");
+  const [resourceUrlFilters, setResourceUrlFilters] = useUrlFilters({
+    search: "",
+    activeFilter: "active" as string,
+    rolledOff: DEFAULT_BOOLEAN_FILTER as string,
+    departed: DEFAULT_BOOLEAN_FILTER as string,
+    chapters: "",
+  });
+
+  // Debounced local state for search text input
+  const [searchInput, setSearchInput] = useState(resourceUrlFilters.search);
+  const debouncedSearch = useDebounce(searchInput, 300);
+  const search = resourceUrlFilters.search;
+  const isActiveFilter = resourceUrlFilters.activeFilter as ActiveFilter;
+  const rolledOffFilter = resourceUrlFilters.rolledOff as BooleanFilter;
+  const departedFilter = resourceUrlFilters.departed as BooleanFilter;
+  // chapters stored as comma-separated string; empty string means "all chapters visible"
+  const chaptersParam = resourceUrlFilters.chapters;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const chapterFilter: string[] = useMemo(
+    () => (chaptersParam ? chaptersParam.split(",").filter(Boolean) : []),
+    [chaptersParam],
+  );
+
+  // Flush debounced search input to URL
+  useEffect(() => {
+    setResourceUrlFilters({ search: debouncedSearch });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedSearch]);
+
+  // Keep local search input in sync when URL changes externally
+  useEffect(() => {
+    setSearchInput(resourceUrlFilters.search);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resourceUrlFilters.search]);
+
+  const setIsActiveFilter = useCallback((v: ActiveFilter) => setResourceUrlFilters({ activeFilter: v }), [setResourceUrlFilters]);
+  const setRolledOffFilter = useCallback((v: BooleanFilter) => setResourceUrlFilters({ rolledOff: v }), [setResourceUrlFilters]);
+  const setDepartedFilter = useCallback((v: BooleanFilter) => setResourceUrlFilters({ departed: v }), [setResourceUrlFilters]);
+  const setChapterFilter = useCallback((v: string[]) => {
+    setResourceUrlFilters({ chapters: v.join(",") });
+  }, [setResourceUrlFilters]);
+
   const [includeProposedChargeability, setIncludeProposedChargeability] = useState(false);
   const [hiddenCountryIds, setHiddenCountryIds] = useState<string[]>([]);
   const [includeWithoutCountry, setIncludeWithoutCountry] = useState(true);
@@ -157,8 +198,6 @@ export function ResourcesClient() {
     ...DEFAULT_HIDDEN_RESOURCE_TYPES,
   ]);
   const [includeWithoutResourceType, setIncludeWithoutResourceType] = useState(true);
-  const [rolledOffFilter, setRolledOffFilter] = useState<BooleanFilter>(DEFAULT_BOOLEAN_FILTER);
-  const [departedFilter, setDepartedFilter] = useState<BooleanFilter>(DEFAULT_BOOLEAN_FILTER);
   const [modal, setModal] = useState<ModalState>({ type: "closed" });
   const [confirm, setConfirm] = useState<ConfirmState>({ type: "closed" });
   const [successToast, setSuccessToast] = useState<string | null>(null);
@@ -372,15 +411,12 @@ export function ResourcesClient() {
   }
 
   function clearAll() {
-    setSearch("");
-    setChapterFilter([]);
-    setIsActiveFilter("active");
+    setSearchInput("");
+    setResourceUrlFilters({ search: "", activeFilter: "active", rolledOff: DEFAULT_BOOLEAN_FILTER, departed: DEFAULT_BOOLEAN_FILTER, chapters: "" });
     setHiddenCountryIds([]);
     setIncludeWithoutCountry(true);
     setHiddenResourceTypes([...DEFAULT_HIDDEN_RESOURCE_TYPES]);
     setIncludeWithoutResourceType(true);
-    setRolledOffFilter(DEFAULT_BOOLEAN_FILTER);
-    setDepartedFilter(DEFAULT_BOOLEAN_FILTER);
     clearCustomFilters();
   }
 
@@ -425,18 +461,17 @@ export function ResourcesClient() {
 
   const toggleChapter = useCallback(
     (chapter: string) => {
-      setChapterFilter((current) => {
-        const currentSelection = current.length === 0 ? [...chapters] : current;
-        const next = currentSelection.includes(chapter)
-          ? currentSelection.filter((value) => value !== chapter)
-          : [...currentSelection, chapter];
-        if (next.length === chapters.length) {
-          return [];
-        }
-        return next.sort((left, right) => chapters.indexOf(left) - chapters.indexOf(right));
-      });
+      const currentSelection = chapterFilter.length === 0 ? [...chapters] : chapterFilter;
+      const next = currentSelection.includes(chapter)
+        ? currentSelection.filter((value) => value !== chapter)
+        : [...currentSelection, chapter];
+      if (next.length === chapters.length) {
+        setChapterFilter([]);
+      } else {
+        setChapterFilter(next.sort((left, right) => chapters.indexOf(left) - chapters.indexOf(right)));
+      }
     },
-    [chapters],
+    [chapters, chapterFilter, setChapterFilter],
   );
 
   const visibleCountryCount = countries.length - hiddenCountryIds.length;
@@ -504,7 +539,7 @@ export function ResourcesClient() {
   }, [displayedResources, selection.selectedIds]);
 
   const chips = [
-    ...(search ? [{ label: `Search: "${search}"`, onRemove: () => setSearch("") }] : []),
+    ...(search ? [{ label: `Search: "${search}"`, onRemove: () => { setSearchInput(""); setResourceUrlFilters({ search: "" }); } }] : []),
     ...(chapterFilter.length > 0
       ? [
           {
@@ -625,8 +660,8 @@ export function ResourcesClient() {
           <input
             type="search"
             placeholder="Search by name, EID, email..."
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
             className="app-input max-w-xs"
           />
           <InfoTooltip