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
2025-09-30 05:48:02 +00:00
parent a1971efdc3
commit 88c60741e9
2 changed files with 109 additions and 47 deletions
--- a/client/src/components/MainContent.tsx
+++ b/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) => (
-    <Card 
-      key={outlet.id}
-      className="hover:shadow-md transition-shadow cursor-pointer bg-white"
-      data-testid={`card-outlet-${outlet.id}`}
-    >
-      <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"
-            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>
-            )}
+  const renderOutletCard = (outlet: MediaOutlet) => {
+    const articleCount = articleCountByOutlet[outlet.id] || 0;
+    const hasArticles = articleCount > 0;
+    
+    return (
+      <Card 
+        key={outlet.id}
+        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>
-          <Link href={`/media/${outlet.slug}`} className="flex-1 min-w-0" data-testid={`link-outlet-${outlet.id}`}>
-            <div className="flex-1 min-w-0">
-              <h3 className="font-medium text-gray-900 truncate">
-                {outlet.name}
-              </h3>
-              <p className="text-sm text-gray-500 truncate">
-                {outlet.description || "Media Outlet"}
-              </p>
+        )}
+        <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 ${
+                hasArticles ? 'ring-2 ring-blue-400/50' : ''
+              }`}
+              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>
-        </div>
-      </CardContent>
-    </Card>
-  );
+            <Link href={`/media/${outlet.slug}`} className="flex-1 min-w-0" data-testid={`link-outlet-${outlet.id}`}>
+              <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"}
+                </p>
+              </div>
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  };

  return (
    <div className="flex flex-col min-h-screen bg-gray-50">
--- a/client/src/index.css
+++ b/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);