Add current news widget and randomize widget placement on homepage

Introduce a new "Aktuelle Nachrichten" widget fetching breaking news from Google News and integrate it into the homepage layout, allowing for randomized placement alongside other widgets.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a9755292-f3f6-4e82-9daf-584c288b7d23
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true

client/src/components/breaking-news-widget.tsx

@@ -0,0 +1,95 @@
+import { useQuery } from "@tanstack/react-query";
+import { useState, useEffect, useCallback } from "react";
+import { Globe, ExternalLink } from "lucide-react";
+
+interface NewsItem {
+  title: string;
+  link: string;
+  source: string;
+  pubDate: string;
+}
+
+const VISIBLE_COUNT = 5;
+
+export function BreakingNewsWidget() {
+  const { data: news, isLoading } = useQuery<NewsItem[]>({
+    queryKey: ["/api/breaking-news"],
+  });
+
+  const [offset, setOffset] = useState(0);
+  const [paused, setPaused] = useState(false);
+
+  const items = news || [];
+  const total = items.length;
+
+  const advance = useCallback(() => {
+    if (total <= VISIBLE_COUNT) return;
+    setOffset((o) => (o + 1) % total);
+  }, [total]);
+
+  useEffect(() => {
+    if (paused || total <= VISIBLE_COUNT) return;
+    const timer = setInterval(advance, 5000);
+    return () => clearInterval(timer);
+  }, [paused, advance, total]);
+
+  const visible: NewsItem[] = [];
+  for (let i = 0; i < Math.min(VISIBLE_COUNT, total); i++) {
+    visible.push(items[(offset + i) % total]);
+  }
+
+  return (
+    <div
+      className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col"
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+      data-testid="widget-breaking-news"
+    >
+      <div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
+        <Globe className="w-4 h-4 text-primary" />
+        <h3 className="font-bold text-card-foreground text-sm">Aktuelle Nachrichten</h3>
+      </div>
+      <div className="p-3 flex-1 flex flex-col justify-between">
+        {visible.map((item, i) => (
+          <a
+            key={`${offset}-${i}`}
+            href={item.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block group cursor-pointer"
+            data-testid={`link-breaking-news-${i}`}
+          >
+            <div className="flex items-start gap-2">
+              <div className="flex-1 min-w-0">
+                <h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
+                  {item.title}
+                </h4>
+                <div className="flex items-center gap-1.5 mt-1">
+                  <span className="text-[10px] text-primary font-medium">{item.source}</span>
+                  <span className="text-[10px] text-muted-foreground">{item.pubDate}</span>
+                </div>
+              </div>
+              <ExternalLink className="w-3 h-3 text-muted-foreground flex-shrink-0 mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity" />
+            </div>
+            {i < VISIBLE_COUNT - 1 && <div className="border-b border-card-border mt-2 mb-2" />}
+          </a>
+        ))}
+        {isLoading && (
+          <div className="space-y-3 flex-1">
+            {Array.from({ length: VISIBLE_COUNT }).map((_, i) => (
+              <div key={i} className="space-y-1.5">
+                <div className="h-3 bg-muted animate-pulse rounded w-full" />
+                <div className="h-3 bg-muted animate-pulse rounded w-3/4" />
+                <div className="h-2 bg-muted animate-pulse rounded w-1/3 mt-1" />
+                {i < VISIBLE_COUNT - 1 && <div className="border-b border-card-border mt-3" />}
+              </div>
+            ))}
+          </div>
+        )}
+        {!isLoading && total === 0 && (
+          <p className="text-xs text-muted-foreground text-center py-2">Keine Nachrichten verfügbar</p>
+        )}
+      </div>
+    </div>
+  );
+}

client/src/pages/home.tsx

@@ -13,6 +13,7 @@ import { HoroscopeWidget } from "@/components/horoscope-widget";
 import { RecipeWidget } from "@/components/recipe-widget";
 import { NewsWidget } from "@/components/news-widget";
 import { WeatherWidget } from "@/components/weather-widget";
+import { BreakingNewsWidget } from "@/components/breaking-news-widget";
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 
 function useFocalPoints() {
@@ -428,6 +429,7 @@ export default function Home() {
       { id: "horoscope-weather", el: <div key="horoscope-weather" className="flex flex-col gap-4"><HoroscopeWidget /><WeatherWidget /></div> },
       { id: "gallery", el: <PhotoGalleryWidget key="gallery" /> },
       { id: "news", el: <div key="news" className="flex flex-col gap-4"><NewsWidget /></div> },
+      { id: "breaking", el: <div key="breaking" className="flex flex-col gap-4"><BreakingNewsWidget /></div> },
     ];
     for (let i = w.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
@@ -440,16 +442,15 @@ export default function Home() {
     const items: { type: "article" | "widget"; article?: Article; widget?: typeof widgets[0] }[] = [];
     let ai = 0;
     let wi = 0;
+    const widgetRows = Math.ceil(widgets.length / 2);
 
-    items.push({ type: "article", article: shuffled[ai++] });
-    items.push({ type: "article", article: shuffled[ai++] });
-    if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
-    if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
-
-    items.push({ type: "article", article: shuffled[ai++] });
-    items.push({ type: "article", article: shuffled[ai++] });
-    if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
-    if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
+    for (let r = 0; r < widgetRows; r++) {
+      if (ai < shuffled.length) items.push({ type: "article", article: shuffled[ai++] });
+      if (ai < shuffled.length) items.push({ type: "article", article: shuffled[ai++] });
+      if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
+      if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
+      else if (ai < shuffled.length) items.push({ type: "article", article: shuffled[ai++] });
+    }
 
     while (ai < shuffled.length) {
       items.push({ type: "article", article: shuffled[ai++] });