naslovnica omejena na 48 clankov in gumb Alle Nachrichten v rubriko; drugi paket ne vlece vec vseh 273 clankov (142 kB)

client/src/pages/home.tsx

@@ -755,8 +755,11 @@ export default function Home() {
   const { data: firstBatch, isLoading } = useQuery<Article[]>({
     queryKey: ["/api/articles?limit=30&light=1"],
   });
+  // 31. 8. 2026: naslovnica je nalozila se vseh 273 preostalih clankov (142 kB)
+  // in jih izrisala v eno neskoncno mrezo. Zdaj se ustavi pri 48, naprej pa
+  // pelje gumb v rubriko, kjer je stranicenje.
   const { data: restBatch } = useQuery<Article[]>({
-    queryKey: ["/api/articles?offset=30&light=1"],
+    queryKey: ["/api/articles?offset=30&limit=40&light=1"],
     enabled: !!firstBatch,
   });
   const allArticles = useMemo(() => {
@@ -876,10 +879,17 @@ export default function Home() {
     return items;
   }, [spaced, widgets]);
 
+  const NA_NASLOVNICI = 48;
   const gridRows: (typeof gridItems)[] = useMemo(() => {
     const rows: (typeof gridItems)[] = [];
-    for (let i = 0; i < gridItems.length; i += 4) {
-      rows.push(gridItems.slice(i, i + 4));
+    let clankov = 0;
+    const omejeno = gridItems.filter((it) => {
+      if (it.type !== "article") return true;
+      clankov += 1;
+      return clankov <= NA_NASLOVNICI;
+    });
+    for (let i = 0; i < omejeno.length; i += 4) {
+      rows.push(omejeno.slice(i, i + 4));
     }
     return rows;
   }, [gridItems]);
@@ -995,6 +1005,18 @@ export default function Home() {
           </LazySection>
         ))}
 
+        {/* Naslovnica se konca pri 48 clankih, naprej pelje rubrika s stranicenjem. */}
+        <div className="flex justify-center my-8">
+          <a
+            href="/category/News"
+            data-testid="link-alle-nachrichten"
+            className="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-6 py-3 text-sm font-semibold hover:border-primary hover:text-primary transition-colors"
+          >
+            Alle Nachrichten
+            <span aria-hidden="true">→</span>
+          </a>
+        </div>
+
         <LazySection minHeight="280px">
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
             {bottomSection.map((item, i) => (