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,16 +70,32 @@ export default function MainContent() {
     });
   };
 
-  const renderOutletCard = (outlet: MediaOutlet) => (
+  const renderOutletCard = (outlet: MediaOutlet) => {
+    const articleCount = articleCountByOutlet[outlet.id] || 0;
+    const hasArticles = articleCount > 0;
+    
+    return (
       <Card 
         key={outlet.id}
-      className="hover:shadow-md transition-shadow cursor-pointer bg-white"
+        className={`hover:shadow-md transition-all cursor-pointer bg-white relative ${
+          hasArticles ? 'animate-float ring-2 ring-blue-400/30 shadow-lg' : ''
+        }`}
         data-testid={`card-outlet-${outlet.id}`}
       >
+        {hasArticles && (
+          <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" />
+              NEW
+            </Badge>
+          </div>
+        )}
         <CardContent className="p-2">
           <div className="flex items-center space-x-2">
             <div 
-            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"
+              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 ${
+                hasArticles ? 'ring-2 ring-blue-400/50' : ''
+              }`}
               onClick={(e) => {
                 e.stopPropagation();
                 if (outlet.imageUrl) {
@@ -86,6 +123,11 @@ export default function MainContent() {
               <div className="flex-1 min-w-0">
                 <h3 className="font-medium text-gray-900 truncate">
                   {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"}
@@ -96,6 +138,7 @@ export default function MainContent() {
         </CardContent>
       </Card>
     );
+  };
 
   return (
     <div className="flex flex-col min-h-screen bg-gray-50">

client/src/index.css

@@ -124,6 +124,25 @@
     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);
     box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.1);