frontend: search, filters and load-more on Incidents; open Archive to viewers

Incidents page: text search (title, location, summary, units, vehicles,
tags, location mentions), status and type filters, and a Load more button
that pages the Firestore query 100 at a time. Filtering runs over the
loaded window, and the page says so when older incidents exist.

Archive (/calls): readable by every org member, not just admins.
GET /calls/search now takes any Firebase token scoped to the caller's org
— the Firestore rules already let members read every call in their org,
so this widens nothing. Attach/detach stays admin-only (UI and routes).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

drb-frontend/app/incidents/page.tsx

@@ -27,6 +27,23 @@ const SEVERITY_FILTERS: { key: SeverityFilter; label: string }[] = [
 const FILTER_THRESHOLD: Record<SeverityFilter, number> = { all: -1, minor: 1, moderate: 2, major: 3 };
 
 type SortMode = "recent" | "severity";
+type StatusFilter = "any" | "active" | "resolved";
+
+const INCIDENT_TYPES = ["fire", "police", "ems", "accident", "other"];
+
+// Firestore holds the paging; text/type/status filtering runs over the loaded
+// window, so "Load more" also widens what the search can find.
+const PAGE_SIZE = 100;
+
+function matchesSearch(inc: IncidentRecord, needle: string): boolean {
+  if (!needle) return true;
+  const hay = [
+    inc.title, inc.location, inc.summary, inc.type,
+    ...(inc.units ?? []), ...(inc.vehicles ?? []), ...(inc.tags ?? []),
+    ...(inc.location_mentions ?? []),
+  ].filter(Boolean).join(" ").toLowerCase();
+  return hay.includes(needle);
+}
 
 // The Firestore client surfaces a missing composite index or an undeployed
 // ruleset as a raw multi-line string with a console URL in it — not something
@@ -178,11 +195,15 @@ function CreateModal({ onClose, onCreate }: { onClose: () => void; onCreate: (bo
 
 export default function IncidentsPage() {
   const { isAdmin } = useAuth();
-  const { incidents, loading, error } = useIncidents();
+  const [pageLimit, setPageLimit] = useState(PAGE_SIZE);
+  const { incidents, loading, error, hasMore } = useIncidents(pageLimit);
   const activeCalls = useActiveCalls();
   const [showCreate, setShowCreate] = useState(false);
   const [severityFilter, setSeverityFilter] = useState<SeverityFilter>("all");
   const [sortMode, setSortMode] = useState<SortMode>("recent");
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("any");
+  const [typeFilter, setTypeFilter] = useState("");
+  const [search, setSearch] = useState("");
 
   const onAirIncidentIds = useMemo(() => {
     const s = new Set<string>();
@@ -194,12 +215,23 @@ export default function IncidentsPage() {
 
   const filtered = useMemo(() => {
     const threshold = FILTER_THRESHOLD[severityFilter];
-    const list = incidents.filter((i) => severityRank(i.severity) >= threshold);
+    const needle = search.trim().toLowerCase();
+    const list = incidents.filter((i) =>
+      severityRank(i.severity) >= threshold &&
+      (statusFilter === "any" || i.status === statusFilter) &&
+      (!typeFilter || i.type === typeFilter) &&
+      matchesSearch(i, needle)
+    );
     if (sortMode === "severity") {
       return [...list].sort((a, b) => severityRank(b.severity) - severityRank(a.severity) || b.started_at.localeCompare(a.started_at));
     }
     return list; // useIncidents() already orders by started_at desc
-  }, [incidents, severityFilter, sortMode]);
+  }, [incidents, severityFilter, sortMode, statusFilter, typeFilter, search]);
+
+  const filtersActive = severityFilter !== "all" || statusFilter !== "any" || typeFilter !== "" || search.trim() !== "";
+  function clearFilters() {
+    setSeverityFilter("all"); setStatusFilter("any"); setTypeFilter(""); setSearch("");
+  }
 
   const hiddenCount = incidents.length - filtered.length;
   const activeCount = filtered.filter((i) => i.status === "active").length;
@@ -249,7 +281,34 @@ export default function IncidentsPage() {
             </button>
           ))}
         </div>
-        <label className="flex items-center gap-2 text-xs text-ink-muted">
+        <input
+          type="search"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search title, location, units…"
+          className="bg-surface border border-line rounded-lg text-sm text-ink px-3 py-2 w-full sm:w-64 focus:outline-none focus:border-accent"
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <select
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
+          className="bg-surface border border-line rounded-lg px-2 py-1.5 text-sm text-ink-2 focus:outline-none focus:border-accent"
+        >
+          <option value="any">Any status</option>
+          <option value="active">Active</option>
+          <option value="resolved">Resolved</option>
+        </select>
+        <select
+          value={typeFilter}
+          onChange={(e) => setTypeFilter(e.target.value)}
+          className="bg-surface border border-line rounded-lg px-2 py-1.5 text-sm text-ink-2 focus:outline-none focus:border-accent"
+        >
+          <option value="">All types</option>
+          {INCIDENT_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+        </select>
+        <label className="flex items-center gap-2 text-xs text-ink-muted ml-auto">
           Sort
           <select
             value={sortMode}
@@ -270,7 +329,8 @@ export default function IncidentsPage() {
         <>
           {hiddenCount > 0 && (
             <p className="text-xs text-ink-muted">
-              {hiddenCount} incident{hiddenCount !== 1 ? "s" : ""} hidden by the severity filter.
+              {hiddenCount} of {incidents.length} loaded incident{incidents.length !== 1 ? "s" : ""} hidden by filters
+              {hasMore && " — load more to search further back"}.
             </p>
           )}
 
@@ -306,15 +366,23 @@ export default function IncidentsPage() {
               description={
                 incidents.length === 0
                   ? "Incidents appear automatically once calls start correlating."
-                  : "Try a lower severity threshold."
+                  : "Try clearing a filter, or load older incidents."
               }
               action={
-                incidents.length > 0 && severityFilter !== "all" ? (
-                  <Button variant="secondary" size="sm" onClick={() => setSeverityFilter("all")}>Clear filter</Button>
+                incidents.length > 0 && filtersActive ? (
+                  <Button variant="secondary" size="sm" onClick={clearFilters}>Clear filters</Button>
                 ) : undefined
               }
             />
           )}
+
+          {hasMore && (
+            <div className="flex justify-center">
+              <Button variant="secondary" onClick={() => setPageLimit((n) => n + PAGE_SIZE)}>
+                Load more
+              </Button>
+            </div>
+          )}
         </>
       )}