Update comment icons to reflect new or existing comments

Improve UI by dynamically coloring comment icons based on the presence of comments and updating comment counts immediately after comment actions. This involves invalidating relevant queries in `ReconciliationComments.tsx` and modifying the rendering logic for comment icons and titles in `BLReconciliation.tsx`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1e4433b5-47ab-464c-b663-fea2e53367dd
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/1e4433b5-47ab-464c-b663-fea2e53367dd/awJgdDR

.replit

@@ -19,10 +19,6 @@ externalPort = 80
 localPort = 33873
 externalPort = 3003
 
-[[ports]]
-localPort = 38213
-externalPort = 5000
-
 [[ports]]
 localPort = 38343
 externalPort = 3000

client/src/components/ReconciliationComments.tsx

@@ -58,6 +58,9 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
         description: "Commentaire ajouté avec succès",
       });
       queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+      // Invalider aussi les queries des livraisons pour mettre à jour le compteur de commentaires
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
       setIsAdding(false);
       setNewComment("");
     },
@@ -81,6 +84,9 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
         description: "Commentaire modifié avec succès",
       });
       queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+      // Invalider aussi les queries des livraisons pour mettre à jour le compteur de commentaires
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
       setEditingId(null);
     },
     onError: (error: any) => {
@@ -103,6 +109,9 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
         description: "Commentaire supprimé avec succès",
       });
       queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+      // Invalider aussi les queries des livraisons pour mettre à jour le compteur de commentaires
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
     },
     onError: (error: any) => {
       toast({

client/src/pages/BLReconciliation.tsx

@@ -1200,10 +1200,20 @@ export default function BLReconciliation() {
                                 <div className="flex items-center justify-end space-x-2">
                                   <button
                                     onClick={() => handleOpenCommentModal(delivery)}
-                                    className="transition-colors duration-200 p-1 rounded text-gray-600 hover:text-gray-700 hover:bg-gray-50 opacity-70"
-                                    title="Voir/Gérer les commentaires"
+                                    className={`transition-colors duration-200 p-1 rounded ${
+                                      delivery.reconciliationCommentsCount && delivery.reconciliationCommentsCount > 0
+                                        ? 'text-blue-600 hover:text-blue-700 hover:bg-blue-50'
+                                        : 'text-gray-600 hover:text-gray-700 hover:bg-gray-50'
+                                    } opacity-70`}
+                                    title={`Voir/Gérer les commentaires ${
+                                      delivery.reconciliationCommentsCount ? `(${delivery.reconciliationCommentsCount})` : ''
+                                    }`}
                                   >
-                                    <MessageSquare className="h-4 w-4" />
+                                    <MessageSquare className={`h-4 w-4 ${
+                                      delivery.reconciliationCommentsCount && delivery.reconciliationCommentsCount > 0
+                                        ? 'fill-blue-200'
+                                        : ''
+                                    }`} />
                                   </button>
                                   {(permissions.canEdit('reconciliation') || permissions.canValidate('reconciliation')) && (
                                     <button