feat(web): Add keyboard shortcut selection on grid (#16713)

* 15712: Added keyboard shortcuts for opening add to album modal and highlighting/selecting an album to add to.

* 15712: Re-factored logic from template code into script. Extracted new album button into separate cmponent.

* 15712: Document new keyboard shortucts now that they work everywhere.

* 15712: Extract some constants/helper functions.

* 15712: Missing comma.

* 15712: Pulled logic out into separate unit testable class.

* 15712: Added a unit test.

* 15712: Move the modal back up to keep the github PR happy.

* 15712: PR feedback - renamed typescript files and switch to class bind directive.

* 15712:Move selection modal into correct package.

* 15712: Better naming of module and files.

* 15712: Add asset highlight using arrow keys.

* 15172: Add escape behaviour everywhere.

* 15712: Don't allow highlighting past start or end.

* 15712: Clear the highlight on changes to the component state.

* 15712: Use focus to track highlighted element.

* 15712: Rename highlight -> focussed.

* 15712: Better naming.

* 15712: Cleanup.

* 15712: Cleanup & simplify.

* 15712: bugfix for clicking on button.

* 15712: Cleanup.

* 15712: Rollback unnecessary changes.

* 15712: Add unit test.

* 15712: Add thumbnail unit test.

* 15712: Prettier.

* 15712: Fix merge issue.

* 15712: Add shortcut info.

* 15712: Fix linter.
This commit is contained in:
Andreas 2025-03-12 02:18:14 +11:00 committed by GitHub
parent c80afea468
commit b8acae2f21
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 198 additions and 6 deletions

View file

@ -8,6 +8,7 @@ export class AssetInteraction {
readonly selectedGroup = new SvelteSet<string>();
assetSelectionCandidates = $state(new SvelteSet<AssetResponseDto>());
assetSelectionStart = $state<AssetResponseDto | null>(null);
focussedAssetId = $state<string | null>(null);
selectionActive = $derived(this.selectedAssets.size > 0);
selectedAssetsArray = $derived([...this.selectedAssets]);
@ -63,4 +64,8 @@ export class AssetInteraction {
this.assetSelectionCandidates.clear();
this.assetSelectionStart = null;
}
isFocussedAsset(asset: AssetResponseDto) {
return this.focussedAssetId === asset.id;
}
}