From 8be2ccbff2224fa5a358607d44dede9bf37dc6b7 Mon Sep 17 00:00:00 2001
From: Claude Code <claude@onsethost.com>
Date: Thu, 14 May 2026 16:39:24 +0000
Subject: [PATCH] Deploy-1 fix + P0-6/7/8: Suspense wrap, carousel arrows,
 banner reposition, search-box removal

Deploy-1 build failed because NewsPageClient now calls useSearchParams.
- src/app/news/page.tsx: wrap NewsPageClient in <Suspense> so static
  generation can bail out to client rendering cleanly.

P0-6 (Featured carousel arrows):
- FeaturedBento: brighten arrow buttons (text-[#ccc] over bg-[#1a1a1a]
  with #3a3a3a border; previously near-invisible #666 over the same
  background), enlarge to w-8 h-8, hover fills to blue. Wrap the
  arrow group with role/aria + Left/Right keyboard nav.

P0-7 (728x90 reposition):
- Header: move the leaderboard block from above the main nav to AFTER
  the sticky nav, so it sits between the nav and The Beat ticker.

P0-8 (remove Latest search box):
- ArticleFeed: drop the in-section search input + clear button. The
  top-right header search is now the sole search UI. searchQuery state
  remains since the active-filter chip code still references it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/home-page/components/ArticleFeed.tsx  | 32 +------------------
 .../home-page/components/FeaturedBento.tsx    | 23 +++++++++----
 src/app/news/page.tsx                         |  8 ++++-
 src/components/Header.tsx                     | 18 +++++------
 4 files changed, 34 insertions(+), 47 deletions(-)

diff --git a/src/app/home-page/components/ArticleFeed.tsx b/src/app/home-page/components/ArticleFeed.tsx
index bf5cf49..1d5c119 100644
--- a/src/app/home-page/components/ArticleFeed.tsx
+++ b/src/app/home-page/components/ArticleFeed.tsx
@@ -506,39 +506,9 @@ export default function ArticleFeed() {
             <span className="font-body text-xs text-[#555]">{sortedFiltered.length?.toLocaleString()} article{sortedFiltered.length !== 1 ? "s" : ""}</span>
           </div>
 
-          {/* Search + Filters */}
+          {/* Filters only — site-wide search lives in the top-right header */}
           <div className="mb-4 space-y-3">
-            {/* Search bar row with Advanced Filters toggle */}
             <div className="flex items-center gap-2">
-              <div className="relative flex-1">
-                <label htmlFor={`${feedId}-search`} className="sr-only">Search articles</label>
-                <SearchIcon
-                  size={14}
-                  strokeWidth={1.75}
-                  className="absolute left-3 top-1/2 -translate-y-1/2 text-[#555] pointer-events-none"
-                  aria-hidden="true"
-                />
-                <input
-                  id={`${feedId}-search`}
-                  ref={searchRef}
-                  type="search"
-                  value={searchQuery}
-                  onChange={(e) => { setSearchQuery(e.target.value); setPage(1); }}
-                  placeholder="Search articles by title, topic, or author..."
-                  aria-label="Search articles"
-                  aria-controls={`${feedId}-results`}
-                  className="search-input search-input-enhanced w-full pl-9 pr-9 py-2 text-sm"
-                />
-                {searchQuery && (
-                  <button
-                    type="button"
-                    onClick={clearSearch}
-                    aria-label="Clear search"
-                    className="search-clear-btn right-2.5">
-                    <CloseIcon size={11} />
-                  </button>
-                )}
-              </div>
               {/* Advanced filters toggle button */}
               <button
                 type="button"
diff --git a/src/app/home-page/components/FeaturedBento.tsx b/src/app/home-page/components/FeaturedBento.tsx
index 292fb10..abb303c 100644
--- a/src/app/home-page/components/FeaturedBento.tsx
+++ b/src/app/home-page/components/FeaturedBento.tsx
@@ -159,25 +159,36 @@ export default function FeaturedBento() {
         <span className="section-label">Featured</span>
         <div className="flex-1 h-px bg-[#2a2a2a]" />
         {/* Navigation arrows */}
-        <div className="flex items-center gap-1.5">
+        <div
+          className="flex items-center gap-1.5"
+          role="group"
+          aria-label="Featured stories pagination"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowLeft") { e.preventDefault(); goPrev(); setPaused(true); }
+            if (e.key === "ArrowRight") { e.preventDefault(); goNext(); setPaused(true); }
+          }}
+        >
           <button
+            type="button"
             onClick={() => { goPrev(); setPaused(true); }}
             aria-label="Previous stories"
-            className="w-7 h-7 flex items-center justify-center bg-[#1a1a1a] border border-[#2a2a2a] hover:border-[#3b82f6] hover:text-[#3b82f6] text-[#666] transition-colors rounded-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
+            className="w-8 h-8 flex items-center justify-center bg-[#1a1a1a] border border-[#3a3a3a] hover:bg-[#3b82f6] hover:border-[#3b82f6] hover:text-white text-[#ccc] transition-colors rounded-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
               <polyline points="15 18 9 12 15 6" />
             </svg>
           </button>
           <button
+            type="button"
             onClick={() => { goNext(); setPaused(true); }}
             aria-label="Next stories"
-            className="w-7 h-7 flex items-center justify-center bg-[#1a1a1a] border border-[#2a2a2a] hover:border-[#3b82f6] hover:text-[#3b82f6] text-[#666] transition-colors rounded-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
+            className="w-8 h-8 flex items-center justify-center bg-[#1a1a1a] border border-[#3a3a3a] hover:bg-[#3b82f6] hover:border-[#3b82f6] hover:text-white text-[#ccc] transition-colors rounded-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
               <polyline points="9 18 15 12 9 6" />
             </svg>
           </button>
           {/* Position indicator */}
-          <span className="font-body text-[11px] text-[#555] ml-1">
+          <span className="font-body text-[11px] text-[#888] ml-1">
             {offset + 1}–{Math.min(offset + CARDS_PER_PAGE, rotatingStories?.length)}/{rotatingStories?.length}
           </span>
         </div>
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index 3c0918e..2247791 100644
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { Suspense } from "react";
 import NewsPageClient from "./NewsPageClient";
 import { getLegacyArticlesBySection } from "@/lib/articles/legacy-source";
 
@@ -13,5 +14,10 @@ export const metadata: Metadata = {
 
 export default async function NewsPage() {
   const articles = await getLegacyArticlesBySection("news", 200);
-  return <NewsPageClient articles={articles} />;
+  // Suspense boundary required because NewsPageClient uses useSearchParams.
+  return (
+    <Suspense fallback={null}>
+      <NewsPageClient articles={articles} />
+    </Suspense>
+  );
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 89cb07e..66d1c7a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -365,15 +365,6 @@ export default function Header() {
         </div>
       </div>
 
-      {/* HEADER LEADERBOARD — site-wide 728x90 between utility bar and main nav */}
-      {ADS_728X90.length > 0 && (
-        <div className="bg-[#0a0a0a] border-b border-[#1a1a1a] py-3 hidden md:block">
-          <div className="max-w-container mx-auto px-4 flex justify-center">
-            <AdImage ad={shuffle(ADS_728X90)[0]} priority page="header" />
-          </div>
-        </div>
-      )}
-
       {/* MAIN NAV */}
       <div className={`sticky top-0 z-50 transition-shadow duration-200 ${scrolled ? "shadow-nav" : ""}`}>
         <nav className="bg-[#111111] border-b border-[#252525]" role="navigation" aria-label="Main navigation">
@@ -632,6 +623,15 @@ export default function Header() {
           </div>
         </nav>
       </div>
+
+      {/* HEADER LEADERBOARD — site-wide 728x90 between main nav and the ticker */}
+      {ADS_728X90.length > 0 && (
+        <div className="bg-[#0a0a0a] border-b border-[#1a1a1a] py-3 hidden md:block">
+          <div className="max-w-container mx-auto px-4 flex justify-center">
+            <AdImage ad={shuffle(ADS_728X90)[0]} priority page="header" />
+          </div>
+        </div>
+      )}
     </>
   );
 }
\ No newline at end of file