From c79d9e6f858d7571ec2573a14f541cac28be4089 Mon Sep 17 00:00:00 2001
From: kdeterme <karl.determe@gmail.com>
Date: Wed, 9 Sep 2026 22:28:22 +0200
Subject: [PATCH] feat: render system messages with HTML content and update UI
 styles for orange flag buttons in notifications

---
 .../notifications/discussion_list.html        |  4 ++++
 .../templates/notifications/inbox.html        |  8 ++++++--
 .../templates/notifications/inbox_mobile.html |  8 ++++++--
 loko/notifications/tests.py                   | 20 +++++++++++++++++--
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/loko/notifications/templates/notifications/discussion_list.html b/loko/notifications/templates/notifications/discussion_list.html
index b28ba8b..fd4ce49 100644
--- a/loko/notifications/templates/notifications/discussion_list.html
+++ b/loko/notifications/templates/notifications/discussion_list.html
@@ -136,8 +136,12 @@
                         <!-- Aperçu du message nettoyé des tags @[Nom](u:id) -->
                         {% if item.last_message %}
                         <p class="mb-2 small text-muted text-truncate mt-0.5" style="max-width: 780px;">
+                            {% if item.last_message.is_system %}
+                            <span class="text-secondary opacity-75 fst-italic">{{ item.last_message.content|clean_mentions_preview|safe }}</span>
+                            {% else %}
                             <strong class="text-secondary">{{ item.last_message.author.get_full_name|default:item.last_message.author.username }}</strong> :
                             <span class="text-dark opacity-75">{{ item.last_message.content|clean_mentions_preview|truncatechars:140 }}</span>
+                            {% endif %}
                         </p>
                         {% else %}
                         <p class="mb-2 small text-muted mt-0.5 fst-italic">{% translate "Aucun message encore." %}</p>
diff --git a/loko/notifications/templates/notifications/inbox.html b/loko/notifications/templates/notifications/inbox.html
index 4b5758d..0356560 100644
--- a/loko/notifications/templates/notifications/inbox.html
+++ b/loko/notifications/templates/notifications/inbox.html
@@ -370,8 +370,8 @@
                         <a href="?tab=discussions&flag=red" class="btn btn-sm {% if filter_flag == 'red' %}btn-danger text-white{% else %}btn-outline-danger{% endif %} rounded-pill px-2.5 py-0.5" style="font-size: 0.8rem;">
                             <i class="bi bi-flag-fill me-1"></i>{% translate "Important" %} ({{ flag_counts.red|default:"0" }})
                         </a>
-                        <a href="?tab=discussions&flag=orange" class="btn btn-sm {% if filter_flag == 'orange' %}btn-warning text-dark{% else %}btn-outline-warning text-dark{% endif %} rounded-pill px-2.5 py-0.5" style="font-size: 0.8rem;">
-                            <i class="bi bi-flag-fill me-1"></i>{% translate "En cours" %} ({{ flag_counts.orange|default:"0" }})
+                        <a href="?tab=discussions&flag=orange" class="btn btn-sm {% if filter_flag == 'orange' %}btn-warning text-dark{% else %}btn-outline-warning text-dark{% endif %} rounded-pill px-2.5 py-0.5" style="font-size: 0.8rem; {% if filter_flag != 'orange' %}border-color: #fd7e14;{% endif %}">
+                            <i class="bi bi-flag-fill me-1" style="color: #fd7e14;"></i>{% translate "En cours" %} ({{ flag_counts.orange|default:"0" }})
                         </a>
                         <a href="?tab=discussions&flag=green" class="btn btn-sm {% if filter_flag == 'green' %}btn-success text-white{% else %}btn-outline-success{% endif %} rounded-pill px-2.5 py-0.5" style="font-size: 0.8rem;">
                             <i class="bi bi-flag-fill me-1"></i>{% translate "Traité" %} ({{ flag_counts.green|default:"0" }})
@@ -441,8 +441,12 @@
                                 <!-- Aperçu du message nettoyé des tags @[Nom](u:id) -->
                                 {% if item.last_message %}
                                 <p class="mb-2 small text-muted text-truncate mt-0.5" style="max-width: 780px;">
+                                    {% if item.last_message.is_system %}
+                                    <span class="text-secondary opacity-75 fst-italic">{{ item.last_message.content|clean_mentions_preview|safe }}</span>
+                                    {% else %}
                                     <strong class="text-secondary">{{ item.last_message.author.get_full_name|default:item.last_message.author.username }}</strong> :
                                     <span class="text-dark opacity-75">{{ item.last_message.content|clean_mentions_preview|truncatechars:140 }}</span>
+                                    {% endif %}
                                 </p>
                                 {% else %}
                                 <p class="mb-2 small text-muted mt-0.5 fst-italic">{% translate "Aucun message encore." %}</p>
diff --git a/loko/notifications/templates/notifications/inbox_mobile.html b/loko/notifications/templates/notifications/inbox_mobile.html
index 40823a1..1c1d5ca 100644
--- a/loko/notifications/templates/notifications/inbox_mobile.html
+++ b/loko/notifications/templates/notifications/inbox_mobile.html
@@ -302,8 +302,8 @@
             <a href="?tab=discussions&flag=red" class="btn btn-sm {% if filter_flag == 'red' %}btn-danger text-white{% else %}btn-outline-danger{% endif %} rounded-pill px-2.5 py-1 text-nowrap" style="font-size: 0.78rem;">
                 <i class="bi bi-flag-fill me-1"></i>{% translate "Important" %} ({{ flag_counts.red|default:"0" }})
             </a>
-            <a href="?tab=discussions&flag=orange" class="btn btn-sm {% if filter_flag == 'orange' %}btn-warning text-dark{% else %}btn-outline-warning text-dark{% endif %} rounded-pill px-2.5 py-1 text-nowrap" style="font-size: 0.78rem;">
-                <i class="bi bi-flag-fill me-1"></i>{% translate "En cours" %} ({{ flag_counts.orange|default:"0" }})
+            <a href="?tab=discussions&flag=orange" class="btn btn-sm {% if filter_flag == 'orange' %}btn-warning text-dark{% else %}btn-outline-warning text-dark{% endif %} rounded-pill px-2.5 py-1 text-nowrap" style="font-size: 0.78rem; {% if filter_flag != 'orange' %}border-color: #fd7e14;{% endif %}">
+                <i class="bi bi-flag-fill me-1" style="color: #fd7e14;"></i>{% translate "En cours" %} ({{ flag_counts.orange|default:"0" }})
             </a>
             <a href="?tab=discussions&flag=green" class="btn btn-sm {% if filter_flag == 'green' %}btn-success text-white{% else %}btn-outline-success{% endif %} rounded-pill px-2.5 py-1 text-nowrap" style="font-size: 0.78rem;">
                 <i class="bi bi-flag-fill me-1"></i>{% translate "Traité" %} ({{ flag_counts.green|default:"0" }})
@@ -364,8 +364,12 @@
                             <!-- Aperçu dernier message -->
                             {% if item.last_message %}
                             <p class="mb-2 text-muted text-truncate" style="font-size: 0.82rem;">
+                                {% if item.last_message.is_system %}
+                                <span class="text-secondary opacity-75 fst-italic">{{ item.last_message.content|clean_mentions_preview|safe }}</span>
+                                {% else %}
                                 <strong class="text-secondary">{{ item.last_message.author.get_full_name|default:item.last_message.author.username }}</strong> :
                                 <span class="text-dark opacity-75">{{ item.last_message.content|clean_mentions_preview|truncatechars:90 }}</span>
+                                {% endif %}
                             </p>
                             {% else %}
                             <p class="mb-2 text-muted fst-italic" style="font-size: 0.82rem;">{% translate "Aucun message encore." %}</p>
diff --git a/loko/notifications/tests.py b/loko/notifications/tests.py
index ba720b7..ba5fb16 100644
--- a/loko/notifications/tests.py
+++ b/loko/notifications/tests.py
@@ -622,9 +622,25 @@ class DiscussionFlagTests(TestCase):
         self.client.force_login(self.user)
         from notifications.models import Message
         Message.objects.create(discussion=self.discussion, author=self.user, content="Hello message")
-        Message.objects.create(discussion=self.discussion, author=self.user, content="🚩 System flag", is_system=True)
+        Message.objects.create(discussion=self.discussion, author=self.user, content="<i class=\"bi bi-flag-fill text-danger me-1\"></i> System flag", is_system=True)
         url = reverse('notifications:discussion_detail', args=[self.discussion.pk])
         res = self.client.get(url)
         self.assertEqual(res.status_code, 200)
         self.assertContains(res, "Hello message")
-        self.assertContains(res, "System flag")
+        self.assertContains(res, "bi-flag-fill text-danger")
+
+    def test_inbox_renders_system_message_flag_icon_safely(self):
+        self.client.force_login(self.user)
+        from notifications.models import Message
+        Message.objects.create(
+            discussion=self.discussion,
+            author=self.user,
+            content='<i class="bi bi-flag-fill text-success me-1"></i> Alice Smith a défini le statut : Traité / Fait',
+            is_system=True,
+        )
+        url = reverse('notifications:inbox') + '?tab=discussions'
+        res = self.client.get(url)
+        self.assertEqual(res.status_code, 200)
+        # Icon should NOT be escaped as &lt;i
+        self.assertNotContains(res, '&lt;i class=')
+        self.assertContains(res, '<i class="bi bi-flag-fill text-success me-1"></i>')