From ba0de5e1c7fd49f58bb2f06dc19c8dcbd6f16180 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sun, 17 Aug 2025 12:13:30 +0000
Subject: [PATCH 1/2] Show the full text of announcements to improve
 readability

Update AnnouncementCard component to display the entire announcement content without truncation, using `whitespace-pre-wrap` and `break-words` for proper formatting.

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/g53hZO6
---
 client/src/components/AnnouncementCard.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/AnnouncementCard.tsx b/client/src/components/AnnouncementCard.tsx
index d04e6b1..c4fa820 100644
--- a/client/src/components/AnnouncementCard.tsx
+++ b/client/src/components/AnnouncementCard.tsx
@@ -293,13 +293,13 @@ export default function AnnouncementCard() {
               const priorityConfig = getPriorityConfig(announcement.type);
               
               return (
-                <div key={announcement.id} className="flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors border-l-3 border-blue-500">
-                  <div className="flex items-center space-x-3">
-                    <div className="h-2 w-2 bg-blue-500"></div>
-                    <div>
+                <div key={announcement.id} className="flex items-start justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors border-l-3 border-blue-500">
+                  <div className="flex items-start space-x-3 flex-1 min-w-0">
+                    <div className="h-2 w-2 bg-blue-500 mt-2 flex-shrink-0"></div>
+                    <div className="min-w-0 flex-1">
                       <p className="font-medium text-gray-900">{announcement.title}</p>
                       {announcement.content && (
-                        <p className="text-sm text-gray-600 truncate max-w-60">{announcement.content}</p>
+                        <p className="text-sm text-gray-600 leading-relaxed whitespace-pre-wrap break-words">{announcement.content}</p>
                       )}
                       <p className="text-xs text-gray-500 mt-1">
                         {announcement.author?.firstName} {announcement.author?.lastName}

From 7cc9a090e711721ff5cef077ee5d97d694ac7b06 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sun, 17 Aug 2025 12:14:38 +0000
Subject: [PATCH 2/2] Add status icons next to announcement titles for better
 clarity

Update AnnouncementCard to display relevant status icons (error, warning, success, info) next to announcement titles, improving visual communication of priority.

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/LmEMw65
---
 client/src/components/AnnouncementCard.tsx | 37 ++++++++++++++++++----
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/client/src/components/AnnouncementCard.tsx b/client/src/components/AnnouncementCard.tsx
index c4fa820..8dbf000 100644
--- a/client/src/components/AnnouncementCard.tsx
+++ b/client/src/components/AnnouncementCard.tsx
@@ -36,7 +36,7 @@ import {
   Info, 
   AlertTriangle, 
   CheckCircle, 
-  XCircle 
+  AlertCircle 
 } from "lucide-react";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { useStore } from "@/components/Layout";
@@ -62,18 +62,38 @@ type AnnouncementWithRelations = DashboardMessage & {
   };
 };
 
-// Configuration des priorités
+// Configuration des priorités avec icônes
 const getPriorityConfig = (type: string) => {
   switch (type) {
     case 'error':
-      return { label: 'Erreur', color: 'bg-red-100 text-red-800' };
+      return { 
+        label: 'Erreur', 
+        color: 'bg-red-100 text-red-800',
+        icon: AlertCircle,
+        iconColor: 'text-red-600'
+      };
     case 'warning':
-      return { label: 'Attention', color: 'bg-orange-100 text-orange-800' };
+      return { 
+        label: 'Attention', 
+        color: 'bg-orange-100 text-orange-800',
+        icon: AlertTriangle,
+        iconColor: 'text-orange-600'
+      };
     case 'success':
-      return { label: 'Succès', color: 'bg-green-100 text-green-800' };
+      return { 
+        label: 'Succès', 
+        color: 'bg-green-100 text-green-800',
+        icon: CheckCircle,
+        iconColor: 'text-green-600'
+      };
     case 'info':
     default:
-      return { label: 'Information', color: 'bg-blue-100 text-blue-800' };
+      return { 
+        label: 'Information', 
+        color: 'bg-blue-100 text-blue-800',
+        icon: Info,
+        iconColor: 'text-blue-600'
+      };
   }
 };
 
@@ -297,7 +317,10 @@ export default function AnnouncementCard() {
                   <div className="flex items-start space-x-3 flex-1 min-w-0">
                     <div className="h-2 w-2 bg-blue-500 mt-2 flex-shrink-0"></div>
                     <div className="min-w-0 flex-1">
-                      <p className="font-medium text-gray-900">{announcement.title}</p>
+                      <div className="flex items-center gap-2 mb-1">
+                        <priorityConfig.icon className={`h-4 w-4 ${priorityConfig.iconColor}`} />
+                        <p className="font-medium text-gray-900">{announcement.title}</p>
+                      </div>
                       {announcement.content && (
                         <p className="text-sm text-gray-600 leading-relaxed whitespace-pre-wrap break-words">{announcement.content}</p>
                       )}