feat: add back link when jumping from key popover to a macro

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

@@ -6,7 +6,7 @@ import { Subscription } from 'rxjs';
     selector: 'back-to',
     standalone: false,
     template: `
-        <div *ngIf="backUrl" class="my-2">
+        <div *ngIf="backUrl" class="mt-3">
             Back to <a [routerLink]="[backUrl]" [queryParams]="queryParams">{{ backText }}</a>{{ backSuffix }}
         </div>
     `,

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

@@ -168,9 +168,10 @@ export class MacroEditComponent implements OnDestroy {
 
         this.router.navigate([], {
             queryParams: {
-                actionIndex: model?.id,
-                inlineEdit: model?.inlineEdit
-            }
+                actionIndex: model?.id ?? null,
+                inlineEdit: model?.inlineEdit ?? null
+            },
+            queryParamsHandling: 'merge',
         });
     }
 
@@ -190,7 +191,11 @@ export class MacroEditComponent implements OnDestroy {
     private hideActiveEditor(): void {
         if (!this.selectedMacroActionIdModel?.inlineEdit) {
             this.router.navigate([], {
-                queryParams: {},
+                queryParams: {
+                    actionIndex: null,
+                    inlineEdit: null,
+                },
+                queryParamsHandling: 'merge',
             });
         }
     }

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

@@ -25,7 +25,8 @@
         <fa-icon [icon]="faCopy"></fa-icon>
     </button>
 </uhk-header>
-<div *ngIf="assignments.length" class="mt-3 mb-2">
+<back-to/>
+<div *ngIf="assignments.length" class="my-2">
     <span class="me-1">Used on:</span>
     <ng-container *ngFor="let assignment of assignments; let last = last">
         <a class="text-nowrap"

packages/uhk-web/src/app/store/effects/macro.ts

@@ -7,14 +7,17 @@ import { routerNavigatedAction } from '@ngrx/router-store';
 import { distinctUntilChanged, map, tap, withLatestFrom } from 'rxjs/operators';
 
 import { Macro } from 'uhk-common';
+import { MapperService } from '../../services/mapper.service';
+import { formatMacroKeyAssignmentLabel } from '../../util/format-macro-key-assignment-label';
 import * as Keymaps from '../actions/keymap';
 import * as Macros from '../actions/macro';
-import { AppState, getSelectedMacro } from '..';
+import { AppState, getDefaultUserConfiguration, getSelectedMacro } from '..';
 import { SelectMacroAction } from '../actions/macro';
 
 @Injectable()
 export class MacroEffects {
     private readonly actions$ = inject(Actions);
+    private readonly mapper = inject(MapperService);
     private readonly router = inject(Router);
     private readonly store = inject<Store<AppState>>(Store);
 
@@ -55,21 +58,47 @@ export class MacroEffects {
     assignNewMacro$ = createEffect(() => this.actions$
         .pipe(
             ofType<Keymaps.SaveKeyAction>(Keymaps.ActionTypes.SaveKey),
-            withLatestFrom(this.store.select(getSelectedMacro)),
-            tap(([action, newMacro]) => {
+            withLatestFrom(
+                this.store.select(getSelectedMacro),
+                this.store.select(getDefaultUserConfiguration),
+            ),
+            tap(([action, newMacro, defaultUserConfiguration]) => {
                 if (action.payload.keyAction.assignNewMacro || action.payload.keyAction.navigateToMacro) {
-                    this.navigateToNewMacro(newMacro);
+                    const { keymap, layer, module, key } = action.payload;
+                    const isAddKeymap = this.router.url.startsWith('/add-keymap');
+                    const keymapName = isAddKeymap ? `new ${keymap.name}` : keymap.name;
+                    const backUrl = isAddKeymap
+                        ? `/add-keymap/${encodeURIComponent(keymap.abbreviation)}`
+                        : `/keymap/${encodeURIComponent(keymap.abbreviation)}?layer=${layer}&module=${module}&key=${key}`;
+
+                    this.navigateToNewMacro(newMacro, {
+                        backUrl,
+                        backText: formatMacroKeyAssignmentLabel({
+                            keymapName,
+                            layerId: layer,
+                            moduleId: module,
+                            keyId: key,
+                            defaultUserConfiguration,
+                            mapper: this.mapper,
+                        }),
+                        backSuffix: ' key',
+                    });
                 }
             }),
         ),
     { dispatch: false }
     );
 
-    private navigateToNewMacro(newMacro: Macro): Promise<boolean> {
-        if (newMacro) {
-            return this.router.navigate(['/macro', newMacro.id]);
+    private navigateToNewMacro(
+        newMacro: Macro,
+        back?: { backUrl: string; backText: string; backSuffix?: string },
+    ): Promise<boolean> {
+        const commands = newMacro ? ['/macro', newMacro.id] : ['/macro'];
+
+        if (back) {
+            return this.router.navigate(commands, { queryParams: back });
         }
 
-        return this.router.navigate(['/macro']);
+        return this.router.navigate(commands);
     }
 }

packages/uhk-web/src/app/store/effects/user-config.ts

@@ -428,6 +428,15 @@ export class UserConfigEffects {
     resetKeymapQueryParams$ = createEffect(() => this.actions$
         .pipe(
             ofType(Keymaps.ActionTypes.SaveKey, Keymaps.ActionTypes.ClosePopover),
+            filter(action => {
+                if (action.type !== Keymaps.ActionTypes.SaveKey) {
+                    return true;
+                }
+
+                const keyAction = (action as Keymaps.SaveKeyAction).payload.keyAction;
+
+                return !keyAction.navigateToMacro && !keyAction.assignNewMacro;
+            }),
             tap(() => {
                 this.router.navigate([], {
                     queryParams: {

packages/uhk-web/src/app/util/build-macro-key-assignment-view-models.ts

@@ -1,12 +1,10 @@
-import { Keymap, LayerName, UserConfiguration } from 'uhk-common';
+import { Keymap, UserConfiguration } from 'uhk-common';
 
 import { MacroKeyAssignmentViewModel } from '../models';
 import { MapperService } from '../services/mapper.service';
 import { LAYER_OPTIONS } from '../store/reducers/layer-options';
 import { findMacroKeyAssignments, MacroKeyAssignment } from './find-macro-key-assignments';
-import { getDefaultQwertyKeyLabel } from './get-default-key-label';
-
-const MACRO_KEY_ASSIGNMENT_SEPARATOR = ' ⭢ ';
+import { formatMacroKeyAssignmentLabel } from './format-macro-key-assignment-label';
 
 export interface BuildMacroKeyAssignmentViewModelsOptions {
     keymaps: Keymap[];
@@ -20,23 +18,20 @@ export function buildMacroKeyAssignmentViewModels(
 ): MacroKeyAssignmentViewModel[] {
     return findMacroKeyAssignments(options.keymaps, options.macroId)
         .sort(compareAssignments)
-        .map(assignment => {
-            const layerOption = LAYER_OPTIONS.get(assignment.layerId);
-            const keyLabel = getDefaultQwertyKeyLabel({
-                defaultUserConfiguration: options.defaultUserConfiguration,
-                moduleId: assignment.moduleId,
-                keyId: assignment.keyId,
-                mapper: options.mapper,
-            });
-
-            return {
-                keymapAbbreviation: assignment.keymapAbbreviation,
+        .map(assignment => ({
+            keymapAbbreviation: assignment.keymapAbbreviation,
+            layerId: assignment.layerId,
+            moduleId: assignment.moduleId,
+            keyId: assignment.keyId,
+            label: formatMacroKeyAssignmentLabel({
+                keymapName: assignment.keymapName,
                 layerId: assignment.layerId,
                 moduleId: assignment.moduleId,
                 keyId: assignment.keyId,
-                label: `${assignment.keymapName}${MACRO_KEY_ASSIGNMENT_SEPARATOR}${layerOption.name}${MACRO_KEY_ASSIGNMENT_SEPARATOR}${keyLabel}`,
-            };
-        });
+                defaultUserConfiguration: options.defaultUserConfiguration,
+                mapper: options.mapper,
+            }),
+        }));
 }
 
 function compareAssignments(first: MacroKeyAssignment, second: MacroKeyAssignment): number {

packages/uhk-web/src/app/util/format-macro-key-assignment-label.ts

@@ -0,0 +1,28 @@
+import { UserConfiguration } from 'uhk-common';
+
+import { MapperService } from '../services/mapper.service';
+import { LAYER_OPTIONS } from '../store/reducers/layer-options';
+import { getDefaultQwertyKeyLabel } from './get-default-key-label';
+
+export const MACRO_KEY_ASSIGNMENT_SEPARATOR = ' ⭢ ';
+
+export interface FormatMacroKeyAssignmentLabelOptions {
+    keymapName: string;
+    layerId: number;
+    moduleId: number;
+    keyId: number;
+    defaultUserConfiguration: UserConfiguration;
+    mapper: MapperService;
+}
+
+export function formatMacroKeyAssignmentLabel(options: FormatMacroKeyAssignmentLabelOptions): string {
+    const layerOption = LAYER_OPTIONS.get(options.layerId);
+    const keyLabel = getDefaultQwertyKeyLabel({
+        defaultUserConfiguration: options.defaultUserConfiguration,
+        moduleId: options.moduleId,
+        keyId: options.keyId,
+        mapper: options.mapper,
+    });
+
+    return `${options.keymapName}${MACRO_KEY_ASSIGNMENT_SEPARATOR}${layerOption.name}${MACRO_KEY_ASSIGNMENT_SEPARATOR}${keyLabel}`;
+}