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++] });

server/routes.ts

@@ -293,5 +293,52 @@ export async function registerRoutes(
     }
   });
 
+  app.get("/api/breaking-news", async (_req, res) => {
+    try {
+      const topics = ["Nachrichten+Deutschland", "Nachrichten+Oesterreich", "Nachrichten+Europa", "Wirtschaft+aktuell", "Sport+aktuell"];
+      const topic = topics[Math.floor(Date.now() / 3600000) % topics.length];
+      const rssUrl = `https://news.google.com/rss/search?q=${topic}&hl=de&gl=DE&ceid=DE:de`;
+
+      const response = await new Promise<string>((resolve, reject) => {
+        https.get(rssUrl, (resp) => {
+          let data = "";
+          resp.on("data", (chunk: Buffer) => (data += chunk.toString()));
+          resp.on("end", () => resolve(data));
+          resp.on("error", reject);
+        }).on("error", reject);
+      });
+
+      const items: { title: string; link: string; source: string; pubDate: string }[] = [];
+      const itemRegex = /<item>([\s\S]*?)<\/item>/g;
+      let match;
+      while ((match = itemRegex.exec(response)) !== null && items.length < 10) {
+        const block = match[1];
+        const title = block.match(/<title>(.*?)<\/title>/)?.[1]?.replace(/<!\[CDATA\[|\]\]>/g, "") || "";
+        const link = block.match(/<link>(.*?)<\/link>/)?.[1] || "";
+        const source = block.match(/<source[^>]*>(.*?)<\/source>/)?.[1]?.replace(/<!\[CDATA\[|\]\]>/g, "") || "";
+        const pubDateRaw = block.match(/<pubDate>(.*?)<\/pubDate>/)?.[1] || "";
+
+        let pubDate = "";
+        try {
+          const d = new Date(pubDateRaw);
+          const diffH = Math.floor((Date.now() - d.getTime()) / 3600000);
+          if (diffH < 1) pubDate = "Gerade eben";
+          else if (diffH < 24) pubDate = `vor ${diffH} Std.`;
+          else pubDate = `vor ${Math.floor(diffH / 24)} T.`;
+        } catch {
+          pubDate = "";
+        }
+
+        if (title && link) {
+          items.push({ title, link, source, pubDate });
+        }
+      }
+
+      res.json(items);
+    } catch (err: any) {
+      res.json([]);
+    }
+  });
+
   return httpServer;
 }