feat: blinking OK indicator instead of success toast

Replace the generic 'action performed successfully' toast with a short
blinking 'OK' next to the battery indicator in the navbar. Specific
success toasts (backup/clean/upload) are kept.

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

Author: fhirschmann

README.md

@@ -67,6 +67,7 @@ neon logo that doubles as the SVG favicon ([`8d9725c`](../../commit/8d9725c)):
 | PWA support: web app manifest + app icon, "add to home screen" with proper icon and name | [`a59fe0b`](../../commit/a59fe0b) |
 | 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) |
 | SD card cleanup: removes macOS metadata (`.DS_Store`, `._*`, Spotlight/Trashes) with one click | [`5f38a51`](../../commit/5f38a51) |
 | Live log: the log dialog refreshes every 2 s and follows the end of the log | [`d326faa`](../../commit/d326faa) |
 | Drag & drop: upload files by dropping them from the file manager onto the file tree | [`e4972fe`](../../commit/e4972fe) |

html/management.html

@@ -235,6 +235,32 @@
 			animation: cp-flicker 3s linear infinite;
 		}
 
+		/* blinking "OK" confirmation shown next to the battery after an action succeeds */
+		#actionOk {
+			color: var(--cp-green);
+			font-family: "Share Tech Mono", monospace;
+			font-weight: 700;
+			font-size: .9rem;
+			letter-spacing: 1px;
+			text-shadow: 0 0 10px rgba(10, 255, 157, .8);
+			margin-right: 12px;
+			opacity: 0;
+		}
+
+		#actionOk.show {
+			animation: ok-blink 1.6s ease-in-out;
+		}
+
+		@keyframes ok-blink {
+			0% { opacity: 0; }
+			12% { opacity: 1; }
+			28% { opacity: .15; }
+			44% { opacity: 1; }
+			60% { opacity: .15; }
+			76% { opacity: 1; }
+			100% { opacity: 0; }
+		}
+
 		/* ---------- dropdown menu ---------- */
 		.dropdown-menu {
 			background: var(--cp-panel);
@@ -1045,6 +1071,7 @@
 				<span id="navbar-heading" data-i18n="title"></span>
 			</a>
 			<div class="collapse navbar-collapse justify-content-end">
+				<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>
 				</span>
@@ -2488,6 +2515,18 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 			error: msg => toaster.toast(msg, 'text-bg-danger')
 		}
 
+		// Briefly blink an "OK" next to the battery indicator to confirm an action
+		// succeeded -- replaces the noisy generic "action performed successfully" toast.
+		function flashActionOk() {
+			const el = document.getElementById('actionOk');
+			if (!el) return;
+			el.classList.remove('show');
+			// force a reflow so the animation restarts even on rapid consecutive actions
+			void el.offsetWidth;
+			el.classList.add('show');
+			el.addEventListener('animationend', () => el.classList.remove('show'), { once: true });
+		}
+
 		i18next.use(i18nextHttpBackend).init({
 			backend: {
 				loadPath: "http://" + host + "/locales/{{lng}}.json"
@@ -3333,7 +3372,7 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 				}
 				if ("status" in socketMsg) {
 					if (socketMsg.status == "ok") {
-						toaster.success(i18next.t("toast.success"));
+						flashActionOk();
 					}
 					if (socketMsg.status == "dropout") {
 						toaster.warning(i18next.t("toast.dropout"));
@@ -3852,7 +3891,7 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 				method: "DELETE"
 			});
 			if (response.ok) {
-				toaster.success(i18next.t("toast.success"));
+				flashActionOk();
 				rebuildRFIDList();
 			} else {
 				toaster.error(response.statusText);
@@ -3866,7 +3905,7 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 				method: "POST"
 			});
 			if (response.ok) {
-				toaster.success(i18next.t("toast.success"));
+				flashActionOk();
 				await rebuildRFIDList();
 			} else {
 				toaster.error(response.statusText);
@@ -3885,7 +3924,7 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 				body: formData
 			});
 			if (response.ok) {
-				toaster.success(i18next.t("toast.success"));
+				flashActionOk();
 				rebuildRFIDList();
 			} else {
 				toaster.error(response.statusText);
@@ -4615,7 +4654,7 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 				})
 			});
 			if (response.ok) {
-				toaster.success(i18next.t("toast.success"));
+				flashActionOk();
 				document.getElementById('wwwPassword').value = '';
 				refreshSecurityStatus();
 			} else {