refactor: app init event (#17937)

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

@@ -5,6 +5,7 @@
   import NextAssetAction from '$lib/components/asset-viewer/actions/next-asset-action.svelte';
   import PreviousAssetAction from '$lib/components/asset-viewer/actions/previous-asset-action.svelte';
   import { AssetAction, ProjectionType } from '$lib/constants';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { updateNumberOfComments } from '$lib/stores/activity.store';
   import { closeEditorCofirm } from '$lib/stores/asset-editor.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -12,7 +13,7 @@
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
   import { websocketEvents } from '$lib/stores/websocket';
-  import { getAssetJobMessage, getSharedLink, handlePromiseError, isSharedLink } from '$lib/utils';
+  import { getAssetJobMessage, getSharedLink, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { SlideshowHistory } from '$lib/utils/slideshow-history';
   import {
@@ -116,7 +117,7 @@
   let zoomToggle = $state(() => void 0);
 
   const refreshStack = async () => {
-    if (isSharedLink()) {
+    if (authManager.key) {
       return;
     }
 
@@ -243,7 +244,7 @@
   });
 
   const handleGetAllAlbums = async () => {
-    if (isSharedLink()) {
+    if (authManager.key) {
       return;
     }
 
@@ -412,7 +413,7 @@
     }
   });
   $effect(() => {
-    if (asset.id && !sharedLink) {
+    if (asset.id) {
       handlePromiseError(handleGetAllAlbums());
     }
   });

web/src/lib/components/asset-viewer/detail-panel-star-rating.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import StarRating from '$lib/components/shared-components/star-rating.svelte';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { preferences } from '$lib/stores/user.store';
+  import { handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAsset, type AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
-  import StarRating from '$lib/components/shared-components/star-rating.svelte';
-  import { handlePromiseError, isSharedLink } from '$lib/utils';
-  import { preferences } from '$lib/stores/user.store';
 
   interface Props {
     asset: AssetResponseDto;
@@ -24,7 +25,7 @@
   };
 </script>
 
-{#if !isSharedLink() && $preferences?.ratings.enabled}
+{#if !authManager.key && $preferences?.ratings.enabled}
   <section class="px-4 pt-2">
     <StarRating {rating} readOnly={!isOwner} onRating={(rating) => handlePromiseError(handleChangeRating(rating))} />
   </section>

web/src/lib/components/asset-viewer/detail-panel-tags.svelte

@@ -3,7 +3,7 @@
   import TagAssetForm from '$lib/components/forms/tag-asset-form.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import { AppRoute } from '$lib/constants';
-  import { isSharedLink } from '$lib/utils';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { removeTag, tagAssets } from '$lib/utils/asset-utils';
   import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
   import { mdiClose, mdiPlus } from '@mdi/js';
@@ -41,7 +41,7 @@
   };
 </script>
 
-{#if isOwner && !isSharedLink()}
+{#if isOwner && !authManager.key}
   <section class="px-4 mt-4">
     <div class="flex h-10 w-full items-center justify-between text-sm">
       <h2>{$t('tags').toUpperCase()}</h2>

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

@@ -6,15 +6,19 @@
   import DetailPanelTags from '$lib/components/asset-viewer/detail-panel-tags.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import ChangeDate from '$lib/components/shared-components/change-date.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import { AppRoute, QueryParameter, timeToLoadTheMap } from '$lib/constants';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { locale } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { preferences, user } from '$lib/stores/user.store';
-  import { getAssetThumbnailUrl, getPeopleThumbnailUrl, handlePromiseError, isSharedLink } from '$lib/utils';
+  import { getAssetThumbnailUrl, getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { delay, isFlipped } from '$lib/utils/asset-utils';
   import { getByteUnitString } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
+  import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   import { fromDateTimeOriginal, fromLocalDateTime } from '$lib/utils/timeline-util';
   import {
     AssetMediaSize,
@@ -44,9 +48,6 @@
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
   import AlbumListItemDetails from './album-list-item-details.svelte';
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
-  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
 
   interface Props {
     asset: AssetResponseDto;
@@ -84,7 +85,7 @@
 
   const handleNewAsset = async (newAsset: AssetResponseDto) => {
     // TODO: check if reloading asset data is necessary
-    if (newAsset.id && !isSharedLink()) {
+    if (newAsset.id && !authManager.key) {
       const data = await getAssetInfo({ id: asset.id });
       people = data?.people || [];
       unassignedFaces = data?.unassignedFaces || [];
@@ -187,7 +188,7 @@
   <DetailPanelDescription {asset} {isOwner} />
   <DetailPanelRating {asset} {isOwner} />
 
-  {#if !isSharedLink() && isOwner}
+  {#if !authManager.key && isOwner}
     <section class="px-4 pt-4 text-sm">
       <div class="flex h-10 w-full items-center justify-between">
         <h2>{$t('people').toUpperCase()}</h2>

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

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { getAssetOriginalUrl, getKey } from '$lib/utils';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { getAssetOriginalUrl } from '$lib/utils';
   import { isWebCompatibleImage } from '$lib/utils/asset-utils';
   import { AssetMediaSize, viewAsset, type AssetResponseDto } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
-  import { t } from 'svelte-i18n';
 
   interface Props {
     asset: AssetResponseDto;
@@ -13,7 +14,7 @@
   const { asset }: Props = $props();
 
   const loadAssetData = async (id: string) => {
-    const data = await viewAsset({ id, size: AssetMediaSize.Preview, key: getKey() });
+    const data = await viewAsset({ id, size: AssetMediaSize.Preview, key: authManager.key });
     return URL.createObjectURL(data);
   };
 </script>

web/src/lib/components/assets/thumbnail/__test__/thumbnail.spec.ts

@@ -25,6 +25,7 @@ describe('Thumbnail component', () => {
     vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());
     vi.mock('$lib/utils/navigation', () => ({
       currentUrlReplaceAssetId: vi.fn(),
+      isSharedLinkRoute: vi.fn().mockReturnValue(false),
     }));
   });
 

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

@@ -2,7 +2,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { ProjectionType } from '$lib/constants';
   import { locale, playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
-  import { getAssetPlaybackUrl, getAssetThumbnailUrl, isSharedLink } from '$lib/utils';
+  import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { timeToSeconds } from '$lib/utils/date-time';
   import { getAltText } from '$lib/utils/thumbnail-util';
   import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
@@ -17,15 +17,16 @@
   } from '@mdi/js';
 
   import { thumbhash } from '$lib/actions/thumbhash';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { getFocusable } from '$lib/utils/focus-util';
   import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
   import { TUNABLES } from '$lib/utils/tunables';
+  import { onMount } from 'svelte';
   import type { ClassValue } from 'svelte/elements';
   import { fade } from 'svelte/transition';
   import ImageThumbnail from './image-thumbnail.svelte';
   import VideoThumbnail from './video-thumbnail.svelte';
-  import { onMount } from 'svelte';
-  import { getFocusable } from '$lib/utils/focus-util';
 
   interface Props {
     asset: AssetResponseDto;
@@ -331,13 +332,13 @@
         ></div>
 
         <!-- Favorite asset star -->
-        {#if !isSharedLink() && asset.isFavorite}
+        {#if !authManager.key && asset.isFavorite}
           <div class="absolute bottom-2 start-2 z-10">
             <Icon path={mdiHeart} size="24" class="text-white" />
           </div>
         {/if}
 
-        {#if !isSharedLink() && showArchiveIcon && asset.isArchived}
+        {#if !authManager.key && showArchiveIcon && asset.isArchived}
           <div class={['absolute start-2 z-10', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
             <Icon path={mdiArchiveArrowDownOutline} size="24" class="text-white" />
           </div>

web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { getKey } from '$lib/utils';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { removeSharedLinkAssets, type SharedLinkResponseDto } from '@immich/sdk';
   import { mdiDeleteOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
   import { NotificationType, notificationController } from '../../shared-components/notification/notification';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
-  import { t } from 'svelte-i18n';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -34,7 +34,7 @@
         assetIdsDto: {
           assetIds: [...getAssets()].map((asset) => asset.id),
         },
-        key: getKey(),
+        key: authManager.key,
       });
 
       for (const result of results) {

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import type { Viewport } from '$lib/stores/assets-store.svelte';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { getKey, handlePromiseError } from '$lib/utils';
-  import { downloadArchive } from '$lib/utils/asset-utils';
+  import { handlePromiseError } from '$lib/utils';
+  import { cancelMultiselect, downloadArchive } from '$lib/utils/asset-utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import { handleError } from '$lib/utils/handle-error';
   import { addSharedLinkAssets, type SharedLinkResponseDto } from '@immich/sdk';
   import { mdiArrowLeft, mdiFileImagePlusOutline, mdiFolderDownloadOutline, mdiSelectAll } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import AssetViewer from '../asset-viewer/asset-viewer.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import DownloadAction from '../photos-page/actions/download-action.svelte';
   import RemoveFromSharedLink from '../photos-page/actions/remove-from-shared-link.svelte';
   import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
-  import AssetViewer from '../asset-viewer/asset-viewer.svelte';
-  import { cancelMultiselect } from '$lib/utils/asset-utils';
-  import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import type { Viewport } from '$lib/stores/assets-store.svelte';
-  import { t } from 'svelte-i18n';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -57,7 +57,7 @@
         assetIdsDto: {
           assetIds: results.filter((id) => !!id) as string[],
         },
-        key: getKey(),
+        key: authManager.key,
       });
 
       const added = data.filter((item) => item.success).length;

web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { shouldIgnoreEvent } from '$lib/actions/shortcut';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { fileUploadHandler } from '$lib/utils/file-uploader';
-  import { isAlbumsRoute, isSharedLinkRoute } from '$lib/utils/navigation';
+  import { isAlbumsRoute } from '$lib/utils/navigation';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import ImmichLogo from './immich-logo.svelte';
 
   let albumId = $derived(isAlbumsRoute(page.route?.id) ? page.params.albumId : undefined);
-  let isShare = $derived(isSharedLinkRoute(page.route?.id));
 
   let dragStartTarget: EventTarget | null = $state(null);
 
@@ -123,7 +123,7 @@
     }
 
     const filesArray: File[] = Array.from<File>(files);
-    if (isShare) {
+    if (authManager.key) {
       dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
     } else {
       await fileUploadHandler(filesArray, albumId);

web/src/lib/managers/auth-manager.svelte.ts

@@ -1,9 +1,13 @@
 import { goto } from '$app/navigation';
+import { page } from '$app/state';
 import { AppRoute } from '$lib/constants';
 import { eventManager } from '$lib/managers/event-manager.svelte';
+import { isSharedLinkRoute } from '$lib/utils/navigation';
 import { logout } from '@immich/sdk';
 
 class AuthManager {
+  key = $derived(isSharedLinkRoute(page.route?.id) ? page.params.key : undefined);
+
   async logout() {
     let redirectUri;
 

web/src/lib/managers/event-manager.svelte.ts

@@ -51,6 +51,7 @@ class EventManager<EventMap extends Record<string, unknown[]>> {
 }
 
 export const eventManager = new EventManager<{
+  'app.init': [];
   'user.login': [];
   'auth.login': [LoginResponseDto];
   'auth.logout': [];

web/src/lib/managers/language-manager.svelte.ts

@@ -1,7 +1,12 @@
 import { langs } from '$lib/constants';
 import { eventManager } from '$lib/managers/event-manager.svelte';
+import { lang } from '$lib/stores/preferences.store';
 
 class LanguageManager {
+  constructor() {
+    eventManager.on('app.init', () => lang.subscribe((lang) => this.setLanguage(lang)));
+  }
+
   rtl = $state(false);
 
   setLanguage(code: string) {

web/src/lib/stores/asset-viewing.store.ts

@@ -1,4 +1,4 @@
-import { getKey } from '$lib/utils';
+import { authManager } from '$lib/managers/auth-manager.svelte';
 import { type AssetGridRouteSearchParams } from '$lib/utils/navigation';
 import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
 import { readonly, writable } from 'svelte/store';
@@ -16,7 +16,7 @@ function createAssetViewingStore() {
   };
 
   const setAssetId = async (id: string): Promise<AssetResponseDto> => {
-    const asset = await getAssetInfo({ id, key: getKey() });
+    const asset = await getAssetInfo({ id, key: authManager.key });
     setAsset(asset);
     return asset;
   };

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

@@ -1,5 +1,4 @@
 import { locale } from '$lib/stores/preferences.store';
-import { getKey } from '$lib/utils';
 import { CancellableTask } from '$lib/utils/cancellable-task';
 import {
   getJustifiedLayoutFromAssets,
@@ -21,6 +20,7 @@ import { clamp, debounce, isEqual, throttle } from 'lodash-es';
 import { DateTime } from 'luxon';
 import { t } from 'svelte-i18n';
 
+import { authManager } from '$lib/managers/auth-manager.svelte';
 import { SvelteSet } from 'svelte/reactivity';
 import { get, writable, type Unsubscriber } from 'svelte/store';
 import { handleError } from '../utils/handle-error';
@@ -839,7 +839,7 @@ export class AssetStore {
     const timebuckets = await getTimeBuckets({
       ...this.#options,
       size: TimeBucketSize.Month,
-      key: getKey(),
+      key: authManager.key,
     });
 
     this.buckets = timebuckets.map((bucket) => {
@@ -1047,7 +1047,7 @@ export class AssetStore {
           ...this.#options,
           timeBucket: bucketDate,
           size: TimeBucketSize.Month,
-          key: getKey(),
+          key: authManager.key,
         },
         { signal },
       );
@@ -1058,7 +1058,7 @@ export class AssetStore {
               albumId: this.#options.timelineAlbumId,
               timeBucket: bucketDate,
               size: TimeBucketSize.Month,
-              key: getKey(),
+              key: authManager.key,
             },
             { signal },
           );

web/src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
 import { defaultLang, langs, locales } from '$lib/constants';
+import { authManager } from '$lib/managers/auth-manager.svelte';
 import { lang } from '$lib/stores/preferences.store';
 import { handleError } from '$lib/utils/handle-error';
 import {
@@ -155,18 +156,11 @@ export const getJobName = derived(t, ($t) => {
   };
 });
 
-let _key: string | undefined;
 let _sharedLink: SharedLinkResponseDto | undefined;
 
-export const setKey = (key?: string) => (_key = key);
-export const getKey = (): string | undefined => _key;
 export const setSharedLink = (sharedLink: SharedLinkResponseDto) => (_sharedLink = sharedLink);
 export const getSharedLink = (): SharedLinkResponseDto | undefined => _sharedLink;
 
-export const isSharedLink = () => {
-  return !!_key;
-};
-
 const createUrl = (path: string, parameters?: Record<string, unknown>) => {
   const searchParameters = new URLSearchParams();
   for (const key in parameters) {
@@ -189,7 +183,7 @@ export const getAssetOriginalUrl = (options: string | AssetUrlOptions) => {
     options = { id: options };
   }
   const { id, cacheKey } = options;
-  return createUrl(getAssetOriginalPath(id), { key: getKey(), c: cacheKey });
+  return createUrl(getAssetOriginalPath(id), { key: authManager.key, c: cacheKey });
 };
 
 export const getAssetThumbnailUrl = (options: string | (AssetUrlOptions & { size?: AssetMediaSize })) => {
@@ -197,7 +191,7 @@ export const getAssetThumbnailUrl = (options: string | (AssetUrlOptions & { size
     options = { id: options };
   }
   const { id, size, cacheKey } = options;
-  return createUrl(getAssetThumbnailPath(id), { size, key: getKey(), c: cacheKey });
+  return createUrl(getAssetThumbnailPath(id), { size, key: authManager.key, c: cacheKey });
 };
 
 export const getAssetPlaybackUrl = (options: string | AssetUrlOptions) => {
@@ -205,7 +199,7 @@ export const getAssetPlaybackUrl = (options: string | AssetUrlOptions) => {
     options = { id: options };
   }
   const { id, cacheKey } = options;
-  return createUrl(getAssetPlaybackPath(id), { key: getKey(), c: cacheKey });
+  return createUrl(getAssetPlaybackPath(id), { key: authManager.key, c: cacheKey });
 };
 
 export const getProfileImageUrl = (user: UserResponseDto) =>

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

@@ -3,11 +3,12 @@ import FormatBoldMessage from '$lib/components/i18n/format-bold-message.svelte';
 import type { InterpolationValues } from '$lib/components/i18n/format-message';
 import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
 import { AppRoute } from '$lib/constants';
+import { authManager } from '$lib/managers/auth-manager.svelte';
 import { downloadManager } from '$lib/managers/download-manager.svelte';
 import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 import { assetsSnapshot, isSelectingAllAssets, type AssetStore } from '$lib/stores/assets-store.svelte';
 import { preferences } from '$lib/stores/user.store';
-import { downloadRequest, getKey, withError } from '$lib/utils';
+import { downloadRequest, withError } from '$lib/utils';
 import { createAlbum } from '$lib/utils/album-utils';
 import { getByteUnitString } from '$lib/utils/byte-units';
 import { getFormatter } from '$lib/utils/i18n';
@@ -44,7 +45,7 @@ export const addAssetsToAlbum = async (albumId: string, assetIds: string[], show
     bulkIdsDto: {
       ids: assetIds,
     },
-    key: getKey(),
+    key: authManager.key,
   });
   const count = result.filter(({ success }) => success).length;
   const $t = get(t);
@@ -178,7 +179,7 @@ export const downloadArchive = async (fileName: string, options: Omit<DownloadIn
   const $preferences = get<UserPreferencesResponseDto | undefined>(preferences);
   const dto = { ...options, archiveSize: $preferences?.download.archiveSize };
 
-  const [error, downloadInfo] = await withError(() => getDownloadInfo({ downloadInfoDto: dto, key: getKey() }));
+  const [error, downloadInfo] = await withError(() => getDownloadInfo({ downloadInfoDto: dto, key: authManager.key }));
   if (error) {
     const $t = get(t);
     handleError(error, $t('errors.unable_to_download_files'));
@@ -193,7 +194,7 @@ export const downloadArchive = async (fileName: string, options: Omit<DownloadIn
     const archive = downloadInfo.archives[index];
     const suffix = downloadInfo.archives.length > 1 ? `+${index + 1}` : '';
     const archiveName = fileName.replace('.zip', `${suffix}-${DateTime.now().toFormat('yyyyLLdd_HHmmss')}.zip`);
-    const key = getKey();
+    const key = authManager.key;
 
     let downloadKey = `${archiveName} `;
     if (downloadInfo.archives.length > 1) {
@@ -240,7 +241,7 @@ export const downloadFile = async (asset: AssetResponseDto) => {
   };
 
   if (asset.livePhotoVideoId) {
-    const motionAsset = await getAssetInfo({ id: asset.livePhotoVideoId, key: getKey() });
+    const motionAsset = await getAssetInfo({ id: asset.livePhotoVideoId, key: authManager.key });
     if (!isAndroidMotionVideo(motionAsset) || get(preferences)?.download.includeEmbeddedVideos) {
       assets.push({
         filename: motionAsset.originalFileName,
@@ -252,7 +253,7 @@ export const downloadFile = async (asset: AssetResponseDto) => {
 
   for (const { filename, id } of assets) {
     try {
-      const key = getKey();
+      const key = authManager.key;
 
       notificationController.show({
         type: NotificationType.Info,

web/src/lib/utils/file-uploader.ts

@@ -1,6 +1,7 @@
+import { authManager } from '$lib/managers/auth-manager.svelte';
 import { UploadState } from '$lib/models/upload-asset';
 import { uploadAssetsStore } from '$lib/stores/upload';
-import { getKey, uploadRequest } from '$lib/utils';
+import { uploadRequest } from '$lib/utils';
 import { addAssetsToAlbum } from '$lib/utils/asset-utils';
 import { ExecutorQueue } from '$lib/utils/executor-queue';
 import {
@@ -134,7 +135,7 @@ async function fileUploader(
     }
 
     let responseData: { id: string; status: AssetMediaStatus; isTrashed?: boolean } | undefined;
-    const key = getKey();
+    const key = authManager.key;
     if (crypto?.subtle?.digest && !key) {
       uploadAssetsStore.updateItem(deviceAssetId, { message: $t('asset_hashing') });
       await tick();

web/src/routes/+layout.svelte

@@ -11,13 +11,13 @@
   import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
   import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
   import { Theme } from '$lib/constants';
-  import { languageManager } from '$lib/managers/language-manager.svelte';
-  import { colorTheme, handleToggleTheme, lang, type ThemeSetting } from '$lib/stores/preferences.store';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { colorTheme, handleToggleTheme, type ThemeSetting } from '$lib/stores/preferences.store';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
   import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
-  import { copyToClipboard, setKey } from '$lib/utils';
-  import { isAssetViewerRoute, isSharedLinkRoute } from '$lib/utils/navigation';
+  import { copyToClipboard } from '$lib/utils';
+  import { isAssetViewerRoute } from '$lib/utils/navigation';
   import { setTranslations } from '@immich/ui';
   import { onDestroy, onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -67,21 +67,15 @@
     element?.remove();
     // if the browser theme changes, changes the Immich theme too
     globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', handleChangeTheme);
-
-    return lang.subscribe((lang) => languageManager.setLanguage(lang));
   });
 
   onDestroy(() => {
     document.removeEventListener('change', handleChangeTheme);
   });
 
-  if (isSharedLinkRoute(page.route?.id)) {
-    setKey(page.params.key);
-  }
+  eventManager.emit('app.init');
 
   beforeNavigate(({ from, to }) => {
-    setKey(isSharedLinkRoute(to?.route.id) ? to?.params?.key : undefined);
-
     if (isAssetViewerRoute(from) && isAssetViewerRoute(to)) {
       return;
     }