From ede00da8589e3cc1ceb36c047d656cd0ea1ba09b Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Fri, 22 May 2026 05:19:13 +0000
Subject: [PATCH] homepage feed: remove duplicate category+date in advanced
 panel (kept author/source only); article page: render SidebarAdStack instead
 of placeholder

---
 .../articles/[slug]/ArticleDetailClient.tsx   | 10 +---
 src/app/home-page/components/ArticleFeed.tsx  | 56 +------------------
 2 files changed, 4 insertions(+), 62 deletions(-)

diff --git a/src/app/articles/[slug]/ArticleDetailClient.tsx b/src/app/articles/[slug]/ArticleDetailClient.tsx
index 43b24d1..32f74d6 100644
--- a/src/app/articles/[slug]/ArticleDetailClient.tsx
+++ b/src/app/articles/[slug]/ArticleDetailClient.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import AppImage from "@/components/ui/AppImage";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
+import SidebarAdStack from "@/components/SidebarAdStack";
 import { createClient } from "@/lib/supabase/client";
 import type { Article } from "@/lib/articles/types";
 
@@ -436,13 +437,8 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
               </Link>
             </div>
 
-            {/* Ad placeholder */}
-            <div className="ad-placeholder w-full h-[250px] flex items-center justify-center">
-              <div className="text-center">
-                <p className="text-[#444] text-xs font-body">Advertisement</p>
-                <p className="text-[#333] text-[10px] font-body mt-1">300×250</p>
-              </div>
-            </div>
+            {/* Sidebar ad stack — 300x600 + 300x250 rotating */}
+            <SidebarAdStack />
           </aside>
         </div>
       </article>
diff --git a/src/app/home-page/components/ArticleFeed.tsx b/src/app/home-page/components/ArticleFeed.tsx
index b7d1ba9..bdda1e5 100644
--- a/src/app/home-page/components/ArticleFeed.tsx
+++ b/src/app/home-page/components/ArticleFeed.tsx
@@ -437,7 +437,7 @@ export default function ArticleFeed() {
                 role="group"
                 aria-label="Advanced filters">
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                  {/* Author filter */}
+                  {/* Author filter (category + date moved out to the always-visible row) */}
                   <div className="space-y-1">
                     <label htmlFor={`${feedId}-author`} className="font-body text-[10px] text-[#555] uppercase tracking-wide block">
                       Author
@@ -459,60 +459,6 @@ export default function ArticleFeed() {
                       </svg>
                     </div>
                   </div>
-
-                  {/* Category filter (moved into advanced panel as well) */}
-                  <div className="space-y-1">
-                    <label htmlFor={`${feedId}-category-select`} className="font-body text-[10px] text-[#555] uppercase tracking-wide block">
-                      Category
-                    </label>
-                    <div className="relative">
-                      <select
-                        id={`${feedId}-category-select`}
-                        value={activeCategory}
-                        onChange={(e) => { setActiveCategory(e.target.value); setPage(1); }}
-                        className="w-full bg-[#111] border border-[#2a2a2a] text-[#ccc] font-body text-sm rounded-sm px-3 py-1.5 pr-8 appearance-none focus:outline-none focus:border-[#3b82f6] focus:ring-1 focus:ring-[#3b82f6]/30 transition-colors [color-scheme:dark]"
-                        aria-label="Filter by category">
-                        {ALL_CATEGORIES.map((cat) => (
-                          <option key={cat} value={cat}>{cat === "All" ? "All Categories" : cat}</option>
-                        ))}
-                      </select>
-                      <svg className="absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none text-[#555]" width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
-                        <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                      </svg>
-                    </div>
-                  </div>
-
-                  {/* Date From */}
-                  <div className="space-y-1">
-                    <label htmlFor={`${feedId}-date-from`} className="font-body text-[10px] text-[#555] uppercase tracking-wide block">
-                      Date From
-                    </label>
-                    <input
-                      id={`${feedId}-date-from`}
-                      type="date"
-                      value={dateFrom}
-                      onChange={(e) => { setDateFrom(e.target.value); setPage(1); }}
-                      max={dateTo || undefined}
-                      className="w-full bg-[#111] border border-[#2a2a2a] text-[#ccc] font-body text-sm rounded-sm px-3 py-1.5 focus:outline-none focus:border-[#3b82f6] focus:ring-1 focus:ring-[#3b82f6]/30 transition-colors [color-scheme:dark]"
-                      aria-label="Filter articles from date"
-                    />
-                  </div>
-
-                  {/* Date To */}
-                  <div className="space-y-1">
-                    <label htmlFor={`${feedId}-date-to`} className="font-body text-[10px] text-[#555] uppercase tracking-wide block">
-                      Date To
-                    </label>
-                    <input
-                      id={`${feedId}-date-to`}
-                      type="date"
-                      value={dateTo}
-                      onChange={(e) => { setDateTo(e.target.value); setPage(1); }}
-                      min={dateFrom || undefined}
-                      className="w-full bg-[#111] border border-[#2a2a2a] text-[#ccc] font-body text-sm rounded-sm px-3 py-1.5 focus:outline-none focus:border-[#3b82f6] focus:ring-1 focus:ring-[#3b82f6]/30 transition-colors [color-scheme:dark]"
-                      aria-label="Filter articles to date"
-                    />
-                  </div>
                 </div>
 
                 {/* Source filter inside advanced panel */}