[Chore]: Add auto-reload timer to inbox view

Happy new year everyone! <3 Clara loves all of you

infrastructure/web/public/javascripts/inbox-init.js

@@ -4,6 +4,8 @@ document.addEventListener('DOMContentLoaded', () => {
     // Get expiry config from data attributes
     const expiryTime = script && script.dataset.expiryTime ? Number(script.dataset.expiryTime) : 48;
     const expiryUnit = script && script.dataset.expiryUnit ? script.dataset.expiryUnit : 'hours';
+    const refreshInterval = script && script.dataset.refreshInterval ? Number(script.dataset.refreshInterval) : null;
+
     if (address) {
         enableNewMessageNotifications(address, true);
     }
@@ -15,4 +17,9 @@ document.addEventListener('DOMContentLoaded', () => {
     if (window.utils && typeof window.utils.formatEmailDates === 'function') {
         window.utils.formatEmailDates();
     }
+
+    // Initialize refresh countdown
+    if (window.utils && typeof window.utils.initRefreshCountdown === 'function' && refreshInterval) {
+        window.utils.initRefreshCountdown(refreshInterval);
+    }
 });

infrastructure/web/public/javascripts/utils.js

@@ -347,8 +347,27 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
+    function initRefreshCountdown(refreshInterval) {
+        const refreshTimer = document.getElementById('refreshTimer');
+        if (!refreshTimer || !refreshInterval) return;
+
+        let secondsLeft = refreshInterval;
+
+        function updateTimer() {
+            refreshTimer.textContent = secondsLeft;
+            secondsLeft--;
+
+            if (secondsLeft < 0) {
+                secondsLeft = refreshInterval;
+            }
+        }
+
+        updateTimer(); // Initial update
+        setInterval(updateTimer, 1000);
+    }
+
     // Expose utilities and run them
-    window.utils = { formatEmailDates, formatMailDate, initLockModals, initCopyAddress, initExpiryTimers, initQrModal, initHamburgerMenu, initThemeToggle };
+    window.utils = { formatEmailDates, formatMailDate, initLockModals, initCopyAddress, initExpiryTimers, initQrModal, initHamburgerMenu, initThemeToggle, initRefreshCountdown };
     formatEmailDates();
     formatMailDate();
     initLockModals();

infrastructure/web/public/stylesheets/custom.css

@@ -1047,6 +1047,36 @@ body.light-mode .theme-icon-light {
 }
 
 
+/* Refresh countdown timer */
+
+.refresh-countdown {
+    color: var(--color-text-dim);
+    font-size: 0.9rem;
+    padding: 6px 12px;
+    background: var(--overlay-purple-10);
+    border: 1px solid var(--overlay-purple-20);
+    border-radius: 12px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    opacity: 0.8;
+    transition: opacity 0.3s ease;
+    width: fit-content;
+    margin: 0 auto;
+}
+
+.refresh-countdown:hover {
+    opacity: 1;
+}
+
+#refreshTimer {
+    font-weight: 600;
+    color: var(--color-accent-purple-light);
+    min-width: 2ch;
+    text-align: center;
+}
+
+
 /* Responsive Styles */
 
 @media (max-width: 768px) {

infrastructure/web/routes/inbox.js

@@ -77,7 +77,8 @@ router.get('^/:address([^@/]+@[^@/]+)', sanitizeAddress, validateDomain, checkLo
             error: lockError,
             redirectTo: req.originalUrl,
             expiryTime: config.email.purgeTime.time,
-            expiryUnit: config.email.purgeTime.unit
+            expiryUnit: config.email.purgeTime.unit,
+            refreshInterval: config.imap.refreshIntervalSeconds
         })
     } catch (error) {
         debug(`Error loading inbox for ${req.params.address}:`, error.message)

infrastructure/web/views/inbox.twig

@@ -30,7 +30,7 @@
 
 {% block body %}
     <script src="/javascripts/qrcode.js"></script>
-    <script src="/javascripts/inbox-init.js" defer data-address="{{ address }}" data-expiry-time="{{ expiryTime }}" data-expiry-unit="{{ expiryUnit }}"></script>
+    <script src="/javascripts/inbox-init.js" defer data-address="{{ address }}" data-expiry-time="{{ expiryTime }}" data-expiry-unit="{{ expiryUnit }}" data-refresh-interval="{{ refreshInterval }}"></script>
     <div class="inbox-container">
         <div class="inbox-header">
             <h1 class="inbox-title" id="copyAddress" title="Click to copy address">{{ address }}</h1>
@@ -71,7 +71,7 @@
             There are no mails yet.
         </blockquote>
     {% endif %}
-
+    <div class="refresh-countdown" id="refreshCountdown">Auto-refresh in <span id="refreshTimer">--</span>s</div>
     {% if lockEnabled and not isLocked %}
     <!-- Lock Modal -->
     <div id="lockModal" class="modal" style="display: none;" data-lock-error="{{ error|default('') }}">