From 282983cbbad0bd9b3e4b4b4ca9fa2616702ea5e5 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 16 Feb 2026 21:57:45 +0000
Subject: [PATCH] fix: Fix styling and severity in status bar (#2352)

---
 .../status-bar-item-manager.ts                |  4 +-
 src/scss/themes/base.scss                     |  6 +-
 .../status-bar-item-manager.test.ts           | 59 +++++++++++++------
 3 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/card-controller/status-bar-item-manager.ts b/src/card-controller/status-bar-item-manager.ts
index c36069fc..d905b001 100644
--- a/src/card-controller/status-bar-item-manager.ts
+++ b/src/card-controller/status-bar-item-manager.ts
@@ -48,7 +48,9 @@ export class StatusBarItemManager {
       : null;
     const engineIcon = cameraMetadata?.engineIcon ?? null;
     const selectedResult = options?.view?.queryResults?.getSelectedResult();
-    const severity = selectedResult?.getSeverity() ?? null;
+    const severity = options?.view?.isViewerView()
+      ? selectedResult?.getSeverity() ?? null
+      : null;
     const title = options?.view?.is('live')
       ? cameraMetadata?.title ?? null
       : options?.view?.isViewerView()
diff --git a/src/scss/themes/base.scss b/src/scss/themes/base.scss
index f848d293..054cebca 100644
--- a/src/scss/themes/base.scss
+++ b/src/scss/themes/base.scss
@@ -1,6 +1,6 @@
-@use 'dark.scss';
-@use 'light.scss';
-@use 'traditional.scss';
+@import 'dark.scss';
+@import 'light.scss';
+@import 'traditional.scss';
 
 :host {
   /*********
diff --git a/tests/card-controller/status-bar-item-manager.test.ts b/tests/card-controller/status-bar-item-manager.test.ts
index 8f757e28..c0296005 100644
--- a/tests/card-controller/status-bar-item-manager.test.ts
+++ b/tests/card-controller/status-bar-item-manager.test.ts
@@ -241,26 +241,51 @@ describe('StatusBarItemManager', () => {
       });
     });
 
-    it('should have severity', () => {
-      const manager = new StatusBarItemManager(createCardAPI());
-      const selectedResult = new TestViewMedia({
-        cameraID: 'camera-1',
-      });
-      vi.spyOn(selectedResult, 'getSeverity').mockReturnValue('high');
+    describe('severity', () => {
+      it('should have severity in a viewer view', () => {
+        const manager = new StatusBarItemManager(createCardAPI());
+        const selectedResult = new TestViewMedia({
+          cameraID: 'camera-1',
+        });
+        vi.spyOn(selectedResult, 'getSeverity').mockReturnValue('high');
 
-      const queryResults = new QueryResults({
-        results: [selectedResult],
-        selectedIndex: 0,
+        const queryResults = new QueryResults({
+          results: [selectedResult],
+          selectedIndex: 0,
+        });
+
+        expect(
+          manager.calculateItems({
+            view: createView({ view: 'media', queryResults: queryResults }),
+          }),
+        ).toContainEqual({
+          type: 'custom:advanced-camera-card-status-bar-icon' as const,
+          icon: 'mdi:circle-medium',
+          severity: 'high',
+        });
       });
 
-      expect(
-        manager.calculateItems({
-          view: createView({ queryResults: queryResults }),
-        }),
-      ).toContainEqual({
-        type: 'custom:advanced-camera-card-status-bar-icon' as const,
-        icon: 'mdi:circle-medium',
-        severity: 'high',
+      it('should not have severity in live view', () => {
+        const manager = new StatusBarItemManager(createCardAPI());
+        const selectedResult = new TestViewMedia({
+          cameraID: 'camera-1',
+        });
+        vi.spyOn(selectedResult, 'getSeverity').mockReturnValue('high');
+
+        const queryResults = new QueryResults({
+          results: [selectedResult],
+          selectedIndex: 0,
+        });
+
+        expect(
+          manager.calculateItems({
+            view: createView({ view: 'live', queryResults: queryResults }),
+          }),
+        ).not.toContainEqual(
+          expect.objectContaining({
+            icon: 'mdi:circle-medium',
+          }),
+        );
       });
     });
   });