From 9c083dc6d93bbe7e7e1fa70e47edab94f73ef9c1 Mon Sep 17 00:00:00 2001
From: Jon <git@jonstarkey.co.uk>
Date: Fri, 5 Jun 2026 20:44:55 +0100
Subject: [PATCH] Add sidebar clock (24h time + day-of-week date)

Small clock in the sidebar footer: HH:MM (24h) with weekday+date below; collapsed
sidebar shows just the time.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 manager/templates/base.html | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/manager/templates/base.html b/manager/templates/base.html
index f03cfa8..0794a4f 100644
--- a/manager/templates/base.html
+++ b/manager/templates/base.html
@@ -149,6 +149,14 @@
 
     .side-foot { margin-top: auto; padding: 8px 0; border-top: 1px solid var(--border); }
 
+    .side-clock { padding: 12px 18px 10px; border-bottom: 1px solid var(--border); text-align: center; }
+    .side-clock .clk-time { font-size: 20px; font-weight: 700; color: var(--text);
+                            font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
+    .side-clock .clk-date { font-size: 11px; color: var(--muted); margin-top: 2px; }
+    html.collapsed .side-clock { padding: 10px 0; }
+    html.collapsed .side-clock .clk-time { font-size: 12px; }
+    html.collapsed .side-clock .clk-date { display: none; }
+
     .side-status { padding: 10px 18px 12px; font-size: 12px; color: var(--muted);
                    border-bottom: 1px solid var(--border); }
     .side-status .ss-row { display: flex; align-items: center; gap: 6px; margin-top: 3px;
@@ -302,6 +310,10 @@
       <a href="https://simplex.chat/downloads/" target="_blank" rel="noopener" class="nav-sep"><span class="ico"><i class="fa-solid fa-download"></i></span><span class="lbl">Get App</span></a>
     </nav>
     <div class="side-foot">
+      <div class="side-clock" id="side-clock">
+        <div class="clk-time" id="clk-time">--:--</div>
+        <div class="clk-date ss-text" id="clk-date">—</div>
+      </div>
       <a href="/network" class="side-status" id="side-status" title="View SimpleX network &amp; servers"
          style="display:block;text-decoration:none;{% if nav_active == 'network' %}background:var(--bg);{% endif %}">
         <div class="ss-row"><span class="ss-dot" id="ss-dot"></span><span class="ss-text"><span id="ss-running">–/–</span>&nbsp;running</span></div>
@@ -335,6 +347,17 @@
     localStorage.setItem('sidebar-collapsed', collapsed ? '1' : '');
   }
 
+  // Sidebar clock: 24h time + day-of-week date
+  function tickClock() {
+    const now = new Date();
+    const te = document.getElementById('clk-time');
+    const de = document.getElementById('clk-date');
+    if (te) te.textContent = now.toLocaleTimeString('en-GB', {hour: '2-digit', minute: '2-digit', hour12: false});
+    if (de) de.textContent = now.toLocaleDateString('en-GB', {weekday: 'short', day: '2-digit', month: 'short', year: 'numeric'});
+  }
+  tickClock();
+  setInterval(tickClock, 1000);
+
   // Poll for unread notifications and update the sidebar badge
   async function pollNotifications() {
     try {