feat: blinking connection-lost icon instead of toast

Replace the 'connection to ESPuino lost' warning toast with a blinking
icon next to the OK indicator in the navbar. The icon appears when no
pong is received within 5s and is hidden again as soon as the connection
is back (pong received or socket reconnected).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: fhirschmann

README.md

@@ -68,6 +68,7 @@ neon logo that doubles as the SVG favicon ([`8d9725c`](../../commit/8d9725c)):
 | Full backup: export/import of all settings + RFID assignments as JSON, WiFi credentials optional | [`7f2e4ae`](../../commit/7f2e4ae) |
 | Equalizer profiles: dropdown presets (Flat / Music / Audiobook-Speech / Deep voices / Custom) on top of the 3-band tone control; speech presets cut bass and lift mids/highs so deep narrator voices stay intelligible, persisted in NVS. Profiles can also be assigned per file or directory (right-click in the file browser) — e.g. set the speech profile for all Bibi Blocksberg episodes at once. The active profile can be cycled with the bindable command **154** (button/RFID modifier) and set/reported via the MQTT topic `equalizer` (`flat`/`music`/`speech`/`voiceBoost`) | [`300b9dd`](../../commit/300b9dd) |
 | Blinking "OK" indicator next to the battery replaces the generic "action successful" toast | [`0870ccc`](../../commit/0870ccc) |
+| Blinking "connection lost" icon in the navbar replaces the connection-lost toast | [`c45402b`](../../commit/c45402b) |
 | Play/pause button in the RFID tab plays the highlighted file/folder (and pauses running playback) | [`8d3d196`](../../commit/8d3d196) |
 | Cyberpunk footer below the interface (neon "LEO INDUSTRIES // DIVISION: AUDIO" branding) | [`c21f8bf`](../../commit/c21f8bf) |
 | SD card cleanup: removes macOS metadata (`.DS_Store`, `._*`, Spotlight/Trashes) with one click | [`5f38a51`](../../commit/5f38a51) |

html/management.html

@@ -261,6 +261,25 @@
 			100% { opacity: 0; }
 		}
 
+		/* blinking "connection lost" icon next to the OK indicator (replaces the conlost toast) */
+		#connLost {
+			display: none;
+			color: var(--cp-magenta);
+			font-size: .95rem;
+			margin-right: 12px;
+			text-shadow: 0 0 10px rgba(255, 42, 109, .8);
+		}
+
+		#connLost.show {
+			display: inline;
+			animation: conn-blink 1s steps(1) infinite;
+		}
+
+		@keyframes conn-blink {
+			0%, 49% { opacity: 1; }
+			50%, 100% { opacity: .15; }
+		}
+
 		/* ---------- dropdown menu ---------- */
 		.dropdown-menu {
 			background: var(--cp-panel);
@@ -1148,6 +1167,7 @@
 				<span id="navbar-heading" data-i18n="title"></span>
 			</a>
 			<div class="collapse navbar-collapse justify-content-end">
+				<span class="navbar-text" id="connLost" data-i18n="[title]toast.conlost"><i class="fas fa-link-slash"></i></span>
 				<span class="navbar-text" id="actionOk" aria-hidden="true"><i class="fas fa-check"></i> OK</span>
 				<span class="navbar-text" id="batteryIndicator" data-visible="false">
 					<i class="fas fa-battery-three-quarters" id="batteryIcon"></i><span id="batteryLevel"></span>
@@ -3486,6 +3506,9 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 		} function connect() {
 			socket = new WebSocket("ws://" + host + "/ws");
 			socket.onopen = function () {
+				// connection (re)established -> hide the "connection lost" indicator
+				var connLostEl = document.getElementById('connLost');
+				if (connLostEl) connLostEl.classList.remove('show');
 				clearInterval(pingInterval);
 				clearInterval(getTrackProgressInterval);
 				pingInterval = setInterval(ping, 3000);
@@ -4115,12 +4138,17 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 			var myJSON = JSON.stringify(myObj);
 			socket.send(myJSON);
 			tm = setTimeout(function () {
-				toaster.warning(i18next.t("toast.conlost"));
+				// no pong within 5s -> show the blinking "connection lost" icon (was a toast)
+				var el = document.getElementById('connLost');
+				if (el) el.classList.add('show');
 			}, 5000);
 		}
 
 		function pong() {
 			clearTimeout(tm);
+			// pong received -> connection is alive again, hide the indicator
+			var el = document.getElementById('connLost');
+			if (el) el.classList.remove('show');
 		}
 		async function getTrackProgress() {
 			if (ActiveTab !== 'nav-control-tab') {