diff --git a/src/app/home-page/components/ArticleFeed.tsx b/src/app/home-page/components/ArticleFeed.tsx
index f56b02f..8e83a05 100644
--- a/src/app/home-page/components/ArticleFeed.tsx
+++ b/src/app/home-page/components/ArticleFeed.tsx
@@ -26,7 +26,21 @@ interface ArticleItem {
-const ALL_CATEGORIES = ["All", "BROADCAST", "POST PRODUCTION", "ANIMATION"];
+// Match the topic list on /news for a consistent filter experience sitewide.
+const ALL_CATEGORIES = [
+ "All",
+ "Cloud",
+ "AI",
+ "IP Workflows",
+ "Live Production",
+ "Streaming",
+ "Audio",
+ "Cameras",
+ "NAB 2026",
+ "EAS",
+ "Sports Broadcasting",
+ "Ad Tech",
+];
const SOURCE_FILTERS = ["All", "Live", "Imported"] as const;
type SourceFilter = typeof SOURCE_FILTERS[number];
type FeedMode = "pagination" | "infinite";
@@ -141,7 +155,8 @@ export default function ArticleFeed() {
// Filter articles
const filtered = allArticles.filter((a) => {
- const matchCat = activeCategory === "All" || a.category === activeCategory;
+ const matchCat = activeCategory === "All"
+ || (a.category || "").toLowerCase().includes(activeCategory.toLowerCase());
const matchSource =
sourceFilter === "All" ||
(sourceFilter === "Imported" && a.source === "imported") ||
@@ -337,10 +352,39 @@ export default function ArticleFeed() {
{sortedFiltered.length?.toLocaleString()} article{sortedFiltered.length !== 1 ? "s" : ""}
- {/* Filters only — site-wide search lives in the top-right header */}
+ {/* Filters — topic chips + date range visible by default, advanced (author + source) behind toggle */}
-
- {/* Advanced filters toggle button */}
+ {/* Row: date range + advanced toggle */}
+
+
{ setDateFrom(e.target.value); setPage(1); }}
+ max={dateTo || undefined}
+ className="bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#3b82f6] transition-colors [color-scheme:dark]"
+ title="From date"
+ aria-label="Filter articles from date"
+ />
+
–
+
{ setDateTo(e.target.value); setPage(1); }}
+ min={dateFrom || undefined}
+ className="bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#3b82f6] transition-colors [color-scheme:dark]"
+ title="To date"
+ aria-label="Filter articles to date"
+ />
+ {(dateFrom || dateTo) && (
+
+ )}
+
+ {/* Row: topic chips */}
+
+
Topics:
+
+ {ALL_CATEGORIES.map((cat) => {
+ const isActive = activeCategory === cat;
+ return (
+
+ );
+ })}
+
+
+
{/* Advanced filters panel */}
{showAdvanced && (