feat: show copied layer origin in paste tooltip

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

@@ -10,6 +10,7 @@
                        [allowLayerDoubleTap]="allowLayerDoubleTap$ | async"
                        [backlightingMode]="backlightingMode$ | async"
                        [canPasteLayer]="hasCopiedLayer$ | async"
+                       [copiedLayerOrigin]="copiedLayerOrigin$ | async"
                        [currentLayer]="currentLayer$ | async"
                        [isBacklightingColoring]="isBacklightingColoring$ | async"
                        [lastEditedKey]="lastEditedKey$ | async"

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

@@ -7,7 +7,7 @@ import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { BacklightingMode, HalvesInfo, KeyboardLayout, Keymap, LayerName } from 'uhk-common';
 
-import { LastEditedKey, LayerOption, ModifyColorOfBacklightingColorPalettePayload } from '../../../models';
+import { CopiedLayerOrigin, LastEditedKey, LayerOption, ModifyColorOfBacklightingColorPalettePayload } from '../../../models';
 import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';
 import { SelectOptionData } from '../../../models/select-option-data';
 
@@ -16,6 +16,7 @@ import {
     backlightingColorPalette,
     backlightingMode,
     getHalvesInfo,
+    getCopiedLayerOrigin,
     getHasCopiedLayer,
     getKeyboardLayout,
     getLayerOptions,
@@ -56,6 +57,7 @@ import {
 export class KeymapEditComponent implements OnDestroy {
 
     backlightingMode$: Observable<BacklightingMode>;
+    copiedLayerOrigin$: Observable<CopiedLayerOrigin>;
     currentLayer$: Observable<LayerOption>;
     deletable$: Observable<boolean>;
     hasCopiedLayer$: Observable<boolean>;
@@ -111,6 +113,7 @@ export class KeymapEditComponent implements OnDestroy {
 
         this.backlightingMode$ = store.select(backlightingMode);
         this.currentLayer$ = store.select(getSelectedLayerOption);
+        this.copiedLayerOrigin$ = store.select(getCopiedLayerOrigin);
         this.keymap$ = store.select(getSelectedKeymap);
         this.keymapSubscription = this.keymap$
             .subscribe(keymap => {

packages/uhk-web/src/app/components/layers/layers.component.html

@@ -47,7 +47,7 @@
                 #pasteTooltip="ngbTooltip"
                 type="button"
                 class="btn btn-default"
-                ngbTooltip="Overwrite the current layer with the layer stored in Agent's virtual clipboard."
+                [ngbTooltip]="pasteLayerTooltip"
                 tooltipClass="tooltip-layer-action"
                 triggers="hover"
                 container="body"

packages/uhk-web/src/app/components/layers/layers.component.ts

@@ -4,7 +4,7 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { colord, RgbColor } from 'colord';
 import { LayerName, RgbColorInterface } from 'uhk-common';
 
-import { LayerOption, ModifyColorOfBacklightingColorPalettePayload } from '../../models';
+import { LayerOption, CopiedLayerOrigin, ModifyColorOfBacklightingColorPalettePayload } from '../../models';
 
 @Component({
     selector: 'layers',
@@ -17,6 +17,7 @@ export class LayersComponent {
     @Input() allowLayerCopy = false;
     @Input() allowNewLayers: boolean;
     @Input() canPasteLayer = false;
+    @Input() copiedLayerOrigin: CopiedLayerOrigin;
     @Input() current: LayerOption;
     @Input() layerOptions: LayerOption[];
     @Input() paletteColors: Array<RgbColor> = [];
@@ -42,6 +43,15 @@ export class LayersComponent {
     LayerName = LayerName;
     newColorPaletteColor = '#000000';
 
+    get pasteLayerTooltip(): string {
+        const origin = this.copiedLayerOrigin;
+        if (!origin) {
+            return `Overwrite the current layer with the layer stored in Agent's virtual clipboard.`;
+        }
+
+        return `Overwrite the current layer with the ${origin.deviceName}: ${origin.keymapName}: ${origin.layerName} layer stored in Agent's virtual clipboard.`;
+    }
+
     onSelectLayer(option: LayerOption) {
         if (this.current?.id === option.id) {
             return;

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -3,6 +3,7 @@
             [allowLayerCopy]="allowLayerCopy"
             [allowNewLayers]="allowNewLayers"
             [canPasteLayer]="canPasteLayer"
+            [copiedLayerOrigin]="copiedLayerOrigin"
             [paletteColors]="paletteColors"
             [current]="currentLayer"
             [layerOptions]="layerOptions"

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -58,7 +58,7 @@ import {
 } from '../../../models/svg-key-events';
 import { SelectOptionData } from '../../../models/select-option-data';
 import { findModuleById, mapLeftRightModifierToKeyActionModifier } from '../../../util';
-import { LastEditedKey, LayerOption, ModifyColorOfBacklightingColorPalettePayload, OpenPopoverModel, SelectedKeyModel } from '../../../models';
+import { CopiedLayerOrigin, LastEditedKey, LayerOption, ModifyColorOfBacklightingColorPalettePayload, OpenPopoverModel, SelectedKeyModel } from '../../../models';
 
 interface NameValuePair {
     name: string;
@@ -105,6 +105,7 @@ export class SvgKeyboardWrapComponent implements AfterViewInit, OnInit, OnChange
     @Input() allowNewLayers: boolean;
     @Input() backlightingMode: BacklightingMode;
     @Input() canPasteLayer = false;
+    @Input() copiedLayerOrigin: CopiedLayerOrigin;
     @Input() currentLayer: LayerOption;
     @Input() isBacklightingColoring = false;
     @Input() keymap: Keymap;

packages/uhk-web/src/app/models/copied-layer-origin.ts

@@ -0,0 +1,5 @@
+export interface CopiedLayerOrigin {
+    deviceName: string;
+    keymapName: string;
+    layerName: string;
+}

packages/uhk-web/src/app/models/index.ts

@@ -2,6 +2,7 @@ export * from './apply-user-configuration-from-file-payload';
 export * from './backlighting-option';
 export * from './ble-adding-state';
 export * from './config-size-state';
+export * from './copied-layer-origin';
 export * from './delete-host-connection-payload';
 export * from './device-ui-states';
 export * from './dongle-pairing-state';

packages/uhk-web/src/app/store/index.ts

@@ -140,6 +140,7 @@ export const lastEditedKey = createSelector(userConfigState, fromUserConfig.last
 export const getOpenPopover = createSelector(userConfigState, fromUserConfig.getOpenPopover);
 export const getSelectedLayerOption = createSelector(userConfigState, fromUserConfig.getSelectedLayerOption);
 export const getHasCopiedLayer = createSelector(userConfigState, fromUserConfig.getHasCopiedLayer);
+export const getCopiedLayerOrigin = createSelector(userConfigState, fromUserConfig.getCopiedLayerOrigin);
 export const getLayerOptions = createSelector(userConfigState, fromUserConfig.getLayerOptions);
 export const getSecondaryRoleOptions = createSelector(getSelectedLayerOption, getLayerOptions,
     (selectedLayer, layerOptions): SelectOptionData[] => {

packages/uhk-web/src/app/store/reducers/user-configuration.ts

@@ -47,6 +47,7 @@ import {
     BleAddingStates,
     BleAddingState,
     BacklightingOption,
+    CopiedLayerOrigin,
     defaultLastEditKey,
     ExchangeKey,
     LastEditedKey,
@@ -97,6 +98,7 @@ export interface State {
     isCustomPresetTheLastLoadedPreset: boolean;
     copiedLayer?: Layer;
     copiedLayerMacroNames?: Map<number, string>;
+    copiedLayerOrigin?: CopiedLayerOrigin;
 }
 
 export const initialState: State = {
@@ -413,6 +415,11 @@ export function reducer(
                 ...state,
                 copiedLayer: new Layer(layerToCopy),
                 copiedLayerMacroNames,
+                copiedLayerOrigin: {
+                    deviceName: state.userConfiguration.deviceName,
+                    keymapName: currentKeymap.name,
+                    layerName: state.layerOptions.get(layerId).name,
+                },
             };
         }
 
@@ -1474,6 +1481,7 @@ export const getLayerOptions = (state: State): LayerOption[] => Array
     .sort((a, b) => a.order - b.order);
 export const getSelectedLayerOption = (state: State): LayerOption => state.selectedLayerOption;
 export const getHasCopiedLayer = (state: State): boolean => !!state.copiedLayer;
+export const getCopiedLayerOrigin = (state: State): CopiedLayerOrigin | undefined => state.copiedLayerOrigin;
 export const getSelectedMacroAction = (state: State): SelectedMacroAction => state.selectedMacroAction;
 export const getSelectedModuleConfiguration = (state: State): ModuleConfiguration => {
     if(!state.selectedModuleConfigurationId) {