feat: show macro key assignments on the macro page (#3002)

List where each macro is used with links back to the assigned key, and avoid treating Jump to macro navigation as a config change.
---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Kiss Róbert <ert78gb@gmail.com>

Author: 3 people

.cursor/rules/initialize-state-and-variables.mdc

@@ -1,13 +1,14 @@
 ---
-description: Initialize variables and NgRx state with concrete defaults
-globs: **/*.{ts,tsx}
-alwaysApply: false
+description: Initialize variables and NgRx state with concrete defaults; avoid optional chaining smell
+alwaysApply: true
 ---
 
 # Initialize variables and NgRx state
 
 Initialize primitives and objects at declaration whenever a sensible default exists. The goal is typed, predictable values—not defensive `?.` and `??` scattered through selectors, templates, and components.
 
+Treat widespread optional chaining (`?.`) and nullish coalescing (`??`) as a code smell: they often hide missing initialization or the wrong selector. Prefer concrete defaults and explicit control flow (`if` / early return) so optionality is intentional, not lazy.
+
 ## General TypeScript
 
 - Give local variables an initial value when one is known at declaration time.

.cursor/rules/max-function-parameters.mdc

@@ -0,0 +1,18 @@
+---
+description: Prefer options objects when a function needs more than three parameters
+alwaysApply: true
+---
+
+# Function parameters
+
+Functions and methods with more than three parameters are hard to maintain. Prefer an options/payload object once the call needs four or more values.
+
+```typescript
+// ❌ BAD
+createKeymapWithMacroAssignment(abbr, name, layerId, moduleId, keyId, macroId)
+
+// ✅ GOOD
+createKeymapWithMacroAssignment({ abbreviation, name, layerId, moduleId, keyId, macroId })
+```
+
+Three-or-fewer scalar params are fine when the meaning stays obvious at the call site.

.cursor/rules/prefer-existing-styles.mdc

@@ -0,0 +1,29 @@
+---
+description: Prefer Bootstrap and existing styles over new custom CSS
+alwaysApply: true
+---
+
+# Prefer existing styles
+
+Do not add custom CSS when Bootstrap utilities or existing shared styles already cover spacing, typography, and layout.
+
+## Prefer
+
+- Bootstrap utilities: `my-2`, `mb-3`, `me-1`, `small`, `text-nowrap`, `float-end`, …
+- Patterns already used nearby (e.g. `back-to` uses `class="my-2"`)
+
+## Avoid
+
+- New BEM blocks for one-off spacing/font-size/weight that utilities already express
+- Growing component SCSS with unexplained overrides that later confuse deletions
+
+```html
+<!-- ❌ BAD -->
+<div class="macro__assignments">…</div>
+<!-- plus .macro__assignments { font-size: 0.875rem; padding-top: 1.25em; } -->
+
+<!-- ✅ GOOD -->
+<div class="my-2 small">…</div>
+```
+
+Only add custom CSS when no existing utility/shared rule fits, and keep it minimal.

.cursor/rules/smart-dumb-components.mdc

@@ -0,0 +1,34 @@
+---
+description: Prefer smart containers / dumb leaf components with store-side calculations
+alwaysApply: true
+---
+
+# Smart / dumb components
+
+Follow the smart/dumb (container/presentational) pattern already used in this codebase.
+
+## Responsibilities
+
+- **Store / selectors / smart parents**: derive view models, sort/filter/map domain data, combine streams.
+- **Leaf components**: receive `@Input()`s, render them, emit `@Output()`s / dispatch obvious user intents. Avoid reading the store just to compute display data.
+
+```typescript
+// ❌ BAD — deep leaf component selects and calculates
+class MacroHeaderComponent {
+  constructor(store: Store) {
+    store.select(getKeymaps).subscribe(keymaps => this.assignments = map(keymaps));
+  }
+}
+
+// ✅ GOOD — smart parent selects; leaf renders
+// macro-edit (smart)
+assignments$ = this.store.select(getSelectedMacroKeyAssignments);
+
+// template
+<macro-header [macro]="macro" [assignments]="assignments$ | async"></macro-header>
+
+// macro-header (dumb regarding this data)
+@Input() assignments: MacroKeyAssignmentViewModel[] = [];
+```
+
+Existing leaf components that already inject `Store` only to `dispatch` actions are acceptable when inherited; do not expand them with new selectors or calculation logic.

.cursor/rules/uhk-package-boundaries.mdc

@@ -0,0 +1,29 @@
+---
+description: Keep UI and presentation code out of uhk-common
+alwaysApply: true
+---
+
+# Package boundaries: uhk-common vs uhk-web
+
+`uhk-common` is for shared, UI-agnostic domain logic (config serializers, USB helpers, pure data transforms). Do **not** put presentation-oriented helpers there.
+
+## Belong in `uhk-web` (or uhk-agent), not `uhk-common`
+
+- Display labels, breadcrumbs, menu grouping, view-model mappers
+- Anything that formats data for Angular templates
+- Code that only Agent UI consumers need, even if it looks "pure"
+
+## Belong in `uhk-common`
+
+- Config/device models and serialization
+- Algorithms that both Electron main and renderer need without UI assumptions
+
+```typescript
+// ❌ BAD — lives in uhk-common only because tests were convenient there
+export function findMacroKeyAssignments(...): MacroKeyAssignment[] { /* for macro page UI */ }
+
+// ✅ GOOD — presentation helper next to the UI that uses it
+// packages/uhk-web/src/app/util/find-macro-key-assignments.ts
+```
+
+If you want unit tests for UI helpers and `uhk-web` has no runner yet, still put the code in `uhk-web` and add tests there; do not grow UI surface area in `uhk-common` for convenience.

packages/uhk-web/package.json

@@ -11,9 +11,11 @@
     "server:renderer": "ng build --project=uhk-renderer --watch",
     "lint": "run-p -snc lint:*",
     "lint:ng": "ng lint",
-    "lint:style": "stylelint \"src/**/*.scss\""
+    "lint:style": "stylelint \"src/**/*.scss\"",
+    "test": "node --loader=ts-node/esm --test \"**/*.test.ts\""
   },
   "private": true,
+  "type": "module",
   "license": "See in LICENSE",
   "devDependencies": {
     "@angular-devkit/build-angular": "20.3.28",

packages/uhk-web/src/app/components/back-to/back-to.component.ts

@@ -7,13 +7,14 @@ import { Subscription } from 'rxjs';
     standalone: false,
     template: `
         <div *ngIf="backUrl" class="my-2">
-            Back to <a [routerLink]="[backUrl]" [queryParams]="queryParams">{{backText}}</a>
+            Back to <a [routerLink]="[backUrl]" [queryParams]="queryParams">{{ backText }}</a>{{ backSuffix }}
         </div>
     `,
 })
 export class BackToComponent implements OnDestroy {
     backUrl: string | undefined;
     backText: string;
+    backSuffix = '';
     queryParams = {};
 
     private routeSubscription: Subscription;
@@ -25,6 +26,7 @@ export class BackToComponent implements OnDestroy {
                 const backUrl = new URL(params.backUrl as string, window.location.origin);
                 this.backUrl = backUrl.pathname;
                 this.backText = params.backText;
+                this.backSuffix = params.backSuffix || '';
                 this.queryParams = {};
                 for (const key of backUrl.searchParams.keys()) {
                     this.queryParams[key] = backUrl.searchParams.get(key);

packages/uhk-web/src/app/components/keymap/add/keymap-add.component.ts

@@ -68,7 +68,8 @@ export class KeymapAddComponent implements OnDestroy, OnInit {
     navigateToModuleSettings(moduleId: number): void {
         this.store.dispatch(new NavigateToModuleSettings({
             backUrl: `/add-keymap/${encodeURIComponent(this.keymap.abbreviation)}`,
-            backText: `new "${this.keymap.name}" keymap`,
+            backText: `new ${this.keymap.name}`,
+            backSuffix: ' keymap',
             moduleId
         }));
     }

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts

@@ -161,7 +161,8 @@ export class KeymapEditComponent implements OnDestroy {
     navigateToModuleSettings(moduleId: number): void {
         this.store.dispatch(new NavigateToModuleSettings({
             backUrl: `/keymap/${encodeURIComponent(this.keymap.abbreviation)}?layer=${this.selectedLayer}`,
-            backText: `"${this.keymap.name}" keymap`,
+            backText: this.keymap.name,
+            backSuffix: ' keymap',
             moduleId,
         }));
     }

packages/uhk-web/src/app/components/macro/edit/macro-edit.component.html

@@ -10,6 +10,7 @@
                             [macro]="macro"
                             [isNew]="isNew$ | async"
                             [maxMacroCountReached]="maxMacroCountReached$ | async"
+                            [assignments]="assignments"
                     ></macro-header>
                     <macro-list
                         [macro]="macro"