From e7c9a568dc0a44a0d301d7b9129a27e83ad3f41b Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Tue, 31 Mar 2026 16:05:01 +0300
Subject: [PATCH] feat: HA source cards use health-dot indicators

Replace unstyled status-dot classes with the existing health-dot
pattern (green/red glow) matching LED device cards. Tooltip shows
connection status and entity count.
---
 .../static/js/features/home-assistant-sources.ts     | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/server/src/wled_controller/static/js/features/home-assistant-sources.ts b/server/src/wled_controller/static/js/features/home-assistant-sources.ts
index 563292c..9328048 100644
--- a/server/src/wled_controller/static/js/features/home-assistant-sources.ts
+++ b/server/src/wled_controller/static/js/features/home-assistant-sources.ts
@@ -218,9 +218,15 @@ export async function testHASource(): Promise<void> {
 // ── Card rendering ──
 
 export function createHASourceCard(source: HomeAssistantSource) {
-    const statusDot = source.connected
-        ? `<span class="status-dot status-dot-active" title="${t('ha_source.connected')}"></span>`
-        : `<span class="status-dot status-dot-inactive" title="${t('ha_source.disconnected')}"></span>`;
+    let healthClass: string, healthTitle: string;
+    if (source.connected) {
+        healthClass = 'health-online';
+        healthTitle = `${t('ha_source.connected')} — ${source.entity_count} entities`;
+    } else {
+        healthClass = 'health-offline';
+        healthTitle = t('ha_source.disconnected');
+    }
+    const statusDot = `<span class="health-dot ${healthClass}" title="${escapeHtml(healthTitle)}" role="status"></span>`;
 
     return wrapCard({
         type: 'template-card',