From db7cbeecb853ecc319315edc09982c4c5bd58ca5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A1szl=C3=B3=20Monda?= Date: Sun, 12 Jul 2026 22:08:24 +0200 Subject: [PATCH 1/8] feat: auto-group macros in the sidebar Add optional sidebar grouping derived from macro names, with settings for camelCase splitting, nesting depth, and minimum group size. Grouping is off by default and only affects sidebar display, not stored macro names. Closes #1845 Co-authored-by: Cursor --- .../src/models/application-settings.ts | 5 + packages/uhk-common/src/models/index.ts | 1 + .../src/models/macro-grouping-settings.ts | 57 ++++++ .../src/util/group-macros-by-name.test.ts | 147 ++++++++++++++ .../src/util/group-macros-by-name.ts | 192 ++++++++++++++++++ packages/uhk-common/src/util/index.ts | 1 + .../agent/settings/settings.component.html | 63 +++++- .../agent/settings/settings.component.scss | 24 +++ .../agent/settings/settings.component.ts | 12 +- .../side-menu/side-menu.component.html | 39 +++- .../side-menu/side-menu.component.scss | 53 ++++- .../side-menu/side-menu.component.ts | 67 +++++- packages/uhk-web/src/app/models/index.ts | 1 + .../src/app/models/macro-menu-tree-node.ts | 4 + .../src/app/models/side-menu-page-state.ts | 2 + packages/uhk-web/src/app/store/actions/app.ts | 11 +- packages/uhk-web/src/app/store/effects/app.ts | 1 + packages/uhk-web/src/app/store/index.ts | 12 +- .../src/app/store/reducers/app.reducer.ts | 18 +- 19 files changed, 690 insertions(+), 20 deletions(-) create mode 100644 packages/uhk-common/src/models/macro-grouping-settings.ts create mode 100644 packages/uhk-common/src/util/group-macros-by-name.test.ts create mode 100644 packages/uhk-common/src/util/group-macros-by-name.ts create mode 100644 packages/uhk-web/src/app/models/macro-menu-tree-node.ts diff --git a/packages/uhk-common/src/models/application-settings.ts b/packages/uhk-common/src/models/application-settings.ts index 9f91a359c0d..ba50a375cdf 100644 --- a/packages/uhk-common/src/models/application-settings.ts +++ b/packages/uhk-common/src/models/application-settings.ts @@ -1,3 +1,4 @@ +import { MacroGroupingSettings } from './macro-grouping-settings.js'; import { RgbColorInterface } from './rgb-color-interface.js'; export enum AppTheme { @@ -34,4 +35,8 @@ export interface ApplicationSettings { * If true, the Advanced settings menu is shown on Agent startup. */ alwaysEnableAdvancedMode?: boolean; + /** + * Sidebar macro grouping preferences. + */ + macroGrouping?: Partial; } diff --git a/packages/uhk-common/src/models/index.ts b/packages/uhk-common/src/models/index.ts index d5863a2a207..dec9dcd6082 100644 --- a/packages/uhk-common/src/models/index.ts +++ b/packages/uhk-common/src/models/index.ts @@ -1,4 +1,5 @@ export * from './application-settings.js'; +export * from './macro-grouping-settings.js'; export * from './backup-user-configuration.js'; export * from './backup-user-configuration-info.js'; export * from './ble-address-pair.js'; diff --git a/packages/uhk-common/src/models/macro-grouping-settings.ts b/packages/uhk-common/src/models/macro-grouping-settings.ts new file mode 100644 index 00000000000..41caf7e899f --- /dev/null +++ b/packages/uhk-common/src/models/macro-grouping-settings.ts @@ -0,0 +1,57 @@ +export interface MacroGroupingSettings { + camelCaseSeparation: boolean; + enabled: boolean; + maxDepth: number; + minChildren: number; +} + +export const MACRO_GROUPING_MIN_DEPTH = 1; + +// Mirrors side-menu.component.scss ($side-menu-width, $macro-tree-base-indent, $macro-tree-indent-step). +const MACRO_TREE_SIDE_MENU_WIDTH_PX = 250; +const MACRO_TREE_LEVEL1_PADDING_PX = 24; +const MACRO_TREE_BASE_INDENT_PX = 32; +const MACRO_TREE_INDENT_STEP_PX = 12; +const MACRO_TREE_RESERVED_RIGHT_PX = 48; +const MACRO_TREE_MIN_LABEL_WIDTH_PX = 72; + +/** + * Deepest macro-tree depth the sidebar layout can fit before labels get too narrow. + * The CSS indent is unbounded; this limit comes from the 250px sidebar width. + */ +export const MACRO_GROUPING_MAX_DEPTH = Math.max( + MACRO_GROUPING_MIN_DEPTH, + Math.floor( + (MACRO_TREE_SIDE_MENU_WIDTH_PX + - MACRO_TREE_LEVEL1_PADDING_PX + - MACRO_TREE_BASE_INDENT_PX + - MACRO_TREE_RESERVED_RIGHT_PX + - MACRO_TREE_MIN_LABEL_WIDTH_PX) + / MACRO_TREE_INDENT_STEP_PX + ) +); + +export const DEFAULT_MACRO_GROUPING_SETTINGS: MacroGroupingSettings = { + camelCaseSeparation: false, + enabled: false, + maxDepth: 1, + minChildren: 2, +}; + +export function normalizeMacroGroupingSettings( + settings?: Partial +): MacroGroupingSettings { + const merged: MacroGroupingSettings = { + ...DEFAULT_MACRO_GROUPING_SETTINGS, + ...settings, + }; + + return { + ...merged, + maxDepth: Math.min( + MACRO_GROUPING_MAX_DEPTH, + Math.max(MACRO_GROUPING_MIN_DEPTH, merged.maxDepth) + ), + minChildren: Math.min(10, Math.max(2, merged.minChildren)), + }; +} diff --git a/packages/uhk-common/src/util/group-macros-by-name.test.ts b/packages/uhk-common/src/util/group-macros-by-name.test.ts new file mode 100644 index 00000000000..72a0e928e3a --- /dev/null +++ b/packages/uhk-common/src/util/group-macros-by-name.test.ts @@ -0,0 +1,147 @@ +import { describe, it } from 'node:test'; + +import { + DEFAULT_MACRO_GROUPING_SETTINGS, + MACRO_GROUPING_MAX_DEPTH, + normalizeMacroGroupingSettings, +} from '../models/macro-grouping-settings.js'; +import { groupMacrosByName, GroupableMacroItem, splitMacroName } from './group-macros-by-name.js'; + +function createMacro(id: number, name: string): GroupableMacroItem { + return { + id, + name + }; +} + +const ENABLED_MACRO_GROUPING_SETTINGS = { + ...DEFAULT_MACRO_GROUPING_SETTINGS, + enabled: true, +}; + +describe('splitMacroName', () => { + it('splits on non-alphanumeric separators', ({ assert }) => { + assert.deepEqual(splitMacroName('Doom: Chainsaw', false), ['Doom', 'Chainsaw']); + assert.deepEqual(splitMacroName('Doom_Plasma gun', false), ['Doom', 'Plasma', 'gun']); + }); + + it('optionally splits camel case segments', ({ assert }) => { + assert.deepEqual(splitMacroName('bindMouseMacros', true), ['bind', 'Mouse', 'Macros']); + }); + + it('does not split on dollar signs used in smart macro names', ({ assert }) => { + assert.deepEqual(splitMacroName('$onInit', true), ['$on', 'Init']); + assert.deepEqual(splitMacroName('$onInit', false), ['$onInit']); + }); +}); + +describe('groupMacrosByName', () => { + it('returns a flat list when grouping is disabled', ({ assert }) => { + const macros = [ + createMacro(1, 'Doom: Chainsaw'), + createMacro(2, 'Doom: Plasma gun') + ]; + + const result = groupMacrosByName(macros, { + ...DEFAULT_MACRO_GROUPING_SETTINGS, + enabled: false + }); + + assert.equal(result.length, 2); + assert.equal(result[0].type, 'macro'); + assert.equal(result[1].type, 'macro'); + }); + + it('groups macros that share a prefix separated by non-alphanumeric characters', ({ assert }) => { + const macros = [ + createMacro(1, 'Doom: Chainsaw'), + createMacro(2, 'Doom: Plasma gun'), + createMacro(3, 'Brightness up') + ]; + + const result = groupMacrosByName(macros, ENABLED_MACRO_GROUPING_SETTINGS); + + assert.equal(result.length, 2); + assert.deepEqual(result.map(node => node.type), ['macro', 'group']); + assert.equal(result[0].macro?.name, 'Brightness up'); + assert.equal(result[1].label, 'Doom'); + assert.equal(result[1].children?.length, 2); + assert.equal(result[1].children?.[0].displayName, 'Chainsaw'); + assert.equal(result[1].children?.[1].displayName, 'Plasma gun'); + }); + + it('does not create a group when there are fewer macros than minChildren', ({ assert }) => { + const macros = [ + createMacro(1, 'Doom: Chainsaw'), + createMacro(2, 'Brightness up') + ]; + + const result = groupMacrosByName(macros, ENABLED_MACRO_GROUPING_SETTINGS); + + assert.equal(result.length, 2); + assert.deepEqual(result.map(node => node.type), ['macro', 'macro']); + assert.equal(result[0].macro?.name, 'Brightness up'); + assert.equal(result[1].macro?.name, 'Doom: Chainsaw'); + }); + + it('groups by camel case when enabled', ({ assert }) => { + const macros = [ + createMacro(1, 'bindMouseLeft'), + createMacro(2, 'bindMouseRight'), + createMacro(3, 'brightnessUp') + ]; + + const result = groupMacrosByName(macros, { + ...ENABLED_MACRO_GROUPING_SETTINGS, + camelCaseSeparation: true + }); + + assert.equal(result.length, 2); + assert.deepEqual(result.map(node => node.type), ['group', 'macro']); + assert.equal(result[0].label, 'bind'); + assert.equal(result[0].children?.length, 2); + assert.deepEqual(result[0].children?.map(child => child.displayName), ['MouseLeft', 'MouseRight']); + assert.equal(result[1].macro?.name, 'brightnessUp'); + }); + + it('groups dollar-prefixed smart macro names under the dollar prefix', ({ assert }) => { + const macros = [ + createMacro(1, '$onInit'), + createMacro(2, '$onJoin'), + ]; + + const result = groupMacrosByName(macros, { + ...ENABLED_MACRO_GROUPING_SETTINGS, + camelCaseSeparation: true, + }); + + assert.equal(result.length, 1); + assert.equal(result[0].type, 'group'); + assert.equal(result[0].label, '$on'); + assert.deepEqual(result[0].children?.map(child => child.displayName), ['Init', 'Join']); + }); + + it('keeps parent-level remainders when deeper nesting does not apply', ({ assert }) => { + const macros = [ + createMacro(1, 'Open daily sites'), + createMacro(2, 'Open weekly sites'), + ]; + + const result = groupMacrosByName(macros, { + ...ENABLED_MACRO_GROUPING_SETTINGS, + maxDepth: 2, + }); + + assert.equal(result.length, 1); + assert.equal(result[0].label, 'Open'); + assert.deepEqual(result[0].children?.map(child => child.displayName), ['daily sites', 'weekly sites']); + }); +}); + +describe('normalizeMacroGroupingSettings', () => { + it('clamps maxDepth to the supported sidebar layout limit', ({ assert }) => { + const result = normalizeMacroGroupingSettings({ maxDepth: 99 }); + + assert.equal(result.maxDepth, MACRO_GROUPING_MAX_DEPTH); + }); +}); diff --git a/packages/uhk-common/src/util/group-macros-by-name.ts b/packages/uhk-common/src/util/group-macros-by-name.ts new file mode 100644 index 00000000000..c9c765aef38 --- /dev/null +++ b/packages/uhk-common/src/util/group-macros-by-name.ts @@ -0,0 +1,192 @@ +import { MacroGroupingSettings, normalizeMacroGroupingSettings } from '../models/macro-grouping-settings.js'; + +export interface GroupableMacroItem { + id: number; + name: string; +} + +export interface MacroMenuTreeNode { + children?: MacroMenuTreeNode[]; + displayName?: string; + label?: string; + macro?: TMacro; + path?: string; + type: 'group' | 'macro'; +} + +interface MacroGroupingItem { + groupingName: string; + macro: TMacro; +} + +export function groupMacrosByName( + macros: TMacro[], + settings: MacroGroupingSettings +): MacroMenuTreeNode[] { + const normalizedSettings = normalizeMacroGroupingSettings(settings); + + if (!normalizedSettings.enabled || macros.length === 0) { + return macros.map(macro => ({ type: 'macro', macro })); + } + + const items = macros.map(macro => ({ + groupingName: macro.name, + macro + })); + + return groupMacrosAtLevel(items, normalizedSettings, 0, ''); +} + +function groupMacrosAtLevel( + items: MacroGroupingItem[], + settings: MacroGroupingSettings, + depth: number, + parentPath: string +): MacroMenuTreeNode[] { + const sortedItems = [...items].sort((first, second) => first.groupingName.localeCompare(second.groupingName)); + + if (depth >= settings.maxDepth) { + return sortedItems.map(item => createMacroNode(item, depth)); + } + + const ungrouped: MacroMenuTreeNode[] = []; + const groupMap = new Map[]>(); + const pendingGroups: Array<{ + groupKey: string; + item: MacroGroupingItem; + remainder: string; + }> = []; + + for (const item of sortedItems) { + const segments = splitMacroName(item.groupingName, settings.camelCaseSeparation); + + if (segments.length <= 1) { + ungrouped.push(createMacroNode(item, depth)); + continue; + } + + pendingGroups.push({ + groupKey: segments[0], + item, + remainder: getRemainder(item.groupingName, segments[0]), + }); + } + + const groupCounts = new Map(); + + for (const pendingGroup of pendingGroups) { + groupCounts.set( + pendingGroup.groupKey, + (groupCounts.get(pendingGroup.groupKey) || 0) + 1 + ); + } + + for (const pendingGroup of pendingGroups) { + if ((groupCounts.get(pendingGroup.groupKey) || 0) < settings.minChildren) { + ungrouped.push(createMacroNode(pendingGroup.item, depth)); + continue; + } + + const groupedItems = groupMap.get(pendingGroup.groupKey) || []; + groupedItems.push({ + groupingName: pendingGroup.remainder, + macro: pendingGroup.item.macro + }); + groupMap.set(pendingGroup.groupKey, groupedItems); + } + + const groupedNodes = [...groupMap.entries()] + .sort(([firstKey], [secondKey]) => firstKey.localeCompare(secondKey)) + .map(([groupKey, groupedItems]) => { + const groupPath = parentPath ? `${parentPath}/${groupKey}` : groupKey; + + return { + type: 'group' as const, + children: groupMacrosAtLevel(groupedItems, settings, depth + 1, groupPath), + label: groupKey, + path: groupPath + }; + }); + + return sortMacroMenuTreeNodes([...ungrouped, ...groupedNodes]); +} + +function createMacroNode( + item: MacroGroupingItem, + depth: number +): MacroMenuTreeNode { + return { + type: 'macro', + displayName: depth > 0 ? item.groupingName : undefined, + macro: item.macro + }; +} + +function sortMacroMenuTreeNodes( + nodes: MacroMenuTreeNode[] +): MacroMenuTreeNode[] { + return [...nodes].sort((first, second) => getMacroMenuTreeNodeLabel(first).localeCompare(getMacroMenuTreeNodeLabel(second))); +} + +function getMacroMenuTreeNodeLabel(node: MacroMenuTreeNode): string { + if (node.type === 'group') { + return node.label || ''; + } + + return node.displayName || node.macro?.name || ''; +} + +export function splitMacroName(name: string, camelCaseSeparation: boolean): string[] { + let parts = name.split(/[^a-zA-Z0-9$]+/).filter(part => part.length > 0); + + if (camelCaseSeparation) { + parts = parts.flatMap(splitCamelCaseSegment); + } + + return parts; +} + +function splitCamelCaseSegment(segment: string): string[] { + const parts: string[] = []; + let current = ''; + + for (let index = 0; index < segment.length; index++) { + const character = segment[index]; + + if (index > 0 + && /[A-Z]/.test(character) + && current.length > 0 + && /[a-z0-9]$/.test(current)) { + parts.push(current); + current = character; + } else { + current += character; + } + } + + if (current.length > 0) { + parts.push(current); + } + + return parts.length > 0 ? parts : [segment]; +} + +function getRemainder(name: string, firstSegment: string): string { + const separatorMatch = name.match(new RegExp(`^${escapeRegExp(firstSegment)}[^a-zA-Z0-9$]+(.+)$`)); + + if (separatorMatch) { + return separatorMatch[1]; + } + + if (name.startsWith(firstSegment) && name.length > firstSegment.length) { + return name.slice(firstSegment.length); + } + + const segments = splitMacroName(name, false); + + return segments.slice(1).join(' '); +} + +function escapeRegExp(value: string): string { + return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); +} diff --git a/packages/uhk-common/src/util/index.ts b/packages/uhk-common/src/util/index.ts index 9917c00d7e2..66ba239c94f 100644 --- a/packages/uhk-common/src/util/index.ts +++ b/packages/uhk-common/src/util/index.ts @@ -10,6 +10,7 @@ export * from './find-uhk-module-by-id.js'; export * from './get-formatted-timestamp.js'; export * from './get-md5-hash-from-file-name.js'; export * from './get-slot-id-name.js'; +export * from './group-macros-by-name.js'; export * from './helpers.js'; export * from './is-bit-set.js'; export * from './is-device-protocol-support-firmware-checksum.js'; diff --git a/packages/uhk-web/src/app/components/agent/settings/settings.component.html b/packages/uhk-web/src/app/components/agent/settings/settings.component.html index 8563b1c6338..32e2945b61a 100644 --- a/packages/uhk-web/src/app/components/agent/settings/settings.component.html +++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.html @@ -44,9 +44,8 @@

- -
-
+
+
+
+

Macro sidebar grouping

+
+
+ +
+ +
+
+
+
+ +
+ +
+
+ + +
+
+ + +
+
+
+

The Follow operating system theme option may not be supported on all Linux distributions.

 diff --git a/packages/uhk-web/src/app/components/agent/settings/settings.component.scss b/packages/uhk-web/src/app/components/agent/settings/settings.component.scss index 9bc88c1d65a..b06cfcef6db 100644 --- a/packages/uhk-web/src/app/components/agent/settings/settings.component.scss +++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.scss @@ -1,3 +1,27 @@ +h1 { + margin-bottom: 1rem; +} + .theme-selector { min-width: 230px; } + +.macro-grouping-number-input { + width: 4rem; +} + +.macro-grouping-checkbox { + align-items: center; + display: flex; + gap: 0.375rem; +} + +.macro-grouping-inline-option { + align-items: center; + display: flex; + gap: 0.5rem; +} + +.macro-grouping-dependent-options--disabled { + opacity: 0.55; +} diff --git a/packages/uhk-web/src/app/components/agent/settings/settings.component.ts b/packages/uhk-web/src/app/components/agent/settings/settings.component.ts index 7087de85d47..797fe99fa54 100644 --- a/packages/uhk-web/src/app/components/agent/settings/settings.component.ts +++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.ts @@ -4,7 +4,7 @@ import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { faCog } from '@fortawesome/free-solid-svg-icons'; -import { AppTheme, AppThemeSelect } from 'uhk-common'; +import { AppTheme, AppThemeSelect, MACRO_GROUPING_MAX_DEPTH, MacroGroupingSettings } from 'uhk-common'; import { AppState, appUpdateSettingsState, @@ -12,6 +12,7 @@ import { getAnimationEnabled, getAppTheme, getIsAdvancedSettingsMenuVisible, + getMacroGroupingSettings, getOperatingSystem, getSupportedThemes, keyboardHalvesAlwaysJoined @@ -21,7 +22,7 @@ import { CheckForUpdateNowAction, ToggleCheckForUpdateOnStartupAction } from '../../../store/actions/auto-update-settings'; -import { OpenConfigFolderAction, SetAppThemeAction, ToggleAnimationEnabledAction, ToggleKeyboardHalvesAlwaysJoinedAction } from '../../../store/actions/app'; +import { OpenConfigFolderAction, SetAppThemeAction, SetMacroGroupingSettingsAction, ToggleAnimationEnabledAction, ToggleKeyboardHalvesAlwaysJoinedAction } from '../../../store/actions/app'; import { ToggleAlwaysEnableAdvancedModeAction } from '../../../store/actions/advance-settings.action'; import { OperatingSystem } from '../../../models/operating-system'; @@ -44,6 +45,8 @@ export class SettingsComponent { keyboardHalvesAlwaysJoined$: Observable; alwaysEnableAdvancedMode$: Observable; alwaysEnableAdvancedModeSettingVisible$: Observable; + macroGroupingSettings$: Observable; + macroGroupingMaxDepth = MACRO_GROUPING_MAX_DEPTH; constructor(private store: Store) { this.updateSettingsState$ = store.select(appUpdateSettingsState); @@ -54,6 +57,7 @@ export class SettingsComponent { this.keyboardHalvesAlwaysJoined$ = store.select(keyboardHalvesAlwaysJoined); this.alwaysEnableAdvancedMode$ = store.select(getAlwaysEnableAdvancedMode); this.alwaysEnableAdvancedModeSettingVisible$ = store.select(getIsAdvancedSettingsMenuVisible); + this.macroGroupingSettings$ = store.select(getMacroGroupingSettings); } openConfigFolder(): void { @@ -84,4 +88,8 @@ export class SettingsComponent { this.store.dispatch(new ToggleAlwaysEnableAdvancedModeAction(enabled)); } + updateMacroGroupingSettings(settings: Partial): void { + this.store.dispatch(new SetMacroGroupingSettingsAction(settings)); + } + } diff --git a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html index d133669cb8b..d5a5ac3bc47 100644 --- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html +++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html @@ -222,22 +222,41 @@ (click)="toggleMenuItem('macro')">
+ + +
  • +
    + {{ getMacroDisplayName(node) }} + {{ node.macro.usageCount }} +
    +
    • +
  • +
    + {{ node.label }} + +
    +
      + +
    +
    • +     +     + - +
  • -
    +
    {{ getMacroDisplayName(node) }}
  • - {{ node.label }} + {{ node.label }}…
    -
      - +
        +
      diff --git a/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss b/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss index 2c16180000d..e031befc241 100644 --- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss +++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss @@ -142,8 +142,22 @@ ul { } } + // Indentation is purely structural: it comes from the nested
        lists, not + // from any per-leaf padding. The root list supplies the base indent and each + // nested group list adds one step, so depth accumulates through the DOM. &__macro-tree-entry { - padding: 0.125rem 0 0.125rem calc(#{$macro-tree-base-indent} + var(--macro-depth, 0) * #{$macro-tree-indent-step}); + padding: 0.125rem 0; + } + + &__macro-tree { + width: auto; + margin-left: $macro-tree-base-indent; + } + + &__macro-group-children { + width: auto; + padding-left: $macro-tree-indent-step; + border-left: 1px solid silver; } &__macro-tree-item { @@ -179,6 +193,7 @@ ul { &__macro-group { cursor: pointer; + font-weight: 500; &-arrow { float: right; From 90f1cdb99d0563bc29f5583c9f0a15dd37f3ba03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A1szl=C3=B3=20Monda?= Date: Thu, 16 Jul 2026 14:25:28 +0200 Subject: [PATCH 8/8] refactor: move macro sidebar grouping helpers to uhk-web Keep persisted MacroGroupingSettings in uhk-common and colocate display-time grouping, tree types, and layout-derived max depth with the Agent UI. Co-authored-by: Cursor --- .../src/models/macro-grouping-settings.ts | 42 ------- packages/uhk-common/src/util/index.ts | 1 - .../agent/settings/settings.component.ts | 3 +- .../side-menu/side-menu.component.html | 2 +- .../side-menu/side-menu.component.scss | 2 +- .../side-menu/side-menu.component.ts | 13 +-- .../src/app/models/macro-menu-tree-node.ts | 21 +++- packages/uhk-web/src/app/store/index.ts | 2 +- .../src/app/store/reducers/app.reducer.ts | 3 +- .../app}/util/group-macros-by-name.test.ts | 104 +++++++++++------- .../src/app}/util/group-macros-by-name.ts | 98 +++++++++++++---- 11 files changed, 172 insertions(+), 119 deletions(-) rename packages/{uhk-common/src => uhk-web/src/app}/util/group-macros-by-name.test.ts (69%) rename packages/{uhk-common/src => uhk-web/src/app}/util/group-macros-by-name.ts (67%) diff --git a/packages/uhk-common/src/models/macro-grouping-settings.ts b/packages/uhk-common/src/models/macro-grouping-settings.ts index 41caf7e899f..f881d4af726 100644 --- a/packages/uhk-common/src/models/macro-grouping-settings.ts +++ b/packages/uhk-common/src/models/macro-grouping-settings.ts @@ -7,51 +7,9 @@ export interface MacroGroupingSettings { export const MACRO_GROUPING_MIN_DEPTH = 1; -// Mirrors side-menu.component.scss ($side-menu-width, $macro-tree-base-indent, $macro-tree-indent-step). -const MACRO_TREE_SIDE_MENU_WIDTH_PX = 250; -const MACRO_TREE_LEVEL1_PADDING_PX = 24; -const MACRO_TREE_BASE_INDENT_PX = 32; -const MACRO_TREE_INDENT_STEP_PX = 12; -const MACRO_TREE_RESERVED_RIGHT_PX = 48; -const MACRO_TREE_MIN_LABEL_WIDTH_PX = 72; - -/** - * Deepest macro-tree depth the sidebar layout can fit before labels get too narrow. - * The CSS indent is unbounded; this limit comes from the 250px sidebar width. - */ -export const MACRO_GROUPING_MAX_DEPTH = Math.max( - MACRO_GROUPING_MIN_DEPTH, - Math.floor( - (MACRO_TREE_SIDE_MENU_WIDTH_PX - - MACRO_TREE_LEVEL1_PADDING_PX - - MACRO_TREE_BASE_INDENT_PX - - MACRO_TREE_RESERVED_RIGHT_PX - - MACRO_TREE_MIN_LABEL_WIDTH_PX) - / MACRO_TREE_INDENT_STEP_PX - ) -); - export const DEFAULT_MACRO_GROUPING_SETTINGS: MacroGroupingSettings = { camelCaseSeparation: false, enabled: false, maxDepth: 1, minChildren: 2, }; - -export function normalizeMacroGroupingSettings( - settings?: Partial -): MacroGroupingSettings { - const merged: MacroGroupingSettings = { - ...DEFAULT_MACRO_GROUPING_SETTINGS, - ...settings, - }; - - return { - ...merged, - maxDepth: Math.min( - MACRO_GROUPING_MAX_DEPTH, - Math.max(MACRO_GROUPING_MIN_DEPTH, merged.maxDepth) - ), - minChildren: Math.min(10, Math.max(2, merged.minChildren)), - }; -} diff --git a/packages/uhk-common/src/util/index.ts b/packages/uhk-common/src/util/index.ts index 66ba239c94f..9917c00d7e2 100644 --- a/packages/uhk-common/src/util/index.ts +++ b/packages/uhk-common/src/util/index.ts @@ -10,7 +10,6 @@ export * from './find-uhk-module-by-id.js'; export * from './get-formatted-timestamp.js'; export * from './get-md5-hash-from-file-name.js'; export * from './get-slot-id-name.js'; -export * from './group-macros-by-name.js'; export * from './helpers.js'; export * from './is-bit-set.js'; export * from './is-device-protocol-support-firmware-checksum.js'; diff --git a/packages/uhk-web/src/app/components/agent/settings/settings.component.ts b/packages/uhk-web/src/app/components/agent/settings/settings.component.ts index 797fe99fa54..8bb2c563ab7 100644 --- a/packages/uhk-web/src/app/components/agent/settings/settings.component.ts +++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.ts @@ -4,7 +4,7 @@ import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { faCog } from '@fortawesome/free-solid-svg-icons'; -import { AppTheme, AppThemeSelect, MACRO_GROUPING_MAX_DEPTH, MacroGroupingSettings } from 'uhk-common'; +import { AppTheme, AppThemeSelect, MacroGroupingSettings } from 'uhk-common'; import { AppState, appUpdateSettingsState, @@ -17,6 +17,7 @@ import { getSupportedThemes, keyboardHalvesAlwaysJoined } from '../../../store'; +import { MACRO_GROUPING_MAX_DEPTH } from '../../../util/group-macros-by-name'; import { State as UpdateSettingsState } from '../../../store/reducers/auto-update-settings'; import { CheckForUpdateNowAction, diff --git a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html index b005aeddba9..f7774404455 100644 --- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html +++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html @@ -234,7 +234,7 @@
      • {{ getMacroDisplayName(node) }} + [class.disabled]="state.updatingFirmware">{{ node.macro.name }} = {}; - for (const path of this.collectMacroGroupPaths(this.state?.macroTree || [])) { + for (const path of this.collectMacroGroupPaths(this.state.macroTree)) { nextState[path] = this.macroGroupState[path] || { icon: faChevronUp, animation: 'active' @@ -240,11 +237,11 @@ export class SideMenuComponent implements OnChanges, OnInit, OnDestroy { private collectMacroGroupPaths(nodes: MacroMenuTreeNode[]): string[] { return nodes.flatMap(node => { - if (node.type !== 'group' || !node.path) { + if (node.type !== 'group') { return []; } - return [node.path, ...this.collectMacroGroupPaths(node.children || [])]; + return [node.path, ...this.collectMacroGroupPaths(node.children)]; }); } } diff --git a/packages/uhk-web/src/app/models/macro-menu-tree-node.ts b/packages/uhk-web/src/app/models/macro-menu-tree-node.ts index 4605a448861..a6cb57b4ed8 100644 --- a/packages/uhk-web/src/app/models/macro-menu-tree-node.ts +++ b/packages/uhk-web/src/app/models/macro-menu-tree-node.ts @@ -1,4 +1,21 @@ import { MacroMenuItem } from './macro-menu-item'; -import { MacroMenuTreeNode as CommonMacroMenuTreeNode } from 'uhk-common'; -export type MacroMenuTreeNode = CommonMacroMenuTreeNode; +export interface GroupableMacroItem { + id: number; + name: string; +} + +export interface MacroMenuTreeGroupNode { + children: MacroMenuTreeNode[]; + label: string; + path: string; + type: 'group'; +} + +export interface MacroMenuTreeMacroNode { + macro: TMacro; + type: 'macro'; +} + +export type MacroMenuTreeNode = + MacroMenuTreeGroupNode | MacroMenuTreeMacroNode; diff --git a/packages/uhk-web/src/app/store/index.ts b/packages/uhk-web/src/app/store/index.ts index 59e79665c4c..d4bca54e50b 100644 --- a/packages/uhk-web/src/app/store/index.ts +++ b/packages/uhk-web/src/app/store/index.ts @@ -21,7 +21,6 @@ import { LEFT_KEY_CLUSTER_MODULE, LeftSlotModules, MAX_ALLOWED_MACROS, - groupMacrosByName, PlayMacroAction, RIGHT_TRACKPOINT_MODULE, RightSlotModules, @@ -60,6 +59,7 @@ import { PrivilagePageSate } from '../models/privilage-page-sate'; import { SelectOptionData } from '../models/select-option-data'; import { defaultUhkThemeColors } from '../util/default-uhk-theme-colors'; import { escapeHtml } from '../util/escape-html'; +import { groupMacrosByName } from '../util/group-macros-by-name'; import { parseStatusBuffer } from '../util/status-buffer-parser'; import { addMissingModuleConfigs } from './reducers/add-missing-module-configs'; diff --git a/packages/uhk-web/src/app/store/reducers/app.reducer.ts b/packages/uhk-web/src/app/store/reducers/app.reducer.ts index 42bf4ab2d17..b55627f4f60 100644 --- a/packages/uhk-web/src/app/store/reducers/app.reducer.ts +++ b/packages/uhk-web/src/app/store/reducers/app.reducer.ts @@ -4,7 +4,6 @@ import { CommandLineArgs, DEFAULT_MACRO_GROUPING_SETTINGS, disableAgentUpgradeProtection, - normalizeMacroGroupingSettings, HardwareConfiguration, KeyboardLayout, MacroGroupingSettings, @@ -14,6 +13,8 @@ import { UserConfiguration, } from 'uhk-common'; +import { normalizeMacroGroupingSettings } from '../../util/group-macros-by-name'; + import * as App from '../actions/app'; import { ActionTypes as UserConfigActionTypes, SaveUserConfigSuccessAction } from '../actions/user-config'; import { ActionTypes as DeviceActionTypes, ConnectionStateChangedAction } from '../actions/device'; diff --git a/packages/uhk-common/src/util/group-macros-by-name.test.ts b/packages/uhk-web/src/app/util/group-macros-by-name.test.ts similarity index 69% rename from packages/uhk-common/src/util/group-macros-by-name.test.ts rename to packages/uhk-web/src/app/util/group-macros-by-name.test.ts index 456ef6e2628..fcb2cff9445 100644 --- a/packages/uhk-common/src/util/group-macros-by-name.test.ts +++ b/packages/uhk-web/src/app/util/group-macros-by-name.test.ts @@ -1,14 +1,13 @@ import { describe, it } from 'node:test'; -import { - DEFAULT_MACRO_GROUPING_SETTINGS, - MACRO_GROUPING_MAX_DEPTH, - normalizeMacroGroupingSettings, -} from '../models/macro-grouping-settings.js'; +import { DEFAULT_MACRO_GROUPING_SETTINGS } from 'uhk-common'; + import { findMacroGroupAncestorPaths, groupMacrosByName, GroupableMacroItem, + MACRO_GROUPING_MAX_DEPTH, + normalizeMacroGroupingSettings, splitMacroName } from './group-macros-by-name.js'; @@ -77,11 +76,13 @@ describe('groupMacrosByName', () => { assert.equal(result.length, 2); assert.deepEqual(result.map(node => node.type), ['macro', 'group']); - assert.equal(result[0].macro?.name, 'Brightness up'); - assert.equal(result[1].label, 'Doom'); - assert.equal(result[1].children?.length, 2); - assert.equal(result[1].children?.[0].macro?.name, 'Doom: Chainsaw'); - assert.equal(result[1].children?.[1].macro?.name, 'Doom: Plasma gun'); + assert.equal(result[0].type === 'macro' ? result[0].macro.name : '', 'Brightness up'); + assert.equal(result[1].type === 'group' ? result[1].label : '', 'Doom'); + assert.equal(result[1].type === 'group' ? result[1].children.length : 0, 2); + if (result[1].type === 'group') { + assert.equal(result[1].children[0].type === 'macro' ? result[1].children[0].macro.name : '', 'Doom: Chainsaw'); + assert.equal(result[1].children[1].type === 'macro' ? result[1].children[1].macro.name : '', 'Doom: Plasma gun'); + } }); it('does not create a group when there are fewer macros than minChildren', ({ assert }) => { @@ -94,8 +95,8 @@ describe('groupMacrosByName', () => { assert.equal(result.length, 2); assert.deepEqual(result.map(node => node.type), ['macro', 'macro']); - assert.equal(result[0].macro?.name, 'Brightness up'); - assert.equal(result[1].macro?.name, 'Doom: Chainsaw'); + assert.equal(result[0].type === 'macro' ? result[0].macro.name : '', 'Brightness up'); + assert.equal(result[1].type === 'macro' ? result[1].macro.name : '', 'Doom: Chainsaw'); }); it('groups by camel case when enabled', ({ assert }) => { @@ -112,10 +113,15 @@ describe('groupMacrosByName', () => { assert.equal(result.length, 2); assert.deepEqual(result.map(node => node.type), ['group', 'macro']); - assert.equal(result[0].label, 'bind'); - assert.equal(result[0].children?.length, 2); - assert.deepEqual(result[0].children?.map(child => child.macro?.name), ['bindMouseLeft', 'bindMouseRight']); - assert.equal(result[1].macro?.name, 'brightnessUp'); + assert.equal(result[0].type === 'group' ? result[0].label : '', 'bind'); + if (result[0].type === 'group') { + assert.equal(result[0].children.length, 2); + assert.deepEqual( + result[0].children.map(child => child.type === 'macro' ? child.macro.name : ''), + ['bindMouseLeft', 'bindMouseRight'] + ); + } + assert.equal(result[1].type === 'macro' ? result[1].macro.name : '', 'brightnessUp'); }); it('groups dollar-prefixed smart macro names under the dollar prefix', ({ assert }) => { @@ -131,8 +137,13 @@ describe('groupMacrosByName', () => { assert.equal(result.length, 1); assert.equal(result[0].type, 'group'); - assert.equal(result[0].label, '$on'); - assert.deepEqual(result[0].children?.map(child => child.macro?.name), ['$onInit', '$onJoin']); + if (result[0].type === 'group') { + assert.equal(result[0].label, '$on'); + assert.deepEqual( + result[0].children.map(child => child.type === 'macro' ? child.macro.name : ''), + ['$onInit', '$onJoin'] + ); + } }); it('groups non-English macro names that share a prefix', ({ assert }) => { @@ -145,8 +156,13 @@ describe('groupMacrosByName', () => { assert.equal(result.length, 1); assert.equal(result[0].type, 'group'); - assert.equal(result[0].label, 'Az'); - assert.deepEqual(result[0].children?.map(child => child.macro?.name), ['Az én: első', 'Az én: második']); + if (result[0].type === 'group') { + assert.equal(result[0].label, 'Az'); + assert.deepEqual( + result[0].children.map(child => child.type === 'macro' ? child.macro.name : ''), + ['Az én: első', 'Az én: második'] + ); + } }); it('keeps parent-level remainders when deeper nesting does not apply', ({ assert }) => { @@ -161,8 +177,13 @@ describe('groupMacrosByName', () => { }); assert.equal(result.length, 1); - assert.equal(result[0].label, 'Open'); - assert.deepEqual(result[0].children?.map(child => child.macro?.name), ['Open daily sites', 'Open weekly sites']); + if (result[0].type === 'group') { + assert.equal(result[0].label, 'Open'); + assert.deepEqual( + result[0].children.map(child => child.type === 'macro' ? child.macro.name : ''), + ['Open daily sites', 'Open weekly sites'] + ); + } }); it('places a macro named like a group inside that group', ({ assert }) => { @@ -176,12 +197,13 @@ describe('groupMacrosByName', () => { assert.equal(result.length, 1); assert.equal(result[0].type, 'group'); - assert.equal(result[0].label, 'Doom'); - assert.deepEqual(result[0].children?.map(child => child.macro?.name), [ - 'Doom', - 'Doom: Chainsaw', - 'Doom: Plasma gun', - ]); + if (result[0].type === 'group') { + assert.equal(result[0].label, 'Doom'); + assert.deepEqual( + result[0].children.map(child => child.type === 'macro' ? child.macro.name : ''), + ['Doom', 'Doom: Chainsaw', 'Doom: Plasma gun'] + ); + } }); it('places an exact subgroup name inside a nested group', ({ assert }) => { @@ -197,15 +219,18 @@ describe('groupMacrosByName', () => { }); assert.equal(result.length, 1); - assert.equal(result[0].label, 'Open'); - assert.equal(result[0].children?.length, 1); - assert.equal(result[0].children?.[0].type, 'group'); - assert.equal(result[0].children?.[0].label, 'daily'); - assert.deepEqual(result[0].children?.[0].children?.map(child => child.macro?.name), [ - 'Open: daily', - 'Open: daily: evening', - 'Open: daily: morning', - ]); + if (result[0].type === 'group') { + assert.equal(result[0].label, 'Open'); + assert.equal(result[0].children.length, 1); + assert.equal(result[0].children[0].type, 'group'); + if (result[0].children[0].type === 'group') { + assert.equal(result[0].children[0].label, 'daily'); + assert.deepEqual( + result[0].children[0].children.map(child => child.type === 'macro' ? child.macro.name : ''), + ['Open: daily', 'Open: daily: evening', 'Open: daily: morning'] + ); + } + } }); it('keeps a same-named macro outside when the group is not created', ({ assert }) => { @@ -217,7 +242,10 @@ describe('groupMacrosByName', () => { const result = groupMacrosByName(macros, ENABLED_MACRO_GROUPING_SETTINGS); assert.equal(result.length, 2); - assert.deepEqual(result.map(node => node.macro?.name), ['Doom', 'Doom: Chainsaw']); + assert.deepEqual( + result.map(node => node.type === 'macro' ? node.macro.name : ''), + ['Doom', 'Doom: Chainsaw'] + ); }); }); diff --git a/packages/uhk-common/src/util/group-macros-by-name.ts b/packages/uhk-web/src/app/util/group-macros-by-name.ts similarity index 67% rename from packages/uhk-common/src/util/group-macros-by-name.ts rename to packages/uhk-web/src/app/util/group-macros-by-name.ts index fedd39e74c9..b8d8c652697 100644 --- a/packages/uhk-common/src/util/group-macros-by-name.ts +++ b/packages/uhk-web/src/app/util/group-macros-by-name.ts @@ -1,16 +1,53 @@ -import { MacroGroupingSettings, normalizeMacroGroupingSettings } from '../models/macro-grouping-settings.js'; - -export interface GroupableMacroItem { - id: number; - name: string; -} +import { + DEFAULT_MACRO_GROUPING_SETTINGS, + MACRO_GROUPING_MIN_DEPTH, + MacroGroupingSettings, +} from 'uhk-common'; + +import { GroupableMacroItem, MacroMenuTreeNode } from '../models/macro-menu-tree-node'; + +export type { GroupableMacroItem }; + +// Mirrors side-menu.component.scss ($side-menu-width, $macro-tree-base-indent, $macro-tree-indent-step). +const MACRO_TREE_SIDE_MENU_WIDTH_PX = 250; +const MACRO_TREE_LEVEL1_PADDING_PX = 24; +const MACRO_TREE_BASE_INDENT_PX = 32; +const MACRO_TREE_INDENT_STEP_PX = 12; +const MACRO_TREE_RESERVED_RIGHT_PX = 48; +const MACRO_TREE_MIN_LABEL_WIDTH_PX = 72; + +/** + * Deepest macro-tree depth the sidebar layout can fit before labels get too narrow. + * The CSS indent is unbounded; this limit comes from the 250px sidebar width. + */ +export const MACRO_GROUPING_MAX_DEPTH = Math.max( + MACRO_GROUPING_MIN_DEPTH, + Math.floor( + (MACRO_TREE_SIDE_MENU_WIDTH_PX + - MACRO_TREE_LEVEL1_PADDING_PX + - MACRO_TREE_BASE_INDENT_PX + - MACRO_TREE_RESERVED_RIGHT_PX + - MACRO_TREE_MIN_LABEL_WIDTH_PX) + / MACRO_TREE_INDENT_STEP_PX + ) +); + +export function normalizeMacroGroupingSettings( + settings?: Partial +): MacroGroupingSettings { + const merged: MacroGroupingSettings = { + ...DEFAULT_MACRO_GROUPING_SETTINGS, + ...settings, + }; -export interface MacroMenuTreeNode { - children?: MacroMenuTreeNode[]; - label?: string; - macro?: TMacro; - path?: string; - type: 'group' | 'macro'; + return { + ...merged, + maxDepth: Math.min( + MACRO_GROUPING_MAX_DEPTH, + Math.max(MACRO_GROUPING_MIN_DEPTH, merged.maxDepth) + ), + minChildren: Math.min(10, Math.max(2, merged.minChildren)), + }; } interface MacroGroupingItem { @@ -18,6 +55,13 @@ interface MacroGroupingItem { macro: TMacro; } +interface GroupMacrosAtLevelOptions { + depth: number; + items: MacroGroupingItem[]; + parentPath: string; + settings: MacroGroupingSettings; +} + const MACRO_NAME_SEPARATOR = /[^\p{L}\p{N}$]+/u; const LEADING_MACRO_NAME_SEPARATOR = /^[^\p{L}\p{N}$]+/u; @@ -36,16 +80,19 @@ export function groupMacrosByName( macro })); - return groupMacrosAtLevel(items, normalizedSettings, 0, ''); + return groupMacrosAtLevel({ + items, + settings: normalizedSettings, + depth: 0, + parentPath: '', + }); } function groupMacrosAtLevel( - items: MacroGroupingItem[], - settings: MacroGroupingSettings, - depth: number, - parentPath: string + options: GroupMacrosAtLevelOptions ): MacroMenuTreeNode[] { - const sortedItems = items.toSorted((a, b) => a.groupingName.localeCompare(b.groupingName)); + const { depth, items, parentPath, settings } = options; + const sortedItems = [...items].sort((a, b) => a.groupingName.localeCompare(b.groupingName)); if (depth >= settings.maxDepth) { return sortedItems.map(item => createMacroNode(item)); @@ -99,7 +146,12 @@ function groupMacrosAtLevel( groupedNodes.push({ type: 'group', - children: groupMacrosAtLevel(childItems, settings, depth + 1, groupPath), + children: groupMacrosAtLevel({ + items: childItems, + settings, + depth: depth + 1, + parentPath: groupPath, + }), label: head, path: groupPath, }); @@ -129,10 +181,10 @@ function sortMacroMenuTreeNodes( function getMacroMenuTreeNodeLabel(node: MacroMenuTreeNode): string { if (node.type === 'group') { - return node.label || ''; + return node.label; } - return node.macro?.name || ''; + return node.macro.name; } export function findMacroGroupAncestorPaths( @@ -141,11 +193,11 @@ export function findMacroGroupAncestorPaths( ancestorPaths: string[] = [] ): string[] | null { for (const node of nodes) { - if (node.type === 'macro' && node.macro?.id === macroId) { + if (node.type === 'macro' && node.macro.id === macroId) { return ancestorPaths; } - if (node.type === 'group' && node.path && node.children) { + if (node.type === 'group') { const found = findMacroGroupAncestorPaths( node.children, macroId,