refactor(web): clean up (#32627)

(cherry picked from commit 5ff8436781681755042fe6416024d0c4885b851d)

i18n/en.json

@@ -2338,7 +2338,7 @@
   "user": "User",
   "user_has_been_deleted": "This user has been deleted.",
   "user_id": "User ID",
-  "user_liked": "{user} liked {type, select, photo {this photo} video {this video} asset {this asset} other {it}}",
+  "user_liked": "{user} liked {type, select, image {this photo} video {this video} other {this}}",
   "user_pin_code_settings": "PIN Code",
   "user_pin_code_settings_description": "Manage your PIN code",
   "user_privacy": "User Privacy",

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

@@ -7,10 +7,9 @@
   import { Route } from '#lib/route.ts';
   import { locale } from '#lib/stores/preferences.store.ts';
   import { getAssetMediaUrl } from '#lib/utils.ts';
-  import { getAssetType } from '#lib/utils/asset-utils.ts';
   import { handleError } from '#lib/utils/handle-error.ts';
   import { isTenMinutesApart } from '#lib/utils/timesince.ts';
-  import { ReactionType, type ActivityResponseDto, type AlbumUserResponseDto, type AssetTypeEnum } from '@immich/sdk';
+  import { AssetTypeEnum, ReactionType, type ActivityResponseDto, type AlbumUserResponseDto } from '@immich/sdk';
   import { ContextMenuButton, Icon, IconButton, LoadingSpinner, Textarea, toastManager } from '@immich/ui';
   import { mdiClose, mdiSend, mdiThumbUp, mdiTrashCanOutline } from '@mdi/js';
   import * as luxon from 'luxon';
@@ -188,17 +187,15 @@
               </div>
             {/if}
           {:else if reaction.type === ReactionType.Like}
+            {const type = $derived(
+              assetType === AssetTypeEnum.Image || assetType === AssetTypeEnum.Video ? assetType.toLowerCase() : null,
+            )}
             <div class="relative">
               <div class="mt-3 flex items-center gap-4 p-3 text-sm">
                 <div class="text-primary"><Icon icon={mdiThumbUp} size="20" /></div>
 
                 <div class="w-full" title={`${reaction.user.name} (${reaction.user.email})`}>
-                  {$t('user_liked', {
-                    values: {
-                      user: reaction.user.name,
-                      type: assetType ? getAssetType(assetType).toLowerCase() : null,
-                    },
-                  })}
+                  {$t('user_liked', { values: { user: reaction.user.name, type } })}
                 </div>
                 {#if assetId === undefined && reaction.assetId}
                   <a class="aspect-square size-19" href={Route.viewAlbumAsset({ albumId, assetId: reaction.assetId })}>

web/src/lib/utils/asset-utils.ts

@@ -19,7 +19,6 @@ import {
   updateAsset,
   updateAssets,
   type AssetResponseDto,
-  type AssetTypeEnum,
   type DownloadInfoDto,
   type ExifResponseDto,
   type UserResponseDto,
@@ -126,7 +125,7 @@ function isRotated270CW(orientation: number) {
   return [7, 8, -90].includes(orientation);
 }
 
-export function isFlipped(orientation?: string | null) {
+function isFlipped(orientation?: string | null) {
   const value = Number(orientation);
   return value && (isRotated270CW(value) || isRotated90CW(value));
 }
@@ -150,7 +149,7 @@ export function getAssetResolution(asset: AssetResponseDto): string {
     return 'Invalid Data';
   }
 
-  return `${asset.width} x ${asset.height}`;
+  return `${asset.width} × ${asset.height}`;
 }
 
 /**
@@ -234,20 +233,6 @@ export function isWebCompatibleImage(asset: AssetResponseDto): boolean {
   return supportedImageMimeTypes.has(asset.originalMimeType);
 }
 
-export const getAssetType = (type: AssetTypeEnum) => {
-  switch (type) {
-    case 'IMAGE': {
-      return 'Photo';
-    }
-    case 'VIDEO': {
-      return 'Video';
-    }
-    default: {
-      return 'Asset';
-    }
-  }
-};
-
 export const getOwnedAssetsWithWarning = (assets: TimelineAsset[], user: UserResponseDto | null): string[] => {
   const ids = [...assets].filter((a) => user && a.ownerId === user.id).map((a) => a.id);
 

web/src/lib/utils/context-menu.ts

@@ -1,6 +1,6 @@
 export type Align = 'middle' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
-export type ContextMenuPosition = { x: number; y: number };
+type ContextMenuPosition = { x: number; y: number };
 
 export const getContextMenuPositionFromEvent = (
   event: MouseEvent | KeyboardEvent,