feat: enhance notification flag badges with custom styling and expanded metadata

loko/notifications/models.py

@@ -364,9 +364,33 @@ class Discussion(models.Model):
     ]
 
     FLAG_META = {
-        FLAG_RED: {'label': _('Important / À traiter'), 'short_label': _('Important'), 'color': 'danger', 'icon': 'bi-flag-fill'},
+        FLAG_RED: {
-        FLAG_ORANGE: {'label': _('En cours'), 'short_label': _('En cours'), 'color': 'warning', 'icon': 'bi-flag-fill'},
+            'label': _('Important / À traiter'),
-        FLAG_GREEN: {'label': _('Traité / Fait'), 'short_label': _('Traité'), 'color': 'success', 'icon': 'bi-flag-fill'},
+            'short_label': _('Important'),
+            'color': '#dc3545',
+            'color_class': 'danger',
+            'icon': 'bi-flag-fill',
+            'badge_class': 'bg-danger text-white',
+            'style': 'background-color: #dc3545 !important; color: #ffffff !important;',
+        },
+        FLAG_ORANGE: {
+            'label': _('En cours'),
+            'short_label': _('En cours'),
+            'color': '#fd7e14',
+            'color_class': 'warning',
+            'icon': 'bi-flag-fill',
+            'badge_class': 'text-white',
+            'style': 'background-color: #fd7e14 !important; color: #ffffff !important;',
+        },
+        FLAG_GREEN: {
+            'label': _('Traité / Fait'),
+            'short_label': _('Traité'),
+            'color': '#198754',
+            'color_class': 'success',
+            'icon': 'bi-flag-fill',
+            'badge_class': 'bg-success text-white',
+            'style': 'background-color: #198754 !important; color: #ffffff !important;',
+        },
     }
 
     flag = models.CharField(

loko/notifications/templates/notifications/discussion_list.html

@@ -112,6 +112,7 @@
                                 </span>
                                 {% if item.discussion.flag %}
                                 <span class="badge {{ item.discussion.flag_info.badge_class }} rounded-pill px-2 py-0.5 small"
+                                      style="{{ item.discussion.flag_info.style }}"
                                       title="{{ item.discussion.flag_info.label }}{% if item.discussion.flag_set_by %} - {{ item.discussion.flag_set_by.get_full_name|default:item.discussion.flag_set_by.username }}{% endif %}">
                                     <i class="bi {{ item.discussion.flag_info.icon }} me-1"></i>{{ item.discussion.flag_info.label }}
                                 </span>

loko/notifications/templates/notifications/inbox.html

@@ -417,6 +417,7 @@
                                         </span>
                                         {% if item.discussion.flag %}
                                         <span class="badge {{ item.discussion.flag_info.badge_class }} rounded-pill px-2 py-0.5 small"
+                                              style="{{ item.discussion.flag_info.style }}"
                                               title="{{ item.discussion.flag_info.label }}{% if item.discussion.flag_set_by %} - {{ item.discussion.flag_set_by.get_full_name|default:item.discussion.flag_set_by.username }}{% endif %}">
                                             <i class="bi {{ item.discussion.flag_info.icon }} me-1"></i>{{ item.discussion.flag_info.label }}
                                         </span>

loko/notifications/templates/notifications/inbox_mobile.html

@@ -345,7 +345,8 @@
                             <!-- Badges -->
                             <div class="d-flex flex-wrap gap-1 mb-1.5">
                                 {% if item.discussion.flag %}
-                                <span class="badge {{ item.discussion.flag_info.badge_class }} rounded-pill py-0.5 px-1.5" style="font-size: 0.68rem;">
+                                <span class="badge {{ item.discussion.flag_info.badge_class }} rounded-pill py-0.5 px-1.5" style="font-size: 0.68rem; {{ item.discussion.flag_info.style }}"
+                                      title="{{ item.discussion.flag_info.label }}">
                                     <i class="bi {{ item.discussion.flag_info.icon }} me-0.5"></i>{{ item.discussion.flag_info.label }}
                                 </span>
                                 {% endif %}

loko/notifications/views.py

@@ -672,6 +672,7 @@ def discussion_set_flag(request, pk):
                 'label': str(discussion.flag_info.get('label', '')),
                 'color': discussion.flag_info.get('color', ''),
                 'badge_class': discussion.flag_info.get('badge_class', ''),
+                'style': discussion.flag_info.get('style', ''),
                 'icon': discussion.flag_info.get('icon', 'bi-flag-fill'),
                 'set_by': (
                     discussion.flag_set_by.get_full_name().strip() or discussion.flag_set_by.username