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.

web/src/lib/stores/asset-interaction.svelte.ts

@@ -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;
+  }
 }

web/src/lib/stores/assets-store.spec.ts

@@ -308,6 +308,34 @@ describe('AssetStore', () => {
     });
   });
 
+  describe('firstAsset', () => {
+    let assetStore: AssetStore;
+
+    beforeEach(async () => {
+      assetStore = new AssetStore({});
+      sdkMock.getTimeBuckets.mockResolvedValue([]);
+      await assetStore.init();
+      await assetStore.updateViewport({ width: 0, height: 0 });
+    });
+
+    it('empty store returns null', () => {
+      expect(assetStore.getFirstAsset()).toBeNull();
+    });
+
+    it('populated store returns first asset', () => {
+      const assetOne = assetFactory.build({
+        fileCreatedAt: '2024-01-20T12:00:00.000Z',
+        localDateTime: '2024-01-20T12:00:00.000Z',
+      });
+      const assetTwo = assetFactory.build({
+        fileCreatedAt: '2024-01-15T12:00:00.000Z',
+        localDateTime: '2024-01-15T12:00:00.000Z',
+      });
+      assetStore.addAssets([assetOne, assetTwo]);
+      expect(assetStore.getFirstAsset()).toEqual(assetOne);
+    });
+  });
+
   describe('getPreviousAsset', () => {
     let assetStore: AssetStore;
     const bucketAssets: Record<string, AssetResponseDto[]> = {

web/src/lib/stores/assets-store.svelte.ts

@@ -848,6 +848,13 @@ export class AssetStore {
     }
   }
 
+  getFirstAsset(): AssetResponseDto | null {
+    if (this.buckets.length > 0 && this.buckets[0].assets.length > 0) {
+      return this.buckets[0].assets[0];
+    }
+    return null;
+  }
+
   async getPreviousAsset(asset: AssetResponseDto): Promise<AssetResponseDto | null> {
     const info = await this.getBucketInfoForAsset(asset);
     if (!info) {