Highlight new articles with animated badges and update UI elements

Fetch all articles to count them per media outlet and display a "NEW" badge with a subtle animation on cards with new content.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/hntn6cC

client/src/components/MainContent.tsx

@@ -2,11 +2,12 @@ import { useQuery } from "@tanstack/react-query";
 import { Card, CardContent } from "@/components/ui/card";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
-import type { MediaOutlet } from "@shared/schema";
+import { Badge } from "@/components/ui/badge";
+import type { MediaOutlet, Article } from "@shared/schema";
 import { useAuth } from "@/hooks/useAuth";
 import Footer from "@/components/Footer";
 import { useState } from "react";
-import { ArrowUpDown } from "lucide-react";
+import { ArrowUpDown, Sparkles } from "lucide-react";
 import { Link } from "wouter";
 
 const categories = [
@@ -33,6 +34,26 @@ export default function MainContent() {
     },
   });
 
+  // Fetch all articles to count per outlet
+  const { data: allArticles = [] } = useQuery<Article[]>({
+    queryKey: ["/api/articles"],
+    queryFn: async () => {
+      const res = await fetch("/api/articles", {
+        credentials: "include",
+      });
+      if (!res.ok) {
+        throw new Error(`${res.status}: ${res.statusText}`);
+      }
+      return res.json();
+    },
+  });
+
+  // Count articles per outlet
+  const articleCountByOutlet = allArticles.reduce((acc, article) => {
+    acc[article.mediaOutletId] = (acc[article.mediaOutletId] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
   // Group outlets by category and sort
   const getOutletsByCategory = (category: string) => {
     const filtered = allOutlets.filter(outlet => 
@@ -49,53 +70,75 @@ export default function MainContent() {
     });
   };
 
-  const renderOutletCard = (outlet: MediaOutlet) => (
+  const renderOutletCard = (outlet: MediaOutlet) => {
-    <Card 
+    const articleCount = articleCountByOutlet[outlet.id] || 0;
-      key={outlet.id}
+    const hasArticles = articleCount > 0;
-      className="hover:shadow-md transition-shadow cursor-pointer bg-white"
+    
-      data-testid={`card-outlet-${outlet.id}`}
+    return (
-    >
+      <Card 
-      <CardContent className="p-2">
+        key={outlet.id}
-        <div className="flex items-center space-x-2">
+        className={`hover:shadow-md transition-all cursor-pointer bg-white relative ${
-          <div 
+          hasArticles ? 'animate-float ring-2 ring-blue-400/30 shadow-lg' : ''
-            className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all"
+        }`}
-            onClick={(e) => {
+        data-testid={`card-outlet-${outlet.id}`}
-              e.stopPropagation();
+      >
-              if (outlet.imageUrl) {
+        {hasArticles && (
-                setEnlargedImage(outlet.imageUrl);
+          <div className="absolute -top-2 -right-2 z-10">
-              }
+            <Badge className="bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg animate-pulse">
-            }}
+              <Sparkles className="h-3 w-3 mr-1" />
-            data-testid={`image-profile-${outlet.id}`}
+              NEW
-          >
+            </Badge>
-            {outlet.imageUrl ? (
-              <img 
-                src={outlet.imageUrl} 
-                alt={outlet.name}
-                className="w-full h-full object-cover"
-                style={{objectPosition: 'center top'}}
-              />
-            ) : (
-              <div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
-                <span className="text-gray-600 text-sm font-medium">
-                  {outlet.name.charAt(0)}
-                </span>
-              </div>
-            )}
           </div>
-          <Link href={`/media/${outlet.slug}`} className="flex-1 min-w-0" data-testid={`link-outlet-${outlet.id}`}>
+        )}
-            <div className="flex-1 min-w-0">
+        <CardContent className="p-2">
-              <h3 className="font-medium text-gray-900 truncate">
+          <div className="flex items-center space-x-2">
-                {outlet.name}
+            <div 
-              </h3>
+              className={`w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all ${
-              <p className="text-sm text-gray-500 truncate">
+                hasArticles ? 'ring-2 ring-blue-400/50' : ''
-                {outlet.description || "Media Outlet"}
+              }`}
-              </p>
+              onClick={(e) => {
+                e.stopPropagation();
+                if (outlet.imageUrl) {
+                  setEnlargedImage(outlet.imageUrl);
+                }
+              }}
+              data-testid={`image-profile-${outlet.id}`}
+            >
+              {outlet.imageUrl ? (
+                <img 
+                  src={outlet.imageUrl} 
+                  alt={outlet.name}
+                  className="w-full h-full object-cover"
+                  style={{objectPosition: 'center top'}}
+                />
+              ) : (
+                <div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
+                  <span className="text-gray-600 text-sm font-medium">
+                    {outlet.name.charAt(0)}
+                  </span>
+                </div>
+              )}
             </div>
-          </Link>
+            <Link href={`/media/${outlet.slug}`} className="flex-1 min-w-0" data-testid={`link-outlet-${outlet.id}`}>
-        </div>
+              <div className="flex-1 min-w-0">
-      </CardContent>
+                <h3 className="font-medium text-gray-900 truncate">
-    </Card>
+                  {outlet.name}
-  );
+                  {hasArticles && (
+                    <span className="ml-2 text-xs text-blue-600 font-bold">
+                      ({articleCount})
+                    </span>
+                  )}
+                </h3>
+                <p className="text-sm text-gray-500 truncate">
+                  {outlet.description || "Media Outlet"}
+                </p>
+              </div>
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  };
 
   return (
     <div className="flex flex-col min-h-screen bg-gray-50">

client/src/index.css

@@ -123,6 +123,25 @@
   .card-hover {
     transition: all 0.2s ease-in-out;
   }
+
+  @keyframes float {
+    0%, 100% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-8px);
+    }
+  }
+
+  .animate-float {
+    animation: float 3s ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .animate-float {
+      animation: none;
+    }
+  }
   
   .card-hover:hover {
     transform: translateY(-2px);