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/components/photos-page/asset-date-group.svelte

@@ -93,6 +93,10 @@
     }
   };
 
+  const assetOnFocusHandler = (asset: AssetResponseDto) => {
+    assetInteraction.focussedAssetId = asset.id;
+  };
+
   onDestroy(() => {
     assetStore.taskManager.removeAllTasksForComponent(componentId);
   });
@@ -223,6 +227,8 @@
                   onSelect={(asset) => assetSelectHandler(asset, dateGroup.assets, dateGroup.groupTitle)}
                   onMouseEvent={() => assetMouseEventHandler(dateGroup.groupTitle, asset)}
                   selected={assetInteraction.selectedAssets.has(asset) || assetStore.albumAssets.has(asset.id)}
+                  handleFocus={() => assetOnFocusHandler(asset)}
+                  focussed={assetInteraction.isFocussedAsset(asset)}
                   selectionCandidate={assetInteraction.assetSelectionCandidates.has(asset)}
                   disabled={assetStore.albumAssets.has(asset.id)}
                   thumbnailWidth={width}

web/src/lib/components/photos-page/asset-grid.svelte

@@ -42,8 +42,8 @@
     isSelectionMode?: boolean;
     singleSelect?: boolean;
     /** `true` if this asset grid is responds to navigation events; if `true`, then look at the
-   `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
-   additionally, update the page location/url with the asset as the asset-grid is scrolled */
+     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
+     additionally, update the page location/url with the asset as the asset-grid is scrolled */
     enableRouting: boolean;
     assetStore: AssetStore;
     assetInteraction: AssetInteraction;
@@ -706,6 +706,36 @@
       e.preventDefault();
     }
   };
+
+  const focusNextAsset = async () => {
+    if (assetInteraction.focussedAssetId === null) {
+      const firstAsset = assetStore.getFirstAsset();
+      if (firstAsset !== null) {
+        assetInteraction.focussedAssetId = firstAsset.id;
+      }
+    } else {
+      const focussedAsset = assetStore.assets.find((asset) => asset.id === assetInteraction.focussedAssetId);
+      if (focussedAsset) {
+        const nextAsset = await assetStore.getNextAsset(focussedAsset);
+        if (nextAsset !== null) {
+          assetInteraction.focussedAssetId = nextAsset.id;
+        }
+      }
+    }
+  };
+
+  const focusPreviousAsset = async () => {
+    if (assetInteraction.focussedAssetId !== null) {
+      const focussedAsset = assetStore.assets.find((asset) => asset.id === assetInteraction.focussedAssetId);
+      if (focussedAsset) {
+        const previousAsset = await assetStore.getPreviousAsset(focussedAsset);
+        if (previousAsset) {
+          assetInteraction.focussedAssetId = previousAsset.id;
+        }
+      }
+    }
+  };
+
   onDestroy(() => {
     assetStore.taskManager.removeAllTasksForComponent(componentId);
   });
@@ -749,6 +779,8 @@
         { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(assetStore, assetInteraction) },
         { shortcut: { key: 'PageDown' }, preventDefault: false, onShortcut: focusElement },
         { shortcut: { key: 'PageUp' }, preventDefault: false, onShortcut: focusElement },
+        { shortcut: { key: 'ArrowRight' }, preventDefault: false, onShortcut: focusNextAsset },
+        { shortcut: { key: 'ArrowLeft' }, preventDefault: false, onShortcut: focusPreviousAsset },
       ];
 
       if (assetInteraction.selectionActive) {