Add new content widgets and a dynamic bento grid homepage

Integrates photo gallery, horoscope, recipe, and news widgets into a dynamic MSN-style bento grid homepage. Adds new routes for gallery and updates navigation. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: ac196a32-ec08-4953-9df7-633cb142cc48 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb Replit-Helium-Checkpoint-Created: true
2026-02-28 18:26:40 +00:00
parent 8ef815824a
commit d28c36131c
12 changed files with 1847 additions and 174 deletions
@@ -0,0 +1,65 @@
+import { useQuery } from "@tanstack/react-query";
+import { Newspaper, ExternalLink } from "lucide-react";
+
+interface NewsItem {
+  title: string;
+  link: string;
+  source: string;
+  pubDate: string;
+}
+
+export function NewsWidget() {
+  const { data: news, isLoading } = useQuery<NewsItem[]>({
+    queryKey: ["/api/news-feed"],
+  });
+
+  return (
+    <div className="bg-card rounded-lg border border-card-border overflow-hidden h-full" data-testid="widget-news">
+      <div className="p-3 flex items-center gap-2 border-b border-card-border">
+        <Newspaper className="w-4 h-4 text-primary" />
+        <h3 className="font-bold text-card-foreground text-sm">Musiknachrichten</h3>
+      </div>
+      <div className="p-3 space-y-3">
+        {(news || []).slice(0, 5).map((item, i) => (
+          <a
+            key={i}
+            href={item.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block group cursor-pointer"
+            data-testid={`link-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 < 4 && <div className="border-b border-card-border mt-3" />}
+          </a>
+        ))}
+        {isLoading && (
+          <div className="space-y-3">
+            {Array.from({ length: 4 }).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 < 3 && <div className="border-b border-card-border mt-3" />}
+              </div>
+            ))}
+          </div>
+        )}
+        {!isLoading && (!news || news.length === 0) && (
+          <p className="text-xs text-muted-foreground text-center py-2">Keine Nachrichten verfügbar</p>
+        )}
+      </div>
+    </div>
+  );
+}