feat(web): star rating keyboard shortcut (#24620)

Co-authored-by: idubnori <i.dub.nori@gmail.com>
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>

web/src/lib/components/asset-viewer/actions/action.ts

@@ -20,6 +20,7 @@ type ActionMap = {
   [AssetAction.SET_VISIBILITY_LOCKED]: { asset: TimelineAsset };
   [AssetAction.SET_VISIBILITY_TIMELINE]: { asset: TimelineAsset };
   [AssetAction.SET_PERSON_FEATURED_PHOTO]: { asset: AssetResponseDto; person: PersonResponseDto };
+  [AssetAction.RATING]: { asset: TimelineAsset; rating: number | null };
 };
 
 export type Action = {

web/src/lib/components/asset-viewer/actions/rating-action.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { shortcuts } from '$lib/actions/shortcut';
+  import type { OnAction } from '$lib/components/asset-viewer/actions/action';
+  import { AssetAction } from '$lib/constants';
+  import { preferences } from '$lib/stores/user.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { updateAsset, type AssetResponseDto } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    asset: AssetResponseDto;
+    onAction: OnAction;
+  };
+
+  let { asset, onAction }: Props = $props();
+
+  const rateAsset = async (rating: number | null) => {
+    try {
+      const updateAssetDto = rating === null ? {} : { rating };
+      await updateAsset({
+        id: asset.id,
+        updateAssetDto,
+      });
+
+      asset = {
+        ...asset,
+        exifInfo: {
+          ...asset.exifInfo,
+          rating,
+        },
+      };
+
+      onAction({
+        type: AssetAction.RATING,
+        asset: toTimelineAsset(asset),
+        rating,
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_set_rating'));
+    }
+  };
+</script>
+
+<svelte:document
+  use:shortcuts={$preferences?.ratings.enabled
+    ? [
+        { shortcut: { key: '0' }, onShortcut: () => rateAsset(null) },
+        ...[1, 2, 3, 4, 5].map((rating) => ({
+          shortcut: { key: String(rating) },
+          onShortcut: () => rateAsset(rating),
+        })),
+      ]
+    : []}
+/>

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -12,6 +12,7 @@
   import DownloadAction from '$lib/components/asset-viewer/actions/download-action.svelte';
   import FavoriteAction from '$lib/components/asset-viewer/actions/favorite-action.svelte';
   import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
+  import RatingAction from '$lib/components/asset-viewer/actions/rating-action.svelte';
   import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte';
   import RestoreAction from '$lib/components/asset-viewer/actions/restore-action.svelte';
   import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/set-album-cover-action.svelte';
@@ -179,6 +180,7 @@
 
     {#if isOwner}
       <FavoriteAction {asset} {onAction} />
+      <RatingAction {asset} {onAction} />
     {/if}
 
     {#if isOwner}

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -331,6 +331,16 @@
         asset = { ...asset, people: assetInfo.people };
         break;
       }
+      case AssetAction.RATING: {
+        asset = {
+          ...asset,
+          exifInfo: {
+            ...asset.exifInfo,
+            rating: action.rating,
+          },
+        };
+        break;
+      }
       case AssetAction.KEEP_THIS_DELETE_OTHERS:
       case AssetAction.UNSTACK: {
         closeViewer();

web/src/lib/constants.ts

@@ -18,6 +18,7 @@ export enum AssetAction {
   SET_VISIBILITY_LOCKED = 'set-visibility-locked',
   SET_VISIBILITY_TIMELINE = 'set-visibility-timeline',
   SET_PERSON_FEATURED_PHOTO = 'set-person-featured-photo',
+  RATING = 'rating',
 }
 
 export enum AppRoute {

web/src/lib/modals/ShortcutsModal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { preferences } from '$lib/stores/user.store';
   import { Icon, Modal, ModalBody } from '@immich/ui';
   import { mdiInformationOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -44,6 +45,9 @@
         { key: ['⇧', 'd'], action: $t('download') },
         { key: ['Space'], action: $t('play_or_pause_video') },
         { key: ['Del'], action: $t('trash_delete_asset'), info: $t('shift_to_permanent_delete') },
+        ...($preferences?.ratings.enabled
+          ? [{ key: ['1-5'], action: $t('rate_asset'), info: $t('zero_to_clear_rating') }]
+          : []),
       ],
     },
   }: Props = $props();