feat: add search and filters to the Tracked Domains list (#39)

* feat: add search and filters to the Tracked Domains list

Client-side search + device/country filtering over the tracked-domains set,
handling multi-config domains. Closes #33.

* design: gate tracked-domains filter bar by volume and flatten its chrome

Hide the domain filter bar until there are enough rows to warrant it
(>= 6, or whenever a filter is active so it can't be orphaned), drop the
redundant 'Refine results' sub-header in favor of an inline clear control,
and remove the gradient band so the filter row shares the card surface
with a single divider under the header.

* review: fix failing test, drop dead exports, clear oxlint/knip errors

- Align getDomainListFilterOptions test fixtures with the real LOCATIONS
  map (short labels FR/UK), which the suite asserted as full names — the
  list rows already render short labels, so the dropdown matches them.
- Inline the single-use FilterPanelHeader back into FilterPanel (it was
  extracted to share with the domain filter bar, which no longer uses it).
- Validate the device <select> value instead of an unsafe type assertion,
  matching the config/header select idioms.
- Use toSorted() for location options; memoize allSummaries so dependent
  useMemos have a stable dependency; un-export the internal option type.

---------

Co-authored-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Co-authored-by: Ben Senescu <bensenescu@gmail.com>

src/client/features/rank-tracking/RankTrackingDomainList.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { toast } from "sonner";
@@ -9,6 +9,7 @@ import {
   Globe,
   Plus,
   ChevronRight,
+  Search,
 } from "lucide-react";
 import {
   getRankTrackingConfigSummaries,
@@ -16,11 +17,24 @@ import {
 } from "@/serverFunctions/rank-tracking";
 import { devicesLabel, scheduleLabel } from "@/shared/rank-tracking";
 import { Modal } from "@/client/components/Modal";
+import {
+  applyDomainListFilters,
+  countActiveDomainListFilters,
+  DomainListFilterBar,
+  EMPTY_DOMAIN_LIST_FILTERS,
+  getDomainListFilterOptions,
+  type DomainListFilters,
+} from "./RankTrackingFilters";
 
 type ConfigSummary = Awaited<
   ReturnType<typeof getRankTrackingConfigSummaries>
 >[number];
 
+// Below this many domains the list is short enough to scan by eye, so the
+// filter controls are more chrome than help. Still shown if filters are active
+// (e.g. archiving dropped the count) so they never get orphaned.
+const FILTER_BAR_MIN_DOMAINS = 6;
+
 export function RankTrackingDomainList({
   projectId,
   onAddDomain,
@@ -32,10 +46,23 @@ export function RankTrackingDomainList({
   const [archiveTarget, setArchiveTarget] = useState<ConfigSummary | null>(
     null,
   );
+  const [filters, setFilters] = useState<DomainListFilters>(
+    EMPTY_DOMAIN_LIST_FILTERS,
+  );
   const { data: summaries } = useQuery({
     queryKey: ["rankTrackingConfigSummaries", projectId],
     queryFn: () => getRankTrackingConfigSummaries({ data: { projectId } }),
   });
+  const allSummaries = useMemo(() => summaries ?? [], [summaries]);
+  const filteredSummaries = useMemo(
+    () => applyDomainListFilters(allSummaries, filters),
+    [allSummaries, filters],
+  );
+  const filterOptions = useMemo(
+    () => getDomainListFilterOptions(allSummaries),
+    [allSummaries],
+  );
+  const activeFilterCount = countActiveDomainListFilters(filters);
 
   const archiveMutation = useMutation({
     mutationFn: (configId: string) =>
@@ -67,8 +94,18 @@ export function RankTrackingDomainList({
             Add Domain
           </button>
         </div>
-        <div className="divide-y divide-base-300">
+        {(allSummaries.length >= FILTER_BAR_MIN_DOMAINS ||
-          {(summaries ?? []).length === 0 ? (
+          activeFilterCount > 0) && (
+          <DomainListFilterBar
+            filters={filters}
+            options={filterOptions}
+            activeFilterCount={activeFilterCount}
+            onChange={setFilters}
+            onReset={() => setFilters(EMPTY_DOMAIN_LIST_FILTERS)}
+          />
+        )}
+        <div className="divide-y divide-base-300 border-t border-base-300">
+          {allSummaries.length === 0 ? (
             <div className="px-5 py-10 text-center space-y-2">
               <div className="mx-auto flex size-10 items-center justify-center rounded-xl bg-base-200">
                 <Globe className="size-5 text-base-content/40" />
@@ -80,8 +117,29 @@ export function RankTrackingDomainList({
                 Add a domain to start monitoring keyword rankings over time.
               </p>
             </div>
+          ) : filteredSummaries.length === 0 ? (
+            <div className="px-5 py-10 text-center space-y-3">
+              <div className="mx-auto flex size-10 items-center justify-center rounded-xl bg-base-200">
+                <Search className="size-5 text-base-content/40" />
+              </div>
+              <div className="space-y-1">
+                <p className="text-sm font-medium text-base-content/70">
+                  No matching tracked domains
+                </p>
+                <p className="text-xs text-base-content/40">
+                  Try clearing search or adjusting filters.
+                </p>
+              </div>
+              <button
+                className="btn btn-ghost btn-xs"
+                onClick={() => setFilters(EMPTY_DOMAIN_LIST_FILTERS)}
+                disabled={activeFilterCount === 0}
+              >
+                Clear filters
+              </button>
+            </div>
           ) : (
-            (summaries ?? []).map((summary) => (
+            filteredSummaries.map((summary) => (
               <DomainRow
                 key={summary.id}
                 projectId={projectId}

src/client/features/rank-tracking/RankTrackingFilters.test.ts

@@ -1,12 +1,24 @@
 import { describe, expect, it } from "vitest";
 import type { RankTrackingRow } from "@/types/schemas/rank-tracking";
 import {
+  applyDomainListFilters,
   applyFilters,
+  countActiveDomainListFilters,
+  EMPTY_DOMAIN_LIST_FILTERS,
   EMPTY_FILTERS,
+  getDomainListFilterOptions,
   matchesPositionFilter,
+  type DomainListFilters,
   type Filters,
 } from "./RankTrackingFilters";
 
+type DomainSummary = {
+  id: string;
+  domain: string;
+  devices: "both" | "desktop" | "mobile";
+  locationCode: number;
+};
+
 function makeRow(
   keyword: string,
   desktopPosition: number | null,
@@ -37,6 +49,21 @@ function withFilters(overrides: Partial<Filters>): Filters {
   return { ...EMPTY_FILTERS, ...overrides };
 }
 
+function makeSummary(
+  id: string,
+  domain: string,
+  devices: DomainSummary["devices"],
+  locationCode: number,
+): DomainSummary {
+  return { id, domain, devices, locationCode };
+}
+
+function withDomainFilters(
+  overrides: Partial<DomainListFilters>,
+): DomainListFilters {
+  return { ...EMPTY_DOMAIN_LIST_FILTERS, ...overrides };
+}
+
 describe("matchesPositionFilter", () => {
   it("matches only unranked positions when max is zero", () => {
     expect(matchesPositionFilter(null, "", "0")).toBe(true);
@@ -84,3 +111,102 @@ describe("applyFilters", () => {
     ).toEqual(["unranked both"]);
   });
 });
+
+describe("applyDomainListFilters", () => {
+  const summaries = [
+    makeSummary("alpha-us-mobile", "alpha.example.com", "mobile", 2840),
+    makeSummary("alpha-fr-desktop", "alpha.example.com", "desktop", 2250),
+    makeSummary("alpha-fr-mobile", "alpha.example.com", "mobile", 2250),
+    makeSummary("bravo-fr-both", "bravo.example.com", "both", 2250),
+    makeSummary("charlie-uk-desktop", "charlie.example.com", "desktop", 2826),
+  ];
+
+  it("narrows by text query and restores all when cleared", () => {
+    expect(
+      applyDomainListFilters(
+        summaries,
+        withDomainFilters({ query: "ALPHA" }),
+      ).map((summary) => summary.id),
+    ).toEqual(["alpha-us-mobile", "alpha-fr-desktop", "alpha-fr-mobile"]);
+
+    expect(
+      applyDomainListFilters(summaries, EMPTY_DOMAIN_LIST_FILTERS).map(
+        (summary) => summary.id,
+      ),
+    ).toEqual(summaries.map((summary) => summary.id));
+  });
+
+  it("filters by device", () => {
+    expect(
+      applyDomainListFilters(
+        summaries,
+        withDomainFilters({ device: "mobile" }),
+      ).map((summary) => summary.id),
+    ).toEqual(["alpha-us-mobile", "alpha-fr-mobile"]);
+  });
+
+  it("filters by country", () => {
+    expect(
+      applyDomainListFilters(
+        summaries,
+        withDomainFilters({ locationCode: "2250" }),
+      ).map((summary) => summary.id),
+    ).toEqual(["alpha-fr-desktop", "alpha-fr-mobile", "bravo-fr-both"]);
+  });
+
+  it("combines domain, device, and country filters with AND semantics", () => {
+    expect(
+      applyDomainListFilters(
+        summaries,
+        withDomainFilters({
+          query: "alpha",
+          device: "mobile",
+          locationCode: "2250",
+        }),
+      ).map((summary) => summary.id),
+    ).toEqual(["alpha-fr-mobile"]);
+  });
+
+  it("returns an empty list when filters match nothing", () => {
+    expect(
+      applyDomainListFilters(
+        summaries,
+        withDomainFilters({ query: "missing", device: "mobile" }),
+      ),
+    ).toEqual([]);
+  });
+});
+
+describe("getDomainListFilterOptions", () => {
+  it("derives distinct device and country options from available summaries", () => {
+    const options = getDomainListFilterOptions([
+      makeSummary("a", "a.com", "mobile", 2250),
+      makeSummary("b", "b.com", "desktop", 2250),
+      makeSummary("c", "c.com", "mobile", 2826),
+    ]);
+
+    expect(options.devices).toEqual([
+      { value: "desktop", label: "Desktop" },
+      { value: "mobile", label: "Mobile" },
+    ]);
+    expect(options.locations).toEqual([
+      { value: "2250", label: "FR" },
+      { value: "2826", label: "UK" },
+    ]);
+  });
+});
+
+describe("countActiveDomainListFilters", () => {
+  it("counts non-empty domain list filters", () => {
+    expect(countActiveDomainListFilters(EMPTY_DOMAIN_LIST_FILTERS)).toBe(0);
+    expect(
+      countActiveDomainListFilters(
+        withDomainFilters({
+          query: "alpha",
+          device: "desktop",
+          locationCode: "2840",
+        }),
+      ),
+    ).toBe(3);
+  });
+});

src/client/features/rank-tracking/RankTrackingFilters.tsx

@@ -1,5 +1,10 @@
 import { RotateCcw } from "lucide-react";
-import type { RankTrackingRow } from "@/types/schemas/rank-tracking";
+import { LOCATIONS } from "@/client/features/keywords/locations";
+import { devicesLabel } from "@/shared/rank-tracking";
+import type {
+  RankTrackingConfig,
+  RankTrackingRow,
+} from "@/types/schemas/rank-tracking";
 
 export type Filters = {
   include: string;
@@ -10,6 +15,22 @@ export type Filters = {
   maxMobilePos: string;
 };
 
+type DomainFilterableConfig = Pick<
+  RankTrackingConfig,
+  "domain" | "devices" | "locationCode"
+>;
+
+export type DomainListFilters = {
+  query: string;
+  device: "all" | RankTrackingConfig["devices"];
+  locationCode: string;
+};
+
+type DomainListFilterOption = {
+  value: string;
+  label: string;
+};
+
 export const EMPTY_FILTERS: Filters = {
   include: "",
   exclude: "",
@@ -19,6 +40,18 @@ export const EMPTY_FILTERS: Filters = {
   maxMobilePos: "",
 };
 
+export const EMPTY_DOMAIN_LIST_FILTERS: DomainListFilters = {
+  query: "",
+  device: "all",
+  locationCode: "all",
+};
+
+const DEVICE_FILTER_ORDER: RankTrackingConfig["devices"][] = [
+  "both",
+  "desktop",
+  "mobile",
+];
+
 export function FilterPanel({
   filters,
   setFilters,
@@ -97,6 +130,101 @@ export function FilterPanel({
   );
 }
 
+export function DomainListFilterBar({
+  filters,
+  options,
+  activeFilterCount,
+  onChange,
+  onReset,
+}: {
+  filters: DomainListFilters;
+  options: {
+    devices: DomainListFilterOption[];
+    locations: DomainListFilterOption[];
+  };
+  activeFilterCount: number;
+  onChange: (filters: DomainListFilters) => void;
+  onReset: () => void;
+}) {
+  return (
+    <div className="border-t border-base-300 px-5 py-3">
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-end">
+        <label className="form-control flex-1 gap-1.5">
+          <span className="text-[11px] font-semibold uppercase tracking-wide text-base-content/60">
+            Search
+          </span>
+          <input
+            className="input input-bordered input-sm w-full bg-base-100"
+            placeholder="Domain or website"
+            value={filters.query}
+            onChange={(event) =>
+              onChange({ ...filters, query: event.target.value })
+            }
+          />
+        </label>
+        <label className="form-control gap-1.5 lg:w-44">
+          <span className="text-[11px] font-semibold uppercase tracking-wide text-base-content/60">
+            Device
+          </span>
+          <select
+            className="select select-bordered select-sm w-full bg-base-100"
+            value={filters.device}
+            onChange={(event) => {
+              const value = event.target.value;
+              if (
+                value === "all" ||
+                value === "both" ||
+                value === "desktop" ||
+                value === "mobile"
+              ) {
+                onChange({ ...filters, device: value });
+              }
+            }}
+          >
+            <option value="all">All devices</option>
+            {options.devices.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="form-control gap-1.5 lg:w-52">
+          <span className="text-[11px] font-semibold uppercase tracking-wide text-base-content/60">
+            Country
+          </span>
+          <select
+            className="select select-bordered select-sm w-full bg-base-100"
+            value={filters.locationCode}
+            onChange={(event) =>
+              onChange({ ...filters, locationCode: event.target.value })
+            }
+          >
+            <option value="all">All countries</option>
+            {options.locations.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        {activeFilterCount > 0 && (
+          <button
+            className="btn btn-ghost btn-sm gap-1.5 self-start lg:self-auto"
+            onClick={onReset}
+          >
+            <RotateCcw className="size-3" />
+            Clear
+            <span className="badge badge-xs badge-primary border-0 text-primary-content">
+              {activeFilterCount}
+            </span>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
 function RangeFilter({
   title,
   minValue,
@@ -135,6 +263,57 @@ function RangeFilter({
   );
 }
 
+export function applyDomainListFilters<T extends DomainFilterableConfig>(
+  configs: T[],
+  filters: DomainListFilters,
+): T[] {
+  const query = filters.query.trim().toLowerCase();
+  const locationCode =
+    filters.locationCode === "all" ? null : Number(filters.locationCode);
+
+  return configs.filter((config) => {
+    if (query && !config.domain.toLowerCase().includes(query)) return false;
+
+    if (filters.device !== "all" && config.devices !== filters.device) {
+      return false;
+    }
+
+    if (locationCode !== null && config.locationCode !== locationCode) {
+      return false;
+    }
+
+    return true;
+  });
+}
+
+export function getDomainListFilterOptions(configs: DomainFilterableConfig[]): {
+  devices: DomainListFilterOption[];
+  locations: DomainListFilterOption[];
+} {
+  const deviceValues = new Set(configs.map((config) => config.devices));
+  const devices = DEVICE_FILTER_ORDER.filter((device) =>
+    deviceValues.has(device),
+  ).map((device) => ({
+    value: device,
+    label: devicesLabel(device),
+  }));
+
+  const locationMap = new Map<number, string>();
+  for (const config of configs) {
+    locationMap.set(
+      config.locationCode,
+      LOCATIONS[config.locationCode] ?? String(config.locationCode),
+    );
+  }
+
+  const locations = Array.from(locationMap, ([code, label]) => ({
+    value: String(code),
+    label,
+  })).toSorted((a, b) => a.label.localeCompare(b.label));
+
+  return { devices, locations };
+}
+
 export function applyFilters(
   rows: RankTrackingRow[],
   filters: Filters,
@@ -208,3 +387,13 @@ export function countActiveFilters(filters: Filters): number {
   if (filters.minMobilePos || filters.maxMobilePos) count++;
   return count;
 }
+
+export function countActiveDomainListFilters(
+  filters: DomainListFilters,
+): number {
+  let count = 0;
+  if (filters.query.trim()) count++;
+  if (filters.device !== "all") count++;
+  if (filters.locationCode !== "all") count++;
+  return count;
+}