From 7591d5699ede30fa49024aa615bf83e70108f954 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sat, 16 Aug 2025 12:56:56 +0000
Subject: [PATCH] Update announcement cards to match task card design and
 functionality

Refactors `AnnouncementCard.tsx` to mirror the design and priority display of task cards, introducing new icons and a `getPriorityConfig` function for consistent visual representation of announcement priorities (urgent, important, normal).

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e437ffed-c31b-44eb-9fd5-b6f9faa8e7ce
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/e437ffed-c31b-44eb-9fd5-b6f9faa8e7ce/aVFsaJG
---
 client/src/components/AnnouncementCard.tsx | 52 ++++++++++++++++------
 1 file changed, 39 insertions(+), 13 deletions(-)

diff --git a/client/src/components/AnnouncementCard.tsx b/client/src/components/AnnouncementCard.tsx
index 7716baf..e192c53 100644
--- a/client/src/components/AnnouncementCard.tsx
+++ b/client/src/components/AnnouncementCard.tsx
@@ -4,7 +4,7 @@ import { useStore } from "@/components/Layout";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Megaphone, Plus, X, AlertTriangle, Info, Bell } from "lucide-react";
+import { Megaphone, Plus, X, AlertTriangle, Clock, Circle } from "lucide-react";
 import { useState } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
@@ -331,6 +331,33 @@ export default function AnnouncementCard() {
         ) : (
           <div className="space-y-3">
             {announcements.map((announcement) => {
+              const getPriorityConfig = (priority: string) => {
+                switch (priority) {
+                  case 'urgent':
+                    return { 
+                      color: 'destructive' as const, 
+                      icon: AlertTriangle, 
+                      label: 'Urgente' 
+                    };
+                  case 'important':
+                    return { 
+                      color: 'default' as const, 
+                      icon: Clock, 
+                      label: 'Importante' 
+                    };
+                  case 'normal':
+                  default:
+                    return { 
+                      color: 'secondary' as const, 
+                      icon: Circle, 
+                      label: 'Normale' 
+                    };
+                }
+              };
+
+              const priorityConfig = getPriorityConfig(announcement.priority);
+              const PriorityIcon = priorityConfig.icon;
+              
               return (
                 <div key={announcement.id} className="flex items-start justify-between p-3 rounded-lg border bg-card hover:bg-accent/50 transition-colors">
                   <div className="flex-1 min-w-0">
@@ -338,26 +365,25 @@ export default function AnnouncementCard() {
                       <h4 className="font-medium text-sm truncate">
                         {announcement.title}
                       </h4>
-                      <Badge variant="secondary" className={getPriorityColor(announcement.priority)}>
-                        <span className="flex items-center gap-1">
-                          {getPriorityIcon(announcement.priority)}
-                          {announcement.priority === 'urgent' ? 'Urgent' : 
-                           announcement.priority === 'important' ? 'Important' : 'Normal'}
-                        </span>
+                      <Badge variant={priorityConfig.color} className="flex items-center gap-1 text-xs">
+                        <PriorityIcon className="w-2.5 h-2.5" />
+                        {priorityConfig.label}
                       </Badge>
                     </div>
                     
-                    <p className="text-xs text-muted-foreground mb-1 line-clamp-2">
-                      {announcement.content}
-                    </p>
+                    {announcement.content && (
+                      <p className="text-xs text-muted-foreground mb-1 line-clamp-1">
+                        {announcement.content}
+                      </p>
+                    )}
                     
                     <div className="flex items-center gap-3 text-xs text-muted-foreground">
                       <span>
-                        Par {announcement.author.firstName} {announcement.author.lastName}
-                        {announcement.group && ` • ${announcement.group.name}`}
+                        {safeFormat(safeDate(announcement.createdAt), 'dd/MM à HH:mm')}
                       </span>
                       <span>
-                        {safeFormat(safeDate(announcement.createdAt), 'dd/MM HH:mm')}
+                        {announcement.author.firstName} {announcement.author.lastName}
+                        {announcement.group && ` • ${announcement.group.name}`}
                       </span>
                     </div>
                   </div>