Improve scancode selector with tiled category layout

CHANGELOG.md

@@ -26,6 +26,7 @@ Firmware: 18.0.0 [[release](https://github.com/UltimateHackingKeyboard/firmware/
 - Make host connection management slot-focused instead of host-focused.
 - Group macros in the sidebar
 - Fix: refuse importing a user configuration newer than Agent supports, and refuse saving one newer than the firmware supports.
+- Improve the scancode selector with a tiled category layout.
 
 ## [10.1.0] - 2026-06-23
 

packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html

@@ -1,32 +1,14 @@
 <div class="scancode-options">
     <b class="setting-label mb-2">Scancode:</b>
     <div class="scancode-container">
-        <ng-select #scancodeSelect
-                   [addTag]="addTagFn.bind(this)"
-                   [clearable]="false"
-                   [editableSearchTerm]="true"
-                   [items]="scanCodeGroups"
-                   [ngModel]="selectedScancodeOption?.id"
-                   [searchFn]="searchFn"
-                   bindLabel="text"
-                   bindValue="id"
-                   groupBy="group"
-                   (ngModelChange)="onScancodeChange($event)"
-                   select-max-height
-        >
-            <ng-template ng-option-tmp let-item="item">
-                <span>
-                  <span>{{ item.text }}</span>
-                <span class="float-end">
-                      {{ item.additional?.explanation}}
-                  </span>
-                </span>
-            </ng-template>
-
-            <ng-template ng-tag-tmp let-search="searchTerm">
-                {{ addTagText(search) }}
-            </ng-template>
-        </ng-select>
+        <scancode-select
+            [addTag]="addTag"
+            [addTagText]="getAddTagText"
+            [items]="scanCodeGroups"
+            [searchFn]="searchFn"
+            [selectedId]="selectedScancodeOption?.id || ''"
+            (selectedIdChange)="onScancodeChange($event)"
+        ></scancode-select>
     </div>
     <ng-template #scanCodeTooltip>
         <p>Labels are shown according to en-US character-to-scancode mapping. This means that output may differ from the label if your computer uses layout different from en-US. In such case, you need to pick the character of the desired key according to the en-US layout.</p>

packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts

@@ -7,11 +7,9 @@ import {
     OnChanges,
     Output,
     SimpleChanges,
-    ViewChild,
     inject,
 } from '@angular/core';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import { NgSelectComponent } from '@ng-select/ng-select';
 import { copyRgbColor, KeyAction, KeystrokeAction, KeystrokeType, SCANCODES, SecondaryRoleAction } from 'uhk-common';
 
 import { Tab } from '../tab';
@@ -20,14 +18,7 @@ import { SelectOptionData } from '../../../../models/select-option-data';
 import { KeyModifierModel } from '../../../../models/key-modifier-model';
 import { mapLeftRightModifierToKeyActionModifier } from '../../../../util';
 import { RemapInfo } from '../../../../models/remap-info';
-
-interface FlatOptions {
-    id: string;
-    text: string;
-    group?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    additional?: any;
-}
+import { ScancodeSelectOption } from './scancode-select';
 
 interface SearchResult {
     isMatch: boolean;
@@ -49,15 +40,14 @@ export class KeypressTabComponent extends Tab implements OnChanges {
     @Input() secondaryRoleOptions: SelectOptionData[];
 
     @Output() keyActionChange = new EventEmitter<KeystrokeAction>();
-    @ViewChild('scancodeSelect',  { static: true }) scancodeSelect: NgSelectComponent;
 
     leftModifiers: KeyModifierModel[];
     rightModifiers: KeyModifierModel[];
 
-    scanCodeGroups: Array<FlatOptions>;
-    secondaryRoleGroups: Array<FlatOptions> = [];
+    scanCodeGroups: Array<ScancodeSelectOption>;
+    secondaryRoleGroups: Array<ScancodeSelectOption> = [];
 
-    selectedScancodeOption: FlatOptions;
+    selectedScancodeOption: ScancodeSelectOption;
     selectedSecondaryRoleIndex: number;
     warningVisible: boolean;
     faInfoCircle = faInfoCircle;
@@ -123,7 +113,6 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         this.leftModifiers = event.left;
         this.rightModifiers = event.right;
         this.keyActionChanged();
-        this.scancodeSelect.writeValue(this.selectedScancodeOption.text || '');
     }
 
     fromKeyAction(keyAction: KeyAction): boolean {
@@ -189,7 +178,11 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         this.keyActionChanged();
     }
 
-    addTagFn (name: string): FlatOptions | boolean {
+    addTag = (name: string): ScancodeSelectOption | boolean => this.addTagFn(name);
+
+    getAddTagText = (term: string): string => this.addTagText(term);
+
+    addTagFn (name: string): ScancodeSelectOption | boolean {
         const mediaSearchResult = isMediaSearch(name);
         if (mediaSearchResult.isMatch) {
             const option = {
@@ -242,33 +235,39 @@ export class KeypressTabComponent extends Tab implements OnChanges {
     }
 
     addTagText(term: string): string {
-        const mediaSearchResult = isMediaSearch(term);
+        const normalizedTerm = term.trim();
+        if (!normalizedTerm) {
+            return '';
+        }
 
-        if (mediaSearchResult.isMatch &&
-            !this.scanCodeGroups
-                .some(x => x.additional?.type === 'media' && x.additional?.scancode === mediaSearchResult.scancode)) {
-            return `Media scancode: ${mediaSearchResult.scancode}`;
+        // Allow M/B/S tags whenever that exact id is new. A named key may already
+        // use the same scancode (e.g. letter "B" is basic scancode 5), but users
+        // still need to be able to add "B5" as an explicit custom entry.
+        const idExists = this.scanCodeGroups
+            .some(option => option.id.toLowerCase() === normalizedTerm.toLowerCase());
+        if (idExists) {
+            return '';
         }
 
-        const basicSearchResult = isBasicSearch(term);
+        const mediaSearchResult = isMediaSearch(normalizedTerm);
+        if (mediaSearchResult.isMatch) {
+            return `Media scancode: ${mediaSearchResult.scancode}`;
+        }
 
-        if (basicSearchResult.isMatch &&
-            !this.scanCodeGroups
-                .some(x => x.additional?.type === 'basic' && x.additional?.scancode === basicSearchResult.scancode)) {
+        const basicSearchResult = isBasicSearch(normalizedTerm);
+        if (basicSearchResult.isMatch) {
             return `Basic scancode: ${basicSearchResult.scancode}`;
         }
 
-        const systemSearchResult = isSystemSearch(term);
-        if (systemSearchResult.isMatch &&
-            !this.scanCodeGroups
-                .some(x => x.additional?.type === 'system' && x.additional?.scancode === systemSearchResult.scancode)) {
+        const systemSearchResult = isSystemSearch(normalizedTerm);
+        if (systemSearchResult.isMatch) {
             return `System scancode: ${systemSearchResult.scancode}`;
         }
 
         return '';
     }
 
-    searchFn(term: string, item: FlatOptions) {
+    searchFn = (term: string, item: ScancodeSelectOption): boolean => {
         term = term.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
         if (new RegExp(term, 'i').test(item.text)) {
             return true;
@@ -293,7 +292,7 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         }
 
         return false;
-    }
+    };
 
     modifiersTrackBy(index: number, modifier: KeyModifierModel): string {
         return `${modifier.value}${modifier.checked}`;
@@ -306,12 +305,12 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         this.cdRef.markForCheck();
     }
 
-    private findScancodeOptionById(id: string): FlatOptions {
+    private findScancodeOptionById(id: string): ScancodeSelectOption {
         return this.scanCodeGroups.find(scancode => scancode.id === id) ||
-            this.addTagFn(id) as FlatOptions;
+            this.addTagFn(id) as ScancodeSelectOption;
     }
 
-    private findScancodeOptionByScancode(scancode: number, type: KeystrokeType): FlatOptions {
+    private findScancodeOptionByScancode(scancode: number, type: KeystrokeType): ScancodeSelectOption {
         const typeToFind: string =
             (type === KeystrokeType.shortMedia || type === KeystrokeType.longMedia) ? 'media' : KeystrokeType[type];
         const option = this.scanCodeGroups.find(x => x.additional.scancode === scancode && x.additional.type === typeToFind);
@@ -322,20 +321,20 @@ export class KeypressTabComponent extends Tab implements OnChanges {
 
         switch (typeToFind) {
             case 'media':
-                return this.addTagFn(`M${scancode}`) as FlatOptions;
+                return this.addTagFn(`M${scancode}`) as ScancodeSelectOption;
 
             case 'basic':
-                return this.addTagFn(`B${scancode}`) as FlatOptions;
+                return this.addTagFn(`B${scancode}`) as ScancodeSelectOption;
 
             case 'system':
-                return this.addTagFn(`S${scancode}`) as FlatOptions;
+                return this.addTagFn(`S${scancode}`) as ScancodeSelectOption;
 
             default:
                 break;
         }
     }
 
-    private toScancodeTypePair(option: FlatOptions): [number, string] {
+    private toScancodeTypePair(option: ScancodeSelectOption): [number, string] {
         if (!option) {
             return [0, 'basic'];
         }

packages/uhk-web/src/app/components/popover/tab/keypress/scancode-select/index.ts

@@ -0,0 +1 @@
+export * from './scancode-select.component';

packages/uhk-web/src/app/components/popover/tab/keypress/scancode-select/scancode-select.component.html

@@ -0,0 +1,130 @@
+<div class="scancode-select"
+     [class.scancode-select--open]="isOpen"
+     cdkOverlayOrigin
+     #origin="cdkOverlayOrigin"
+>
+    <div class="scancode-select__control"
+         tabindex="0"
+         (mousedown)="onControlMouseDown($event)"
+         (keydown)="onKeyDown($event)"
+    >
+        <div class="scancode-select__value-container">
+            <div class="scancode-select__value"
+                 *ngIf="displayText"
+            >
+                {{ displayText }}
+            </div>
+        </div>
+        <span class="scancode-select__arrow-wrapper" aria-hidden="true">
+            <span class="scancode-select__arrow"></span>
+        </span>
+    </div>
+</div>
+
+<ng-template
+    cdkConnectedOverlay
+    [cdkConnectedOverlayOrigin]="origin"
+    [cdkConnectedOverlayOpen]="isOpen"
+    [cdkConnectedOverlayPositions]="overlayPositions"
+    [cdkConnectedOverlayPush]="false"
+    [cdkConnectedOverlayViewportMargin]="20"
+    [cdkConnectedOverlayPanelClass]="'scancode-select-overlay-pane'"
+    (overlayOutsideClick)="close()"
+    (detach)="close()"
+>
+    <div class="scancode-select__panel"
+         (mousedown)="$event.preventDefault()"
+         (keydown)="onKeyDown($event)"
+    >
+        <div class="scancode-select__search">
+            <input #searchInput
+                   class="scancode-select__input"
+                   type="text"
+                   autocomplete="off"
+                   [ngModel]="inputValue"
+                   (ngModelChange)="onSearchInput($event)"
+            />
+        </div>
+
+        <div class="scancode-select__panel-scroll"
+             [style.max-height.px]="panelMaxHeight"
+        >
+            <div class="scancode-select__ungrouped"
+                 *ngIf="ungroupedOptions.length"
+            >
+                <button type="button"
+                        class="scancode-select__option"
+                        *ngFor="let option of ungroupedOptions"
+                        [class.scancode-select__option--selected]="option.id === selectedId"
+                        [class.scancode-select__option--marked]="isMarked(option)"
+                        (mouseenter)="onOptionMouseEnter(option)"
+                        (click)="selectOption(option)"
+                >
+                    <span>{{ option.text }}</span>
+                </button>
+            </div>
+
+            <div class="scancode-select__group"
+                 *ngFor="let group of groups"
+                 [class.scancode-select__group--tiled]="group.tiled"
+            >
+                <div class="scancode-select__group-header">{{ group.name }}</div>
+                <div class="scancode-select__tile-rows"
+                     *ngIf="group.tileRows.length"
+                >
+                    <div class="scancode-select__tile-row"
+                         *ngFor="let row of group.tileRows"
+                         [style.grid-template-columns]="'repeat(' + row.length + ', 1fr)'"
+                    >
+                        <button type="button"
+                                class="scancode-select__option"
+                                *ngFor="let option of row"
+                                [class.scancode-select__option--selected]="option.id === selectedId"
+                                [class.scancode-select__option--marked]="isMarked(option)"
+                                (mouseenter)="onOptionMouseEnter(option)"
+                                (click)="selectOption(option)"
+                        >
+                            <span>{{ option.text }}</span>
+                        </button>
+                    </div>
+                </div>
+                <div class="scancode-select__group-items"
+                     *ngIf="!group.tileRows.length"
+                     [class.scancode-select__tiles]="group.tiled"
+                >
+                    <button type="button"
+                            class="scancode-select__option"
+                            *ngFor="let option of group.options"
+                            [class.scancode-select__option--selected]="option.id === selectedId"
+                            [class.scancode-select__option--marked]="isMarked(option)"
+                            (mouseenter)="onOptionMouseEnter(option)"
+                            (click)="selectOption(option)"
+                    >
+                        <span>{{ option.text }}</span>
+                        <span class="float-end"
+                              *ngIf="!group.tiled && option.additional?.explanation"
+                        >
+                            {{ option.additional.explanation }}
+                        </span>
+                    </button>
+                </div>
+            </div>
+
+            <button type="button"
+                    class="scancode-select__option scancode-select__tag"
+                    *ngIf="showTag"
+                    [class.scancode-select__option--marked]="isTagMarked()"
+                    (mouseenter)="onTagMouseEnter()"
+                    (click)="selectTag()"
+            >
+                {{ tagLabel }}
+            </button>
+
+            <div class="scancode-select__empty"
+                 *ngIf="!ungroupedOptions.length && !groups.length && !showTag"
+            >
+                No items found
+            </div>
+        </div>
+    </div>
+</ng-template>