fix: TimelineAsset visibility (#18395)

* fix: TimelineAsset visibility

* fix enum values

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

@@ -6,7 +6,7 @@
   import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetVisibility, updateAssets } from '@immich/sdk';
-  import { mdiEyeOffOutline, mdiFolderMoveOutline } from '@mdi/js';
+  import { mdiLockOpenVariantOutline, mdiLockOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction, PreAction } from './action';
 
@@ -57,5 +57,5 @@
 <MenuOption
   onClick={() => toggleLockedVisibility()}
   text={isLocked ? $t('move_off_locked_folder') : $t('add_to_locked_folder')}
-  icon={isLocked ? mdiFolderMoveOutline : mdiEyeOffOutline}
+  icon={isLocked ? mdiLockOpenVariantOutline : mdiLockOutline}
 />

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

@@ -29,7 +29,7 @@
   import {
     AssetJobName,
     AssetTypeEnum,
-    Visibility,
+    AssetVisibility,
     type AlbumResponseDto,
     type AssetResponseDto,
     type PersonResponseDto,
@@ -94,7 +94,7 @@
   const sharedLink = getSharedLink();
   let isOwner = $derived($user && asset.ownerId === $user?.id);
   let showDownloadButton = $derived(sharedLink ? sharedLink.allowDownload : !asset.isOffline);
-  let isLocked = $derived(asset.visibility === Visibility.Locked);
+  let isLocked = $derived(asset.visibility === AssetVisibility.Locked);
 
   // $: showEditorButton =
   //   isOwner &&

web/src/lib/components/photos-page/actions/set-visibility-action.svelte

@@ -7,7 +7,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { AssetVisibility, updateAssets } from '@immich/sdk';
   import { Button } from '@immich/ui';
-  import { mdiEyeOffOutline, mdiFolderMoveOutline } from '@mdi/js';
+  import { mdiLockOpenVariantOutline, mdiLockOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -56,11 +56,11 @@
   <MenuOption
     onClick={setLockedVisibility}
     text={unlock ? $t('move_off_locked_folder') : $t('add_to_locked_folder')}
-    icon={unlock ? mdiFolderMoveOutline : mdiEyeOffOutline}
+    icon={unlock ? mdiLockOpenVariantOutline : mdiLockOutline}
   />
 {:else}
   <Button
-    leadingIcon={unlock ? mdiFolderMoveOutline : mdiEyeOffOutline}
+    leadingIcon={unlock ? mdiLockOpenVariantOutline : mdiLockOutline}
     disabled={loading}
     size="medium"
     color="secondary"

web/src/lib/utils/timeline-util.ts

@@ -2,7 +2,7 @@ import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
 import { locale } from '$lib/stores/preferences.store';
 import { getAssetRatio } from '$lib/utils/asset-utils';
 
-import { AssetTypeEnum, AssetVisibility, type AssetResponseDto } from '@immich/sdk';
+import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
 
 import { memoize } from 'lodash-es';
 import { DateTime, type LocaleOptions } from 'luxon';
@@ -72,6 +72,7 @@ export const toTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset):
   const city = assetResponse.exifInfo?.city;
   const country = assetResponse.exifInfo?.country;
   const people = assetResponse.people?.map((person) => person.name) || [];
+
   return {
     id: assetResponse.id,
     ownerId: assetResponse.ownerId,
@@ -79,7 +80,7 @@ export const toTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset):
     thumbhash: assetResponse.thumbhash,
     localDateTime: assetResponse.localDateTime,
     isFavorite: assetResponse.isFavorite,
-    visibility: assetResponse.isArchived ? AssetVisibility.Archive : AssetVisibility.Timeline,
+    visibility: assetResponse.visibility,
     isTrashed: assetResponse.isTrashed,
     isVideo: assetResponse.type == AssetTypeEnum.Video,
     isImage: assetResponse.type == AssetTypeEnum.Image,

web/src/routes/auth/pin-prompt/+page.svelte

@@ -65,7 +65,7 @@
           onFilled={handleUnlockSession}
         />
 
-        <Button type="button" color="secondary" onclick={() => goto(AppRoute.PHOTOS)}>Back</Button>
+        <Button type="button" color="secondary" onclick={() => goto(AppRoute.PHOTOS)}>{$t('cancel')}</Button>
       </div>
     </div>
   {:else}

web/src/test-data/factories/asset-factory.ts

@@ -1,12 +1,6 @@
 import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
 import { faker } from '@faker-js/faker';
-import {
-  AssetTypeEnum,
-  AssetVisibility,
-  Visibility,
-  type AssetResponseDto,
-  type TimeBucketAssetResponseDto,
-} from '@immich/sdk';
+import { AssetTypeEnum, AssetVisibility, type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { Sync } from 'factory.ts';
 
 export const assetFactory = Sync.makeFactory<AssetResponseDto>({
@@ -31,7 +25,7 @@ export const assetFactory = Sync.makeFactory<AssetResponseDto>({
   checksum: Sync.each(() => faker.string.alphanumeric(28)),
   isOffline: Sync.each(() => faker.datatype.boolean()),
   hasMetadata: Sync.each(() => faker.datatype.boolean()),
-  visibility: Visibility.Timeline,
+  visibility: AssetVisibility.Timeline,
 });
 
 export const timelineAssetFactory = Sync.makeFactory<TimelineAsset>({