From 6d8c727b29de79faa2c57e65a069f8990ae05d8a Mon Sep 17 00:00:00 2001
From: Md Bayazid  Bostame <bostame@bostame-2349.local>
Date: Wed, 1 Apr 2026 22:11:35 +0200
Subject: [PATCH] feat: add session warning countdown ring

---
 .../static/workflows/css/app_chrome.css       | 27 ++++++++++++++++---
 .../static/workflows/js/session_warning.js    |  8 +++++-
 .../templates/workflows/base_shell.html       |  5 +++-
 .../workflows/tests/test_session_warning.py   |  1 +
 4 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/backend/workflows/static/workflows/css/app_chrome.css b/backend/workflows/static/workflows/css/app_chrome.css
index d7880b9..d26c4ad 100644
--- a/backend/workflows/static/workflows/css/app_chrome.css
+++ b/backend/workflows/static/workflows/css/app_chrome.css
@@ -352,8 +352,15 @@
   inset: 0;
   background:
     radial-gradient(circle, rgba(255,255,255,0.92) 38%, rgba(255,255,255,0) 39%),
-    conic-gradient(from 0deg, rgba(201,37,37,0.16), rgba(255,191,120,0.64), rgba(201,37,37,0.2));
+    conic-gradient(
+      from -90deg,
+      rgba(201, 37, 37, 0.88) 0deg,
+      rgba(255, 191, 120, 0.74) calc(var(--session-warning-progress, 1) * 360deg),
+      rgba(225, 233, 242, 0.9) calc(var(--session-warning-progress, 1) * 360deg),
+      rgba(225, 233, 242, 0.9) 360deg
+    );
   box-shadow: 0 12px 24px rgba(128, 46, 18, 0.12);
+  transition: background 220ms linear;
 }
 
 .session-warning-orb-core {
@@ -362,9 +369,23 @@
   place-items: center;
   background: linear-gradient(180deg, #fff5ef, #ffe5d7);
   color: #a53b17;
-  font-size: 24px;
-  font-weight: 900;
+  text-align: center;
   line-height: 1;
+  gap: 1px;
+}
+
+.session-warning-orb-value {
+  display: block;
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.session-warning-orb-label {
+  display: block;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .session-warning-kicker {
diff --git a/backend/workflows/static/workflows/js/session_warning.js b/backend/workflows/static/workflows/js/session_warning.js
index bac59c7..ae7eff5 100644
--- a/backend/workflows/static/workflows/js/session_warning.js
+++ b/backend/workflows/static/workflows/js/session_warning.js
@@ -6,8 +6,10 @@
   const modal = document.getElementById("app-session-warning-modal");
   const countdown = document.getElementById("app-session-warning-countdown");
   const status = document.getElementById("app-session-warning-status");
+  const orb = modal.querySelector(".session-warning-orb-ring");
+  const orbValue = document.getElementById("app-session-warning-seconds");
   const extendButton = document.getElementById("app-session-warning-extend");
-  if (!modal || !countdown || !extendButton || !status) return;
+  if (!modal || !countdown || !extendButton || !status || !orb || !orbValue) return;
 
   let lastConfirmedAt = Date.now();
   let warningVisible = false;
@@ -40,6 +42,8 @@
 
   function showWarning(secondsLeft) {
     countdown.textContent = `Noch etwa ${secondsLeft} Sekunden bis zur automatischen Abmeldung.`;
+    orb.style.setProperty("--session-warning-progress", String(Math.max(0, Math.min(1, secondsLeft / warningLeadSeconds))));
+    orbValue.textContent = String(secondsLeft);
     hideStatus();
     if (warningVisible) return;
     modal.hidden = false;
@@ -67,6 +71,8 @@
       }
       lastConfirmedAt = Date.now();
       showStatus("Sitzung erfolgreich verlängert.");
+      orb.style.setProperty("--session-warning-progress", "1");
+      orbValue.textContent = "OK";
       window.setTimeout(function () {
         hideWarning();
         hideStatus();
diff --git a/backend/workflows/templates/workflows/base_shell.html b/backend/workflows/templates/workflows/base_shell.html
index 57e82ab..3a7686c 100644
--- a/backend/workflows/templates/workflows/base_shell.html
+++ b/backend/workflows/templates/workflows/base_shell.html
@@ -108,7 +108,10 @@
     <div class="confirm-dialog session-warning-dialog" role="dialog" aria-modal="true" aria-labelledby="app-session-warning-title" aria-describedby="app-session-warning-copy">
       <div class="session-warning-orb" aria-hidden="true">
         <span class="session-warning-orb-ring"></span>
-        <span class="session-warning-orb-core">!</span>
+        <span class="session-warning-orb-core">
+          <span class="session-warning-orb-value" id="app-session-warning-seconds">!</span>
+          <span class="session-warning-orb-label">{% trans "Sek." %}</span>
+        </span>
       </div>
       <div class="confirm-dialog-head">
         <p class="action-progress-kicker session-warning-kicker">{% trans "Sitzung" %}</p>
diff --git a/backend/workflows/tests/test_session_warning.py b/backend/workflows/tests/test_session_warning.py
index 96dd17f..0e18468 100644
--- a/backend/workflows/tests/test_session_warning.py
+++ b/backend/workflows/tests/test_session_warning.py
@@ -33,6 +33,7 @@ class SessionWarningTests(TestCase):
         self.assertContains(response, '/session/keepalive/')
         self.assertContains(response, 'Ihre Sitzung läuft bald ab')
         self.assertContains(response, 'app-session-warning-status')
+        self.assertContains(response, 'app-session-warning-seconds')
         self.assertContains(response, 'Was passiert?')
 
     def test_keepalive_refreshes_session_timestamps(self):