fix: Highlight folder icon for correct folder / media (#2560)

- Closes: #2128 - Closes: #2129
2026-07-02 10:26:30 -07:00
parent 3bb5ccd14f
commit 6a6d65d5c5
4 changed files with 156 additions and 2 deletions
@@ -2699,6 +2699,118 @@ describe('MenuButtonController', () => {
      });
    });

+    // `folder` (single folder) and `folders` (gallery) actions both carry a
+    // folder ID and are emphasized identically, so exercise both.
+    it.each([['folder' as const], ['folders' as const]])(
+      'with a %s action, emphasizes only the button for the folder being viewed',
+      (action: 'folder' | 'folders') => {
+        const folder = createFolder({ id: 'folder-a' });
+        const folderNode: FolderQuery = {
+          source: QuerySource.Folder,
+          folder: folder,
+          path: [{ ha: { id: 'one' } }],
+        };
+        const view = createView({
+          view: action,
+          query: new UnifiedQuery().addNode(folderNode),
+        });
+
+        const viewedButton: MenuItem = {
+          ...dynamicButton,
+          icon: 'mdi:folder-a',
+          tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: action,
+            folder: 'folder-a',
+          },
+        };
+        const otherButton: MenuItem = {
+          ...dynamicButton,
+          icon: 'mdi:folder-b',
+          tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: action,
+            folder: 'folder-b',
+          },
+        };
+        controller.addDynamicMenuButton(viewedButton);
+        controller.addDynamicMenuButton(otherButton);
+
+        const buttons = calculateButtons(controller, { view: view });
+
+        expect(buttons).toContainEqual({
+          ...viewedButton,
+          style: { color: 'var(--advanced-camera-card-menu-button-active-color)' },
+        });
+        expect(buttons).toContainEqual({
+          ...otherButton,
+          style: {},
+        });
+      },
+    );
+
+    it('with a folder action and no folder ID, emphasizes on the folder view', () => {
+      const button: MenuItem = {
+        ...dynamicButton,
+        tap_action: { action: 'fire-dom-event', advanced_camera_card_action: 'folder' },
+      };
+      const view = createView({ view: 'folder' });
+      controller.addDynamicMenuButton(button);
+
+      expect(calculateButtons(controller, { view: view })).toContainEqual({
+        ...button,
+        style: { color: 'var(--advanced-camera-card-menu-button-active-color)' },
+      });
+    });
+
+    it('with a folder action, stays emphasized in the media viewer while its folder query remains', () => {
+      const folder = createFolder({ id: 'folder-a' });
+      const folderNode: FolderQuery = {
+        source: QuerySource.Folder,
+        folder: folder,
+        path: [{ ha: { id: 'one' } }],
+      };
+      // Opening a media item from a folder keeps the folder query but changes
+      // the view to the media viewer, so emphasis must follow the folder query
+      // rather than the view name.
+      const view = createView({
+        view: 'media',
+        query: new UnifiedQuery().addNode(folderNode),
+      });
+
+      const viewedButton: MenuItem = {
+        ...dynamicButton,
+        icon: 'mdi:folder-a',
+        tap_action: {
+          action: 'fire-dom-event',
+          advanced_camera_card_action: 'folder',
+          folder: 'folder-a',
+        },
+      };
+      const otherButton: MenuItem = {
+        ...dynamicButton,
+        icon: 'mdi:folder-b',
+        tap_action: {
+          action: 'fire-dom-event',
+          advanced_camera_card_action: 'folder',
+          folder: 'folder-b',
+        },
+      };
+      controller.addDynamicMenuButton(viewedButton);
+      controller.addDynamicMenuButton(otherButton);
+
+      const buttons = calculateButtons(controller, { view: view });
+
+      expect(buttons).toContainEqual({
+        ...viewedButton,
+        style: { color: 'var(--advanced-camera-card-menu-button-active-color)' },
+      });
+      expect(buttons).toContainEqual({
+        ...otherButton,
+        style: {},
+      });
+    });
+
    it('with array of actions', () => {
      const button: MenuItem = {
        ...dynamicButton,