From caf5a4b0259d937b66103bb38565be33c8d6bbb5 Mon Sep 17 00:00:00 2001
From: jamesread <contact@jread.com>
Date: Mon, 9 Mar 2026 08:47:26 +0000
Subject: [PATCH] fix: Disconnection banner preserves original disconnect time

---
 frontend/js/websocket.js                       |  6 ++++--
 .../vue/components/ConnectionBanner.vue        | 18 +++++++++++++++++-
 lang/combined_output.json                      |  5 +++++
 lang/de-DE.yaml                                |  1 +
 lang/en.yaml                                   |  1 +
 lang/es-ES.yaml                                |  1 +
 lang/it-IT.yaml                                |  1 +
 lang/zh-Hans-CN.yaml                           |  1 +
 8 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/frontend/js/websocket.js b/frontend/js/websocket.js
index d453a70..0fffb88 100644
--- a/frontend/js/websocket.js
+++ b/frontend/js/websocket.js
@@ -21,7 +21,9 @@ async function reconnectWebsocket () {
 
   connectionState.reconnecting = true
   connectionState.connected = false
-  connectionState.disconnectedAt = Date.now()
+  if (connectionState.disconnectedAt == null) {
+    connectionState.disconnectedAt = Date.now()
+  }
   connectionState.nextReconnectAt = null
 
   try {
@@ -29,9 +31,9 @@ async function reconnectWebsocket () {
     const stream = window.client.eventStream()
     connectionState.connected = true
     connectionState.reconnecting = false
-    connectionState.disconnectedAt = null
     connectionState.nextReconnectAt = null
     for await (const e of stream) {
+      connectionState.disconnectedAt = null
       handleEvent(e)
     }
   } catch (err) {
diff --git a/frontend/resources/vue/components/ConnectionBanner.vue b/frontend/resources/vue/components/ConnectionBanner.vue
index f9768cc..48e8462 100644
--- a/frontend/resources/vue/components/ConnectionBanner.vue
+++ b/frontend/resources/vue/components/ConnectionBanner.vue
@@ -1,5 +1,8 @@
 <template>
-    <span id="connection-banner" v-if="!connectionState.connected" class="inline-notification critical user-info-connection" role="status">{{ bannerText }}</span>
+    <span id="connection-banner" v-if="!connectionState.connected" class="inline-notification critical user-info-connection">
+        <span class="connection-banner-sr-only" role="status">{{ staticAnnouncement }}</span>
+        <span aria-hidden="true">{{ bannerText }}</span>
+    </span>
 </template>
 
 <script setup>
@@ -44,6 +47,8 @@ onUnmounted(() => {
   }
 })
 
+const staticAnnouncement = computed(() => t('disconnected-banner-announcement'))
+
 const bannerText = computed(() => {
   const at = connectionState.disconnectedAt
   const next = connectionState.nextReconnectAt
@@ -65,4 +70,15 @@ const bannerText = computed(() => {
     border: 0;
     margin: 0;
 }
+.connection-banner-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
 </style>
diff --git a/lang/combined_output.json b/lang/combined_output.json
index a4d4d9d..979be80 100644
--- a/lang/combined_output.json
+++ b/lang/combined_output.json
@@ -22,6 +22,7 @@
             "diagnostics.where-to-find-help": "Wo Sie Hilfe finden",
             "disconnected": "Getrennt",
             "disconnected-banner": "Events-Websocket getrennt seit {disconnectedSince}. Erneuter Verbindungsversuch in {reconnectIn}.",
+            "disconnected-banner-announcement": "Events-Websocket getrennt.",
             "disconnected-banner-reconnecting": "Events-Websocket getrennt seit {disconnectedSince}. Verbindungsversuch…",
             "docs": "Dokumentation",
             "language-dialog.browser-languages": "Browser-Sprachen",
@@ -79,6 +80,7 @@
             "diagnostics.where-to-find-help": "Where to find help",
             "disconnected": "Disconnected",
             "disconnected-banner": "Events websocket disconnected since {disconnectedSince}. Trying reconnect in {reconnectIn}.",
+            "disconnected-banner-announcement": "Events websocket disconnected.",
             "disconnected-banner-reconnecting": "Events websocket disconnected since {disconnectedSince}. Trying reconnect…",
             "docs": "Documentation",
             "language-dialog.browser-languages": "Browser languages",
@@ -136,6 +138,7 @@
             "diagnostics.where-to-find-help": "Dónde encontrar ayuda",
             "disconnected": "Desconectado",
             "disconnected-banner": "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión en {reconnectIn}.",
+            "disconnected-banner-announcement": "Websocket de eventos desconectado.",
             "disconnected-banner-reconnecting": "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión…",
             "docs": "Documentación",
             "language-dialog.browser-languages": "Idiomas del navegador",
@@ -193,6 +196,7 @@
             "diagnostics.where-to-find-help": "Dove trovare aiuto",
             "disconnected": "Disconnesso",
             "disconnected-banner": "Websocket eventi disconnesso dalle {disconnectedSince}. Nuovo tentativo tra {reconnectIn}.",
+            "disconnected-banner-announcement": "Websocket eventi disconnesso.",
             "disconnected-banner-reconnecting": "Websocket eventi disconnesso dalle {disconnectedSince}. Tentativo di connessione…",
             "docs": "Documentazione",
             "language-dialog.browser-languages": "Lingue del browser",
@@ -250,6 +254,7 @@
             "diagnostics.where-to-find-help": "在哪里找到帮助",
             "disconnected": "已断开连接",
             "disconnected-banner": "事件 WebSocket 自 {disconnectedSince} 已断开。{reconnectIn} 后尝试重连。",
+            "disconnected-banner-announcement": "事件 WebSocket 已断开。",
             "disconnected-banner-reconnecting": "事件 WebSocket 自 {disconnectedSince} 已断开。正在尝试重连…",
             "docs": "文档",
             "language-dialog.browser-languages": "浏览器语言",
diff --git a/lang/de-DE.yaml b/lang/de-DE.yaml
index a37508e..606620b 100644
--- a/lang/de-DE.yaml
+++ b/lang/de-DE.yaml
@@ -10,6 +10,7 @@ translations:
   reconnecting: Verbinde erneut…
   disconnected-banner: "Events-Websocket getrennt seit {disconnectedSince}. Erneuter Verbindungsversuch in {reconnectIn}."
   disconnected-banner-reconnecting: "Events-Websocket getrennt seit {disconnectedSince}. Verbindungsversuch…"
+  disconnected-banner-announcement: Events-Websocket getrennt.
   login-button: Login
   raise-issue: Ein Problem melden auf GitHub
   docs: Dokumentation
diff --git a/lang/en.yaml b/lang/en.yaml
index b4b1f1e..61d3e3d 100644
--- a/lang/en.yaml
+++ b/lang/en.yaml
@@ -12,6 +12,7 @@ translations:
   reconnecting: Reconnecting…
   disconnected-banner: "Events websocket disconnected since {disconnectedSince}. Trying reconnect in {reconnectIn}."
   disconnected-banner-reconnecting: "Events websocket disconnected since {disconnectedSince}. Trying reconnect…"
+  disconnected-banner-announcement: Events websocket disconnected.
   login-button: Login
   logs.title: Logs
   logs.page-description: This is a list of logs from actions that have been executed. You can filter the list by action title.
diff --git a/lang/es-ES.yaml b/lang/es-ES.yaml
index d4a7ab2..6cc8c71 100644
--- a/lang/es-ES.yaml
+++ b/lang/es-ES.yaml
@@ -10,6 +10,7 @@ translations:
   reconnecting: Reconectando…
   disconnected-banner: "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión en {reconnectIn}."
   disconnected-banner-reconnecting: "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión…"
+  disconnected-banner-announcement: Websocket de eventos desconectado.
   login-button: Iniciar sesión
   raise-issue: Reportar un problema en GitHub
   docs: Documentación
diff --git a/lang/it-IT.yaml b/lang/it-IT.yaml
index 21af532..28c8549 100644
--- a/lang/it-IT.yaml
+++ b/lang/it-IT.yaml
@@ -11,6 +11,7 @@ translations:
   reconnecting: Riconnessione…
   disconnected-banner: "Websocket eventi disconnesso dalle {disconnectedSince}. Nuovo tentativo tra {reconnectIn}."
   disconnected-banner-reconnecting: "Websocket eventi disconnesso dalle {disconnectedSince}. Tentativo di connessione…"
+  disconnected-banner-announcement: Websocket eventi disconnesso.
   login-button: Login
   raise-issue: Segnala un problema su GitHub
   logs.title: Registri
diff --git a/lang/zh-Hans-CN.yaml b/lang/zh-Hans-CN.yaml
index e38da7e..58f3cb7 100644
--- a/lang/zh-Hans-CN.yaml
+++ b/lang/zh-Hans-CN.yaml
@@ -10,6 +10,7 @@ translations:
   reconnecting: 正在重新连接…
   disconnected-banner: "事件 WebSocket 自 {disconnectedSince} 已断开。{reconnectIn} 后尝试重连。"
   disconnected-banner-reconnecting: "事件 WebSocket 自 {disconnectedSince} 已断开。正在尝试重连…"
+  disconnected-banner-announcement: 事件 WebSocket 已断开。
   login-button: 登录
   raise-issue: 在 GitHub 上报告问题
   docs: 文档