Add icons to messages

nummi/main/static/main/css/main.css

@@ -291,21 +291,36 @@ ul.messages {
   font-weight: 550;
   list-style-type: none;
   margin: 0;
+  margin-bottom: var(--gap);
   background: var(--bg-01);
   padding: 0;
 
   li {
+    --message-color: var(--text);
     padding: calc(var(--gap) / 2) var(--gap);
-    border-left: var(--border) solid var(--gray);
+    border-left: var(--message-color) solid var(--border);
 
+    [class^="ri-"] {
+      height: 1.5em;
+      width: 1.5em;
+      line-height: 1.5em;
+      border-radius: var(--radius);
+      background: var(--message-color);
+      color: var(--bg);
+      margin-right: 0.5rem;
+    }
+
+    &.msg-level-20 {
+      --message-color: var(--green);
+    }
     &.msg-level-25 {
-      border-left-color: var(--green-1);
+      --message-color: var(--green-1);
     }
     &.msg-level-30 {
-      border-left-color: var(--red-1);
+      --message-color: var(--red-1);
     }
     &.msg-level-40 {
-      border-left-color: var(--red);
+      --message-color: var(--red);
     }
   }
 }

nummi/main/templates/main/base.html

@@ -82,7 +82,9 @@
         <main id="main">
             {% if messages %}
                 <ul class="messages">
-                    {% for message in messages %}<li class="msg-level-{{ message.level }}">{{ message }}</li>{% endfor %}
+                    {% for message in messages %}
+                        <li class="msg-level-{{ message.level }}">{{ message.level|messageicon }}{{ message }}</li>
+                    {% endfor %}
                 </ul>
             {% endif %}
             {% block body %}{% endblock %}

nummi/main/templatetags/main_extras.py

@@ -44,6 +44,19 @@ def remixnl(icon, cls=""):
     return mark_safe(f"""<span class="ri-{icon} {cls}"></span>""")
 
 
+@register.filter
+def messageicon(level):
+    ico = {
+        10: "bug",
+        20: "information",
+        25: "check",
+        30: "alert",
+        40: "error-warning",
+    }
+
+    return remix(ico.get(level, "question"))
+
+
 @register.filter
 def extension(file):
     return file.name.split(".")[-1].upper()