fix: Fix styling and severity in status bar (#2352)

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()

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 {
   /*********

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',
+          }),
+        );
       });
     });
   });