fix: expand collapsed macro groups when jumping to a macro

When a macro is selected via Jump to macro or navigation, open its
ancestor sidebar groups so the target macro stays visible.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: mondalaci

packages/uhk-common/src/util/group-macros-by-name.test.ts

@@ -5,7 +5,12 @@ import {
     MACRO_GROUPING_MAX_DEPTH,
     normalizeMacroGroupingSettings,
 } from '../models/macro-grouping-settings.js';
-import { groupMacrosByName, GroupableMacroItem, splitMacroName } from './group-macros-by-name.js';
+import {
+    findMacroGroupAncestorPaths,
+    groupMacrosByName,
+    GroupableMacroItem,
+    splitMacroName
+} from './group-macros-by-name.js';
 
 function createMacro(id: number, name: string): GroupableMacroItem {
     return {
@@ -216,6 +221,38 @@ describe('groupMacrosByName', () => {
     });
 });
 
+describe('findMacroGroupAncestorPaths', () => {
+    it('returns ancestor group paths for a nested macro', ({ assert }) => {
+        const macros = [
+            createMacro(1, 'Open: daily sites'),
+            createMacro(2, 'Open: weekly sites'),
+        ];
+        const tree = groupMacrosByName(macros, {
+            ...ENABLED_MACRO_GROUPING_SETTINGS,
+            maxDepth: 2,
+        });
+
+        assert.deepEqual(findMacroGroupAncestorPaths(tree, 1), ['Open']);
+        assert.deepEqual(findMacroGroupAncestorPaths(tree, 2), ['Open']);
+    });
+
+    it('returns an empty array for macros that are not grouped', ({ assert }) => {
+        const macros = [
+            createMacro(1, 'Doom'),
+            createMacro(2, 'Chainsaw'),
+        ];
+        const tree = groupMacrosByName(macros, ENABLED_MACRO_GROUPING_SETTINGS);
+
+        assert.deepEqual(findMacroGroupAncestorPaths(tree, 1), []);
+    });
+
+    it('returns null when the macro is not in the tree', ({ assert }) => {
+        const tree = groupMacrosByName([createMacro(1, 'Doom: Chainsaw')], ENABLED_MACRO_GROUPING_SETTINGS);
+
+        assert.equal(findMacroGroupAncestorPaths(tree, 99), null);
+    });
+});
+
 describe('normalizeMacroGroupingSettings', () => {
     it('clamps maxDepth to the supported sidebar layout limit', ({ assert }) => {
         const result = normalizeMacroGroupingSettings({ maxDepth: 99 });

packages/uhk-common/src/util/group-macros-by-name.ts

@@ -135,6 +135,32 @@ function getMacroMenuTreeNodeLabel<TMacro extends GroupableMacroItem>(node: Macr
     return node.macro?.name || '';
 }
 
+export function findMacroGroupAncestorPaths<TMacro extends GroupableMacroItem>(
+    nodes: MacroMenuTreeNode<TMacro>[],
+    macroId: number,
+    ancestorPaths: string[] = []
+): string[] | null {
+    for (const node of nodes) {
+        if (node.type === 'macro' && node.macro?.id === macroId) {
+            return ancestorPaths;
+        }
+
+        if (node.type === 'group' && node.path && node.children) {
+            const found = findMacroGroupAncestorPaths(
+                node.children,
+                macroId,
+                [...ancestorPaths, node.path]
+            );
+
+            if (found !== null) {
+                return found;
+            }
+        }
+    }
+
+    return null;
+}
+
 export function splitMacroName(name: string, camelCaseSeparation: boolean): string[] {
     let parts = name.split(MACRO_NAME_SEPARATOR).filter(part => part.length > 0);
 

packages/uhk-web/src/app/components/side-menu/side-menu.component.ts

@@ -30,10 +30,11 @@ import {
 
 import { Store } from '@ngrx/store';
 
-import { Subscription } from 'rxjs';
-import { MAX_ALLOWED_MACROS_TOOLTIP, UHK_80_DEVICE } from 'uhk-common';
+import { combineLatest, Subscription } from 'rxjs';
+import { distinctUntilChanged, map } from 'rxjs/operators';
+import { findMacroGroupAncestorPaths, MAX_ALLOWED_MACROS_TOOLTIP, UHK_80_DEVICE } from 'uhk-common';
 
-import { AppState, getSideMenuPageState } from '../../store';
+import { AppState, getSelectedMacro, getSideMenuPageState } from '../../store';
 import { AddMacroAction } from '../../store/actions/macro';
 import { RenameUserConfigurationAction } from '../../store/actions/user-config';
 import { DeviceUiStates, MacroMenuTreeNode, SideMenuPageState } from '../../models';
@@ -120,11 +121,20 @@ export class SideMenuComponent implements OnChanges, OnInit, OnDestroy {
     }
 
     ngOnInit(): void {
-        this.stateSubscription = this.store.select(getSideMenuPageState).subscribe(data => {
+        this.stateSubscription = combineLatest([
+            this.store.select(getSideMenuPageState),
+            this.store.select(getSelectedMacro).pipe(
+                map(macro => macro?.id),
+                distinctUntilChanged()
+            )
+        ]).subscribe(([data, selectedMacroId]) => {
             this.state = data;
             this.isBatterySettingsMenuAllowed = this.state.connectedDevice?.id === UHK_80_DEVICE.id;
             this.isConnectionsMenuAllowed = this.state.connectedDevice?.id === UHK_80_DEVICE.id;
             this.calculateDeviceAnimationState();
+            if (selectedMacroId !== undefined) {
+                this.expandMacroGroupsForMacro(selectedMacroId, data.macroTree);
+            }
             this.syncMacroGroupState();
             this.cdRef.markForCheck();
         });
@@ -205,6 +215,16 @@ export class SideMenuComponent implements OnChanges, OnInit, OnDestroy {
             : 'inactive';
     }
 
+    private expandMacroGroupsForMacro(macroId: number, macroTree: MacroMenuTreeNode[]): void {
+        for (const path of findMacroGroupAncestorPaths(macroTree, macroId) ?? []) {
+            this.macroGroupState[path] = { icon: faChevronUp, animation: 'active' };
+        }
+
+        if (this.sideMenuState.macro.animation !== 'active') {
+            this.sideMenuState.macro = { icon: faChevronUp, animation: 'active' };
+        }
+    }
+
     private syncMacroGroupState(): void {
         const nextState: Record<string, SideMenuItemState> = {};