feat: Enhance notification system with WebSocket support and auto-hide alerts

templates/threads.html

@@ -8,6 +8,23 @@
         <div class="alert success" style="margin-bottom:12px;">
           ✓ Alerts processed! {{ alerts_processed }} thread(s) were checked for alerts.
         </div>
+        <script>
+          // Auto-hide the success alert after a short delay with a smooth fade-out
+          (function() {
+            const alertEl = document.currentScript?.previousElementSibling;
+            if (!alertEl || !alertEl.classList || !alertEl.classList.contains('alert')) return;
+            const hideMs = 3000; // visible duration
+            const fadeMs = 350;  // should match CSS transition
+            setTimeout(() => {
+              alertEl.classList.add('fade-out');
+              setTimeout(() => {
+                if (alertEl && alertEl.parentNode) {
+                  alertEl.parentNode.removeChild(alertEl);
+                }
+              }, fadeMs + 25);
+            }, hideMs);
+          })();
+        </script>
       {% endif %}
       {% if status %}
         <div class="muted" style="margin-top:6px;">
@@ -25,7 +42,7 @@
           <span style="margin-left:8px;">Last Sync: {{ status.last_sync_at or 'never' }}</span>
           <span style="margin-left:8px;">Items: {{ status.last_sync_count }}</span>
           {% if status.last_sync_error %}
-            <div class="muted">Error: {{ status.last_sync_error }}</div>
+            <div class="muted" style="margin-top:2px;">Error: {{ status.last_sync_error }}</div>
           {% endif %}
           {% if status.auto_process %}
             <div class="muted">Auto process enabled (every {{ status.interval }}m)</div>