Fill empty spaces on the homepage with more articles and ads

Refactor article and ad placement logic in `home.tsx` to ensure all content sections are filled, preventing empty spaces and improving layout consistency.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1f7e7e89-a520-4970-9645-37daadc466dc
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 98072d0d-f50f-46a1-a5db-4a6624baca6d
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/1f7e7e89-a520-4970-9645-37daadc466dc/NJvOVoB
Replit-Helium-Checkpoint-Created: true

client/src/pages/home.tsx

@@ -573,44 +573,36 @@ export default function Home() {
   }, [articles]);
 
   const bottomArticles = useMemo(() => {
-    if (!articles || articles.length < 10) return [];
+    if (!articles || articles.length === 0) return [];
-    const usedIds = new Set([
+    const carouselIds = new Set(articles.slice(0, 9).map((a) => a.id));
-      ...articles.slice(0, 9).map((a) => a.id),
+    const nonCarousel = articles.filter((a) => !carouselIds.has(a.id));
-      ...widePickedArticles.map((a) => a.id),
+    const pool = nonCarousel.length > 0 ? nonCarousel : articles;
-    ]);
+    const result: Article[] = [];
-    return articles.filter((a) => !usedIds.has(a.id)).slice(0, 3);
+    let idx = 0;
-  }, [articles, widePickedArticles]);
+    while (result.length < 9) {
-
+      result.push(pool[idx % pool.length]);
-  const extraBottomArticles = useMemo(() => {
+      idx++;
-    if (!articles || articles.length < 15) return [];
+    }
-    const usedIds = new Set([
+    return result;
-      ...articles.slice(0, 9).map((a) => a.id),
+  }, [articles]);
-      ...widePickedArticles.map((a) => a.id),
-      ...bottomArticles.map((a) => a.id),
-    ]);
-    return articles.filter((a) => !usedIds.has(a.id)).slice(0, 6);
-  }, [articles, widePickedArticles, bottomArticles]);
 
   const bottomSection = useMemo(() => {
     const items: { type: "widget" | "ad" | "article"; el: JSX.Element }[] = [
       { type: "widget", el: <NewsWidget key="bottom-news" /> },
       { type: "widget", el: <HoroscopeWidget key="bottom-horoscope" /> },
       { type: "widget", el: <BreakingNewsWidget key="bottom-breaking" /> },
-      { type: "widget", el: <RecipeWidget key="bottom-recipe" /> },
+      { type: "article", el: <BlogCard key={`bottom-art-0`} article={bottomArticles[0]} focalPoints={focalPoints} /> },
-      ...bottomArticles.map((a) => ({
-        type: "article" as const,
-        el: <BlogCard key={`bottom-art-${a.id}`} article={a} focalPoints={focalPoints} />,
-      })),
       { type: "ad", el: <div key="ad-bottom-1"><ArticleCardAd /></div> },
+      { type: "article", el: <BlogCard key={`bottom-art-1`} article={bottomArticles[1]} focalPoints={focalPoints} /> },
       { type: "widget", el: <PhotoGalleryWidget key="bottom-gallery" /> },
+      { type: "article", el: <BlogCard key={`bottom-art-2`} article={bottomArticles[2]} focalPoints={focalPoints} /> },
       { type: "ad", el: <div key="ad-bottom-2"><ArticleCardAd /></div> },
-      ...extraBottomArticles.slice(0, 3).map((a) => ({
+      { type: "article", el: <BlogCard key={`bottom-art-3`} article={bottomArticles[3]} focalPoints={focalPoints} /> },
-        type: "article" as const,
+      { type: "article", el: <BlogCard key={`bottom-art-4`} article={bottomArticles[4]} focalPoints={focalPoints} /> },
-        el: <BlogCard key={`bottom-extra-${a.id}`} article={a} focalPoints={focalPoints} />,
+      { type: "article", el: <BlogCard key={`bottom-art-5`} article={bottomArticles[5]} focalPoints={focalPoints} /> },
-      })),
     ];
     return items;
-  }, [bottomArticles, extraBottomArticles, focalPoints]);
+  }, [bottomArticles, focalPoints]);
 
   if (isLoading || !articles) {
     return (
@@ -686,14 +678,6 @@ export default function Home() {
           ))}
         </div>
 
-        {extraBottomArticles.length > 3 && (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {extraBottomArticles.slice(3, 6).map((a) => (
-              <BlogCard key={`extra-bottom-${a.id}`} article={a} focalPoints={focalPoints} />
-            ))}
-          </div>
-        )}
-
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
           <PhotoGalleryWidget key="extra-gallery" />
           <NewsWidget key="extra-news" />