From bbeced68f7329ca328fcd2f3d158b8ac7610943d Mon Sep 17 00:00:00 2001
From: Joseph Nuthalapati <njoseph@riseup.net>
Date: Tue, 8 Jul 2025 14:41:45 +0530
Subject: [PATCH] notifications: Add datetime to each notification

- Notifications are displayed in a user-friendly "time ago" format.

- Use last_update_time instead of created_time

Sunil:

- Some notifications don't have app name and app icon. Styling for those
notification was different due to the last update time. Revert back to
positioning for it. Use CSS float for it.

- Use localized, locale specific date/time format for the tooltip.

Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
---
 plinth/templates/notifications.html | 44 +++++++++++++++++------------
 static/themes/default/css/main.css  |  6 ++++
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/plinth/templates/notifications.html b/plinth/templates/notifications.html
index 5b9a2c738..25d52c2f2 100644
--- a/plinth/templates/notifications.html
+++ b/plinth/templates/notifications.html
@@ -12,25 +12,33 @@
     <ul>
       {% for note in notifications %}
         <li class="notification notification-{{ note.severity }}">
-          {% if note.data.app_name %}
-            <div class="app-name">
-              {% if note.data.app_icon %}
-                <div class="app-icon fa {{ note.data.app_icon }}"></div>
-              {% elif note.data.app_icon_filename %}
-                {% if note.app_id %}
-                  <img src="{% static note.app_id %}/icons/{{ note.data.app_icon_filename }}.svg"
-                       alt="{{ note.data.app_name }}"
-                       class="notification-icon" />
-                {% else %}
-                  <img src="{% static 'theme/icons/' %}{{ note.data.app_icon_filename }}.svg"
-                       alt="{{ note.data.app_name }}"
-                       class="notification-icon" />
-                {% endif %}
-              {% endif %}
+          <div class="notification-header">
+            <span class="notification-time"
+                  title="{{ note.last_update_time|date:'DATETIME_FORMAT' }}">
+              {% blocktrans trimmed with time_since=note.last_update_time|timesince %}
+                {{ time_since }} ago
+              {% endblocktrans %}
+            </span>
 
-              {{ note.data.app_name }}
-            </div>
-          {% endif %}
+            {% if note.data.app_name %}
+              <div class="app-name">
+                {% if note.data.app_icon %}
+                  <div class="app-icon fa {{ note.data.app_icon }}"></div>
+                {% elif note.data.app_icon_filename %}
+                  {% if note.app_id %}
+                    <img src="{% static note.app_id %}/icons/{{ note.data.app_icon_filename }}.svg"
+                         alt="{{ note.data.app_name }}"
+                         class="notification-icon" />
+                  {% else %}
+                    <img src="{% static 'theme/icons/' %}{{ note.data.app_icon_filename }}.svg"
+                         alt="{{ note.data.app_name }}"
+                         class="notification-icon" />
+                  {% endif %}
+                {% endif %}
+                {{ note.data.app_name }}
+              </div>
+            {% endif %}
+          </div>
 
           {% if note.body %}
             {{ note.body.content.decode|safe }}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index a6dee5f3e..a1820d9a4 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -1020,6 +1020,12 @@ section.app-description {
     border-top: 1px solid var(--bs-border-color-translucent);
 }
 
+.notification-time {
+    float: right;
+    font-size: 0.8rem;
+    color: var(--bs-secondary-color);
+}
+
 .notification-title {
     font-weight: bold;
 }