From 3b180b84a4ec9780cf67ec430ec54f34327f03d2 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sun, 17 Aug 2025 08:49:58 +0000
Subject: [PATCH] Add icons to announcement cards to visually represent
 announcement types

Integrate type icons into the AnnouncementCard component by importing getTypeIcon and rendering the icon next to the announcement title, improving visual clarity.

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/7I4lS2Q
---
 client/src/components/AnnouncementCard.tsx | 52 ++++++++++++----------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/client/src/components/AnnouncementCard.tsx b/client/src/components/AnnouncementCard.tsx
index 1585ace..d56e520 100644
--- a/client/src/components/AnnouncementCard.tsx
+++ b/client/src/components/AnnouncementCard.tsx
@@ -383,33 +383,37 @@ export default function AnnouncementCard() {
           <div className="space-y-3">
             {announcements.map((announcement) => {
               const priorityConfig = getPriorityConfig(announcement.type);
+              const TypeIcon = getTypeIcon(announcement.type);
               
               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">
-                    <div className="flex items-center gap-2 mb-1">
-                      <h4 className="font-medium text-sm truncate">
-                        {announcement.title}
-                      </h4>
-                      <Badge variant={priorityConfig.color} className="flex items-center gap-1 text-xs">
-                        {priorityConfig.label}
-                      </Badge>
-                    </div>
-                    
-                    {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>
-                        {safeFormat(safeDate(announcement.createdAt), 'dd/MM à HH:mm')}
-                      </span>
-                      <span>
-                        {announcement.author.firstName} {announcement.author.lastName}
-                        {announcement.group && ` • ${announcement.group.name}`}
-                      </span>
+                  <div className="flex items-start gap-3 flex-1 min-w-0">
+                    <TypeIcon className="h-4 w-4 text-blue-600 mt-0.5 flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h4 className="font-medium text-sm truncate">
+                          {announcement.title}
+                        </h4>
+                        <Badge variant={priorityConfig.color} className="flex items-center gap-1 text-xs">
+                          {priorityConfig.label}
+                        </Badge>
+                      </div>
+                      
+                      {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>
+                          {safeFormat(safeDate(announcement.createdAt), 'dd/MM à HH:mm')}
+                        </span>
+                        <span>
+                          {announcement.author.firstName} {announcement.author.lastName}
+                          {announcement.group && ` • ${announcement.group.name}`}
+                        </span>
+                      </div>
                     </div>
                   </div>
                   {user?.role === 'admin' && (