15712: Add asset highlight using arrow keys.

Author: knechtandreas

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -40,6 +40,7 @@
     thumbnailWidth?: number | undefined;
     thumbnailHeight?: number | undefined;
     selected?: boolean;
+    highlight?: boolean;
     selectionCandidate?: boolean;
     disabled?: boolean;
     readonly?: boolean;
@@ -72,6 +73,7 @@
     thumbnailWidth = undefined,
     thumbnailHeight = undefined,
     selected = false,
+    highlight = false,
     selectionCandidate = false,
     disabled = false,
     readonly = false,
@@ -251,7 +253,7 @@
       {/if}
       <div class="absolute z-20 {className}" style:width="{width}px" style:height="{height}px">
         <!-- Select asset button  -->
-        {#if !readonly && (mouseOver || selected || selectionCandidate)}
+        {#if !readonly && (mouseOver || selected || selectionCandidate || highlight)}
           <button
             type="button"
             onclick={onIconClickedHandler}

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -213,6 +213,7 @@
                   onSelect={(asset) => assetSelectHandler(asset, dateGroup.assets, dateGroup.groupTitle)}
                   onMouseEvent={() => assetMouseEventHandler(dateGroup.groupTitle, asset)}
                   selected={assetInteraction.selectedAssets.has(asset) || $assetStore.albumAssets.has(asset.id)}
+                  highlight={assetInteraction.isHighlightAsset(asset)}
                   selectionCandidate={assetInteraction.assetSelectionCandidates.has(asset)}
                   disabled={$assetStore.albumAssets.has(asset.id)}
                   thumbnailWidth={box.width}

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

@@ -774,6 +774,29 @@
         { 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: async () => {
+            const currentHighlightAsset = assetInteraction.getHighlightAsset();
+            const nextHighlightAsset =
+              currentHighlightAsset === null
+                ? $assetStore.getFirstAsset()
+                : await $assetStore.getNextAsset(currentHighlightAsset);
+            assetInteraction.setHighlightAsset(nextHighlightAsset);
+          },
+        },
+        {
+          shortcut: { key: 'ArrowLeft' },
+          preventDefault: false,
+          onShortcut: async () => {
+            const currentHighlightAsset = assetInteraction.getHighlightAsset();
+            if (currentHighlightAsset !== null) {
+              const previousHighlightAsset = await $assetStore.getPreviousAsset(currentHighlightAsset);
+              assetInteraction.setHighlightAsset(previousHighlightAsset);
+            }
+          },
+        },
       ];
 
       if (assetInteraction.selectionActive) {

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

@@ -14,6 +14,7 @@ export class AssetInteraction {
 
   private user = fromStore<UserAdminResponseDto | undefined>(user);
   private userId = $derived(this.user.current?.id);
+  private highlightAsset = $state<AssetResponseDto | null>(null);
 
   isAllTrashed = $derived(this.selectedAssetsArray.every((asset) => asset.isTrashed));
   isAllArchived = $derived(this.selectedAssetsArray.every((asset) => asset.isArchived));
@@ -63,4 +64,16 @@ export class AssetInteraction {
     this.assetSelectionCandidates.clear();
     this.assetSelectionStart = null;
   }
+
+  isHighlightAsset(asset: AssetResponseDto) {
+    return this.highlightAsset?.id === asset.id;
+  }
+
+  setHighlightAsset(asset: AssetResponseDto | null) {
+    this.highlightAsset = asset;
+  }
+
+  getHighlightAsset() {
+    return this.highlightAsset;
+  }
 }

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

@@ -836,6 +836,13 @@ export class AssetStore {
     this.emit(true);
   }
 
+  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) {