TKW: add house rank filter to /houses, combinable with status

app/houses/page.tsx

@@ -32,6 +32,7 @@ export default async function HousesPage() {
         region,
         regionLabel: regionLabel(region),
         extinct: h.frontmatter.status === "extinct",
+        rank: h.frontmatter.rank,
       };
     })
     .sort(compareByName);

components/FilteredHouseList/FilteredHouseList.module.scss

@@ -20,6 +20,21 @@
   margin-left: auto;
 }
 
+.rankFilter {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-family: var(--font-ui);
+  font-size: 0.85rem;
+  color: var(--ink-faded);
+  letter-spacing: 0.5px;
+}
+
+.rankLabel {
+  font-variant: small-caps;
+  letter-spacing: 1.5px;
+}
+
 .regions {
   display: grid;
   gap: 0.75rem;

components/FilteredHouseList/FilteredHouseList.test.tsx

@@ -727,6 +727,136 @@ describe("FilteredHouseList status filter", () => {
   });
 });
 
+describe("FilteredHouseList rank filter", () => {
+  const ranked: HouseItem[] = [
+    {
+      slug: "stark",
+      name: "Stark",
+      region: "north",
+      regionLabel: "The North",
+      rank: "lordly",
+    },
+    {
+      slug: "clegane",
+      name: "Clegane",
+      region: "westerlands",
+      regionLabel: "The Westerlands",
+      rank: "knightly",
+    },
+    {
+      slug: "reyne",
+      name: "Reyne",
+      region: "westerlands",
+      regionLabel: "The Westerlands",
+      rank: "lordly",
+      extinct: true,
+    },
+  ];
+
+  it("exposes a house-rank filter", () => {
+    renderWithNuqs(<FilteredHouseList items={ranked} />);
+    expect(screen.getByRole("combobox", { name: /house rank/i })).toBeDefined();
+  });
+
+  it("shows every house regardless of rank by default", () => {
+    renderWithNuqs(<FilteredHouseList items={ranked} />);
+    expect(screen.getAllByRole("link").length).toBe(3);
+  });
+
+  it("shows only houses of the selected rank", () => {
+    renderWithNuqs(<FilteredHouseList items={ranked} />);
+    fireEvent.change(screen.getByRole("combobox", { name: /house rank/i }), {
+      target: { value: "lordly" },
+    });
+    const cards = screen.getAllByRole("link");
+    expect(cards.map((c) => c.textContent)).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("Stark"),
+        expect.stringContaining("Reyne"),
+      ]),
+    );
+    expect(cards.length).toBe(2);
+  });
+
+  it("combines the rank filter with the status filter", () => {
+    renderWithNuqs(<FilteredHouseList items={ranked} />);
+    fireEvent.change(screen.getByRole("combobox", { name: /house rank/i }), {
+      target: { value: "lordly" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /extinct houses/i }));
+    const cards = screen.getAllByRole("link");
+    expect(cards.length).toBe(1);
+    expect(cards[0].textContent).toContain("Reyne");
+  });
+
+  it("reflects the rank filter in the total count", () => {
+    renderWithNuqs(<FilteredHouseList items={ranked} />);
+    fireEvent.change(screen.getByRole("combobox", { name: /house rank/i }), {
+      target: { value: "knightly" },
+    });
+    expect(screen.getByText("1 house")).toBeDefined();
+  });
+
+  it("hydrates the rank filter from ?rank=lordly on mount", () => {
+    renderWithNuqs(<FilteredHouseList items={ranked} />, {
+      searchParams: "?rank=lordly",
+    });
+    expect(screen.getAllByRole("link").length).toBe(2);
+    const select = screen.getByRole("combobox", {
+      name: /house rank/i,
+    }) as HTMLSelectElement;
+    expect(select.value).toBe("lordly");
+  });
+
+  it("writes ?rank=lordly when a rank is selected", async () => {
+    const { onUrlUpdate } = renderWithNuqs(
+      <FilteredHouseList items={ranked} />,
+    );
+    fireEvent.change(screen.getByRole("combobox", { name: /house rank/i }), {
+      target: { value: "lordly" },
+    });
+    await flushNuqs();
+    expect(lastQueryString(onUrlUpdate)).toBe("?rank=lordly");
+  });
+
+  it("removes ?rank= when the filter returns to Any rank", async () => {
+    const { onUrlUpdate } = renderWithNuqs(
+      <FilteredHouseList items={ranked} />,
+      { searchParams: "?rank=lordly" },
+    );
+    fireEvent.change(screen.getByRole("combobox", { name: /house rank/i }), {
+      target: { value: "all" },
+    });
+    await flushNuqs();
+    expect(lastQueryString(onUrlUpdate)).toBe("");
+  });
+
+  it("resets ?page= when the rank filter changes", async () => {
+    const { onUrlUpdate } = renderWithNuqs(
+      <FilteredHouseList items={manyItems(70)} pageSize={24} />,
+      { searchParams: "?page=2" },
+    );
+    fireEvent.change(screen.getByRole("combobox", { name: /house rank/i }), {
+      target: { value: "lordly" },
+    });
+    await flushNuqs();
+    expect(lastSearchParams(onUrlUpdate).get("rank")).toBe("lordly");
+    expect(lastSearchParams(onUrlUpdate).get("page")).toBeNull();
+  });
+
+  it("applies the rank filter inside region grouping", () => {
+    renderWithNuqs(<FilteredHouseList items={ranked} />);
+    fireEvent.click(screen.getByRole("button", { name: /group by region/i }));
+    fireEvent.change(screen.getByRole("combobox", { name: /house rank/i }), {
+      target: { value: "knightly" },
+    });
+    expect(
+      screen.getByRole("button", { name: /the westerlands/i }),
+    ).toBeDefined();
+    expect(screen.queryByRole("button", { name: /the north/i })).toBeNull();
+  });
+});
+
 describe("FilteredHouseList view toggle", () => {
   it("starts in grid view by default", () => {
     const { container } = renderWithNuqs(<FilteredHouseList items={items} />);

components/FilteredHouseList/FilteredHouseList.tsx

@@ -16,6 +16,7 @@ import {
   type ViewMode,
 } from "@/components/ViewToggle";
 import { filterByName } from "@/lib/search";
+import type { HouseRank } from "@/lib/schemas";
 import { cx } from "@/lib/cx";
 import { compareByName } from "@/lib/collections";
 import { REGION_SLUGS, regionLabel } from "@/lib/regions";
@@ -38,6 +39,7 @@ export type HouseItem = {
   region: string | null;
   regionLabel: string | null;
   extinct?: boolean;
+  rank?: HouseRank;
 };
 
 type Props = {
@@ -93,6 +95,33 @@ const STATUS_OPTIONS = [
   { value: "extinct" as const, label: "Extinct houses", icon: <ExtinctIcon /> },
 ];
 
+type RankFilter =
+  "all" | "royal" | "lordly" | "knightly" | "other" | "exiled" | "extinct";
+
+const RANK_FILTERS = [
+  "all",
+  "royal",
+  "lordly",
+  "knightly",
+  "other",
+  "exiled",
+  "extinct",
+] as const;
+
+const RANK_OPTIONS: { value: RankFilter; label: string }[] = [
+  { value: "all", label: "Any rank" },
+  { value: "royal", label: "Royal" },
+  { value: "lordly", label: "Lordly" },
+  { value: "knightly", label: "Knightly" },
+  { value: "other", label: "Other" },
+  { value: "exiled", label: "Exiled" },
+  { value: "extinct", label: "Extinct" },
+];
+
+function isRankFilter(value: string): value is RankFilter {
+  return (RANK_FILTERS as readonly string[]).includes(value);
+}
+
 export function FilteredHouseList({
   items,
   pageSize = DEFAULT_PAGE_SIZE,
@@ -108,6 +137,10 @@ export function FilteredHouseList({
     "status",
     parseAsStringLiteral(STATUS_FILTERS).withDefault("all"),
   );
+  const [rank, setRank] = useQueryState(
+    "rank",
+    parseAsStringLiteral(RANK_FILTERS).withDefault("all"),
+  );
 
   const [userValue, setUserValue] = useState<string | undefined>(undefined);
   const [userDebounced, setUserDebounced] = useState<string | undefined>(
@@ -175,18 +208,20 @@ export function FilteredHouseList({
     return dir === "desc" ? arr.reverse() : arr;
   }, [items, dir]);
 
-  const statusFiltered = useMemo(
-    () =>
+  const facetFiltered = useMemo(() => {
+    const byStatus =
       status === "all"
         ? sorted
         : sorted.filter((item) =>
             status === "extinct" ? !!item.extinct : !item.extinct,
-          ),
-    [sorted, status],
-  );
-
-  const filtered = filterByName(statusFiltered, debounced);
-  const total = statusFiltered.length;
+          );
+    return rank === "all"
+      ? byStatus
+      : byStatus.filter((item) => item.rank === rank);
+  }, [sorted, status, rank]);
+
+  const filtered = filterByName(facetFiltered, debounced);
+  const total = facetFiltered.length;
   const matching = filtered.length;
   const hasQuery = debounced.trim().length > 0;
   const noun = total === 1 ? "house" : "houses";
@@ -205,13 +240,13 @@ export function FilteredHouseList({
     const known = REGION_SLUGS.map((slug) => ({
       slug,
       label: regionLabel(slug) ?? slug,
-      items: statusFiltered.filter((item) => item.region === slug),
+      items: facetFiltered.filter((item) => item.region === slug),
     })).filter((group) => group.items.length > 0);
-    const other = statusFiltered.filter((item) => item.region === null);
+    const other = facetFiltered.filter((item) => item.region === null);
     return other.length > 0
       ? [...known, { slug: "other", label: "Other Houses", items: other }]
       : known;
-  }, [statusFiltered]);
+  }, [facetFiltered]);
 
   const writePage = (next: number) => {
     setParams({ page: next });
@@ -231,6 +266,12 @@ export function FilteredHouseList({
     setParams({ page: 1 });
   };
 
+  const handleRankChange = (next: string) => {
+    if (!isRankFilter(next)) return;
+    setRank(next === "all" ? null : next);
+    setParams({ page: 1 });
+  };
+
   const listClass = cx(styles.list, view === "list" && styles.listView);
 
   const renderCard = ({
@@ -335,6 +376,21 @@ export function FilteredHouseList({
           />
         )}
         <div className={styles.toggles}>
+          <label className={styles.rankFilter}>
+            <span className={styles.rankLabel}>Rank</span>
+            <select
+              className={listSearch.pageSizeSelect}
+              value={rank}
+              onChange={(e) => handleRankChange(e.target.value)}
+              aria-label="House rank"
+            >
+              {RANK_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </label>
           <ViewToggle
             options={STATUS_OPTIONS}
             value={status}

lib/schemas.ts

@@ -256,6 +256,7 @@ export type CalendarDate = z.infer<typeof DateSchema>;
 export type Landmass = z.infer<typeof LandmassSchema>;
 export type Castle = z.infer<typeof CastleSchema>;
 export type House = z.infer<typeof HouseSchema>;
+export type HouseRank = z.infer<typeof HouseRankSchema>;
 export type HouseInfoEntry = z.infer<typeof HouseInfoEntrySchema>;
 export type Character = z.infer<typeof CharacterSchema>;
 export type Event = z.infer<typeof EventSchema>;