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
2026-02-28 22:10:27 +00:00
parent a2dc9f36d9
commit 65205f55cd
4 changed files with 152 additions and 9 deletions
@@ -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>
+  );
+}