diff --git a/src/components/CategoryNav.tsx b/src/components/CategoryNav.tsx
index f994ba9..fddccbd 100644
--- a/src/components/CategoryNav.tsx
+++ b/src/components/CategoryNav.tsx
@@ -1,9 +1,9 @@
'use client';
import { useRouter } from 'next/navigation';
-import { allThemes } from '@/lib/filters';
+import { facetOptions } from '@/lib/filters';
-const CATEGORIES = allThemes();
+const CATEGORIES = facetOptions('theme');
/** Event other components can listen for to apply a theme filter. */
export const FILTER_THEME_EVENT = 'sparky:filter-theme';
@@ -42,14 +42,18 @@ export default function CategoryNav() {
Categories
- {CATEGORIES.map((category) => (
+ {CATEGORIES.map((cat) => (
))}
diff --git a/src/components/FilterPills.tsx b/src/components/FilterPills.tsx
index 5f7582c..48bcaef 100644
--- a/src/components/FilterPills.tsx
+++ b/src/components/FilterPills.tsx
@@ -2,8 +2,8 @@
import Pill from './Pill';
import {
- allThemes,
countActive,
+ facetOptions,
type ActiveFilters,
type FilterGroup,
} from '@/lib/filters';
@@ -14,32 +14,46 @@ interface FilterPillsProps {
onClear: () => void;
}
-// Browsing is filtered by theme only — genre and era pills were removed to
-// keep the bar focused and uncluttered.
-const THEMES = allThemes();
+// Three facet groups, each precomputed with one-word labels + book counts.
+const GROUPS: { key: 'theme' | 'genre' | 'award'; label: string }[] = [
+ { key: 'theme', label: 'Theme' },
+ { key: 'genre', label: 'Genre' },
+ { key: 'award', label: 'Awards' },
+];
-/** The theme pill-box filter bar. Multi-select. */
+const OPTIONS = {
+ theme: facetOptions('theme'),
+ genre: facetOptions('genre'),
+ award: facetOptions('award'),
+};
+
+/** The filter bar: grouped, space-filling grids of one-word pills with counts. */
export default function FilterPills({ active, onToggle, onClear }: FilterPillsProps) {
const activeCount = countActive(active);
return (
-
-
-
- Theme
-
-
- {THEMES.map((value) => (
-
onToggle('theme', value)}
- >
- {value}
-
- ))}
+
+ {GROUPS.map((group) => (
+
+
+ {group.label}
+
+
+ {OPTIONS[group.key].map((opt) => (
+
onToggle(group.key, opt.value)}
+ >
+ {opt.short}
+
+ ))}
+
-
+ ))}
{activeCount > 0 && (