From dca48d7722b690928cf4a3349a015969d73c05a6 Mon Sep 17 00:00:00 2001
From: Sergey Kondrikov <sergey.kondrikov@gmail.com>
Date: Thu, 29 Jun 2023 16:11:00 +0300
Subject: [PATCH 01/53] fix(web): aspect ratio for videos (#3023)

---
 web/src/lib/utils/asset-utils.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts
index 0f6c84872..c993b97d7 100644
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -181,6 +181,14 @@ export function getFileMimeType(file: File): string {
 	return file.type || (mimeTypes[getFilenameExtension(file.name)] ?? '');
 }
 
+function isRotated90CW(orientation: number) {
+	return orientation == 6 || orientation == 90;
+}
+
+function isRotated270CW(orientation: number) {
+	return orientation == 8 || orientation == -90;
+}
+
 /**
  * Returns aspect ratio for the asset
  */
@@ -189,8 +197,7 @@ export function getAssetRatio(asset: AssetResponseDto) {
 	let width = asset.exifInfo?.exifImageWidth || 235;
 	const orientation = Number(asset.exifInfo?.orientation);
 	if (orientation) {
-		// 6 - Rotate 90 CW, 8 - Rotate 270 CW
-		if (orientation == 6 || orientation == 8) {
+		if (isRotated90CW(orientation) || isRotated270CW(orientation)) {
 			[width, height] = [height, width];
 		}
 	}

From 39482470558b392425ebe34d4a7386ee89859b92 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 29 Jun 2023 08:11:17 -0500
Subject: [PATCH 02/53] chore(deps): bump docker/setup-buildx-action from 2.7.0
 to 2.8.0 (#3028)

Bumps [docker/setup-buildx-action](https://github.com/docker/setup-buildx-action) from 2.7.0 to 2.8.0.
- [Release notes](https://github.com/docker/setup-buildx-action/releases)
- [Commits](https://github.com/docker/setup-buildx-action/compare/v2.7.0...v2.8.0)

---
updated-dependencies:
- dependency-name: docker/setup-buildx-action
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/docker.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index f22be00e2..8a448f2fc 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -45,7 +45,7 @@ jobs:
         uses: docker/setup-qemu-action@v2.2.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.7.0
+        uses: docker/setup-buildx-action@v2.8.0
         # Workaround to fix error:
         # failed to push: failed to copy: io: read/write on closed pipe
         # See https://github.com/docker/build-push-action/issues/761

From c065705608f7f3ee54d648ca84cbb79f2cf2c726 Mon Sep 17 00:00:00 2001
From: faupau <paul.paffe@gmx.de>
Date: Thu, 29 Jun 2023 17:11:37 +0200
Subject: [PATCH 03/53] fix(web): Share link multi-select download icon showing
 when not available #3006 (#3027)

* only show download button if allowDownload
add SelectAll to individual share

* fix allow download if not share
---
 web/src/lib/components/album-page/album-viewer.svelte  |  4 +++-
 .../share-page/individual-shared-viewer.svelte         | 10 +++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 2223fcbd2..4d327d322 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -351,7 +351,9 @@
 			clearSelect={() => (multiSelectAsset = new Set())}
 		>
 			<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
-			<DownloadAction filename={album.albumName} sharedLinkKey={sharedLink?.key} />
+			{#if sharedLink?.allowDownload || !isPublicShared}
+				<DownloadAction filename={album.albumName} sharedLinkKey={sharedLink?.key} />
+			{/if}
 			{#if isOwned}
 				<RemoveFromAlbum bind:album />
 			{/if}
diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte
index 865747584..a6a50f091 100644
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte
@@ -12,6 +12,7 @@
 	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 SelectAll from 'svelte-material-icons/SelectAll.svelte';
 	import ImmichLogo from '../shared-components/immich-logo.svelte';
 	import {
 		notificationController,
@@ -53,12 +54,19 @@
 			handleError(e, 'Unable to add assets to shared link');
 		}
 	};
+
+	const handleSelectAll = () => {
+		selectedAssets = new Set(assets);
+	};
 </script>
 
 <section class="bg-immich-bg dark:bg-immich-dark-bg">
 	{#if isMultiSelectionMode}
 		<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
-			<DownloadAction filename="immich-shared" sharedLinkKey={sharedLink.key} />
+			<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
+			{#if sharedLink?.allowDownload}
+				<DownloadAction filename="immich-shared" sharedLinkKey={sharedLink.key} />
+			{/if}
 			{#if isOwned}
 				<RemoveFromSharedLink bind:sharedLink />
 			{/if}

From e3557fd80e43b7a11d206e8afd2654663dffc3a1 Mon Sep 17 00:00:00 2001
From: faupau <paul.paffe@gmx.de>
Date: Thu, 29 Jun 2023 17:26:25 +0200
Subject: [PATCH 04/53] Fix(web): drag n drop shared link (#3030)

* add event to trigger uploadhandler

* add dragndrop store
to handle upload in album-viewer and individuel-shared-viewer
(only on shares)

* fix handleUploadAssets no parameter

* fix format
---
 .../components/album-page/album-viewer.svelte | 10 +++++++-
 .../individual-shared-viewer.svelte           | 23 +++++++++++++++----
 .../lib/stores/drag-and-drop-files.store.ts   |  7 ++++++
 .../routes/(user)/share/[key]/+page.svelte    |  1 -
 web/src/routes/+layout.svelte                 | 15 ++++++++----
 5 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 web/src/lib/stores/drag-and-drop-files.store.ts

diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 4d327d322..1183af14d 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -2,9 +2,10 @@
 	import { browser } from '$app/environment';
 	import { afterNavigate, goto } from '$app/navigation';
 	import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
+	import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
 	import { downloadAssets } from '$lib/stores/download';
 	import { locale } from '$lib/stores/preferences.store';
-	import { openFileUploadDialog } from '$lib/utils/file-uploader';
+	import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
 	import {
 		AlbumResponseDto,
 		AssetResponseDto,
@@ -80,6 +81,13 @@
 	$: isPublicShared = sharedLink;
 	$: isOwned = currentUser?.id == album.ownerId;
 
+	dragAndDropFilesStore.subscribe((value) => {
+		if (value.isDragging && value.files.length > 0) {
+			fileUploadHandler(value.files, album.id, sharedLink?.key);
+			dragAndDropFilesStore.set({ isDragging: false, files: [] });
+		}
+	});
+
 	let multiSelectAsset: Set<AssetResponseDto> = new Set();
 	$: isMultiSelectionMode = multiSelectAsset.size > 0;
 
diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte
index a6a50f091..65d0bcea5 100644
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { bulkDownload } from '$lib/utils/asset-utils';
-	import { openFileUploadDialog } from '$lib/utils/file-uploader';
+	import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
 	import { api, AssetResponseDto, SharedLinkResponseDto } from '@api';
+	import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
 	import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
 	import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
@@ -14,6 +15,7 @@
 	import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
 	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
 	import ImmichLogo from '../shared-components/immich-logo.svelte';
+
 	import {
 		notificationController,
 		NotificationType
@@ -28,14 +30,25 @@
 	$: assets = sharedLink.assets;
 	$: isMultiSelectionMode = selectedAssets.size > 0;
 
+	dragAndDropFilesStore.subscribe((value) => {
+		if (value.isDragging && value.files.length > 0) {
+			handleUploadAssets(value.files);
+			dragAndDropFilesStore.set({ isDragging: false, files: [] });
+		}
+	});
+
 	const downloadAssets = async () => {
 		await bulkDownload('immich-shared', assets, undefined, sharedLink.key);
 	};
 
-	const handleUploadAssets = async () => {
+	const handleUploadAssets = async (files: File[] = []) => {
 		try {
-			const results = await openFileUploadDialog(undefined, sharedLink.key);
-
+			let results: (string | undefined)[] = [];
+			if (!files || files.length === 0 || !Array.isArray(files)) {
+				results = await openFileUploadDialog(undefined, sharedLink.key);
+			} else {
+				results = await fileUploadHandler(files, undefined, sharedLink.key);
+			}
 			const { data } = await api.sharedLinkApi.addSharedLinkAssets({
 				id: sharedLink.id,
 				assetIdsDto: {
@@ -94,7 +107,7 @@
 				{#if sharedLink?.allowUpload}
 					<CircleIconButton
 						title="Add Photos"
-						on:click={handleUploadAssets}
+						on:click={() => handleUploadAssets()}
 						logo={FileImagePlusOutline}
 					/>
 				{/if}
diff --git a/web/src/lib/stores/drag-and-drop-files.store.ts b/web/src/lib/stores/drag-and-drop-files.store.ts
new file mode 100644
index 000000000..018687f26
--- /dev/null
+++ b/web/src/lib/stores/drag-and-drop-files.store.ts
@@ -0,0 +1,7 @@
+//store to track the state of the drag and drop and the files
+import { writable } from 'svelte/store';
+
+export const dragAndDropFilesStore = writable({
+	isDragging: false as boolean,
+	files: [] as File[]
+});
diff --git a/web/src/routes/(user)/share/[key]/+page.svelte b/web/src/routes/(user)/share/[key]/+page.svelte
index 554216eff..258fd7120 100644
--- a/web/src/routes/(user)/share/[key]/+page.svelte
+++ b/web/src/routes/(user)/share/[key]/+page.svelte
@@ -5,7 +5,6 @@
 	import type { PageData } from './$types';
 
 	export let data: PageData;
-
 	const { sharedLink } = data;
 
 	let album: AlbumResponseDto | null = null;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index ea5631658..f817768bf 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -15,8 +15,11 @@
 	import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
 	import FaviconHeader from '$lib/components/shared-components/favicon-header.svelte';
 
+	import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
+
 	let showNavigationLoadingBar = false;
 	export let data: LayoutData;
+	let albumId: string | undefined;
 
 	beforeNavigate(() => {
 		showNavigationLoadingBar = true;
@@ -33,10 +36,14 @@
 		}
 
 		const filesArray: File[] = Array.from<File>(files);
-		const albumId =
-			($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
+		albumId = ($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
 
-		await fileUploadHandler(filesArray, albumId);
+		const isShare = $page.route.id === '/(user)/share/[key]' || undefined;
+		if (isShare) {
+			dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
+		} else {
+			await fileUploadHandler(filesArray, albumId);
+		}
 	};
 </script>
 
@@ -76,7 +83,7 @@
 	<NavigationLoadingBar />
 {/if}
 
-<slot />
+<slot {albumId} />
 
 <DownloadPanel />
 <UploadPanel />

From ff26d3666e28c47d8764c621a29116054fdc4d2a Mon Sep 17 00:00:00 2001
From: Fynn Petersen-Frey <10599762+fyfrey@users.noreply.github.com>
Date: Thu, 29 Jun 2023 21:35:29 +0200
Subject: [PATCH 05/53] fix(mobile): set scrolling state only if changed
 (#3034)

* fix(mobile): set scrolling state only if changed

* fix: generate api

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../ui/asset_grid/immich_asset_grid_view.dart  |  8 +++++++-
 .../lib/model/admin_signup_response_dto.dart   |  2 +-
 .../openapi/lib/model/album_response_dto.dart  |  6 +++---
 .../lib/model/api_key_response_dto.dart        |  4 ++--
 .../openapi/lib/model/asset_response_dto.dart  |  6 +++---
 .../openapi/lib/model/exif_response_dto.dart   | 18 +++++++++---------
 mobile/openapi/lib/model/import_asset_dto.dart |  4 ++--
 .../lib/model/shared_link_create_dto.dart      |  2 +-
 .../lib/model/shared_link_edit_dto.dart        |  2 +-
 .../lib/model/shared_link_response_dto.dart    |  4 ++--
 .../openapi/lib/model/user_response_dto.dart   |  6 +++---
 .../serialization/native/native_class.mustache | 12 ++++++------
 12 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
index 30a7de669..fb7c9ddc0 100644
--- a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
@@ -311,7 +311,13 @@ class ImmichAssetGridViewState extends State<ImmichAssetGridView> {
   Widget _buildAssetGrid() {
     final useDragScrolling = widget.renderList.totalAssets >= 20;
 
-    void dragScrolling(bool active) => _scrolling = active;
+    void dragScrolling(bool active) {
+      if (active != _scrolling) {
+        setState(() {
+          _scrolling = active;
+        });
+      }
+    }
 
     final listWidget = ScrollablePositionedList.builder(
       padding: const EdgeInsets.only(
diff --git a/mobile/openapi/lib/model/admin_signup_response_dto.dart b/mobile/openapi/lib/model/admin_signup_response_dto.dart
index 70162665a..6eabcd7c3 100644
--- a/mobile/openapi/lib/model/admin_signup_response_dto.dart
+++ b/mobile/openapi/lib/model/admin_signup_response_dto.dart
@@ -72,7 +72,7 @@ class AdminSignupResponseDto {
         email: mapValueOfType<String>(json, r'email')!,
         firstName: mapValueOfType<String>(json, r'firstName')!,
         lastName: mapValueOfType<String>(json, r'lastName')!,
-        createdAt: mapDateTime(json, r'createdAt', '')!,
+        createdAt: mapDateTime(json, r'createdAt', r'')!,
       );
     }
     return null;
diff --git a/mobile/openapi/lib/model/album_response_dto.dart b/mobile/openapi/lib/model/album_response_dto.dart
index 3c2df247a..dc76a6705 100644
--- a/mobile/openapi/lib/model/album_response_dto.dart
+++ b/mobile/openapi/lib/model/album_response_dto.dart
@@ -128,14 +128,14 @@ class AlbumResponseDto {
         id: mapValueOfType<String>(json, r'id')!,
         ownerId: mapValueOfType<String>(json, r'ownerId')!,
         albumName: mapValueOfType<String>(json, r'albumName')!,
-        createdAt: mapDateTime(json, r'createdAt', '')!,
-        updatedAt: mapDateTime(json, r'updatedAt', '')!,
+        createdAt: mapDateTime(json, r'createdAt', r'')!,
+        updatedAt: mapDateTime(json, r'updatedAt', r'')!,
         albumThumbnailAssetId: mapValueOfType<String>(json, r'albumThumbnailAssetId'),
         shared: mapValueOfType<bool>(json, r'shared')!,
         sharedUsers: UserResponseDto.listFromJson(json[r'sharedUsers']),
         assets: AssetResponseDto.listFromJson(json[r'assets']),
         owner: UserResponseDto.fromJson(json[r'owner'])!,
-        lastModifiedAssetTimestamp: mapDateTime(json, r'lastModifiedAssetTimestamp', ''),
+        lastModifiedAssetTimestamp: mapDateTime(json, r'lastModifiedAssetTimestamp', r''),
       );
     }
     return null;
diff --git a/mobile/openapi/lib/model/api_key_response_dto.dart b/mobile/openapi/lib/model/api_key_response_dto.dart
index 2125d92c2..5aa143414 100644
--- a/mobile/openapi/lib/model/api_key_response_dto.dart
+++ b/mobile/openapi/lib/model/api_key_response_dto.dart
@@ -64,8 +64,8 @@ class APIKeyResponseDto {
       return APIKeyResponseDto(
         id: mapValueOfType<String>(json, r'id')!,
         name: mapValueOfType<String>(json, r'name')!,
-        createdAt: mapDateTime(json, r'createdAt', '')!,
-        updatedAt: mapDateTime(json, r'updatedAt', '')!,
+        createdAt: mapDateTime(json, r'createdAt', r'')!,
+        updatedAt: mapDateTime(json, r'updatedAt', r'')!,
       );
     }
     return null;
diff --git a/mobile/openapi/lib/model/asset_response_dto.dart b/mobile/openapi/lib/model/asset_response_dto.dart
index c068b61eb..cd74d5721 100644
--- a/mobile/openapi/lib/model/asset_response_dto.dart
+++ b/mobile/openapi/lib/model/asset_response_dto.dart
@@ -213,9 +213,9 @@ class AssetResponseDto {
         originalFileName: mapValueOfType<String>(json, r'originalFileName')!,
         resized: mapValueOfType<bool>(json, r'resized')!,
         thumbhash: mapValueOfType<String>(json, r'thumbhash'),
-        fileCreatedAt: mapDateTime(json, r'fileCreatedAt', '')!,
-        fileModifiedAt: mapDateTime(json, r'fileModifiedAt', '')!,
-        updatedAt: mapDateTime(json, r'updatedAt', '')!,
+        fileCreatedAt: mapDateTime(json, r'fileCreatedAt', r'')!,
+        fileModifiedAt: mapDateTime(json, r'fileModifiedAt', r'')!,
+        updatedAt: mapDateTime(json, r'updatedAt', r'')!,
         isFavorite: mapValueOfType<bool>(json, r'isFavorite')!,
         isArchived: mapValueOfType<bool>(json, r'isArchived')!,
         mimeType: mapValueOfType<String>(json, r'mimeType'),
diff --git a/mobile/openapi/lib/model/exif_response_dto.dart b/mobile/openapi/lib/model/exif_response_dto.dart
index 201c13d6e..8af6e8f09 100644
--- a/mobile/openapi/lib/model/exif_response_dto.dart
+++ b/mobile/openapi/lib/model/exif_response_dto.dart
@@ -243,31 +243,31 @@ class ExifResponseDto {
         model: mapValueOfType<String>(json, r'model'),
         exifImageWidth: json[r'exifImageWidth'] == null
             ? null
-            : num.parse(json[r'exifImageWidth'].toString()),
+            : num.parse('${json[r'exifImageWidth']}'),
         exifImageHeight: json[r'exifImageHeight'] == null
             ? null
-            : num.parse(json[r'exifImageHeight'].toString()),
+            : num.parse('${json[r'exifImageHeight']}'),
         orientation: mapValueOfType<String>(json, r'orientation'),
-        dateTimeOriginal: mapDateTime(json, r'dateTimeOriginal', ''),
-        modifyDate: mapDateTime(json, r'modifyDate', ''),
+        dateTimeOriginal: mapDateTime(json, r'dateTimeOriginal', r''),
+        modifyDate: mapDateTime(json, r'modifyDate', r''),
         timeZone: mapValueOfType<String>(json, r'timeZone'),
         lensModel: mapValueOfType<String>(json, r'lensModel'),
         fNumber: json[r'fNumber'] == null
             ? null
-            : num.parse(json[r'fNumber'].toString()),
+            : num.parse('${json[r'fNumber']}'),
         focalLength: json[r'focalLength'] == null
             ? null
-            : num.parse(json[r'focalLength'].toString()),
+            : num.parse('${json[r'focalLength']}'),
         iso: json[r'iso'] == null
             ? null
-            : num.parse(json[r'iso'].toString()),
+            : num.parse('${json[r'iso']}'),
         exposureTime: mapValueOfType<String>(json, r'exposureTime'),
         latitude: json[r'latitude'] == null
             ? null
-            : num.parse(json[r'latitude'].toString()),
+            : num.parse('${json[r'latitude']}'),
         longitude: json[r'longitude'] == null
             ? null
-            : num.parse(json[r'longitude'].toString()),
+            : num.parse('${json[r'longitude']}'),
         city: mapValueOfType<String>(json, r'city'),
         state: mapValueOfType<String>(json, r'state'),
         country: mapValueOfType<String>(json, r'country'),
diff --git a/mobile/openapi/lib/model/import_asset_dto.dart b/mobile/openapi/lib/model/import_asset_dto.dart
index 9a6994a10..dd67e89fb 100644
--- a/mobile/openapi/lib/model/import_asset_dto.dart
+++ b/mobile/openapi/lib/model/import_asset_dto.dart
@@ -156,8 +156,8 @@ class ImportAssetDto {
         sidecarPath: mapValueOfType<String>(json, r'sidecarPath'),
         deviceAssetId: mapValueOfType<String>(json, r'deviceAssetId')!,
         deviceId: mapValueOfType<String>(json, r'deviceId')!,
-        fileCreatedAt: mapDateTime(json, r'fileCreatedAt', '')!,
-        fileModifiedAt: mapDateTime(json, r'fileModifiedAt', '')!,
+        fileCreatedAt: mapDateTime(json, r'fileCreatedAt', r'')!,
+        fileModifiedAt: mapDateTime(json, r'fileModifiedAt', r'')!,
         isFavorite: mapValueOfType<bool>(json, r'isFavorite')!,
         isArchived: mapValueOfType<bool>(json, r'isArchived'),
         isVisible: mapValueOfType<bool>(json, r'isVisible'),
diff --git a/mobile/openapi/lib/model/shared_link_create_dto.dart b/mobile/openapi/lib/model/shared_link_create_dto.dart
index cdd481c84..8c699424d 100644
--- a/mobile/openapi/lib/model/shared_link_create_dto.dart
+++ b/mobile/openapi/lib/model/shared_link_create_dto.dart
@@ -116,7 +116,7 @@ class SharedLinkCreateDto {
             : const [],
         albumId: mapValueOfType<String>(json, r'albumId'),
         description: mapValueOfType<String>(json, r'description'),
-        expiresAt: mapDateTime(json, r'expiresAt', ''),
+        expiresAt: mapDateTime(json, r'expiresAt', r''),
         allowUpload: mapValueOfType<bool>(json, r'allowUpload') ?? false,
         allowDownload: mapValueOfType<bool>(json, r'allowDownload') ?? true,
         showExif: mapValueOfType<bool>(json, r'showExif') ?? true,
diff --git a/mobile/openapi/lib/model/shared_link_edit_dto.dart b/mobile/openapi/lib/model/shared_link_edit_dto.dart
index a427b60ef..d5693058c 100644
--- a/mobile/openapi/lib/model/shared_link_edit_dto.dart
+++ b/mobile/openapi/lib/model/shared_link_edit_dto.dart
@@ -113,7 +113,7 @@ class SharedLinkEditDto {
 
       return SharedLinkEditDto(
         description: mapValueOfType<String>(json, r'description'),
-        expiresAt: mapDateTime(json, r'expiresAt', ''),
+        expiresAt: mapDateTime(json, r'expiresAt', r''),
         allowUpload: mapValueOfType<bool>(json, r'allowUpload'),
         allowDownload: mapValueOfType<bool>(json, r'allowDownload'),
         showExif: mapValueOfType<bool>(json, r'showExif'),
diff --git a/mobile/openapi/lib/model/shared_link_response_dto.dart b/mobile/openapi/lib/model/shared_link_response_dto.dart
index fad2b4383..9e40fd29a 100644
--- a/mobile/openapi/lib/model/shared_link_response_dto.dart
+++ b/mobile/openapi/lib/model/shared_link_response_dto.dart
@@ -133,8 +133,8 @@ class SharedLinkResponseDto {
         description: mapValueOfType<String>(json, r'description'),
         userId: mapValueOfType<String>(json, r'userId')!,
         key: mapValueOfType<String>(json, r'key')!,
-        createdAt: mapDateTime(json, r'createdAt', '')!,
-        expiresAt: mapDateTime(json, r'expiresAt', ''),
+        createdAt: mapDateTime(json, r'createdAt', r'')!,
+        expiresAt: mapDateTime(json, r'expiresAt', r''),
         assets: AssetResponseDto.listFromJson(json[r'assets']),
         album: AlbumResponseDto.fromJson(json[r'album']),
         allowUpload: mapValueOfType<bool>(json, r'allowUpload')!,
diff --git a/mobile/openapi/lib/model/user_response_dto.dart b/mobile/openapi/lib/model/user_response_dto.dart
index dcf7e928b..29fd788f5 100644
--- a/mobile/openapi/lib/model/user_response_dto.dart
+++ b/mobile/openapi/lib/model/user_response_dto.dart
@@ -137,9 +137,9 @@ class UserResponseDto {
         profileImagePath: mapValueOfType<String>(json, r'profileImagePath')!,
         shouldChangePassword: mapValueOfType<bool>(json, r'shouldChangePassword')!,
         isAdmin: mapValueOfType<bool>(json, r'isAdmin')!,
-        createdAt: mapDateTime(json, r'createdAt', '')!,
-        deletedAt: mapDateTime(json, r'deletedAt', ''),
-        updatedAt: mapDateTime(json, r'updatedAt', '')!,
+        createdAt: mapDateTime(json, r'createdAt', r'')!,
+        deletedAt: mapDateTime(json, r'deletedAt', r''),
+        updatedAt: mapDateTime(json, r'updatedAt', r'')!,
         oauthId: mapValueOfType<String>(json, r'oauthId')!,
       );
     }
diff --git a/server/openapi-generator/templates/mobile/serialization/native/native_class.mustache b/server/openapi-generator/templates/mobile/serialization/native/native_class.mustache
index c6a96f29e..c66528c3f 100644
--- a/server/openapi-generator/templates/mobile/serialization/native/native_class.mustache
+++ b/server/openapi-generator/templates/mobile/serialization/native/native_class.mustache
@@ -66,7 +66,7 @@ class {{{classname}}} {
     {{/isNullable}}
     {{#isDateTime}}
       {{#pattern}}
-      json[r'{{{baseName}}}'] = _dateEpochMarker == '{{{pattern}}}'
+      json[r'{{{baseName}}}'] = _isEpochMarker(r'{{{pattern}}}')
         ? this.{{{name}}}{{#isNullable}}!{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}!{{/defaultValue}}{{/required}}{{/isNullable}}.millisecondsSinceEpoch
         : this.{{{name}}}{{#isNullable}}!{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}!{{/defaultValue}}{{/required}}{{/isNullable}}.toUtc().toIso8601String();
       {{/pattern}}
@@ -76,7 +76,7 @@ class {{{classname}}} {
     {{/isDateTime}}
     {{#isDate}}
       {{#pattern}}
-      json[r'{{{baseName}}}'] = _dateEpochMarker == '{{{pattern}}}'
+      json[r'{{{baseName}}}'] = _isEpochMarker(r'{{{pattern}}}')
         ? this.{{{name}}}{{#isNullable}}!{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}!{{/defaultValue}}{{/required}}{{/isNullable}}.millisecondsSinceEpoch
         : _dateFormatter.format(this.{{{name}}}{{#isNullable}}!{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}!{{/defaultValue}}{{/required}}{{/isNullable}}.toUtc());
       {{/pattern}}
@@ -117,10 +117,10 @@ class {{{classname}}} {
       return {{{classname}}}(
   {{#vars}}
     {{#isDateTime}}
-        {{{name}}}: mapDateTime(json, r'{{{baseName}}}', '{{{pattern}}}'){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
+        {{{name}}}: mapDateTime(json, r'{{{baseName}}}', r'{{{pattern}}}'){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
     {{/isDateTime}}
     {{#isDate}}
-        {{{name}}}: mapDateTime(json, r'{{{baseName}}}', '{{{pattern}}}'){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
+        {{{name}}}: mapDateTime(json, r'{{{baseName}}}', r'{{{pattern}}}'){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
     {{/isDate}}
     {{^isDateTime}}
       {{^isDate}}
@@ -200,9 +200,9 @@ class {{{classname}}} {
             {{/isMap}}
             {{^isMap}}
               {{#isNumber}}
-        {{{name}}}: json[r'{{{baseName}}}'] == null
+        {{{name}}}: {{#isNullable}}json[r'{{{baseName}}}'] == null
             ? {{#defaultValue}}{{{.}}}{{/defaultValue}}{{^defaultValue}}null{{/defaultValue}}
-            : {{{datatypeWithEnum}}}.parse(json[r'{{{baseName}}}'].toString()),
+            : {{/isNullable}}{{{datatypeWithEnum}}}.parse('${json[r'{{{baseName}}}']}'),
               {{/isNumber}}
               {{^isNumber}}
                 {{^isEnum}}

From 6fa685d9d8fe0df27e22f22ca2fa23d0893dee11 Mon Sep 17 00:00:00 2001
From: Dhrumil Shah <ddshd@users.noreply.github.com>
Date: Thu, 29 Jun 2023 15:48:16 -0400
Subject: [PATCH 06/53] chore: add CLI tool to the server image (#2999)

* WIP: Added immich cli tool to `immich-server` image

* WIP: Added doc entry to show it is preinstalled

* WIP: Moved immich upload cli to `immich` and default to `immich-admin`

* WIP: undid previous commit

* WIP: Updated server docs with new `immich-admin` command
---
 docs/docs/administration/server-commands.md |   2 +-
 docs/docs/features/bulk-upload.md           |   5 +
 server/Dockerfile                           |   1 -
 server/bin/admin-cli.sh                     |   1 +
 server/bin/cli.sh                           |   2 +-
 server/package-lock.json                    | 258 +++++++++++++++++++-
 server/package.json                         |   6 +-
 7 files changed, 269 insertions(+), 6 deletions(-)
 create mode 100755 server/bin/admin-cli.sh

diff --git a/docs/docs/administration/server-commands.md b/docs/docs/administration/server-commands.md
index 872f12e65..13167b50c 100644
--- a/docs/docs/administration/server-commands.md
+++ b/docs/docs/administration/server-commands.md
@@ -1,6 +1,6 @@
 # Server Commands
 
-The `immich-server` docker image comes preinstalled with an administrative CLI (`immich`) that supports the following commands:
+The `immich-server` docker image comes preinstalled with an administrative CLI (`immich-admin`) that supports the following commands:
 
 | Command                  | Description                           |
 | ------------------------ | ------------------------------------- |
diff --git a/docs/docs/features/bulk-upload.md b/docs/docs/features/bulk-upload.md
index fb7de1496..03544578f 100644
--- a/docs/docs/features/bulk-upload.md
+++ b/docs/docs/features/bulk-upload.md
@@ -15,6 +15,11 @@ You can use the CLI to upload an existing gallery to the Immich server
 npm i -g immich
 ```
 
+Pre-installed on the `immich-server` container and can be easily accessed through
+```
+immich
+```
+
 ## Quick Start
 
 Specify user's credential, Immich's server address and port and the directory you would like to upload videos/photos from.
diff --git a/server/Dockerfile b/server/Dockerfile
index 87511fde2..642a0992e 100644
--- a/server/Dockerfile
+++ b/server/Dockerfile
@@ -10,7 +10,6 @@ RUN npm ci
 
 COPY . .
 
-
 FROM builder as prod
 
 RUN npm run build
diff --git a/server/bin/admin-cli.sh b/server/bin/admin-cli.sh
new file mode 100755
index 000000000..90db9957e
--- /dev/null
+++ b/server/bin/admin-cli.sh
@@ -0,0 +1 @@
+node ./dist/main cli "$@"
diff --git a/server/bin/cli.sh b/server/bin/cli.sh
index 90db9957e..9f3783805 100755
--- a/server/bin/cli.sh
+++ b/server/bin/cli.sh
@@ -1 +1 @@
-node ./dist/main cli "$@"
+node ./node_modules/immich/bin/index "$@"
diff --git a/server/package-lock.json b/server/package-lock.json
index 8196e8e47..bb67988fd 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -34,6 +34,7 @@
         "fluent-ffmpeg": "^2.1.2",
         "handlebars": "^4.7.7",
         "i18n-iso-countries": "^7.5.0",
+        "immich": "^0.39.0",
         "ioredis": "^5.3.1",
         "joi": "^17.5.0",
         "local-reverse-geocoder": "0.12.5",
@@ -54,7 +55,8 @@
         "ua-parser-js": "^1.0.35"
       },
       "bin": {
-        "immich": "bin/cli.sh"
+        "immich": "./bin/cli.sh",
+        "immich-admin": "./bin/admin-cli.sh"
       },
       "devDependencies": {
         "@nestjs/cli": "^9.1.8",
@@ -4522,6 +4524,17 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
       "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="
     },
+    "node_modules/cli-progress": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz",
+      "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==",
+      "dependencies": {
+        "string-width": "^4.2.3"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cli-spinners": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.0.tgz",
@@ -6081,6 +6094,19 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fdir": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-5.3.0.tgz",
+      "integrity": "sha512-BtE53+jaa7nNHT+gPdfU6cFAXOJUWDs2b5GFox8dtl6zLXmfNf/N6im69b9nqNNwDyl27mpIWX8qR7AafWzSdQ==",
+      "peerDependencies": {
+        "picomatch": "2.x"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -6818,6 +6844,110 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immich": {
+      "version": "0.39.0",
+      "resolved": "https://registry.npmjs.org/immich/-/immich-0.39.0.tgz",
+      "integrity": "sha512-FoIj/ZV7QrjuBC7F6o6YZ8jqLZDJCZwrr80CxkzERPI7qX8YrSjR1GM4ocA/9oT7p7iA+dIxT//BF5MKNPkn4g==",
+      "dependencies": {
+        "axios": "^0.26.0",
+        "chalk": "^2.4.1",
+        "cli-progress": "^3.10.0",
+        "commander": "^9.0.0",
+        "fdir": "^5.2.0",
+        "form-data": "^4.0.0",
+        "mime-types": "^2.1.34",
+        "p-limit": "3.1.0",
+        "systeminformation": "^5.11.6"
+      },
+      "bin": {
+        "immich": "bin/index.js"
+      }
+    },
+    "node_modules/immich/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/immich/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/immich/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/immich/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/immich/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
+    "node_modules/immich/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/immich/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/immich/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/immich/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -10618,6 +10748,31 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/systeminformation": {
+      "version": "5.18.6",
+      "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.18.6.tgz",
+      "integrity": "sha512-pLXv6kjJZ1xUcVs9SrCqbQ9y0x1rgRWxBUc8/KxpOp9IRxFGFfzVK5efsxBn/KdYog4C9rPcKk+kHNIL2SB/8Q==",
+      "os": [
+        "darwin",
+        "linux",
+        "win32",
+        "freebsd",
+        "openbsd",
+        "netbsd",
+        "sunos",
+        "android"
+      ],
+      "bin": {
+        "systeminformation": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "Buy me a coffee",
+        "url": "https://www.buymeacoffee.com/systeminfo"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -15457,6 +15612,14 @@
         }
       }
     },
+    "cli-progress": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz",
+      "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==",
+      "requires": {
+        "string-width": "^4.2.3"
+      }
+    },
     "cli-spinners": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.0.tgz",
@@ -16656,6 +16819,12 @@
         "bser": "2.1.1"
       }
     },
+    "fdir": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-5.3.0.tgz",
+      "integrity": "sha512-BtE53+jaa7nNHT+gPdfU6cFAXOJUWDs2b5GFox8dtl6zLXmfNf/N6im69b9nqNNwDyl27mpIWX8qR7AafWzSdQ==",
+      "requires": {}
+    },
     "figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -17192,6 +17361,88 @@
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true
     },
+    "immich": {
+      "version": "0.39.0",
+      "resolved": "https://registry.npmjs.org/immich/-/immich-0.39.0.tgz",
+      "integrity": "sha512-FoIj/ZV7QrjuBC7F6o6YZ8jqLZDJCZwrr80CxkzERPI7qX8YrSjR1GM4ocA/9oT7p7iA+dIxT//BF5MKNPkn4g==",
+      "requires": {
+        "axios": "^0.26.0",
+        "chalk": "^2.4.1",
+        "cli-progress": "^3.10.0",
+        "commander": "^9.0.0",
+        "fdir": "^5.2.0",
+        "form-data": "^4.0.0",
+        "mime-types": "^2.1.34",
+        "p-limit": "3.1.0",
+        "systeminformation": "^5.11.6"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+        },
+        "commander": {
+          "version": "9.5.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+          "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+        },
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -20055,6 +20306,11 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "systeminformation": {
+      "version": "5.18.6",
+      "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.18.6.tgz",
+      "integrity": "sha512-pLXv6kjJZ1xUcVs9SrCqbQ9y0x1rgRWxBUc8/KxpOp9IRxFGFfzVK5efsxBn/KdYog4C9rPcKk+kHNIL2SB/8Q=="
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/server/package.json b/server/package.json
index efc976720..b1f12a2f9 100644
--- a/server/package.json
+++ b/server/package.json
@@ -6,7 +6,8 @@
   "private": true,
   "license": "UNLICENSED",
   "bin": {
-    "immich": "./bin/cli.sh"
+    "immich": "./bin/cli.sh",
+    "immich-admin": "./bin/admin-cli.sh"
   },
   "scripts": {
     "build": "nest build",
@@ -80,7 +81,8 @@
     "thumbhash": "^0.1.1",
     "typeorm": "^0.3.11",
     "typesense": "^1.5.3",
-    "ua-parser-js": "^1.0.35"
+    "ua-parser-js": "^1.0.35",
+    "immich": "^0.39.0"
   },
   "devDependencies": {
     "@nestjs/cli": "^9.1.8",

From ca1b9bf7b373991f294543b7445e6ffef8bbb816 Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Thu, 29 Jun 2023 14:49:23 -0500
Subject: [PATCH 07/53] fix(doc): format

---
 docs/docs/features/bulk-upload.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/docs/features/bulk-upload.md b/docs/docs/features/bulk-upload.md
index 03544578f..eaba3df6a 100644
--- a/docs/docs/features/bulk-upload.md
+++ b/docs/docs/features/bulk-upload.md
@@ -16,6 +16,7 @@ npm i -g immich
 ```
 
 Pre-installed on the `immich-server` container and can be easily accessed through
+
 ```
 immich
 ```

From 621fa5ba549ed24893d36be9ae708cfee5e61e4d Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Thu, 29 Jun 2023 15:23:55 -0500
Subject: [PATCH 08/53] update readme

---
 README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index dcd1c17ae..c96385b6b 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,7 @@ Spec: Free-tier Oracle VM - Amsterdam - 2.4Ghz quad-core ARM64 CPU, 24GB RAM
 | Multi-user support                           | Yes    | Yes |
 | Album and Shared albums                      | Yes    | Yes |
 | Scrubbable/draggable scrollbar               | Yes    | Yes |
-| Support RAW (HEIC, HEIF, DNG, Apple ProRaw)  | Yes    | Yes |
+| Support raw formats                          | Yes    | Yes |
 | Metadata view (EXIF, map)                    | Yes    | Yes |
 | Search by metadata, objects, faces, and CLIP | Yes    | Yes |
 | Administrative functions (user management)   | No     | Yes |
@@ -84,8 +84,10 @@ Spec: Free-tier Oracle VM - Amsterdam - 2.4Ghz quad-core ARM64 CPU, 24GB RAM
 | Archive and Favorites                        | Yes    | Yes |
 | Global Map                                   | No     | Yes |
 | Partner Sharing                              | Yes    | Yes |
-| Facial recognition and clustering            | No     | Yes |
+| Facial recognition and clustering            | Yes    | Yes |
+| Memories (x years ago)                       | Yes    | Yes |
 | Offline support                              | Yes    | No  |
+| Read-only gallery                            | Yes    | Yes |
 
 # Support the project
 

From b7ae3be3944edc2e66db13a1c8ec051703c41b42 Mon Sep 17 00:00:00 2001
From: Fynn Petersen-Frey <10599762+fyfrey@users.noreply.github.com>
Date: Thu, 29 Jun 2023 23:11:56 +0200
Subject: [PATCH 09/53] fix(mobile): rework album detail page header (#3035)

---
 .../modules/album/ui/album_viewer_appbar.dart | 30 +++++++++++
 .../album/views/album_viewer_page.dart        | 52 +++++--------------
 ...ch_sliver_persistent_app_bar_delegate.dart | 38 --------------
 3 files changed, 43 insertions(+), 77 deletions(-)
 delete mode 100644 mobile/lib/shared/ui/immich_sliver_persistent_app_bar_delegate.dart

diff --git a/mobile/lib/modules/album/ui/album_viewer_appbar.dart b/mobile/lib/modules/album/ui/album_viewer_appbar.dart
index 91964b5cd..f74118b3d 100644
--- a/mobile/lib/modules/album/ui/album_viewer_appbar.dart
+++ b/mobile/lib/modules/album/ui/album_viewer_appbar.dart
@@ -21,6 +21,8 @@ class AlbumViewerAppbar extends HookConsumerWidget
     required this.selected,
     required this.selectionDisabled,
     required this.titleFocusNode,
+    this.onAddPhotos,
+    this.onAddUsers,
   }) : super(key: key);
 
   final Album album;
@@ -28,6 +30,8 @@ class AlbumViewerAppbar extends HookConsumerWidget
   final Set<Asset> selected;
   final void Function() selectionDisabled;
   final FocusNode titleFocusNode;
+  final Function(Album album)? onAddPhotos;
+  final Function(Album album)? onAddUsers;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -157,6 +161,32 @@ class AlbumViewerAppbar extends HookConsumerWidget
               mainAxisSize: MainAxisSize.min,
               children: [
                 buildBottomSheetActionButton(),
+                if (selected.isEmpty && onAddPhotos != null)
+                  ListTile(
+                    leading: const Icon(Icons.add_photo_alternate_outlined),
+                    onTap: () {
+                      Navigator.pop(context);
+                      onAddPhotos!(album);
+                    },
+                    title: const Text(
+                      "share_add_photos",
+                      style: TextStyle(fontWeight: FontWeight.bold),
+                    ).tr(),
+                  ),
+                if (selected.isEmpty &&
+                    onAddPhotos != null &&
+                    userId == album.ownerId)
+                  ListTile(
+                    leading: const Icon(Icons.person_add_alt_rounded),
+                    onTap: () {
+                      Navigator.pop(context);
+                      onAddUsers!(album);
+                    },
+                    title: const Text(
+                      "album_viewer_page_share_add_users",
+                      style: TextStyle(fontWeight: FontWeight.bold),
+                    ).tr(),
+                  ),
               ],
             ),
           );
diff --git a/mobile/lib/modules/album/views/album_viewer_page.dart b/mobile/lib/modules/album/views/album_viewer_page.dart
index b1adeb821..9363c7f9b 100644
--- a/mobile/lib/modules/album/views/album_viewer_page.dart
+++ b/mobile/lib/modules/album/views/album_viewer_page.dart
@@ -18,7 +18,6 @@ import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/models/album.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
-import 'package:immich_mobile/shared/ui/immich_sliver_persistent_app_bar_delegate.dart';
 import 'package:immich_mobile/shared/views/immich_loading_overlay.dart';
 
 class AlbumViewerPage extends HookConsumerWidget {
@@ -33,7 +32,6 @@ class AlbumViewerPage extends HookConsumerWidget {
     final userId = ref.watch(authenticationProvider).userId;
     final selection = useState<Set<Asset>>({});
     final multiSelectEnabled = useState(false);
-    bool? isTop;
 
     Future<bool> onWillPop() async {
       if (multiSelectEnabled.value) {
@@ -219,8 +217,6 @@ class AlbumViewerPage extends HookConsumerWidget {
       );
     }
 
-    final scroll = ScrollController();
-
     return Scaffold(
       appBar: album.when(
         data: (data) => AlbumViewerAppbar(
@@ -229,6 +225,8 @@ class AlbumViewerPage extends HookConsumerWidget {
           userId: userId,
           selected: selection.value,
           selectionDisabled: disableSelection,
+          onAddPhotos: onAddPhotosPressed,
+          onAddUsers: onAddUsersPressed,
         ),
         error: (error, stackTrace) => AppBar(title: const Text("Error")),
         loading: () => AppBar(),
@@ -240,41 +238,17 @@ class AlbumViewerPage extends HookConsumerWidget {
             onTap: () {
               titleFocusNode.unfocus();
             },
-            child: NestedScrollView(
-              controller: scroll,
-              floatHeaderSlivers: true,
-              headerSliverBuilder: (context, innerBoxIsScrolled) => [
-                SliverToBoxAdapter(child: buildHeader(data)),
-                SliverPersistentHeader(
-                  pinned: true,
-                  delegate: ImmichSliverPersistentAppBarDelegate(
-                    minHeight: 50,
-                    maxHeight: 50,
-                    child: Container(
-                      color: Theme.of(context).scaffoldBackgroundColor,
-                      child: buildControlButton(data),
-                    ),
-                  ),
-                )
-              ],
-              body: ImmichAssetGrid(
-                renderList: data.renderList,
-                listener: selectionListener,
-                selectionActive: multiSelectEnabled.value,
-                showMultiSelectIndicator: false,
-                visibleItemsListener: (start, end) {
-                  final top = start.index == 0 && start.itemLeadingEdge == 0.0;
-                  if (top != isTop) {
-                    isTop = top;
-                    scroll.animateTo(
-                      top
-                          ? scroll.position.minScrollExtent
-                          : scroll.position.maxScrollExtent,
-                      duration: const Duration(milliseconds: 500),
-                      curve: top ? Curves.easeOut : Curves.easeIn,
-                    );
-                  }
-                },
+            child: ImmichAssetGrid(
+              renderList: data.renderList,
+              listener: selectionListener,
+              selectionActive: multiSelectEnabled.value,
+              showMultiSelectIndicator: false,
+              topWidget: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  buildHeader(data),
+                  if (data.isRemote) buildControlButton(data),
+                ],
               ),
             ),
           ),
diff --git a/mobile/lib/shared/ui/immich_sliver_persistent_app_bar_delegate.dart b/mobile/lib/shared/ui/immich_sliver_persistent_app_bar_delegate.dart
deleted file mode 100644
index d9c43cd35..000000000
--- a/mobile/lib/shared/ui/immich_sliver_persistent_app_bar_delegate.dart
+++ /dev/null
@@ -1,38 +0,0 @@
-import 'dart:math';
-
-import 'package:flutter/material.dart';
-
-class ImmichSliverPersistentAppBarDelegate
-    extends SliverPersistentHeaderDelegate {
-  final double minHeight;
-  final double maxHeight;
-  final Widget child;
-
-  ImmichSliverPersistentAppBarDelegate({
-    required this.minHeight,
-    required this.maxHeight,
-    required this.child,
-  });
-
-  @override
-  double get minExtent => minHeight;
-
-  @override
-  double get maxExtent => max(maxHeight, minHeight);
-
-  @override
-  Widget build(
-    BuildContext context,
-    double shrinkOffset,
-    bool overlapsContent,
-  ) {
-    return SizedBox.expand(child: child);
-  }
-
-  @override
-  bool shouldRebuild(ImmichSliverPersistentAppBarDelegate oldDelegate) {
-    return maxHeight != oldDelegate.maxHeight ||
-        minHeight != oldDelegate.minHeight ||
-        child != oldDelegate.child;
-  }
-}

From ca98d73d868148f73880d457220ac7911f890869 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 29 Jun 2023 16:28:18 -0500
Subject: [PATCH 10/53] chore(mobile): update flutter to 3.10.5 (#3036)

---
 .github/workflows/build-mobile.yml    | 2 +-
 .github/workflows/static_analysis.yml | 2 +-
 .github/workflows/test.yml            | 2 +-
 mobile/.fvm/fvm_config.json           | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/build-mobile.yml b/.github/workflows/build-mobile.yml
index b530c1e09..31d87a285 100644
--- a/.github/workflows/build-mobile.yml
+++ b/.github/workflows/build-mobile.yml
@@ -45,7 +45,7 @@ jobs:
         uses: subosito/flutter-action@v2
         with:
           channel: "stable"
-          flutter-version: "3.10.0"
+          flutter-version: "3.10.5"
           cache: true
 
       - name: Create the Keystore
diff --git a/.github/workflows/static_analysis.yml b/.github/workflows/static_analysis.yml
index fb2ffff41..62a606939 100644
--- a/.github/workflows/static_analysis.yml
+++ b/.github/workflows/static_analysis.yml
@@ -23,7 +23,7 @@ jobs:
         uses: subosito/flutter-action@v2
         with:
           channel: "stable"
-          flutter-version: "3.10.0"
+          flutter-version: "3.10.5"
 
       - name: Install dependencies
         run: dart pub get
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 5672316cf..5bb70230e 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -116,7 +116,7 @@ jobs:
         uses: subosito/flutter-action@v2
         with:
           channel: "stable"
-          flutter-version: "3.10.0"
+          flutter-version: "3.10.5"
       - name: Run tests
         working-directory: ./mobile
         run: flutter test -j 1
diff --git a/mobile/.fvm/fvm_config.json b/mobile/.fvm/fvm_config.json
index 2d144d807..0870e7648 100644
--- a/mobile/.fvm/fvm_config.json
+++ b/mobile/.fvm/fvm_config.json
@@ -1,4 +1,4 @@
 {
-  "flutterSdkVersion": "3.10.0",
+  "flutterSdkVersion": "3.10.5",
   "flavors": {}
 }

From b05f3fd266cb5b5282bc5e7dc6a64a9bb873ac83 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 29 Jun 2023 17:05:12 -0500
Subject: [PATCH 11/53] fix(mobile): avatar without last name (#3038)

---
 mobile/lib/shared/ui/user_avatar.dart | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/mobile/lib/shared/ui/user_avatar.dart b/mobile/lib/shared/ui/user_avatar.dart
index 23272870e..c736e8f90 100644
--- a/mobile/lib/shared/ui/user_avatar.dart
+++ b/mobile/lib/shared/ui/user_avatar.dart
@@ -6,6 +6,8 @@ import 'package:immich_mobile/shared/models/user.dart';
 Widget userAvatar(BuildContext context, User u, {double? radius}) {
   final url =
       "${Store.get(StoreKey.serverEndpoint)}/user/profile-image/${u.id}";
+  final firstNameFirstLetter = u.firstName.isNotEmpty ? u.firstName[0] : "";
+  final lastNameFirstLetter = u.lastName.isNotEmpty ? u.lastName[0] : "";
   return CircleAvatar(
     radius: radius,
     backgroundColor: Theme.of(context).primaryColor.withAlpha(50),
@@ -16,6 +18,6 @@ Widget userAvatar(BuildContext context, User u, {double? radius}) {
     ),
     // silence errors if user has no profile image, use initials as fallback
     onForegroundImageError: (exception, stackTrace) {},
-    child: Text((u.firstName[0] + u.lastName[0]).toUpperCase()),
+    child: Text((firstNameFirstLetter + lastNameFirstLetter).toUpperCase()),
   );
 }

From 6c8c16c85fb4f6a7f55d4ab0c314de31c265f03b Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Thu, 29 Jun 2023 21:48:57 -0500
Subject: [PATCH 12/53] chore: update release note notes

---
 misc/release/notes.tmpl | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/misc/release/notes.tmpl b/misc/release/notes.tmpl
index 793f2a4a5..8310a7388 100644
--- a/misc/release/notes.tmpl
+++ b/misc/release/notes.tmpl
@@ -7,15 +7,28 @@ As always, please consider supporting the project.
 🎉 Cheer! 🎉
 
 
+## Support
+
+- - - -
+
+And as always, bugs are fixed, and many other improvements also come with this release.
+
+Please consider supporting the project.
+
 ## Support
 
 <p align="center">
-<img src="https://media.giphy.com/media/LStqgGESXW8XnuCv5y/giphy.gif" width="250" title="Loading ~4000 images/videos"> 
+<img src="https://media.giphy.com/media/LStqgGESXW8XnuCv5y/giphy.gif" width="250" title="SUPPORT THE PROJECT!"> 
 </p>
 
 
-If you find the project helpful and it helps you in some ways, you can support the project [one time](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502) or [monthly](https://github.com/sponsors/alextran1502) from GitHub Sponsors
+If you find the project helpful, you can support Immich via the following channels.
+
+- Monthly donation via [GitHub Sponsors](https://github.com/sponsors/alextran1502)
+- One-time donation via [GitHub Sponsors](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502)
+- [Librepay](https://liberapay.com/alex.tran1502/)
+- [buymeacoffee](https://www.buymeacoffee.com/altran1502)
+- Bitcoin: 1FvEp6P6NM8EZEkpGUFAN2LqJ1gxusNxZX
+
 
 It is a great way to let me know that you want me to continue developing and working on this project for years to come.
-
-## What's Changed

From df9c05bef36bd30c6f183a9042332b318eea4bd3 Mon Sep 17 00:00:00 2001
From: Alex The Bot <alex.tran1502@gmail.com>
Date: Fri, 30 Jun 2023 03:01:48 +0000
Subject: [PATCH 13/53] Version v1.65.0

---
 machine-learning/pyproject.toml       | 2 +-
 mobile/android/fastlane/Fastfile      | 4 ++--
 mobile/ios/fastlane/Fastfile          | 2 +-
 mobile/openapi/README.md              | 2 +-
 mobile/pubspec.yaml                   | 2 +-
 server/immich-openapi-specs.json      | 2 +-
 server/package-lock.json              | 4 ++--
 server/package.json                   | 2 +-
 web/src/api/open-api/api.ts           | 2 +-
 web/src/api/open-api/base.ts          | 2 +-
 web/src/api/open-api/common.ts        | 2 +-
 web/src/api/open-api/configuration.ts | 2 +-
 web/src/api/open-api/index.ts         | 2 +-
 13 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/machine-learning/pyproject.toml b/machine-learning/pyproject.toml
index 58f3c8ef8..c7df97a64 100644
--- a/machine-learning/pyproject.toml
+++ b/machine-learning/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "machine-learning"
-version = "1.64.0"
+version = "1.65.0"
 description = ""
 authors = ["Hau Tran <alex.tran1502@gmail.com>"]
 readme = "README.md"
diff --git a/mobile/android/fastlane/Fastfile b/mobile/android/fastlane/Fastfile
index a35ddd5f8..f14525339 100644
--- a/mobile/android/fastlane/Fastfile
+++ b/mobile/android/fastlane/Fastfile
@@ -35,8 +35,8 @@ platform :android do
       task: 'bundle', 
       build_type: 'Release',
       properties: {
-        "android.injected.version.code" => 87,
-        "android.injected.version.name" => "1.64.0",
+        "android.injected.version.code" => 88,
+        "android.injected.version.name" => "1.65.0",
       }
     )
     upload_to_play_store(skip_upload_apk: true, skip_upload_images: true, skip_upload_screenshots: true, aab: '../build/app/outputs/bundle/release/app-release.aab')
diff --git a/mobile/ios/fastlane/Fastfile b/mobile/ios/fastlane/Fastfile
index 78d59fe41..815a2fef2 100644
--- a/mobile/ios/fastlane/Fastfile
+++ b/mobile/ios/fastlane/Fastfile
@@ -19,7 +19,7 @@ platform :ios do
   desc "iOS Beta"
   lane :beta do
     increment_version_number(
-      version_number: "1.64.0"
+      version_number: "1.65.0"
     )
     increment_build_number(
       build_number: latest_testflight_build_number + 1,
diff --git a/mobile/openapi/README.md b/mobile/openapi/README.md
index 9a7cc564a..91bad1615 100644
--- a/mobile/openapi/README.md
+++ b/mobile/openapi/README.md
@@ -3,7 +3,7 @@ Immich API
 
 This Dart package is automatically generated by the [OpenAPI Generator](https://openapi-generator.tech) project:
 
-- API version: 1.64.0
+- API version: 1.65.0
 - Build package: org.openapitools.codegen.languages.DartClientCodegen
 
 ## Requirements
diff --git a/mobile/pubspec.yaml b/mobile/pubspec.yaml
index 30c06a624..bcceda3de 100644
--- a/mobile/pubspec.yaml
+++ b/mobile/pubspec.yaml
@@ -2,7 +2,7 @@ name: immich_mobile
 description: Immich - selfhosted backup media file on mobile phone
 
 publish_to: "none"
-version: 1.64.0+87
+version: 1.65.0+88
 isar_version: &isar_version 3.1.0+1
 
 environment:
diff --git a/server/immich-openapi-specs.json b/server/immich-openapi-specs.json
index 2bb33fa94..07b8ad0fc 100644
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@@ -4374,7 +4374,7 @@
   "info": {
     "title": "Immich",
     "description": "Immich API",
-    "version": "1.64.0",
+    "version": "1.65.0",
     "contact": {}
   },
   "tags": [],
diff --git a/server/package-lock.json b/server/package-lock.json
index bb67988fd..6a2ecaaf2 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "immich",
-  "version": "1.64.0",
+  "version": "1.65.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "immich",
-      "version": "1.64.0",
+      "version": "1.65.0",
       "license": "UNLICENSED",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
diff --git a/server/package.json b/server/package.json
index b1f12a2f9..4b6d1d821 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "immich",
-  "version": "1.64.0",
+  "version": "1.65.0",
   "description": "",
   "author": "",
   "private": true,
diff --git a/web/src/api/open-api/api.ts b/web/src/api/open-api/api.ts
index 079c3fd0d..e3b035b69 100644
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.64.0
+ * The version of the OpenAPI document: 1.65.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/base.ts b/web/src/api/open-api/base.ts
index b33e3b573..724f10503 100644
--- a/web/src/api/open-api/base.ts
+++ b/web/src/api/open-api/base.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.64.0
+ * The version of the OpenAPI document: 1.65.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/common.ts b/web/src/api/open-api/common.ts
index 0d0651499..e9e8c41f5 100644
--- a/web/src/api/open-api/common.ts
+++ b/web/src/api/open-api/common.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.64.0
+ * The version of the OpenAPI document: 1.65.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/configuration.ts b/web/src/api/open-api/configuration.ts
index 06041ac91..9dad93679 100644
--- a/web/src/api/open-api/configuration.ts
+++ b/web/src/api/open-api/configuration.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.64.0
+ * The version of the OpenAPI document: 1.65.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/index.ts b/web/src/api/open-api/index.ts
index 670109ee7..7183d73c6 100644
--- a/web/src/api/open-api/index.ts
+++ b/web/src/api/open-api/index.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.64.0
+ * The version of the OpenAPI document: 1.65.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

From ad343b7b32f2fdd36186b7e54c85e9a2d8a39b9f Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Fri, 30 Jun 2023 12:24:28 -0400
Subject: [PATCH 14/53] refactor(server): download assets (#3032)

* refactor: download assets

* chore: open api

* chore: finish tests, make size configurable

* chore: defualt to 4GiB

* chore: open api

* fix: optional archive size

* fix: bugs

* chore: cleanup
---
 mobile/openapi/.openapi-generator/FILES       |   9 +-
 mobile/openapi/README.md                      |  10 +-
 mobile/openapi/doc/AlbumApi.md                |  62 --
 mobile/openapi/doc/AssetApi.md                | 244 ++++----
 ...loadFilesDto.md => DownloadArchiveInfo.md} |   3 +-
 mobile/openapi/doc/DownloadResponseDto.md     |  16 +
 mobile/openapi/lib/api.dart                   |   3 +-
 mobile/openapi/lib/api/album_api.dart         |  70 ---
 mobile/openapi/lib/api/asset_api.dart         | 263 +++++----
 mobile/openapi/lib/api_client.dart            |   6 +-
 ...es_dto.dart => download_archive_info.dart} |  44 +-
 .../lib/model/download_response_dto.dart      | 106 ++++
 mobile/openapi/test/album_api_test.dart       |   5 -
 mobile/openapi/test/asset_api_test.dart       |  22 +-
 ...t.dart => download_archive_info_test.dart} |  11 +-
 .../test/download_response_dto_test.dart      |  32 +
 server/immich-openapi-specs.json              | 195 +++----
 server/src/domain/access/access.core.ts       |  11 +
 server/src/domain/asset/asset.repository.ts   |   2 +
 server/src/domain/asset/asset.service.spec.ts | 233 +++++++-
 server/src/domain/asset/asset.service.ts      | 117 +++-
 server/src/domain/asset/dto/download.dto.ts   |  31 +
 server/src/domain/asset/dto/index.ts          |   1 +
 .../src/domain/storage/storage.repository.ts  |  16 +-
 .../immich/api-v1/album/album.controller.ts   |  21 +-
 .../src/immich/api-v1/album/album.module.ts   |   3 +-
 .../immich/api-v1/album/album.service.spec.ts |   8 +-
 .../src/immich/api-v1/album/album.service.ts  |  30 +-
 .../immich/api-v1/asset/asset.controller.ts   |  42 +-
 .../src/immich/api-v1/asset/asset.module.ts   |   7 +-
 .../immich/api-v1/asset/asset.service.spec.ts |  37 +-
 .../src/immich/api-v1/asset/asset.service.ts  |  49 --
 .../api-v1/asset/dto/download-files.dto.ts    |  12 -
 .../api-v1/asset/dto/download-library.dto.ts  |  14 -
 server/src/immich/app.utils.ts                |  20 +-
 .../immich/controllers/asset.controller.ts    |  40 +-
 .../modules/download/download.module.ts       |   8 -
 .../modules/download/download.service.ts      |  63 --
 .../infra/repositories/access.repository.ts   |   4 +-
 .../infra/repositories/asset.repository.ts    |  26 +
 .../infra/repositories/filesystem.provider.ts |  19 +-
 server/test/fixtures.ts                       |  24 +-
 .../repositories/asset.repository.mock.ts     |   2 +
 .../repositories/storage.repository.mock.ts   |   1 +
 web/src/api/open-api/api.ts                   | 551 ++++++++----------
 .../components/album-page/album-viewer.svelte |  82 +--
 .../asset-viewer/asset-viewer.svelte          |  74 +--
 .../actions/download-action.svelte            |  18 +-
 .../individual-shared-viewer.svelte           |  11 +-
 web/src/lib/stores/download.ts                |  15 +
 web/src/lib/utils/asset-utils.ts              | 149 +++--
 web/src/lib/utils/handle-error.ts             |  14 +-
 .../(user)/people/[personId]/+page.svelte     |   2 +-
 53 files changed, 1455 insertions(+), 1403 deletions(-)
 rename mobile/openapi/doc/{DownloadFilesDto.md => DownloadArchiveInfo.md} (86%)
 create mode 100644 mobile/openapi/doc/DownloadResponseDto.md
 rename mobile/openapi/lib/model/{download_files_dto.dart => download_archive_info.dart} (59%)
 create mode 100644 mobile/openapi/lib/model/download_response_dto.dart
 rename mobile/openapi/test/{download_files_dto_test.dart => download_archive_info_test.dart} (70%)
 create mode 100644 mobile/openapi/test/download_response_dto_test.dart
 create mode 100644 server/src/domain/asset/dto/download.dto.ts
 delete mode 100644 server/src/immich/api-v1/asset/dto/download-files.dto.ts
 delete mode 100644 server/src/immich/api-v1/asset/dto/download-library.dto.ts
 delete mode 100644 server/src/immich/modules/download/download.module.ts
 delete mode 100644 server/src/immich/modules/download/download.service.ts

diff --git a/mobile/openapi/.openapi-generator/FILES b/mobile/openapi/.openapi-generator/FILES
index e351e3c65..26eeb1c6b 100644
--- a/mobile/openapi/.openapi-generator/FILES
+++ b/mobile/openapi/.openapi-generator/FILES
@@ -45,7 +45,8 @@ doc/CuratedObjectsResponseDto.md
 doc/DeleteAssetDto.md
 doc/DeleteAssetResponseDto.md
 doc/DeleteAssetStatus.md
-doc/DownloadFilesDto.md
+doc/DownloadArchiveInfo.md
+doc/DownloadResponseDto.md
 doc/ExifResponseDto.md
 doc/GetAssetByTimeBucketDto.md
 doc/GetAssetCountByTimeBucketDto.md
@@ -178,7 +179,8 @@ lib/model/curated_objects_response_dto.dart
 lib/model/delete_asset_dto.dart
 lib/model/delete_asset_response_dto.dart
 lib/model/delete_asset_status.dart
-lib/model/download_files_dto.dart
+lib/model/download_archive_info.dart
+lib/model/download_response_dto.dart
 lib/model/exif_response_dto.dart
 lib/model/get_asset_by_time_bucket_dto.dart
 lib/model/get_asset_count_by_time_bucket_dto.dart
@@ -282,7 +284,8 @@ test/curated_objects_response_dto_test.dart
 test/delete_asset_dto_test.dart
 test/delete_asset_response_dto_test.dart
 test/delete_asset_status_test.dart
-test/download_files_dto_test.dart
+test/download_archive_info_test.dart
+test/download_response_dto_test.dart
 test/exif_response_dto_test.dart
 test/get_asset_by_time_bucket_dto_test.dart
 test/get_asset_count_by_time_bucket_dto_test.dart
diff --git a/mobile/openapi/README.md b/mobile/openapi/README.md
index 91bad1615..606e4671f 100644
--- a/mobile/openapi/README.md
+++ b/mobile/openapi/README.md
@@ -81,7 +81,6 @@ Class | Method | HTTP request | Description
 *AlbumApi* | [**addUsersToAlbum**](doc//AlbumApi.md#adduserstoalbum) | **PUT** /album/{id}/users | 
 *AlbumApi* | [**createAlbum**](doc//AlbumApi.md#createalbum) | **POST** /album | 
 *AlbumApi* | [**deleteAlbum**](doc//AlbumApi.md#deletealbum) | **DELETE** /album/{id} | 
-*AlbumApi* | [**downloadArchive**](doc//AlbumApi.md#downloadarchive) | **GET** /album/{id}/download | 
 *AlbumApi* | [**getAlbumCount**](doc//AlbumApi.md#getalbumcount) | **GET** /album/count | 
 *AlbumApi* | [**getAlbumInfo**](doc//AlbumApi.md#getalbuminfo) | **GET** /album/{id} | 
 *AlbumApi* | [**getAllAlbums**](doc//AlbumApi.md#getallalbums) | **GET** /album | 
@@ -92,9 +91,8 @@ Class | Method | HTTP request | Description
 *AssetApi* | [**checkDuplicateAsset**](doc//AssetApi.md#checkduplicateasset) | **POST** /asset/check | 
 *AssetApi* | [**checkExistingAssets**](doc//AssetApi.md#checkexistingassets) | **POST** /asset/exist | 
 *AssetApi* | [**deleteAsset**](doc//AssetApi.md#deleteasset) | **DELETE** /asset | 
-*AssetApi* | [**downloadFile**](doc//AssetApi.md#downloadfile) | **GET** /asset/download/{id} | 
-*AssetApi* | [**downloadFiles**](doc//AssetApi.md#downloadfiles) | **POST** /asset/download-files | 
-*AssetApi* | [**downloadLibrary**](doc//AssetApi.md#downloadlibrary) | **GET** /asset/download-library | 
+*AssetApi* | [**downloadArchive**](doc//AssetApi.md#downloadarchive) | **POST** /asset/download | 
+*AssetApi* | [**downloadFile**](doc//AssetApi.md#downloadfile) | **POST** /asset/download/{id} | 
 *AssetApi* | [**getAllAssets**](doc//AssetApi.md#getallassets) | **GET** /asset | 
 *AssetApi* | [**getArchivedAssetCountByUserId**](doc//AssetApi.md#getarchivedassetcountbyuserid) | **GET** /asset/stat/archive | 
 *AssetApi* | [**getAssetById**](doc//AssetApi.md#getassetbyid) | **GET** /asset/assetById/{id} | 
@@ -105,6 +103,7 @@ Class | Method | HTTP request | Description
 *AssetApi* | [**getAssetThumbnail**](doc//AssetApi.md#getassetthumbnail) | **GET** /asset/thumbnail/{id} | 
 *AssetApi* | [**getCuratedLocations**](doc//AssetApi.md#getcuratedlocations) | **GET** /asset/curated-locations | 
 *AssetApi* | [**getCuratedObjects**](doc//AssetApi.md#getcuratedobjects) | **GET** /asset/curated-objects | 
+*AssetApi* | [**getDownloadInfo**](doc//AssetApi.md#getdownloadinfo) | **GET** /asset/download | 
 *AssetApi* | [**getMapMarkers**](doc//AssetApi.md#getmapmarkers) | **GET** /asset/map-marker | 
 *AssetApi* | [**getMemoryLane**](doc//AssetApi.md#getmemorylane) | **GET** /asset/memory-lane | 
 *AssetApi* | [**getUserAssetsByDeviceId**](doc//AssetApi.md#getuserassetsbydeviceid) | **GET** /asset/{deviceId} | 
@@ -215,7 +214,8 @@ Class | Method | HTTP request | Description
  - [DeleteAssetDto](doc//DeleteAssetDto.md)
  - [DeleteAssetResponseDto](doc//DeleteAssetResponseDto.md)
  - [DeleteAssetStatus](doc//DeleteAssetStatus.md)
- - [DownloadFilesDto](doc//DownloadFilesDto.md)
+ - [DownloadArchiveInfo](doc//DownloadArchiveInfo.md)
+ - [DownloadResponseDto](doc//DownloadResponseDto.md)
  - [ExifResponseDto](doc//ExifResponseDto.md)
  - [GetAssetByTimeBucketDto](doc//GetAssetByTimeBucketDto.md)
  - [GetAssetCountByTimeBucketDto](doc//GetAssetCountByTimeBucketDto.md)
diff --git a/mobile/openapi/doc/AlbumApi.md b/mobile/openapi/doc/AlbumApi.md
index b4eba7916..47c418096 100644
--- a/mobile/openapi/doc/AlbumApi.md
+++ b/mobile/openapi/doc/AlbumApi.md
@@ -13,7 +13,6 @@ Method | HTTP request | Description
 [**addUsersToAlbum**](AlbumApi.md#adduserstoalbum) | **PUT** /album/{id}/users | 
 [**createAlbum**](AlbumApi.md#createalbum) | **POST** /album | 
 [**deleteAlbum**](AlbumApi.md#deletealbum) | **DELETE** /album/{id} | 
-[**downloadArchive**](AlbumApi.md#downloadarchive) | **GET** /album/{id}/download | 
 [**getAlbumCount**](AlbumApi.md#getalbumcount) | **GET** /album/count | 
 [**getAlbumInfo**](AlbumApi.md#getalbuminfo) | **GET** /album/{id} | 
 [**getAllAlbums**](AlbumApi.md#getallalbums) | **GET** /album | 
@@ -247,67 +246,6 @@ void (empty response body)
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
-# **downloadArchive**
-> MultipartFile downloadArchive(id, name, skip, key)
-
-
-
-### Example
-```dart
-import 'package:openapi/api.dart';
-// TODO Configure API key authorization: cookie
-//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKey = 'YOUR_API_KEY';
-// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
-//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKeyPrefix = 'Bearer';
-// TODO Configure API key authorization: api_key
-//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKey = 'YOUR_API_KEY';
-// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
-//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKeyPrefix = 'Bearer';
-// TODO Configure HTTP Bearer authorization: bearer
-// Case 1. Use String Token
-//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken('YOUR_ACCESS_TOKEN');
-// Case 2. Use Function which generate token.
-// String yourTokenGeneratorFunction() { ... }
-//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken(yourTokenGeneratorFunction);
-
-final api_instance = AlbumApi();
-final id = 38400000-8cf0-11bd-b23e-10b96e4ef00d; // String | 
-final name = name_example; // String | 
-final skip = 8.14; // num | 
-final key = key_example; // String | 
-
-try {
-    final result = api_instance.downloadArchive(id, name, skip, key);
-    print(result);
-} catch (e) {
-    print('Exception when calling AlbumApi->downloadArchive: $e\n');
-}
-```
-
-### Parameters
-
-Name | Type | Description  | Notes
-------------- | ------------- | ------------- | -------------
- **id** | **String**|  | 
- **name** | **String**|  | [optional] 
- **skip** | **num**|  | [optional] 
- **key** | **String**|  | [optional] 
-
-### Return type
-
-[**MultipartFile**](MultipartFile.md)
-
-### Authorization
-
-[cookie](../README.md#cookie), [api_key](../README.md#api_key), [bearer](../README.md#bearer)
-
-### HTTP request headers
-
- - **Content-Type**: Not defined
- - **Accept**: application/zip
-
-[[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
-
 # **getAlbumCount**
 > AlbumCountResponseDto getAlbumCount()
 
diff --git a/mobile/openapi/doc/AssetApi.md b/mobile/openapi/doc/AssetApi.md
index ef3610b00..319deb2ac 100644
--- a/mobile/openapi/doc/AssetApi.md
+++ b/mobile/openapi/doc/AssetApi.md
@@ -13,9 +13,8 @@ Method | HTTP request | Description
 [**checkDuplicateAsset**](AssetApi.md#checkduplicateasset) | **POST** /asset/check | 
 [**checkExistingAssets**](AssetApi.md#checkexistingassets) | **POST** /asset/exist | 
 [**deleteAsset**](AssetApi.md#deleteasset) | **DELETE** /asset | 
-[**downloadFile**](AssetApi.md#downloadfile) | **GET** /asset/download/{id} | 
-[**downloadFiles**](AssetApi.md#downloadfiles) | **POST** /asset/download-files | 
-[**downloadLibrary**](AssetApi.md#downloadlibrary) | **GET** /asset/download-library | 
+[**downloadArchive**](AssetApi.md#downloadarchive) | **POST** /asset/download | 
+[**downloadFile**](AssetApi.md#downloadfile) | **POST** /asset/download/{id} | 
 [**getAllAssets**](AssetApi.md#getallassets) | **GET** /asset | 
 [**getArchivedAssetCountByUserId**](AssetApi.md#getarchivedassetcountbyuserid) | **GET** /asset/stat/archive | 
 [**getAssetById**](AssetApi.md#getassetbyid) | **GET** /asset/assetById/{id} | 
@@ -26,6 +25,7 @@ Method | HTTP request | Description
 [**getAssetThumbnail**](AssetApi.md#getassetthumbnail) | **GET** /asset/thumbnail/{id} | 
 [**getCuratedLocations**](AssetApi.md#getcuratedlocations) | **GET** /asset/curated-locations | 
 [**getCuratedObjects**](AssetApi.md#getcuratedobjects) | **GET** /asset/curated-objects | 
+[**getDownloadInfo**](AssetApi.md#getdownloadinfo) | **GET** /asset/download | 
 [**getMapMarkers**](AssetApi.md#getmapmarkers) | **GET** /asset/map-marker | 
 [**getMemoryLane**](AssetApi.md#getmemorylane) | **GET** /asset/memory-lane | 
 [**getUserAssetsByDeviceId**](AssetApi.md#getuserassetsbydeviceid) | **GET** /asset/{deviceId} | 
@@ -264,6 +264,63 @@ Name | Type | Description  | Notes
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
+# **downloadArchive**
+> MultipartFile downloadArchive(assetIdsDto, key)
+
+
+
+### Example
+```dart
+import 'package:openapi/api.dart';
+// TODO Configure API key authorization: cookie
+//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKey = 'YOUR_API_KEY';
+// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
+//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKeyPrefix = 'Bearer';
+// TODO Configure API key authorization: api_key
+//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKey = 'YOUR_API_KEY';
+// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
+//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKeyPrefix = 'Bearer';
+// TODO Configure HTTP Bearer authorization: bearer
+// Case 1. Use String Token
+//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken('YOUR_ACCESS_TOKEN');
+// Case 2. Use Function which generate token.
+// String yourTokenGeneratorFunction() { ... }
+//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken(yourTokenGeneratorFunction);
+
+final api_instance = AssetApi();
+final assetIdsDto = AssetIdsDto(); // AssetIdsDto | 
+final key = key_example; // String | 
+
+try {
+    final result = api_instance.downloadArchive(assetIdsDto, key);
+    print(result);
+} catch (e) {
+    print('Exception when calling AssetApi->downloadArchive: $e\n');
+}
+```
+
+### Parameters
+
+Name | Type | Description  | Notes
+------------- | ------------- | ------------- | -------------
+ **assetIdsDto** | [**AssetIdsDto**](AssetIdsDto.md)|  | 
+ **key** | **String**|  | [optional] 
+
+### Return type
+
+[**MultipartFile**](MultipartFile.md)
+
+### Authorization
+
+[cookie](../README.md#cookie), [api_key](../README.md#api_key), [bearer](../README.md#bearer)
+
+### HTTP request headers
+
+ - **Content-Type**: application/json
+ - **Accept**: application/octet-stream
+
+[[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
+
 # **downloadFile**
 > MultipartFile downloadFile(id, key)
 
@@ -321,124 +378,6 @@ Name | Type | Description  | Notes
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
-# **downloadFiles**
-> MultipartFile downloadFiles(downloadFilesDto, key)
-
-
-
-### Example
-```dart
-import 'package:openapi/api.dart';
-// TODO Configure API key authorization: cookie
-//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKey = 'YOUR_API_KEY';
-// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
-//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKeyPrefix = 'Bearer';
-// TODO Configure API key authorization: api_key
-//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKey = 'YOUR_API_KEY';
-// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
-//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKeyPrefix = 'Bearer';
-// TODO Configure HTTP Bearer authorization: bearer
-// Case 1. Use String Token
-//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken('YOUR_ACCESS_TOKEN');
-// Case 2. Use Function which generate token.
-// String yourTokenGeneratorFunction() { ... }
-//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken(yourTokenGeneratorFunction);
-
-final api_instance = AssetApi();
-final downloadFilesDto = DownloadFilesDto(); // DownloadFilesDto | 
-final key = key_example; // String | 
-
-try {
-    final result = api_instance.downloadFiles(downloadFilesDto, key);
-    print(result);
-} catch (e) {
-    print('Exception when calling AssetApi->downloadFiles: $e\n');
-}
-```
-
-### Parameters
-
-Name | Type | Description  | Notes
-------------- | ------------- | ------------- | -------------
- **downloadFilesDto** | [**DownloadFilesDto**](DownloadFilesDto.md)|  | 
- **key** | **String**|  | [optional] 
-
-### Return type
-
-[**MultipartFile**](MultipartFile.md)
-
-### Authorization
-
-[cookie](../README.md#cookie), [api_key](../README.md#api_key), [bearer](../README.md#bearer)
-
-### HTTP request headers
-
- - **Content-Type**: application/json
- - **Accept**: application/octet-stream
-
-[[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
-
-# **downloadLibrary**
-> MultipartFile downloadLibrary(name, skip, key)
-
-
-
-Current this is not used in any UI element
-
-### Example
-```dart
-import 'package:openapi/api.dart';
-// TODO Configure API key authorization: cookie
-//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKey = 'YOUR_API_KEY';
-// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
-//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKeyPrefix = 'Bearer';
-// TODO Configure API key authorization: api_key
-//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKey = 'YOUR_API_KEY';
-// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
-//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKeyPrefix = 'Bearer';
-// TODO Configure HTTP Bearer authorization: bearer
-// Case 1. Use String Token
-//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken('YOUR_ACCESS_TOKEN');
-// Case 2. Use Function which generate token.
-// String yourTokenGeneratorFunction() { ... }
-//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken(yourTokenGeneratorFunction);
-
-final api_instance = AssetApi();
-final name = name_example; // String | 
-final skip = 8.14; // num | 
-final key = key_example; // String | 
-
-try {
-    final result = api_instance.downloadLibrary(name, skip, key);
-    print(result);
-} catch (e) {
-    print('Exception when calling AssetApi->downloadLibrary: $e\n');
-}
-```
-
-### Parameters
-
-Name | Type | Description  | Notes
-------------- | ------------- | ------------- | -------------
- **name** | **String**|  | [optional] 
- **skip** | **num**|  | [optional] 
- **key** | **String**|  | [optional] 
-
-### Return type
-
-[**MultipartFile**](MultipartFile.md)
-
-### Authorization
-
-[cookie](../README.md#cookie), [api_key](../README.md#api_key), [bearer](../README.md#bearer)
-
-### HTTP request headers
-
- - **Content-Type**: Not defined
- - **Accept**: application/octet-stream
-
-[[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
-
 # **getAllAssets**
 > List<AssetResponseDto> getAllAssets(userId, isFavorite, isArchived, withoutThumbs, skip, ifNoneMatch)
 
@@ -989,6 +928,69 @@ This endpoint does not need any parameter.
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
+# **getDownloadInfo**
+> DownloadResponseDto getDownloadInfo(assetIds, albumId, userId, archiveSize, key)
+
+
+
+### Example
+```dart
+import 'package:openapi/api.dart';
+// TODO Configure API key authorization: cookie
+//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKey = 'YOUR_API_KEY';
+// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
+//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKeyPrefix = 'Bearer';
+// TODO Configure API key authorization: api_key
+//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKey = 'YOUR_API_KEY';
+// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
+//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKeyPrefix = 'Bearer';
+// TODO Configure HTTP Bearer authorization: bearer
+// Case 1. Use String Token
+//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken('YOUR_ACCESS_TOKEN');
+// Case 2. Use Function which generate token.
+// String yourTokenGeneratorFunction() { ... }
+//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken(yourTokenGeneratorFunction);
+
+final api_instance = AssetApi();
+final assetIds = []; // List<String> | 
+final albumId = 38400000-8cf0-11bd-b23e-10b96e4ef00d; // String | 
+final userId = 38400000-8cf0-11bd-b23e-10b96e4ef00d; // String | 
+final archiveSize = 8.14; // num | 
+final key = key_example; // String | 
+
+try {
+    final result = api_instance.getDownloadInfo(assetIds, albumId, userId, archiveSize, key);
+    print(result);
+} catch (e) {
+    print('Exception when calling AssetApi->getDownloadInfo: $e\n');
+}
+```
+
+### Parameters
+
+Name | Type | Description  | Notes
+------------- | ------------- | ------------- | -------------
+ **assetIds** | [**List<String>**](String.md)|  | [optional] [default to const []]
+ **albumId** | **String**|  | [optional] 
+ **userId** | **String**|  | [optional] 
+ **archiveSize** | **num**|  | [optional] 
+ **key** | **String**|  | [optional] 
+
+### Return type
+
+[**DownloadResponseDto**](DownloadResponseDto.md)
+
+### Authorization
+
+[cookie](../README.md#cookie), [api_key](../README.md#api_key), [bearer](../README.md#bearer)
+
+### HTTP request headers
+
+ - **Content-Type**: Not defined
+ - **Accept**: application/json
+
+[[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
+
 # **getMapMarkers**
 > List<MapMarkerResponseDto> getMapMarkers(isFavorite, fileCreatedAfter, fileCreatedBefore)
 
diff --git a/mobile/openapi/doc/DownloadFilesDto.md b/mobile/openapi/doc/DownloadArchiveInfo.md
similarity index 86%
rename from mobile/openapi/doc/DownloadFilesDto.md
rename to mobile/openapi/doc/DownloadArchiveInfo.md
index 6b44eef05..5ec8c668f 100644
--- a/mobile/openapi/doc/DownloadFilesDto.md
+++ b/mobile/openapi/doc/DownloadArchiveInfo.md
@@ -1,4 +1,4 @@
-# openapi.model.DownloadFilesDto
+# openapi.model.DownloadArchiveInfo
 
 ## Load the model package
 ```dart
@@ -8,6 +8,7 @@ import 'package:openapi/api.dart';
 ## Properties
 Name | Type | Description | Notes
 ------------ | ------------- | ------------- | -------------
+**size** | **int** |  | 
 **assetIds** | **List<String>** |  | [default to const []]
 
 [[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)
diff --git a/mobile/openapi/doc/DownloadResponseDto.md b/mobile/openapi/doc/DownloadResponseDto.md
new file mode 100644
index 000000000..2a7bbc9b1
--- /dev/null
+++ b/mobile/openapi/doc/DownloadResponseDto.md
@@ -0,0 +1,16 @@
+# openapi.model.DownloadResponseDto
+
+## Load the model package
+```dart
+import 'package:openapi/api.dart';
+```
+
+## Properties
+Name | Type | Description | Notes
+------------ | ------------- | ------------- | -------------
+**totalSize** | **int** |  | 
+**archives** | [**List<DownloadArchiveInfo>**](DownloadArchiveInfo.md) |  | [default to const []]
+
+[[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)
+
+
diff --git a/mobile/openapi/lib/api.dart b/mobile/openapi/lib/api.dart
index 9363e99b1..47cfa9aa2 100644
--- a/mobile/openapi/lib/api.dart
+++ b/mobile/openapi/lib/api.dart
@@ -81,7 +81,8 @@ part 'model/curated_objects_response_dto.dart';
 part 'model/delete_asset_dto.dart';
 part 'model/delete_asset_response_dto.dart';
 part 'model/delete_asset_status.dart';
-part 'model/download_files_dto.dart';
+part 'model/download_archive_info.dart';
+part 'model/download_response_dto.dart';
 part 'model/exif_response_dto.dart';
 part 'model/get_asset_by_time_bucket_dto.dart';
 part 'model/get_asset_count_by_time_bucket_dto.dart';
diff --git a/mobile/openapi/lib/api/album_api.dart b/mobile/openapi/lib/api/album_api.dart
index 37490881d..1f5bd7b58 100644
--- a/mobile/openapi/lib/api/album_api.dart
+++ b/mobile/openapi/lib/api/album_api.dart
@@ -215,76 +215,6 @@ class AlbumApi {
     }
   }
 
-  /// Performs an HTTP 'GET /album/{id}/download' operation and returns the [Response].
-  /// Parameters:
-  ///
-  /// * [String] id (required):
-  ///
-  /// * [String] name:
-  ///
-  /// * [num] skip:
-  ///
-  /// * [String] key:
-  Future<Response> downloadArchiveWithHttpInfo(String id, { String? name, num? skip, String? key, }) async {
-    // ignore: prefer_const_declarations
-    final path = r'/album/{id}/download'
-      .replaceAll('{id}', id);
-
-    // ignore: prefer_final_locals
-    Object? postBody;
-
-    final queryParams = <QueryParam>[];
-    final headerParams = <String, String>{};
-    final formParams = <String, String>{};
-
-    if (name != null) {
-      queryParams.addAll(_queryParams('', 'name', name));
-    }
-    if (skip != null) {
-      queryParams.addAll(_queryParams('', 'skip', skip));
-    }
-    if (key != null) {
-      queryParams.addAll(_queryParams('', 'key', key));
-    }
-
-    const contentTypes = <String>[];
-
-
-    return apiClient.invokeAPI(
-      path,
-      'GET',
-      queryParams,
-      postBody,
-      headerParams,
-      formParams,
-      contentTypes.isEmpty ? null : contentTypes.first,
-    );
-  }
-
-  /// Parameters:
-  ///
-  /// * [String] id (required):
-  ///
-  /// * [String] name:
-  ///
-  /// * [num] skip:
-  ///
-  /// * [String] key:
-  Future<MultipartFile?> downloadArchive(String id, { String? name, num? skip, String? key, }) async {
-    final response = await downloadArchiveWithHttpInfo(id,  name: name, skip: skip, key: key, );
-    if (response.statusCode >= HttpStatus.badRequest) {
-      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
-    }
-    // When a remote server returns no body with a status of 204, we shall not decode it.
-    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
-    // FormatException when trying to decode an empty string.
-    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
-      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MultipartFile',) as MultipartFile;
-    
-    }
-    return null;
-  }
-
   /// Performs an HTTP 'GET /album/count' operation and returns the [Response].
   Future<Response> getAlbumCountWithHttpInfo() async {
     // ignore: prefer_const_declarations
diff --git a/mobile/openapi/lib/api/asset_api.dart b/mobile/openapi/lib/api/asset_api.dart
index d8d03ca53..a73ec3b1e 100644
--- a/mobile/openapi/lib/api/asset_api.dart
+++ b/mobile/openapi/lib/api/asset_api.dart
@@ -230,7 +230,62 @@ class AssetApi {
     return null;
   }
 
-  /// Performs an HTTP 'GET /asset/download/{id}' operation and returns the [Response].
+  /// Performs an HTTP 'POST /asset/download' operation and returns the [Response].
+  /// Parameters:
+  ///
+  /// * [AssetIdsDto] assetIdsDto (required):
+  ///
+  /// * [String] key:
+  Future<Response> downloadArchiveWithHttpInfo(AssetIdsDto assetIdsDto, { String? key, }) async {
+    // ignore: prefer_const_declarations
+    final path = r'/asset/download';
+
+    // ignore: prefer_final_locals
+    Object? postBody = assetIdsDto;
+
+    final queryParams = <QueryParam>[];
+    final headerParams = <String, String>{};
+    final formParams = <String, String>{};
+
+    if (key != null) {
+      queryParams.addAll(_queryParams('', 'key', key));
+    }
+
+    const contentTypes = <String>['application/json'];
+
+
+    return apiClient.invokeAPI(
+      path,
+      'POST',
+      queryParams,
+      postBody,
+      headerParams,
+      formParams,
+      contentTypes.isEmpty ? null : contentTypes.first,
+    );
+  }
+
+  /// Parameters:
+  ///
+  /// * [AssetIdsDto] assetIdsDto (required):
+  ///
+  /// * [String] key:
+  Future<MultipartFile?> downloadArchive(AssetIdsDto assetIdsDto, { String? key, }) async {
+    final response = await downloadArchiveWithHttpInfo(assetIdsDto,  key: key, );
+    if (response.statusCode >= HttpStatus.badRequest) {
+      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
+    }
+    // When a remote server returns no body with a status of 204, we shall not decode it.
+    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
+    // FormatException when trying to decode an empty string.
+    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
+      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MultipartFile',) as MultipartFile;
+    
+    }
+    return null;
+  }
+
+  /// Performs an HTTP 'POST /asset/download/{id}' operation and returns the [Response].
   /// Parameters:
   ///
   /// * [String] id (required):
@@ -257,7 +312,7 @@ class AssetApi {
 
     return apiClient.invokeAPI(
       path,
-      'GET',
+      'POST',
       queryParams,
       postBody,
       headerParams,
@@ -286,131 +341,6 @@ class AssetApi {
     return null;
   }
 
-  /// Performs an HTTP 'POST /asset/download-files' operation and returns the [Response].
-  /// Parameters:
-  ///
-  /// * [DownloadFilesDto] downloadFilesDto (required):
-  ///
-  /// * [String] key:
-  Future<Response> downloadFilesWithHttpInfo(DownloadFilesDto downloadFilesDto, { String? key, }) async {
-    // ignore: prefer_const_declarations
-    final path = r'/asset/download-files';
-
-    // ignore: prefer_final_locals
-    Object? postBody = downloadFilesDto;
-
-    final queryParams = <QueryParam>[];
-    final headerParams = <String, String>{};
-    final formParams = <String, String>{};
-
-    if (key != null) {
-      queryParams.addAll(_queryParams('', 'key', key));
-    }
-
-    const contentTypes = <String>['application/json'];
-
-
-    return apiClient.invokeAPI(
-      path,
-      'POST',
-      queryParams,
-      postBody,
-      headerParams,
-      formParams,
-      contentTypes.isEmpty ? null : contentTypes.first,
-    );
-  }
-
-  /// Parameters:
-  ///
-  /// * [DownloadFilesDto] downloadFilesDto (required):
-  ///
-  /// * [String] key:
-  Future<MultipartFile?> downloadFiles(DownloadFilesDto downloadFilesDto, { String? key, }) async {
-    final response = await downloadFilesWithHttpInfo(downloadFilesDto,  key: key, );
-    if (response.statusCode >= HttpStatus.badRequest) {
-      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
-    }
-    // When a remote server returns no body with a status of 204, we shall not decode it.
-    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
-    // FormatException when trying to decode an empty string.
-    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
-      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MultipartFile',) as MultipartFile;
-    
-    }
-    return null;
-  }
-
-  /// Current this is not used in any UI element
-  ///
-  /// Note: This method returns the HTTP [Response].
-  ///
-  /// Parameters:
-  ///
-  /// * [String] name:
-  ///
-  /// * [num] skip:
-  ///
-  /// * [String] key:
-  Future<Response> downloadLibraryWithHttpInfo({ String? name, num? skip, String? key, }) async {
-    // ignore: prefer_const_declarations
-    final path = r'/asset/download-library';
-
-    // ignore: prefer_final_locals
-    Object? postBody;
-
-    final queryParams = <QueryParam>[];
-    final headerParams = <String, String>{};
-    final formParams = <String, String>{};
-
-    if (name != null) {
-      queryParams.addAll(_queryParams('', 'name', name));
-    }
-    if (skip != null) {
-      queryParams.addAll(_queryParams('', 'skip', skip));
-    }
-    if (key != null) {
-      queryParams.addAll(_queryParams('', 'key', key));
-    }
-
-    const contentTypes = <String>[];
-
-
-    return apiClient.invokeAPI(
-      path,
-      'GET',
-      queryParams,
-      postBody,
-      headerParams,
-      formParams,
-      contentTypes.isEmpty ? null : contentTypes.first,
-    );
-  }
-
-  /// Current this is not used in any UI element
-  ///
-  /// Parameters:
-  ///
-  /// * [String] name:
-  ///
-  /// * [num] skip:
-  ///
-  /// * [String] key:
-  Future<MultipartFile?> downloadLibrary({ String? name, num? skip, String? key, }) async {
-    final response = await downloadLibraryWithHttpInfo( name: name, skip: skip, key: key, );
-    if (response.statusCode >= HttpStatus.badRequest) {
-      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
-    }
-    // When a remote server returns no body with a status of 204, we shall not decode it.
-    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
-    // FormatException when trying to decode an empty string.
-    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
-      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MultipartFile',) as MultipartFile;
-    
-    }
-    return null;
-  }
-
   /// Get all AssetEntity belong to the user
   ///
   /// Note: This method returns the HTTP [Response].
@@ -945,6 +875,85 @@ class AssetApi {
     return null;
   }
 
+  /// Performs an HTTP 'GET /asset/download' operation and returns the [Response].
+  /// Parameters:
+  ///
+  /// * [List<String>] assetIds:
+  ///
+  /// * [String] albumId:
+  ///
+  /// * [String] userId:
+  ///
+  /// * [num] archiveSize:
+  ///
+  /// * [String] key:
+  Future<Response> getDownloadInfoWithHttpInfo({ List<String>? assetIds, String? albumId, String? userId, num? archiveSize, String? key, }) async {
+    // ignore: prefer_const_declarations
+    final path = r'/asset/download';
+
+    // ignore: prefer_final_locals
+    Object? postBody;
+
+    final queryParams = <QueryParam>[];
+    final headerParams = <String, String>{};
+    final formParams = <String, String>{};
+
+    if (assetIds != null) {
+      queryParams.addAll(_queryParams('multi', 'assetIds', assetIds));
+    }
+    if (albumId != null) {
+      queryParams.addAll(_queryParams('', 'albumId', albumId));
+    }
+    if (userId != null) {
+      queryParams.addAll(_queryParams('', 'userId', userId));
+    }
+    if (archiveSize != null) {
+      queryParams.addAll(_queryParams('', 'archiveSize', archiveSize));
+    }
+    if (key != null) {
+      queryParams.addAll(_queryParams('', 'key', key));
+    }
+
+    const contentTypes = <String>[];
+
+
+    return apiClient.invokeAPI(
+      path,
+      'GET',
+      queryParams,
+      postBody,
+      headerParams,
+      formParams,
+      contentTypes.isEmpty ? null : contentTypes.first,
+    );
+  }
+
+  /// Parameters:
+  ///
+  /// * [List<String>] assetIds:
+  ///
+  /// * [String] albumId:
+  ///
+  /// * [String] userId:
+  ///
+  /// * [num] archiveSize:
+  ///
+  /// * [String] key:
+  Future<DownloadResponseDto?> getDownloadInfo({ List<String>? assetIds, String? albumId, String? userId, num? archiveSize, String? key, }) async {
+    final response = await getDownloadInfoWithHttpInfo( assetIds: assetIds, albumId: albumId, userId: userId, archiveSize: archiveSize, key: key, );
+    if (response.statusCode >= HttpStatus.badRequest) {
+      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
+    }
+    // When a remote server returns no body with a status of 204, we shall not decode it.
+    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
+    // FormatException when trying to decode an empty string.
+    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
+      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'DownloadResponseDto',) as DownloadResponseDto;
+    
+    }
+    return null;
+  }
+
   /// Performs an HTTP 'GET /asset/map-marker' operation and returns the [Response].
   /// Parameters:
   ///
diff --git a/mobile/openapi/lib/api_client.dart b/mobile/openapi/lib/api_client.dart
index 9deee81b7..7ba532835 100644
--- a/mobile/openapi/lib/api_client.dart
+++ b/mobile/openapi/lib/api_client.dart
@@ -257,8 +257,10 @@ class ApiClient {
           return DeleteAssetResponseDto.fromJson(value);
         case 'DeleteAssetStatus':
           return DeleteAssetStatusTypeTransformer().decode(value);
-        case 'DownloadFilesDto':
-          return DownloadFilesDto.fromJson(value);
+        case 'DownloadArchiveInfo':
+          return DownloadArchiveInfo.fromJson(value);
+        case 'DownloadResponseDto':
+          return DownloadResponseDto.fromJson(value);
         case 'ExifResponseDto':
           return ExifResponseDto.fromJson(value);
         case 'GetAssetByTimeBucketDto':
diff --git a/mobile/openapi/lib/model/download_files_dto.dart b/mobile/openapi/lib/model/download_archive_info.dart
similarity index 59%
rename from mobile/openapi/lib/model/download_files_dto.dart
rename to mobile/openapi/lib/model/download_archive_info.dart
index bd7c3537f..ff370f423 100644
--- a/mobile/openapi/lib/model/download_files_dto.dart
+++ b/mobile/openapi/lib/model/download_archive_info.dart
@@ -10,40 +10,47 @@
 
 part of openapi.api;
 
-class DownloadFilesDto {
-  /// Returns a new [DownloadFilesDto] instance.
-  DownloadFilesDto({
+class DownloadArchiveInfo {
+  /// Returns a new [DownloadArchiveInfo] instance.
+  DownloadArchiveInfo({
+    required this.size,
     this.assetIds = const [],
   });
 
+  int size;
+
   List<String> assetIds;
 
   @override
-  bool operator ==(Object other) => identical(this, other) || other is DownloadFilesDto &&
+  bool operator ==(Object other) => identical(this, other) || other is DownloadArchiveInfo &&
+     other.size == size &&
      other.assetIds == assetIds;
 
   @override
   int get hashCode =>
     // ignore: unnecessary_parenthesis
+    (size.hashCode) +
     (assetIds.hashCode);
 
   @override
-  String toString() => 'DownloadFilesDto[assetIds=$assetIds]';
+  String toString() => 'DownloadArchiveInfo[size=$size, assetIds=$assetIds]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
+      json[r'size'] = this.size;
       json[r'assetIds'] = this.assetIds;
     return json;
   }
 
-  /// Returns a new [DownloadFilesDto] instance and imports its values from
+  /// Returns a new [DownloadArchiveInfo] instance and imports its values from
   /// [value] if it's a [Map], null otherwise.
   // ignore: prefer_constructors_over_static_methods
-  static DownloadFilesDto? fromJson(dynamic value) {
+  static DownloadArchiveInfo? fromJson(dynamic value) {
     if (value is Map) {
       final json = value.cast<String, dynamic>();
 
-      return DownloadFilesDto(
+      return DownloadArchiveInfo(
+        size: mapValueOfType<int>(json, r'size')!,
         assetIds: json[r'assetIds'] is Iterable
             ? (json[r'assetIds'] as Iterable).cast<String>().toList(growable: false)
             : const [],
@@ -52,11 +59,11 @@ class DownloadFilesDto {
     return null;
   }
 
-  static List<DownloadFilesDto> listFromJson(dynamic json, {bool growable = false,}) {
-    final result = <DownloadFilesDto>[];
+  static List<DownloadArchiveInfo> listFromJson(dynamic json, {bool growable = false,}) {
+    final result = <DownloadArchiveInfo>[];
     if (json is List && json.isNotEmpty) {
       for (final row in json) {
-        final value = DownloadFilesDto.fromJson(row);
+        final value = DownloadArchiveInfo.fromJson(row);
         if (value != null) {
           result.add(value);
         }
@@ -65,12 +72,12 @@ class DownloadFilesDto {
     return result.toList(growable: growable);
   }
 
-  static Map<String, DownloadFilesDto> mapFromJson(dynamic json) {
-    final map = <String, DownloadFilesDto>{};
+  static Map<String, DownloadArchiveInfo> mapFromJson(dynamic json) {
+    final map = <String, DownloadArchiveInfo>{};
     if (json is Map && json.isNotEmpty) {
       json = json.cast<String, dynamic>(); // ignore: parameter_assignments
       for (final entry in json.entries) {
-        final value = DownloadFilesDto.fromJson(entry.value);
+        final value = DownloadArchiveInfo.fromJson(entry.value);
         if (value != null) {
           map[entry.key] = value;
         }
@@ -79,14 +86,14 @@ class DownloadFilesDto {
     return map;
   }
 
-  // maps a json object with a list of DownloadFilesDto-objects as value to a dart map
-  static Map<String, List<DownloadFilesDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
-    final map = <String, List<DownloadFilesDto>>{};
+  // maps a json object with a list of DownloadArchiveInfo-objects as value to a dart map
+  static Map<String, List<DownloadArchiveInfo>> mapListFromJson(dynamic json, {bool growable = false,}) {
+    final map = <String, List<DownloadArchiveInfo>>{};
     if (json is Map && json.isNotEmpty) {
       // ignore: parameter_assignments
       json = json.cast<String, dynamic>();
       for (final entry in json.entries) {
-        map[entry.key] = DownloadFilesDto.listFromJson(entry.value, growable: growable,);
+        map[entry.key] = DownloadArchiveInfo.listFromJson(entry.value, growable: growable,);
       }
     }
     return map;
@@ -94,6 +101,7 @@ class DownloadFilesDto {
 
   /// The list of required keys that must be present in a JSON.
   static const requiredKeys = <String>{
+    'size',
     'assetIds',
   };
 }
diff --git a/mobile/openapi/lib/model/download_response_dto.dart b/mobile/openapi/lib/model/download_response_dto.dart
new file mode 100644
index 000000000..89269c71a
--- /dev/null
+++ b/mobile/openapi/lib/model/download_response_dto.dart
@@ -0,0 +1,106 @@
+//
+// AUTO-GENERATED FILE, DO NOT MODIFY!
+//
+// @dart=2.12
+
+// ignore_for_file: unused_element, unused_import
+// ignore_for_file: always_put_required_named_parameters_first
+// ignore_for_file: constant_identifier_names
+// ignore_for_file: lines_longer_than_80_chars
+
+part of openapi.api;
+
+class DownloadResponseDto {
+  /// Returns a new [DownloadResponseDto] instance.
+  DownloadResponseDto({
+    required this.totalSize,
+    this.archives = const [],
+  });
+
+  int totalSize;
+
+  List<DownloadArchiveInfo> archives;
+
+  @override
+  bool operator ==(Object other) => identical(this, other) || other is DownloadResponseDto &&
+     other.totalSize == totalSize &&
+     other.archives == archives;
+
+  @override
+  int get hashCode =>
+    // ignore: unnecessary_parenthesis
+    (totalSize.hashCode) +
+    (archives.hashCode);
+
+  @override
+  String toString() => 'DownloadResponseDto[totalSize=$totalSize, archives=$archives]';
+
+  Map<String, dynamic> toJson() {
+    final json = <String, dynamic>{};
+      json[r'totalSize'] = this.totalSize;
+      json[r'archives'] = this.archives;
+    return json;
+  }
+
+  /// Returns a new [DownloadResponseDto] instance and imports its values from
+  /// [value] if it's a [Map], null otherwise.
+  // ignore: prefer_constructors_over_static_methods
+  static DownloadResponseDto? fromJson(dynamic value) {
+    if (value is Map) {
+      final json = value.cast<String, dynamic>();
+
+      return DownloadResponseDto(
+        totalSize: mapValueOfType<int>(json, r'totalSize')!,
+        archives: DownloadArchiveInfo.listFromJson(json[r'archives']),
+      );
+    }
+    return null;
+  }
+
+  static List<DownloadResponseDto> listFromJson(dynamic json, {bool growable = false,}) {
+    final result = <DownloadResponseDto>[];
+    if (json is List && json.isNotEmpty) {
+      for (final row in json) {
+        final value = DownloadResponseDto.fromJson(row);
+        if (value != null) {
+          result.add(value);
+        }
+      }
+    }
+    return result.toList(growable: growable);
+  }
+
+  static Map<String, DownloadResponseDto> mapFromJson(dynamic json) {
+    final map = <String, DownloadResponseDto>{};
+    if (json is Map && json.isNotEmpty) {
+      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
+      for (final entry in json.entries) {
+        final value = DownloadResponseDto.fromJson(entry.value);
+        if (value != null) {
+          map[entry.key] = value;
+        }
+      }
+    }
+    return map;
+  }
+
+  // maps a json object with a list of DownloadResponseDto-objects as value to a dart map
+  static Map<String, List<DownloadResponseDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
+    final map = <String, List<DownloadResponseDto>>{};
+    if (json is Map && json.isNotEmpty) {
+      // ignore: parameter_assignments
+      json = json.cast<String, dynamic>();
+      for (final entry in json.entries) {
+        map[entry.key] = DownloadResponseDto.listFromJson(entry.value, growable: growable,);
+      }
+    }
+    return map;
+  }
+
+  /// The list of required keys that must be present in a JSON.
+  static const requiredKeys = <String>{
+    'totalSize',
+    'archives',
+  };
+}
+
diff --git a/mobile/openapi/test/album_api_test.dart b/mobile/openapi/test/album_api_test.dart
index 28c93deb4..5c2331fa9 100644
--- a/mobile/openapi/test/album_api_test.dart
+++ b/mobile/openapi/test/album_api_test.dart
@@ -37,11 +37,6 @@ void main() {
       // TODO
     });
 
-    //Future<MultipartFile> downloadArchive(String id, { String name, num skip, String key }) async
-    test('test downloadArchive', () async {
-      // TODO
-    });
-
     //Future<AlbumCountResponseDto> getAlbumCount() async
     test('test getAlbumCount', () async {
       // TODO
diff --git a/mobile/openapi/test/asset_api_test.dart b/mobile/openapi/test/asset_api_test.dart
index 1a2e510cf..1c5f08536 100644
--- a/mobile/openapi/test/asset_api_test.dart
+++ b/mobile/openapi/test/asset_api_test.dart
@@ -43,23 +43,16 @@ void main() {
       // TODO
     });
 
+    //Future<MultipartFile> downloadArchive(AssetIdsDto assetIdsDto, { String key }) async
+    test('test downloadArchive', () async {
+      // TODO
+    });
+
     //Future<MultipartFile> downloadFile(String id, { String key }) async
     test('test downloadFile', () async {
       // TODO
     });
 
-    //Future<MultipartFile> downloadFiles(DownloadFilesDto downloadFilesDto, { String key }) async
-    test('test downloadFiles', () async {
-      // TODO
-    });
-
-    // Current this is not used in any UI element
-    //
-    //Future<MultipartFile> downloadLibrary({ String name, num skip, String key }) async
-    test('test downloadLibrary', () async {
-      // TODO
-    });
-
     // Get all AssetEntity belong to the user
     //
     //Future<List<AssetResponseDto>> getAllAssets({ String userId, bool isFavorite, bool isArchived, bool withoutThumbs, num skip, String ifNoneMatch }) async
@@ -114,6 +107,11 @@ void main() {
       // TODO
     });
 
+    //Future<DownloadResponseDto> getDownloadInfo({ List<String> assetIds, String albumId, String userId, num archiveSize, String key }) async
+    test('test getDownloadInfo', () async {
+      // TODO
+    });
+
     //Future<List<MapMarkerResponseDto>> getMapMarkers({ bool isFavorite, DateTime fileCreatedAfter, DateTime fileCreatedBefore }) async
     test('test getMapMarkers', () async {
       // TODO
diff --git a/mobile/openapi/test/download_files_dto_test.dart b/mobile/openapi/test/download_archive_info_test.dart
similarity index 70%
rename from mobile/openapi/test/download_files_dto_test.dart
rename to mobile/openapi/test/download_archive_info_test.dart
index fcc46a6c3..35f29ef99 100644
--- a/mobile/openapi/test/download_files_dto_test.dart
+++ b/mobile/openapi/test/download_archive_info_test.dart
@@ -11,11 +11,16 @@
 import 'package:openapi/api.dart';
 import 'package:test/test.dart';
 
-// tests for DownloadFilesDto
+// tests for DownloadArchiveInfo
 void main() {
-  // final instance = DownloadFilesDto();
+  // final instance = DownloadArchiveInfo();
+
+  group('test DownloadArchiveInfo', () {
+    // int size
+    test('to test the property `size`', () async {
+      // TODO
+    });
 
-  group('test DownloadFilesDto', () {
     // List<String> assetIds (default value: const [])
     test('to test the property `assetIds`', () async {
       // TODO
diff --git a/mobile/openapi/test/download_response_dto_test.dart b/mobile/openapi/test/download_response_dto_test.dart
new file mode 100644
index 000000000..b823c1441
--- /dev/null
+++ b/mobile/openapi/test/download_response_dto_test.dart
@@ -0,0 +1,32 @@
+//
+// AUTO-GENERATED FILE, DO NOT MODIFY!
+//
+// @dart=2.12
+
+// ignore_for_file: unused_element, unused_import
+// ignore_for_file: always_put_required_named_parameters_first
+// ignore_for_file: constant_identifier_names
+// ignore_for_file: lines_longer_than_80_chars
+
+import 'package:openapi/api.dart';
+import 'package:test/test.dart';
+
+// tests for DownloadResponseDto
+void main() {
+  // final instance = DownloadResponseDto();
+
+  group('test DownloadResponseDto', () {
+    // int totalSize
+    test('to test the property `totalSize`', () async {
+      // TODO
+    });
+
+    // List<DownloadArchiveInfo> archives (default value: const [])
+    test('to test the property `archives`', () async {
+      // TODO
+    });
+
+
+  });
+
+}
diff --git a/server/immich-openapi-specs.json b/server/immich-openapi-specs.json
index 07b8ad0fc..7717e0ab1 100644
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@@ -370,73 +370,6 @@
         ]
       }
     },
-    "/album/{id}/download": {
-      "get": {
-        "operationId": "downloadArchive",
-        "parameters": [
-          {
-            "name": "id",
-            "required": true,
-            "in": "path",
-            "schema": {
-              "format": "uuid",
-              "type": "string"
-            }
-          },
-          {
-            "name": "name",
-            "required": false,
-            "in": "query",
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "skip",
-            "required": false,
-            "in": "query",
-            "schema": {
-              "type": "number"
-            }
-          },
-          {
-            "name": "key",
-            "required": false,
-            "in": "query",
-            "schema": {
-              "type": "string"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "content": {
-              "application/zip": {
-                "schema": {
-                  "type": "string",
-                  "format": "binary"
-                }
-              }
-            },
-            "description": ""
-          }
-        },
-        "tags": [
-          "Album"
-        ],
-        "security": [
-          {
-            "bearer": []
-          },
-          {
-            "cookie": []
-          },
-          {
-            "api_key": []
-          }
-        ]
-      }
-    },
     "/album/{id}/user/{userId}": {
       "delete": {
         "operationId": "removeUserFromAlbum",
@@ -1153,10 +1086,48 @@
         ]
       }
     },
-    "/asset/download-files": {
-      "post": {
-        "operationId": "downloadFiles",
+    "/asset/download": {
+      "get": {
+        "operationId": "getDownloadInfo",
         "parameters": [
+          {
+            "name": "assetIds",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "format": "uuid",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          },
+          {
+            "name": "albumId",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "format": "uuid",
+              "type": "string"
+            }
+          },
+          {
+            "name": "userId",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "format": "uuid",
+              "type": "string"
+            }
+          },
+          {
+            "name": "archiveSize",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "number"
+            }
+          },
           {
             "name": "key",
             "required": false,
@@ -1166,30 +1137,16 @@
             }
           }
         ],
-        "requestBody": {
-          "required": true,
-          "content": {
-            "application/json": {
-              "schema": {
-                "$ref": "#/components/schemas/DownloadFilesDto"
-              }
-            }
-          }
-        },
         "responses": {
           "200": {
+            "description": "",
             "content": {
-              "application/octet-stream": {
+              "application/json": {
                 "schema": {
-                  "type": "string",
-                  "format": "binary"
+                  "$ref": "#/components/schemas/DownloadResponseDto"
                 }
               }
-            },
-            "description": ""
-          },
-          "201": {
-            "description": ""
+            }
           }
         },
         "tags": [
@@ -1206,29 +1163,10 @@
             "api_key": []
           }
         ]
-      }
-    },
-    "/asset/download-library": {
-      "get": {
-        "operationId": "downloadLibrary",
-        "description": "Current this is not used in any UI element",
+      },
+      "post": {
+        "operationId": "downloadArchive",
         "parameters": [
-          {
-            "name": "name",
-            "required": false,
-            "in": "query",
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "skip",
-            "required": false,
-            "in": "query",
-            "schema": {
-              "type": "number"
-            }
-          },
           {
             "name": "key",
             "required": false,
@@ -1238,6 +1176,16 @@
             }
           }
         ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/AssetIdsDto"
+              }
+            }
+          }
+        },
         "responses": {
           "200": {
             "content": {
@@ -1268,7 +1216,7 @@
       }
     },
     "/asset/download/{id}": {
-      "get": {
+      "post": {
         "operationId": "downloadFile",
         "parameters": [
           {
@@ -5341,11 +5289,13 @@
           "FAILED"
         ]
       },
-      "DownloadFilesDto": {
+      "DownloadArchiveInfo": {
         "type": "object",
         "properties": {
+          "size": {
+            "type": "integer"
+          },
           "assetIds": {
-            "title": "Array of asset ids to be downloaded",
             "type": "array",
             "items": {
               "type": "string"
@@ -5353,9 +5303,28 @@
           }
         },
         "required": [
+          "size",
           "assetIds"
         ]
       },
+      "DownloadResponseDto": {
+        "type": "object",
+        "properties": {
+          "totalSize": {
+            "type": "integer"
+          },
+          "archives": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/DownloadArchiveInfo"
+            }
+          }
+        },
+        "required": [
+          "totalSize",
+          "archives"
+        ]
+      },
       "ExifResponseDto": {
         "type": "object",
         "properties": {
diff --git a/server/src/domain/access/access.core.ts b/server/src/domain/access/access.core.ts
index f730e1be9..e4a2ed447 100644
--- a/server/src/domain/access/access.core.ts
+++ b/server/src/domain/access/access.core.ts
@@ -16,6 +16,7 @@ export enum Permission {
   ALBUM_UPDATE = 'album.update',
   ALBUM_DELETE = 'album.delete',
   ALBUM_SHARE = 'album.share',
+  ALBUM_DOWNLOAD = 'album.download',
 
   LIBRARY_READ = 'library.read',
   LIBRARY_DOWNLOAD = 'library.download',
@@ -68,6 +69,10 @@ export class AccessCore {
         // TODO: fix this to not use authUser.id for shared link access control
         return this.repository.asset.hasOwnerAccess(authUser.id, id);
 
+      case Permission.ALBUM_DOWNLOAD: {
+        return !!authUser.isAllowDownload && (await this.repository.album.hasSharedLinkAccess(sharedLinkId, id));
+      }
+
       // case Permission.ALBUM_READ:
       //   return this.repository.album.hasSharedLinkAccess(sharedLinkId, id);
 
@@ -122,6 +127,12 @@ export class AccessCore {
       case Permission.ALBUM_SHARE:
         return this.repository.album.hasOwnerAccess(authUser.id, id);
 
+      case Permission.ALBUM_DOWNLOAD:
+        return (
+          (await this.repository.album.hasOwnerAccess(authUser.id, id)) ||
+          (await this.repository.album.hasSharedAlbumAccess(authUser.id, id))
+        );
+
       case Permission.LIBRARY_READ:
         return authUser.id === id || (await this.repository.library.hasPartnerAccess(authUser.id, id));
 
diff --git a/server/src/domain/asset/asset.repository.ts b/server/src/domain/asset/asset.repository.ts
index 9479d3c12..9bd9c687a 100644
--- a/server/src/domain/asset/asset.repository.ts
+++ b/server/src/domain/asset/asset.repository.ts
@@ -44,6 +44,8 @@ export const IAssetRepository = 'IAssetRepository';
 export interface IAssetRepository {
   getByDate(ownerId: string, date: Date): Promise<AssetEntity[]>;
   getByIds(ids: string[]): Promise<AssetEntity[]>;
+  getByAlbumId(pagination: PaginationOptions, albumId: string): Paginated<AssetEntity>;
+  getByUserId(pagination: PaginationOptions, userId: string): Paginated<AssetEntity>;
   getWithout(pagination: PaginationOptions, property: WithoutProperty): Paginated<AssetEntity>;
   getWith(pagination: PaginationOptions, property: WithProperty): Paginated<AssetEntity>;
   getFirstAssetForAlbumId(albumId: string): Promise<AssetEntity | null>;
diff --git a/server/src/domain/asset/asset.service.spec.ts b/server/src/domain/asset/asset.service.spec.ts
index b6f253113..ed155c148 100644
--- a/server/src/domain/asset/asset.service.spec.ts
+++ b/server/src/domain/asset/asset.service.spec.ts
@@ -1,21 +1,48 @@
-import { assetEntityStub, authStub, newAssetRepositoryMock } from '@test';
+import { BadRequestException } from '@nestjs/common';
+import {
+  assetEntityStub,
+  authStub,
+  IAccessRepositoryMock,
+  newAccessRepositoryMock,
+  newAssetRepositoryMock,
+  newStorageRepositoryMock,
+} from '@test';
 import { when } from 'jest-when';
-import { AssetService, IAssetRepository, mapAsset } from '.';
+import { Readable } from 'stream';
+import { IStorageRepository } from '../storage';
+import { IAssetRepository } from './asset.repository';
+import { AssetService } from './asset.service';
+import { DownloadResponseDto } from './index';
+import { mapAsset } from './response-dto';
+
+const downloadResponse: DownloadResponseDto = {
+  totalSize: 105_000,
+  archives: [
+    {
+      assetIds: ['asset-id', 'asset-id'],
+      size: 105_000,
+    },
+  ],
+};
 
 describe(AssetService.name, () => {
   let sut: AssetService;
+  let accessMock: IAccessRepositoryMock;
   let assetMock: jest.Mocked<IAssetRepository>;
+  let storageMock: jest.Mocked<IStorageRepository>;
 
   it('should work', () => {
     expect(sut).toBeDefined();
   });
 
   beforeEach(async () => {
+    accessMock = newAccessRepositoryMock();
     assetMock = newAssetRepositoryMock();
-    sut = new AssetService(assetMock);
+    storageMock = newStorageRepositoryMock();
+    sut = new AssetService(accessMock, assetMock, storageMock);
   });
 
-  describe('get map markers', () => {
+  describe('getMapMarkers', () => {
     it('should get geo information of assets', async () => {
       assetMock.getMapMarkers.mockResolvedValue(
         [assetEntityStub.withLocation].map((asset) => ({
@@ -76,25 +103,191 @@ describe(AssetService.name, () => {
         [authStub.admin.id, new Date('2021-06-15T05:00:00.000Z')],
       ]);
     });
+
+    it('should set the title correctly', async () => {
+      when(assetMock.getByDate)
+        .calledWith(authStub.admin.id, new Date('2022-06-15T00:00:00.000Z'))
+        .mockResolvedValue([assetEntityStub.image]);
+      when(assetMock.getByDate)
+        .calledWith(authStub.admin.id, new Date('2021-06-15T00:00:00.000Z'))
+        .mockResolvedValue([assetEntityStub.video]);
+
+      await expect(sut.getMemoryLane(authStub.admin, { timestamp: new Date(2023, 5, 15), years: 2 })).resolves.toEqual([
+        { title: '1 year since...', assets: [mapAsset(assetEntityStub.image)] },
+        { title: '2 years since...', assets: [mapAsset(assetEntityStub.video)] },
+      ]);
+
+      expect(assetMock.getByDate).toHaveBeenCalledTimes(2);
+      expect(assetMock.getByDate.mock.calls).toEqual([
+        [authStub.admin.id, new Date('2022-06-15T00:00:00.000Z')],
+        [authStub.admin.id, new Date('2021-06-15T00:00:00.000Z')],
+      ]);
+    });
   });
 
-  it('should set the title correctly', async () => {
-    when(assetMock.getByDate)
-      .calledWith(authStub.admin.id, new Date('2022-06-15T00:00:00.000Z'))
-      .mockResolvedValue([assetEntityStub.image]);
-    when(assetMock.getByDate)
-      .calledWith(authStub.admin.id, new Date('2021-06-15T00:00:00.000Z'))
-      .mockResolvedValue([assetEntityStub.video]);
+  describe('downloadFile', () => {
+    it('should require the asset.download permission', async () => {
+      accessMock.asset.hasOwnerAccess.mockResolvedValue(false);
+      accessMock.asset.hasAlbumAccess.mockResolvedValue(false);
+      accessMock.asset.hasPartnerAccess.mockResolvedValue(false);
 
-    await expect(sut.getMemoryLane(authStub.admin, { timestamp: new Date(2023, 5, 15), years: 2 })).resolves.toEqual([
-      { title: '1 year since...', assets: [mapAsset(assetEntityStub.image)] },
-      { title: '2 years since...', assets: [mapAsset(assetEntityStub.video)] },
-    ]);
+      await expect(sut.downloadFile(authStub.admin, 'asset-1')).rejects.toBeInstanceOf(BadRequestException);
 
-    expect(assetMock.getByDate).toHaveBeenCalledTimes(2);
-    expect(assetMock.getByDate.mock.calls).toEqual([
-      [authStub.admin.id, new Date('2022-06-15T00:00:00.000Z')],
-      [authStub.admin.id, new Date('2021-06-15T00:00:00.000Z')],
-    ]);
+      expect(accessMock.asset.hasOwnerAccess).toHaveBeenCalledWith(authStub.admin.id, 'asset-1');
+      expect(accessMock.asset.hasAlbumAccess).toHaveBeenCalledWith(authStub.admin.id, 'asset-1');
+      expect(accessMock.asset.hasPartnerAccess).toHaveBeenCalledWith(authStub.admin.id, 'asset-1');
+    });
+
+    it('should throw an error if the asset is not found', async () => {
+      accessMock.asset.hasOwnerAccess.mockResolvedValue(true);
+      assetMock.getByIds.mockResolvedValue([]);
+
+      await expect(sut.downloadFile(authStub.admin, 'asset-1')).rejects.toBeInstanceOf(BadRequestException);
+
+      expect(assetMock.getByIds).toHaveBeenCalledWith(['asset-1']);
+    });
+
+    it('should download a file', async () => {
+      const stream = new Readable();
+
+      accessMock.asset.hasOwnerAccess.mockResolvedValue(true);
+      assetMock.getByIds.mockResolvedValue([assetEntityStub.image]);
+      storageMock.createReadStream.mockResolvedValue({ stream });
+
+      await expect(sut.downloadFile(authStub.admin, 'asset-1')).resolves.toEqual({ stream });
+
+      expect(storageMock.createReadStream).toHaveBeenCalledWith(
+        assetEntityStub.image.originalPath,
+        assetEntityStub.image.mimeType,
+      );
+    });
+
+    it('should download an archive', async () => {
+      const archiveMock = {
+        addFile: jest.fn(),
+        finalize: jest.fn(),
+        stream: new Readable(),
+      };
+
+      accessMock.asset.hasOwnerAccess.mockResolvedValue(true);
+      assetMock.getByIds.mockResolvedValue([assetEntityStub.noResizePath, assetEntityStub.noWebpPath]);
+      storageMock.createZipStream.mockReturnValue(archiveMock);
+
+      await expect(sut.downloadArchive(authStub.admin, { assetIds: ['asset-1', 'asset-2'] })).resolves.toEqual({
+        stream: archiveMock.stream,
+      });
+
+      expect(archiveMock.addFile).toHaveBeenCalledTimes(2);
+      expect(archiveMock.addFile).toHaveBeenNthCalledWith(1, 'upload/library/IMG_123.jpg', 'IMG_123.jpg');
+      expect(archiveMock.addFile).toHaveBeenNthCalledWith(2, 'upload/library/IMG_456.jpg', 'IMG_456.jpg');
+    });
+
+    it('should handle duplicate file names', async () => {
+      const archiveMock = {
+        addFile: jest.fn(),
+        finalize: jest.fn(),
+        stream: new Readable(),
+      };
+
+      accessMock.asset.hasOwnerAccess.mockResolvedValue(true);
+      assetMock.getByIds.mockResolvedValue([assetEntityStub.noResizePath, assetEntityStub.noResizePath]);
+      storageMock.createZipStream.mockReturnValue(archiveMock);
+
+      await expect(sut.downloadArchive(authStub.admin, { assetIds: ['asset-1', 'asset-2'] })).resolves.toEqual({
+        stream: archiveMock.stream,
+      });
+
+      expect(archiveMock.addFile).toHaveBeenCalledTimes(2);
+      expect(archiveMock.addFile).toHaveBeenNthCalledWith(1, 'upload/library/IMG_123.jpg', 'IMG_123.jpg');
+      expect(archiveMock.addFile).toHaveBeenNthCalledWith(2, 'upload/library/IMG_123.jpg', 'IMG_123+1.jpg');
+    });
+  });
+
+  describe('getDownloadInfo', () => {
+    it('should throw an error for an invalid dto', async () => {
+      await expect(sut.getDownloadInfo(authStub.admin, {})).rejects.toBeInstanceOf(BadRequestException);
+    });
+
+    it('should return a list of archives (assetIds)', async () => {
+      accessMock.asset.hasOwnerAccess.mockResolvedValue(true);
+      assetMock.getByIds.mockResolvedValue([assetEntityStub.image, assetEntityStub.video]);
+
+      const assetIds = ['asset-1', 'asset-2'];
+      await expect(sut.getDownloadInfo(authStub.admin, { assetIds })).resolves.toEqual(downloadResponse);
+
+      expect(assetMock.getByIds).toHaveBeenCalledWith(['asset-1', 'asset-2']);
+    });
+
+    it('should return a list of archives (albumId)', async () => {
+      accessMock.album.hasOwnerAccess.mockResolvedValue(true);
+      assetMock.getByAlbumId.mockResolvedValue({
+        items: [assetEntityStub.image, assetEntityStub.video],
+        hasNextPage: false,
+      });
+
+      await expect(sut.getDownloadInfo(authStub.admin, { albumId: 'album-1' })).resolves.toEqual(downloadResponse);
+
+      expect(accessMock.album.hasOwnerAccess).toHaveBeenCalledWith(authStub.admin.id, 'album-1');
+      expect(assetMock.getByAlbumId).toHaveBeenCalledWith({ take: 2500, skip: 0 }, 'album-1');
+    });
+
+    it('should return a list of archives (userId)', async () => {
+      assetMock.getByUserId.mockResolvedValue({
+        items: [assetEntityStub.image, assetEntityStub.video],
+        hasNextPage: false,
+      });
+
+      await expect(sut.getDownloadInfo(authStub.admin, { userId: authStub.admin.id })).resolves.toEqual(
+        downloadResponse,
+      );
+
+      expect(assetMock.getByUserId).toHaveBeenCalledWith({ take: 2500, skip: 0 }, authStub.admin.id);
+    });
+
+    it('should split archives by size', async () => {
+      assetMock.getByUserId.mockResolvedValue({
+        items: [
+          { ...assetEntityStub.image, id: 'asset-1' },
+          { ...assetEntityStub.video, id: 'asset-2' },
+          { ...assetEntityStub.withLocation, id: 'asset-3' },
+          { ...assetEntityStub.noWebpPath, id: 'asset-4' },
+        ],
+        hasNextPage: false,
+      });
+
+      await expect(
+        sut.getDownloadInfo(authStub.admin, {
+          userId: authStub.admin.id,
+          archiveSize: 30_000,
+        }),
+      ).resolves.toEqual({
+        totalSize: 251_456,
+        archives: [
+          { assetIds: ['asset-1', 'asset-2'], size: 105_000 },
+          { assetIds: ['asset-3', 'asset-4'], size: 146_456 },
+        ],
+      });
+    });
+
+    it('should include the video portion of a live photo', async () => {
+      accessMock.asset.hasOwnerAccess.mockResolvedValue(true);
+      when(assetMock.getByIds)
+        .calledWith([assetEntityStub.livePhotoStillAsset.id])
+        .mockResolvedValue([assetEntityStub.livePhotoStillAsset]);
+      when(assetMock.getByIds)
+        .calledWith([assetEntityStub.livePhotoMotionAsset.id])
+        .mockResolvedValue([assetEntityStub.livePhotoMotionAsset]);
+
+      const assetIds = [assetEntityStub.livePhotoStillAsset.id];
+      await expect(sut.getDownloadInfo(authStub.admin, { assetIds })).resolves.toEqual({
+        totalSize: 125_000,
+        archives: [
+          {
+            assetIds: [assetEntityStub.livePhotoStillAsset.id, assetEntityStub.livePhotoMotionAsset.id],
+            size: 125_000,
+          },
+        ],
+      });
+    });
   });
 });
diff --git a/server/src/domain/asset/asset.service.ts b/server/src/domain/asset/asset.service.ts
index 230192e11..51d3afb8d 100644
--- a/server/src/domain/asset/asset.service.ts
+++ b/server/src/domain/asset/asset.service.ts
@@ -1,14 +1,27 @@
-import { Inject } from '@nestjs/common';
+import { BadRequestException, Inject } from '@nestjs/common';
 import { DateTime } from 'luxon';
+import { extname } from 'path';
+import { AssetEntity } from '../../infra/entities/asset.entity';
 import { AuthUserDto } from '../auth';
+import { HumanReadableSize, usePagination } from '../domain.util';
+import { AccessCore, IAccessRepository, Permission } from '../index';
+import { ImmichReadStream, IStorageRepository } from '../storage';
 import { IAssetRepository } from './asset.repository';
-import { MemoryLaneDto } from './dto';
+import { AssetIdsDto, DownloadArchiveInfo, DownloadDto, DownloadResponseDto, MemoryLaneDto } from './dto';
 import { MapMarkerDto } from './dto/map-marker.dto';
 import { mapAsset, MapMarkerResponseDto } from './response-dto';
 import { MemoryLaneResponseDto } from './response-dto/memory-lane-response.dto';
 
 export class AssetService {
-  constructor(@Inject(IAssetRepository) private assetRepository: IAssetRepository) {}
+  private access: AccessCore;
+
+  constructor(
+    @Inject(IAccessRepository) accessRepository: IAccessRepository,
+    @Inject(IAssetRepository) private assetRepository: IAssetRepository,
+    @Inject(IStorageRepository) private storageRepository: IStorageRepository,
+  ) {
+    this.access = new AccessCore(accessRepository);
+  }
 
   getMapMarkers(authUser: AuthUserDto, options: MapMarkerDto): Promise<MapMarkerResponseDto[]> {
     return this.assetRepository.getMapMarkers(authUser.id, options);
@@ -32,4 +45,102 @@ export class AssetService {
 
     return Promise.all(requests).then((results) => results.filter((result) => result.assets.length > 0));
   }
+
+  async downloadFile(authUser: AuthUserDto, id: string): Promise<ImmichReadStream> {
+    await this.access.requirePermission(authUser, Permission.ASSET_DOWNLOAD, id);
+
+    const [asset] = await this.assetRepository.getByIds([id]);
+    if (!asset) {
+      throw new BadRequestException('Asset not found');
+    }
+
+    return this.storageRepository.createReadStream(asset.originalPath, asset.mimeType);
+  }
+
+  async getDownloadInfo(authUser: AuthUserDto, dto: DownloadDto): Promise<DownloadResponseDto> {
+    const targetSize = dto.archiveSize || HumanReadableSize.GiB * 4;
+    const archives: DownloadArchiveInfo[] = [];
+    let archive: DownloadArchiveInfo = { size: 0, assetIds: [] };
+
+    const assetPagination = await this.getDownloadAssets(authUser, dto);
+    for await (const assets of assetPagination) {
+      // motion part of live photos
+      const motionIds = assets.map((asset) => asset.livePhotoVideoId).filter<string>((id): id is string => !!id);
+      if (motionIds.length > 0) {
+        assets.push(...(await this.assetRepository.getByIds(motionIds)));
+      }
+
+      for (const asset of assets) {
+        archive.size += Number(asset.exifInfo?.fileSizeInByte || 0);
+        archive.assetIds.push(asset.id);
+
+        if (archive.size > targetSize) {
+          archives.push(archive);
+          archive = { size: 0, assetIds: [] };
+        }
+      }
+
+      if (archive.assetIds.length > 0) {
+        archives.push(archive);
+      }
+    }
+
+    return {
+      totalSize: archives.reduce((total, item) => (total += item.size), 0),
+      archives,
+    };
+  }
+
+  async downloadArchive(authUser: AuthUserDto, dto: AssetIdsDto): Promise<ImmichReadStream> {
+    await this.access.requirePermission(authUser, Permission.ASSET_DOWNLOAD, dto.assetIds);
+
+    const zip = this.storageRepository.createZipStream();
+    const assets = await this.assetRepository.getByIds(dto.assetIds);
+    const paths: Record<string, boolean> = {};
+
+    for (const { originalPath, originalFileName } of assets) {
+      const ext = extname(originalPath);
+      let filename = `${originalFileName}${ext}`;
+      for (let i = 0; i < 10_000; i++) {
+        if (!paths[filename]) {
+          break;
+        }
+        filename = `${originalFileName}+${i + 1}${ext}`;
+      }
+
+      paths[filename] = true;
+      zip.addFile(originalPath, filename);
+    }
+
+    zip.finalize();
+
+    return { stream: zip.stream };
+  }
+
+  private async getDownloadAssets(authUser: AuthUserDto, dto: DownloadDto): Promise<AsyncGenerator<AssetEntity[]>> {
+    const PAGINATION_SIZE = 2500;
+
+    if (dto.assetIds) {
+      const assetIds = dto.assetIds;
+      await this.access.requirePermission(authUser, Permission.ASSET_DOWNLOAD, assetIds);
+      const assets = await this.assetRepository.getByIds(assetIds);
+      return (async function* () {
+        yield assets;
+      })();
+    }
+
+    if (dto.albumId) {
+      const albumId = dto.albumId;
+      await this.access.requirePermission(authUser, Permission.ALBUM_DOWNLOAD, albumId);
+      return usePagination(PAGINATION_SIZE, (pagination) => this.assetRepository.getByAlbumId(pagination, albumId));
+    }
+
+    if (dto.userId) {
+      const userId = dto.userId;
+      await this.access.requirePermission(authUser, Permission.LIBRARY_DOWNLOAD, userId);
+      return usePagination(PAGINATION_SIZE, (pagination) => this.assetRepository.getByUserId(pagination, userId));
+    }
+
+    throw new BadRequestException('assetIds, albumId, or userId is required');
+  }
 }
diff --git a/server/src/domain/asset/dto/download.dto.ts b/server/src/domain/asset/dto/download.dto.ts
new file mode 100644
index 000000000..cb6b8f7dd
--- /dev/null
+++ b/server/src/domain/asset/dto/download.dto.ts
@@ -0,0 +1,31 @@
+import { ValidateUUID } from '@app/immich/decorators/validate-uuid.decorator';
+import { ApiProperty } from '@nestjs/swagger';
+import { IsInt, IsOptional, IsPositive } from 'class-validator';
+
+export class DownloadDto {
+  @ValidateUUID({ each: true, optional: true })
+  assetIds?: string[];
+
+  @ValidateUUID({ optional: true })
+  albumId?: string;
+
+  @ValidateUUID({ optional: true })
+  userId?: string;
+
+  @IsInt()
+  @IsPositive()
+  @IsOptional()
+  archiveSize?: number;
+}
+
+export class DownloadResponseDto {
+  @ApiProperty({ type: 'integer' })
+  totalSize!: number;
+  archives!: DownloadArchiveInfo[];
+}
+
+export class DownloadArchiveInfo {
+  @ApiProperty({ type: 'integer' })
+  size!: number;
+  assetIds!: string[];
+}
diff --git a/server/src/domain/asset/dto/index.ts b/server/src/domain/asset/dto/index.ts
index 130f28144..9778a9122 100644
--- a/server/src/domain/asset/dto/index.ts
+++ b/server/src/domain/asset/dto/index.ts
@@ -1,3 +1,4 @@
 export * from './asset-ids.dto';
+export * from './download.dto';
 export * from './map-marker.dto';
 export * from './memory-lane.dto';
diff --git a/server/src/domain/storage/storage.repository.ts b/server/src/domain/storage/storage.repository.ts
index 4ff1b5c01..7d312c075 100644
--- a/server/src/domain/storage/storage.repository.ts
+++ b/server/src/domain/storage/storage.repository.ts
@@ -1,9 +1,14 @@
-import { ReadStream } from 'fs';
+import { Readable } from 'stream';
 
 export interface ImmichReadStream {
-  stream: ReadStream;
-  type: string;
-  length: number;
+  stream: Readable;
+  type?: string;
+  length?: number;
+}
+
+export interface ImmichZipStream extends ImmichReadStream {
+  addFile: (inputPath: string, filename: string) => void;
+  finalize: () => Promise<void>;
 }
 
 export interface DiskUsage {
@@ -15,7 +20,8 @@ export interface DiskUsage {
 export const IStorageRepository = 'IStorageRepository';
 
 export interface IStorageRepository {
-  createReadStream(filepath: string, mimeType: string): Promise<ImmichReadStream>;
+  createZipStream(): ImmichZipStream;
+  createReadStream(filepath: string, mimeType?: string | null): Promise<ImmichReadStream>;
   unlink(filepath: string): Promise<void>;
   unlinkDir(folder: string, options?: { recursive?: boolean; force?: boolean }): Promise<void>;
   removeEmptyDirs(folder: string): Promise<void>;
diff --git a/server/src/immich/api-v1/album/album.controller.ts b/server/src/immich/api-v1/album/album.controller.ts
index 5349f5d65..021cc04ce 100644
--- a/server/src/immich/api-v1/album/album.controller.ts
+++ b/server/src/immich/api-v1/album/album.controller.ts
@@ -1,13 +1,10 @@
 import { AlbumResponseDto } from '@app/domain';
-import { Body, Controller, Delete, Get, Param, Put, Query, Response } from '@nestjs/common';
-import { ApiOkResponse, ApiTags } from '@nestjs/swagger';
-import { Response as Res } from 'express';
-import { handleDownload } from '../../app.utils';
+import { Body, Controller, Delete, Get, Param, Put } from '@nestjs/common';
+import { ApiTags } from '@nestjs/swagger';
 import { UUIDParamDto } from '../../controllers/dto/uuid-param.dto';
 import { AuthUser, AuthUserDto } from '../../decorators/auth-user.decorator';
 import { Authenticated, SharedLinkRoute } from '../../decorators/authenticated.decorator';
 import { UseValidation } from '../../decorators/use-validation.decorator';
-import { DownloadDto } from '../asset/dto/download-library.dto';
 import { AlbumService } from './album.service';
 import { AddAssetsDto } from './dto/add-assets.dto';
 import { RemoveAssetsDto } from './dto/remove-assets.dto';
@@ -18,7 +15,7 @@ import { AddAssetsResponseDto } from './response-dto/add-assets-response.dto';
 @Authenticated()
 @UseValidation()
 export class AlbumController {
-  constructor(private readonly service: AlbumService) {}
+  constructor(private service: AlbumService) {}
 
   @SharedLinkRoute()
   @Put(':id/assets')
@@ -46,16 +43,4 @@ export class AlbumController {
   ): Promise<AlbumResponseDto> {
     return this.service.removeAssets(authUser, id, dto);
   }
-
-  @SharedLinkRoute()
-  @Get(':id/download')
-  @ApiOkResponse({ content: { 'application/zip': { schema: { type: 'string', format: 'binary' } } } })
-  downloadArchive(
-    @AuthUser() authUser: AuthUserDto,
-    @Param() { id }: UUIDParamDto,
-    @Query() dto: DownloadDto,
-    @Response({ passthrough: true }) res: Res,
-  ) {
-    return this.service.downloadArchive(authUser, id, dto).then((download) => handleDownload(download, res));
-  }
 }
diff --git a/server/src/immich/api-v1/album/album.module.ts b/server/src/immich/api-v1/album/album.module.ts
index 3b09fd6ea..e241f9635 100644
--- a/server/src/immich/api-v1/album/album.module.ts
+++ b/server/src/immich/api-v1/album/album.module.ts
@@ -1,13 +1,12 @@
 import { AlbumEntity, AssetEntity } from '@app/infra/entities';
 import { Module } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
-import { DownloadModule } from '../../modules/download/download.module';
 import { AlbumRepository, IAlbumRepository } from './album-repository';
 import { AlbumController } from './album.controller';
 import { AlbumService } from './album.service';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([AlbumEntity, AssetEntity]), DownloadModule],
+  imports: [TypeOrmModule.forFeature([AlbumEntity, AssetEntity])],
   controllers: [AlbumController],
   providers: [AlbumService, { provide: IAlbumRepository, useClass: AlbumRepository }],
 })
diff --git a/server/src/immich/api-v1/album/album.service.spec.ts b/server/src/immich/api-v1/album/album.service.spec.ts
index 77ccbb67a..1215e6990 100644
--- a/server/src/immich/api-v1/album/album.service.spec.ts
+++ b/server/src/immich/api-v1/album/album.service.spec.ts
@@ -3,7 +3,6 @@ import { AlbumEntity, UserEntity } from '@app/infra/entities';
 import { ForbiddenException, NotFoundException } from '@nestjs/common';
 import { userEntityStub } from '@test';
 import { AuthUserDto } from '../../decorators/auth-user.decorator';
-import { DownloadService } from '../../modules/download/download.service';
 import { IAlbumRepository } from './album-repository';
 import { AlbumService } from './album.service';
 import { AddAssetsResponseDto } from './response-dto/add-assets-response.dto';
@@ -11,7 +10,6 @@ import { AddAssetsResponseDto } from './response-dto/add-assets-response.dto';
 describe('Album service', () => {
   let sut: AlbumService;
   let albumRepositoryMock: jest.Mocked<IAlbumRepository>;
-  let downloadServiceMock: jest.Mocked<Partial<DownloadService>>;
 
   const authUser: AuthUserDto = Object.freeze({
     id: '1111',
@@ -98,11 +96,7 @@ describe('Album service', () => {
       updateThumbnails: jest.fn(),
     };
 
-    downloadServiceMock = {
-      downloadArchive: jest.fn(),
-    };
-
-    sut = new AlbumService(albumRepositoryMock, downloadServiceMock as DownloadService);
+    sut = new AlbumService(albumRepositoryMock);
   });
 
   it('gets an owned album', async () => {
diff --git a/server/src/immich/api-v1/album/album.service.ts b/server/src/immich/api-v1/album/album.service.ts
index 7e5e551e0..5f7fc834e 100644
--- a/server/src/immich/api-v1/album/album.service.ts
+++ b/server/src/immich/api-v1/album/album.service.ts
@@ -2,8 +2,6 @@ import { AlbumResponseDto, mapAlbum } from '@app/domain';
 import { AlbumEntity } from '@app/infra/entities';
 import { BadRequestException, ForbiddenException, Inject, Injectable, Logger, NotFoundException } from '@nestjs/common';
 import { AuthUserDto } from '../../decorators/auth-user.decorator';
-import { DownloadService } from '../../modules/download/download.service';
-import { DownloadDto } from '../asset/dto/download-library.dto';
 import { IAlbumRepository } from './album-repository';
 import { AddAssetsDto } from './dto/add-assets.dto';
 import { RemoveAssetsDto } from './dto/remove-assets.dto';
@@ -13,10 +11,7 @@ import { AddAssetsResponseDto } from './response-dto/add-assets-response.dto';
 export class AlbumService {
   private logger = new Logger(AlbumService.name);
 
-  constructor(
-    @Inject(IAlbumRepository) private albumRepository: IAlbumRepository,
-    private downloadService: DownloadService,
-  ) {}
+  constructor(@Inject(IAlbumRepository) private repository: IAlbumRepository) {}
 
   private async _getAlbum({
     authUser,
@@ -27,9 +22,9 @@ export class AlbumService {
     albumId: string;
     validateIsOwner?: boolean;
   }): Promise<AlbumEntity> {
-    await this.albumRepository.updateThumbnails();
+    await this.repository.updateThumbnails();
 
-    const album = await this.albumRepository.get(albumId);
+    const album = await this.repository.get(albumId);
     if (!album) {
       throw new NotFoundException('Album Not Found');
     }
@@ -50,7 +45,7 @@ export class AlbumService {
 
   async removeAssets(authUser: AuthUserDto, albumId: string, dto: RemoveAssetsDto): Promise<AlbumResponseDto> {
     const album = await this._getAlbum({ authUser, albumId });
-    const deletedCount = await this.albumRepository.removeAssets(album, dto);
+    const deletedCount = await this.repository.removeAssets(album, dto);
     const newAlbum = await this._getAlbum({ authUser, albumId });
 
     if (deletedCount !== dto.assetIds.length) {
@@ -67,7 +62,7 @@ export class AlbumService {
     }
 
     const album = await this._getAlbum({ authUser, albumId, validateIsOwner: false });
-    const result = await this.albumRepository.addAssets(album, dto);
+    const result = await this.repository.addAssets(album, dto);
     const newAlbum = await this._getAlbum({ authUser, albumId, validateIsOwner: false });
 
     return {
@@ -75,19 +70,4 @@ export class AlbumService {
       album: mapAlbum(newAlbum),
     };
   }
-
-  async downloadArchive(authUser: AuthUserDto, albumId: string, dto: DownloadDto) {
-    this.checkDownloadAccess(authUser);
-
-    const album = await this._getAlbum({ authUser, albumId, validateIsOwner: false });
-    const assets = (album.assets || []).map((asset) => asset).slice(dto.skip || 0);
-
-    return this.downloadService.downloadArchive(album.albumName, assets);
-  }
-
-  private checkDownloadAccess(authUser: AuthUserDto) {
-    if (authUser.isPublicUser && !authUser.isAllowDownload) {
-      throw new ForbiddenException();
-    }
-  }
 }
diff --git a/server/src/immich/api-v1/asset/asset.controller.ts b/server/src/immich/api-v1/asset/asset.controller.ts
index e7cc8a4b1..53e323a0b 100644
--- a/server/src/immich/api-v1/asset/asset.controller.ts
+++ b/server/src/immich/api-v1/asset/asset.controller.ts
@@ -1,4 +1,4 @@
-import { AssetResponseDto, ImmichReadStream } from '@app/domain';
+import { AssetResponseDto } from '@app/domain';
 import {
   Body,
   Controller,
@@ -14,7 +14,6 @@ import {
   Put,
   Query,
   Response,
-  StreamableFile,
   UploadedFiles,
   UseInterceptors,
   ValidationPipe,
@@ -22,7 +21,6 @@ import {
 import { FileFieldsInterceptor } from '@nestjs/platform-express';
 import { ApiBody, ApiConsumes, ApiHeader, ApiOkResponse, ApiTags } from '@nestjs/swagger';
 import { Response as Res } from 'express';
-import { handleDownload } from '../../app.utils';
 import { assetUploadOption, ImmichFile } from '../../config/asset-upload.config';
 import { UUIDParamDto } from '../../controllers/dto/uuid-param.dto';
 import { AuthUser, AuthUserDto } from '../../decorators/auth-user.decorator';
@@ -36,8 +34,6 @@ import { CheckExistingAssetsDto } from './dto/check-existing-assets.dto';
 import { CreateAssetDto, ImportAssetDto, mapToUploadFile } from './dto/create-asset.dto';
 import { DeleteAssetDto } from './dto/delete-asset.dto';
 import { DeviceIdDto } from './dto/device-id.dto';
-import { DownloadFilesDto } from './dto/download-files.dto';
-import { DownloadDto } from './dto/download-library.dto';
 import { GetAssetByTimeBucketDto } from './dto/get-asset-by-time-bucket.dto';
 import { GetAssetCountByTimeBucketDto } from './dto/get-asset-count-by-time-bucket.dto';
 import { GetAssetThumbnailDto } from './dto/get-asset-thumbnail.dto';
@@ -54,10 +50,6 @@ import { CuratedLocationsResponseDto } from './response-dto/curated-locations-re
 import { CuratedObjectsResponseDto } from './response-dto/curated-objects-response.dto';
 import { DeleteAssetResponseDto } from './response-dto/delete-asset-response.dto';
 
-function asStreamableFile({ stream, type, length }: ImmichReadStream) {
-  return new StreamableFile(stream, { type, length });
-}
-
 interface UploadFiles {
   assetData: ImmichFile[];
   livePhotoData?: ImmichFile[];
@@ -128,38 +120,6 @@ export class AssetController {
     return responseDto;
   }
 
-  @SharedLinkRoute()
-  @Get('/download/:id')
-  @ApiOkResponse({ content: { 'application/octet-stream': { schema: { type: 'string', format: 'binary' } } } })
-  downloadFile(@AuthUser() authUser: AuthUserDto, @Param() { id }: UUIDParamDto) {
-    return this.assetService.downloadFile(authUser, id).then(asStreamableFile);
-  }
-
-  @SharedLinkRoute()
-  @Post('/download-files')
-  @ApiOkResponse({ content: { 'application/octet-stream': { schema: { type: 'string', format: 'binary' } } } })
-  downloadFiles(
-    @AuthUser() authUser: AuthUserDto,
-    @Response({ passthrough: true }) res: Res,
-    @Body(new ValidationPipe()) dto: DownloadFilesDto,
-  ) {
-    return this.assetService.downloadFiles(authUser, dto).then((download) => handleDownload(download, res));
-  }
-
-  /**
-   * Current this is not used in any UI element
-   */
-  @SharedLinkRoute()
-  @Get('/download-library')
-  @ApiOkResponse({ content: { 'application/octet-stream': { schema: { type: 'string', format: 'binary' } } } })
-  downloadLibrary(
-    @AuthUser() authUser: AuthUserDto,
-    @Query(new ValidationPipe({ transform: true })) dto: DownloadDto,
-    @Response({ passthrough: true }) res: Res,
-  ) {
-    return this.assetService.downloadLibrary(authUser, dto).then((download) => handleDownload(download, res));
-  }
-
   @SharedLinkRoute()
   @Get('/file/:id')
   @Header('Cache-Control', 'private, max-age=86400, no-transform')
diff --git a/server/src/immich/api-v1/asset/asset.module.ts b/server/src/immich/api-v1/asset/asset.module.ts
index 1f633d955..2d9cdd4fe 100644
--- a/server/src/immich/api-v1/asset/asset.module.ts
+++ b/server/src/immich/api-v1/asset/asset.module.ts
@@ -1,17 +1,12 @@
 import { AssetEntity, ExifEntity } from '@app/infra/entities';
 import { Module } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
-import { DownloadModule } from '../../modules/download/download.module';
 import { AssetRepository, IAssetRepository } from './asset-repository';
 import { AssetController } from './asset.controller';
 import { AssetService } from './asset.service';
 
 @Module({
-  imports: [
-    //
-    TypeOrmModule.forFeature([AssetEntity, ExifEntity]),
-    DownloadModule,
-  ],
+  imports: [TypeOrmModule.forFeature([AssetEntity, ExifEntity])],
   controllers: [AssetController],
   providers: [AssetService, { provide: IAssetRepository, useClass: AssetRepository }],
 })
diff --git a/server/src/immich/api-v1/asset/asset.service.spec.ts b/server/src/immich/api-v1/asset/asset.service.spec.ts
index 5963aa0a6..de236ca5f 100644
--- a/server/src/immich/api-v1/asset/asset.service.spec.ts
+++ b/server/src/immich/api-v1/asset/asset.service.spec.ts
@@ -13,7 +13,6 @@ import {
 } from '@test';
 import { when } from 'jest-when';
 import { QueryFailedError, Repository } from 'typeorm';
-import { DownloadService } from '../../modules/download/download.service';
 import { IAssetRepository } from './asset-repository';
 import { AssetService } from './asset.service';
 import { CreateAssetDto } from './dto/create-asset.dto';
@@ -124,7 +123,6 @@ describe('AssetService', () => {
   let accessMock: IAccessRepositoryMock;
   let assetRepositoryMock: jest.Mocked<IAssetRepository>;
   let cryptoMock: jest.Mocked<ICryptoRepository>;
-  let downloadServiceMock: jest.Mocked<Partial<DownloadService>>;
   let jobMock: jest.Mocked<IJobRepository>;
   let storageMock: jest.Mocked<IStorageRepository>;
 
@@ -152,24 +150,12 @@ describe('AssetService', () => {
 
     cryptoMock = newCryptoRepositoryMock();
 
-    downloadServiceMock = {
-      downloadArchive: jest.fn(),
-    };
-
     accessMock = newAccessRepositoryMock();
     cryptoMock = newCryptoRepositoryMock();
     jobMock = newJobRepositoryMock();
     storageMock = newStorageRepositoryMock();
 
-    sut = new AssetService(
-      accessMock,
-      assetRepositoryMock,
-      a,
-      cryptoMock,
-      downloadServiceMock as DownloadService,
-      jobMock,
-      storageMock,
-    );
+    sut = new AssetService(accessMock, assetRepositoryMock, a, cryptoMock, jobMock, storageMock);
 
     when(assetRepositoryMock.get)
       .calledWith(assetEntityStub.livePhotoStillAsset.id)
@@ -398,27 +384,6 @@ describe('AssetService', () => {
     });
   });
 
-  // describe('checkDownloadAccess', () => {
-  //   it('should validate download access', async () => {
-  //     await sut.checkDownloadAccess(authStub.adminSharedLink);
-  //   });
-
-  //   it('should not allow when user is not allowed to download', async () => {
-  //     expect(() => sut.checkDownloadAccess(authStub.readonlySharedLink)).toThrow(ForbiddenException);
-  //   });
-  // });
-
-  describe('downloadFile', () => {
-    it('should download a single file', async () => {
-      accessMock.asset.hasOwnerAccess.mockResolvedValue(true);
-      assetRepositoryMock.get.mockResolvedValue(_getAsset_1());
-
-      await sut.downloadFile(authStub.admin, 'id_1');
-
-      expect(storageMock.createReadStream).toHaveBeenCalledWith('fake_path/asset_1.jpeg', 'image/jpeg');
-    });
-  });
-
   describe('bulkUploadCheck', () => {
     it('should accept hex and base64 checksums', async () => {
       const file1 = Buffer.from('d2947b871a706081be194569951b7db246907957', 'hex');
diff --git a/server/src/immich/api-v1/asset/asset.service.ts b/server/src/immich/api-v1/asset/asset.service.ts
index 53335ceaf..1b1dd00ee 100644
--- a/server/src/immich/api-v1/asset/asset.service.ts
+++ b/server/src/immich/api-v1/asset/asset.service.ts
@@ -6,7 +6,6 @@ import {
   IAccessRepository,
   ICryptoRepository,
   IJobRepository,
-  ImmichReadStream,
   isSupportedFileType,
   IStorageRepository,
   JobName,
@@ -33,7 +32,6 @@ import mime from 'mime-types';
 import path from 'path';
 import { QueryFailedError, Repository } from 'typeorm';
 import { promisify } from 'util';
-import { DownloadService } from '../../modules/download/download.service';
 import { IAssetRepository } from './asset-repository';
 import { AssetCore } from './asset.core';
 import { AssetBulkUploadCheckDto } from './dto/asset-check.dto';
@@ -42,8 +40,6 @@ import { CheckDuplicateAssetDto } from './dto/check-duplicate-asset.dto';
 import { CheckExistingAssetsDto } from './dto/check-existing-assets.dto';
 import { CreateAssetDto, ImportAssetDto, UploadFile } from './dto/create-asset.dto';
 import { DeleteAssetDto } from './dto/delete-asset.dto';
-import { DownloadFilesDto } from './dto/download-files.dto';
-import { DownloadDto } from './dto/download-library.dto';
 import { GetAssetByTimeBucketDto } from './dto/get-asset-by-time-bucket.dto';
 import { GetAssetCountByTimeBucketDto } from './dto/get-asset-count-by-time-bucket.dto';
 import { GetAssetThumbnailDto, GetAssetThumbnailFormatEnum } from './dto/get-asset-thumbnail.dto';
@@ -86,7 +82,6 @@ export class AssetService {
     @Inject(IAssetRepository) private _assetRepository: IAssetRepository,
     @InjectRepository(AssetEntity) private assetRepository: Repository<AssetEntity>,
     @Inject(ICryptoRepository) private cryptoRepository: ICryptoRepository,
-    private downloadService: DownloadService,
     @Inject(IJobRepository) private jobRepository: IJobRepository,
     @Inject(IStorageRepository) private storageRepository: IStorageRepository,
   ) {
@@ -250,50 +245,6 @@ export class AssetService {
     return mapAsset(updatedAsset);
   }
 
-  public async downloadLibrary(authUser: AuthUserDto, dto: DownloadDto) {
-    await this.access.requirePermission(authUser, Permission.LIBRARY_DOWNLOAD, authUser.id);
-
-    const assets = await this._assetRepository.getAllByUserId(authUser.id, dto);
-
-    return this.downloadService.downloadArchive(dto.name || `library`, assets);
-  }
-
-  public async downloadFiles(authUser: AuthUserDto, dto: DownloadFilesDto) {
-    await this.access.requirePermission(authUser, Permission.ASSET_DOWNLOAD, dto.assetIds);
-
-    const assetToDownload = [];
-
-    for (const assetId of dto.assetIds) {
-      const asset = await this._assetRepository.getById(assetId);
-      assetToDownload.push(asset);
-
-      // Get live photo asset
-      if (asset.livePhotoVideoId) {
-        const livePhotoAsset = await this._assetRepository.getById(asset.livePhotoVideoId);
-        assetToDownload.push(livePhotoAsset);
-      }
-    }
-
-    const now = new Date().toISOString();
-    return this.downloadService.downloadArchive(`immich-${now}`, assetToDownload);
-  }
-
-  public async downloadFile(authUser: AuthUserDto, assetId: string): Promise<ImmichReadStream> {
-    await this.access.requirePermission(authUser, Permission.ASSET_DOWNLOAD, assetId);
-
-    try {
-      const asset = await this._assetRepository.get(assetId);
-      if (asset && asset.originalPath && asset.mimeType) {
-        return this.storageRepository.createReadStream(asset.originalPath, asset.mimeType);
-      }
-    } catch (e) {
-      Logger.error(`Error download asset ${e}`, 'downloadFile');
-      throw new InternalServerErrorException(`Failed to download asset ${e}`, 'DownloadFile');
-    }
-
-    throw new NotFoundException();
-  }
-
   async getAssetThumbnail(
     authUser: AuthUserDto,
     assetId: string,
diff --git a/server/src/immich/api-v1/asset/dto/download-files.dto.ts b/server/src/immich/api-v1/asset/dto/download-files.dto.ts
deleted file mode 100644
index 557db73d5..000000000
--- a/server/src/immich/api-v1/asset/dto/download-files.dto.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ApiProperty } from '@nestjs/swagger';
-import { IsNotEmpty } from 'class-validator';
-
-export class DownloadFilesDto {
-  @IsNotEmpty()
-  @ApiProperty({
-    isArray: true,
-    type: String,
-    title: 'Array of asset ids to be downloaded',
-  })
-  assetIds!: string[];
-}
diff --git a/server/src/immich/api-v1/asset/dto/download-library.dto.ts b/server/src/immich/api-v1/asset/dto/download-library.dto.ts
deleted file mode 100644
index 7e1dfd12d..000000000
--- a/server/src/immich/api-v1/asset/dto/download-library.dto.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Type } from 'class-transformer';
-import { IsNumber, IsOptional, IsPositive, IsString } from 'class-validator';
-
-export class DownloadDto {
-  @IsOptional()
-  @IsString()
-  name?: string;
-
-  @IsOptional()
-  @IsPositive()
-  @IsNumber()
-  @Type(() => Number)
-  skip?: number;
-}
diff --git a/server/src/immich/app.utils.ts b/server/src/immich/app.utils.ts
index ff130bf75..8355964a8 100644
--- a/server/src/immich/app.utils.ts
+++ b/server/src/immich/app.utils.ts
@@ -1,5 +1,11 @@
-import { IMMICH_ACCESS_COOKIE, IMMICH_API_KEY_HEADER, IMMICH_API_KEY_NAME, SERVER_VERSION } from '@app/domain';
-import { INestApplication } from '@nestjs/common';
+import {
+  ImmichReadStream,
+  IMMICH_ACCESS_COOKIE,
+  IMMICH_API_KEY_HEADER,
+  IMMICH_API_KEY_NAME,
+  SERVER_VERSION,
+} from '@app/domain';
+import { INestApplication, StreamableFile } from '@nestjs/common';
 import {
   DocumentBuilder,
   OpenAPIObject,
@@ -7,18 +13,12 @@ import {
   SwaggerDocumentOptions,
   SwaggerModule,
 } from '@nestjs/swagger';
-import { Response } from 'express';
 import { writeFileSync } from 'fs';
 import path from 'path';
 import { Metadata } from './decorators/authenticated.decorator';
-import { DownloadArchive } from './modules/download/download.service';
 
-export const handleDownload = (download: DownloadArchive, res: Response) => {
-  res.attachment(download.fileName);
-  res.setHeader('X-Immich-Content-Length-Hint', download.fileSize);
-  res.setHeader('X-Immich-Archive-File-Count', download.fileCount);
-  res.setHeader('X-Immich-Archive-Complete', `${download.complete}`);
-  return download.stream;
+export const asStreamableFile = ({ stream, type, length }: ImmichReadStream) => {
+  return new StreamableFile(stream, { type, length });
 };
 
 function sortKeys<T extends object>(obj: T): T {
diff --git a/server/src/immich/controllers/asset.controller.ts b/server/src/immich/controllers/asset.controller.ts
index c6dbd2218..dfea0d5a7 100644
--- a/server/src/immich/controllers/asset.controller.ts
+++ b/server/src/immich/controllers/asset.controller.ts
@@ -1,11 +1,21 @@
-import { AssetService, AuthUserDto, MapMarkerResponseDto, MemoryLaneDto } from '@app/domain';
+import {
+  AssetIdsDto,
+  AssetService,
+  AuthUserDto,
+  DownloadDto,
+  DownloadResponseDto,
+  MapMarkerResponseDto,
+  MemoryLaneDto,
+} from '@app/domain';
 import { MapMarkerDto } from '@app/domain/asset/dto/map-marker.dto';
 import { MemoryLaneResponseDto } from '@app/domain/asset/response-dto/memory-lane-response.dto';
-import { Controller, Get, Query } from '@nestjs/common';
-import { ApiTags } from '@nestjs/swagger';
+import { Body, Controller, Get, HttpCode, HttpStatus, Param, Post, Query, StreamableFile } from '@nestjs/common';
+import { ApiOkResponse, ApiTags } from '@nestjs/swagger';
+import { asStreamableFile } from '../app.utils';
 import { AuthUser } from '../decorators/auth-user.decorator';
-import { Authenticated } from '../decorators/authenticated.decorator';
+import { Authenticated, SharedLinkRoute } from '../decorators/authenticated.decorator';
 import { UseValidation } from '../decorators/use-validation.decorator';
+import { UUIDParamDto } from './dto/uuid-param.dto';
 
 @ApiTags('Asset')
 @Controller('asset')
@@ -23,4 +33,26 @@ export class AssetController {
   getMemoryLane(@AuthUser() authUser: AuthUserDto, @Query() dto: MemoryLaneDto): Promise<MemoryLaneResponseDto[]> {
     return this.service.getMemoryLane(authUser, dto);
   }
+
+  @SharedLinkRoute()
+  @Get('download')
+  getDownloadInfo(@AuthUser() authUser: AuthUserDto, @Query() dto: DownloadDto): Promise<DownloadResponseDto> {
+    return this.service.getDownloadInfo(authUser, dto);
+  }
+
+  @SharedLinkRoute()
+  @Post('download')
+  @HttpCode(HttpStatus.OK)
+  @ApiOkResponse({ content: { 'application/octet-stream': { schema: { type: 'string', format: 'binary' } } } })
+  downloadArchive(@AuthUser() authUser: AuthUserDto, @Body() dto: AssetIdsDto): Promise<StreamableFile> {
+    return this.service.downloadArchive(authUser, dto).then(asStreamableFile);
+  }
+
+  @SharedLinkRoute()
+  @Post('download/:id')
+  @HttpCode(HttpStatus.OK)
+  @ApiOkResponse({ content: { 'application/octet-stream': { schema: { type: 'string', format: 'binary' } } } })
+  downloadFile(@AuthUser() authUser: AuthUserDto, @Param() { id }: UUIDParamDto) {
+    return this.service.downloadFile(authUser, id).then(asStreamableFile);
+  }
 }
diff --git a/server/src/immich/modules/download/download.module.ts b/server/src/immich/modules/download/download.module.ts
deleted file mode 100644
index 354982cc6..000000000
--- a/server/src/immich/modules/download/download.module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Module } from '@nestjs/common';
-import { DownloadService } from './download.service';
-
-@Module({
-  providers: [DownloadService],
-  exports: [DownloadService],
-})
-export class DownloadModule {}
diff --git a/server/src/immich/modules/download/download.service.ts b/server/src/immich/modules/download/download.service.ts
deleted file mode 100644
index 65a460278..000000000
--- a/server/src/immich/modules/download/download.service.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { asHumanReadable, HumanReadableSize } from '@app/domain';
-import { AssetEntity } from '@app/infra/entities';
-import { BadRequestException, Injectable, InternalServerErrorException, Logger, StreamableFile } from '@nestjs/common';
-import archiver from 'archiver';
-import { extname } from 'path';
-
-export interface DownloadArchive {
-  stream: StreamableFile;
-  fileName: string;
-  fileSize: number;
-  fileCount: number;
-  complete: boolean;
-}
-
-@Injectable()
-export class DownloadService {
-  private readonly logger = new Logger(DownloadService.name);
-
-  public async downloadArchive(name: string, assets: AssetEntity[]): Promise<DownloadArchive> {
-    if (!assets || assets.length === 0) {
-      throw new BadRequestException('No assets to download.');
-    }
-
-    try {
-      const archive = archiver('zip', { store: true });
-      const stream = new StreamableFile(archive);
-      let totalSize = 0;
-      let fileCount = 0;
-      let complete = true;
-
-      for (const { originalPath, exifInfo, originalFileName } of assets) {
-        const name = `${originalFileName}${extname(originalPath)}`;
-        archive.file(originalPath, { name });
-        totalSize += Number(exifInfo?.fileSizeInByte || 0);
-        fileCount++;
-
-        // for easier testing, can be changed before merging.
-        if (totalSize > HumanReadableSize.GiB * 20) {
-          complete = false;
-          this.logger.log(
-            `Archive size exceeded after ${fileCount} files, capping at ${totalSize} bytes (${asHumanReadable(
-              totalSize,
-            )})`,
-          );
-          break;
-        }
-      }
-
-      archive.finalize();
-
-      return {
-        stream,
-        fileName: `${name}.zip`,
-        fileSize: totalSize,
-        fileCount,
-        complete,
-      };
-    } catch (error) {
-      this.logger.error(`Error creating download archive ${error}`);
-      throw new InternalServerErrorException(`Failed to download ${name}: ${error}`, 'DownloadArchive');
-    }
-  }
-}
diff --git a/server/src/infra/repositories/access.repository.ts b/server/src/infra/repositories/access.repository.ts
index d1d986e72..fe518807e 100644
--- a/server/src/infra/repositories/access.repository.ts
+++ b/server/src/infra/repositories/access.repository.ts
@@ -140,7 +140,9 @@ export class AccessRepository implements IAccessRepository {
       return this.albumRepository.exist({
         where: {
           id: albumId,
-          ownerId: userId,
+          sharedUsers: {
+            id: userId,
+          },
         },
       });
     },
diff --git a/server/src/infra/repositories/asset.repository.ts b/server/src/infra/repositories/asset.repository.ts
index 1139dbf11..a23787252 100644
--- a/server/src/infra/repositories/asset.repository.ts
+++ b/server/src/infra/repositories/asset.repository.ts
@@ -72,6 +72,32 @@ export class AssetRepository implements IAssetRepository {
     await this.repository.delete({ ownerId });
   }
 
+  getByAlbumId(pagination: PaginationOptions, albumId: string): Paginated<AssetEntity> {
+    return paginate(this.repository, pagination, {
+      where: {
+        albums: {
+          id: albumId,
+        },
+      },
+      relations: {
+        albums: true,
+        exifInfo: true,
+      },
+    });
+  }
+
+  getByUserId(pagination: PaginationOptions, userId: string): Paginated<AssetEntity> {
+    return paginate(this.repository, pagination, {
+      where: {
+        ownerId: userId,
+        isVisible: true,
+      },
+      relations: {
+        exifInfo: true,
+      },
+    });
+  }
+
   getAll(pagination: PaginationOptions, options: AssetSearchOptions = {}): Paginated<AssetEntity> {
     return paginate(this.repository, pagination, {
       where: {
diff --git a/server/src/infra/repositories/filesystem.provider.ts b/server/src/infra/repositories/filesystem.provider.ts
index dcb151b4d..d82e776c8 100644
--- a/server/src/infra/repositories/filesystem.provider.ts
+++ b/server/src/infra/repositories/filesystem.provider.ts
@@ -1,4 +1,5 @@
-import { DiskUsage, ImmichReadStream, IStorageRepository } from '@app/domain';
+import { DiskUsage, ImmichReadStream, ImmichZipStream, IStorageRepository } from '@app/domain';
+import archiver from 'archiver';
 import { constants, createReadStream, existsSync, mkdirSync } from 'fs';
 import fs from 'fs/promises';
 import mv from 'mv';
@@ -8,13 +9,25 @@ import path from 'path';
 const moveFile = promisify<string, string, mv.Options>(mv);
 
 export class FilesystemProvider implements IStorageRepository {
-  async createReadStream(filepath: string, mimeType: string): Promise<ImmichReadStream> {
+  createZipStream(): ImmichZipStream {
+    const archive = archiver('zip', { store: true });
+
+    const addFile = (input: string, filename: string) => {
+      archive.file(input, { name: filename });
+    };
+
+    const finalize = () => archive.finalize();
+
+    return { stream: archive, addFile, finalize };
+  }
+
+  async createReadStream(filepath: string, mimeType?: string | null): Promise<ImmichReadStream> {
     const { size } = await fs.stat(filepath);
     await fs.access(filepath, constants.R_OK | constants.W_OK);
     return {
       stream: createReadStream(filepath),
       length: size,
-      type: mimeType,
+      type: mimeType || undefined,
     };
   }
 
diff --git a/server/test/fixtures.ts b/server/test/fixtures.ts
index 970f15282..f8dc7a758 100644
--- a/server/test/fixtures.ts
+++ b/server/test/fixtures.ts
@@ -203,14 +203,14 @@ export const fileStub = {
 export const assetEntityStub = {
   noResizePath: Object.freeze<AssetEntity>({
     id: 'asset-id',
-    originalFileName: 'asset_1.jpeg',
+    originalFileName: 'IMG_123',
     deviceAssetId: 'device-asset-id',
     fileModifiedAt: new Date('2023-02-23T05:06:29.716Z'),
     fileCreatedAt: new Date('2023-02-23T05:06:29.716Z'),
     owner: userEntityStub.user1,
     ownerId: 'user-id',
     deviceId: 'device-id',
-    originalPath: 'upload/upload/path.ext',
+    originalPath: 'upload/library/IMG_123.jpg',
     resizePath: null,
     checksum: Buffer.from('file hash', 'utf8'),
     type: AssetType.IMAGE,
@@ -240,7 +240,7 @@ export const assetEntityStub = {
     owner: userEntityStub.user1,
     ownerId: 'user-id',
     deviceId: 'device-id',
-    originalPath: '/original/path.ext',
+    originalPath: 'upload/library/IMG_456.jpg',
     resizePath: '/uploads/user-id/thumbs/path.ext',
     checksum: Buffer.from('file hash', 'utf8'),
     type: AssetType.IMAGE,
@@ -258,10 +258,13 @@ export const assetEntityStub = {
     livePhotoVideoId: null,
     tags: [],
     sharedLinks: [],
-    originalFileName: 'asset-id.ext',
+    originalFileName: 'IMG_456',
     faces: [],
     sidecarPath: null,
     isReadOnly: false,
+    exifInfo: {
+      fileSizeInByte: 123_000,
+    } as ExifEntity,
   }),
   noThumbhash: Object.freeze<AssetEntity>({
     id: 'asset-id',
@@ -324,6 +327,9 @@ export const assetEntityStub = {
     originalFileName: 'asset-id.ext',
     faces: [],
     sidecarPath: null,
+    exifInfo: {
+      fileSizeInByte: 5_000,
+    } as ExifEntity,
   }),
   video: Object.freeze<AssetEntity>({
     id: 'asset-id',
@@ -355,6 +361,9 @@ export const assetEntityStub = {
     sharedLinks: [],
     faces: [],
     sidecarPath: null,
+    exifInfo: {
+      fileSizeInByte: 100_000,
+    } as ExifEntity,
   }),
   livePhotoMotionAsset: Object.freeze({
     id: 'live-photo-motion-asset',
@@ -364,6 +373,9 @@ export const assetEntityStub = {
     isVisible: false,
     fileModifiedAt: new Date('2022-06-19T23:41:36.910Z'),
     fileCreatedAt: new Date('2022-06-19T23:41:36.910Z'),
+    exifInfo: {
+      fileSizeInByte: 100_000,
+    },
   } as AssetEntity),
 
   livePhotoStillAsset: Object.freeze({
@@ -375,6 +387,9 @@ export const assetEntityStub = {
     isVisible: true,
     fileModifiedAt: new Date('2022-06-19T23:41:36.910Z'),
     fileCreatedAt: new Date('2022-06-19T23:41:36.910Z'),
+    exifInfo: {
+      fileSizeInByte: 25_000,
+    },
   } as AssetEntity),
 
   withLocation: Object.freeze<AssetEntity>({
@@ -410,6 +425,7 @@ export const assetEntityStub = {
     exifInfo: {
       latitude: 100,
       longitude: 100,
+      fileSizeInByte: 23_456,
     } as ExifEntity,
   }),
   sidecar: Object.freeze<AssetEntity>({
diff --git a/server/test/repositories/asset.repository.mock.ts b/server/test/repositories/asset.repository.mock.ts
index 51dbb3a27..7e8a52262 100644
--- a/server/test/repositories/asset.repository.mock.ts
+++ b/server/test/repositories/asset.repository.mock.ts
@@ -4,6 +4,8 @@ export const newAssetRepositoryMock = (): jest.Mocked<IAssetRepository> => {
   return {
     getByDate: jest.fn(),
     getByIds: jest.fn().mockResolvedValue([]),
+    getByAlbumId: jest.fn(),
+    getByUserId: jest.fn(),
     getWithout: jest.fn(),
     getWith: jest.fn(),
     getFirstAssetForAlbumId: jest.fn(),
diff --git a/server/test/repositories/storage.repository.mock.ts b/server/test/repositories/storage.repository.mock.ts
index 21b289f93..08556a081 100644
--- a/server/test/repositories/storage.repository.mock.ts
+++ b/server/test/repositories/storage.repository.mock.ts
@@ -2,6 +2,7 @@ import { IStorageRepository } from '@app/domain';
 
 export const newStorageRepositoryMock = (): jest.Mocked<IStorageRepository> => {
   return {
+    createZipStream: jest.fn(),
     createReadStream: jest.fn(),
     unlink: jest.fn(),
     unlinkDir: jest.fn().mockResolvedValue(true),
diff --git a/web/src/api/open-api/api.ts b/web/src/api/open-api/api.ts
index e3b035b69..1393f5c20 100644
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -1111,16 +1111,41 @@ export type DeleteAssetStatus = typeof DeleteAssetStatus[keyof typeof DeleteAsse
 /**
  * 
  * @export
- * @interface DownloadFilesDto
+ * @interface DownloadArchiveInfo
  */
-export interface DownloadFilesDto {
+export interface DownloadArchiveInfo {
+    /**
+     * 
+     * @type {number}
+     * @memberof DownloadArchiveInfo
+     */
+    'size': number;
     /**
      * 
      * @type {Array<string>}
-     * @memberof DownloadFilesDto
+     * @memberof DownloadArchiveInfo
      */
     'assetIds': Array<string>;
 }
+/**
+ * 
+ * @export
+ * @interface DownloadResponseDto
+ */
+export interface DownloadResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof DownloadResponseDto
+     */
+    'totalSize': number;
+    /**
+     * 
+     * @type {Array<DownloadArchiveInfo>}
+     * @memberof DownloadResponseDto
+     */
+    'archives': Array<DownloadArchiveInfo>;
+}
 /**
  * 
  * @export
@@ -3645,63 +3670,6 @@ export const AlbumApiAxiosParamCreator = function (configuration?: Configuration
 
 
     
-            setSearchParams(localVarUrlObj, localVarQueryParameter);
-            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
-            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
-
-            return {
-                url: toPathString(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {string} [name] 
-         * @param {number} [skip] 
-         * @param {string} [key] 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        downloadArchive: async (id: string, name?: string, skip?: number, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
-            // verify required parameter 'id' is not null or undefined
-            assertParamExists('downloadArchive', 'id', id)
-            const localVarPath = `/album/{id}/download`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            // use dummy base URL string because the URL constructor only accepts absolute URLs.
-            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
-            let baseOptions;
-            if (configuration) {
-                baseOptions = configuration.baseOptions;
-            }
-
-            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication cookie required
-
-            // authentication api_key required
-            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
-
-            // authentication bearer required
-            // http bearer authentication required
-            await setBearerAuthToObject(localVarHeaderParameter, configuration)
-
-            if (name !== undefined) {
-                localVarQueryParameter['name'] = name;
-            }
-
-            if (skip !== undefined) {
-                localVarQueryParameter['skip'] = skip;
-            }
-
-            if (key !== undefined) {
-                localVarQueryParameter['key'] = key;
-            }
-
-
-    
             setSearchParams(localVarUrlObj, localVarQueryParameter);
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
@@ -4039,19 +4007,6 @@ export const AlbumApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.deleteAlbum(id, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
-        /**
-         * 
-         * @param {string} id 
-         * @param {string} [name] 
-         * @param {number} [skip] 
-         * @param {string} [key] 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        async downloadArchive(id: string, name?: string, skip?: number, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
-            const localVarAxiosArgs = await localVarAxiosParamCreator.downloadArchive(id, name, skip, key, options);
-            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
-        },
         /**
          * 
          * @param {*} [options] Override http request option.
@@ -4165,18 +4120,6 @@ export const AlbumApiFactory = function (configuration?: Configuration, basePath
         deleteAlbum(id: string, options?: any): AxiosPromise<void> {
             return localVarFp.deleteAlbum(id, options).then((request) => request(axios, basePath));
         },
-        /**
-         * 
-         * @param {string} id 
-         * @param {string} [name] 
-         * @param {number} [skip] 
-         * @param {string} [key] 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        downloadArchive(id: string, name?: string, skip?: number, key?: string, options?: any): AxiosPromise<File> {
-            return localVarFp.downloadArchive(id, name, skip, key, options).then((request) => request(axios, basePath));
-        },
         /**
          * 
          * @param {*} [options] Override http request option.
@@ -4315,41 +4258,6 @@ export interface AlbumApiDeleteAlbumRequest {
     readonly id: string
 }
 
-/**
- * Request parameters for downloadArchive operation in AlbumApi.
- * @export
- * @interface AlbumApiDownloadArchiveRequest
- */
-export interface AlbumApiDownloadArchiveRequest {
-    /**
-     * 
-     * @type {string}
-     * @memberof AlbumApiDownloadArchive
-     */
-    readonly id: string
-
-    /**
-     * 
-     * @type {string}
-     * @memberof AlbumApiDownloadArchive
-     */
-    readonly name?: string
-
-    /**
-     * 
-     * @type {number}
-     * @memberof AlbumApiDownloadArchive
-     */
-    readonly skip?: number
-
-    /**
-     * 
-     * @type {string}
-     * @memberof AlbumApiDownloadArchive
-     */
-    readonly key?: string
-}
-
 /**
  * Request parameters for getAlbumInfo operation in AlbumApi.
  * @export
@@ -4506,17 +4414,6 @@ export class AlbumApi extends BaseAPI {
         return AlbumApiFp(this.configuration).deleteAlbum(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
     }
 
-    /**
-     * 
-     * @param {AlbumApiDownloadArchiveRequest} requestParameters Request parameters.
-     * @param {*} [options] Override http request option.
-     * @throws {RequiredError}
-     * @memberof AlbumApi
-     */
-    public downloadArchive(requestParameters: AlbumApiDownloadArchiveRequest, options?: AxiosRequestConfig) {
-        return AlbumApiFp(this.configuration).downloadArchive(requestParameters.id, requestParameters.name, requestParameters.skip, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
-    }
-
     /**
      * 
      * @param {*} [options] Override http request option.
@@ -4773,62 +4670,15 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
         },
         /**
          * 
-         * @param {string} id 
+         * @param {AssetIdsDto} assetIdsDto 
          * @param {string} [key] 
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        downloadFile: async (id: string, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
-            // verify required parameter 'id' is not null or undefined
-            assertParamExists('downloadFile', 'id', id)
-            const localVarPath = `/asset/download/{id}`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            // use dummy base URL string because the URL constructor only accepts absolute URLs.
-            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
-            let baseOptions;
-            if (configuration) {
-                baseOptions = configuration.baseOptions;
-            }
-
-            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication cookie required
-
-            // authentication api_key required
-            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
-
-            // authentication bearer required
-            // http bearer authentication required
-            await setBearerAuthToObject(localVarHeaderParameter, configuration)
-
-            if (key !== undefined) {
-                localVarQueryParameter['key'] = key;
-            }
-
-
-    
-            setSearchParams(localVarUrlObj, localVarQueryParameter);
-            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
-            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
-
-            return {
-                url: toPathString(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {DownloadFilesDto} downloadFilesDto 
-         * @param {string} [key] 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        downloadFiles: async (downloadFilesDto: DownloadFilesDto, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
-            // verify required parameter 'downloadFilesDto' is not null or undefined
-            assertParamExists('downloadFiles', 'downloadFilesDto', downloadFilesDto)
-            const localVarPath = `/asset/download-files`;
+        downloadArchive: async (assetIdsDto: AssetIdsDto, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'assetIdsDto' is not null or undefined
+            assertParamExists('downloadArchive', 'assetIdsDto', assetIdsDto)
+            const localVarPath = `/asset/download`;
             // use dummy base URL string because the URL constructor only accepts absolute URLs.
             const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
             let baseOptions;
@@ -4860,7 +4710,7 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
             setSearchParams(localVarUrlObj, localVarQueryParameter);
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
-            localVarRequestOptions.data = serializeDataIfNeeded(downloadFilesDto, localVarRequestOptions, configuration)
+            localVarRequestOptions.data = serializeDataIfNeeded(assetIdsDto, localVarRequestOptions, configuration)
 
             return {
                 url: toPathString(localVarUrlObj),
@@ -4868,15 +4718,17 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
             };
         },
         /**
-         * Current this is not used in any UI element
-         * @param {string} [name] 
-         * @param {number} [skip] 
+         * 
+         * @param {string} id 
          * @param {string} [key] 
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        downloadLibrary: async (name?: string, skip?: number, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
-            const localVarPath = `/asset/download-library`;
+        downloadFile: async (id: string, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('downloadFile', 'id', id)
+            const localVarPath = `/asset/download/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
             // use dummy base URL string because the URL constructor only accepts absolute URLs.
             const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
             let baseOptions;
@@ -4884,7 +4736,7 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
                 baseOptions = configuration.baseOptions;
             }
 
-            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
             const localVarHeaderParameter = {} as any;
             const localVarQueryParameter = {} as any;
 
@@ -4897,14 +4749,6 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
             // http bearer authentication required
             await setBearerAuthToObject(localVarHeaderParameter, configuration)
 
-            if (name !== undefined) {
-                localVarQueryParameter['name'] = name;
-            }
-
-            if (skip !== undefined) {
-                localVarQueryParameter['skip'] = skip;
-            }
-
             if (key !== undefined) {
                 localVarQueryParameter['key'] = key;
             }
@@ -5356,6 +5200,69 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
 
 
     
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {Array<string>} [assetIds] 
+         * @param {string} [albumId] 
+         * @param {string} [userId] 
+         * @param {number} [archiveSize] 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getDownloadInfo: async (assetIds?: Array<string>, albumId?: string, userId?: string, archiveSize?: number, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/asset/download`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (assetIds) {
+                localVarQueryParameter['assetIds'] = assetIds;
+            }
+
+            if (albumId !== undefined) {
+                localVarQueryParameter['albumId'] = albumId;
+            }
+
+            if (userId !== undefined) {
+                localVarQueryParameter['userId'] = userId;
+            }
+
+            if (archiveSize !== undefined) {
+                localVarQueryParameter['archiveSize'] = archiveSize;
+            }
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
             setSearchParams(localVarUrlObj, localVarQueryParameter);
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
@@ -5888,6 +5795,17 @@ export const AssetApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.deleteAsset(deleteAssetDto, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async downloadArchive(assetIdsDto: AssetIdsDto, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.downloadArchive(assetIdsDto, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
         /**
          * 
          * @param {string} id 
@@ -5899,29 +5817,6 @@ export const AssetApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.downloadFile(id, key, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
-        /**
-         * 
-         * @param {DownloadFilesDto} downloadFilesDto 
-         * @param {string} [key] 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        async downloadFiles(downloadFilesDto: DownloadFilesDto, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
-            const localVarAxiosArgs = await localVarAxiosParamCreator.downloadFiles(downloadFilesDto, key, options);
-            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
-        },
-        /**
-         * Current this is not used in any UI element
-         * @param {string} [name] 
-         * @param {number} [skip] 
-         * @param {string} [key] 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        async downloadLibrary(name?: string, skip?: number, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
-            const localVarAxiosArgs = await localVarAxiosParamCreator.downloadLibrary(name, skip, key, options);
-            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
-        },
         /**
          * Get all AssetEntity belong to the user
          * @param {string} [userId] 
@@ -6025,6 +5920,20 @@ export const AssetApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.getCuratedObjects(options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * 
+         * @param {Array<string>} [assetIds] 
+         * @param {string} [albumId] 
+         * @param {string} [userId] 
+         * @param {number} [archiveSize] 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getDownloadInfo(assetIds?: Array<string>, albumId?: string, userId?: string, archiveSize?: number, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<DownloadResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getDownloadInfo(assetIds, albumId, userId, archiveSize, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
         /**
          * 
          * @param {boolean} [isFavorite] 
@@ -6172,6 +6081,16 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
         deleteAsset(deleteAssetDto: DeleteAssetDto, options?: any): AxiosPromise<Array<DeleteAssetResponseDto>> {
             return localVarFp.deleteAsset(deleteAssetDto, options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        downloadArchive(assetIdsDto: AssetIdsDto, key?: string, options?: any): AxiosPromise<File> {
+            return localVarFp.downloadArchive(assetIdsDto, key, options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @param {string} id 
@@ -6182,27 +6101,6 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
         downloadFile(id: string, key?: string, options?: any): AxiosPromise<File> {
             return localVarFp.downloadFile(id, key, options).then((request) => request(axios, basePath));
         },
-        /**
-         * 
-         * @param {DownloadFilesDto} downloadFilesDto 
-         * @param {string} [key] 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        downloadFiles(downloadFilesDto: DownloadFilesDto, key?: string, options?: any): AxiosPromise<File> {
-            return localVarFp.downloadFiles(downloadFilesDto, key, options).then((request) => request(axios, basePath));
-        },
-        /**
-         * Current this is not used in any UI element
-         * @param {string} [name] 
-         * @param {number} [skip] 
-         * @param {string} [key] 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        downloadLibrary(name?: string, skip?: number, key?: string, options?: any): AxiosPromise<File> {
-            return localVarFp.downloadLibrary(name, skip, key, options).then((request) => request(axios, basePath));
-        },
         /**
          * Get all AssetEntity belong to the user
          * @param {string} [userId] 
@@ -6296,6 +6194,19 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
         getCuratedObjects(options?: any): AxiosPromise<Array<CuratedObjectsResponseDto>> {
             return localVarFp.getCuratedObjects(options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @param {Array<string>} [assetIds] 
+         * @param {string} [albumId] 
+         * @param {string} [userId] 
+         * @param {number} [archiveSize] 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getDownloadInfo(assetIds?: Array<string>, albumId?: string, userId?: string, archiveSize?: number, key?: string, options?: any): AxiosPromise<DownloadResponseDto> {
+            return localVarFp.getDownloadInfo(assetIds, albumId, userId, archiveSize, key, options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @param {boolean} [isFavorite] 
@@ -6454,6 +6365,27 @@ export interface AssetApiDeleteAssetRequest {
     readonly deleteAssetDto: DeleteAssetDto
 }
 
+/**
+ * Request parameters for downloadArchive operation in AssetApi.
+ * @export
+ * @interface AssetApiDownloadArchiveRequest
+ */
+export interface AssetApiDownloadArchiveRequest {
+    /**
+     * 
+     * @type {AssetIdsDto}
+     * @memberof AssetApiDownloadArchive
+     */
+    readonly assetIdsDto: AssetIdsDto
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiDownloadArchive
+     */
+    readonly key?: string
+}
+
 /**
  * Request parameters for downloadFile operation in AssetApi.
  * @export
@@ -6475,55 +6407,6 @@ export interface AssetApiDownloadFileRequest {
     readonly key?: string
 }
 
-/**
- * Request parameters for downloadFiles operation in AssetApi.
- * @export
- * @interface AssetApiDownloadFilesRequest
- */
-export interface AssetApiDownloadFilesRequest {
-    /**
-     * 
-     * @type {DownloadFilesDto}
-     * @memberof AssetApiDownloadFiles
-     */
-    readonly downloadFilesDto: DownloadFilesDto
-
-    /**
-     * 
-     * @type {string}
-     * @memberof AssetApiDownloadFiles
-     */
-    readonly key?: string
-}
-
-/**
- * Request parameters for downloadLibrary operation in AssetApi.
- * @export
- * @interface AssetApiDownloadLibraryRequest
- */
-export interface AssetApiDownloadLibraryRequest {
-    /**
-     * 
-     * @type {string}
-     * @memberof AssetApiDownloadLibrary
-     */
-    readonly name?: string
-
-    /**
-     * 
-     * @type {number}
-     * @memberof AssetApiDownloadLibrary
-     */
-    readonly skip?: number
-
-    /**
-     * 
-     * @type {string}
-     * @memberof AssetApiDownloadLibrary
-     */
-    readonly key?: string
-}
-
 /**
  * Request parameters for getAllAssets operation in AssetApi.
  * @export
@@ -6650,6 +6533,48 @@ export interface AssetApiGetAssetThumbnailRequest {
     readonly key?: string
 }
 
+/**
+ * Request parameters for getDownloadInfo operation in AssetApi.
+ * @export
+ * @interface AssetApiGetDownloadInfoRequest
+ */
+export interface AssetApiGetDownloadInfoRequest {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof AssetApiGetDownloadInfo
+     */
+    readonly assetIds?: Array<string>
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetDownloadInfo
+     */
+    readonly albumId?: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetDownloadInfo
+     */
+    readonly userId?: string
+
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetApiGetDownloadInfo
+     */
+    readonly archiveSize?: number
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetDownloadInfo
+     */
+    readonly key?: string
+}
+
 /**
  * Request parameters for getMapMarkers operation in AssetApi.
  * @export
@@ -6953,6 +6878,17 @@ export class AssetApi extends BaseAPI {
         return AssetApiFp(this.configuration).deleteAsset(requestParameters.deleteAssetDto, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * 
+     * @param {AssetApiDownloadArchiveRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public downloadArchive(requestParameters: AssetApiDownloadArchiveRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).downloadArchive(requestParameters.assetIdsDto, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * 
      * @param {AssetApiDownloadFileRequest} requestParameters Request parameters.
@@ -6964,28 +6900,6 @@ export class AssetApi extends BaseAPI {
         return AssetApiFp(this.configuration).downloadFile(requestParameters.id, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
     }
 
-    /**
-     * 
-     * @param {AssetApiDownloadFilesRequest} requestParameters Request parameters.
-     * @param {*} [options] Override http request option.
-     * @throws {RequiredError}
-     * @memberof AssetApi
-     */
-    public downloadFiles(requestParameters: AssetApiDownloadFilesRequest, options?: AxiosRequestConfig) {
-        return AssetApiFp(this.configuration).downloadFiles(requestParameters.downloadFilesDto, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
-    }
-
-    /**
-     * Current this is not used in any UI element
-     * @param {AssetApiDownloadLibraryRequest} requestParameters Request parameters.
-     * @param {*} [options] Override http request option.
-     * @throws {RequiredError}
-     * @memberof AssetApi
-     */
-    public downloadLibrary(requestParameters: AssetApiDownloadLibraryRequest = {}, options?: AxiosRequestConfig) {
-        return AssetApiFp(this.configuration).downloadLibrary(requestParameters.name, requestParameters.skip, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
-    }
-
     /**
      * Get all AssetEntity belong to the user
      * @param {AssetApiGetAllAssetsRequest} requestParameters Request parameters.
@@ -7091,6 +7005,17 @@ export class AssetApi extends BaseAPI {
         return AssetApiFp(this.configuration).getCuratedObjects(options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * 
+     * @param {AssetApiGetDownloadInfoRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getDownloadInfo(requestParameters: AssetApiGetDownloadInfoRequest = {}, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getDownloadInfo(requestParameters.assetIds, requestParameters.albumId, requestParameters.userId, requestParameters.archiveSize, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * 
      * @param {AssetApiGetMapMarkersRequest} requestParameters Request parameters.
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 1183af14d..9d3933be6 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -3,7 +3,6 @@
 	import { afterNavigate, goto } from '$app/navigation';
 	import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
 	import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-	import { downloadAssets } from '$lib/stores/download';
 	import { locale } from '$lib/stores/preferences.store';
 	import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
 	import {
@@ -45,6 +44,7 @@
 	import ThumbnailSelection from './thumbnail-selection.svelte';
 	import UserSelectionModal from './user-selection-modal.svelte';
 	import { handleError } from '../../utils/handle-error';
+	import { downloadArchive } from '../../utils/asset-utils';
 
 	export let album: AlbumResponseDto;
 	export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@@ -242,78 +242,12 @@
 	};
 
 	const downloadAlbum = async () => {
-		try {
-			let skip = 0;
-			let count = 0;
-			let done = false;
-
-			while (!done) {
-				count++;
-
-				const fileName = album.albumName + `${count === 1 ? '' : count}.zip`;
-
-				$downloadAssets[fileName] = 0;
-
-				let total = 0;
-
-				const { data, status, headers } = await api.albumApi.downloadArchive(
-					{ id: album.id, skip: skip || undefined, key: sharedLink?.key },
-					{
-						responseType: 'blob',
-						onDownloadProgress: function (progressEvent) {
-							const request = this as XMLHttpRequest;
-							if (!total) {
-								total = Number(request.getResponseHeader('X-Immich-Content-Length-Hint')) || 0;
-							}
-
-							if (total) {
-								const current = progressEvent.loaded;
-								$downloadAssets[fileName] = Math.floor((current / total) * 100);
-							}
-						}
-					}
-				);
-
-				const isNotComplete = headers['x-immich-archive-complete'] === 'false';
-				const fileCount = Number(headers['x-immich-archive-file-count']) || 0;
-				if (isNotComplete && fileCount > 0) {
-					skip += fileCount;
-				} else {
-					done = true;
-				}
-
-				if (!(data instanceof Blob)) {
-					return;
-				}
-
-				if (status === 200) {
-					const fileUrl = URL.createObjectURL(data);
-					const anchor = document.createElement('a');
-					anchor.href = fileUrl;
-					anchor.download = fileName;
-
-					document.body.appendChild(anchor);
-					anchor.click();
-					document.body.removeChild(anchor);
-
-					URL.revokeObjectURL(fileUrl);
-
-					// Remove item from download list
-					setTimeout(() => {
-						const copy = $downloadAssets;
-						delete copy[fileName];
-						$downloadAssets = copy;
-					}, 2000);
-				}
-			}
-		} catch (e) {
-			$downloadAssets = {};
-			console.error('Error downloading file ', e);
-			notificationController.show({
-				type: NotificationType.Error,
-				message: 'Error downloading file, check console for more details.'
-			});
-		}
+		await downloadArchive(
+			`${album.albumName}.zip`,
+			{ albumId: album.id },
+			undefined,
+			sharedLink?.key
+		);
 	};
 
 	const showAlbumOptionsMenu = ({ x, y }: MouseEvent) => {
@@ -360,7 +294,7 @@
 		>
 			<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
 			{#if sharedLink?.allowDownload || !isPublicShared}
-				<DownloadAction filename={album.albumName} sharedLinkKey={sharedLink?.key} />
+				<DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink?.key} />
 			{/if}
 			{#if isOwned}
 				<RemoveFromAlbum bind:album />
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 6192518ba..0a073f63f 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { downloadAssets } from '$lib/stores/download';
 	import {
 		AlbumResponseDto,
 		api,
@@ -25,7 +24,7 @@
 
 	import { assetStore } from '$lib/stores/assets.store';
 	import { isShowDetail } from '$lib/stores/preferences.store';
-	import { addAssetsToAlbum, getFilenameExtension } from '$lib/utils/asset-utils';
+	import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils';
 	import { browser } from '$app/environment';
 
 	export let asset: AssetResponseDto;
@@ -115,75 +114,6 @@
 		$isShowDetail = !$isShowDetail;
 	};
 
-	const handleDownload = () => {
-		if (asset.livePhotoVideoId) {
-			downloadFile(asset.livePhotoVideoId, true, publicSharedKey);
-			downloadFile(asset.id, false, publicSharedKey);
-			return;
-		}
-
-		downloadFile(asset.id, false, publicSharedKey);
-	};
-
-	const downloadFile = async (assetId: string, isLivePhoto: boolean, key: string) => {
-		try {
-			const imageExtension = isLivePhoto ? 'mov' : getFilenameExtension(asset.originalPath);
-			const imageFileName = asset.originalFileName + '.' + imageExtension;
-
-			// If assets is already download -> return;
-			if ($downloadAssets[imageFileName]) {
-				return;
-			}
-
-			$downloadAssets[imageFileName] = 0;
-
-			const { data, status } = await api.assetApi.downloadFile(
-				{ id: assetId, key },
-				{
-					responseType: 'blob',
-					onDownloadProgress: (progressEvent) => {
-						if (progressEvent.lengthComputable) {
-							const total = progressEvent.total;
-							const current = progressEvent.loaded;
-							$downloadAssets[imageFileName] = Math.floor((current / total) * 100);
-						}
-					}
-				}
-			);
-
-			if (!(data instanceof Blob)) {
-				return;
-			}
-
-			if (status === 200) {
-				const fileUrl = URL.createObjectURL(data);
-				const anchor = document.createElement('a');
-				anchor.href = fileUrl;
-				anchor.download = imageFileName;
-
-				document.body.appendChild(anchor);
-				anchor.click();
-				document.body.removeChild(anchor);
-
-				URL.revokeObjectURL(fileUrl);
-
-				// Remove item from download list
-				setTimeout(() => {
-					const copy = $downloadAssets;
-					delete copy[imageFileName];
-					$downloadAssets = copy;
-				}, 2000);
-			}
-		} catch (e) {
-			$downloadAssets = {};
-			console.error('Error downloading file ', e);
-			notificationController.show({
-				type: NotificationType.Error,
-				message: 'Error downloading file, check console for more details.'
-			});
-		}
-	};
-
 	const deleteAsset = async () => {
 		try {
 			if (
@@ -313,7 +243,7 @@
 			showDownloadButton={shouldShowDownloadButton}
 			on:goBack={closeViewer}
 			on:showDetail={showDetailInfoHandler}
-			on:download={handleDownload}
+			on:download={() => downloadFile(asset, publicSharedKey)}
 			on:delete={deleteAsset}
 			on:favorite={toggleFavorite}
 			on:addToAlbum={() => openAlbumPicker(false)}
diff --git a/web/src/lib/components/photos-page/actions/download-action.svelte b/web/src/lib/components/photos-page/actions/download-action.svelte
index cb37214e0..a79be2681 100644
--- a/web/src/lib/components/photos-page/actions/download-action.svelte
+++ b/web/src/lib/components/photos-page/actions/download-action.svelte
@@ -1,18 +1,30 @@
 <script lang="ts">
 	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import { bulkDownload } from '$lib/utils/asset-utils';
+	import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
 	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
 	import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
 	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
-	export let filename = 'immich';
+	export let filename = 'immich.zip';
 	export let sharedLinkKey: string | undefined = undefined;
 	export let menuItem = false;
 
 	const { getAssets, clearSelect } = getAssetControlContext();
 
 	const handleDownloadFiles = async () => {
-		await bulkDownload(filename, Array.from(getAssets()), clearSelect, sharedLinkKey);
+		const assets = Array.from(getAssets());
+		if (assets.length === 1) {
+			await downloadFile(assets[0], sharedLinkKey);
+			clearSelect();
+			return;
+		}
+
+		await downloadArchive(
+			filename,
+			{ assetIds: assets.map((asset) => asset.id) },
+			clearSelect,
+			sharedLinkKey
+		);
 	};
 </script>
 
diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte
index 65d0bcea5..97e123bf6 100644
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { bulkDownload } from '$lib/utils/asset-utils';
 	import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
+	import { downloadArchive } from '$lib/utils/asset-utils';
 	import { api, AssetResponseDto, SharedLinkResponseDto } from '@api';
 	import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
@@ -38,7 +38,12 @@
 	});
 
 	const downloadAssets = async () => {
-		await bulkDownload('immich-shared', assets, undefined, sharedLink.key);
+		await downloadArchive(
+			`immich-shared.zip`,
+			{ assetIds: assets.map((asset) => asset.id) },
+			undefined,
+			sharedLink.key
+		);
 	};
 
 	const handleUploadAssets = async (files: File[] = []) => {
@@ -78,7 +83,7 @@
 		<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
 			<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
 			{#if sharedLink?.allowDownload}
-				<DownloadAction filename="immich-shared" sharedLinkKey={sharedLink.key} />
+				<DownloadAction filename="immich-shared.zip" sharedLinkKey={sharedLink.key} />
 			{/if}
 			{#if isOwned}
 				<RemoveFromSharedLink bind:sharedLink />
diff --git a/web/src/lib/stores/download.ts b/web/src/lib/stores/download.ts
index 719464e7a..e0a5d10c6 100644
--- a/web/src/lib/stores/download.ts
+++ b/web/src/lib/stores/download.ts
@@ -9,3 +9,18 @@ export const isDownloading = derived(downloadAssets, ($downloadAssets) => {
 
 	return true;
 });
+
+const update = (key: string, value: number | null) => {
+	downloadAssets.update((state) => {
+		const newState = { ...state };
+		if (value === null) {
+			delete newState[key];
+		} else {
+			newState[key] = value;
+		}
+		return newState;
+	});
+};
+
+export const clearDownload = (key: string) => update(key, null);
+export const updateDownload = (key: string, value: number) => update(key, value);
diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts
index c993b97d7..af90d2a45 100644
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -1,9 +1,16 @@
-import { api, AddAssetsResponseDto, AssetResponseDto } from '@api';
 import {
 	notificationController,
 	NotificationType
 } from '$lib/components/shared-components/notification/notification';
-import { downloadAssets } from '$lib/stores/download';
+import { clearDownload, updateDownload } from '$lib/stores/download';
+import {
+	AddAssetsResponseDto,
+	api,
+	AssetApiGetDownloadInfoRequest,
+	AssetResponseDto,
+	DownloadResponseDto
+} from '@api';
+import { handleError } from './handle-error';
 
 export const addAssetsToAlbum = async (
 	albumId: string,
@@ -24,84 +31,104 @@ export const addAssetsToAlbum = async (
 			return dto;
 		});
 
-export async function bulkDownload(
+const downloadBlob = (data: Blob, filename: string) => {
+	const url = URL.createObjectURL(data);
+
+	const anchor = document.createElement('a');
+	anchor.href = url;
+	anchor.download = filename;
+
+	document.body.appendChild(anchor);
+	anchor.click();
+	document.body.removeChild(anchor);
+
+	URL.revokeObjectURL(url);
+};
+
+export const downloadArchive = async (
 	fileName: string,
-	assets: AssetResponseDto[],
+	options: Omit<AssetApiGetDownloadInfoRequest, 'key'>,
 	onDone?: () => void,
 	key?: string
-) {
-	const assetIds = assets.map((asset) => asset.id);
+) => {
+	let downloadInfo: DownloadResponseDto | null = null;
 
 	try {
-		// let skip = 0;
-		let count = 0;
-		let done = false;
+		const { data } = await api.assetApi.getDownloadInfo({ ...options, key });
+		downloadInfo = data;
+	} catch (error) {
+		handleError(error, 'Unable to download files');
+		return;
+	}
 
-		while (!done) {
-			count++;
+	// TODO: prompt for big download
+	// const total = downloadInfo.totalSize;
 
-			const downloadFileName = fileName + `${count === 1 ? '' : count}.zip`;
-			downloadAssets.set({ [downloadFileName]: 0 });
+	for (let i = 0; i < downloadInfo.archives.length; i++) {
+		const archive = downloadInfo.archives[i];
+		const suffix = downloadInfo.archives.length === 1 ? '' : `+${i + 1}`;
+		const archiveName = fileName.replace('.zip', `${suffix}.zip`);
 
-			let total = 0;
+		let downloadKey = `${archiveName}`;
+		if (downloadInfo.archives.length > 1) {
+			downloadKey = `${archiveName} (${i + 1}/${downloadInfo.archives.length})`;
+		}
 
-			const { data, status, headers } = await api.assetApi.downloadFiles(
-				{ downloadFilesDto: { assetIds }, key },
+		updateDownload(downloadKey, 0);
+
+		try {
+			const { data } = await api.assetApi.downloadArchive(
+				{ assetIdsDto: { assetIds: archive.assetIds }, key },
 				{
 					responseType: 'blob',
-					onDownloadProgress: function (progressEvent) {
-						const request = this as XMLHttpRequest;
-						if (!total) {
-							total = Number(request.getResponseHeader('X-Immich-Content-Length-Hint')) || 0;
-						}
+					onDownloadProgress: (event) =>
+						updateDownload(downloadKey, Math.floor((event.loaded / archive.size) * 100))
+				}
+			);
 
-						if (total) {
-							const current = progressEvent.loaded;
-							downloadAssets.set({ [downloadFileName]: Math.floor((current / total) * 100) });
+			downloadBlob(data, archiveName);
+		} catch (e) {
+			handleError(e, 'Unable to download files');
+			clearDownload(downloadKey);
+			return;
+		} finally {
+			setTimeout(() => clearDownload(downloadKey), 3_000);
+		}
+	}
+
+	onDone?.();
+};
+
+export const downloadFile = async (asset: AssetResponseDto, key?: string) => {
+	const filenames = [`${asset.originalFileName}.${getFilenameExtension(asset.originalPath)}`];
+	if (asset.livePhotoVideoId) {
+		filenames.push(`${asset.originalFileName}.mov`);
+	}
+
+	for (const filename of filenames) {
+		try {
+			updateDownload(filename, 0);
+
+			const { data } = await api.assetApi.downloadFile(
+				{ id: asset.id, key },
+				{
+					responseType: 'blob',
+					onDownloadProgress: (event: ProgressEvent) => {
+						if (event.lengthComputable) {
+							updateDownload(filename, Math.floor((event.loaded / event.total) * 100));
 						}
 					}
 				}
 			);
 
-			const isNotComplete = headers['x-immich-archive-complete'] === 'false';
-			const fileCount = Number(headers['x-immich-archive-file-count']) || 0;
-			if (isNotComplete && fileCount > 0) {
-				// skip += fileCount;
-			} else {
-				onDone?.();
-				done = true;
-			}
-
-			if (!(data instanceof Blob)) {
-				return;
-			}
-
-			if (status === 201) {
-				const fileUrl = URL.createObjectURL(data);
-				const anchor = document.createElement('a');
-				anchor.href = fileUrl;
-				anchor.download = downloadFileName;
-
-				document.body.appendChild(anchor);
-				anchor.click();
-				document.body.removeChild(anchor);
-
-				URL.revokeObjectURL(fileUrl);
-
-				// Remove item from download list
-				setTimeout(() => {
-					downloadAssets.set({});
-				}, 2000);
-			}
+			downloadBlob(data, filename);
+		} catch (e) {
+			handleError(e, `Error downloading ${filename}`);
+		} finally {
+			setTimeout(() => clearDownload(filename), 3_000);
 		}
-	} catch (e) {
-		console.error('Error downloading file ', e);
-		notificationController.show({
-			type: NotificationType.Error,
-			message: 'Error downloading file, check console for more details.'
-		});
 	}
-}
+};
 
 /**
  * Returns the lowercase filename extension without a dot (.) and
diff --git a/web/src/lib/utils/handle-error.ts b/web/src/lib/utils/handle-error.ts
index 853b88758..bb3ad6930 100644
--- a/web/src/lib/utils/handle-error.ts
+++ b/web/src/lib/utils/handle-error.ts
@@ -4,10 +4,20 @@ import {
 	NotificationType
 } from '../components/shared-components/notification/notification';
 
-export function handleError(error: unknown, message: string) {
+export async function handleError(error: unknown, message: string) {
 	console.error(`[handleError]: ${message}`, error);
 
-	let serverMessage = (error as ApiError)?.response?.data?.message;
+	let data = (error as ApiError)?.response?.data;
+	if (data instanceof Blob) {
+		const response = await data.text();
+		try {
+			data = JSON.parse(response);
+		} catch {
+			data = { message: response };
+		}
+	}
+
+	let serverMessage = data?.message;
 	if (serverMessage) {
 		serverMessage = `${String(serverMessage).slice(0, 75)}\n(Immich Server Error)`;
 	}
diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index a1c24b713..0724d2d15 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -67,7 +67,7 @@
 		</AssetSelectContextMenu>
 		<DeleteAssets {onAssetDelete} />
 		<AssetSelectContextMenu icon={DotsVertical} title="Add">
-			<DownloadAction menuItem />
+			<DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
 			<FavoriteAction menuItem removeFavorite={isAllFavorite} />
 			<ArchiveAction
 				menuItem

From 455a36b0fc1e83cacbaf352b05dde73a29de4dc4 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Fri, 30 Jun 2023 12:25:08 -0400
Subject: [PATCH 15/53] fix(server): read file permission checks (#3046)

---
 server/src/domain/metadata/metadata.service.spec.ts |  4 ++--
 server/src/domain/metadata/metadata.service.ts      |  2 +-
 server/src/domain/user/user.core.ts                 |  2 +-
 server/src/immich/api-v1/asset/asset.service.ts     | 13 ++++++-------
 .../src/infra/repositories/filesystem.provider.ts   |  2 +-
 5 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/server/src/domain/metadata/metadata.service.spec.ts b/server/src/domain/metadata/metadata.service.spec.ts
index 1052d7585..1931e0b9c 100644
--- a/server/src/domain/metadata/metadata.service.spec.ts
+++ b/server/src/domain/metadata/metadata.service.spec.ts
@@ -82,7 +82,7 @@ describe(MetadataService.name, () => {
       assetMock.save.mockResolvedValue(assetEntityStub.image);
       storageMock.checkFileExists.mockResolvedValue(true);
       await sut.handleSidecarDiscovery({ id: assetEntityStub.image.id });
-      expect(storageMock.checkFileExists).toHaveBeenCalledWith('/original/path.ext.xmp', constants.W_OK);
+      expect(storageMock.checkFileExists).toHaveBeenCalledWith('/original/path.ext.xmp', constants.R_OK);
       expect(assetMock.save).toHaveBeenCalledWith({
         id: assetEntityStub.image.id,
         sidecarPath: '/original/path.ext.xmp',
@@ -94,7 +94,7 @@ describe(MetadataService.name, () => {
       assetMock.save.mockResolvedValue(assetEntityStub.video);
       storageMock.checkFileExists.mockResolvedValue(true);
       await sut.handleSidecarDiscovery({ id: assetEntityStub.video.id });
-      expect(storageMock.checkFileExists).toHaveBeenCalledWith('/original/path.ext.xmp', constants.W_OK);
+      expect(storageMock.checkFileExists).toHaveBeenCalledWith('/original/path.ext.xmp', constants.R_OK);
       expect(assetMock.save).toHaveBeenCalledWith({
         id: assetEntityStub.image.id,
         sidecarPath: '/original/path.ext.xmp',
diff --git a/server/src/domain/metadata/metadata.service.ts b/server/src/domain/metadata/metadata.service.ts
index e244ca6a1..1570f5141 100644
--- a/server/src/domain/metadata/metadata.service.ts
+++ b/server/src/domain/metadata/metadata.service.ts
@@ -42,7 +42,7 @@ export class MetadataService {
     }
 
     const sidecarPath = `${asset.originalPath}.xmp`;
-    const exists = await this.storageRepository.checkFileExists(sidecarPath, constants.W_OK);
+    const exists = await this.storageRepository.checkFileExists(sidecarPath, constants.R_OK);
     if (!exists) {
       return false;
     }
diff --git a/server/src/domain/user/user.core.ts b/server/src/domain/user/user.core.ts
index 2b3ed4074..1b3e87225 100644
--- a/server/src/domain/user/user.core.ts
+++ b/server/src/domain/user/user.core.ts
@@ -112,7 +112,7 @@ export class UserCore {
     if (!user.profileImagePath) {
       throw new NotFoundException('User does not have a profile image');
     }
-    await fs.access(user.profileImagePath, constants.R_OK | constants.W_OK);
+    await fs.access(user.profileImagePath, constants.R_OK);
     return createReadStream(user.profileImagePath);
   }
 
diff --git a/server/src/immich/api-v1/asset/asset.service.ts b/server/src/immich/api-v1/asset/asset.service.ts
index 1b1dd00ee..9a275c66d 100644
--- a/server/src/immich/api-v1/asset/asset.service.ts
+++ b/server/src/immich/api-v1/asset/asset.service.ts
@@ -24,9 +24,8 @@ import {
   StreamableFile,
 } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
-import { R_OK, W_OK } from 'constants';
 import { Response as Res } from 'express';
-import { createReadStream, stat } from 'fs';
+import { constants, createReadStream, stat } from 'fs';
 import fs from 'fs/promises';
 import mime from 'mime-types';
 import path from 'path';
@@ -156,7 +155,7 @@ export class AssetService {
         continue;
       }
 
-      const exists = await this.storageRepository.checkFileExists(filepath, R_OK);
+      const exists = await this.storageRepository.checkFileExists(filepath, constants.R_OK);
       if (!exists) {
         throw new BadRequestException('File does not exist');
       }
@@ -307,7 +306,7 @@ export class AssetService {
         let videoPath = asset.originalPath;
         let mimeType = asset.mimeType;
 
-        await fs.access(videoPath, R_OK | W_OK);
+        await fs.access(videoPath, constants.R_OK);
 
         if (asset.encodedVideoPath) {
           videoPath = asset.encodedVideoPath == '' ? String(asset.originalPath) : String(asset.encodedVideoPath);
@@ -355,8 +354,8 @@ export class AssetService {
         }
 
         return this.streamFile(videoPath, res, headers, mimeType);
-      } catch (e) {
-        this.logger.error(`Error serving VIDEO asset=${asset.id}`);
+      } catch (e: Error | any) {
+        this.logger.error(`Error serving VIDEO asset=${asset.id}`, e?.stack);
         throw new InternalServerErrorException(`Failed to serve video asset ${e}`, 'ServeFile');
       }
     }
@@ -632,7 +631,7 @@ export class AssetService {
       return;
     }
 
-    await fs.access(filepath, R_OK);
+    await fs.access(filepath, constants.R_OK);
 
     return new StreamableFile(createReadStream(filepath));
   }
diff --git a/server/src/infra/repositories/filesystem.provider.ts b/server/src/infra/repositories/filesystem.provider.ts
index d82e776c8..62388201b 100644
--- a/server/src/infra/repositories/filesystem.provider.ts
+++ b/server/src/infra/repositories/filesystem.provider.ts
@@ -23,7 +23,7 @@ export class FilesystemProvider implements IStorageRepository {
 
   async createReadStream(filepath: string, mimeType?: string | null): Promise<ImmichReadStream> {
     const { size } = await fs.stat(filepath);
-    await fs.access(filepath, constants.R_OK | constants.W_OK);
+    await fs.access(filepath, constants.R_OK);
     return {
       stream: createReadStream(filepath),
       length: size,

From e477f99c7deb03a7e430e61c6cb92391a4c397c8 Mon Sep 17 00:00:00 2001
From: Mert <101130780+mertalev@users.noreply.github.com>
Date: Fri, 30 Jun 2023 12:33:54 -0400
Subject: [PATCH 16/53] fix(server): fix more vector search results being
 returned than intended (#3042)

---
 server/src/infra/repositories/typesense.repository.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/src/infra/repositories/typesense.repository.ts b/server/src/infra/repositories/typesense.repository.ts
index 9a03a104e..40bd71ddb 100644
--- a/server/src/infra/repositories/typesense.repository.ts
+++ b/server/src/infra/repositories/typesense.repository.ts
@@ -275,7 +275,7 @@ export class TypesenseRepository implements ISearchRepository {
           collection: faceSchema.name,
           q: '*',
           vector_query: `embedding:([${input.join(',')}], k:5)`,
-          per_page: 250,
+          per_page: 5,
           filter_by: this.buildFilterBy('ownerId', filters.ownerId, true),
         } as any,
       ],
@@ -291,7 +291,7 @@ export class TypesenseRepository implements ISearchRepository {
           collection: assetSchema.name,
           q: '*',
           vector_query: `smartInfo.clipEmbedding:([${input.join(',')}], k:100)`,
-          per_page: 250,
+          per_page: 100,
           facet_by: this.getFacetFieldNames(SearchCollection.ASSETS),
           filter_by: this.getAssetFilters(filters),
         } as any,

From 734f8e02b5a4a358c874bb935388ae5a4104293a Mon Sep 17 00:00:00 2001
From: martyfuhry <martyfuhry@gmail.com>
Date: Fri, 30 Jun 2023 14:49:17 -0400
Subject: [PATCH 17/53] fix(mobile): Uses ImageFiltered for performance (#3051)

* Uses ImageFiltered for performance

* values

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../lib/modules/memories/ui/memory_card.dart  | 33 +++++++++----------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/mobile/lib/modules/memories/ui/memory_card.dart b/mobile/lib/modules/memories/ui/memory_card.dart
index 493685ddd..0dbe5749b 100644
--- a/mobile/lib/modules/memories/ui/memory_card.dart
+++ b/mobile/lib/modules/memories/ui/memory_card.dart
@@ -54,27 +54,24 @@ class MemoryCard extends HookConsumerWidget {
       clipBehavior: Clip.hardEdge,
       child: Stack(
         children: [
-          Container(
-            decoration: BoxDecoration(
-              image: DecorationImage(
-                image: CachedNetworkImageProvider(
-                  getThumbnailUrl(
-                    asset,
+          ImageFiltered(
+            imageFilter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
+            child: Container(
+              decoration: BoxDecoration(
+                image: DecorationImage(
+                  image: CachedNetworkImageProvider(
+                    getThumbnailUrl(
+                      asset,
+                    ),
+                    cacheKey: getThumbnailCacheKey(
+                      asset,
+                    ),
+                    headers: {"Authorization": authToken},
                   ),
-                  cacheKey: getThumbnailCacheKey(
-                    asset,
-                  ),
-                  headers: {"Authorization": authToken},
+                  fit: BoxFit.cover,
                 ),
-                fit: BoxFit.cover,
-              ),
-            ),
-            child: BackdropFilter(
-              filter: ImageFilter.blur(sigmaX: 60, sigmaY: 60),
-              child: Container(
-                decoration:
-                    BoxDecoration(color: Colors.black.withOpacity(0.25)),
               ),
+              child: Container(color: Colors.black.withOpacity(0.2)),
             ),
           ),
           GestureDetector(

From 5869648f19dbf1c66ee76c4360ba6c9e91fcee4c Mon Sep 17 00:00:00 2001
From: Ethan Margaillan <ethan.margaillan@gmail.com>
Date: Fri, 30 Jun 2023 21:53:16 +0200
Subject: [PATCH 18/53] chore(web): replace window.confirm by ConfirmDialogues
 and cleanup existing ones (#3039)

* chore(web): replace window.confirm by ConfirmDialogues and cleanup existing ones

* fix(web): linter and svelte-check issues

* fix(web): rephrase some confirm dialogs

* fix(web): run prettier

* fix(web): merge with last version and run prettier again

* fix(web): run prettier
---
 .../admin-page/delete-confirm-dialoge.svelte  | 33 ++++------
 .../admin-page/restore-dialoge.svelte         | 32 ++++-----
 .../settings/confirm-disable-login.svelte     |  9 +--
 .../components/album-page/album-viewer.svelte | 48 +++++++++-----
 .../asset-viewer/asset-viewer.svelte          | 62 ++++++++++++-----
 .../components/forms/edit-user-form.svelte    | 54 ++++++++++-----
 .../photos-page/actions/delete-assets.svelte  | 37 ++++++++---
 .../actions/remove-from-album.svelte          | 66 +++++++++++++------
 .../shared-components/confirm-dialogue.svelte | 38 +++++++++--
 web/src/routes/(user)/albums/+page.svelte     | 47 ++++++++++++-
 .../albums/__tests__/albums.bloc.spec.ts      | 47 +------------
 web/src/routes/(user)/albums/albums.bloc.ts   | 40 +++--------
 .../(user)/sharing/sharedlinks/+page.svelte   |  2 +-
 .../routes/admin/user-management/+page.svelte | 26 ++++----
 14 files changed, 313 insertions(+), 228 deletions(-)

diff --git a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte
index 5b1298c26..8f687f3b6 100644
--- a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte
+++ b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { api, UserResponseDto } from '@api';
 	import { createEventDispatcher } from 'svelte';
-	import Button from '../elements/buttons/button.svelte';
+	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
 	import { handleError } from '../../utils/handle-error';
 
 	export let user: UserResponseDto;
@@ -23,25 +23,14 @@
 	};
 </script>
 
-<div
-	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
->
-	<div
-		class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-	>
-		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
-			Confirm User Deletion
-		</h1>
-	</div>
-	<div>
-		<p class="ml-4 text-md py-5 text-center">
-			{user.firstName}
-			{user.lastName} account and assets along will be marked to delete completely after 7 days. are
-			you sure you want to proceed ?
-		</p>
-
-		<div class="flex w-full px-4 gap-4 mt-8">
-			<Button fullwidth color="red" on:click={deleteUser}>Confirm</Button>
+<ConfirmDialogue title="Delete User" confirmText="Delete" on:confirm={deleteUser} on:cancel>
+	<svelte:fragment slot="prompt">
+		<div class="flex flex-col gap-4">
+			<p>
+				<b>{user.firstName} {user.lastName}</b>'s account and assets will be permanently deleted
+				after 7 days.
+			</p>
+			<p>Are you sure you want to continue?</p>
 		</div>
-	</div>
-</div>
+	</svelte:fragment>
+</ConfirmDialogue>
diff --git a/web/src/lib/components/admin-page/restore-dialoge.svelte b/web/src/lib/components/admin-page/restore-dialoge.svelte
index 6573e04f6..d78006413 100644
--- a/web/src/lib/components/admin-page/restore-dialoge.svelte
+++ b/web/src/lib/components/admin-page/restore-dialoge.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { api, UserResponseDto } from '@api';
 	import { createEventDispatcher } from 'svelte';
-	import Button from '../elements/buttons/button.svelte';
+	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
 
 	export let user: UserResponseDto;
 
@@ -14,24 +14,14 @@
 	};
 </script>
 
-<div
-	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
+<ConfirmDialogue
+	title="Restore User"
+	confirmText="Continue"
+	confirmColor="green"
+	on:confirm={restoreUser}
+	on:cancel
 >
-	<div
-		class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-	>
-		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
-			Restore User
-		</h1>
-	</div>
-	<div>
-		<p class="ml-4 text-md py-5 text-center">
-			{user.firstName}
-			{user.lastName} account will restored
-		</p>
-
-		<div class="flex w-full px-4 gap-4 mt-8">
-			<Button color="green" fullwidth on:click={restoreUser}>Confirm</Button>
-		</div>
-	</div>
-</div>
+	<svelte:fragment slot="prompt">
+		<p><b>{user.firstName} {user.lastName}</b>'s account will be restored.</p>
+	</svelte:fragment>
+</ConfirmDialogue>
diff --git a/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte b/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte
index 1a8d238b4..37f740d43 100644
--- a/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte
+++ b/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte
@@ -4,12 +4,9 @@
 
 <ConfirmDialogue title="Disable Login" on:cancel on:confirm>
 	<svelte:fragment slot="prompt">
-		<div class="flex flex-col gap-4 p-3">
-			<p class="text-md text-center">
-				Are you sure you want to disable all login methods? Login will be completely disabled.
-			</p>
-
-			<p class="text-md text-center">
+		<div class="flex flex-col gap-4">
+			<p>Are you sure you want to disable all login methods? Login will be completely disabled.</p>
+			<p>
 				To re-enable, use a
 				<a
 					href="https://immich.app/docs/administration/server-commands"
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 9d3933be6..4b0c28cc1 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -43,6 +43,7 @@
 	import ShareInfoModal from './share-info-modal.svelte';
 	import ThumbnailSelection from './thumbnail-selection.svelte';
 	import UserSelectionModal from './user-selection-modal.svelte';
+	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
 	import { handleError } from '../../utils/handle-error';
 	import { downloadArchive } from '../../utils/asset-utils';
 
@@ -71,6 +72,7 @@
 	let isShowShareInfoModal = false;
 	let isShowAlbumOptions = false;
 	let isShowThumbnailSelection = false;
+	let isShowDeleteConfirmation = false;
 
 	let backUrl = '/albums';
 	let currentAlbumName = '';
@@ -223,21 +225,17 @@
 	};
 
 	const removeAlbum = async () => {
-		if (
-			window.confirm(
-				`Are you sure you want to delete album ${album.albumName}? If the album is shared, other users will not be able to access it.`
-			)
-		) {
-			try {
-				await api.albumApi.deleteAlbum({ id: album.id });
-				goto(backUrl);
-			} catch (e) {
-				console.error('Error [userDeleteMenu] ', e);
-				notificationController.show({
-					type: NotificationType.Error,
-					message: 'Error deleting album, check console for more details'
-				});
-			}
+		try {
+			await api.albumApi.deleteAlbum({ id: album.id });
+			goto(backUrl);
+		} catch (e) {
+			console.error('Error [userDeleteMenu] ', e);
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error deleting album, check console for more details'
+			});
+		} finally {
+			isShowDeleteConfirmation = false;
 		}
 	};
 
@@ -348,7 +346,11 @@
 							on:click={() => (isShowShareUserSelection = true)}
 							logo={ShareVariantOutline}
 						/>
-						<CircleIconButton title="Remove album" on:click={removeAlbum} logo={DeleteOutline} />
+						<CircleIconButton
+							title="Remove album"
+							on:click={() => (isShowDeleteConfirmation = true)}
+							logo={DeleteOutline}
+						/>
 					{/if}
 				{/if}
 
@@ -515,3 +517,17 @@
 		on:thumbnail-selected={setAlbumThumbnailHandler}
 	/>
 {/if}
+
+{#if isShowDeleteConfirmation}
+	<ConfirmDialogue
+		title="Delete Album"
+		confirmText="Delete"
+		on:confirm={removeAlbum}
+		on:cancel={() => (isShowDeleteConfirmation = false)}
+	>
+		<svelte:fragment slot="prompt">
+			<p>Are you sure you want to delete the album <b>{album.albumName}</b>?</p>
+			<p>If this album is shared, other users will not be able to access it anymore.</p>
+		</svelte:fragment>
+	</ConfirmDialogue>
+{/if}
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 0a073f63f..358572001 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -21,6 +21,7 @@
 	import DetailPanel from './detail-panel.svelte';
 	import PhotoViewer from './photo-viewer.svelte';
 	import VideoViewer from './video-viewer.svelte';
+	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
 
 	import { assetStore } from '$lib/stores/assets.store';
 	import { isShowDetail } from '$lib/stores/preferences.store';
@@ -37,6 +38,7 @@
 	let halfRightHover = false;
 	let appearsInAlbums: AlbumResponseDto[] = [];
 	let isShowAlbumPicker = false;
+	let isShowDeleteConfirmation = false;
 	let addToSharedAlbum = true;
 	let shouldPlayMotionPhoto = false;
 	let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true;
@@ -77,7 +79,7 @@
 				closeViewer();
 				return;
 			case 'Delete':
-				deleteAsset();
+				isShowDeleteConfirmation = true;
 				return;
 			case 'i':
 				$isShowDetail = !$isShowDetail;
@@ -116,23 +118,17 @@
 
 	const deleteAsset = async () => {
 		try {
-			if (
-				window.confirm(
-					`Caution! Are you sure you want to delete this asset? This step also deletes this asset in the album(s) to which it belongs. You can not undo this action!`
-				)
-			) {
-				const { data: deletedAssets } = await api.assetApi.deleteAsset({
-					deleteAssetDto: {
-						ids: [asset.id]
-					}
-				});
+			const { data: deletedAssets } = await api.assetApi.deleteAsset({
+				deleteAssetDto: {
+					ids: [asset.id]
+				}
+			});
 
-				navigateAssetForward();
+			navigateAssetForward();
 
-				for (const asset of deletedAssets) {
-					if (asset.status == 'SUCCESS') {
-						assetStore.removeAsset(asset.id);
-					}
+			for (const asset of deletedAssets) {
+				if (asset.status == 'SUCCESS') {
+					assetStore.removeAsset(asset.id);
 				}
 			}
 		} catch (e) {
@@ -140,7 +136,9 @@
 				type: NotificationType.Error,
 				message: 'Error deleting this asset, check console for more details'
 			});
-			console.error('Error deleteSelectedAssetHandler', e);
+			console.error('Error deleteAsset', e);
+		} finally {
+			isShowDeleteConfirmation = false;
 		}
 	};
 
@@ -227,6 +225,17 @@
 			});
 		}
 	};
+
+	const getAssetType = () => {
+		switch (asset.type) {
+			case 'IMAGE':
+				return 'Photo';
+			case 'VIDEO':
+				return 'Video';
+			default:
+				return 'Asset';
+		}
+	};
 </script>
 
 <section
@@ -244,7 +253,7 @@
 			on:goBack={closeViewer}
 			on:showDetail={showDetailInfoHandler}
 			on:download={() => downloadFile(asset, publicSharedKey)}
-			on:delete={deleteAsset}
+			on:delete={() => (isShowDeleteConfirmation = true)}
 			on:favorite={toggleFavorite}
 			on:addToAlbum={() => openAlbumPicker(false)}
 			on:addToSharedAlbum={() => openAlbumPicker(true)}
@@ -358,6 +367,23 @@
 			on:close={() => (isShowAlbumPicker = false)}
 		/>
 	{/if}
+
+	{#if isShowDeleteConfirmation}
+		<ConfirmDialogue
+			title="Delete {getAssetType()}"
+			confirmText="Delete"
+			on:confirm={deleteAsset}
+			on:cancel={() => (isShowDeleteConfirmation = false)}
+		>
+			<svelte:fragment slot="prompt">
+				<p>
+					Are you sure you want to delete this {getAssetType().toLowerCase()}? This will also remove
+					it from its album(s).
+				</p>
+				<p><b>You cannot undo this action!</b></p>
+			</svelte:fragment>
+		</ConfirmDialogue>
+	{/if}
 </section>
 
 <style>
diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte
index 3aedf0f28..6160901b7 100644
--- a/web/src/lib/components/forms/edit-user-form.svelte
+++ b/web/src/lib/components/forms/edit-user-form.svelte
@@ -7,6 +7,7 @@
 		NotificationType
 	} from '../shared-components/notification/notification';
 	import Button from '../elements/buttons/button.svelte';
+	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
 	import { handleError } from '../../utils/handle-error';
 
 	export let user: UserResponseDto;
@@ -15,6 +16,8 @@
 	let error: string;
 	let success: string;
 
+	let isShowResetPasswordConfirmation = false;
+
 	const dispatch = createEventDispatcher();
 
 	const editUser = async () => {
@@ -41,20 +44,18 @@
 
 	const resetPassword = async () => {
 		try {
-			if (window.confirm('Do you want to reset the user password?')) {
-				const defaultPassword = 'password';
+			const defaultPassword = 'password';
 
-				const { status } = await api.userApi.updateUser({
-					updateUserDto: {
-						id: user.id,
-						password: defaultPassword,
-						shouldChangePassword: true
-					}
-				});
-
-				if (status == 200) {
-					dispatch('reset-password-success');
+			const { status } = await api.userApi.updateUser({
+				updateUserDto: {
+					id: user.id,
+					password: defaultPassword,
+					shouldChangePassword: true
 				}
+			});
+
+			if (status == 200) {
+				dispatch('reset-password-success');
 			}
 		} catch (e) {
 			console.error('Error reseting user password', e);
@@ -62,6 +63,8 @@
 				message: 'Error reseting user password, check console for more details',
 				type: NotificationType.Error
 			});
+		} finally {
+			isShowResetPasswordConfirmation = false;
 		}
 	};
 </script>
@@ -125,9 +128,9 @@
 			/>
 
 			<p>
-				Note: To apply the Storage Label to previously uploaded assets, run the <a
-					href="/admin/jobs-status"
-					class="text-immich-primary dark:text-immich-dark-primary">Storage Migration Job</a
+				Note: To apply the Storage Label to previously uploaded assets, run the
+				<a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary">
+					Storage Migration Job</a
 				>
 			</p>
 		</div>
@@ -157,9 +160,28 @@
 		{/if}
 		<div class="flex w-full px-4 gap-4 mt-8">
 			{#if canResetPassword}
-				<Button color="light-red" fullwidth on:click={resetPassword}>Reset password</Button>
+				<Button
+					color="light-red"
+					fullwidth
+					on:click={() => (isShowResetPasswordConfirmation = true)}>Reset password</Button
+				>
 			{/if}
 			<Button type="submit" fullwidth>Confirm</Button>
 		</div>
 	</form>
 </div>
+
+{#if isShowResetPasswordConfirmation}
+	<ConfirmDialogue
+		title="Reset Password"
+		confirmText="Reset"
+		on:confirm={resetPassword}
+		on:cancel={() => (isShowResetPasswordConfirmation = false)}
+	>
+		<svelte:fragment slot="prompt">
+			<p>
+				Are you sure you want to reset <b>{user.firstName} {user.lastName}</b>'s password?
+			</p>
+		</svelte:fragment>
+	</ConfirmDialogue>
+{/if}
diff --git a/web/src/lib/components/photos-page/actions/delete-assets.svelte b/web/src/lib/components/photos-page/actions/delete-assets.svelte
index ce030b544..f22a84231 100644
--- a/web/src/lib/components/photos-page/actions/delete-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/delete-assets.svelte
@@ -13,7 +13,7 @@
 	export let onAssetDelete: OnAssetDelete;
 	const { getAssets, clearSelect } = getAssetControlContext();
 
-	let confirm = false;
+	let isShowConfirmation = false;
 
 	const handleDelete = async () => {
 		try {
@@ -32,24 +32,43 @@
 				}
 			}
 
-			notificationController.show({ message: `Deleted ${count}`, type: NotificationType.Info });
+			notificationController.show({
+				message: `Deleted ${count}`,
+				type: NotificationType.Info
+			});
 
 			clearSelect();
 		} catch (e) {
 			handleError(e, 'Error deleting assets');
+		} finally {
+			isShowConfirmation = false;
 		}
 	};
 </script>
 
-<CircleIconButton title="Delete" logo={DeleteOutline} on:click={() => (confirm = true)} />
+<CircleIconButton
+	title="Delete"
+	logo={DeleteOutline}
+	on:click={() => (isShowConfirmation = true)}
+/>
 
-{#if confirm}
+{#if isShowConfirmation}
 	<ConfirmDialogue
-		prompt="Are you sure you want to delete {getAssets()
-			.size} assets? This step also deletes assets in the album(s) to which they belong. You can not undo this action!"
-		title="Delete assets?"
+		title="Delete Asset{getAssets().size > 1 ? 's' : ''}"
 		confirmText="Delete"
 		on:confirm={handleDelete}
-		on:cancel={() => (confirm = false)}
-	/>
+		on:cancel={() => (isShowConfirmation = false)}
+	>
+		<svelte:fragment slot="prompt">
+			<p>
+				Are you sure you want to delete
+				{#if getAssets().size > 1}
+					these <b>{getAssets().size}</b> assets? This will also remove them from their album(s).
+				{:else}
+					this asset? This will also remove it from its album(s).
+				{/if}
+			</p>
+			<p><b>You cannot undo this action!</b></p>
+		</svelte:fragment>
+	</ConfirmDialogue>
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/remove-from-album.svelte b/web/src/lib/components/photos-page/actions/remove-from-album.svelte
index ffcd3d434..33a3d011b 100644
--- a/web/src/lib/components/photos-page/actions/remove-from-album.svelte
+++ b/web/src/lib/components/photos-page/actions/remove-from-album.svelte
@@ -7,32 +7,60 @@
 	import { AlbumResponseDto, api } from '@api';
 	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
 	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
 
 	export let album: AlbumResponseDto;
 
 	const { getAssets, clearSelect } = getAssetControlContext();
 
-	const handleRemoveFromAlbum = async () => {
-		if (window.confirm('Do you want to remove selected assets from the album?')) {
-			try {
-				const { data } = await api.albumApi.removeAssetFromAlbum({
-					id: album.id,
-					removeAssetsDto: {
-						assetIds: Array.from(getAssets()).map((a) => a.id)
-					}
-				});
+	let isShowConfirmation = false;
 
-				album = data;
-				clearSelect();
-			} catch (e) {
-				console.error('Error [album-viewer] [removeAssetFromAlbum]', e);
-				notificationController.show({
-					type: NotificationType.Error,
-					message: 'Error removing assets from album, check console for more details'
-				});
-			}
+	const removeFromAlbum = async () => {
+		try {
+			const { data } = await api.albumApi.removeAssetFromAlbum({
+				id: album.id,
+				removeAssetsDto: {
+					assetIds: Array.from(getAssets()).map((a) => a.id)
+				}
+			});
+
+			album = data;
+			clearSelect();
+		} catch (e) {
+			console.error('Error [album-viewer] [removeAssetFromAlbum]', e);
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error removing assets from album, check console for more details'
+			});
+		} finally {
+			isShowConfirmation = false;
 		}
 	};
 </script>
 
-<CircleIconButton title="Remove from album" on:click={handleRemoveFromAlbum} logo={DeleteOutline} />
+<CircleIconButton
+	title="Remove from album"
+	on:click={() => (isShowConfirmation = true)}
+	logo={DeleteOutline}
+/>
+
+{#if isShowConfirmation}
+	<ConfirmDialogue
+		title="Remove Asset{getAssets().size > 1 ? 's' : ''}"
+		confirmText="Remove"
+		on:confirm={removeFromAlbum}
+		on:cancel={() => (isShowConfirmation = false)}
+	>
+		<svelte:fragment slot="prompt">
+			<p>
+				Are you sure you want to remove
+				{#if getAssets().size > 1}
+					these <b>{getAssets().size}</b> assets
+				{:else}
+					this asset
+				{/if}
+				from the album?
+			</p>
+		</svelte:fragment>
+	</ConfirmDialogue>
+{/if}
diff --git a/web/src/lib/components/shared-components/confirm-dialogue.svelte b/web/src/lib/components/shared-components/confirm-dialogue.svelte
index 76fb0e160..5f6551920 100644
--- a/web/src/lib/components/shared-components/confirm-dialogue.svelte
+++ b/web/src/lib/components/shared-components/confirm-dialogue.svelte
@@ -2,18 +2,29 @@
 	import { createEventDispatcher } from 'svelte';
 	import FullScreenModal from './full-screen-modal.svelte';
 	import Button from '../elements/buttons/button.svelte';
+	import type { Color } from '$lib/components/elements/buttons/button.svelte';
 
 	export let title = 'Confirm';
 	export let prompt = 'Are you sure you want to do this?';
 	export let confirmText = 'Confirm';
+	export let confirmColor: Color = 'red';
 	export let cancelText = 'Cancel';
+	export let cancelColor: Color = 'primary';
+	export let hideCancelButton = false;
 
 	const dispatch = createEventDispatcher();
+
+	let isConfirmButtonDisabled = false;
+
 	const handleCancel = () => dispatch('cancel');
-	const handleConfirm = () => dispatch('confirm');
+
+	const handleConfirm = () => {
+		isConfirmButtonDisabled = true;
+		dispatch('confirm');
+	};
 </script>
 
-<FullScreenModal on:clickOutside={() => handleCancel()}>
+<FullScreenModal on:clickOutside={handleCancel}>
 	<div
 		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 	>
@@ -25,13 +36,26 @@
 			</h1>
 		</div>
 		<div>
-			<slot name="prompt">
-				<p class="ml-4 text-md py-5 text-center">{prompt}</p>
-			</slot>
+			<div class="px-4 py-5 text-md text-center">
+				<slot name="prompt">
+					<p>{prompt}</p>
+				</slot>
+			</div>
 
 			<div class="flex w-full px-4 gap-4 mt-4">
-				<Button fullwidth on:click={() => handleCancel()}>{cancelText}</Button>
-				<Button color="red" fullwidth on:click={() => handleConfirm()}>{confirmText}</Button>
+				{#if !hideCancelButton}
+					<Button color={cancelColor} fullwidth on:click={handleCancel}>
+						{cancelText}
+					</Button>
+				{/if}
+				<Button
+					color={confirmColor}
+					fullwidth
+					on:click={handleConfirm}
+					disabled={isConfirmButtonDisabled}
+				>
+					{confirmText}
+				</Button>
 			</div>
 		</div>
 	</div>
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index f4902b40e..59f57f613 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -14,6 +14,12 @@
 	import { onMount } from 'svelte';
 	import { flip } from 'svelte/animate';
 	import Dropdown from '$lib/components/elements/dropdown.svelte';
+	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import type { AlbumResponseDto } from '@api';
 
 	export let data: PageData;
 
@@ -23,14 +29,36 @@
 		albums: unsortedAlbums,
 		isShowContextMenu,
 		contextMenuPosition,
+		contextMenuTargetAlbum,
 		createAlbum,
 		deleteAlbum,
-		deleteSelectedContextAlbum,
 		showAlbumContextMenu,
 		closeAlbumContextMenu
 	} = useAlbums({ albums: data.albums });
 
 	let albums = unsortedAlbums;
+	let albumToDelete: AlbumResponseDto | null;
+
+	const setAlbumToDelete = () => {
+		albumToDelete = $contextMenuTargetAlbum ?? null;
+		closeAlbumContextMenu();
+	};
+
+	const deleteSelectedAlbum = async () => {
+		if (!albumToDelete) {
+			return;
+		}
+		try {
+			await deleteAlbum(albumToDelete);
+		} catch {
+			notificationController.show({
+				message: 'Error deleting album',
+				type: NotificationType.Error
+			});
+		} finally {
+			albumToDelete = null;
+		}
+	};
 
 	const sortByDate = (a: string, b: string) => {
 		const aDate = new Date(a);
@@ -69,7 +97,6 @@
 			for (const album of $albums) {
 				if (album.assetCount == 0 && album.albumName == 'Untitled') {
 					await deleteAlbum(album);
-					$albums = $albums.filter((a) => a.id !== album.id);
 				}
 			}
 		} catch (error) {
@@ -120,7 +147,7 @@
 <!-- Context Menu -->
 {#if $isShowContextMenu}
 	<ContextMenu {...$contextMenuPosition} on:outclick={closeAlbumContextMenu}>
-		<MenuOption on:click={deleteSelectedContextAlbum}>
+		<MenuOption on:click={() => setAlbumToDelete()}>
 			<span class="flex place-items-center place-content-center gap-2">
 				<DeleteOutline size="18" />
 				<p>Delete album</p>
@@ -128,3 +155,17 @@
 		</MenuOption>
 	</ContextMenu>
 {/if}
+
+{#if albumToDelete}
+	<ConfirmDialogue
+		title="Delete Album"
+		confirmText="Delete"
+		on:confirm={deleteSelectedAlbum}
+		on:cancel={() => (albumToDelete = null)}
+	>
+		<svelte:fragment slot="prompt">
+			<p>Are you sure you want to delete the album <b>{albumToDelete.albumName}</b>?</p>
+			<p>If this album is shared, other users will not be able to access it anymore.</p>
+		</svelte:fragment>
+	</ConfirmDialogue>
+{/if}
diff --git a/web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts b/web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts
index 8dad0c966..0ae8afe5c 100644
--- a/web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts
+++ b/web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts
@@ -12,10 +12,6 @@ jest.mock('@api');
 
 const apiMock: jest.MockedObject<typeof api> = api as jest.MockedObject<typeof api>;
 
-function mockWindowConfirm(result: boolean) {
-	jest.spyOn(global, 'confirm').mockReturnValueOnce(result);
-}
-
 describe('Albums BLoC', () => {
 	let sut: ReturnType<typeof useAlbums>;
 	const _albums = albumFactory.buildList(5);
@@ -115,8 +111,6 @@ describe('Albums BLoC', () => {
 			statusText: ''
 		});
 
-		mockWindowConfirm(true);
-
 		const albumToDelete = get(sut.albums)[2]; // delete third album
 		const albumToDeleteId = albumToDelete.id;
 		const contextMenuCoords = { x: 100, y: 150 };
@@ -125,52 +119,15 @@ describe('Albums BLoC', () => {
 		sut.showAlbumContextMenu(contextMenuCoords, albumToDelete);
 		expect(get(sut.contextMenuPosition)).toEqual(contextMenuCoords);
 		expect(get(sut.isShowContextMenu)).toBe(true);
+		expect(get(sut.contextMenuTargetAlbum)).toEqual(albumToDelete);
 
-		await sut.deleteSelectedContextAlbum();
+		await sut.deleteAlbum(albumToDelete);
 		const updatedAlbums = get(sut.albums);
 
 		expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledTimes(1);
 		expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledWith({ id: albumToDeleteId });
 		expect(updatedAlbums).toHaveLength(4);
 		expect(updatedAlbums).not.toContain(albumToDelete);
-		expect(get(sut.isShowContextMenu)).toBe(false);
-	});
-
-	it('shows error message when it fails deleting an album', async () => {
-		mockWindowConfirm(true);
-
-		const albumToDelete = get(sut.albums)[2]; // delete third album
-		const contextMenuCoords = { x: 100, y: 150 };
-
-		apiMock.albumApi.deleteAlbum.mockRejectedValueOnce({});
-
-		sut.showAlbumContextMenu(contextMenuCoords, albumToDelete);
-		const newAlbum = await sut.deleteSelectedContextAlbum();
-		const notifications = get(notificationController.notificationList);
-
-		expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledTimes(1);
-		expect(newAlbum).not.toBeDefined();
-		expect(notifications).toHaveLength(1);
-		expect(notifications[0].type).toEqual(NotificationType.Error);
-	});
-
-	it('prevents deleting an album when rejecting confirm dialog', async () => {
-		const albumToDelete = get(sut.albums)[2]; // delete third album
-
-		mockWindowConfirm(false);
-
-		sut.showAlbumContextMenu({ x: 100, y: 150 }, albumToDelete);
-		await sut.deleteSelectedContextAlbum();
-
-		expect(apiMock.albumApi.deleteAlbum).not.toHaveBeenCalled();
-	});
-
-	it('prevents deleting an album when not previously selected', async () => {
-		mockWindowConfirm(true);
-
-		await sut.deleteSelectedContextAlbum();
-
-		expect(apiMock.albumApi.deleteAlbum).not.toHaveBeenCalled();
 	});
 
 	it('closes album context menu, deselecting album', () => {
diff --git a/web/src/routes/(user)/albums/albums.bloc.ts b/web/src/routes/(user)/albums/albums.bloc.ts
index 537ce33f1..78cd907d5 100644
--- a/web/src/routes/(user)/albums/albums.bloc.ts
+++ b/web/src/routes/(user)/albums/albums.bloc.ts
@@ -24,8 +24,6 @@ export const useAlbums = (props: AlbumsProps) => {
 				if (album.albumName === 'Untitled' && album.assetCount === 0) {
 					setTimeout(async () => {
 						await deleteAlbum(album);
-						const _albums = get(albums);
-						albums.set(_albums.filter((a) => a.id !== album.id));
 					}, 500);
 				}
 			}
@@ -54,8 +52,13 @@ export const useAlbums = (props: AlbumsProps) => {
 		}
 	}
 
-	async function deleteAlbum(album: AlbumResponseDto): Promise<void> {
-		await api.albumApi.deleteAlbum({ id: album.id });
+	async function deleteAlbum(albumToDelete: AlbumResponseDto): Promise<void> {
+		await api.albumApi.deleteAlbum({ id: albumToDelete.id });
+		albums.set(
+			get(albums).filter(({ id }) => {
+				return id !== albumToDelete.id;
+			})
+		);
 	}
 
 	async function showAlbumContextMenu(
@@ -74,40 +77,15 @@ export const useAlbums = (props: AlbumsProps) => {
 		contextMenuTargetAlbum.set(undefined);
 	}
 
-	async function deleteSelectedContextAlbum(): Promise<void> {
-		const albumToDelete = get(contextMenuTargetAlbum);
-		if (!albumToDelete) {
-			return;
-		}
-		if (
-			window.confirm(
-				`Are you sure you want to delete album ${albumToDelete.albumName}? If the album is shared, other users will not be able to access it.`
-			)
-		) {
-			try {
-				await api.albumApi.deleteAlbum({ id: albumToDelete.id });
-				const _albums = get(albums);
-				albums.set(_albums.filter((a) => a.id !== albumToDelete.id));
-			} catch {
-				notificationController.show({
-					message: 'Error deleting album',
-					type: NotificationType.Error
-				});
-			}
-		}
-
-		closeAlbumContextMenu();
-	}
-
 	return {
 		albums,
 		isShowContextMenu,
 		contextMenuPosition,
+		contextMenuTargetAlbum,
 		loadAlbums,
 		createAlbum,
 		deleteAlbum,
 		showAlbumContextMenu,
-		closeAlbumContextMenu,
-		deleteSelectedContextAlbum
+		closeAlbumContextMenu
 	};
 };
diff --git a/web/src/routes/(user)/sharing/sharedlinks/+page.svelte b/web/src/routes/(user)/sharing/sharedlinks/+page.svelte
index aee6a9863..6cd7e2e51 100644
--- a/web/src/routes/(user)/sharing/sharedlinks/+page.svelte
+++ b/web/src/routes/(user)/sharing/sharedlinks/+page.svelte
@@ -98,7 +98,7 @@
 {#if deleteLinkId}
 	<ConfirmDialogue
 		title="Delete Shared Link"
-		prompt="Are you want to delete this shared link?"
+		prompt="Are you sure you want to delete this shared link?"
 		confirmText="Delete"
 		on:confirm={() => handleDeleteLink()}
 		on:cancel={() => (deleteLinkId = null)}
diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte
index 5dc4b8260..aae793d47 100644
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@@ -126,23 +126,21 @@
 	{/if}
 
 	{#if shouldShowDeleteConfirmDialog}
-		<FullScreenModal on:clickOutside={() => (shouldShowDeleteConfirmDialog = false)}>
-			<DeleteConfirmDialog
-				user={selectedUser}
-				on:user-delete-success={onUserDeleteSuccess}
-				on:user-delete-fail={onUserDeleteFail}
-			/>
-		</FullScreenModal>
+		<DeleteConfirmDialog
+			user={selectedUser}
+			on:user-delete-success={onUserDeleteSuccess}
+			on:user-delete-fail={onUserDeleteFail}
+			on:cancel={() => (shouldShowDeleteConfirmDialog = false)}
+		/>
 	{/if}
 
 	{#if shouldShowRestoreDialog}
-		<FullScreenModal on:clickOutside={() => (shouldShowRestoreDialog = false)}>
-			<RestoreDialogue
-				user={selectedUser}
-				on:user-restore-success={onUserRestoreSuccess}
-				on:user-restore-fail={onUserRestoreFail}
-			/>
-		</FullScreenModal>
+		<RestoreDialogue
+			user={selectedUser}
+			on:user-restore-success={onUserRestoreSuccess}
+			on:user-restore-fail={onUserRestoreFail}
+			on:cancel={() => (shouldShowRestoreDialog = false)}
+		/>
 	{/if}
 
 	{#if shouldShowInfoPanel}

From 615893be386bd3d61d6ee2e858258132bc47f143 Mon Sep 17 00:00:00 2001
From: Fynn Petersen-Frey <10599762+fyfrey@users.noreply.github.com>
Date: Sat, 1 Jul 2023 03:47:44 +0200
Subject: [PATCH 19/53] fix(mobile): setting to always display remote assets
 (#3044)

---
 mobile/assets/i18n/en-US.json                         |  4 +++-
 .../modules/asset_viewer/views/gallery_viewer.dart    | 10 +++++++---
 .../settings/services/app_settings.service.dart       |  3 ++-
 .../ui/advanced_settings/advanced_settings.dart       | 11 +++++++++++
 mobile/lib/shared/models/store.dart                   |  1 +
 mobile/lib/shared/ui/immich_image.dart                |  3 ++-
 6 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/mobile/assets/i18n/en-US.json b/mobile/assets/i18n/en-US.json
index 074f3e164..3158f79ba 100644
--- a/mobile/assets/i18n/en-US.json
+++ b/mobile/assets/i18n/en-US.json
@@ -5,6 +5,8 @@
   "advanced_settings_tile_title": "Advanced",
   "advanced_settings_troubleshooting_subtitle": "Enable additional features for troubleshooting",
   "advanced_settings_troubleshooting_title": "Troubleshooting",
+  "advanced_settings_prefer_remote_title": "Prefer remote images",
+  "advanced_settings_prefer_remote_subtitle": "Some devices are painfully slow to load thumbnails from assets on the device. Activate this setting to load remote images instead.",
   "album_info_card_backup_album_excluded": "EXCLUDED",
   "album_info_card_backup_album_included": "INCLUDED",
   "album_thumbnail_card_item": "1 item",
@@ -288,4 +290,4 @@
   "version_announcement_overlay_text_3": " and ensure your docker-compose and .env setup is up-to-date to prevent any misconfigurations, especially if you use WatchTower or any mechanism that handles updating your server application automatically.",
   "version_announcement_overlay_title": "New Server Version Available \uD83C\uDF89",
   "all_people_page_title": "People"
-}
+}
\ No newline at end of file
diff --git a/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart b/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
index add28eae4..6df20fe0c 100644
--- a/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
+++ b/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
@@ -131,7 +131,8 @@ class GalleryViewerPage extends HookConsumerWidget {
       if (index < totalAssets && index >= 0) {
         final asset = loadAsset(index);
 
-        if (asset.isLocal) {
+        if (!asset.isRemote ||
+            asset.isLocal && !Store.get(StoreKey.preferRemoteImage, false)) {
           // Preload the local asset
           precacheImage(localImageProvider(asset), context);
         } else {
@@ -459,7 +460,8 @@ class GalleryViewerPage extends HookConsumerWidget {
     });
 
     ImageProvider imageProvider(Asset asset) {
-      if (asset.isLocal) {
+      if (!asset.isRemote ||
+          asset.isLocal && !Store.get(StoreKey.preferRemoteImage, false)) {
         return localImageProvider(asset);
       } else {
         if (isLoadOriginal.value) {
@@ -518,7 +520,9 @@ class GalleryViewerPage extends HookConsumerWidget {
               loadingBuilder: isLoadPreview.value
                   ? (context, event) {
                       final a = asset();
-                      if (!a.isLocal) {
+                      if (!a.isLocal ||
+                          (a.isRemote &&
+                              Store.get(StoreKey.preferRemoteImage, false))) {
                         // Use the WEBP Thumbnail as a placeholder for the JPEG thumbnail to achieve
                         // Three-Stage Loading (WEBP -> JPEG -> Original)
                         final webPThumbnail = CachedNetworkImage(
diff --git a/mobile/lib/modules/settings/services/app_settings.service.dart b/mobile/lib/modules/settings/services/app_settings.service.dart
index 43b4b142d..e54e6b60e 100644
--- a/mobile/lib/modules/settings/services/app_settings.service.dart
+++ b/mobile/lib/modules/settings/services/app_settings.service.dart
@@ -44,7 +44,8 @@ enum AppSettingsEnum<T> {
     0,
   ),
   advancedTroubleshooting<bool>(StoreKey.advancedTroubleshooting, null, false),
-  logLevel<int>(StoreKey.logLevel, null, 5) // Level.INFO = 5
+  logLevel<int>(StoreKey.logLevel, null, 5), // Level.INFO = 5
+  preferRemoteImage<bool>(StoreKey.preferRemoteImage, null, false),
   ;
 
   const AppSettingsEnum(this.storeKey, this.hiveKey, this.defaultValue);
diff --git a/mobile/lib/modules/settings/ui/advanced_settings/advanced_settings.dart b/mobile/lib/modules/settings/ui/advanced_settings/advanced_settings.dart
index ee548d1c8..838bb4660 100644
--- a/mobile/lib/modules/settings/ui/advanced_settings/advanced_settings.dart
+++ b/mobile/lib/modules/settings/ui/advanced_settings/advanced_settings.dart
@@ -16,6 +16,8 @@ class AdvancedSettings extends HookConsumerWidget {
     final isEnabled =
         useState(AppSettingsEnum.advancedTroubleshooting.defaultValue);
     final levelId = useState(AppSettingsEnum.logLevel.defaultValue);
+    final preferRemote =
+        useState(AppSettingsEnum.preferRemoteImage.defaultValue);
 
     useEffect(
       () {
@@ -23,6 +25,8 @@ class AdvancedSettings extends HookConsumerWidget {
           AppSettingsEnum.advancedTroubleshooting,
         );
         levelId.value = appSettingService.getSetting(AppSettingsEnum.logLevel);
+        preferRemote.value =
+            appSettingService.getSetting(AppSettingsEnum.preferRemoteImage);
         return null;
       },
       [],
@@ -77,6 +81,13 @@ class AdvancedSettings extends HookConsumerWidget {
             activeColor: Theme.of(context).primaryColor,
           ),
         ),
+        SettingsSwitchListTile(
+          appSettingService: appSettingService,
+          valueNotifier: preferRemote,
+          settingsEnum: AppSettingsEnum.preferRemoteImage,
+          title: "advanced_settings_prefer_remote_title".tr(),
+          subtitle: "advanced_settings_prefer_remote_subtitle".tr(),
+        ),
       ],
     );
   }
diff --git a/mobile/lib/shared/models/store.dart b/mobile/lib/shared/models/store.dart
index 7a07e6271..ebbef904e 100644
--- a/mobile/lib/shared/models/store.dart
+++ b/mobile/lib/shared/models/store.dart
@@ -173,6 +173,7 @@ enum StoreKey<T> {
   selectedAlbumSortOrder<int>(113, type: int),
   advancedTroubleshooting<bool>(114, type: bool),
   logLevel<int>(115, type: int),
+  preferRemoteImage<bool>(116, type: bool),
   ;
 
   const StoreKey(
diff --git a/mobile/lib/shared/ui/immich_image.dart b/mobile/lib/shared/ui/immich_image.dart
index 3259f58bc..bcc7a3d46 100644
--- a/mobile/lib/shared/ui/immich_image.dart
+++ b/mobile/lib/shared/ui/immich_image.dart
@@ -43,7 +43,8 @@ class ImmichImage extends StatelessWidget {
       );
     }
     final Asset asset = this.asset!;
-    if (asset.isLocal) {
+    if (!asset.isRemote ||
+        (asset.isLocal && !Store.get(StoreKey.preferRemoteImage, false))) {
       return Image(
         image: AssetEntityImageProvider(
           asset.local!,

From b1fcf02d1318f009cbaaf01c86b3c37fd19ae6a5 Mon Sep 17 00:00:00 2001
From: Mert <101130780+mertalev@users.noreply.github.com>
Date: Fri, 30 Jun 2023 21:48:05 -0400
Subject: [PATCH 20/53] fix(server): h264 and hevc not respecting max bitrate
 (#3052)

* added `-bufsize` flag

* updated test
---
 server/src/domain/media/media.service.spec.ts | 1 +
 server/src/domain/media/media.service.ts      | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/server/src/domain/media/media.service.spec.ts b/server/src/domain/media/media.service.spec.ts
index 4189a773f..616debede 100644
--- a/server/src/domain/media/media.service.spec.ts
+++ b/server/src/domain/media/media.service.spec.ts
@@ -396,6 +396,7 @@ describe(MediaService.name, () => {
             '-preset ultrafast',
             '-crf 23',
             '-maxrate 4500k',
+            '-bufsize 9000k',
           ],
           twoPass: false,
         },
diff --git a/server/src/domain/media/media.service.ts b/server/src/domain/media/media.service.ts
index d11d4582e..50f49032c 100644
--- a/server/src/domain/media/media.service.ts
+++ b/server/src/domain/media/media.service.ts
@@ -284,7 +284,14 @@ export class MediaService {
     } else if (constrainMaximumBitrate || isVP9) {
       // for vp9, these flags work for both one-pass and two-pass
       options.push(`-crf ${ffmpeg.crf}`);
-      options.push(`${isVP9 ? '-b:v' : '-maxrate'} ${maxBitrateValue}${bitrateUnit}`);
+      if (isVP9) {
+        options.push(`-b:v ${maxBitrateValue}${bitrateUnit}`);
+      } else {
+        options.push(`-maxrate ${maxBitrateValue}${bitrateUnit}`);
+        // -bufsize is the peak possible bitrate at any moment, while -maxrate is the max rolling average bitrate
+        // needed for -maxrate to be enforced
+        options.push(`-bufsize ${maxBitrateValue * 2}${bitrateUnit}`);
+      }
     } else {
       options.push(`-crf ${ffmpeg.crf}`);
     }

From f9671dfbf75aca91fb5eb020ec0b42bbf5ba4c50 Mon Sep 17 00:00:00 2001
From: Mert <101130780+mertalev@users.noreply.github.com>
Date: Fri, 30 Jun 2023 21:48:40 -0400
Subject: [PATCH 21/53] fix(server): h264 videos failing to transcode in
 two-pass mode (#3053)

* set `-fps_mode` to passthrough

* updated tests
---
 server/src/domain/media/media.service.spec.ts | 37 +++++++++++++++++--
 server/src/domain/media/media.service.ts      |  3 +-
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/server/src/domain/media/media.service.spec.ts b/server/src/domain/media/media.service.spec.ts
index 616debede..010e68a23 100644
--- a/server/src/domain/media/media.service.spec.ts
+++ b/server/src/domain/media/media.service.spec.ts
@@ -232,7 +232,14 @@ describe(MediaService.name, () => {
         '/original/path.ext',
         'upload/encoded-video/user-id/asset-id.mp4',
         {
-          outputOptions: ['-vcodec h264', '-acodec aac', '-movflags faststart', '-preset ultrafast', '-crf 23'],
+          outputOptions: [
+            '-vcodec h264',
+            '-acodec aac',
+            '-movflags faststart',
+            '-fps_mode passthrough',
+            '-preset ultrafast',
+            '-crf 23',
+          ],
           twoPass: false,
         },
       );
@@ -261,7 +268,14 @@ describe(MediaService.name, () => {
         '/original/path.ext',
         'upload/encoded-video/user-id/asset-id.mp4',
         {
-          outputOptions: ['-vcodec h264', '-acodec aac', '-movflags faststart', '-preset ultrafast', '-crf 23'],
+          outputOptions: [
+            '-vcodec h264',
+            '-acodec aac',
+            '-movflags faststart',
+            '-fps_mode passthrough',
+            '-preset ultrafast',
+            '-crf 23',
+          ],
           twoPass: false,
         },
       );
@@ -279,6 +293,7 @@ describe(MediaService.name, () => {
             '-vcodec h264',
             '-acodec aac',
             '-movflags faststart',
+            '-fps_mode passthrough',
             '-vf scale=-2:720',
             '-preset ultrafast',
             '-crf 23',
@@ -299,7 +314,14 @@ describe(MediaService.name, () => {
         '/original/path.ext',
         'upload/encoded-video/user-id/asset-id.mp4',
         {
-          outputOptions: ['-vcodec h264', '-acodec aac', '-movflags faststart', '-preset ultrafast', '-crf 23'],
+          outputOptions: [
+            '-vcodec h264',
+            '-acodec aac',
+            '-movflags faststart',
+            '-fps_mode passthrough',
+            '-preset ultrafast',
+            '-crf 23',
+          ],
           twoPass: false,
         },
       );
@@ -318,6 +340,7 @@ describe(MediaService.name, () => {
             '-vcodec h264',
             '-acodec aac',
             '-movflags faststart',
+            '-fps_mode passthrough',
             '-vf scale=720:-2',
             '-preset ultrafast',
             '-crf 23',
@@ -340,6 +363,7 @@ describe(MediaService.name, () => {
             '-vcodec h264',
             '-acodec aac',
             '-movflags faststart',
+            '-fps_mode passthrough',
             '-vf scale=-2:720',
             '-preset ultrafast',
             '-crf 23',
@@ -362,6 +386,7 @@ describe(MediaService.name, () => {
             '-vcodec h264',
             '-acodec aac',
             '-movflags faststart',
+            '-fps_mode passthrough',
             '-vf scale=-2:720',
             '-preset ultrafast',
             '-crf 23',
@@ -392,6 +417,7 @@ describe(MediaService.name, () => {
             '-vcodec h264',
             '-acodec aac',
             '-movflags faststart',
+            '-fps_mode passthrough',
             '-vf scale=-2:720',
             '-preset ultrafast',
             '-crf 23',
@@ -419,6 +445,7 @@ describe(MediaService.name, () => {
             '-vcodec h264',
             '-acodec aac',
             '-movflags faststart',
+            '-fps_mode passthrough',
             '-vf scale=-2:720',
             '-preset ultrafast',
             '-b:v 3104k',
@@ -443,6 +470,7 @@ describe(MediaService.name, () => {
             '-vcodec h264',
             '-acodec aac',
             '-movflags faststart',
+            '-fps_mode passthrough',
             '-vf scale=-2:720',
             '-preset ultrafast',
             '-crf 23',
@@ -468,6 +496,7 @@ describe(MediaService.name, () => {
             '-vcodec vp9',
             '-acodec aac',
             '-movflags faststart',
+            '-fps_mode passthrough',
             '-vf scale=-2:720',
             '-cpu-used 5',
             '-row-mt 1',
@@ -496,6 +525,7 @@ describe(MediaService.name, () => {
             '-vcodec vp9',
             '-acodec aac',
             '-movflags faststart',
+            '-fps_mode passthrough',
             '-vf scale=-2:720',
             '-cpu-used 5',
             '-row-mt 1',
@@ -521,6 +551,7 @@ describe(MediaService.name, () => {
             '-vcodec h264',
             '-acodec aac',
             '-movflags faststart',
+            '-fps_mode passthrough',
             '-vf scale=-2:720',
             '-preset ultrafast',
             '-threads 2',
diff --git a/server/src/domain/media/media.service.ts b/server/src/domain/media/media.service.ts
index 50f49032c..7dedc6a05 100644
--- a/server/src/domain/media/media.service.ts
+++ b/server/src/domain/media/media.service.ts
@@ -222,7 +222,8 @@ export class MediaService {
       `-acodec ${ffmpeg.targetAudioCodec}`,
       // Makes a second pass moving the moov atom to the beginning of
       // the file for improved playback speed.
-      `-movflags faststart`,
+      '-movflags faststart',
+      '-fps_mode passthrough',
     ];
 
     // video dimensions

From 399312ead3c5433f482b94ddf10daee7ac6bbd16 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Fri, 30 Jun 2023 21:49:30 -0400
Subject: [PATCH 22/53] refactor(server): api key auth (#3054)

---
 .../domain/api-key/api-key-response.dto.ts    | 22 --------------
 server/src/domain/api-key/api-key.core.ts     | 28 -----------------
 server/src/domain/api-key/api-key.dto.ts      | 12 ++++++++
 .../domain/api-key/api-key.service.spec.ts    |  1 +
 server/src/domain/api-key/api-key.service.ts  | 25 +++++++++++-----
 server/src/domain/api-key/index.ts            |  1 -
 server/src/domain/auth/auth.service.ts        | 30 ++++++++++++++-----
 7 files changed, 53 insertions(+), 66 deletions(-)
 delete mode 100644 server/src/domain/api-key/api-key-response.dto.ts
 delete mode 100644 server/src/domain/api-key/api-key.core.ts

diff --git a/server/src/domain/api-key/api-key-response.dto.ts b/server/src/domain/api-key/api-key-response.dto.ts
deleted file mode 100644
index 541984179..000000000
--- a/server/src/domain/api-key/api-key-response.dto.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { APIKeyEntity } from '@app/infra/entities';
-
-export class APIKeyCreateResponseDto {
-  secret!: string;
-  apiKey!: APIKeyResponseDto;
-}
-
-export class APIKeyResponseDto {
-  id!: string;
-  name!: string;
-  createdAt!: Date;
-  updatedAt!: Date;
-}
-
-export function mapKey(entity: APIKeyEntity): APIKeyResponseDto {
-  return {
-    id: entity.id,
-    name: entity.name,
-    createdAt: entity.createdAt,
-    updatedAt: entity.updatedAt,
-  };
-}
diff --git a/server/src/domain/api-key/api-key.core.ts b/server/src/domain/api-key/api-key.core.ts
deleted file mode 100644
index 1b075a9c0..000000000
--- a/server/src/domain/api-key/api-key.core.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Injectable, UnauthorizedException } from '@nestjs/common';
-import { AuthUserDto } from '../auth';
-import { ICryptoRepository } from '../crypto';
-import { IKeyRepository } from './api-key.repository';
-
-@Injectable()
-export class APIKeyCore {
-  constructor(private crypto: ICryptoRepository, private repository: IKeyRepository) {}
-
-  async validate(token: string): Promise<AuthUserDto | null> {
-    const hashedToken = this.crypto.hashSha256(token);
-    const keyEntity = await this.repository.getKey(hashedToken);
-    if (keyEntity?.user) {
-      const user = keyEntity.user;
-
-      return {
-        id: user.id,
-        email: user.email,
-        isAdmin: user.isAdmin,
-        isPublicUser: false,
-        isAllowUpload: true,
-        externalPath: user.externalPath,
-      };
-    }
-
-    throw new UnauthorizedException('Invalid API key');
-  }
-}
diff --git a/server/src/domain/api-key/api-key.dto.ts b/server/src/domain/api-key/api-key.dto.ts
index 5482ba31b..06309b8dc 100644
--- a/server/src/domain/api-key/api-key.dto.ts
+++ b/server/src/domain/api-key/api-key.dto.ts
@@ -12,3 +12,15 @@ export class APIKeyUpdateDto {
   @IsNotEmpty()
   name!: string;
 }
+
+export class APIKeyCreateResponseDto {
+  secret!: string;
+  apiKey!: APIKeyResponseDto;
+}
+
+export class APIKeyResponseDto {
+  id!: string;
+  name!: string;
+  createdAt!: Date;
+  updatedAt!: Date;
+}
diff --git a/server/src/domain/api-key/api-key.service.spec.ts b/server/src/domain/api-key/api-key.service.spec.ts
index 1e33d9a6b..eaf2ae38f 100644
--- a/server/src/domain/api-key/api-key.service.spec.ts
+++ b/server/src/domain/api-key/api-key.service.spec.ts
@@ -56,6 +56,7 @@ describe(APIKeyService.name, () => {
 
     it('should update a key', async () => {
       keyMock.getById.mockResolvedValue(keyStub.admin);
+      keyMock.update.mockResolvedValue(keyStub.admin);
 
       await sut.update(authStub.admin, 'random-guid', { name: 'New Name' });
 
diff --git a/server/src/domain/api-key/api-key.service.ts b/server/src/domain/api-key/api-key.service.ts
index bba778a78..34fe86e69 100644
--- a/server/src/domain/api-key/api-key.service.ts
+++ b/server/src/domain/api-key/api-key.service.ts
@@ -1,8 +1,8 @@
+import { APIKeyEntity } from '@app/infra/entities';
 import { BadRequestException, Inject, Injectable } from '@nestjs/common';
 import { AuthUserDto } from '../auth';
 import { ICryptoRepository } from '../crypto';
-import { APIKeyCreateResponseDto, APIKeyResponseDto, mapKey } from './api-key-response.dto';
-import { APIKeyCreateDto } from './api-key.dto';
+import { APIKeyCreateDto, APIKeyCreateResponseDto, APIKeyResponseDto } from './api-key.dto';
 import { IKeyRepository } from './api-key.repository';
 
 @Injectable()
@@ -20,7 +20,7 @@ export class APIKeyService {
       userId: authUser.id,
     });
 
-    return { secret, apiKey: mapKey(entity) };
+    return { secret, apiKey: this.map(entity) };
   }
 
   async update(authUser: AuthUserDto, id: string, dto: APIKeyCreateDto): Promise<APIKeyResponseDto> {
@@ -29,9 +29,9 @@ export class APIKeyService {
       throw new BadRequestException('API Key not found');
     }
 
-    return this.repository.update(authUser.id, id, {
-      name: dto.name,
-    });
+    const key = await this.repository.update(authUser.id, id, { name: dto.name });
+
+    return this.map(key);
   }
 
   async delete(authUser: AuthUserDto, id: string): Promise<void> {
@@ -48,11 +48,20 @@ export class APIKeyService {
     if (!key) {
       throw new BadRequestException('API Key not found');
     }
-    return mapKey(key);
+    return this.map(key);
   }
 
   async getAll(authUser: AuthUserDto): Promise<APIKeyResponseDto[]> {
     const keys = await this.repository.getByUserId(authUser.id);
-    return keys.map(mapKey);
+    return keys.map((key) => this.map(key));
+  }
+
+  private map(entity: APIKeyEntity): APIKeyResponseDto {
+    return {
+      id: entity.id,
+      name: entity.name,
+      createdAt: entity.createdAt,
+      updatedAt: entity.updatedAt,
+    };
   }
 }
diff --git a/server/src/domain/api-key/index.ts b/server/src/domain/api-key/index.ts
index 181110c5d..5fa9e5723 100644
--- a/server/src/domain/api-key/index.ts
+++ b/server/src/domain/api-key/index.ts
@@ -1,4 +1,3 @@
-export * from './api-key-response.dto';
 export * from './api-key.dto';
 export * from './api-key.repository';
 export * from './api-key.service';
diff --git a/server/src/domain/auth/auth.service.ts b/server/src/domain/auth/auth.service.ts
index 87df987d9..4f45dc5a2 100644
--- a/server/src/domain/auth/auth.service.ts
+++ b/server/src/domain/auth/auth.service.ts
@@ -10,7 +10,6 @@ import {
 import cookieParser from 'cookie';
 import { IncomingHttpHeaders } from 'http';
 import { IKeyRepository } from '../api-key';
-import { APIKeyCore } from '../api-key/api-key.core';
 import { ICryptoRepository } from '../crypto/crypto.repository';
 import { OAuthCore } from '../oauth/oauth.core';
 import { ISharedLinkRepository } from '../shared-link';
@@ -35,17 +34,16 @@ export class AuthService {
   private authCore: AuthCore;
   private oauthCore: OAuthCore;
   private userCore: UserCore;
-  private keyCore: APIKeyCore;
 
   private logger = new Logger(AuthService.name);
 
   constructor(
-    @Inject(ICryptoRepository) cryptoRepository: ICryptoRepository,
+    @Inject(ICryptoRepository) private cryptoRepository: ICryptoRepository,
     @Inject(ISystemConfigRepository) configRepository: ISystemConfigRepository,
     @Inject(IUserRepository) userRepository: IUserRepository,
     @Inject(IUserTokenRepository) userTokenRepository: IUserTokenRepository,
     @Inject(ISharedLinkRepository) private sharedLinkRepository: ISharedLinkRepository,
-    @Inject(IKeyRepository) keyRepository: IKeyRepository,
+    @Inject(IKeyRepository) private keyRepository: IKeyRepository,
     @Inject(INITIAL_SYSTEM_CONFIG)
     initialConfig: SystemConfig,
   ) {
@@ -53,7 +51,6 @@ export class AuthService {
     this.authCore = new AuthCore(cryptoRepository, configRepository, userTokenRepository, initialConfig);
     this.oauthCore = new OAuthCore(configRepository, initialConfig);
     this.userCore = new UserCore(userRepository, cryptoRepository);
-    this.keyCore = new APIKeyCore(cryptoRepository, keyRepository);
   }
 
   public async login(
@@ -153,7 +150,7 @@ export class AuthService {
     }
 
     if (apiKey) {
-      return this.keyCore.validate(apiKey);
+      return this.validateApiKey(apiKey);
     }
 
     throw new UnauthorizedException('Authentication required');
@@ -192,7 +189,7 @@ export class AuthService {
     return cookies[IMMICH_ACCESS_COOKIE] || null;
   }
 
-  async validateSharedLink(key: string | string[]): Promise<AuthUserDto | null> {
+  private async validateSharedLink(key: string | string[]): Promise<AuthUserDto> {
     key = Array.isArray(key) ? key[0] : key;
 
     const bytes = Buffer.from(key, key.length === 100 ? 'hex' : 'base64url');
@@ -216,4 +213,23 @@ export class AuthService {
     }
     throw new UnauthorizedException('Invalid share key');
   }
+
+  private async validateApiKey(key: string): Promise<AuthUserDto> {
+    const hashedKey = this.cryptoRepository.hashSha256(key);
+    const keyEntity = await this.keyRepository.getKey(hashedKey);
+    if (keyEntity?.user) {
+      const user = keyEntity.user;
+
+      return {
+        id: user.id,
+        email: user.email,
+        isAdmin: user.isAdmin,
+        isPublicUser: false,
+        isAllowUpload: true,
+        externalPath: user.externalPath,
+      };
+    }
+
+    throw new UnauthorizedException('Invalid API key');
+  }
 }

From 49f1f6cad7d5dce6bdda7c249689dde8a8691a86 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Fri, 30 Jun 2023 21:52:40 -0400
Subject: [PATCH 23/53] refactor(server): person dto (#3058)

---
 server/src/domain/asset/response-dto/asset-response.dto.ts | 2 +-
 server/src/domain/person/dto/index.ts                      | 1 -
 server/src/domain/person/dto/person-update.dto.ts          | 7 -------
 server/src/domain/person/index.ts                          | 3 +--
 .../{response-dto/person-response.dto.ts => person.dto.ts} | 7 +++++++
 server/src/domain/person/person.service.spec.ts            | 2 +-
 server/src/domain/person/person.service.ts                 | 3 +--
 server/src/domain/person/response-dto/index.ts             | 1 -
 8 files changed, 11 insertions(+), 15 deletions(-)
 delete mode 100644 server/src/domain/person/dto/index.ts
 delete mode 100644 server/src/domain/person/dto/person-update.dto.ts
 rename server/src/domain/person/{response-dto/person-response.dto.ts => person.dto.ts} (76%)
 delete mode 100644 server/src/domain/person/response-dto/index.ts

diff --git a/server/src/domain/asset/response-dto/asset-response.dto.ts b/server/src/domain/asset/response-dto/asset-response.dto.ts
index fa4d057d3..1df6b47e8 100644
--- a/server/src/domain/asset/response-dto/asset-response.dto.ts
+++ b/server/src/domain/asset/response-dto/asset-response.dto.ts
@@ -1,6 +1,6 @@
 import { AssetEntity, AssetType } from '@app/infra/entities';
 import { ApiProperty } from '@nestjs/swagger';
-import { mapFace, PersonResponseDto } from '../../person';
+import { mapFace, PersonResponseDto } from '../../person/person.dto';
 import { mapTag, TagResponseDto } from '../../tag';
 import { ExifResponseDto, mapExif } from './exif-response.dto';
 import { mapSmartInfo, SmartInfoResponseDto } from './smart-info-response.dto';
diff --git a/server/src/domain/person/dto/index.ts b/server/src/domain/person/dto/index.ts
deleted file mode 100644
index 5668429a2..000000000
--- a/server/src/domain/person/dto/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './person-update.dto';
diff --git a/server/src/domain/person/dto/person-update.dto.ts b/server/src/domain/person/dto/person-update.dto.ts
deleted file mode 100644
index 72312378c..000000000
--- a/server/src/domain/person/dto/person-update.dto.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { IsNotEmpty, IsString } from 'class-validator';
-
-export class PersonUpdateDto {
-  @IsNotEmpty()
-  @IsString()
-  name!: string;
-}
diff --git a/server/src/domain/person/index.ts b/server/src/domain/person/index.ts
index 02a38887b..9c1ae2f7e 100644
--- a/server/src/domain/person/index.ts
+++ b/server/src/domain/person/index.ts
@@ -1,4 +1,3 @@
-export * from './dto';
+export * from './person.dto';
 export * from './person.repository';
 export * from './person.service';
-export * from './response-dto';
diff --git a/server/src/domain/person/response-dto/person-response.dto.ts b/server/src/domain/person/person.dto.ts
similarity index 76%
rename from server/src/domain/person/response-dto/person-response.dto.ts
rename to server/src/domain/person/person.dto.ts
index c5e4a221c..19185dc93 100644
--- a/server/src/domain/person/response-dto/person-response.dto.ts
+++ b/server/src/domain/person/person.dto.ts
@@ -1,4 +1,11 @@
 import { AssetFaceEntity, PersonEntity } from '@app/infra/entities';
+import { IsNotEmpty, IsString } from 'class-validator';
+
+export class PersonUpdateDto {
+  @IsNotEmpty()
+  @IsString()
+  name!: string;
+}
 
 export class PersonResponseDto {
   id!: string;
diff --git a/server/src/domain/person/person.service.spec.ts b/server/src/domain/person/person.service.spec.ts
index d431e94af..6d46b3a97 100644
--- a/server/src/domain/person/person.service.spec.ts
+++ b/server/src/domain/person/person.service.spec.ts
@@ -9,9 +9,9 @@ import {
 } from '@test';
 import { IJobRepository, JobName } from '..';
 import { IStorageRepository } from '../storage';
+import { PersonResponseDto } from './person.dto';
 import { IPersonRepository } from './person.repository';
 import { PersonService } from './person.service';
-import { PersonResponseDto } from './response-dto';
 
 const responseDto: PersonResponseDto = {
   id: 'person-1',
diff --git a/server/src/domain/person/person.service.ts b/server/src/domain/person/person.service.ts
index 85a558355..48075bee8 100644
--- a/server/src/domain/person/person.service.ts
+++ b/server/src/domain/person/person.service.ts
@@ -3,9 +3,8 @@ import { AssetResponseDto, mapAsset } from '../asset';
 import { AuthUserDto } from '../auth';
 import { IJobRepository, JobName } from '../job';
 import { ImmichReadStream, IStorageRepository } from '../storage';
-import { PersonUpdateDto } from './dto';
+import { mapPerson, PersonResponseDto, PersonUpdateDto } from './person.dto';
 import { IPersonRepository } from './person.repository';
-import { mapPerson, PersonResponseDto } from './response-dto';
 
 @Injectable()
 export class PersonService {
diff --git a/server/src/domain/person/response-dto/index.ts b/server/src/domain/person/response-dto/index.ts
deleted file mode 100644
index 0e48d9b0e..000000000
--- a/server/src/domain/person/response-dto/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './person-response.dto';

From 2feac543824b7ff58f6629b7b8c2277b5e5f29a3 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Sat, 1 Jul 2023 00:41:12 -0400
Subject: [PATCH 24/53] refactro(server): job dto (#3057)

---
 server/src/domain/job/dto/index.ts            |  2 --
 server/src/domain/job/dto/job-command.dto.ts  | 14 -------------
 server/src/domain/job/dto/job-id.dto.ts       | 10 ---------
 server/src/domain/job/index.ts                |  3 +--
 ...-job-status-response.dto.ts => job.dto.ts} | 21 ++++++++++++++++++-
 server/src/domain/job/job.service.spec.ts     |  4 +++-
 server/src/domain/job/job.service.ts          |  3 +--
 server/src/domain/job/response-dto/index.ts   |  1 -
 .../src/immich/controllers/job.controller.ts  |  4 ++--
 9 files changed, 27 insertions(+), 35 deletions(-)
 delete mode 100644 server/src/domain/job/dto/index.ts
 delete mode 100644 server/src/domain/job/dto/job-command.dto.ts
 delete mode 100644 server/src/domain/job/dto/job-id.dto.ts
 rename server/src/domain/job/{response-dto/all-job-status-response.dto.ts => job.dto.ts} (75%)
 delete mode 100644 server/src/domain/job/response-dto/index.ts

diff --git a/server/src/domain/job/dto/index.ts b/server/src/domain/job/dto/index.ts
deleted file mode 100644
index abb9f9681..000000000
--- a/server/src/domain/job/dto/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './job-command.dto';
-export * from './job-id.dto';
diff --git a/server/src/domain/job/dto/job-command.dto.ts b/server/src/domain/job/dto/job-command.dto.ts
deleted file mode 100644
index 94ddbb974..000000000
--- a/server/src/domain/job/dto/job-command.dto.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ApiProperty } from '@nestjs/swagger';
-import { IsBoolean, IsEnum, IsNotEmpty, IsOptional } from 'class-validator';
-import { JobCommand } from '../job.constants';
-
-export class JobCommandDto {
-  @IsNotEmpty()
-  @IsEnum(JobCommand)
-  @ApiProperty({ type: 'string', enum: JobCommand, enumName: 'JobCommand' })
-  command!: JobCommand;
-
-  @IsOptional()
-  @IsBoolean()
-  force!: boolean;
-}
diff --git a/server/src/domain/job/dto/job-id.dto.ts b/server/src/domain/job/dto/job-id.dto.ts
deleted file mode 100644
index 3fd001406..000000000
--- a/server/src/domain/job/dto/job-id.dto.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ApiProperty } from '@nestjs/swagger';
-import { IsEnum, IsNotEmpty } from 'class-validator';
-import { QueueName } from '../job.constants';
-
-export class JobIdDto {
-  @IsNotEmpty()
-  @IsEnum(QueueName)
-  @ApiProperty({ type: String, enum: QueueName, enumName: 'JobName' })
-  id!: QueueName;
-}
diff --git a/server/src/domain/job/index.ts b/server/src/domain/job/index.ts
index 755d7994a..f125b969a 100644
--- a/server/src/domain/job/index.ts
+++ b/server/src/domain/job/index.ts
@@ -1,6 +1,5 @@
-export * from './dto';
 export * from './job.constants';
+export * from './job.dto';
 export * from './job.interface';
 export * from './job.repository';
 export * from './job.service';
-export * from './response-dto';
diff --git a/server/src/domain/job/response-dto/all-job-status-response.dto.ts b/server/src/domain/job/job.dto.ts
similarity index 75%
rename from server/src/domain/job/response-dto/all-job-status-response.dto.ts
rename to server/src/domain/job/job.dto.ts
index 6003c15c6..1c5940956 100644
--- a/server/src/domain/job/response-dto/all-job-status-response.dto.ts
+++ b/server/src/domain/job/job.dto.ts
@@ -1,5 +1,24 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { QueueName } from '../job.constants';
+import { IsBoolean, IsEnum, IsNotEmpty, IsOptional } from 'class-validator';
+import { JobCommand, QueueName } from './job.constants';
+
+export class JobIdParamDto {
+  @IsNotEmpty()
+  @IsEnum(QueueName)
+  @ApiProperty({ type: String, enum: QueueName, enumName: 'JobName' })
+  id!: QueueName;
+}
+
+export class JobCommandDto {
+  @IsNotEmpty()
+  @IsEnum(JobCommand)
+  @ApiProperty({ type: 'string', enum: JobCommand, enumName: 'JobCommand' })
+  command!: JobCommand;
+
+  @IsOptional()
+  @IsBoolean()
+  force!: boolean;
+}
 
 export class JobCountsDto {
   @ApiProperty({ type: 'integer' })
diff --git a/server/src/domain/job/job.service.spec.ts b/server/src/domain/job/job.service.spec.ts
index 7da2f8e67..e9a8f641a 100644
--- a/server/src/domain/job/job.service.spec.ts
+++ b/server/src/domain/job/job.service.spec.ts
@@ -7,11 +7,13 @@ import {
   newJobRepositoryMock,
   newSystemConfigRepositoryMock,
 } from '@test';
-import { IJobRepository, JobCommand, JobHandler, JobItem, JobName, JobService, QueueName } from '.';
 import { IAssetRepository } from '../asset';
 import { ICommunicationRepository } from '../communication';
 import { ISystemConfigRepository } from '../system-config';
 import { SystemConfigCore } from '../system-config/system-config.core';
+import { JobCommand, JobName, QueueName } from './job.constants';
+import { IJobRepository, JobHandler, JobItem } from './job.repository';
+import { JobService } from './job.service';
 
 const makeMockHandlers = (success: boolean) => {
   const mock = jest.fn().mockResolvedValue(success);
diff --git a/server/src/domain/job/job.service.ts b/server/src/domain/job/job.service.ts
index edc6aacd0..8bfdd6c6b 100644
--- a/server/src/domain/job/job.service.ts
+++ b/server/src/domain/job/job.service.ts
@@ -4,10 +4,9 @@ import { CommunicationEvent, ICommunicationRepository } from '../communication';
 import { assertMachineLearningEnabled } from '../domain.constant';
 import { ISystemConfigRepository } from '../system-config';
 import { SystemConfigCore } from '../system-config/system-config.core';
-import { JobCommandDto } from './dto';
 import { JobCommand, JobName, QueueName } from './job.constants';
+import { AllJobStatusResponseDto, JobCommandDto, JobStatusDto } from './job.dto';
 import { IJobRepository, JobHandler, JobItem } from './job.repository';
-import { AllJobStatusResponseDto, JobStatusDto } from './response-dto';
 
 @Injectable()
 export class JobService {
diff --git a/server/src/domain/job/response-dto/index.ts b/server/src/domain/job/response-dto/index.ts
deleted file mode 100644
index 7229910ae..000000000
--- a/server/src/domain/job/response-dto/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './all-job-status-response.dto';
diff --git a/server/src/immich/controllers/job.controller.ts b/server/src/immich/controllers/job.controller.ts
index 7f26f5834..b4e3ebed3 100644
--- a/server/src/immich/controllers/job.controller.ts
+++ b/server/src/immich/controllers/job.controller.ts
@@ -1,4 +1,4 @@
-import { AllJobStatusResponseDto, JobCommandDto, JobIdDto, JobService, JobStatusDto } from '@app/domain';
+import { AllJobStatusResponseDto, JobCommandDto, JobIdParamDto, JobService, JobStatusDto } from '@app/domain';
 import { Body, Controller, Get, Param, Put } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
 import { Authenticated } from '../decorators/authenticated.decorator';
@@ -17,7 +17,7 @@ export class JobController {
   }
 
   @Put(':id')
-  sendJobCommand(@Param() { id }: JobIdDto, @Body() dto: JobCommandDto): Promise<JobStatusDto> {
+  sendJobCommand(@Param() { id }: JobIdParamDto, @Body() dto: JobCommandDto): Promise<JobStatusDto> {
     return this.service.handleCommand(id, dto);
   }
 }

From b93bbc9f5d9a754e72d30f8e4b2834fad3542bcc Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Sat, 1 Jul 2023 00:43:24 -0400
Subject: [PATCH 25/53] refactor(server): storage template core (#3059)

---
 server/src/domain/storage-template/index.ts   |   1 -
 .../storage-template/storage-template.core.ts | 160 ---------------
 .../storage-template.service.ts               | 183 +++++++++++++++---
 3 files changed, 156 insertions(+), 188 deletions(-)
 delete mode 100644 server/src/domain/storage-template/storage-template.core.ts

diff --git a/server/src/domain/storage-template/index.ts b/server/src/domain/storage-template/index.ts
index a62fc5faa..f90e36389 100644
--- a/server/src/domain/storage-template/index.ts
+++ b/server/src/domain/storage-template/index.ts
@@ -1,2 +1 @@
-export * from './storage-template.core';
 export * from './storage-template.service';
diff --git a/server/src/domain/storage-template/storage-template.core.ts b/server/src/domain/storage-template/storage-template.core.ts
deleted file mode 100644
index da97ab629..000000000
--- a/server/src/domain/storage-template/storage-template.core.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-import { AssetEntity, AssetType, SystemConfig } from '@app/infra/entities';
-import { Logger } from '@nestjs/common';
-import handlebar from 'handlebars';
-import * as luxon from 'luxon';
-import path from 'node:path';
-import sanitize from 'sanitize-filename';
-import { IStorageRepository, StorageCore } from '../storage';
-import {
-  ISystemConfigRepository,
-  supportedDayTokens,
-  supportedHourTokens,
-  supportedMinuteTokens,
-  supportedMonthTokens,
-  supportedSecondTokens,
-  supportedYearTokens,
-} from '../system-config';
-import { SystemConfigCore } from '../system-config/system-config.core';
-import { MoveAssetMetadata } from './storage-template.service';
-
-export class StorageTemplateCore {
-  private logger = new Logger(StorageTemplateCore.name);
-  private configCore: SystemConfigCore;
-  private storageTemplate: HandlebarsTemplateDelegate<any>;
-  private storageCore = new StorageCore();
-
-  constructor(
-    configRepository: ISystemConfigRepository,
-    config: SystemConfig,
-    private storageRepository: IStorageRepository,
-  ) {
-    this.storageTemplate = this.compile(config.storageTemplate.template);
-    this.configCore = new SystemConfigCore(configRepository);
-    this.configCore.addValidator((config) => this.validateConfig(config));
-    this.configCore.config$.subscribe((config) => this.onConfig(config));
-  }
-
-  public async getTemplatePath(asset: AssetEntity, metadata: MoveAssetMetadata): Promise<string> {
-    const { storageLabel, filename } = metadata;
-
-    try {
-      const source = asset.originalPath;
-      const ext = path.extname(source).split('.').pop() as string;
-      const sanitized = sanitize(path.basename(filename, `.${ext}`));
-      const rootPath = this.storageCore.getLibraryFolder({ id: asset.ownerId, storageLabel });
-      const storagePath = this.render(this.storageTemplate, asset, sanitized, ext);
-      const fullPath = path.normalize(path.join(rootPath, storagePath));
-      let destination = `${fullPath}.${ext}`;
-
-      if (!fullPath.startsWith(rootPath)) {
-        this.logger.warn(`Skipped attempt to access an invalid path: ${fullPath}. Path should start with ${rootPath}`);
-        return source;
-      }
-
-      if (source === destination) {
-        return source;
-      }
-
-      /**
-       * In case of migrating duplicate filename to a new path, we need to check if it is already migrated
-       * Due to the mechanism of appending +1, +2, +3, etc to the filename
-       *
-       * Example:
-       * Source = upload/abc/def/FullSizeRender+7.heic
-       * Expected Destination = upload/abc/def/FullSizeRender.heic
-       *
-       * The file is already at the correct location, but since there are other FullSizeRender.heic files in the
-       * destination, it was renamed to FullSizeRender+7.heic.
-       *
-       * The lines below will be used to check if the differences between the source and destination is only the
-       * +7 suffix, and if so, it will be considered as already migrated.
-       */
-      if (source.startsWith(fullPath) && source.endsWith(`.${ext}`)) {
-        const diff = source.replace(fullPath, '').replace(`.${ext}`, '');
-        const hasDuplicationAnnotation = /^\+\d+$/.test(diff);
-        if (hasDuplicationAnnotation) {
-          return source;
-        }
-      }
-
-      let duplicateCount = 0;
-
-      while (true) {
-        const exists = await this.storageRepository.checkFileExists(destination);
-        if (!exists) {
-          break;
-        }
-
-        duplicateCount++;
-        destination = `${fullPath}+${duplicateCount}.${ext}`;
-      }
-
-      return destination;
-    } catch (error: any) {
-      this.logger.error(`Unable to get template path for ${filename}`, error);
-      return asset.originalPath;
-    }
-  }
-
-  private validateConfig(config: SystemConfig) {
-    this.validateStorageTemplate(config.storageTemplate.template);
-  }
-
-  private validateStorageTemplate(templateString: string) {
-    try {
-      const template = this.compile(templateString);
-      // test render an asset
-      this.render(
-        template,
-        {
-          fileCreatedAt: new Date(),
-          originalPath: '/upload/test/IMG_123.jpg',
-          type: AssetType.IMAGE,
-        } as AssetEntity,
-        'IMG_123',
-        'jpg',
-      );
-    } catch (e) {
-      this.logger.warn(`Storage template validation failed: ${JSON.stringify(e)}`);
-      throw new Error(`Invalid storage template: ${e}`);
-    }
-  }
-
-  private onConfig(config: SystemConfig) {
-    this.logger.debug(`Received new config, recompiling storage template: ${config.storageTemplate.template}`);
-    this.storageTemplate = this.compile(config.storageTemplate.template);
-  }
-
-  private compile(template: string) {
-    return handlebar.compile(template, {
-      knownHelpers: undefined,
-      strict: true,
-    });
-  }
-
-  private render(template: HandlebarsTemplateDelegate<any>, asset: AssetEntity, filename: string, ext: string) {
-    const substitutions: Record<string, string> = {
-      filename,
-      ext,
-      filetype: asset.type == AssetType.IMAGE ? 'IMG' : 'VID',
-      filetypefull: asset.type == AssetType.IMAGE ? 'IMAGE' : 'VIDEO',
-    };
-
-    const dt = luxon.DateTime.fromJSDate(asset.fileCreatedAt);
-
-    const dateTokens = [
-      ...supportedYearTokens,
-      ...supportedMonthTokens,
-      ...supportedDayTokens,
-      ...supportedHourTokens,
-      ...supportedMinuteTokens,
-      ...supportedSecondTokens,
-    ];
-
-    for (const token of dateTokens) {
-      substitutions[token] = dt.toFormat(token);
-    }
-
-    return template(substitutions);
-  }
-}
diff --git a/server/src/domain/storage-template/storage-template.service.ts b/server/src/domain/storage-template/storage-template.service.ts
index a38dbb633..a40f09b1e 100644
--- a/server/src/domain/storage-template/storage-template.service.ts
+++ b/server/src/domain/storage-template/storage-template.service.ts
@@ -1,13 +1,25 @@
-import { AssetEntity, SystemConfig } from '@app/infra/entities';
+import { AssetEntity, AssetType, SystemConfig } from '@app/infra/entities';
 import { Inject, Injectable, Logger } from '@nestjs/common';
+import handlebar from 'handlebars';
+import * as luxon from 'luxon';
+import path from 'node:path';
+import sanitize from 'sanitize-filename';
 import { IAssetRepository } from '../asset/asset.repository';
-import { APP_MEDIA_LOCATION } from '../domain.constant';
 import { getLivePhotoMotionFilename, usePagination } from '../domain.util';
 import { IEntityJob, JOBS_ASSET_PAGINATION_SIZE } from '../job';
-import { IStorageRepository } from '../storage/storage.repository';
-import { INITIAL_SYSTEM_CONFIG, ISystemConfigRepository } from '../system-config';
+import { IStorageRepository, StorageCore, StorageFolder } from '../storage';
+import {
+  INITIAL_SYSTEM_CONFIG,
+  ISystemConfigRepository,
+  supportedDayTokens,
+  supportedHourTokens,
+  supportedMinuteTokens,
+  supportedMonthTokens,
+  supportedSecondTokens,
+  supportedYearTokens,
+} from '../system-config';
+import { SystemConfigCore } from '../system-config/system-config.core';
 import { IUserRepository } from '../user/user.repository';
-import { StorageTemplateCore } from './storage-template.core';
 
 export interface MoveAssetMetadata {
   storageLabel: string | null;
@@ -17,7 +29,9 @@ export interface MoveAssetMetadata {
 @Injectable()
 export class StorageTemplateService {
   private logger = new Logger(StorageTemplateService.name);
-  private core: StorageTemplateCore;
+  private configCore: SystemConfigCore;
+  private storageCore = new StorageCore();
+  private storageTemplate: HandlebarsTemplateDelegate<any>;
 
   constructor(
     @Inject(IAssetRepository) private assetRepository: IAssetRepository,
@@ -26,7 +40,10 @@ export class StorageTemplateService {
     @Inject(IStorageRepository) private storageRepository: IStorageRepository,
     @Inject(IUserRepository) private userRepository: IUserRepository,
   ) {
-    this.core = new StorageTemplateCore(configRepository, config, storageRepository);
+    this.storageTemplate = this.compile(config.storageTemplate.template);
+    this.configCore = new SystemConfigCore(configRepository);
+    this.configCore.addValidator((config) => this.validate(config));
+    this.configCore.config$.subscribe((config) => this.onConfig(config));
   }
 
   async handleMigrationSingle({ id }: IEntityJob) {
@@ -48,29 +65,27 @@ export class StorageTemplateService {
   }
 
   async handleMigration() {
-    try {
-      console.time('migrating-time');
+    this.logger.log('Starting storage template migration');
+    const assetPagination = usePagination(JOBS_ASSET_PAGINATION_SIZE, (pagination) =>
+      this.assetRepository.getAll(pagination),
+    );
+    const users = await this.userRepository.getList();
 
-      const assetPagination = usePagination(JOBS_ASSET_PAGINATION_SIZE, (pagination) =>
-        this.assetRepository.getAll(pagination),
-      );
-      const users = await this.userRepository.getList();
-
-      for await (const assets of assetPagination) {
-        for (const asset of assets) {
-          const user = users.find((user) => user.id === asset.ownerId);
-          const storageLabel = user?.storageLabel || null;
-          const filename = asset.originalFileName || asset.id;
-          await this.moveAsset(asset, { storageLabel, filename });
-        }
+    for await (const assets of assetPagination) {
+      for (const asset of assets) {
+        const user = users.find((user) => user.id === asset.ownerId);
+        const storageLabel = user?.storageLabel || null;
+        const filename = asset.originalFileName || asset.id;
+        await this.moveAsset(asset, { storageLabel, filename });
       }
-
-      this.logger.debug('Cleaning up empty directories...');
-      await this.storageRepository.removeEmptyDirs(APP_MEDIA_LOCATION);
-    } finally {
-      console.timeEnd('migrating-time');
     }
 
+    this.logger.debug('Cleaning up empty directories...');
+    const libraryFolder = this.storageCore.getBaseFolder(StorageFolder.LIBRARY);
+    await this.storageRepository.removeEmptyDirs(libraryFolder);
+
+    this.logger.log('Finished storage template migration');
+
     return true;
   }
 
@@ -81,7 +96,7 @@ export class StorageTemplateService {
       return;
     }
 
-    const destination = await this.core.getTemplatePath(asset, metadata);
+    const destination = await this.getTemplatePath(asset, metadata);
     if (asset.originalPath !== destination) {
       const source = asset.originalPath;
 
@@ -121,4 +136,118 @@ export class StorageTemplateService {
     }
     return asset;
   }
+
+  private async getTemplatePath(asset: AssetEntity, metadata: MoveAssetMetadata): Promise<string> {
+    const { storageLabel, filename } = metadata;
+
+    try {
+      const source = asset.originalPath;
+      const ext = path.extname(source).split('.').pop() as string;
+      const sanitized = sanitize(path.basename(filename, `.${ext}`));
+      const rootPath = this.storageCore.getLibraryFolder({ id: asset.ownerId, storageLabel });
+      const storagePath = this.render(this.storageTemplate, asset, sanitized, ext);
+      const fullPath = path.normalize(path.join(rootPath, storagePath));
+      let destination = `${fullPath}.${ext}`;
+
+      if (!fullPath.startsWith(rootPath)) {
+        this.logger.warn(`Skipped attempt to access an invalid path: ${fullPath}. Path should start with ${rootPath}`);
+        return source;
+      }
+
+      if (source === destination) {
+        return source;
+      }
+
+      /**
+       * In case of migrating duplicate filename to a new path, we need to check if it is already migrated
+       * Due to the mechanism of appending +1, +2, +3, etc to the filename
+       *
+       * Example:
+       * Source = upload/abc/def/FullSizeRender+7.heic
+       * Expected Destination = upload/abc/def/FullSizeRender.heic
+       *
+       * The file is already at the correct location, but since there are other FullSizeRender.heic files in the
+       * destination, it was renamed to FullSizeRender+7.heic.
+       *
+       * The lines below will be used to check if the differences between the source and destination is only the
+       * +7 suffix, and if so, it will be considered as already migrated.
+       */
+      if (source.startsWith(fullPath) && source.endsWith(`.${ext}`)) {
+        const diff = source.replace(fullPath, '').replace(`.${ext}`, '');
+        const hasDuplicationAnnotation = /^\+\d+$/.test(diff);
+        if (hasDuplicationAnnotation) {
+          return source;
+        }
+      }
+
+      let duplicateCount = 0;
+
+      while (true) {
+        const exists = await this.storageRepository.checkFileExists(destination);
+        if (!exists) {
+          break;
+        }
+
+        duplicateCount++;
+        destination = `${fullPath}+${duplicateCount}.${ext}`;
+      }
+
+      return destination;
+    } catch (error: any) {
+      this.logger.error(`Unable to get template path for ${filename}`, error);
+      return asset.originalPath;
+    }
+  }
+
+  private validate(config: SystemConfig) {
+    const testAsset = {
+      fileCreatedAt: new Date(),
+      originalPath: '/upload/test/IMG_123.jpg',
+      type: AssetType.IMAGE,
+    } as AssetEntity;
+    try {
+      this.render(this.compile(config.storageTemplate.template), testAsset, 'IMG_123', 'jpg');
+    } catch (e) {
+      this.logger.warn(`Storage template validation failed: ${JSON.stringify(e)}`);
+      throw new Error(`Invalid storage template: ${e}`);
+    }
+  }
+
+  private onConfig(config: SystemConfig) {
+    this.logger.debug(`Received new config, recompiling storage template: ${config.storageTemplate.template}`);
+    this.storageTemplate = this.compile(config.storageTemplate.template);
+  }
+
+  private compile(template: string) {
+    return handlebar.compile(template, {
+      knownHelpers: undefined,
+      strict: true,
+    });
+  }
+
+  private render(template: HandlebarsTemplateDelegate<any>, asset: AssetEntity, filename: string, ext: string) {
+    const substitutions: Record<string, string> = {
+      filename,
+      ext,
+      filetype: asset.type == AssetType.IMAGE ? 'IMG' : 'VID',
+      filetypefull: asset.type == AssetType.IMAGE ? 'IMAGE' : 'VIDEO',
+    };
+
+    const dt = luxon.DateTime.fromJSDate(asset.fileCreatedAt);
+
+    const dateTokens = [
+      ...supportedYearTokens,
+      ...supportedMonthTokens,
+      ...supportedDayTokens,
+      ...supportedHourTokens,
+      ...supportedMinuteTokens,
+      ...supportedSecondTokens,
+    ];
+
+    for (const token of dateTokens) {
+      substitutions[token] = dt.toFormat(token);
+    }
+
+    return template(substitutions);
+  }
 }

From 19cc94e594e84b6ade861ceb0af26dc378974a15 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Sat, 1 Jul 2023 00:44:55 -0400
Subject: [PATCH 26/53] refactor(server): use better algorithm for calculating
 the duplicate filename (#3061)

---
 server/src/domain/asset/asset.service.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/server/src/domain/asset/asset.service.ts b/server/src/domain/asset/asset.service.ts
index 51d3afb8d..901b21a14 100644
--- a/server/src/domain/asset/asset.service.ts
+++ b/server/src/domain/asset/asset.service.ts
@@ -96,19 +96,17 @@ export class AssetService {
 
     const zip = this.storageRepository.createZipStream();
     const assets = await this.assetRepository.getByIds(dto.assetIds);
-    const paths: Record<string, boolean> = {};
+    const paths: Record<string, number> = {};
 
     for (const { originalPath, originalFileName } of assets) {
       const ext = extname(originalPath);
       let filename = `${originalFileName}${ext}`;
-      for (let i = 0; i < 10_000; i++) {
-        if (!paths[filename]) {
-          break;
-        }
-        filename = `${originalFileName}+${i + 1}${ext}`;
+      const count = paths[filename] || 0;
+      paths[filename] = count + 1;
+      if (count !== 0) {
+        filename = `${originalFileName}+${count}${ext}`;
       }
 
-      paths[filename] = true;
       zip.addFile(originalPath, filename);
     }
 

From 7c2f7d6c51a48117ec165df1140ce1ee4ee53fa8 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Sat, 1 Jul 2023 00:47:28 -0400
Subject: [PATCH 27/53] chore: remove refactored controllers from unit test
 coverage (#3063)

---
 server/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/server/package.json b/server/package.json
index 4b6d1d821..513fbb77f 100644
--- a/server/package.json
+++ b/server/package.json
@@ -138,7 +138,8 @@
     },
     "collectCoverageFrom": [
       "<rootDir>/src/**/*.(t|j)s",
-      "!<rootDir>/src/infra/**/*"
+      "!<rootDir>/src/infra/**/*",
+      "!<rootDir>/src/immich/controllers/**/*"
     ],
     "coverageDirectory": "./coverage",
     "coverageThreshold": {

From f55b3add803cdd2a4f0040a3f3ae401fa19b8194 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Sat, 1 Jul 2023 00:50:47 -0400
Subject: [PATCH 28/53] chore(web): prettier (#2821)

Co-authored-by: Thomas Way <thomas@6f.io>
---
 web/.eslintrc.cjs                             |  76 +-
 web/.prettierrc                               |   9 +-
 web/__mocks__/$app/environment.js             |   2 +-
 web/__mocks__/$env/dynamic/public.js          |   2 +-
 web/babel.config.cjs                          |   2 +-
 web/jest.config.mjs                           | 287 +++---
 web/postcss.config.cjs                        |   8 +-
 web/src/api/api.ts                            | 204 ++--
 web/src/api/index.ts                          |   2 +-
 web/src/api/types.ts                          |   8 +-
 web/src/api/utils.ts                          |  54 +-
 web/src/app.css                               | 100 +-
 web/src/app.d.ts                              |  42 +-
 web/src/app.html                              |  34 +-
 web/src/hooks.server.ts                       |  74 +-
 web/src/lib/__mocks__/jsdom-url.mock.ts       |   4 +-
 .../admin-page/delete-confirm-dialoge.svelte  |  55 +-
 .../admin-page/jobs/job-tile-button.svelte    |  22 +-
 .../admin-page/jobs/job-tile-status.svelte    |  14 +-
 .../admin-page/jobs/job-tile.svelte           | 258 +++--
 .../admin-page/jobs/jobs-panel.svelte         | 281 +++---
 .../jobs/storage-migration-description.svelte |   7 +-
 .../admin-page/restore-dialoge.svelte         |  34 +-
 .../server-stats/server-stats-panel.svelte    | 203 ++--
 .../admin-page/server-stats/stats-card.svelte |  50 +-
 .../settings/confirm-disable-login.svelte     |  34 +-
 .../settings/ffmpeg/ffmpeg-settings.svelte    | 368 ++++----
 .../settings/job-settings/job-settings.svelte | 164 ++--
 .../settings/oauth/oauth-settings.svelte      | 349 ++++---
 .../password-login-settings.svelte            | 189 ++--
 .../settings/setting-accordion.svelte         |  86 +-
 .../settings/setting-buttons-row.svelte       |  36 +-
 .../settings/setting-input-field.svelte       | 104 +-
 .../admin-page/settings/setting-select.svelte |  78 +-
 .../admin-page/settings/setting-switch.svelte | 152 ++-
 .../storage-template-settings.svelte          | 387 ++++----
 .../supported-datetime-panel.svelte           | 124 ++-
 .../supported-variables-panel.svelte          |  44 +-
 .../album-page/__tests__/album-card.spec.ts   | 213 ++---
 .../components/album-page/album-card.svelte   | 224 ++---
 .../lib/components/album-page/album-card.ts   |   4 +-
 .../components/album-page/album-viewer.svelte | 885 +++++++++---------
 .../album-page/asset-selection.svelte         | 125 ++-
 .../album-page/share-info-modal.svelte        | 232 +++--
 .../album-page/thumbnail-selection.svelte     |  88 +-
 .../album-page/user-selection-modal.svelte    | 251 +++--
 .../asset-viewer/album-list-item.svelte       |  94 +-
 .../asset-viewer/asset-viewer-nav-bar.svelte  | 260 +++--
 .../asset-viewer/asset-viewer.svelte          | 689 +++++++-------
 .../asset-viewer/detail-panel.svelte          | 505 +++++-----
 .../asset-viewer/download-panel.svelte        |  49 +-
 .../asset-viewer/intersection-observer.svelte | 122 +--
 .../asset-viewer/photo-viewer.svelte          | 192 ++--
 .../asset-viewer/video-viewer.svelte          |  67 +-
 .../assets/thumbnail/image-thumbnail.svelte   |  74 +-
 .../assets/thumbnail/thumbnail.svelte         | 276 +++---
 .../assets/thumbnail/video-thumbnail.svelte   | 150 ++-
 web/src/lib/components/elements/badge.svelte  |  30 +-
 .../components/elements/buttons/button.svelte | 124 +--
 .../buttons/circle-icon-button.svelte         |  46 +-
 .../elements/buttons/icon-button.svelte       |  10 +-
 .../elements/buttons/link-button.svelte       |   8 +-
 .../lib/components/elements/dropdown.svelte   | 102 +-
 .../faces-page/edit-name-input.svelte         |  76 +-
 .../forms/admin-registration-form.svelte      | 189 ++--
 .../lib/components/forms/api-key-form.svelte  |  74 +-
 .../components/forms/api-key-secret.svelte    | 107 +--
 .../forms/change-password-form.svelte         | 140 +--
 .../components/forms/create-user-form.svelte  | 227 +++--
 .../components/forms/edit-user-form.svelte    | 300 +++---
 .../lib/components/forms/login-form.svelte    | 282 +++---
 .../layouts/user-page-layout.svelte           |  64 +-
 .../map-page/map-settings-modal.svelte        | 215 ++---
 .../memory-page/memory-viewer.svelte          | 514 +++++-----
 .../photos-page/actions/add-to-album.svelte   |  97 +-
 .../photos-page/actions/archive-action.svelte |  72 +-
 .../actions/create-shared-link.svelte         |  30 +-
 .../photos-page/actions/delete-assets.svelte  | 118 ++-
 .../actions/download-action.svelte            |  45 +-
 .../actions/favorite-action.svelte            |  72 +-
 .../actions/remove-from-album.svelte          | 106 +--
 .../actions/remove-from-shared-link.svelte    |  93 +-
 .../actions/select-all-assets.svelte          |  59 +-
 .../photos-page/asset-date-group.svelte       | 420 ++++-----
 .../components/photos-page/asset-grid.svelte  | 312 +++---
 .../asset-select-context-menu.svelte          |  40 +-
 .../asset-select-control-bar.svelte           |  50 +-
 .../components/photos-page/memory-lane.svelte | 158 ++--
 .../individual-shared-viewer.svelte           | 215 ++---
 .../album-selection-modal.svelte              | 206 ++--
 .../shared-components/apple-header.svelte     | 240 ++---
 .../shared-components/base-modal.svelte       |  88 +-
 .../shared-components/confirm-dialogue.svelte |  97 +-
 .../context-menu/context-menu.svelte          |  46 +-
 .../context-menu/menu-option.svelte           |  18 +-
 .../shared-components/control-app-bar.svelte  | 114 +--
 .../create-shared-link-modal.svelte           | 438 +++++----
 .../drag-and-drop-upload-overlay.svelte       |  58 +-
 .../shared-components/dropdown-button.svelte  | 118 +--
 .../empty-placeholder.svelte                  |  39 +-
 .../shared-components/favicon-header.svelte   |   8 +-
 .../full-screen-modal.svelte                  |  20 +-
 .../fullscreen-container.svelte               |  42 +-
 .../gallery-viewer/gallery-viewer.svelte      | 233 +++--
 .../shared-components/immich-logo.svelte      |   4 +-
 .../shared-components/leaflet/control.svelte  |  46 +-
 .../shared-components/leaflet/index.ts        |   2 +-
 .../shared-components/leaflet/map.svelte      |  64 +-
 .../marker-cluster/asset-marker-cluster.css   |  47 +-
 .../asset-marker-cluster.svelte               | 158 ++--
 .../leaflet/marker-cluster/asset-marker.ts    |  60 +-
 .../shared-components/leaflet/marker.svelte   |  74 +-
 .../leaflet/tile-layer.svelte                 |  26 +-
 .../shared-components/loading-spinner.svelte  |  32 +-
 .../navigation-bar/account-info-panel.svelte  |  86 +-
 .../navigation-bar/navigation-bar.svelte      | 248 +++--
 .../navigation-loading-bar.svelte             |  22 +-
 .../__tests__/notification-card.spec.ts       |  62 +-
 .../__tests__/notification-list.spec.ts       |  58 +-
 .../notification/notification-card.svelte     | 149 ++-
 .../notification/notification-list.svelte     |  30 +-
 .../notification/notification.ts              |  82 +-
 .../shared-components/portal/portal.svelte    |  90 +-
 .../scrollbar/scrollbar.svelte                | 262 +++---
 .../scrollbar/segment-scrollbar-layout.ts     |   6 +-
 .../search-bar/search-bar.svelte              | 222 ++---
 .../side-bar/side-bar-button.svelte           |  96 +-
 .../side-bar/side-bar-section.svelte          |   6 +-
 .../side-bar/side-bar.svelte                  | 341 ++++---
 .../shared-components/status-box.svelte       | 184 ++--
 .../shared-components/theme-button.svelte     |  56 +-
 .../upload-asset-preview.svelte               | 109 ++-
 .../shared-components/upload-panel.svelte     | 146 +--
 .../shared-components/user-avatar.svelte      | 129 ++-
 .../version-announcement-box.svelte           | 126 ++-
 .../sharedlinks-page/shared-link-card.svelte  | 268 +++---
 .../change-password-settings.svelte           | 134 ++-
 .../user-settings-page/device-card.svelte     | 126 ++-
 .../user-settings-page/device-list.svelte     | 159 ++--
 .../user-settings-page/oauth-settings.svelte  | 131 ++-
 .../partner-selection-modal.svelte            | 142 ++-
 .../partner-settings.svelte                   | 162 ++--
 .../user-api-key-list.svelte                  | 286 +++---
 .../user-profile-settings.svelte              | 148 ++-
 .../user-settings-list.svelte                 |  68 +-
 web/src/lib/constants.ts                      |  40 +-
 web/src/lib/models/asset-grid-state.ts        |  76 +-
 web/src/lib/models/upload-asset.ts            |   8 +-
 .../lib/stores/album-asset-selection.store.ts |   8 +-
 web/src/lib/stores/asset-interaction.store.ts | 229 +++--
 web/src/lib/stores/assets.store.ts            | 326 +++----
 web/src/lib/stores/download.ts                |  28 +-
 .../lib/stores/drag-and-drop-files.store.ts   |   4 +-
 web/src/lib/stores/preferences.store.ts       |  43 +-
 web/src/lib/stores/upload.ts                  |  64 +-
 web/src/lib/stores/websocket.ts               |  38 +-
 web/src/lib/stores/zoom-image.store.ts        |   2 +-
 web/src/lib/utils/asset-utils.spec.ts         | 259 +++--
 web/src/lib/utils/asset-utils.ts              | 330 ++++---
 web/src/lib/utils/byte-units.ts               |  30 +-
 web/src/lib/utils/click-outside.ts            |  40 +-
 web/src/lib/utils/context.ts                  |   8 +-
 web/src/lib/utils/file-uploader.ts            | 305 +++---
 web/src/lib/utils/get-github-version.ts       |  17 +-
 web/src/lib/utils/handle-error.ts             |  41 +-
 web/src/lib/utils/image-load.ts               |  50 +-
 web/src/lib/utils/time-to-seconds.spec.ts     |  32 +-
 web/src/lib/utils/time-to-seconds.ts          |   8 +-
 web/src/routes/(user)/albums/+page.server.ts  |  30 +-
 web/src/routes/(user)/albums/+page.svelte     | 282 +++---
 .../(user)/albums/[albumId]/+page.server.ts   |  30 +-
 .../(user)/albums/[albumId]/+page.svelte      |   8 +-
 .../[albumId]/photos/[assetId]/+page.ts       |  26 +-
 .../albums/__tests__/albums.bloc.spec.ts      | 205 ++--
 web/src/routes/(user)/albums/albums.bloc.ts   | 145 ++-
 web/src/routes/(user)/archive/+page.server.ts |  22 +-
 web/src/routes/(user)/archive/+page.svelte    | 134 ++-
 .../(user)/archive/photos/[assetId]/+page.ts  |  16 +-
 web/src/routes/(user)/explore/+page.server.ts |  30 +-
 web/src/routes/(user)/explore/+page.svelte    | 286 +++---
 .../routes/(user)/favorites/+page.server.ts   |  22 +-
 web/src/routes/(user)/favorites/+page.svelte  | 129 ++-
 .../favorites/[assetId]/+page.server.ts       |  14 +-
 web/src/routes/(user)/map/+page.server.ts     |  18 +-
 web/src/routes/(user)/map/+page.svelte        | 298 +++---
 web/src/routes/(user)/memory/+page.server.ts  |  22 +-
 web/src/routes/(user)/memory/+page.svelte     |   2 +-
 .../(user)/memory/photos/+page.server.ts      |  14 +-
 .../memory/photos/[assetId]/+page.server.ts   |  14 +-
 .../(user)/partners/[userId]/+page.server.ts  |  28 +-
 .../(user)/partners/[userId]/+page.svelte     |  96 +-
 web/src/routes/(user)/people/+page.server.ts  |  26 +-
 web/src/routes/(user)/people/+page.svelte     |  82 +-
 .../(user)/people/[personId]/+page.server.ts  |  30 +-
 .../(user)/people/[personId]/+page.svelte     | 213 ++---
 .../[personId]/photos/[assetId]/+page.ts      |  18 +-
 web/src/routes/(user)/photos/+page.server.ts  |  22 +-
 web/src/routes/(user)/photos/+page.svelte     |  89 +-
 .../(user)/photos/[assetId]/+page.server.ts   |  14 +-
 web/src/routes/(user)/search/+page.server.ts  |  30 +-
 web/src/routes/(user)/search/+page.svelte     | 242 +++--
 .../(user)/search/photos/[assetId]/+page.ts   |  16 +-
 .../routes/(user)/share/[key]/+error.svelte   |   6 +-
 .../routes/(user)/share/[key]/+page.server.ts |  46 +-
 .../routes/(user)/share/[key]/+page.svelte    |  34 +-
 .../[key]/photos/[assetId]/+page.server.ts    |  24 +-
 .../share/[key]/photos/[assetId]/+page.svelte |  24 +-
 web/src/routes/(user)/sharing/+page.server.ts |  36 +-
 web/src/routes/(user)/sharing/+page.svelte    | 208 ++--
 .../sharing/sharedlinks/+page.server.ts       |  18 +-
 .../(user)/sharing/sharedlinks/+page.svelte   | 166 ++--
 .../(user)/user-settings/+page.server.ts      |  18 +-
 .../routes/(user)/user-settings/+page.svelte  |  18 +-
 web/src/routes/+error.svelte                  | 214 +++--
 web/src/routes/+layout.server.ts              |   4 +-
 web/src/routes/+layout.svelte                 | 126 +--
 web/src/routes/+page.server.ts                |  32 +-
 web/src/routes/+page.svelte                   |  30 +-
 web/src/routes/.well-known/immich/+server.ts  |  10 +-
 web/src/routes/admin/+layout.svelte           | 136 +--
 web/src/routes/admin/+layout.ts               |  14 +-
 web/src/routes/admin/+page.server.ts          |  16 +-
 .../routes/admin/jobs-status/+page.server.ts  |  34 +-
 web/src/routes/admin/jobs-status/+page.svelte |  36 +-
 .../admin/server-status/+page.server.ts       |  28 +-
 .../routes/admin/server-status/+page.svelte   |  30 +-
 .../admin/system-settings/+page.server.ts     |  26 +-
 .../routes/admin/system-settings/+page.svelte |  93 +-
 .../admin/user-management/+page.server.ts     |  30 +-
 .../routes/admin/user-management/+page.svelte | 532 ++++++-----
 .../auth/change-password/+page.server.ts      |  22 +-
 .../routes/auth/change-password/+page.svelte  |  38 +-
 web/src/routes/auth/login/+page.server.ts     |  48 +-
 web/src/routes/auth/login/+page.svelte        |  32 +-
 web/src/routes/auth/logout/+server.ts         |  10 +-
 web/src/routes/auth/register/+page.server.ts  |  22 +-
 web/src/routes/auth/register/+page.svelte     |  18 +-
 web/src/test-data/factories/album-factory.ts  |  22 +-
 web/src/test-data/factories/user-factory.ts   |  26 +-
 web/svelte.config.js                          |  10 +-
 web/tailwind.config.cjs                       |  50 +-
 web/vite.config.js                            |  40 +-
 242 files changed, 12794 insertions(+), 13426 deletions(-)

diff --git a/web/.eslintrc.cjs b/web/.eslintrc.cjs
index 08da2df8a..fdf66b700 100644
--- a/web/.eslintrc.cjs
+++ b/web/.eslintrc.cjs
@@ -1,43 +1,39 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-	root: true,
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended'
-	],
-	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint'],
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020,
-		extraFileExtensions: ['.svelte']
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	],
-	globals: {
-		NodeJS: true
-	},
-	rules: {
-		'@typescript-eslint/no-unused-vars': [
-			'warn',
-			{
-				// Allow underscore (_) variables
-				argsIgnorePattern: '^_$',
-				varsIgnorePattern: '^_$'
-			}
-		]
-	}
+  root: true,
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:svelte/recommended'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    extraFileExtensions: ['.svelte'],
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  ],
+  globals: {
+    NodeJS: true,
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        // Allow underscore (_) variables
+        argsIgnorePattern: '^_$',
+        varsIgnorePattern: '^_$',
+      },
+    ],
+  },
 };
diff --git a/web/.prettierrc b/web/.prettierrc
index ff2677efd..a095d3a51 100644
--- a/web/.prettierrc
+++ b/web/.prettierrc
@@ -1,6 +1,7 @@
 {
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "semi": true,
+  "organizeImportsSkipDestructiveCodeActions": true
 }
diff --git a/web/__mocks__/$app/environment.js b/web/__mocks__/$app/environment.js
index 357e6533c..453d98b84 100644
--- a/web/__mocks__/$app/environment.js
+++ b/web/__mocks__/$app/environment.js
@@ -1,3 +1,3 @@
 module.exports = {
-	browser: false
+  browser: false,
 };
diff --git a/web/__mocks__/$env/dynamic/public.js b/web/__mocks__/$env/dynamic/public.js
index 643ba805f..910f4005a 100644
--- a/web/__mocks__/$env/dynamic/public.js
+++ b/web/__mocks__/$env/dynamic/public.js
@@ -1,3 +1,3 @@
 module.exports = {
-	env: {}
+  env: {},
 };
diff --git a/web/babel.config.cjs b/web/babel.config.cjs
index 96a36d611..e6ffbd417 100644
--- a/web/babel.config.cjs
+++ b/web/babel.config.cjs
@@ -1,3 +1,3 @@
 module.exports = {
-	presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript']
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
 };
diff --git a/web/jest.config.mjs b/web/jest.config.mjs
index 9ba08b74b..5eeb60f95 100644
--- a/web/jest.config.mjs
+++ b/web/jest.config.mjs
@@ -4,200 +4,199 @@
  */
 
 export default {
-	// All imported modules in your tests should be mocked automatically
-	// automock: false,
+  // All imported modules in your tests should be mocked automatically
+  // automock: false,
 
-	// Stop running tests after `n` failures
-	// bail: 0,
+  // Stop running tests after `n` failures
+  // bail: 0,
 
-	// The directory where Jest should store its cached dependency information
-	// cacheDirectory: "/private/var/folders/6n/31wm28711gzbt3gzsxhzxx500000gn/T/jest_dx",
+  // The directory where Jest should store its cached dependency information
+  // cacheDirectory: "/private/var/folders/6n/31wm28711gzbt3gzsxhzxx500000gn/T/jest_dx",
 
-	// Automatically clear mock calls, instances, contexts and results before every test
-	clearMocks: true,
+  // Automatically clear mock calls, instances, contexts and results before every test
+  clearMocks: true,
 
-	// Indicates whether the coverage information should be collected while executing the test
-	// collectCoverage: false,
+  // Indicates whether the coverage information should be collected while executing the test
+  // collectCoverage: false,
 
-	// An array of glob patterns indicating a set of files for which coverage information should be collected
-	collectCoverageFrom: ['src/**/*.*', '!src/api/open-api/**'],
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  collectCoverageFrom: ['src/**/*.*', '!src/api/open-api/**'],
 
-	// The directory where Jest should output its coverage files
-	// coverageDirectory: undefined,
-	coverageThreshold: {
-		global: {
-			lines: 4,
-			statements: 4
-		}
-	},
+  // The directory where Jest should output its coverage files
+  // coverageDirectory: undefined,
+  coverageThreshold: {
+    global: {
+      lines: 4,
+      statements: 4,
+    },
+  },
 
-	// An array of regexp pattern strings used to skip coverage collection
-	// coveragePathIgnorePatterns: [
-	//   "/node_modules/"
-	// ],
+  // An array of regexp pattern strings used to skip coverage collection
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
 
-	// Indicates which provider should be used to instrument code for coverage
-	coverageProvider: 'v8',
+  // Indicates which provider should be used to instrument code for coverage
+  coverageProvider: 'v8',
 
-	// A list of reporter names that Jest uses when writing coverage reports
-	// coverageReporters: [
-	//   "json",
-	//   "text",
-	//   "lcov",
-	//   "clover"
-	// ],
+  // A list of reporter names that Jest uses when writing coverage reports
+  // coverageReporters: [
+  //   "json",
+  //   "text",
+  //   "lcov",
+  //   "clover"
+  // ],
 
-	// An object that configures minimum threshold enforcement for coverage results
-	// coverageThreshold: undefined,
+  // An object that configures minimum threshold enforcement for coverage results
+  // coverageThreshold: undefined,
 
-	// A path to a custom dependency extractor
-	// dependencyExtractor: undefined,
+  // A path to a custom dependency extractor
+  // dependencyExtractor: undefined,
 
-	// Make calling deprecated APIs throw helpful error messages
-	// errorOnDeprecated: false,
+  // Make calling deprecated APIs throw helpful error messages
+  // errorOnDeprecated: false,
 
-	// The default configuration for fake timers
-	// fakeTimers: {
-	//   "enableGlobally": false
-	// },
+  // The default configuration for fake timers
+  // fakeTimers: {
+  //   "enableGlobally": false
+  // },
 
-	// Force coverage collection from ignored files using an array of glob patterns
-	// forceCoverageMatch: [],
+  // Force coverage collection from ignored files using an array of glob patterns
+  // forceCoverageMatch: [],
 
-	// A path to a module which exports an async function that is triggered once before all test suites
-	// globalSetup: undefined,
+  // A path to a module which exports an async function that is triggered once before all test suites
+  // globalSetup: undefined,
 
-	// A path to a module which exports an async function that is triggered once after all test suites
-	// globalTeardown: undefined,
+  // A path to a module which exports an async function that is triggered once after all test suites
+  // globalTeardown: undefined,
 
-	// A set of global variables that need to be available in all test environments
-	// globals: {},
+  // A set of global variables that need to be available in all test environments
+  // globals: {},
 
-	// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
-	// maxWorkers: "50%",
+  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+  // maxWorkers: "50%",
 
-	// An array of directory names to be searched recursively up from the requiring module's location
-	// moduleDirectories: [
-	//   "node_modules"
-	// ],
+  // An array of directory names to be searched recursively up from the requiring module's location
+  // moduleDirectories: [
+  //   "node_modules"
+  // ],
 
-	// An array of file extensions your modules use
-	moduleFileExtensions: ['svelte', 'js', 'ts'],
+  // An array of file extensions your modules use
+  moduleFileExtensions: ['svelte', 'js', 'ts'],
 
-	// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
-	moduleNameMapper: {
-		'\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-			'identity-obj-proxy',
-		'^\\$lib(.*)$': '<rootDir>/src/lib$1',
-		'^\\@api(.*)$': '<rootDir>/src/api$1',
-		'^\\@test-data(.*)$': '<rootDir>/src/test-data$1'
-	},
+  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+  moduleNameMapper: {
+    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'identity-obj-proxy',
+    '^\\$lib(.*)$': '<rootDir>/src/lib$1',
+    '^\\@api(.*)$': '<rootDir>/src/api$1',
+    '^\\@test-data(.*)$': '<rootDir>/src/test-data$1',
+  },
 
-	// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
-	// modulePathIgnorePatterns: [],
+  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // modulePathIgnorePatterns: [],
 
-	// Activates notifications for test results
-	// notify: false,
+  // Activates notifications for test results
+  // notify: false,
 
-	// An enum that specifies notification mode. Requires { notify: true }
-	// notifyMode: "failure-change",
+  // An enum that specifies notification mode. Requires { notify: true }
+  // notifyMode: "failure-change",
 
-	// A preset that is used as a base for Jest's configuration
-	// preset: undefined,
+  // A preset that is used as a base for Jest's configuration
+  // preset: undefined,
 
-	// Run tests from one or more projects
-	// projects: undefined,
+  // Run tests from one or more projects
+  // projects: undefined,
 
-	// Use this configuration option to add custom reporters to Jest
-	// reporters: undefined,
+  // Use this configuration option to add custom reporters to Jest
+  // reporters: undefined,
 
-	// Automatically reset mock state before every test
-	// resetMocks: false,
+  // Automatically reset mock state before every test
+  // resetMocks: false,
 
-	// Reset the module registry before running each individual test
-	// resetModules: false,
+  // Reset the module registry before running each individual test
+  // resetModules: false,
 
-	// A path to a custom resolver
-	// resolver: undefined,
+  // A path to a custom resolver
+  // resolver: undefined,
 
-	// Automatically restore mock state and implementation before every test
-	// restoreMocks: false,
+  // Automatically restore mock state and implementation before every test
+  // restoreMocks: false,
 
-	// The root directory that Jest should scan for tests and modules within
-	// rootDir: undefined,
+  // The root directory that Jest should scan for tests and modules within
+  // rootDir: undefined,
 
-	// A list of paths to directories that Jest should use to search for files in
-	// roots: [
-	//   "<rootDir>"
-	// ],
+  // A list of paths to directories that Jest should use to search for files in
+  // roots: [
+  //   "<rootDir>"
+  // ],
 
-	// Allows you to use a custom runner instead of Jest's default test runner
-	// runner: "jest-runner",
+  // Allows you to use a custom runner instead of Jest's default test runner
+  // runner: "jest-runner",
 
-	// The paths to modules that run some code to configure or set up the testing environment before each test
-	// setupFiles: [],
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  // setupFiles: [],
 
-	// A list of paths to modules that run some code to configure or set up the testing framework before each test
-	// setupFilesAfterEnv: [],
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test
+  // setupFilesAfterEnv: [],
 
-	// The number of seconds after which a test is considered as slow and reported as such in the results.
-	// slowTestThreshold: 5,
+  // The number of seconds after which a test is considered as slow and reported as such in the results.
+  // slowTestThreshold: 5,
 
-	// A list of paths to snapshot serializer modules Jest should use for snapshot testing
-	// snapshotSerializers: [],
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  // snapshotSerializers: [],
 
-	// The test environment that will be used for testing
-	testEnvironment: 'jsdom',
+  // The test environment that will be used for testing
+  testEnvironment: 'jsdom',
 
-	// Options that will be passed to the testEnvironment
-	// testEnvironmentOptions: {},
+  // Options that will be passed to the testEnvironment
+  // testEnvironmentOptions: {},
 
-	// Adds a location field to test results
-	// testLocationInResults: false,
+  // Adds a location field to test results
+  // testLocationInResults: false,
 
-	// The glob patterns Jest uses to detect test files
-	// testMatch: [
-	//   "**/__tests__/**/*.[jt]s?(x)",
-	//   "**/?(*.)+(spec|test).[tj]s?(x)"
-	// ],
+  // The glob patterns Jest uses to detect test files
+  // testMatch: [
+  //   "**/__tests__/**/*.[jt]s?(x)",
+  //   "**/?(*.)+(spec|test).[tj]s?(x)"
+  // ],
 
-	// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-	// testPathIgnorePatterns: [
-	//   "/node_modules/"
-	// ],
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  // testPathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
 
-	// The regexp pattern or array of patterns that Jest uses to detect test files
-	// testRegex: [],
+  // The regexp pattern or array of patterns that Jest uses to detect test files
+  // testRegex: [],
 
-	// This option allows the use of a custom results processor
-	// testResultsProcessor: undefined,
+  // This option allows the use of a custom results processor
+  // testResultsProcessor: undefined,
 
-	// This option allows use of a custom test runner
-	// testRunner: "jest-circus/runner",
+  // This option allows use of a custom test runner
+  // testRunner: "jest-circus/runner",
 
-	// A map from regular expressions to paths to transformers
-	transform: {
-		'\\.[jt]sx?$': 'babel-jest',
-		'^.+\\.svelte$': [
-			'svelte-jester',
-			{
-				preprocess: true
-			}
-		]
-	},
+  // A map from regular expressions to paths to transformers
+  transform: {
+    '\\.[jt]sx?$': 'babel-jest',
+    '^.+\\.svelte$': [
+      'svelte-jester',
+      {
+        preprocess: true,
+      },
+    ],
+  },
 
-	// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-	transformIgnorePatterns: ['/node_modules/(?!svelte-material-icons).*/', '\\.pnp\\.[^\\/]+$']
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  transformIgnorePatterns: ['/node_modules/(?!svelte-material-icons).*/', '\\.pnp\\.[^\\/]+$'],
 
-	// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
-	// unmockedModulePathPatterns: undefined,
+  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+  // unmockedModulePathPatterns: undefined,
 
-	// Indicates whether each individual test should be reported during the run
-	// verbose: undefined,
+  // Indicates whether each individual test should be reported during the run
+  // verbose: undefined,
 
-	// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
-	// watchPathIgnorePatterns: [],
+  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
 
-	// Whether to use watchman for file crawling
-	// watchman: true,
+  // Whether to use watchman for file crawling
+  // watchman: true,
 };
diff --git a/web/postcss.config.cjs b/web/postcss.config.cjs
index 054c147cb..12a703d90 100644
--- a/web/postcss.config.cjs
+++ b/web/postcss.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
diff --git a/web/src/api/api.ts b/web/src/api/api.ts
index 2924d717d..22f998972 100644
--- a/web/src/api/api.ts
+++ b/web/src/api/api.ts
@@ -1,129 +1,125 @@
 import {
-	AlbumApi,
-	APIKeyApi,
-	AssetApi,
-	AssetApiFp,
-	AuthenticationApi,
-	Configuration,
-	ConfigurationParameters,
-	JobApi,
-	JobName,
-	OAuthApi,
-	PartnerApi,
-	PersonApi,
-	SearchApi,
-	ServerInfoApi,
-	SharedLinkApi,
-	SystemConfigApi,
-	UserApi,
-	UserApiFp
+  AlbumApi,
+  APIKeyApi,
+  AssetApi,
+  AssetApiFp,
+  AuthenticationApi,
+  Configuration,
+  ConfigurationParameters,
+  JobApi,
+  JobName,
+  OAuthApi,
+  PartnerApi,
+  PersonApi,
+  SearchApi,
+  ServerInfoApi,
+  SharedLinkApi,
+  SystemConfigApi,
+  UserApi,
+  UserApiFp,
 } from './open-api';
 import { BASE_PATH } from './open-api/base';
 import { DUMMY_BASE_URL, toPathString } from './open-api/common';
 import type { ApiParams } from './types';
 
 export class ImmichApi {
-	public albumApi: AlbumApi;
-	public assetApi: AssetApi;
-	public authenticationApi: AuthenticationApi;
-	public jobApi: JobApi;
-	public keyApi: APIKeyApi;
-	public oauthApi: OAuthApi;
-	public partnerApi: PartnerApi;
-	public searchApi: SearchApi;
-	public serverInfoApi: ServerInfoApi;
-	public sharedLinkApi: SharedLinkApi;
-	public personApi: PersonApi;
-	public systemConfigApi: SystemConfigApi;
-	public userApi: UserApi;
+  public albumApi: AlbumApi;
+  public assetApi: AssetApi;
+  public authenticationApi: AuthenticationApi;
+  public jobApi: JobApi;
+  public keyApi: APIKeyApi;
+  public oauthApi: OAuthApi;
+  public partnerApi: PartnerApi;
+  public searchApi: SearchApi;
+  public serverInfoApi: ServerInfoApi;
+  public sharedLinkApi: SharedLinkApi;
+  public personApi: PersonApi;
+  public systemConfigApi: SystemConfigApi;
+  public userApi: UserApi;
 
-	private config: Configuration;
+  private config: Configuration;
 
-	constructor(params: ConfigurationParameters) {
-		this.config = new Configuration(params);
+  constructor(params: ConfigurationParameters) {
+    this.config = new Configuration(params);
 
-		this.albumApi = new AlbumApi(this.config);
-		this.assetApi = new AssetApi(this.config);
-		this.authenticationApi = new AuthenticationApi(this.config);
-		this.jobApi = new JobApi(this.config);
-		this.keyApi = new APIKeyApi(this.config);
-		this.oauthApi = new OAuthApi(this.config);
-		this.partnerApi = new PartnerApi(this.config);
-		this.searchApi = new SearchApi(this.config);
-		this.serverInfoApi = new ServerInfoApi(this.config);
-		this.sharedLinkApi = new SharedLinkApi(this.config);
-		this.personApi = new PersonApi(this.config);
-		this.systemConfigApi = new SystemConfigApi(this.config);
-		this.userApi = new UserApi(this.config);
-	}
+    this.albumApi = new AlbumApi(this.config);
+    this.assetApi = new AssetApi(this.config);
+    this.authenticationApi = new AuthenticationApi(this.config);
+    this.jobApi = new JobApi(this.config);
+    this.keyApi = new APIKeyApi(this.config);
+    this.oauthApi = new OAuthApi(this.config);
+    this.partnerApi = new PartnerApi(this.config);
+    this.searchApi = new SearchApi(this.config);
+    this.serverInfoApi = new ServerInfoApi(this.config);
+    this.sharedLinkApi = new SharedLinkApi(this.config);
+    this.personApi = new PersonApi(this.config);
+    this.systemConfigApi = new SystemConfigApi(this.config);
+    this.userApi = new UserApi(this.config);
+  }
 
-	private createUrl(path: string, params?: Record<string, unknown>) {
-		const searchParams = new URLSearchParams();
-		for (const key in params) {
-			const value = params[key];
-			if (value !== undefined && value !== null) {
-				searchParams.set(key, value.toString());
-			}
-		}
+  private createUrl(path: string, params?: Record<string, unknown>) {
+    const searchParams = new URLSearchParams();
+    for (const key in params) {
+      const value = params[key];
+      if (value !== undefined && value !== null) {
+        searchParams.set(key, value.toString());
+      }
+    }
 
-		const url = new URL(path, DUMMY_BASE_URL);
-		url.search = searchParams.toString();
+    const url = new URL(path, DUMMY_BASE_URL);
+    url.search = searchParams.toString();
 
-		return (this.config.basePath || BASE_PATH) + toPathString(url);
-	}
+    return (this.config.basePath || BASE_PATH) + toPathString(url);
+  }
 
-	public setAccessToken(accessToken: string) {
-		this.config.accessToken = accessToken;
-	}
+  public setAccessToken(accessToken: string) {
+    this.config.accessToken = accessToken;
+  }
 
-	public removeAccessToken() {
-		this.config.accessToken = undefined;
-	}
+  public removeAccessToken() {
+    this.config.accessToken = undefined;
+  }
 
-	public setBaseUrl(baseUrl: string) {
-		this.config.basePath = baseUrl;
-	}
+  public setBaseUrl(baseUrl: string) {
+    this.config.basePath = baseUrl;
+  }
 
-	public getAssetFileUrl(
-		...[assetId, isThumb, isWeb, key]: ApiParams<typeof AssetApiFp, 'serveFile'>
-	) {
-		const path = `/asset/file/${assetId}`;
-		return this.createUrl(path, { isThumb, isWeb, key });
-	}
+  public getAssetFileUrl(...[assetId, isThumb, isWeb, key]: ApiParams<typeof AssetApiFp, 'serveFile'>) {
+    const path = `/asset/file/${assetId}`;
+    return this.createUrl(path, { isThumb, isWeb, key });
+  }
 
-	public getAssetThumbnailUrl(
-		...[assetId, format, key]: ApiParams<typeof AssetApiFp, 'getAssetThumbnail'>
-	) {
-		const path = `/asset/thumbnail/${assetId}`;
-		return this.createUrl(path, { format, key });
-	}
+  public getAssetThumbnailUrl(...[assetId, format, key]: ApiParams<typeof AssetApiFp, 'getAssetThumbnail'>) {
+    const path = `/asset/thumbnail/${assetId}`;
+    return this.createUrl(path, { format, key });
+  }
 
-	public getProfileImageUrl(...[userId]: ApiParams<typeof UserApiFp, 'getProfileImage'>) {
-		const path = `/user/profile-image/${userId}`;
-		return this.createUrl(path);
-	}
+  public getProfileImageUrl(...[userId]: ApiParams<typeof UserApiFp, 'getProfileImage'>) {
+    const path = `/user/profile-image/${userId}`;
+    return this.createUrl(path);
+  }
 
-	public getPeopleThumbnailUrl(personId: string) {
-		const path = `/person/${personId}/thumbnail`;
-		return this.createUrl(path);
-	}
+  public getPeopleThumbnailUrl(personId: string) {
+    const path = `/person/${personId}/thumbnail`;
+    return this.createUrl(path);
+  }
 
-	public getJobName(jobName: JobName) {
-		const names: Record<JobName, string> = {
-			[JobName.ThumbnailGeneration]: 'Generate Thumbnails',
-			[JobName.MetadataExtraction]: 'Extract Metadata',
-			[JobName.Sidecar]: 'Sidecar Metadata',
-			[JobName.ObjectTagging]: 'Tag Objects',
-			[JobName.ClipEncoding]: 'Encode Clip',
-			[JobName.RecognizeFaces]: 'Recognize Faces',
-			[JobName.VideoConversion]: 'Transcode Videos',
-			[JobName.StorageTemplateMigration]: 'Storage Template Migration',
-			[JobName.BackgroundTask]: 'Background Tasks',
-			[JobName.Search]: 'Search'
-		};
+  public getJobName(jobName: JobName) {
+    const names: Record<JobName, string> = {
+      [JobName.ThumbnailGeneration]: 'Generate Thumbnails',
+      [JobName.MetadataExtraction]: 'Extract Metadata',
+      [JobName.Sidecar]: 'Sidecar Metadata',
+      [JobName.ObjectTagging]: 'Tag Objects',
+      [JobName.ClipEncoding]: 'Encode Clip',
+      [JobName.RecognizeFaces]: 'Recognize Faces',
+      [JobName.VideoConversion]: 'Transcode Videos',
+      [JobName.StorageTemplateMigration]: 'Storage Template Migration',
+      [JobName.BackgroundTask]: 'Background Tasks',
+      [JobName.Search]: 'Search',
+    };
 
-		return names[jobName];
-	}
+    return names[jobName];
+  }
 }
 
 export const api = new ImmichApi({ basePath: '/api' });
diff --git a/web/src/api/index.ts b/web/src/api/index.ts
index cf4e108bd..1a16e38b5 100644
--- a/web/src/api/index.ts
+++ b/web/src/api/index.ts
@@ -1,3 +1,3 @@
-export * from './open-api';
 export * from './api';
+export * from './open-api';
 export * from './utils';
diff --git a/web/src/api/types.ts b/web/src/api/types.ts
index 0bb28cca8..b26f26484 100644
--- a/web/src/api/types.ts
+++ b/web/src/api/types.ts
@@ -3,10 +3,6 @@ import type { Configuration } from './open-api';
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export type ApiFp = (configuration: Configuration) => Record<any, (...args: any) => any>;
 
-export type OmitLast<T extends readonly unknown[]> = T extends readonly [...infer U, any?]
-	? U
-	: [...T];
+export type OmitLast<T extends readonly unknown[]> = T extends readonly [...infer U, any?] ? U : [...T];
 
-export type ApiParams<F extends ApiFp, K extends keyof ReturnType<F>> = OmitLast<
-	Parameters<ReturnType<F>[K]>
->;
+export type ApiParams<F extends ApiFp, K extends keyof ReturnType<F>> = OmitLast<Parameters<ReturnType<F>[K]>>;
diff --git a/web/src/api/utils.ts b/web/src/api/utils.ts
index 39c319901..75f3b4786 100644
--- a/web/src/api/utils.ts
+++ b/web/src/api/utils.ts
@@ -5,31 +5,31 @@ import type { UserResponseDto } from './open-api';
 export type ApiError = AxiosError<{ message: string }>;
 
 export const oauth = {
-	isCallback: (location: Location) => {
-		const search = location.search;
-		return search.includes('code=') || search.includes('error=');
-	},
-	isAutoLaunchDisabled: (location: Location) => {
-		const values = ['autoLaunch=0', 'password=1', 'password=true'];
-		for (const value of values) {
-			if (location.search.includes(value)) {
-				return true;
-			}
-		}
-		return false;
-	},
-	getConfig: (location: Location) => {
-		const redirectUri = location.href.split('?')[0];
-		console.log(`OAuth Redirect URI: ${redirectUri}`);
-		return api.oauthApi.generateConfig({ oAuthConfigDto: { redirectUri } });
-	},
-	login: (location: Location) => {
-		return api.oauthApi.callback({ oAuthCallbackDto: { url: location.href } });
-	},
-	link: (location: Location): AxiosPromise<UserResponseDto> => {
-		return api.oauthApi.link({ oAuthCallbackDto: { url: location.href } });
-	},
-	unlink: () => {
-		return api.oauthApi.unlink();
-	}
+  isCallback: (location: Location) => {
+    const search = location.search;
+    return search.includes('code=') || search.includes('error=');
+  },
+  isAutoLaunchDisabled: (location: Location) => {
+    const values = ['autoLaunch=0', 'password=1', 'password=true'];
+    for (const value of values) {
+      if (location.search.includes(value)) {
+        return true;
+      }
+    }
+    return false;
+  },
+  getConfig: (location: Location) => {
+    const redirectUri = location.href.split('?')[0];
+    console.log(`OAuth Redirect URI: ${redirectUri}`);
+    return api.oauthApi.generateConfig({ oAuthConfigDto: { redirectUri } });
+  },
+  login: (location: Location) => {
+    return api.oauthApi.callback({ oAuthCallbackDto: { url: location.href } });
+  },
+  link: (location: Location): AxiosPromise<UserResponseDto> => {
+    return api.oauthApi.link({ oAuthCallbackDto: { url: location.href } });
+  },
+  unlink: () => {
+    return api.oauthApi.unlink();
+  },
 };
diff --git a/web/src/app.css b/web/src/app.css
index 3802a4b25..f959d2dc8 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -3,93 +3,93 @@
 @tailwind utilities;
 
 @font-face {
-	font-family: 'Work Sans';
-	src: url('$lib/assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
-	font-weight: 1 999;
+  font-family: 'Work Sans';
+  src: url('$lib/assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
+  font-weight: 1 999;
 }
 
 @font-face {
-	font-family: 'Snowburst One';
-	src: url('$lib/assets/fonts/SnowburstOne-Regular.ttf') format('truetype');
+  font-family: 'Snowburst One';
+  src: url('$lib/assets/fonts/SnowburstOne-Regular.ttf') format('truetype');
 }
 
 :root {
-	font-family: 'Work Sans', sans-serif;
+  font-family: 'Work Sans', sans-serif;
 }
 
 html {
-	height: 100%;
-	width: 100%;
+  height: 100%;
+  width: 100%;
 }
 
 html::-webkit-scrollbar {
-	width: 8px;
+  width: 8px;
 }
 
 /* Track */
 html::-webkit-scrollbar-track {
-	background: #f1f1f1;
-	border-radius: 16px;
+  background: #f1f1f1;
+  border-radius: 16px;
 }
 
 /* Handle */
 html::-webkit-scrollbar-thumb {
-	background: rgba(85, 86, 87, 0.408);
-	border-radius: 16px;
+  background: rgba(85, 86, 87, 0.408);
+  border-radius: 16px;
 }
 
 /* Handle on hover */
 html::-webkit-scrollbar-thumb:hover {
-	background: #4250afad;
-	border-radius: 16px;
+  background: #4250afad;
+  border-radius: 16px;
 }
 
 body {
-	margin: 0;
-	color: #5f6368;
+  margin: 0;
+  color: #5f6368;
 }
 
 input:focus-visible {
-	outline-offset: 0px !important;
-	outline: none !important;
+  outline-offset: 0px !important;
+  outline: none !important;
 }
 
 @layer utilities {
-	.immich-form-input {
-		@apply bg-slate-200 p-4 rounded-xl focus:border-immich-primary text-sm dark:bg-gray-600 dark:text-immich-dark-fg disabled:bg-gray-400 dark:disabled:bg-gray-800 disabled:cursor-not-allowed disabled:text-gray-200;
-	}
+  .immich-form-input {
+    @apply bg-slate-200 p-4 rounded-xl focus:border-immich-primary text-sm dark:bg-gray-600 dark:text-immich-dark-fg disabled:bg-gray-400 dark:disabled:bg-gray-800 disabled:cursor-not-allowed disabled:text-gray-200;
+  }
 
-	.immich-form-label {
-		@apply font-medium text-gray-500 dark:text-gray-300;
-	}
+  .immich-form-label {
+    @apply font-medium text-gray-500 dark:text-gray-300;
+  }
 
-	/* width */
-	.immich-scrollbar::-webkit-scrollbar {
-		width: 8px;
-	}
+  /* width */
+  .immich-scrollbar::-webkit-scrollbar {
+    width: 8px;
+  }
 
-	/* Track */
-	.immich-scrollbar::-webkit-scrollbar-track {
-		background: #f1f1f1;
-		border-radius: 16px;
-	}
+  /* Track */
+  .immich-scrollbar::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 16px;
+  }
 
-	/* Handle */
-	.immich-scrollbar::-webkit-scrollbar-thumb {
-		background: rgba(85, 86, 87, 0.408);
-		border-radius: 16px;
-	}
+  /* Handle */
+  .immich-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(85, 86, 87, 0.408);
+    border-radius: 16px;
+  }
 
-	/* Handle on hover */
-	.immich-scrollbar::-webkit-scrollbar-thumb:hover {
-		background: #4250afad;
-		border-radius: 16px;
-	}
+  /* Handle on hover */
+  .immich-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #4250afad;
+    border-radius: 16px;
+  }
 
-	/* Hidden scrollbar */
-	/* width */
-	.scrollbar-hidden::-webkit-scrollbar {
-		display: none;
-		scrollbar-width: none;
-	}
+  /* Hidden scrollbar */
+  /* width */
+  .scrollbar-hidden::-webkit-scrollbar {
+    display: none;
+    scrollbar-width: none;
+  }
 }
diff --git a/web/src/app.d.ts b/web/src/app.d.ts
index e6bff3ed8..c29b346be 100644
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -3,32 +3,32 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare namespace App {
-	interface Locals {
-		user?: import('@api').UserResponseDto;
-		api: import('@api').ImmichApi;
-	}
+  interface Locals {
+    user?: import('@api').UserResponseDto;
+    api: import('@api').ImmichApi;
+  }
 
-	interface PageData {
-		meta: {
-			title: string;
-			description?: string;
-			imageUrl?: string;
-		};
-	}
+  interface PageData {
+    meta: {
+      title: string;
+      description?: string;
+      imageUrl?: string;
+    };
+  }
 
-	interface Error {
-		message: string;
-		stack?: string;
-		code?: string | number;
-	}
+  interface Error {
+    message: string;
+    stack?: string;
+    code?: string | number;
+  }
 }
 
 // Source: https://stackoverflow.com/questions/63814432/typescript-typing-of-non-standard-window-event-in-svelte
 // To fix the <svelte:window... in components/asset-viewer/photo-viewer.svelte
 declare namespace svelteHTML {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	interface HTMLAttributes<T> {
-		'on:copyImage'?: () => void;
-		'on:zoomImage'?: () => void;
-	}
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLAttributes<T> {
+    'on:copyImage'?: () => void;
+    'on:zoomImage'?: () => void;
+  }
 }
diff --git a/web/src/app.html b/web/src/app.html
index 8aed10653..9da6868f7 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html lang="en" class="dark">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-		<script>
-			/**
-			 * Prevent FOUC on page load.
-			 */
-			const theme = localStorage.getItem('color-theme') || 'dark';
-			if (theme === 'light') {
-				document.documentElement.classList.remove('dark');
-			}
-		</script>
-	</head>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+    <script>
+      /**
+       * Prevent FOUC on page load.
+       */
+      const theme = localStorage.getItem('color-theme') || 'dark';
+      if (theme === 'light') {
+        document.documentElement.classList.remove('dark');
+      }
+    </script>
+  </head>
 
-	<body class="bg-immich-bg dark:bg-immich-dark-bg">
-		<div>%sveltekit.body%</div>
-	</body>
+  <body class="bg-immich-bg dark:bg-immich-dark-bg">
+    <div>%sveltekit.body%</div>
+  </body>
 </html>
diff --git a/web/src/hooks.server.ts b/web/src/hooks.server.ts
index 8998257e7..6abd4a2f2 100644
--- a/web/src/hooks.server.ts
+++ b/web/src/hooks.server.ts
@@ -4,54 +4,54 @@ import type { AxiosError, AxiosResponse } from 'axios';
 import { ImmichApi } from './api/api';
 
 export const handle = (async ({ event, resolve }) => {
-	const basePath = env.PUBLIC_IMMICH_SERVER_URL || 'http://immich-server:3001';
-	const accessToken = event.cookies.get('immich_access_token');
-	const api = new ImmichApi({ basePath, accessToken });
+  const basePath = env.PUBLIC_IMMICH_SERVER_URL || 'http://immich-server:3001';
+  const accessToken = event.cookies.get('immich_access_token');
+  const api = new ImmichApi({ basePath, accessToken });
 
-	// API instance that should be used for all server-side requests.
-	event.locals.api = api;
+  // API instance that should be used for all server-side requests.
+  event.locals.api = api;
 
-	if (accessToken) {
-		try {
-			const { data: user } = await api.userApi.getMyUserInfo();
-			event.locals.user = user;
-		} catch (err) {
-			const apiError = err as AxiosError;
+  if (accessToken) {
+    try {
+      const { data: user } = await api.userApi.getMyUserInfo();
+      event.locals.user = user;
+    } catch (err) {
+      const apiError = err as AxiosError;
 
-			// Ignore 401 unauthorized errors and log all others.
-			if (apiError.response?.status !== 401) {
-				console.error('[ERROR] hooks.server.ts [handle]:', err);
-			}
-		}
-	}
+      // Ignore 401 unauthorized errors and log all others.
+      if (apiError.response?.status !== 401) {
+        console.error('[ERROR] hooks.server.ts [handle]:', err);
+      }
+    }
+  }
 
-	const res = await resolve(event);
+  const res = await resolve(event);
 
-	// The link header can grow quite big and has caused issues with our nginx
-	// proxy returning a 502 Bad Gateway error. Therefore the header gets deleted.
-	res.headers.delete('Link');
+  // The link header can grow quite big and has caused issues with our nginx
+  // proxy returning a 502 Bad Gateway error. Therefore the header gets deleted.
+  res.headers.delete('Link');
 
-	return res;
+  return res;
 }) satisfies Handle;
 
 const DEFAULT_MESSAGE = 'Hmm, not sure about that. Check the logs or open a ticket?';
 
 export const handleError: HandleServerError = async ({ error }) => {
-	const httpError = error as AxiosError;
-	const response = httpError?.response as AxiosResponse<{
-		message: string;
-		statusCode: number;
-		error: string;
-	}>;
+  const httpError = error as AxiosError;
+  const response = httpError?.response as AxiosResponse<{
+    message: string;
+    statusCode: number;
+    error: string;
+  }>;
 
-	let code = response?.data?.statusCode || response?.status || httpError.code || '500';
-	if (response) {
-		code += ` - ${response.data?.error || response.statusText}`;
-	}
+  let code = response?.data?.statusCode || response?.status || httpError.code || '500';
+  if (response) {
+    code += ` - ${response.data?.error || response.statusText}`;
+  }
 
-	return {
-		message: response?.data?.message || httpError?.message || DEFAULT_MESSAGE,
-		code,
-		stack: httpError?.stack
-	};
+  return {
+    message: response?.data?.message || httpError?.message || DEFAULT_MESSAGE,
+    code,
+    stack: httpError?.stack,
+  };
 };
diff --git a/web/src/lib/__mocks__/jsdom-url.mock.ts b/web/src/lib/__mocks__/jsdom-url.mock.ts
index b915c8438..abe00cd2e 100644
--- a/web/src/lib/__mocks__/jsdom-url.mock.ts
+++ b/web/src/lib/__mocks__/jsdom-url.mock.ts
@@ -1,8 +1,8 @@
 const createObjectURLMock = jest.fn();
 
 Object.defineProperty(URL, 'createObjectURL', {
-	writable: true,
-	value: createObjectURLMock
+  writable: true,
+  value: createObjectURLMock,
 });
 
 export { createObjectURLMock };
diff --git a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte
index 8f687f3b6..2e703de8e 100644
--- a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte
+++ b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte
@@ -1,36 +1,35 @@
 <script lang="ts">
-	import { api, UserResponseDto } from '@api';
-	import { createEventDispatcher } from 'svelte';
-	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-	import { handleError } from '../../utils/handle-error';
+  import { api, UserResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import { handleError } from '../../utils/handle-error';
 
-	export let user: UserResponseDto;
+  export let user: UserResponseDto;
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	const deleteUser = async () => {
-		try {
-			const deletedUser = await api.userApi.deleteUser({ userId: user.id });
-			if (deletedUser.data.deletedAt != null) {
-				dispatch('user-delete-success');
-			} else {
-				dispatch('user-delete-fail');
-			}
-		} catch (error) {
-			handleError(error, 'Unable to delete user');
-			dispatch('user-delete-fail');
-		}
-	};
+  const deleteUser = async () => {
+    try {
+      const deletedUser = await api.userApi.deleteUser({ userId: user.id });
+      if (deletedUser.data.deletedAt != null) {
+        dispatch('user-delete-success');
+      } else {
+        dispatch('user-delete-fail');
+      }
+    } catch (error) {
+      handleError(error, 'Unable to delete user');
+      dispatch('user-delete-fail');
+    }
+  };
 </script>
 
 <ConfirmDialogue title="Delete User" confirmText="Delete" on:confirm={deleteUser} on:cancel>
-	<svelte:fragment slot="prompt">
-		<div class="flex flex-col gap-4">
-			<p>
-				<b>{user.firstName} {user.lastName}</b>'s account and assets will be permanently deleted
-				after 7 days.
-			</p>
-			<p>Are you sure you want to continue?</p>
-		</div>
-	</svelte:fragment>
+  <svelte:fragment slot="prompt">
+    <div class="flex flex-col gap-4">
+      <p>
+        <b>{user.firstName} {user.lastName}</b>'s account and assets will be permanently deleted after 7 days.
+      </p>
+      <p>Are you sure you want to continue?</p>
+    </div>
+  </svelte:fragment>
 </ConfirmDialogue>
diff --git a/web/src/lib/components/admin-page/jobs/job-tile-button.svelte b/web/src/lib/components/admin-page/jobs/job-tile-button.svelte
index 42be6c323..cf12b7c43 100644
--- a/web/src/lib/components/admin-page/jobs/job-tile-button.svelte
+++ b/web/src/lib/components/admin-page/jobs/job-tile-button.svelte
@@ -1,21 +1,21 @@
 <script lang="ts" context="module">
-	export type Colors = 'light-gray' | 'gray';
+  export type Colors = 'light-gray' | 'gray';
 </script>
 
 <script lang="ts">
-	export let color: Colors;
+  export let color: Colors;
 
-	const colorClasses: Record<Colors, string> = {
-		'light-gray': 'bg-gray-300/90 dark:bg-gray-600/90',
-		gray: 'bg-gray-300 dark:bg-gray-600'
-	};
+  const colorClasses: Record<Colors, string> = {
+    'light-gray': 'bg-gray-300/90 dark:bg-gray-600/90',
+    gray: 'bg-gray-300 dark:bg-gray-600',
+  };
 </script>
 
 <button
-	class="h-full w-full py-2 flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[
-		color
-	]}"
-	on:click
+  class="h-full w-full py-2 flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[
+    color
+  ]}"
+  on:click
 >
-	<slot />
+  <slot />
 </button>
diff --git a/web/src/lib/components/admin-page/jobs/job-tile-status.svelte b/web/src/lib/components/admin-page/jobs/job-tile-status.svelte
index 4f31ad6ff..67edd30f9 100644
--- a/web/src/lib/components/admin-page/jobs/job-tile-status.svelte
+++ b/web/src/lib/components/admin-page/jobs/job-tile-status.svelte
@@ -1,16 +1,16 @@
 <script lang="ts" context="module">
-	export type Color = 'success' | 'warning';
+  export type Color = 'success' | 'warning';
 </script>
 
 <script lang="ts">
-	export let color: Color;
+  export let color: Color;
 
-	const colorClasses: Record<Color, string> = {
-		success: 'bg-green-500/70 text-gray-900 dark:bg-green-700/90 dark:text-gray-100',
-		warning: 'bg-orange-400/70 text-gray-900 dark:bg-orange-900 dark:text-gray-100'
-	};
+  const colorClasses: Record<Color, string> = {
+    success: 'bg-green-500/70 text-gray-900 dark:bg-green-700/90 dark:text-gray-100',
+    warning: 'bg-orange-400/70 text-gray-900 dark:bg-orange-900 dark:text-gray-100',
+  };
 </script>
 
 <div class="w-full text-center text-sm p-2 {colorClasses[color]}">
-	<slot />
+  <slot />
 </div>
diff --git a/web/src/lib/components/admin-page/jobs/job-tile.svelte b/web/src/lib/components/admin-page/jobs/job-tile.svelte
index d0043765c..554415d30 100644
--- a/web/src/lib/components/admin-page/jobs/job-tile.svelte
+++ b/web/src/lib/components/admin-page/jobs/job-tile.svelte
@@ -1,149 +1,141 @@
 <script lang="ts">
-	import type Icon from 'svelte-material-icons/AbTesting.svelte';
-	import SelectionSearch from 'svelte-material-icons/SelectionSearch.svelte';
-	import Play from 'svelte-material-icons/Play.svelte';
-	import Pause from 'svelte-material-icons/Pause.svelte';
-	import FastForward from 'svelte-material-icons/FastForward.svelte';
-	import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
-	import Close from 'svelte-material-icons/Close.svelte';
-	import { locale } from '$lib/stores/preferences.store';
-	import { createEventDispatcher } from 'svelte';
-	import { JobCommand, JobCommandDto, JobCountsDto, QueueStatusDto } from '@api';
-	import Badge from '$lib/components/elements/badge.svelte';
-	import JobTileButton from './job-tile-button.svelte';
-	import JobTileStatus from './job-tile-status.svelte';
+  import type Icon from 'svelte-material-icons/AbTesting.svelte';
+  import SelectionSearch from 'svelte-material-icons/SelectionSearch.svelte';
+  import Play from 'svelte-material-icons/Play.svelte';
+  import Pause from 'svelte-material-icons/Pause.svelte';
+  import FastForward from 'svelte-material-icons/FastForward.svelte';
+  import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
+  import Close from 'svelte-material-icons/Close.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import { createEventDispatcher } from 'svelte';
+  import { JobCommand, JobCommandDto, JobCountsDto, QueueStatusDto } from '@api';
+  import Badge from '$lib/components/elements/badge.svelte';
+  import JobTileButton from './job-tile-button.svelte';
+  import JobTileStatus from './job-tile-status.svelte';
 
-	export let title: string;
-	export let subtitle: string | undefined = undefined;
-	export let jobCounts: JobCountsDto;
-	export let queueStatus: QueueStatusDto;
-	export let allowForceCommand = true;
-	export let icon: typeof Icon;
+  export let title: string;
+  export let subtitle: string | undefined = undefined;
+  export let jobCounts: JobCountsDto;
+  export let queueStatus: QueueStatusDto;
+  export let allowForceCommand = true;
+  export let icon: typeof Icon;
 
-	export let allText: string;
-	export let missingText: string;
+  export let allText: string;
+  export let missingText: string;
 
-	const slots = $$props.$$slots;
+  const slots = $$props.$$slots;
 
-	$: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
-	$: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
+  $: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
+  $: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
 
-	const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pr-4 pl-6';
+  const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pr-4 pl-6';
 
-	const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
+  const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
 </script>
 
 <div
-	class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-2xl sm:rounded-[35px] overflow-hidden"
+  class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-2xl sm:rounded-[35px] overflow-hidden"
 >
-	<div class="flex flex-col w-full">
-		{#if queueStatus.isPaused}
-			<JobTileStatus color="warning">Paused</JobTileStatus>
-		{:else if queueStatus.isActive}
-			<JobTileStatus color="success">Active</JobTileStatus>
-		{/if}
-		<div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
-			<div
-				class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary"
-			>
-				<span class="flex gap-2 items-center">
-					<svelte:component this={icon} size="1.25em" class="shrink-0 hidden sm:block" />
-					{title.toUpperCase()}
-				</span>
-				<div class="flex gap-2">
-					{#if jobCounts.failed > 0}
-						<Badge color="primary">
-							{jobCounts.failed.toLocaleString($locale)} failed
-						</Badge>
-					{/if}
-					{#if jobCounts.delayed > 0}
-						<Badge color="secondary">
-							{jobCounts.delayed.toLocaleString($locale)} delayed
-						</Badge>
-					{/if}
-				</div>
-			</div>
+  <div class="flex flex-col w-full">
+    {#if queueStatus.isPaused}
+      <JobTileStatus color="warning">Paused</JobTileStatus>
+    {:else if queueStatus.isActive}
+      <JobTileStatus color="success">Active</JobTileStatus>
+    {/if}
+    <div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
+      <div class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary">
+        <span class="flex gap-2 items-center">
+          <svelte:component this={icon} size="1.25em" class="shrink-0 hidden sm:block" />
+          {title.toUpperCase()}
+        </span>
+        <div class="flex gap-2">
+          {#if jobCounts.failed > 0}
+            <Badge color="primary">
+              {jobCounts.failed.toLocaleString($locale)} failed
+            </Badge>
+          {/if}
+          {#if jobCounts.delayed > 0}
+            <Badge color="secondary">
+              {jobCounts.delayed.toLocaleString($locale)} delayed
+            </Badge>
+          {/if}
+        </div>
+      </div>
 
-			{#if subtitle}
-				<div class="text-sm dark:text-white whitespace-pre-line">{subtitle}</div>
-			{/if}
+      {#if subtitle}
+        <div class="text-sm dark:text-white whitespace-pre-line">{subtitle}</div>
+      {/if}
 
-			{#if slots?.description}
-				<div class="text-sm dark:text-white">
-					<slot name="description" />
-				</div>
-			{/if}
+      {#if slots?.description}
+        <div class="text-sm dark:text-white">
+          <slot name="description" />
+        </div>
+      {/if}
 
-			<div class="flex w-full max-w-md mt-2 flex-col sm:flex-row">
-				<div
-					class="{commonClasses} bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray rounded-t-lg sm:rounded-l-lg sm:rounded-r-none"
-				>
-					<p>Active</p>
-					<p class="text-2xl">
-						{jobCounts.active.toLocaleString($locale)}
-					</p>
-				</div>
+      <div class="flex w-full max-w-md mt-2 flex-col sm:flex-row">
+        <div
+          class="{commonClasses} bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray rounded-t-lg sm:rounded-l-lg sm:rounded-r-none"
+        >
+          <p>Active</p>
+          <p class="text-2xl">
+            {jobCounts.active.toLocaleString($locale)}
+          </p>
+        </div>
 
-				<div
-					class="{commonClasses} bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray rounded-b-lg sm:rounded-r-lg sm:rounded-l-none flex-row-reverse"
-				>
-					<p class="text-2xl">
-						{waitingCount.toLocaleString($locale)}
-					</p>
-					<p>Waiting</p>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="flex sm:flex-col flex-row sm:w-32 w-full overflow-hidden">
-		{#if !isIdle}
-			{#if waitingCount > 0}
-				<JobTileButton
-					color="gray"
-					on:click={() => dispatch('command', { command: JobCommand.Empty, force: false })}
-				>
-					<Close size="24" /> CLEAR
-				</JobTileButton>
-			{/if}
-			{#if queueStatus.isPaused}
-				{@const size = waitingCount > 0 ? '24' : '48'}
-				<JobTileButton
-					color="light-gray"
-					on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
-				>
-					<!-- size property is not reactive, so have to use width and height -->
-					<FastForward width={size} height={size} /> RESUME
-				</JobTileButton>
-			{:else}
-				<JobTileButton
-					color="light-gray"
-					on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
-				>
-					<Pause size="24" /> PAUSE
-				</JobTileButton>
-			{/if}
-		{:else if allowForceCommand}
-			<JobTileButton
-				color="gray"
-				on:click={() => dispatch('command', { command: JobCommand.Start, force: true })}
-			>
-				<AllInclusive size="24" />
-				{allText}
-			</JobTileButton>
-			<JobTileButton
-				color="light-gray"
-				on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
-			>
-				<SelectionSearch size="24" />
-				{missingText}
-			</JobTileButton>
-		{:else}
-			<JobTileButton
-				color="light-gray"
-				on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
-			>
-				<Play size="48" /> START
-			</JobTileButton>
-		{/if}
-	</div>
+        <div
+          class="{commonClasses} bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray rounded-b-lg sm:rounded-r-lg sm:rounded-l-none flex-row-reverse"
+        >
+          <p class="text-2xl">
+            {waitingCount.toLocaleString($locale)}
+          </p>
+          <p>Waiting</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="flex sm:flex-col flex-row sm:w-32 w-full overflow-hidden">
+    {#if !isIdle}
+      {#if waitingCount > 0}
+        <JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Empty, force: false })}>
+          <Close size="24" /> CLEAR
+        </JobTileButton>
+      {/if}
+      {#if queueStatus.isPaused}
+        {@const size = waitingCount > 0 ? '24' : '48'}
+        <JobTileButton
+          color="light-gray"
+          on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
+        >
+          <!-- size property is not reactive, so have to use width and height -->
+          <FastForward width={size} height={size} /> RESUME
+        </JobTileButton>
+      {:else}
+        <JobTileButton
+          color="light-gray"
+          on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
+        >
+          <Pause size="24" /> PAUSE
+        </JobTileButton>
+      {/if}
+    {:else if allowForceCommand}
+      <JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Start, force: true })}>
+        <AllInclusive size="24" />
+        {allText}
+      </JobTileButton>
+      <JobTileButton
+        color="light-gray"
+        on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
+      >
+        <SelectionSearch size="24" />
+        {missingText}
+      </JobTileButton>
+    {:else}
+      <JobTileButton
+        color="light-gray"
+        on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
+      >
+        <Play size="48" /> START
+      </JobTileButton>
+    {/if}
+  </div>
 </div>
diff --git a/web/src/lib/components/admin-page/jobs/jobs-panel.svelte b/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
index fee23f173..55bc0cdf3 100644
--- a/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
+++ b/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
@@ -1,160 +1,159 @@
 <script lang="ts">
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import { AppRoute } from '$lib/constants';
-	import { handleError } from '$lib/utils/handle-error';
-	import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
-	import type { ComponentType } from 'svelte';
-	import type Icon from 'svelte-material-icons/DotsVertical.svelte';
-	import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
-	import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
-	import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
-	import FolderMove from 'svelte-material-icons/FolderMove.svelte';
-	import CogIcon from 'svelte-material-icons/Cog.svelte';
-	import Table from 'svelte-material-icons/Table.svelte';
-	import TagMultiple from 'svelte-material-icons/TagMultiple.svelte';
-	import VectorCircle from 'svelte-material-icons/VectorCircle.svelte';
-	import Video from 'svelte-material-icons/Video.svelte';
-	import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
-	import JobTile from './job-tile.svelte';
-	import StorageMigrationDescription from './storage-migration-description.svelte';
-	import Button from '../../elements/buttons/button.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { AppRoute } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
+  import type { ComponentType } from 'svelte';
+  import type Icon from 'svelte-material-icons/DotsVertical.svelte';
+  import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
+  import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
+  import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
+  import FolderMove from 'svelte-material-icons/FolderMove.svelte';
+  import CogIcon from 'svelte-material-icons/Cog.svelte';
+  import Table from 'svelte-material-icons/Table.svelte';
+  import TagMultiple from 'svelte-material-icons/TagMultiple.svelte';
+  import VectorCircle from 'svelte-material-icons/VectorCircle.svelte';
+  import Video from 'svelte-material-icons/Video.svelte';
+  import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
+  import JobTile from './job-tile.svelte';
+  import StorageMigrationDescription from './storage-migration-description.svelte';
+  import Button from '../../elements/buttons/button.svelte';
 
-	export let jobs: AllJobStatusResponseDto;
+  export let jobs: AllJobStatusResponseDto;
 
-	interface JobDetails {
-		title: string;
-		subtitle?: string;
-		allText?: string;
-		missingText?: string;
-		icon: typeof Icon;
-		allowForceCommand?: boolean;
-		component?: ComponentType;
-		handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
-	}
+  interface JobDetails {
+    title: string;
+    subtitle?: string;
+    allText?: string;
+    missingText?: string;
+    icon: typeof Icon;
+    allowForceCommand?: boolean;
+    component?: ComponentType;
+    handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
+  }
 
-	let faceConfirm = false;
+  let faceConfirm = false;
 
-	const handleFaceCommand = async (jobId: JobName, dto: JobCommandDto) => {
-		if (dto.force) {
-			faceConfirm = true;
-			return;
-		}
+  const handleFaceCommand = async (jobId: JobName, dto: JobCommandDto) => {
+    if (dto.force) {
+      faceConfirm = true;
+      return;
+    }
 
-		await handleCommand(jobId, dto);
-	};
+    await handleCommand(jobId, dto);
+  };
 
-	const onFaceConfirm = () => {
-		faceConfirm = false;
-		handleCommand(JobName.RecognizeFaces, { command: JobCommand.Start, force: true });
-	};
+  const onFaceConfirm = () => {
+    faceConfirm = false;
+    handleCommand(JobName.RecognizeFaces, { command: JobCommand.Start, force: true });
+  };
 
-	const jobDetails: Partial<Record<JobName, JobDetails>> = {
-		[JobName.ThumbnailGeneration]: {
-			icon: FileJpgBox,
-			title: api.getJobName(JobName.ThumbnailGeneration),
-			subtitle: 'Regenerate JPEG and WebP thumbnails'
-		},
-		[JobName.MetadataExtraction]: {
-			icon: Table,
-			title: api.getJobName(JobName.MetadataExtraction),
-			subtitle: 'Extract metadata information i.e. GPS, resolution...etc'
-		},
-		[JobName.Sidecar]: {
-			title: api.getJobName(JobName.Sidecar),
-			icon: FileXmlBox,
-			subtitle: 'Discover or synchronize sidecar metadata from the filesystem',
-			allText: 'SYNC',
-			missingText: 'DISCOVER'
-		},
-		[JobName.ObjectTagging]: {
-			icon: TagMultiple,
-			title: api.getJobName(JobName.ObjectTagging),
-			subtitle:
-				'Run machine learning to tag objects\nNote that some assets may not have any objects detected'
-		},
-		[JobName.ClipEncoding]: {
-			icon: VectorCircle,
-			title: api.getJobName(JobName.ClipEncoding),
-			subtitle: 'Run machine learning to generate clip embeddings'
-		},
-		[JobName.RecognizeFaces]: {
-			icon: FaceRecognition,
-			title: api.getJobName(JobName.RecognizeFaces),
-			subtitle: 'Run machine learning to recognize faces',
-			handleCommand: handleFaceCommand
-		},
-		[JobName.VideoConversion]: {
-			icon: Video,
-			title: api.getJobName(JobName.VideoConversion),
-			subtitle: 'Transcode videos not in the desired format'
-		},
-		[JobName.StorageTemplateMigration]: {
-			icon: FolderMove,
-			title: api.getJobName(JobName.StorageTemplateMigration),
-			allowForceCommand: false,
-			component: StorageMigrationDescription
-		}
-	};
+  const jobDetails: Partial<Record<JobName, JobDetails>> = {
+    [JobName.ThumbnailGeneration]: {
+      icon: FileJpgBox,
+      title: api.getJobName(JobName.ThumbnailGeneration),
+      subtitle: 'Regenerate JPEG and WebP thumbnails',
+    },
+    [JobName.MetadataExtraction]: {
+      icon: Table,
+      title: api.getJobName(JobName.MetadataExtraction),
+      subtitle: 'Extract metadata information i.e. GPS, resolution...etc',
+    },
+    [JobName.Sidecar]: {
+      title: api.getJobName(JobName.Sidecar),
+      icon: FileXmlBox,
+      subtitle: 'Discover or synchronize sidecar metadata from the filesystem',
+      allText: 'SYNC',
+      missingText: 'DISCOVER',
+    },
+    [JobName.ObjectTagging]: {
+      icon: TagMultiple,
+      title: api.getJobName(JobName.ObjectTagging),
+      subtitle: 'Run machine learning to tag objects\nNote that some assets may not have any objects detected',
+    },
+    [JobName.ClipEncoding]: {
+      icon: VectorCircle,
+      title: api.getJobName(JobName.ClipEncoding),
+      subtitle: 'Run machine learning to generate clip embeddings',
+    },
+    [JobName.RecognizeFaces]: {
+      icon: FaceRecognition,
+      title: api.getJobName(JobName.RecognizeFaces),
+      subtitle: 'Run machine learning to recognize faces',
+      handleCommand: handleFaceCommand,
+    },
+    [JobName.VideoConversion]: {
+      icon: Video,
+      title: api.getJobName(JobName.VideoConversion),
+      subtitle: 'Transcode videos not in the desired format',
+    },
+    [JobName.StorageTemplateMigration]: {
+      icon: FolderMove,
+      title: api.getJobName(JobName.StorageTemplateMigration),
+      allowForceCommand: false,
+      component: StorageMigrationDescription,
+    },
+  };
 
-	const jobDetailsArray = Object.entries(jobDetails) as [JobName, JobDetails][];
+  const jobDetailsArray = Object.entries(jobDetails) as [JobName, JobDetails][];
 
-	async function handleCommand(jobId: JobName, jobCommand: JobCommandDto) {
-		const title = jobDetails[jobId]?.title;
+  async function handleCommand(jobId: JobName, jobCommand: JobCommandDto) {
+    const title = jobDetails[jobId]?.title;
 
-		try {
-			const { data } = await api.jobApi.sendJobCommand({ id: jobId, jobCommandDto: jobCommand });
-			jobs[jobId] = data;
+    try {
+      const { data } = await api.jobApi.sendJobCommand({ id: jobId, jobCommandDto: jobCommand });
+      jobs[jobId] = data;
 
-			switch (jobCommand.command) {
-				case JobCommand.Empty:
-					notificationController.show({
-						message: `Cleared jobs for: ${title}`,
-						type: NotificationType.Info
-					});
-					break;
-			}
-		} catch (error) {
-			handleError(error, `Command '${jobCommand.command}' failed for job: ${title}`);
-		}
-	}
+      switch (jobCommand.command) {
+        case JobCommand.Empty:
+          notificationController.show({
+            message: `Cleared jobs for: ${title}`,
+            type: NotificationType.Info,
+          });
+          break;
+      }
+    } catch (error) {
+      handleError(error, `Command '${jobCommand.command}' failed for job: ${title}`);
+    }
+  }
 </script>
 
 {#if faceConfirm}
-	<ConfirmDialogue
-		prompt="Are you sure you want to reprocess all faces? This will also clear named people."
-		on:confirm={onFaceConfirm}
-		on:cancel={() => (faceConfirm = false)}
-	/>
+  <ConfirmDialogue
+    prompt="Are you sure you want to reprocess all faces? This will also clear named people."
+    on:confirm={onFaceConfirm}
+    on:cancel={() => (faceConfirm = false)}
+  />
 {/if}
 
 <div class="flex flex-col gap-7">
-	<div class="flex justify-end">
-		<a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
-			<Button size="sm">
-				<CogIcon size="18" />
-				<span class="pl-2">Manage Concurrency</span>
-			</Button>
-		</a>
-	</div>
-	{#each jobDetailsArray as [jobName, { title, subtitle, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
-		{@const { jobCounts, queueStatus } = jobs[jobName]}
-		<JobTile
-			{icon}
-			{title}
-			{subtitle}
-			allText={allText || 'ALL'}
-			missingText={missingText || 'MISSING'}
-			{allowForceCommand}
-			{jobCounts}
-			{queueStatus}
-			on:command={({ detail }) => (handleCommandOverride || handleCommand)(jobName, detail)}
-		>
-			{#if component}
-				<svelte:component this={component} slot="description" />
-			{/if}
-		</JobTile>
-	{/each}
+  <div class="flex justify-end">
+    <a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
+      <Button size="sm">
+        <CogIcon size="18" />
+        <span class="pl-2">Manage Concurrency</span>
+      </Button>
+    </a>
+  </div>
+  {#each jobDetailsArray as [jobName, { title, subtitle, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
+    {@const { jobCounts, queueStatus } = jobs[jobName]}
+    <JobTile
+      {icon}
+      {title}
+      {subtitle}
+      allText={allText || 'ALL'}
+      missingText={missingText || 'MISSING'}
+      {allowForceCommand}
+      {jobCounts}
+      {queueStatus}
+      on:command={({ detail }) => (handleCommandOverride || handleCommand)(jobName, detail)}
+    >
+      {#if component}
+        <svelte:component this={component} slot="description" />
+      {/if}
+    </JobTile>
+  {/each}
 </div>
diff --git a/web/src/lib/components/admin-page/jobs/storage-migration-description.svelte b/web/src/lib/components/admin-page/jobs/storage-migration-description.svelte
index d5cae7ccf..d84006595 100644
--- a/web/src/lib/components/admin-page/jobs/storage-migration-description.svelte
+++ b/web/src/lib/components/admin-page/jobs/storage-migration-description.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { AppRoute } from '$lib/constants';
+  import { AppRoute } from '$lib/constants';
 </script>
 
 Apply the current
-<a
-	href={`${AppRoute.ADMIN_SETTINGS}?open=storage-template`}
-	class="text-immich-primary dark:text-immich-dark-primary">Storage template</a
+<a href={`${AppRoute.ADMIN_SETTINGS}?open=storage-template`} class="text-immich-primary dark:text-immich-dark-primary"
+  >Storage template</a
 >
 to previously uploaded assets
diff --git a/web/src/lib/components/admin-page/restore-dialoge.svelte b/web/src/lib/components/admin-page/restore-dialoge.svelte
index d78006413..7ee68daef 100644
--- a/web/src/lib/components/admin-page/restore-dialoge.svelte
+++ b/web/src/lib/components/admin-page/restore-dialoge.svelte
@@ -1,27 +1,21 @@
 <script lang="ts">
-	import { api, UserResponseDto } from '@api';
-	import { createEventDispatcher } from 'svelte';
-	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import { api, UserResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
 
-	export let user: UserResponseDto;
+  export let user: UserResponseDto;
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	const restoreUser = async () => {
-		const restoredUser = await api.userApi.restoreUser({ userId: user.id });
-		if (restoredUser.data.deletedAt == null) dispatch('user-restore-success');
-		else dispatch('user-restore-fail');
-	};
+  const restoreUser = async () => {
+    const restoredUser = await api.userApi.restoreUser({ userId: user.id });
+    if (restoredUser.data.deletedAt == null) dispatch('user-restore-success');
+    else dispatch('user-restore-fail');
+  };
 </script>
 
-<ConfirmDialogue
-	title="Restore User"
-	confirmText="Continue"
-	confirmColor="green"
-	on:confirm={restoreUser}
-	on:cancel
->
-	<svelte:fragment slot="prompt">
-		<p><b>{user.firstName} {user.lastName}</b>'s account will be restored.</p>
-	</svelte:fragment>
+<ConfirmDialogue title="Restore User" confirmText="Continue" confirmColor="green" on:confirm={restoreUser} on:cancel>
+  <svelte:fragment slot="prompt">
+    <p><b>{user.firstName} {user.lastName}</b>'s account will be restored.</p>
+  </svelte:fragment>
 </ConfirmDialogue>
diff --git a/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte b/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte
index c1d26f115..9305f98d7 100644
--- a/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte
+++ b/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte
@@ -1,122 +1,109 @@
 <script lang="ts">
-	import { locale } from '$lib/stores/preferences.store';
-	import type { ServerStatsResponseDto } from '@api';
-	import CameraIris from 'svelte-material-icons/CameraIris.svelte';
-	import Memory from 'svelte-material-icons/Memory.svelte';
-	import PlayCircle from 'svelte-material-icons/PlayCircle.svelte';
-	import { asByteUnitString, getBytesWithUnit } from '../../../utils/byte-units';
-	import StatsCard from './stats-card.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import type { ServerStatsResponseDto } from '@api';
+  import CameraIris from 'svelte-material-icons/CameraIris.svelte';
+  import Memory from 'svelte-material-icons/Memory.svelte';
+  import PlayCircle from 'svelte-material-icons/PlayCircle.svelte';
+  import { asByteUnitString, getBytesWithUnit } from '../../../utils/byte-units';
+  import StatsCard from './stats-card.svelte';
 
-	export let stats: ServerStatsResponseDto = {
-		photos: 0,
-		videos: 0,
-		usage: 0,
-		usageByUser: []
-	};
+  export let stats: ServerStatsResponseDto = {
+    photos: 0,
+    videos: 0,
+    usage: 0,
+    usageByUser: [],
+  };
 
-	$: zeros = (value: number) => {
-		const maxLength = 13;
-		const valueLength = value.toString().length;
-		const zeroLength = maxLength - valueLength;
+  $: zeros = (value: number) => {
+    const maxLength = 13;
+    const valueLength = value.toString().length;
+    const zeroLength = maxLength - valueLength;
 
-		return '0'.repeat(zeroLength);
-	};
+    return '0'.repeat(zeroLength);
+  };
 
-	$: [statsUsage, statsUsageUnit] = getBytesWithUnit(stats.usage, 0);
+  $: [statsUsage, statsUsageUnit] = getBytesWithUnit(stats.usage, 0);
 </script>
 
 <div class="flex flex-col gap-5">
-	<div>
-		<p class="text-sm dark:text-immich-dark-fg">TOTAL USAGE</p>
+  <div>
+    <p class="text-sm dark:text-immich-dark-fg">TOTAL USAGE</p>
 
-		<div class="mt-5 justify-between lg:flex hidden">
-			<StatsCard logo={CameraIris} title="PHOTOS" value={stats.photos} />
-			<StatsCard logo={PlayCircle} title="VIDEOS" value={stats.videos} />
-			<StatsCard logo={Memory} title="STORAGE" value={statsUsage} unit={statsUsageUnit} />
-		</div>
-		<div class="mt-5 lg:hidden flex">
-			<div
-				class="bg-immich-gray dark:bg-immich-dark-gray rounded-3xl p-5 flex flex-col justify-between"
-			>
-				<div class="flex flex-wrap gap-x-12">
-					<div
-						class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
-					>
-						<CameraIris size="25" />
-						<p>PHOTOS</p>
-					</div>
+    <div class="mt-5 justify-between lg:flex hidden">
+      <StatsCard logo={CameraIris} title="PHOTOS" value={stats.photos} />
+      <StatsCard logo={PlayCircle} title="VIDEOS" value={stats.videos} />
+      <StatsCard logo={Memory} title="STORAGE" value={statsUsage} unit={statsUsageUnit} />
+    </div>
+    <div class="mt-5 lg:hidden flex">
+      <div class="bg-immich-gray dark:bg-immich-dark-gray rounded-3xl p-5 flex flex-col justify-between">
+        <div class="flex flex-wrap gap-x-12">
+          <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
+            <CameraIris size="25" />
+            <p>PHOTOS</p>
+          </div>
 
-					<div class="relative text-center font-mono font-semibold text-2xl">
-						<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span
-							class="text-immich-primary dark:text-immich-dark-primary">{stats.photos}</span
-						>
-					</div>
-				</div>
-				<div class="flex flex-wrap gap-x-12">
-					<div
-						class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
-					>
-						<PlayCircle size="25" />
-						<p>VIDEOS</p>
-					</div>
+          <div class="relative text-center font-mono font-semibold text-2xl">
+            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span
+              class="text-immich-primary dark:text-immich-dark-primary">{stats.photos}</span
+            >
+          </div>
+        </div>
+        <div class="flex flex-wrap gap-x-12">
+          <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
+            <PlayCircle size="25" />
+            <p>VIDEOS</p>
+          </div>
 
-					<div class="relative text-center font-mono font-semibold text-2xl">
-						<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span
-							class="text-immich-primary dark:text-immich-dark-primary">{stats.videos}</span
-						>
-					</div>
-				</div>
-				<div class="flex flex-wrap gap-x-7">
-					<div
-						class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
-					>
-						<Memory size="25" />
-						<p>STORAGE</p>
-					</div>
+          <div class="relative text-center font-mono font-semibold text-2xl">
+            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span
+              class="text-immich-primary dark:text-immich-dark-primary">{stats.videos}</span
+            >
+          </div>
+        </div>
+        <div class="flex flex-wrap gap-x-7">
+          <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
+            <Memory size="25" />
+            <p>STORAGE</p>
+          </div>
 
-					<div class="relative text-center font-mono font-semibold text-2xl flex">
-						<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span
-							class="text-immich-primary dark:text-immich-dark-primary">{statsUsage}</span
-						>
-						<span class="text-center my-auto ml-2 text-base font-light text-gray-400"
-							>{statsUsageUnit}</span
-						>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+          <div class="relative text-center font-mono font-semibold text-2xl flex">
+            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span
+              class="text-immich-primary dark:text-immich-dark-primary">{statsUsage}</span
+            >
+            <span class="text-center my-auto ml-2 text-base font-light text-gray-400">{statsUsageUnit}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
-	<div>
-		<p class="text-sm dark:text-immich-dark-fg">USER USAGE DETAIL</p>
-		<table class="text-left w-full mt-5">
-			<thead
-				class="border rounded-md mb-4 bg-gray-50 dark:bg-immich-dark-gray dark:border-immich-dark-gray flex text-immich-primary dark:text-immich-dark-primary w-full h-12"
-			>
-				<tr class="flex w-full place-items-center">
-					<th class="text-center w-1/4 font-medium text-sm">User</th>
-					<th class="text-center w-1/4 font-medium text-sm">Photos</th>
-					<th class="text-center w-1/4 font-medium text-sm">Videos</th>
-					<th class="text-center w-1/4 font-medium text-sm">Size</th>
-				</tr>
-			</thead>
-			<tbody
-				class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray dark:text-immich-dark-fg"
-			>
-				{#each stats.usageByUser as user (user.userId)}
-					<tr
-						class="text-center flex place-items-center w-full h-[50px] even:bg-immich-bg even:dark:bg-immich-dark-gray/50 odd:bg-immich-gray odd:dark:bg-immich-dark-gray/75"
-					>
-						<td class="text-sm px-2 w-1/4 text-ellipsis"
-							>{user.userFirstName} {user.userLastName}</td
-						>
-						<td class="text-sm px-2 w-1/4 text-ellipsis">{user.photos.toLocaleString($locale)}</td>
-						<td class="text-sm px-2 w-1/4 text-ellipsis">{user.videos.toLocaleString($locale)}</td>
-						<td class="text-sm px-2 w-1/4 text-ellipsis">{asByteUnitString(user.usage, $locale)}</td
-						>
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	</div>
+  <div>
+    <p class="text-sm dark:text-immich-dark-fg">USER USAGE DETAIL</p>
+    <table class="text-left w-full mt-5">
+      <thead
+        class="border rounded-md mb-4 bg-gray-50 dark:bg-immich-dark-gray dark:border-immich-dark-gray flex text-immich-primary dark:text-immich-dark-primary w-full h-12"
+      >
+        <tr class="flex w-full place-items-center">
+          <th class="text-center w-1/4 font-medium text-sm">User</th>
+          <th class="text-center w-1/4 font-medium text-sm">Photos</th>
+          <th class="text-center w-1/4 font-medium text-sm">Videos</th>
+          <th class="text-center w-1/4 font-medium text-sm">Size</th>
+        </tr>
+      </thead>
+      <tbody
+        class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray dark:text-immich-dark-fg"
+      >
+        {#each stats.usageByUser as user (user.userId)}
+          <tr
+            class="text-center flex place-items-center w-full h-[50px] even:bg-immich-bg even:dark:bg-immich-dark-gray/50 odd:bg-immich-gray odd:dark:bg-immich-dark-gray/75"
+          >
+            <td class="text-sm px-2 w-1/4 text-ellipsis">{user.userFirstName} {user.userLastName}</td>
+            <td class="text-sm px-2 w-1/4 text-ellipsis">{user.photos.toLocaleString($locale)}</td>
+            <td class="text-sm px-2 w-1/4 text-ellipsis">{user.videos.toLocaleString($locale)}</td>
+            <td class="text-sm px-2 w-1/4 text-ellipsis">{asByteUnitString(user.usage, $locale)}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
 </div>
diff --git a/web/src/lib/components/admin-page/server-stats/stats-card.svelte b/web/src/lib/components/admin-page/server-stats/stats-card.svelte
index 4a704a787..3579638ba 100644
--- a/web/src/lib/components/admin-page/server-stats/stats-card.svelte
+++ b/web/src/lib/components/admin-page/server-stats/stats-card.svelte
@@ -1,34 +1,32 @@
 <script lang="ts">
-	import type Icon from 'svelte-material-icons/AbTesting.svelte';
+  import type Icon from 'svelte-material-icons/AbTesting.svelte';
 
-	export let logo: typeof Icon;
-	export let title: string;
-	export let value: number;
-	export let unit: string | undefined = undefined;
+  export let logo: typeof Icon;
+  export let title: string;
+  export let value: number;
+  export let unit: string | undefined = undefined;
 
-	$: zeros = () => {
-		const maxLength = 13;
-		const valueLength = value.toString().length;
-		const zeroLength = maxLength - valueLength;
+  $: zeros = () => {
+    const maxLength = 13;
+    const valueLength = value.toString().length;
+    const zeroLength = maxLength - valueLength;
 
-		return '0'.repeat(zeroLength);
-	};
+    return '0'.repeat(zeroLength);
+  };
 </script>
 
-<div
-	class="w-[250px] h-[140px] bg-immich-gray dark:bg-immich-dark-gray rounded-3xl p-5 flex flex-col justify-between"
->
-	<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
-		<svelte:component this={logo} size="40" />
-		<p>{title}</p>
-	</div>
+<div class="w-[250px] h-[140px] bg-immich-gray dark:bg-immich-dark-gray rounded-3xl p-5 flex flex-col justify-between">
+  <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
+    <svelte:component this={logo} size="40" />
+    <p>{title}</p>
+  </div>
 
-	<div class="relative text-center font-mono font-semibold text-2xl">
-		<span class="text-[#DCDADA] dark:text-[#525252]">{zeros()}</span><span
-			class="text-immich-primary dark:text-immich-dark-primary">{value}</span
-		>
-		{#if unit}
-			<span class="absolute -top-5 right-2 text-base font-light text-gray-400">{unit}</span>
-		{/if}
-	</div>
+  <div class="relative text-center font-mono font-semibold text-2xl">
+    <span class="text-[#DCDADA] dark:text-[#525252]">{zeros()}</span><span
+      class="text-immich-primary dark:text-immich-dark-primary">{value}</span
+    >
+    {#if unit}
+      <span class="absolute -top-5 right-2 text-base font-light text-gray-400">{unit}</span>
+    {/if}
+  </div>
 </div>
diff --git a/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte b/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte
index 37f740d43..b0c3e650d 100644
--- a/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte
+++ b/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
 </script>
 
 <ConfirmDialogue title="Disable Login" on:cancel on:confirm>
-	<svelte:fragment slot="prompt">
-		<div class="flex flex-col gap-4">
-			<p>Are you sure you want to disable all login methods? Login will be completely disabled.</p>
-			<p>
-				To re-enable, use a
-				<a
-					href="https://immich.app/docs/administration/server-commands"
-					rel="noreferrer"
-					target="_blank"
-					class="underline"
-				>
-					Server Command</a
-				>.
-			</p>
-		</div>
-	</svelte:fragment>
+  <svelte:fragment slot="prompt">
+    <div class="flex flex-col gap-4">
+      <p>Are you sure you want to disable all login methods? Login will be completely disabled.</p>
+      <p>
+        To re-enable, use a
+        <a
+          href="https://immich.app/docs/administration/server-commands"
+          rel="noreferrer"
+          target="_blank"
+          class="underline"
+        >
+          Server Command</a
+        >.
+      </p>
+    </div>
+  </svelte:fragment>
 </ConfirmDialogue>
diff --git a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
index c78e6f72d..0b3d3b981 100644
--- a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
@@ -1,211 +1,211 @@
 <script lang="ts">
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import { api, SystemConfigFFmpegDto, SystemConfigFFmpegDtoTranscodeEnum } from '@api';
-	import SettingButtonsRow from '../setting-buttons-row.svelte';
-	import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
-	import SettingSelect from '../setting-select.svelte';
-	import SettingSwitch from '../setting-switch.svelte';
-	import { isEqual } from 'lodash-es';
-	import { fade } from 'svelte/transition';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { api, SystemConfigFFmpegDto, SystemConfigFFmpegDtoTranscodeEnum } from '@api';
+  import SettingButtonsRow from '../setting-buttons-row.svelte';
+  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import SettingSelect from '../setting-select.svelte';
+  import SettingSwitch from '../setting-switch.svelte';
+  import { isEqual } from 'lodash-es';
+  import { fade } from 'svelte/transition';
 
-	export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited
+  export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited
 
-	let savedConfig: SystemConfigFFmpegDto;
-	let defaultConfig: SystemConfigFFmpegDto;
+  let savedConfig: SystemConfigFFmpegDto;
+  let defaultConfig: SystemConfigFFmpegDto;
 
-	async function getConfigs() {
-		[savedConfig, defaultConfig] = await Promise.all([
-			api.systemConfigApi.getConfig().then((res) => res.data.ffmpeg),
-			api.systemConfigApi.getDefaults().then((res) => res.data.ffmpeg)
-		]);
-	}
+  async function getConfigs() {
+    [savedConfig, defaultConfig] = await Promise.all([
+      api.systemConfigApi.getConfig().then((res) => res.data.ffmpeg),
+      api.systemConfigApi.getDefaults().then((res) => res.data.ffmpeg),
+    ]);
+  }
 
-	async function saveSetting() {
-		try {
-			const { data: configs } = await api.systemConfigApi.getConfig();
+  async function saveSetting() {
+    try {
+      const { data: configs } = await api.systemConfigApi.getConfig();
 
-			const result = await api.systemConfigApi.updateConfig({
-				systemConfigDto: {
-					...configs,
-					ffmpeg: ffmpegConfig
-				}
-			});
+      const result = await api.systemConfigApi.updateConfig({
+        systemConfigDto: {
+          ...configs,
+          ffmpeg: ffmpegConfig,
+        },
+      });
 
-			ffmpegConfig = { ...result.data.ffmpeg };
-			savedConfig = { ...result.data.ffmpeg };
+      ffmpegConfig = { ...result.data.ffmpeg };
+      savedConfig = { ...result.data.ffmpeg };
 
-			notificationController.show({
-				message: 'FFmpeg settings saved',
-				type: NotificationType.Info
-			});
-		} catch (e) {
-			console.error('Error [ffmpeg-settings] [saveSetting]', e);
-			notificationController.show({
-				message: 'Unable to save settings',
-				type: NotificationType.Error
-			});
-		}
-	}
+      notificationController.show({
+        message: 'FFmpeg settings saved',
+        type: NotificationType.Info,
+      });
+    } catch (e) {
+      console.error('Error [ffmpeg-settings] [saveSetting]', e);
+      notificationController.show({
+        message: 'Unable to save settings',
+        type: NotificationType.Error,
+      });
+    }
+  }
 
-	async function reset() {
-		const { data: resetConfig } = await api.systemConfigApi.getConfig();
+  async function reset() {
+    const { data: resetConfig } = await api.systemConfigApi.getConfig();
 
-		ffmpegConfig = { ...resetConfig.ffmpeg };
-		savedConfig = { ...resetConfig.ffmpeg };
+    ffmpegConfig = { ...resetConfig.ffmpeg };
+    savedConfig = { ...resetConfig.ffmpeg };
 
-		notificationController.show({
-			message: 'Reset FFmpeg settings to the recent saved settings',
-			type: NotificationType.Info
-		});
-	}
+    notificationController.show({
+      message: 'Reset FFmpeg settings to the recent saved settings',
+      type: NotificationType.Info,
+    });
+  }
 
-	async function resetToDefault() {
-		const { data: configs } = await api.systemConfigApi.getDefaults();
+  async function resetToDefault() {
+    const { data: configs } = await api.systemConfigApi.getDefaults();
 
-		ffmpegConfig = { ...configs.ffmpeg };
-		defaultConfig = { ...configs.ffmpeg };
+    ffmpegConfig = { ...configs.ffmpeg };
+    defaultConfig = { ...configs.ffmpeg };
 
-		notificationController.show({
-			message: 'Reset FFmpeg settings to default',
-			type: NotificationType.Info
-		});
-	}
+    notificationController.show({
+      message: 'Reset FFmpeg settings to default',
+      type: NotificationType.Info,
+    });
+  }
 </script>
 
 <div>
-	{#await getConfigs() then}
-		<div in:fade={{ duration: 500 }}>
-			<form autocomplete="off" on:submit|preventDefault>
-				<div class="flex flex-col gap-4 ml-4 mt-4">
-					<SettingInputField
-						inputType={SettingInputFieldType.NUMBER}
-						label="CONSTANT RATE FACTOR (-crf)"
-						desc="Video quality level. Typical values are 23 for H.264, 28 for HEVC, and 31 for VP9. Lower is better, but takes longer to encode and produces larger files."
-						bind:value={ffmpegConfig.crf}
-						required={true}
-						isEdited={!(ffmpegConfig.crf == savedConfig.crf)}
-					/>
+  {#await getConfigs() then}
+    <div in:fade={{ duration: 500 }}>
+      <form autocomplete="off" on:submit|preventDefault>
+        <div class="flex flex-col gap-4 ml-4 mt-4">
+          <SettingInputField
+            inputType={SettingInputFieldType.NUMBER}
+            label="CONSTANT RATE FACTOR (-crf)"
+            desc="Video quality level. Typical values are 23 for H.264, 28 for HEVC, and 31 for VP9. Lower is better, but takes longer to encode and produces larger files."
+            bind:value={ffmpegConfig.crf}
+            required={true}
+            isEdited={!(ffmpegConfig.crf == savedConfig.crf)}
+          />
 
-					<SettingSelect
-						label="PRESET (-preset)"
-						desc="Compression speed. Slower presets produce smaller files, and increase quality when targeting a certain bitrate. VP9 ignores speeds above `faster`."
-						bind:value={ffmpegConfig.preset}
-						name="preset"
-						options={[
-							{ value: 'ultrafast', text: 'ultrafast' },
-							{ value: 'superfast', text: 'superfast' },
-							{ value: 'veryfast', text: 'veryfast' },
-							{ value: 'faster', text: 'faster' },
-							{ value: 'fast', text: 'fast' },
-							{ value: 'medium', text: 'medium' },
-							{ value: 'slow', text: 'slow' },
-							{ value: 'slower', text: 'slower' },
-							{ value: 'veryslow', text: 'veryslow' }
-						]}
-						isEdited={!(ffmpegConfig.preset == savedConfig.preset)}
-					/>
+          <SettingSelect
+            label="PRESET (-preset)"
+            desc="Compression speed. Slower presets produce smaller files, and increase quality when targeting a certain bitrate. VP9 ignores speeds above `faster`."
+            bind:value={ffmpegConfig.preset}
+            name="preset"
+            options={[
+              { value: 'ultrafast', text: 'ultrafast' },
+              { value: 'superfast', text: 'superfast' },
+              { value: 'veryfast', text: 'veryfast' },
+              { value: 'faster', text: 'faster' },
+              { value: 'fast', text: 'fast' },
+              { value: 'medium', text: 'medium' },
+              { value: 'slow', text: 'slow' },
+              { value: 'slower', text: 'slower' },
+              { value: 'veryslow', text: 'veryslow' },
+            ]}
+            isEdited={!(ffmpegConfig.preset == savedConfig.preset)}
+          />
 
-					<SettingSelect
-						label="AUDIO CODEC"
-						desc="Opus is the highest quality option, but has lower compatibility with old devices or software."
-						bind:value={ffmpegConfig.targetAudioCodec}
-						options={[
-							{ value: 'aac', text: 'aac' },
-							{ value: 'mp3', text: 'mp3' },
-							{ value: 'opus', text: 'opus' }
-						]}
-						name="acodec"
-						isEdited={!(ffmpegConfig.targetAudioCodec == savedConfig.targetAudioCodec)}
-					/>
+          <SettingSelect
+            label="AUDIO CODEC"
+            desc="Opus is the highest quality option, but has lower compatibility with old devices or software."
+            bind:value={ffmpegConfig.targetAudioCodec}
+            options={[
+              { value: 'aac', text: 'aac' },
+              { value: 'mp3', text: 'mp3' },
+              { value: 'opus', text: 'opus' },
+            ]}
+            name="acodec"
+            isEdited={!(ffmpegConfig.targetAudioCodec == savedConfig.targetAudioCodec)}
+          />
 
-					<SettingSelect
-						label="VIDEO CODEC"
-						desc="VP9 has high efficiency and web compatibility, but takes longer to transcode. HEVC performs similarly, but has lower web compatibility. H.264 is widely compatible and quick to transcode, but produces much larger files."
-						bind:value={ffmpegConfig.targetVideoCodec}
-						options={[
-							{ value: 'h264', text: 'h264' },
-							{ value: 'hevc', text: 'hevc' },
-							{ value: 'vp9', text: 'vp9' }
-						]}
-						name="vcodec"
-						isEdited={!(ffmpegConfig.targetVideoCodec == savedConfig.targetVideoCodec)}
-					/>
+          <SettingSelect
+            label="VIDEO CODEC"
+            desc="VP9 has high efficiency and web compatibility, but takes longer to transcode. HEVC performs similarly, but has lower web compatibility. H.264 is widely compatible and quick to transcode, but produces much larger files."
+            bind:value={ffmpegConfig.targetVideoCodec}
+            options={[
+              { value: 'h264', text: 'h264' },
+              { value: 'hevc', text: 'hevc' },
+              { value: 'vp9', text: 'vp9' },
+            ]}
+            name="vcodec"
+            isEdited={!(ffmpegConfig.targetVideoCodec == savedConfig.targetVideoCodec)}
+          />
 
-					<SettingSelect
-						label="TARGET RESOLUTION"
-						desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness."
-						bind:value={ffmpegConfig.targetResolution}
-						options={[
-							{ value: '2160', text: '4k' },
-							{ value: '1440', text: '1440p' },
-							{ value: '1080', text: '1080p' },
-							{ value: '720', text: '720p' },
-							{ value: '480', text: '480p' },
-							{ value: 'original', text: 'original' }
-						]}
-						name="resolution"
-						isEdited={!(ffmpegConfig.targetResolution == savedConfig.targetResolution)}
-					/>
+          <SettingSelect
+            label="TARGET RESOLUTION"
+            desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness."
+            bind:value={ffmpegConfig.targetResolution}
+            options={[
+              { value: '2160', text: '4k' },
+              { value: '1440', text: '1440p' },
+              { value: '1080', text: '1080p' },
+              { value: '720', text: '720p' },
+              { value: '480', text: '480p' },
+              { value: 'original', text: 'original' },
+            ]}
+            name="resolution"
+            isEdited={!(ffmpegConfig.targetResolution == savedConfig.targetResolution)}
+          />
 
-					<SettingInputField
-						inputType={SettingInputFieldType.TEXT}
-						label="MAX BITRATE"
-						desc="Setting a max bitrate can make file sizes more predictable at a minor cost to quality. At 720p, typical values are 2600k for VP9 or HEVC, or 4500k for H.264. Disabled if set to 0."
-						bind:value={ffmpegConfig.maxBitrate}
-						isEdited={!(ffmpegConfig.maxBitrate == savedConfig.maxBitrate)}
-					/>
+          <SettingInputField
+            inputType={SettingInputFieldType.TEXT}
+            label="MAX BITRATE"
+            desc="Setting a max bitrate can make file sizes more predictable at a minor cost to quality. At 720p, typical values are 2600k for VP9 or HEVC, or 4500k for H.264. Disabled if set to 0."
+            bind:value={ffmpegConfig.maxBitrate}
+            isEdited={!(ffmpegConfig.maxBitrate == savedConfig.maxBitrate)}
+          />
 
-					<SettingInputField
-						inputType={SettingInputFieldType.NUMBER}
-						label="THREADS"
-						desc="Higher values lead to faster encoding, but leave less room for the server to process other tasks while active. This value should not be more than the number of CPU cores. Maximizes utilization if set to 0."
-						bind:value={ffmpegConfig.threads}
-						isEdited={!(ffmpegConfig.threads == savedConfig.threads)}
-					/>
+          <SettingInputField
+            inputType={SettingInputFieldType.NUMBER}
+            label="THREADS"
+            desc="Higher values lead to faster encoding, but leave less room for the server to process other tasks while active. This value should not be more than the number of CPU cores. Maximizes utilization if set to 0."
+            bind:value={ffmpegConfig.threads}
+            isEdited={!(ffmpegConfig.threads == savedConfig.threads)}
+          />
 
-					<SettingSelect
-						label="TRANSCODE"
-						desc="Policy for when a video should be transcoded."
-						bind:value={ffmpegConfig.transcode}
-						name="transcode"
-						options={[
-							{ value: SystemConfigFFmpegDtoTranscodeEnum.All, text: 'All videos' },
-							{
-								value: SystemConfigFFmpegDtoTranscodeEnum.Optimal,
-								text: 'Videos higher than target resolution or not in the desired format'
-							},
-							{
-								value: SystemConfigFFmpegDtoTranscodeEnum.Required,
-								text: 'Only videos not in the desired format'
-							},
-							{
-								value: SystemConfigFFmpegDtoTranscodeEnum.Disabled,
-								text: "Don't transcode any videos, may break playback on some clients"
-							}
-						]}
-						isEdited={!(ffmpegConfig.transcode == savedConfig.transcode)}
-					/>
+          <SettingSelect
+            label="TRANSCODE"
+            desc="Policy for when a video should be transcoded."
+            bind:value={ffmpegConfig.transcode}
+            name="transcode"
+            options={[
+              { value: SystemConfigFFmpegDtoTranscodeEnum.All, text: 'All videos' },
+              {
+                value: SystemConfigFFmpegDtoTranscodeEnum.Optimal,
+                text: 'Videos higher than target resolution or not in the desired format',
+              },
+              {
+                value: SystemConfigFFmpegDtoTranscodeEnum.Required,
+                text: 'Only videos not in the desired format',
+              },
+              {
+                value: SystemConfigFFmpegDtoTranscodeEnum.Disabled,
+                text: "Don't transcode any videos, may break playback on some clients",
+              },
+            ]}
+            isEdited={!(ffmpegConfig.transcode == savedConfig.transcode)}
+          />
 
-					<SettingSwitch
-						title="TWO-PASS ENCODING"
-						subtitle="Transcode in two passes to produce better encoded videos. When max bitrate is enabled (required for it to work with H.264 and HEVC), this mode uses a bitrate range based on the max bitrate and ignores CRF. For VP9, CRF can be used if max bitrate is disabled."
-						bind:checked={ffmpegConfig.twoPass}
-						isEdited={!(ffmpegConfig.twoPass === savedConfig.twoPass)}
-					/>
-				</div>
+          <SettingSwitch
+            title="TWO-PASS ENCODING"
+            subtitle="Transcode in two passes to produce better encoded videos. When max bitrate is enabled (required for it to work with H.264 and HEVC), this mode uses a bitrate range based on the max bitrate and ignores CRF. For VP9, CRF can be used if max bitrate is disabled."
+            bind:checked={ffmpegConfig.twoPass}
+            isEdited={!(ffmpegConfig.twoPass === savedConfig.twoPass)}
+          />
+        </div>
 
-				<div class="ml-4">
-					<SettingButtonsRow
-						on:reset={reset}
-						on:save={saveSetting}
-						on:reset-to-default={resetToDefault}
-						showResetToDefault={!isEqual(savedConfig, defaultConfig)}
-					/>
-				</div>
-			</form>
-		</div>
-	{/await}
+        <div class="ml-4">
+          <SettingButtonsRow
+            on:reset={reset}
+            on:save={saveSetting}
+            on:reset-to-default={resetToDefault}
+            showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+          />
+        </div>
+      </form>
+    </div>
+  {/await}
 </div>
diff --git a/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte b/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
index 2c98af296..37fc0a619 100644
--- a/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
@@ -1,103 +1,101 @@
 <script lang="ts">
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import { api, JobName, SystemConfigJobDto } from '@api';
-	import { isEqual } from 'lodash-es';
-	import { fade } from 'svelte/transition';
-	import { handleError } from '../../../../utils/handle-error';
-	import SettingButtonsRow from '../setting-buttons-row.svelte';
-	import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { api, JobName, SystemConfigJobDto } from '@api';
+  import { isEqual } from 'lodash-es';
+  import { fade } from 'svelte/transition';
+  import { handleError } from '../../../../utils/handle-error';
+  import SettingButtonsRow from '../setting-buttons-row.svelte';
+  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
 
-	export let jobConfig: SystemConfigJobDto; // this is the config that is being edited
+  export let jobConfig: SystemConfigJobDto; // this is the config that is being edited
 
-	let savedConfig: SystemConfigJobDto;
-	let defaultConfig: SystemConfigJobDto;
+  let savedConfig: SystemConfigJobDto;
+  let defaultConfig: SystemConfigJobDto;
 
-	const ignoredJobs = [JobName.BackgroundTask, JobName.Search] as JobName[];
-	const jobNames = Object.values(JobName).filter(
-		(jobName) => !ignoredJobs.includes(jobName as JobName)
-	);
+  const ignoredJobs = [JobName.BackgroundTask, JobName.Search] as JobName[];
+  const jobNames = Object.values(JobName).filter((jobName) => !ignoredJobs.includes(jobName as JobName));
 
-	async function getConfigs() {
-		[savedConfig, defaultConfig] = await Promise.all([
-			api.systemConfigApi.getConfig().then((res) => res.data.job),
-			api.systemConfigApi.getDefaults().then((res) => res.data.job)
-		]);
-	}
+  async function getConfigs() {
+    [savedConfig, defaultConfig] = await Promise.all([
+      api.systemConfigApi.getConfig().then((res) => res.data.job),
+      api.systemConfigApi.getDefaults().then((res) => res.data.job),
+    ]);
+  }
 
-	async function saveSetting() {
-		try {
-			const { data: configs } = await api.systemConfigApi.getConfig();
+  async function saveSetting() {
+    try {
+      const { data: configs } = await api.systemConfigApi.getConfig();
 
-			const result = await api.systemConfigApi.updateConfig({
-				systemConfigDto: {
-					...configs,
-					job: jobConfig
-				}
-			});
+      const result = await api.systemConfigApi.updateConfig({
+        systemConfigDto: {
+          ...configs,
+          job: jobConfig,
+        },
+      });
 
-			jobConfig = { ...result.data.job };
-			savedConfig = { ...result.data.job };
+      jobConfig = { ...result.data.job };
+      savedConfig = { ...result.data.job };
 
-			notificationController.show({ message: 'Job settings saved', type: NotificationType.Info });
-		} catch (error) {
-			handleError(error, 'Unable to save settings');
-		}
-	}
+      notificationController.show({ message: 'Job settings saved', type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, 'Unable to save settings');
+    }
+  }
 
-	async function reset() {
-		const { data: resetConfig } = await api.systemConfigApi.getConfig();
+  async function reset() {
+    const { data: resetConfig } = await api.systemConfigApi.getConfig();
 
-		jobConfig = { ...resetConfig.job };
-		savedConfig = { ...resetConfig.job };
+    jobConfig = { ...resetConfig.job };
+    savedConfig = { ...resetConfig.job };
 
-		notificationController.show({
-			message: 'Reset Job settings to the recent saved settings',
-			type: NotificationType.Info
-		});
-	}
+    notificationController.show({
+      message: 'Reset Job settings to the recent saved settings',
+      type: NotificationType.Info,
+    });
+  }
 
-	async function resetToDefault() {
-		const { data: configs } = await api.systemConfigApi.getDefaults();
+  async function resetToDefault() {
+    const { data: configs } = await api.systemConfigApi.getDefaults();
 
-		jobConfig = { ...configs.job };
-		defaultConfig = { ...configs.job };
+    jobConfig = { ...configs.job };
+    defaultConfig = { ...configs.job };
 
-		notificationController.show({
-			message: 'Reset Job settings to default',
-			type: NotificationType.Info
-		});
-	}
+    notificationController.show({
+      message: 'Reset Job settings to default',
+      type: NotificationType.Info,
+    });
+  }
 </script>
 
 <div>
-	{#await getConfigs() then}
-		<div in:fade={{ duration: 500 }}>
-			<form autocomplete="off" on:submit|preventDefault>
-				{#each jobNames as jobName}
-					<div class="flex flex-col gap-4 ml-4 mt-4">
-						<SettingInputField
-							inputType={SettingInputFieldType.NUMBER}
-							label="{api.getJobName(jobName)} Concurrency"
-							desc=""
-							bind:value={jobConfig[jobName].concurrency}
-							required={true}
-							isEdited={!(jobConfig[jobName].concurrency == savedConfig[jobName].concurrency)}
-						/>
-					</div>
-				{/each}
+  {#await getConfigs() then}
+    <div in:fade={{ duration: 500 }}>
+      <form autocomplete="off" on:submit|preventDefault>
+        {#each jobNames as jobName}
+          <div class="flex flex-col gap-4 ml-4 mt-4">
+            <SettingInputField
+              inputType={SettingInputFieldType.NUMBER}
+              label="{api.getJobName(jobName)} Concurrency"
+              desc=""
+              bind:value={jobConfig[jobName].concurrency}
+              required={true}
+              isEdited={!(jobConfig[jobName].concurrency == savedConfig[jobName].concurrency)}
+            />
+          </div>
+        {/each}
 
-				<div class="ml-4">
-					<SettingButtonsRow
-						on:reset={reset}
-						on:save={saveSetting}
-						on:reset-to-default={resetToDefault}
-						showResetToDefault={!isEqual(savedConfig, defaultConfig)}
-					/>
-				</div>
-			</form>
-		</div>
-	{/await}
+        <div class="ml-4">
+          <SettingButtonsRow
+            on:reset={reset}
+            on:save={saveSetting}
+            on:reset-to-default={resetToDefault}
+            showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+          />
+        </div>
+      </form>
+    </div>
+  {/await}
 </div>
diff --git a/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte b/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte
index 644135894..ffee598f8 100644
--- a/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte
@@ -1,212 +1,209 @@
 <script lang="ts">
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import { handleError } from '$lib/utils/handle-error';
-	import { api, SystemConfigOAuthDto } from '@api';
-	import { isEqual } from 'lodash-es';
-	import { fade } from 'svelte/transition';
-	import ConfirmDisableLogin from '../confirm-disable-login.svelte';
-	import SettingButtonsRow from '../setting-buttons-row.svelte';
-	import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
-	import SettingSwitch from '../setting-switch.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api, SystemConfigOAuthDto } from '@api';
+  import { isEqual } from 'lodash-es';
+  import { fade } from 'svelte/transition';
+  import ConfirmDisableLogin from '../confirm-disable-login.svelte';
+  import SettingButtonsRow from '../setting-buttons-row.svelte';
+  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import SettingSwitch from '../setting-switch.svelte';
 
-	export let oauthConfig: SystemConfigOAuthDto;
+  export let oauthConfig: SystemConfigOAuthDto;
 
-	let savedConfig: SystemConfigOAuthDto;
-	let defaultConfig: SystemConfigOAuthDto;
+  let savedConfig: SystemConfigOAuthDto;
+  let defaultConfig: SystemConfigOAuthDto;
 
-	const handleToggleOverride = () => {
-		// click runs before bind
-		const previouslyEnabled = oauthConfig.mobileOverrideEnabled;
-		if (!previouslyEnabled && !oauthConfig.mobileRedirectUri) {
-			oauthConfig.mobileRedirectUri = window.location.origin + '/api/oauth/mobile-redirect';
-		}
-	};
+  const handleToggleOverride = () => {
+    // click runs before bind
+    const previouslyEnabled = oauthConfig.mobileOverrideEnabled;
+    if (!previouslyEnabled && !oauthConfig.mobileRedirectUri) {
+      oauthConfig.mobileRedirectUri = window.location.origin + '/api/oauth/mobile-redirect';
+    }
+  };
 
-	async function getConfigs() {
-		[savedConfig, defaultConfig] = await Promise.all([
-			api.systemConfigApi.getConfig().then((res) => res.data.oauth),
-			api.systemConfigApi.getDefaults().then((res) => res.data.oauth)
-		]);
-	}
+  async function getConfigs() {
+    [savedConfig, defaultConfig] = await Promise.all([
+      api.systemConfigApi.getConfig().then((res) => res.data.oauth),
+      api.systemConfigApi.getDefaults().then((res) => res.data.oauth),
+    ]);
+  }
 
-	async function reset() {
-		const { data: resetConfig } = await api.systemConfigApi.getConfig();
+  async function reset() {
+    const { data: resetConfig } = await api.systemConfigApi.getConfig();
 
-		oauthConfig = { ...resetConfig.oauth };
-		savedConfig = { ...resetConfig.oauth };
+    oauthConfig = { ...resetConfig.oauth };
+    savedConfig = { ...resetConfig.oauth };
 
-		notificationController.show({
-			message: 'Reset OAuth settings to the last saved settings',
-			type: NotificationType.Info
-		});
-	}
+    notificationController.show({
+      message: 'Reset OAuth settings to the last saved settings',
+      type: NotificationType.Info,
+    });
+  }
 
-	let isConfirmOpen = false;
-	let handleConfirm: (value: boolean) => void;
+  let isConfirmOpen = false;
+  let handleConfirm: (value: boolean) => void;
 
-	const openConfirmModal = () => {
-		return new Promise((resolve) => {
-			handleConfirm = (value: boolean) => {
-				isConfirmOpen = false;
-				resolve(value);
-			};
-			isConfirmOpen = true;
-		});
-	};
+  const openConfirmModal = () => {
+    return new Promise((resolve) => {
+      handleConfirm = (value: boolean) => {
+        isConfirmOpen = false;
+        resolve(value);
+      };
+      isConfirmOpen = true;
+    });
+  };
 
-	async function saveSetting() {
-		try {
-			const { data: current } = await api.systemConfigApi.getConfig();
+  async function saveSetting() {
+    try {
+      const { data: current } = await api.systemConfigApi.getConfig();
 
-			if (!current.passwordLogin.enabled && current.oauth.enabled && !oauthConfig.enabled) {
-				const confirmed = await openConfirmModal();
-				if (!confirmed) {
-					return;
-				}
-			}
+      if (!current.passwordLogin.enabled && current.oauth.enabled && !oauthConfig.enabled) {
+        const confirmed = await openConfirmModal();
+        if (!confirmed) {
+          return;
+        }
+      }
 
-			if (!oauthConfig.mobileOverrideEnabled) {
-				oauthConfig.mobileRedirectUri = '';
-			}
+      if (!oauthConfig.mobileOverrideEnabled) {
+        oauthConfig.mobileRedirectUri = '';
+      }
 
-			const { data: updated } = await api.systemConfigApi.updateConfig({
-				systemConfigDto: {
-					...current,
-					oauth: oauthConfig
-				}
-			});
+      const { data: updated } = await api.systemConfigApi.updateConfig({
+        systemConfigDto: {
+          ...current,
+          oauth: oauthConfig,
+        },
+      });
 
-			oauthConfig = { ...updated.oauth };
-			savedConfig = { ...updated.oauth };
+      oauthConfig = { ...updated.oauth };
+      savedConfig = { ...updated.oauth };
 
-			notificationController.show({ message: 'OAuth settings saved', type: NotificationType.Info });
-		} catch (error) {
-			handleError(error, 'Unable to save OAuth settings');
-		}
-	}
+      notificationController.show({ message: 'OAuth settings saved', type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, 'Unable to save OAuth settings');
+    }
+  }
 
-	async function resetToDefault() {
-		const { data: defaultConfig } = await api.systemConfigApi.getDefaults();
+  async function resetToDefault() {
+    const { data: defaultConfig } = await api.systemConfigApi.getDefaults();
 
-		oauthConfig = { ...defaultConfig.oauth };
+    oauthConfig = { ...defaultConfig.oauth };
 
-		notificationController.show({
-			message: 'Reset OAuth settings to default',
-			type: NotificationType.Info
-		});
-	}
+    notificationController.show({
+      message: 'Reset OAuth settings to default',
+      type: NotificationType.Info,
+    });
+  }
 </script>
 
 {#if isConfirmOpen}
-	<ConfirmDisableLogin
-		on:cancel={() => handleConfirm(false)}
-		on:confirm={() => handleConfirm(true)}
-	/>
+  <ConfirmDisableLogin on:cancel={() => handleConfirm(false)} on:confirm={() => handleConfirm(true)} />
 {/if}
 
 <div class="mt-2">
-	{#await getConfigs() then}
-		<div in:fade={{ duration: 500 }}>
-			<form autocomplete="off" on:submit|preventDefault class="flex flex-col mx-4 gap-4 py-4">
-				<p class="text-sm dark:text-immich-dark-fg">
-					For more details about this feature, refer to the <a
-						href="http://immich.app/docs/administration/oauth#mobile-redirect-uri"
-						class="underline"
-						target="_blank"
-						rel="noreferrer">docs</a
-					>.
-				</p>
+  {#await getConfigs() then}
+    <div in:fade={{ duration: 500 }}>
+      <form autocomplete="off" on:submit|preventDefault class="flex flex-col mx-4 gap-4 py-4">
+        <p class="text-sm dark:text-immich-dark-fg">
+          For more details about this feature, refer to the <a
+            href="http://immich.app/docs/administration/oauth#mobile-redirect-uri"
+            class="underline"
+            target="_blank"
+            rel="noreferrer">docs</a
+          >.
+        </p>
 
-				<SettingSwitch title="ENABLE" bind:checked={oauthConfig.enabled} />
-				<hr />
-				<SettingInputField
-					inputType={SettingInputFieldType.TEXT}
-					label="ISSUER URL"
-					bind:value={oauthConfig.issuerUrl}
-					required={true}
-					disabled={!oauthConfig.enabled}
-					isEdited={!(oauthConfig.issuerUrl == savedConfig.issuerUrl)}
-				/>
+        <SettingSwitch title="ENABLE" bind:checked={oauthConfig.enabled} />
+        <hr />
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label="ISSUER URL"
+          bind:value={oauthConfig.issuerUrl}
+          required={true}
+          disabled={!oauthConfig.enabled}
+          isEdited={!(oauthConfig.issuerUrl == savedConfig.issuerUrl)}
+        />
 
-				<SettingInputField
-					inputType={SettingInputFieldType.TEXT}
-					label="CLIENT ID"
-					bind:value={oauthConfig.clientId}
-					required={true}
-					disabled={!oauthConfig.enabled}
-					isEdited={!(oauthConfig.clientId == savedConfig.clientId)}
-				/>
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label="CLIENT ID"
+          bind:value={oauthConfig.clientId}
+          required={true}
+          disabled={!oauthConfig.enabled}
+          isEdited={!(oauthConfig.clientId == savedConfig.clientId)}
+        />
 
-				<SettingInputField
-					inputType={SettingInputFieldType.TEXT}
-					label="CLIENT SECRET"
-					bind:value={oauthConfig.clientSecret}
-					required={true}
-					disabled={!oauthConfig.enabled}
-					isEdited={!(oauthConfig.clientSecret == savedConfig.clientSecret)}
-				/>
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label="CLIENT SECRET"
+          bind:value={oauthConfig.clientSecret}
+          required={true}
+          disabled={!oauthConfig.enabled}
+          isEdited={!(oauthConfig.clientSecret == savedConfig.clientSecret)}
+        />
 
-				<SettingInputField
-					inputType={SettingInputFieldType.TEXT}
-					label="SCOPE"
-					bind:value={oauthConfig.scope}
-					required={true}
-					disabled={!oauthConfig.enabled}
-					isEdited={!(oauthConfig.scope == savedConfig.scope)}
-				/>
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label="SCOPE"
+          bind:value={oauthConfig.scope}
+          required={true}
+          disabled={!oauthConfig.enabled}
+          isEdited={!(oauthConfig.scope == savedConfig.scope)}
+        />
 
-				<SettingInputField
-					inputType={SettingInputFieldType.TEXT}
-					label="BUTTON TEXT"
-					bind:value={oauthConfig.buttonText}
-					required={false}
-					disabled={!oauthConfig.enabled}
-					isEdited={!(oauthConfig.buttonText == savedConfig.buttonText)}
-				/>
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label="BUTTON TEXT"
+          bind:value={oauthConfig.buttonText}
+          required={false}
+          disabled={!oauthConfig.enabled}
+          isEdited={!(oauthConfig.buttonText == savedConfig.buttonText)}
+        />
 
-				<SettingSwitch
-					title="AUTO REGISTER"
-					subtitle="Automatically register new users after signing in with OAuth"
-					bind:checked={oauthConfig.autoRegister}
-					disabled={!oauthConfig.enabled}
-				/>
+        <SettingSwitch
+          title="AUTO REGISTER"
+          subtitle="Automatically register new users after signing in with OAuth"
+          bind:checked={oauthConfig.autoRegister}
+          disabled={!oauthConfig.enabled}
+        />
 
-				<SettingSwitch
-					title="AUTO LAUNCH"
-					subtitle="Start the OAuth login flow automatically upon navigating to the login page"
-					disabled={!oauthConfig.enabled}
-					bind:checked={oauthConfig.autoLaunch}
-				/>
+        <SettingSwitch
+          title="AUTO LAUNCH"
+          subtitle="Start the OAuth login flow automatically upon navigating to the login page"
+          disabled={!oauthConfig.enabled}
+          bind:checked={oauthConfig.autoLaunch}
+        />
 
-				<SettingSwitch
-					title="MOBILE REDIRECT URI OVERRIDE"
-					subtitle="Enable when `app.immich:/` is an invalid redirect URI."
-					disabled={!oauthConfig.enabled}
-					on:click={() => handleToggleOverride()}
-					bind:checked={oauthConfig.mobileOverrideEnabled}
-				/>
+        <SettingSwitch
+          title="MOBILE REDIRECT URI OVERRIDE"
+          subtitle="Enable when `app.immich:/` is an invalid redirect URI."
+          disabled={!oauthConfig.enabled}
+          on:click={() => handleToggleOverride()}
+          bind:checked={oauthConfig.mobileOverrideEnabled}
+        />
 
-				{#if oauthConfig.mobileOverrideEnabled}
-					<SettingInputField
-						inputType={SettingInputFieldType.TEXT}
-						label="MOBILE REDIRECT URI"
-						bind:value={oauthConfig.mobileRedirectUri}
-						required={true}
-						disabled={!oauthConfig.enabled}
-						isEdited={!(oauthConfig.mobileRedirectUri == savedConfig.mobileRedirectUri)}
-					/>
-				{/if}
+        {#if oauthConfig.mobileOverrideEnabled}
+          <SettingInputField
+            inputType={SettingInputFieldType.TEXT}
+            label="MOBILE REDIRECT URI"
+            bind:value={oauthConfig.mobileRedirectUri}
+            required={true}
+            disabled={!oauthConfig.enabled}
+            isEdited={!(oauthConfig.mobileRedirectUri == savedConfig.mobileRedirectUri)}
+          />
+        {/if}
 
-				<SettingButtonsRow
-					on:reset={reset}
-					on:save={saveSetting}
-					on:reset-to-default={resetToDefault}
-					showResetToDefault={!isEqual(savedConfig, defaultConfig)}
-				/>
-			</form>
-		</div>
-	{/await}
+        <SettingButtonsRow
+          on:reset={reset}
+          on:save={saveSetting}
+          on:reset-to-default={resetToDefault}
+          showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+        />
+      </form>
+    </div>
+  {/await}
 </div>
diff --git a/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte b/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte
index fb8f0ef7c..0cab82c55 100644
--- a/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte
@@ -1,121 +1,118 @@
 <script lang="ts">
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import { handleError } from '$lib/utils/handle-error';
-	import { api, SystemConfigPasswordLoginDto } from '@api';
-	import { isEqual } from 'lodash-es';
-	import { fade } from 'svelte/transition';
-	import ConfirmDisableLogin from '../confirm-disable-login.svelte';
-	import SettingButtonsRow from '../setting-buttons-row.svelte';
-	import SettingSwitch from '../setting-switch.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api, SystemConfigPasswordLoginDto } from '@api';
+  import { isEqual } from 'lodash-es';
+  import { fade } from 'svelte/transition';
+  import ConfirmDisableLogin from '../confirm-disable-login.svelte';
+  import SettingButtonsRow from '../setting-buttons-row.svelte';
+  import SettingSwitch from '../setting-switch.svelte';
 
-	export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited
+  export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited
 
-	let savedConfig: SystemConfigPasswordLoginDto;
-	let defaultConfig: SystemConfigPasswordLoginDto;
+  let savedConfig: SystemConfigPasswordLoginDto;
+  let defaultConfig: SystemConfigPasswordLoginDto;
 
-	async function getConfigs() {
-		[savedConfig, defaultConfig] = await Promise.all([
-			api.systemConfigApi.getConfig().then((res) => res.data.passwordLogin),
-			api.systemConfigApi.getDefaults().then((res) => res.data.passwordLogin)
-		]);
-	}
+  async function getConfigs() {
+    [savedConfig, defaultConfig] = await Promise.all([
+      api.systemConfigApi.getConfig().then((res) => res.data.passwordLogin),
+      api.systemConfigApi.getDefaults().then((res) => res.data.passwordLogin),
+    ]);
+  }
 
-	let isConfirmOpen = false;
-	let handleConfirm: (value: boolean) => void;
+  let isConfirmOpen = false;
+  let handleConfirm: (value: boolean) => void;
 
-	const openConfirmModal = () => {
-		return new Promise((resolve) => {
-			handleConfirm = (value: boolean) => {
-				isConfirmOpen = false;
-				resolve(value);
-			};
-			isConfirmOpen = true;
-		});
-	};
+  const openConfirmModal = () => {
+    return new Promise((resolve) => {
+      handleConfirm = (value: boolean) => {
+        isConfirmOpen = false;
+        resolve(value);
+      };
+      isConfirmOpen = true;
+    });
+  };
 
-	async function saveSetting() {
-		try {
-			const { data: current } = await api.systemConfigApi.getConfig();
+  async function saveSetting() {
+    try {
+      const { data: current } = await api.systemConfigApi.getConfig();
 
-			if (!current.oauth.enabled && current.passwordLogin.enabled && !passwordLoginConfig.enabled) {
-				const confirmed = await openConfirmModal();
-				if (!confirmed) {
-					return;
-				}
-			}
+      if (!current.oauth.enabled && current.passwordLogin.enabled && !passwordLoginConfig.enabled) {
+        const confirmed = await openConfirmModal();
+        if (!confirmed) {
+          return;
+        }
+      }
 
-			const { data: updated } = await api.systemConfigApi.updateConfig({
-				systemConfigDto: {
-					...current,
-					passwordLogin: passwordLoginConfig
-				}
-			});
+      const { data: updated } = await api.systemConfigApi.updateConfig({
+        systemConfigDto: {
+          ...current,
+          passwordLogin: passwordLoginConfig,
+        },
+      });
 
-			passwordLoginConfig = { ...updated.passwordLogin };
-			savedConfig = { ...updated.passwordLogin };
+      passwordLoginConfig = { ...updated.passwordLogin };
+      savedConfig = { ...updated.passwordLogin };
 
-			notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
-		} catch (error) {
-			handleError(error, 'Unable to save settings');
-		}
-	}
+      notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, 'Unable to save settings');
+    }
+  }
 
-	async function reset() {
-		const { data: resetConfig } = await api.systemConfigApi.getConfig();
+  async function reset() {
+    const { data: resetConfig } = await api.systemConfigApi.getConfig();
 
-		passwordLoginConfig = { ...resetConfig.passwordLogin };
-		savedConfig = { ...resetConfig.passwordLogin };
+    passwordLoginConfig = { ...resetConfig.passwordLogin };
+    savedConfig = { ...resetConfig.passwordLogin };
 
-		notificationController.show({
-			message: 'Reset settings to the recent saved settings',
-			type: NotificationType.Info
-		});
-	}
+    notificationController.show({
+      message: 'Reset settings to the recent saved settings',
+      type: NotificationType.Info,
+    });
+  }
 
-	async function resetToDefault() {
-		const { data: configs } = await api.systemConfigApi.getDefaults();
+  async function resetToDefault() {
+    const { data: configs } = await api.systemConfigApi.getDefaults();
 
-		passwordLoginConfig = { ...configs.passwordLogin };
-		defaultConfig = { ...configs.passwordLogin };
+    passwordLoginConfig = { ...configs.passwordLogin };
+    defaultConfig = { ...configs.passwordLogin };
 
-		notificationController.show({
-			message: 'Reset password settings to default',
-			type: NotificationType.Info
-		});
-	}
+    notificationController.show({
+      message: 'Reset password settings to default',
+      type: NotificationType.Info,
+    });
+  }
 </script>
 
 {#if isConfirmOpen}
-	<ConfirmDisableLogin
-		on:cancel={() => handleConfirm(false)}
-		on:confirm={() => handleConfirm(true)}
-	/>
+  <ConfirmDisableLogin on:cancel={() => handleConfirm(false)} on:confirm={() => handleConfirm(true)} />
 {/if}
 
 <div>
-	{#await getConfigs() then}
-		<div in:fade={{ duration: 500 }}>
-			<form autocomplete="off" on:submit|preventDefault>
-				<div class="flex flex-col gap-4 ml-4 mt-4">
-					<div class="ml-4">
-						<SettingSwitch
-							title="ENABLED"
-							subtitle="Login with email and password"
-							bind:checked={passwordLoginConfig.enabled}
-						/>
+  {#await getConfigs() then}
+    <div in:fade={{ duration: 500 }}>
+      <form autocomplete="off" on:submit|preventDefault>
+        <div class="flex flex-col gap-4 ml-4 mt-4">
+          <div class="ml-4">
+            <SettingSwitch
+              title="ENABLED"
+              subtitle="Login with email and password"
+              bind:checked={passwordLoginConfig.enabled}
+            />
 
-						<SettingButtonsRow
-							on:reset={reset}
-							on:save={saveSetting}
-							on:reset-to-default={resetToDefault}
-							showResetToDefault={!isEqual(savedConfig, defaultConfig)}
-						/>
-					</div>
-				</div>
-			</form>
-		</div>
-	{/await}
+            <SettingButtonsRow
+              on:reset={reset}
+              on:save={saveSetting}
+              on:reset-to-default={resetToDefault}
+              showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  {/await}
 </div>
diff --git a/web/src/lib/components/admin-page/settings/setting-accordion.svelte b/web/src/lib/components/admin-page/settings/setting-accordion.svelte
index 39b407143..941426ba2 100644
--- a/web/src/lib/components/admin-page/settings/setting-accordion.svelte
+++ b/web/src/lib/components/admin-page/settings/setting-accordion.svelte
@@ -1,56 +1,56 @@
 <script lang="ts">
-	import { slide } from 'svelte/transition';
-	export let title: string;
-	export let subtitle = '';
+  import { slide } from 'svelte/transition';
+  export let title: string;
+  export let subtitle = '';
 
-	export let isOpen = false;
-	const toggle = () => (isOpen = !isOpen);
+  export let isOpen = false;
+  const toggle = () => (isOpen = !isOpen);
 </script>
 
 <div class="border-b-[1px] border-gray-200 dark:border-gray-700 py-4">
-	<div class="flex justify-between place-items-center">
-		<div>
-			<h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
-				{title}
-			</h2>
+  <div class="flex justify-between place-items-center">
+    <div>
+      <h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
+        {title}
+      </h2>
 
-			<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
-		</div>
+      <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+    </div>
 
-		<button
-			on:click={toggle}
-			aria-expanded={isOpen}
-			class="immich-circle-icon-button hover:bg-immich-primary/10 dark:text-immich-dark-fg hover:dark:bg-immich-dark-primary/20 rounded-full p-3 flex place-items-center place-content-center transition-all"
-		>
-			<svg
-				style="tran"
-				width="20"
-				height="20"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path d="M19 9l-7 7-7-7" />
-			</svg>
-		</button>
-	</div>
+    <button
+      on:click={toggle}
+      aria-expanded={isOpen}
+      class="immich-circle-icon-button hover:bg-immich-primary/10 dark:text-immich-dark-fg hover:dark:bg-immich-dark-primary/20 rounded-full p-3 flex place-items-center place-content-center transition-all"
+    >
+      <svg
+        style="tran"
+        width="20"
+        height="20"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path d="M19 9l-7 7-7-7" />
+      </svg>
+    </button>
+  </div>
 
-	{#if isOpen}
-		<ul transition:slide={{ duration: 250 }} class="mb-2 ml-4">
-			<slot />
-		</ul>
-	{/if}
+  {#if isOpen}
+    <ul transition:slide={{ duration: 250 }} class="mb-2 ml-4">
+      <slot />
+    </ul>
+  {/if}
 </div>
 
 <style>
-	svg {
-		transition: transform 0.2s ease-in;
-	}
+  svg {
+    transition: transform 0.2s ease-in;
+  }
 
-	[aria-expanded='true'] svg {
-		transform: rotate(0.5turn);
-	}
+  [aria-expanded='true'] svg {
+    transform: rotate(0.5turn);
+  }
 </style>
diff --git a/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte b/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte
index e82d9b86f..d1b6aa4d9 100644
--- a/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte
+++ b/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte
@@ -1,26 +1,26 @@
 <script lang="ts">
-	import Button from '$lib/components/elements/buttons/button.svelte';
-	import { createEventDispatcher } from 'svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import { createEventDispatcher } from 'svelte';
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	export let showResetToDefault = true;
+  export let showResetToDefault = true;
 </script>
 
 <div class="flex justify-between gap-2 mt-8">
-	<div class="left">
-		{#if showResetToDefault}
-			<button
-				on:click={() => dispatch('reset-to-default')}
-				class="text-sm dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75 text-immich-primary hover:text-immich-primary/75 font-medium bg-none"
-			>
-				Reset to default
-			</button>
-		{/if}
-	</div>
+  <div class="left">
+    {#if showResetToDefault}
+      <button
+        on:click={() => dispatch('reset-to-default')}
+        class="text-sm dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75 text-immich-primary hover:text-immich-primary/75 font-medium bg-none"
+      >
+        Reset to default
+      </button>
+    {/if}
+  </div>
 
-	<div class="right">
-		<Button size="sm" color="gray" on:click={() => dispatch('reset')}>Reset</Button>
-		<Button size="sm" on:click={() => dispatch('save')}>Save</Button>
-	</div>
+  <div class="right">
+    <Button size="sm" color="gray" on:click={() => dispatch('reset')}>Reset</Button>
+    <Button size="sm" on:click={() => dispatch('save')}>Save</Button>
+  </div>
 </div>
diff --git a/web/src/lib/components/admin-page/settings/setting-input-field.svelte b/web/src/lib/components/admin-page/settings/setting-input-field.svelte
index 28ac4ca00..931fb896d 100644
--- a/web/src/lib/components/admin-page/settings/setting-input-field.svelte
+++ b/web/src/lib/components/admin-page/settings/setting-input-field.svelte
@@ -1,65 +1,65 @@
 <script lang="ts" context="module">
-	export enum SettingInputFieldType {
-		EMAIL = 'email',
-		TEXT = 'text',
-		NUMBER = 'number',
-		PASSWORD = 'password'
-	}
+  export enum SettingInputFieldType {
+    EMAIL = 'email',
+    TEXT = 'text',
+    NUMBER = 'number',
+    PASSWORD = 'password',
+  }
 </script>
 
 <script lang="ts">
-	import { quintOut } from 'svelte/easing';
-	import { fly } from 'svelte/transition';
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
 
-	export let inputType: SettingInputFieldType;
-	export let value: string | number;
-	export let label = '';
-	export let desc = '';
-	export let required = false;
-	export let disabled = false;
-	export let isEdited = false;
+  export let inputType: SettingInputFieldType;
+  export let value: string | number;
+  export let label = '';
+  export let desc = '';
+  export let required = false;
+  export let disabled = false;
+  export let isEdited = false;
 
-	const handleInput = (e: Event) => {
-		value = (e.target as HTMLInputElement).value;
-		if (inputType === SettingInputFieldType.NUMBER) {
-			value = Number(value) || 0;
-		}
-	};
+  const handleInput = (e: Event) => {
+    value = (e.target as HTMLInputElement).value;
+    if (inputType === SettingInputFieldType.NUMBER) {
+      value = Number(value) || 0;
+    }
+  };
 </script>
 
 <div class="w-full">
-	<div class={`flex place-items-center gap-1 h-[26px]`}>
-		<label class={`immich-form-label text-sm`} for={label}>{label}</label>
-		{#if required}
-			<div class="text-red-400">*</div>
-		{/if}
+  <div class={`flex place-items-center gap-1 h-[26px]`}>
+    <label class={`immich-form-label text-sm`} for={label}>{label}</label>
+    {#if required}
+      <div class="text-red-400">*</div>
+    {/if}
 
-		{#if isEdited}
-			<div
-				transition:fly={{ x: 10, duration: 200, easing: quintOut }}
-				class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
-			>
-				Unsaved change
-			</div>
-		{/if}
-	</div>
+    {#if isEdited}
+      <div
+        transition:fly={{ x: 10, duration: 200, easing: quintOut }}
+        class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
+      >
+        Unsaved change
+      </div>
+    {/if}
+  </div>
 
-	{#if desc}
-		<p class="immich-form-label text-xs pb-2" id="{label}-desc">
-			{desc}
-		</p>
-	{/if}
+  {#if desc}
+    <p class="immich-form-label text-xs pb-2" id="{label}-desc">
+      {desc}
+    </p>
+  {/if}
 
-	<input
-		class="immich-form-input pb-2 w-full"
-		aria-describedby={desc ? `${label}-desc` : undefined}
-		aria-labelledby="{label}-label"
-		id={label}
-		name={label}
-		type={inputType}
-		{required}
-		{value}
-		on:input={handleInput}
-		{disabled}
-	/>
+  <input
+    class="immich-form-input pb-2 w-full"
+    aria-describedby={desc ? `${label}-desc` : undefined}
+    aria-labelledby="{label}-label"
+    id={label}
+    name={label}
+    type={inputType}
+    {required}
+    {value}
+    on:input={handleInput}
+    {disabled}
+  />
 </div>
diff --git a/web/src/lib/components/admin-page/settings/setting-select.svelte b/web/src/lib/components/admin-page/settings/setting-select.svelte
index ed9e297a4..2a40a910d 100644
--- a/web/src/lib/components/admin-page/settings/setting-select.svelte
+++ b/web/src/lib/components/admin-page/settings/setting-select.svelte
@@ -1,49 +1,49 @@
 <script lang="ts">
-	import { quintOut } from 'svelte/easing';
-	import { fly } from 'svelte/transition';
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
 
-	export let value: string;
-	export let options: { value: string; text: string }[];
-	export let label = '';
-	export let desc = '';
-	export let name = '';
-	export let isEdited = false;
+  export let value: string;
+  export let options: { value: string; text: string }[];
+  export let label = '';
+  export let desc = '';
+  export let name = '';
+  export let isEdited = false;
 
-	const handleChange = (e: Event) => {
-		value = (e.target as HTMLInputElement).value;
-	};
+  const handleChange = (e: Event) => {
+    value = (e.target as HTMLInputElement).value;
+  };
 </script>
 
 <div class="w-full">
-	<div class={`flex place-items-center gap-1 h-[26px]`}>
-		<label class={`immich-form-label text-sm`} for="{name}-select">{label}</label>
+  <div class={`flex place-items-center gap-1 h-[26px]`}>
+    <label class={`immich-form-label text-sm`} for="{name}-select">{label}</label>
 
-		{#if isEdited}
-			<div
-				transition:fly={{ x: 10, duration: 200, easing: quintOut }}
-				class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
-			>
-				Unsaved change
-			</div>
-		{/if}
-	</div>
+    {#if isEdited}
+      <div
+        transition:fly={{ x: 10, duration: 200, easing: quintOut }}
+        class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
+      >
+        Unsaved change
+      </div>
+    {/if}
+  </div>
 
-	{#if desc}
-		<p class="immich-form-label text-xs pb-2" id="{name}-desc">
-			{desc}
-		</p>
-	{/if}
+  {#if desc}
+    <p class="immich-form-label text-xs pb-2" id="{name}-desc">
+      {desc}
+    </p>
+  {/if}
 
-	<select
-		class="immich-form-input pb-2 w-full"
-		aria-describedby={desc ? `${name}-desc` : undefined}
-		{name}
-		id="{name}-select"
-		bind:value
-		on:change={handleChange}
-	>
-		{#each options as option}
-			<option value={option.value}>{option.text}</option>
-		{/each}
-	</select>
+  <select
+    class="immich-form-input pb-2 w-full"
+    aria-describedby={desc ? `${name}-desc` : undefined}
+    {name}
+    id="{name}-select"
+    bind:value
+    on:change={handleChange}
+  >
+    {#each options as option}
+      <option value={option.value}>{option.text}</option>
+    {/each}
+  </select>
 </div>
diff --git a/web/src/lib/components/admin-page/settings/setting-switch.svelte b/web/src/lib/components/admin-page/settings/setting-switch.svelte
index 22c149c9e..205ee0e24 100644
--- a/web/src/lib/components/admin-page/settings/setting-switch.svelte
+++ b/web/src/lib/components/admin-page/settings/setting-switch.svelte
@@ -1,96 +1,90 @@
 <script lang="ts">
-	import { quintOut } from 'svelte/easing';
-	import { fly } from 'svelte/transition';
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
 
-	export let title: string;
-	export let subtitle = '';
-	export let checked = false;
-	export let disabled = false;
-	export let isEdited = false;
+  export let title: string;
+  export let subtitle = '';
+  export let checked = false;
+  export let disabled = false;
+  export let isEdited = false;
 </script>
 
 <div class="flex justify-between place-items-center">
-	<div>
-		<div class="flex place-items-center gap-1 h-[26px]">
-			<label class="immich-form-label text-sm" for={title}>
-				{title}
-			</label>
-			{#if isEdited}
-				<div
-					transition:fly={{ x: 10, duration: 200, easing: quintOut }}
-					class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
-				>
-					Unsaved change
-				</div>
-			{/if}
-		</div>
+  <div>
+    <div class="flex place-items-center gap-1 h-[26px]">
+      <label class="immich-form-label text-sm" for={title}>
+        {title}
+      </label>
+      {#if isEdited}
+        <div
+          transition:fly={{ x: 10, duration: 200, easing: quintOut }}
+          class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
+        >
+          Unsaved change
+        </div>
+      {/if}
+    </div>
 
-		<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
-	</div>
+    <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+  </div>
 
-	<label class="relative inline-block flex-none w-[36px] h-[10px]">
-		<input
-			class="opacity-0 w-0 h-0 disabled::cursor-not-allowed"
-			type="checkbox"
-			bind:checked
-			on:click
-			{disabled}
-		/>
+  <label class="relative inline-block flex-none w-[36px] h-[10px]">
+    <input class="opacity-0 w-0 h-0 disabled::cursor-not-allowed" type="checkbox" bind:checked on:click {disabled} />
 
-		{#if disabled}
-			<span class="slider-disable" />
-		{:else}
-			<span class="slider" />
-		{/if}
-	</label>
+    {#if disabled}
+      <span class="slider-disable" />
+    {:else}
+      <span class="slider" />
+    {/if}
+  </label>
 </div>
 
 <style>
-	.slider,
-	.slider-disable {
-		position: absolute;
-		cursor: pointer;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: #ccc;
-		-webkit-transition: 0.4s;
-		transition: 0.4s;
-		border-radius: 34px;
-	}
+  .slider,
+  .slider-disable {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 34px;
+  }
 
-	input:disabled {
-		cursor: not-allowed;
-	}
+  input:disabled {
+    cursor: not-allowed;
+  }
 
-	.slider:before,
-	.slider-disable:before {
-		position: absolute;
-		content: '';
-		height: 20px;
-		width: 20px;
-		left: 0px;
-		right: 0px;
-		bottom: -4px;
-		background-color: gray;
-		-webkit-transition: 0.4s;
-		transition: 0.4s;
-		border-radius: 50%;
-	}
+  .slider:before,
+  .slider-disable:before {
+    position: absolute;
+    content: '';
+    height: 20px;
+    width: 20px;
+    left: 0px;
+    right: 0px;
+    bottom: -4px;
+    background-color: gray;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 50%;
+  }
 
-	input:checked + .slider-disable {
-		background-color: gray;
-	}
+  input:checked + .slider-disable {
+    background-color: gray;
+  }
 
-	input:checked + .slider {
-		background-color: #adcbfa;
-	}
+  input:checked + .slider {
+    background-color: #adcbfa;
+  }
 
-	input:checked + .slider:before {
-		-webkit-transform: translateX(18px);
-		-ms-transform: translateX(18px);
-		transform: translateX(18px);
-		background-color: #4250af;
-	}
+  input:checked + .slider:before {
+    -webkit-transform: translateX(18px);
+    -ms-transform: translateX(18px);
+    transform: translateX(18px);
+    background-color: #4250af;
+  }
 </style>
diff --git a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
index eae24ffe8..a405d42d9 100644
--- a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
@@ -1,241 +1,224 @@
 <script lang="ts">
-	import {
-		api,
-		SystemConfigStorageTemplateDto,
-		SystemConfigTemplateStorageOptionDto,
-		UserResponseDto
-	} from '@api';
-	import * as luxon from 'luxon';
-	import handlebar from 'handlebars';
-	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-	import { fade } from 'svelte/transition';
-	import SupportedDatetimePanel from './supported-datetime-panel.svelte';
-	import SupportedVariablesPanel from './supported-variables-panel.svelte';
-	import SettingButtonsRow from '../setting-buttons-row.svelte';
-	import { isEqual } from 'lodash-es';
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import { api, SystemConfigStorageTemplateDto, SystemConfigTemplateStorageOptionDto, UserResponseDto } from '@api';
+  import * as luxon from 'luxon';
+  import handlebar from 'handlebars';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { fade } from 'svelte/transition';
+  import SupportedDatetimePanel from './supported-datetime-panel.svelte';
+  import SupportedVariablesPanel from './supported-variables-panel.svelte';
+  import SettingButtonsRow from '../setting-buttons-row.svelte';
+  import { isEqual } from 'lodash-es';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
 
-	export let storageConfig: SystemConfigStorageTemplateDto;
-	export let user: UserResponseDto;
+  export let storageConfig: SystemConfigStorageTemplateDto;
+  export let user: UserResponseDto;
 
-	let savedConfig: SystemConfigStorageTemplateDto;
-	let defaultConfig: SystemConfigStorageTemplateDto;
-	let templateOptions: SystemConfigTemplateStorageOptionDto;
-	let selectedPreset = '';
+  let savedConfig: SystemConfigStorageTemplateDto;
+  let defaultConfig: SystemConfigStorageTemplateDto;
+  let templateOptions: SystemConfigTemplateStorageOptionDto;
+  let selectedPreset = '';
 
-	async function getConfigs() {
-		[savedConfig, defaultConfig, templateOptions] = await Promise.all([
-			api.systemConfigApi.getConfig().then((res) => res.data.storageTemplate),
-			api.systemConfigApi.getDefaults().then((res) => res.data.storageTemplate),
-			api.systemConfigApi.getStorageTemplateOptions().then((res) => res.data)
-		]);
+  async function getConfigs() {
+    [savedConfig, defaultConfig, templateOptions] = await Promise.all([
+      api.systemConfigApi.getConfig().then((res) => res.data.storageTemplate),
+      api.systemConfigApi.getDefaults().then((res) => res.data.storageTemplate),
+      api.systemConfigApi.getStorageTemplateOptions().then((res) => res.data),
+    ]);
 
-		selectedPreset = savedConfig.template;
-	}
+    selectedPreset = savedConfig.template;
+  }
 
-	const getSupportDateTimeFormat = async () => {
-		const { data } = await api.systemConfigApi.getStorageTemplateOptions();
-		return data;
-	};
+  const getSupportDateTimeFormat = async () => {
+    const { data } = await api.systemConfigApi.getStorageTemplateOptions();
+    return data;
+  };
 
-	$: parsedTemplate = () => {
-		try {
-			return renderTemplate(storageConfig.template);
-		} catch (error) {
-			return 'error';
-		}
-	};
+  $: parsedTemplate = () => {
+    try {
+      return renderTemplate(storageConfig.template);
+    } catch (error) {
+      return 'error';
+    }
+  };
 
-	const renderTemplate = (templateString: string) => {
-		const template = handlebar.compile(templateString, {
-			knownHelpers: undefined
-		});
+  const renderTemplate = (templateString: string) => {
+    const template = handlebar.compile(templateString, {
+      knownHelpers: undefined,
+    });
 
-		const substitutions: Record<string, string> = {
-			filename: 'IMAGE_56437',
-			ext: 'jpg',
-			filetype: 'IMG',
-			filetypefull: 'IMAGE'
-		};
+    const substitutions: Record<string, string> = {
+      filename: 'IMAGE_56437',
+      ext: 'jpg',
+      filetype: 'IMG',
+      filetypefull: 'IMAGE',
+    };
 
-		const dt = luxon.DateTime.fromISO(new Date('2022-09-04T20:03:05.250').toISOString());
+    const dt = luxon.DateTime.fromISO(new Date('2022-09-04T20:03:05.250').toISOString());
 
-		const dateTokens = [
-			...templateOptions.yearOptions,
-			...templateOptions.monthOptions,
-			...templateOptions.dayOptions,
-			...templateOptions.hourOptions,
-			...templateOptions.minuteOptions,
-			...templateOptions.secondOptions
-		];
+    const dateTokens = [
+      ...templateOptions.yearOptions,
+      ...templateOptions.monthOptions,
+      ...templateOptions.dayOptions,
+      ...templateOptions.hourOptions,
+      ...templateOptions.minuteOptions,
+      ...templateOptions.secondOptions,
+    ];
 
-		for (const token of dateTokens) {
-			substitutions[token] = dt.toFormat(token);
-		}
+    for (const token of dateTokens) {
+      substitutions[token] = dt.toFormat(token);
+    }
 
-		return template(substitutions);
-	};
+    return template(substitutions);
+  };
 
-	async function reset() {
-		const { data: resetConfig } = await api.systemConfigApi.getConfig();
+  async function reset() {
+    const { data: resetConfig } = await api.systemConfigApi.getConfig();
 
-		storageConfig.template = resetConfig.storageTemplate.template;
-		savedConfig.template = resetConfig.storageTemplate.template;
+    storageConfig.template = resetConfig.storageTemplate.template;
+    savedConfig.template = resetConfig.storageTemplate.template;
 
-		notificationController.show({
-			message: 'Reset storage template settings to the recent saved settings',
-			type: NotificationType.Info
-		});
-	}
+    notificationController.show({
+      message: 'Reset storage template settings to the recent saved settings',
+      type: NotificationType.Info,
+    });
+  }
 
-	async function saveSetting() {
-		try {
-			const { data: currentConfig } = await api.systemConfigApi.getConfig();
+  async function saveSetting() {
+    try {
+      const { data: currentConfig } = await api.systemConfigApi.getConfig();
 
-			const result = await api.systemConfigApi.updateConfig({
-				systemConfigDto: {
-					...currentConfig,
-					storageTemplate: storageConfig
-				}
-			});
+      const result = await api.systemConfigApi.updateConfig({
+        systemConfigDto: {
+          ...currentConfig,
+          storageTemplate: storageConfig,
+        },
+      });
 
-			storageConfig.template = result.data.storageTemplate.template;
-			savedConfig.template = result.data.storageTemplate.template;
+      storageConfig.template = result.data.storageTemplate.template;
+      savedConfig.template = result.data.storageTemplate.template;
 
-			notificationController.show({
-				message: 'Storage template saved',
-				type: NotificationType.Info
-			});
-		} catch (e) {
-			console.error('Error [storage-template-settings] [saveSetting]', e);
-			notificationController.show({
-				message: 'Unable to save settings',
-				type: NotificationType.Error
-			});
-		}
-	}
+      notificationController.show({
+        message: 'Storage template saved',
+        type: NotificationType.Info,
+      });
+    } catch (e) {
+      console.error('Error [storage-template-settings] [saveSetting]', e);
+      notificationController.show({
+        message: 'Unable to save settings',
+        type: NotificationType.Error,
+      });
+    }
+  }
 
-	async function resetToDefault() {
-		const { data: defaultConfig } = await api.systemConfigApi.getDefaults();
+  async function resetToDefault() {
+    const { data: defaultConfig } = await api.systemConfigApi.getDefaults();
 
-		storageConfig.template = defaultConfig.storageTemplate.template;
+    storageConfig.template = defaultConfig.storageTemplate.template;
 
-		notificationController.show({
-			message: 'Reset storage template to default',
-			type: NotificationType.Info
-		});
-	}
+    notificationController.show({
+      message: 'Reset storage template to default',
+      type: NotificationType.Info,
+    });
+  }
 
-	const handlePresetSelection = () => {
-		storageConfig.template = selectedPreset;
-	};
+  const handlePresetSelection = () => {
+    storageConfig.template = selectedPreset;
+  };
 </script>
 
 <section class="dark:text-immich-dark-fg">
-	{#await getConfigs() then}
-		<div id="directory-path-builder" class="m-4">
-			<h3 class="font-medium text-immich-primary dark:text-immich-dark-primary text-base">
-				Variables
-			</h3>
+  {#await getConfigs() then}
+    <div id="directory-path-builder" class="m-4">
+      <h3 class="font-medium text-immich-primary dark:text-immich-dark-primary text-base">Variables</h3>
 
-			<section class="support-date">
-				{#await getSupportDateTimeFormat()}
-					<LoadingSpinner />
-				{:then options}
-					<div transition:fade={{ duration: 200 }}>
-						<SupportedDatetimePanel {options} />
-					</div>
-				{/await}
-			</section>
+      <section class="support-date">
+        {#await getSupportDateTimeFormat()}
+          <LoadingSpinner />
+        {:then options}
+          <div transition:fade={{ duration: 200 }}>
+            <SupportedDatetimePanel {options} />
+          </div>
+        {/await}
+      </section>
 
-			<section class="support-date">
-				<SupportedVariablesPanel />
-			</section>
+      <section class="support-date">
+        <SupportedVariablesPanel />
+      </section>
 
-			<div class="mt-4 flex flex-col">
-				<h3 class="font-medium text-immich-primary dark:text-immich-dark-primary text-base">
-					Template
-				</h3>
+      <div class="mt-4 flex flex-col">
+        <h3 class="font-medium text-immich-primary dark:text-immich-dark-primary text-base">Template</h3>
 
-				<div class="text-xs my-2">
-					<h4>PREVIEW</h4>
-				</div>
+        <div class="text-xs my-2">
+          <h4>PREVIEW</h4>
+        </div>
 
-				<p class="text-xs">
-					Approximately path length limit : <span
-						class="font-semibold text-immich-primary dark:text-immich-dark-primary"
-						>{parsedTemplate().length + user.id.length + 'UPLOAD_LOCATION'.length}</span
-					>/260
-				</p>
+        <p class="text-xs">
+          Approximately path length limit : <span
+            class="font-semibold text-immich-primary dark:text-immich-dark-primary"
+            >{parsedTemplate().length + user.id.length + 'UPLOAD_LOCATION'.length}</span
+          >/260
+        </p>
 
-				<p class="text-xs">
-					<code>{user.storageLabel || user.id}</code> is the user's Storage Label
-				</p>
+        <p class="text-xs">
+          <code>{user.storageLabel || user.id}</code> is the user's Storage Label
+        </p>
 
-				<p
-					class="text-xs p-4 bg-gray-200 dark:bg-gray-700 dark:text-immich-dark-fg py-2 rounded-lg mt-2"
-				>
-					<span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
-						>UPLOAD_LOCATION/{user.storageLabel || user.id}</span
-					>/{parsedTemplate()}.jpg
-				</p>
+        <p class="text-xs p-4 bg-gray-200 dark:bg-gray-700 dark:text-immich-dark-fg py-2 rounded-lg mt-2">
+          <span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
+            >UPLOAD_LOCATION/{user.storageLabel || user.id}</span
+          >/{parsedTemplate()}.jpg
+        </p>
 
-				<form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
-					<div class="flex flex-col my-2">
-						<label class="text-xs" for="presets">PRESET</label>
-						<select
-							class="text-sm bg-slate-200 p-2 rounded-lg mt-2 dark:bg-gray-600 hover:cursor-pointer"
-							name="presets"
-							id="preset-select"
-							bind:value={selectedPreset}
-							on:change={handlePresetSelection}
-						>
-							{#each templateOptions.presetOptions as preset}
-								<option value={preset}>{renderTemplate(preset)}</option>
-							{/each}
-						</select>
-					</div>
-					<div class="flex gap-2 align-bottom">
-						<SettingInputField
-							label="TEMPLATE"
-							required
-							inputType={SettingInputFieldType.TEXT}
-							bind:value={storageConfig.template}
-							isEdited={!(storageConfig.template === savedConfig.template)}
-						/>
+        <form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
+          <div class="flex flex-col my-2">
+            <label class="text-xs" for="presets">PRESET</label>
+            <select
+              class="text-sm bg-slate-200 p-2 rounded-lg mt-2 dark:bg-gray-600 hover:cursor-pointer"
+              name="presets"
+              id="preset-select"
+              bind:value={selectedPreset}
+              on:change={handlePresetSelection}
+            >
+              {#each templateOptions.presetOptions as preset}
+                <option value={preset}>{renderTemplate(preset)}</option>
+              {/each}
+            </select>
+          </div>
+          <div class="flex gap-2 align-bottom">
+            <SettingInputField
+              label="TEMPLATE"
+              required
+              inputType={SettingInputFieldType.TEXT}
+              bind:value={storageConfig.template}
+              isEdited={!(storageConfig.template === savedConfig.template)}
+            />
 
-						<div class="flex-0">
-							<SettingInputField
-								label="EXTENSION"
-								inputType={SettingInputFieldType.TEXT}
-								value={'.jpg'}
-								disabled
-							/>
-						</div>
-					</div>
+            <div class="flex-0">
+              <SettingInputField label="EXTENSION" inputType={SettingInputFieldType.TEXT} value={'.jpg'} disabled />
+            </div>
+          </div>
 
-					<div id="migration-info" class="text-sm mt-4">
-						<p>
-							Template changes will only apply to new assets. To retroactively apply the template to
-							previously uploaded assets, run the <a
-								href="/admin/jobs-status"
-								class="text-immich-primary dark:text-immich-dark-primary">Storage Migration Job</a
-							>
-						</p>
-					</div>
+          <div id="migration-info" class="text-sm mt-4">
+            <p>
+              Template changes will only apply to new assets. To retroactively apply the template to previously uploaded
+              assets, run the <a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary"
+                >Storage Migration Job</a
+              >
+            </p>
+          </div>
 
-					<SettingButtonsRow
-						on:reset={reset}
-						on:save={saveSetting}
-						on:reset-to-default={resetToDefault}
-						showResetToDefault={!isEqual(savedConfig, defaultConfig)}
-					/>
-				</form>
-			</div>
-		</div>
-	{/await}
+          <SettingButtonsRow
+            on:reset={reset}
+            on:save={saveSetting}
+            on:reset-to-default={resetToDefault}
+            showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+          />
+        </form>
+      </div>
+    </div>
+  {/await}
 </section>
diff --git a/web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte b/web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte
index d30798fb1..587ef3e0f 100644
--- a/web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte
+++ b/web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte
@@ -1,78 +1,76 @@
 <script lang="ts">
-	import type { SystemConfigTemplateStorageOptionDto } from '@api';
-	import * as luxon from 'luxon';
+  import type { SystemConfigTemplateStorageOptionDto } from '@api';
+  import * as luxon from 'luxon';
 
-	export let options: SystemConfigTemplateStorageOptionDto;
+  export let options: SystemConfigTemplateStorageOptionDto;
 
-	const getLuxonExample = (format: string) => {
-		return luxon.DateTime.fromISO(new Date('2022-09-04T20:03:05.250').toISOString()).toFormat(
-			format
-		);
-	};
+  const getLuxonExample = (format: string) => {
+    return luxon.DateTime.fromISO(new Date('2022-09-04T20:03:05.250').toISOString()).toFormat(format);
+  };
 </script>
 
 <div class="text-xs mt-2">
-	<h4>DATE & TIME</h4>
+  <h4>DATE & TIME</h4>
 </div>
 
 <div class="text-xs bg-gray-200 dark:bg-gray-700 dark:text-immich-dark-fg p-4 mt-2 rounded-lg">
-	<div class="mb-2 text-gray-600 dark:text-immich-dark-fg">
-		<p>Asset's creation timestamp is used for the datetime information</p>
-		<p>Sample time 2022-09-04T20:03:05.250</p>
-	</div>
-	<div class="flex gap-[50px]">
-		<div>
-			<p class="text-immich-primary font-medium dark:text-immich-dark-primary">YEAR</p>
-			<ul>
-				{#each options.yearOptions as yearFormat}
-					<li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
-				{/each}
-			</ul>
-		</div>
+  <div class="mb-2 text-gray-600 dark:text-immich-dark-fg">
+    <p>Asset's creation timestamp is used for the datetime information</p>
+    <p>Sample time 2022-09-04T20:03:05.250</p>
+  </div>
+  <div class="flex gap-[50px]">
+    <div>
+      <p class="text-immich-primary font-medium dark:text-immich-dark-primary">YEAR</p>
+      <ul>
+        {#each options.yearOptions as yearFormat}
+          <li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
+        {/each}
+      </ul>
+    </div>
 
-		<div>
-			<p class="text-immich-primary font-medium dark:text-immich-dark-primary">MONTH</p>
-			<ul>
-				{#each options.monthOptions as monthFormat}
-					<li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
-				{/each}
-			</ul>
-		</div>
+    <div>
+      <p class="text-immich-primary font-medium dark:text-immich-dark-primary">MONTH</p>
+      <ul>
+        {#each options.monthOptions as monthFormat}
+          <li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
+        {/each}
+      </ul>
+    </div>
 
-		<div>
-			<p class="text-immich-primary font-medium dark:text-immich-dark-primary">DAY</p>
-			<ul>
-				{#each options.dayOptions as dayFormat}
-					<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-				{/each}
-			</ul>
-		</div>
+    <div>
+      <p class="text-immich-primary font-medium dark:text-immich-dark-primary">DAY</p>
+      <ul>
+        {#each options.dayOptions as dayFormat}
+          <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
+        {/each}
+      </ul>
+    </div>
 
-		<div>
-			<p class="text-immich-primary font-medium dark:text-immich-dark-primary">HOUR</p>
-			<ul>
-				{#each options.hourOptions as dayFormat}
-					<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-				{/each}
-			</ul>
-		</div>
+    <div>
+      <p class="text-immich-primary font-medium dark:text-immich-dark-primary">HOUR</p>
+      <ul>
+        {#each options.hourOptions as dayFormat}
+          <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
+        {/each}
+      </ul>
+    </div>
 
-		<div>
-			<p class="text-immich-primary font-medium dark:text-immich-dark-primary">MINUTE</p>
-			<ul>
-				{#each options.minuteOptions as dayFormat}
-					<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-				{/each}
-			</ul>
-		</div>
+    <div>
+      <p class="text-immich-primary font-medium dark:text-immich-dark-primary">MINUTE</p>
+      <ul>
+        {#each options.minuteOptions as dayFormat}
+          <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
+        {/each}
+      </ul>
+    </div>
 
-		<div>
-			<p class="text-immich-primary font-medium dark:text-immich-dark-primary">SECOND</p>
-			<ul>
-				{#each options.secondOptions as dayFormat}
-					<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-				{/each}
-			</ul>
-		</div>
-	</div>
+    <div>
+      <p class="text-immich-primary font-medium dark:text-immich-dark-primary">SECOND</p>
+      <ul>
+        {#each options.secondOptions as dayFormat}
+          <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
+        {/each}
+      </ul>
+    </div>
+  </div>
 </div>
diff --git a/web/src/lib/components/admin-page/settings/storage-template/supported-variables-panel.svelte b/web/src/lib/components/admin-page/settings/storage-template/supported-variables-panel.svelte
index a65c2bd7e..e9d815aa6 100644
--- a/web/src/lib/components/admin-page/settings/storage-template/supported-variables-panel.svelte
+++ b/web/src/lib/components/admin-page/settings/storage-template/supported-variables-panel.svelte
@@ -1,29 +1,29 @@
 <div class="text-xs mt-4">
-	<h4>OTHER VARIABLES</h4>
+  <h4>OTHER VARIABLES</h4>
 </div>
 
 <div class="text-xs bg-gray-200 dark:bg-gray-700 dark:text-immich-dark-fg p-4 mt-2 rounded-lg">
-	<div class="flex gap-[50px]">
-		<div>
-			<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE NAME</p>
-			<ul>
-				<li>{`{{filename}}`}</li>
-			</ul>
-		</div>
+  <div class="flex gap-[50px]">
+    <div>
+      <p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE NAME</p>
+      <ul>
+        <li>{`{{filename}}`}</li>
+      </ul>
+    </div>
 
-		<div>
-			<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE EXTENSION</p>
-			<ul>
-				<li>{`{{ext}}`}</li>
-			</ul>
-		</div>
+    <div>
+      <p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE EXTENSION</p>
+      <ul>
+        <li>{`{{ext}}`}</li>
+      </ul>
+    </div>
 
-		<div>
-			<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE TYPE</p>
-			<ul>
-				<li>{`{{filetype}}`} - VID or IMG</li>
-				<li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
-			</ul>
-		</div>
-	</div>
+    <div>
+      <p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE TYPE</p>
+      <ul>
+        <li>{`{{filetype}}`} - VID or IMG</li>
+        <li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
+      </ul>
+    </div>
+  </div>
 </div>
diff --git a/web/src/lib/components/album-page/__tests__/album-card.spec.ts b/web/src/lib/components/album-page/__tests__/album-card.spec.ts
index ba7b194c5..33c8c48dd 100644
--- a/web/src/lib/components/album-page/__tests__/album-card.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/album-card.spec.ts
@@ -1,141 +1,136 @@
-import { jest, describe, it } from '@jest/globals';
-import { render, RenderResult, waitFor, fireEvent } from '@testing-library/svelte';
 import { createObjectURLMock } from '$lib/__mocks__/jsdom-url.mock';
 import { api, ThumbnailFormat } from '@api';
+import { describe, it, jest } from '@jest/globals';
 import { albumFactory } from '@test-data';
-import AlbumCard from '../album-card.svelte';
 import '@testing-library/jest-dom';
+import { fireEvent, render, RenderResult, waitFor } from '@testing-library/svelte';
+import AlbumCard from '../album-card.svelte';
 
 jest.mock('@api');
 
 const apiMock: jest.MockedObject<typeof api> = api as jest.MockedObject<typeof api>;
 
 describe('AlbumCard component', () => {
-	let sut: RenderResult<AlbumCard>;
+  let sut: RenderResult<AlbumCard>;
 
-	it.each([
-		{
-			album: albumFactory.build({ albumThumbnailAssetId: null, shared: false, assetCount: 0 }),
-			count: 0,
-			shared: false
-		},
-		{
-			album: albumFactory.build({ albumThumbnailAssetId: null, shared: true, assetCount: 0 }),
-			count: 0,
-			shared: true
-		},
-		{
-			album: albumFactory.build({ albumThumbnailAssetId: null, shared: false, assetCount: 5 }),
-			count: 5,
-			shared: false
-		},
-		{
-			album: albumFactory.build({ albumThumbnailAssetId: null, shared: true, assetCount: 2 }),
-			count: 2,
-			shared: true
-		}
-	])(
-		'shows album data without thumbnail with count $count - shared: $shared',
-		async ({ album, count, shared }) => {
-			sut = render(AlbumCard, { album, user: album.owner });
+  it.each([
+    {
+      album: albumFactory.build({ albumThumbnailAssetId: null, shared: false, assetCount: 0 }),
+      count: 0,
+      shared: false,
+    },
+    {
+      album: albumFactory.build({ albumThumbnailAssetId: null, shared: true, assetCount: 0 }),
+      count: 0,
+      shared: true,
+    },
+    {
+      album: albumFactory.build({ albumThumbnailAssetId: null, shared: false, assetCount: 5 }),
+      count: 5,
+      shared: false,
+    },
+    {
+      album: albumFactory.build({ albumThumbnailAssetId: null, shared: true, assetCount: 2 }),
+      count: 2,
+      shared: true,
+    },
+  ])('shows album data without thumbnail with count $count - shared: $shared', async ({ album, count, shared }) => {
+    sut = render(AlbumCard, { album, user: album.owner });
 
-			const albumImgElement = sut.getByTestId('album-image');
-			const albumNameElement = sut.getByTestId('album-name');
-			const albumDetailsElement = sut.getByTestId('album-details');
-			const detailsText = `${count} items` + (shared ? ' . Shared' : '');
+    const albumImgElement = sut.getByTestId('album-image');
+    const albumNameElement = sut.getByTestId('album-name');
+    const albumDetailsElement = sut.getByTestId('album-details');
+    const detailsText = `${count} items` + (shared ? ' . Shared' : '');
 
-			expect(albumImgElement).toHaveAttribute('src');
-			expect(albumImgElement).toHaveAttribute('alt', album.id);
+    expect(albumImgElement).toHaveAttribute('src');
+    expect(albumImgElement).toHaveAttribute('alt', album.id);
 
-			await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
+    await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
 
-			expect(albumImgElement).toHaveAttribute('alt', album.id);
-			expect(apiMock.assetApi.getAssetThumbnail).not.toHaveBeenCalled();
+    expect(albumImgElement).toHaveAttribute('alt', album.id);
+    expect(apiMock.assetApi.getAssetThumbnail).not.toHaveBeenCalled();
 
-			expect(albumNameElement).toHaveTextContent(album.albumName);
-			expect(albumDetailsElement).toHaveTextContent(new RegExp(detailsText));
-		}
-	);
+    expect(albumNameElement).toHaveTextContent(album.albumName);
+    expect(albumDetailsElement).toHaveTextContent(new RegExp(detailsText));
+  });
 
-	it('shows album data and and loads the thumbnail image when available', async () => {
-		const thumbnailFile = new File([new Blob()], 'fileThumbnail');
-		const thumbnailUrl = 'blob:thumbnailUrlOne';
-		apiMock.assetApi.getAssetThumbnail.mockResolvedValue({
-			data: thumbnailFile,
-			config: {},
-			headers: {},
-			status: 200,
-			statusText: ''
-		});
-		createObjectURLMock.mockReturnValueOnce(thumbnailUrl);
+  it('shows album data and and loads the thumbnail image when available', async () => {
+    const thumbnailFile = new File([new Blob()], 'fileThumbnail');
+    const thumbnailUrl = 'blob:thumbnailUrlOne';
+    apiMock.assetApi.getAssetThumbnail.mockResolvedValue({
+      data: thumbnailFile,
+      config: {},
+      headers: {},
+      status: 200,
+      statusText: '',
+    });
+    createObjectURLMock.mockReturnValueOnce(thumbnailUrl);
 
-		const album = albumFactory.build({
-			albumThumbnailAssetId: 'thumbnailIdOne',
-			shared: false,
-			albumName: 'some album name'
-		});
-		sut = render(AlbumCard, { album, user: album.owner });
+    const album = albumFactory.build({
+      albumThumbnailAssetId: 'thumbnailIdOne',
+      shared: false,
+      albumName: 'some album name',
+    });
+    sut = render(AlbumCard, { album, user: album.owner });
 
-		const albumImgElement = sut.getByTestId('album-image');
-		const albumNameElement = sut.getByTestId('album-name');
-		const albumDetailsElement = sut.getByTestId('album-details');
-		expect(albumImgElement).toHaveAttribute('alt', album.id);
+    const albumImgElement = sut.getByTestId('album-image');
+    const albumNameElement = sut.getByTestId('album-name');
+    const albumDetailsElement = sut.getByTestId('album-details');
+    expect(albumImgElement).toHaveAttribute('alt', album.id);
 
-		await waitFor(() => expect(albumImgElement).toHaveAttribute('src', thumbnailUrl));
+    await waitFor(() => expect(albumImgElement).toHaveAttribute('src', thumbnailUrl));
 
-		expect(albumImgElement).toHaveAttribute('alt', album.id);
-		expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledTimes(1);
-		expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledWith(
-			{
-				id: 'thumbnailIdOne',
-				format: ThumbnailFormat.Jpeg
-			},
-			{ responseType: 'blob' }
-		);
-		expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailFile);
+    expect(albumImgElement).toHaveAttribute('alt', album.id);
+    expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledTimes(1);
+    expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledWith(
+      {
+        id: 'thumbnailIdOne',
+        format: ThumbnailFormat.Jpeg,
+      },
+      { responseType: 'blob' },
+    );
+    expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailFile);
 
-		expect(albumNameElement).toHaveTextContent('some album name');
-		expect(albumDetailsElement).toHaveTextContent('0 items');
-	});
+    expect(albumNameElement).toHaveTextContent('some album name');
+    expect(albumDetailsElement).toHaveTextContent('0 items');
+  });
 
-	describe('with rendered component - no thumbnail', () => {
-		const album = Object.freeze(albumFactory.build({ albumThumbnailAssetId: null }));
+  describe('with rendered component - no thumbnail', () => {
+    const album = Object.freeze(albumFactory.build({ albumThumbnailAssetId: null }));
 
-		beforeEach(async () => {
-			sut = render(AlbumCard, { album, user: album.owner });
+    beforeEach(async () => {
+      sut = render(AlbumCard, { album, user: album.owner });
 
-			const albumImgElement = sut.getByTestId('album-image');
-			await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
-		});
+      const albumImgElement = sut.getByTestId('album-image');
+      await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
+    });
 
-		it('dispatches custom "click" event with the album in context', async () => {
-			const onClickHandler = jest.fn();
-			sut.component.$on('click', onClickHandler);
-			const albumCardElement = sut.getByTestId('album-card');
+    it('dispatches custom "click" event with the album in context', async () => {
+      const onClickHandler = jest.fn();
+      sut.component.$on('click', onClickHandler);
+      const albumCardElement = sut.getByTestId('album-card');
 
-			await fireEvent.click(albumCardElement);
-			expect(onClickHandler).toHaveBeenCalledTimes(1);
-			expect(onClickHandler).toHaveBeenCalledWith(expect.objectContaining({ detail: album }));
-		});
+      await fireEvent.click(albumCardElement);
+      expect(onClickHandler).toHaveBeenCalledTimes(1);
+      expect(onClickHandler).toHaveBeenCalledWith(expect.objectContaining({ detail: album }));
+    });
 
-		it('dispatches custom "click" event on context menu click with mouse coordinates', async () => {
-			const onClickHandler = jest.fn();
-			sut.component.$on('showalbumcontextmenu', onClickHandler);
+    it('dispatches custom "click" event on context menu click with mouse coordinates', async () => {
+      const onClickHandler = jest.fn();
+      sut.component.$on('showalbumcontextmenu', onClickHandler);
 
-			const contextMenuBtnParent = sut.getByTestId('context-button-parent');
+      const contextMenuBtnParent = sut.getByTestId('context-button-parent');
 
-			await fireEvent(
-				contextMenuBtnParent,
-				new MouseEvent('click', {
-					clientX: 123,
-					clientY: 456
-				})
-			);
+      await fireEvent(
+        contextMenuBtnParent,
+        new MouseEvent('click', {
+          clientX: 123,
+          clientY: 456,
+        }),
+      );
 
-			expect(onClickHandler).toHaveBeenCalledTimes(1);
-			expect(onClickHandler).toHaveBeenCalledWith(
-				expect.objectContaining({ detail: { x: 123, y: 456 } })
-			);
-		});
-	});
+      expect(onClickHandler).toHaveBeenCalledTimes(1);
+      expect(onClickHandler).toHaveBeenCalledWith(expect.objectContaining({ detail: { x: 123, y: 456 } }));
+    });
+  });
 });
diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
index 17ec88676..62f350f74 100644
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/web/src/lib/components/album-page/album-card.svelte
@@ -1,133 +1,133 @@
 <script lang="ts">
-	import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
-	import { locale } from '$lib/stores/preferences.store';
-	import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
-	import { createEventDispatcher, onMount } from 'svelte';
-	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-	import IconButton from '../elements/buttons/icon-button.svelte';
-	import type { OnClick, OnShowContextMenu } from './album-card';
+  import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
+  import { locale } from '$lib/stores/preferences.store';
+  import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+  import IconButton from '../elements/buttons/icon-button.svelte';
+  import type { OnClick, OnShowContextMenu } from './album-card';
 
-	export let album: AlbumResponseDto;
-	export let isSharingView = false;
-	export let user: UserResponseDto;
-	export let showItemCount = true;
-	export let showContextMenu = true;
+  export let album: AlbumResponseDto;
+  export let isSharingView = false;
+  export let user: UserResponseDto;
+  export let showItemCount = true;
+  export let showContextMenu = true;
 
-	$: imageData = album.albumThumbnailAssetId
-		? api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)
-		: noThumbnailUrl;
+  $: imageData = album.albumThumbnailAssetId
+    ? api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)
+    : noThumbnailUrl;
 
-	const dispatchClick = createEventDispatcher<OnClick>();
-	const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();
+  const dispatchClick = createEventDispatcher<OnClick>();
+  const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();
 
-	const loadHighQualityThumbnail = async (thubmnailId: string | null) => {
-		if (thubmnailId == null) {
-			return;
-		}
+  const loadHighQualityThumbnail = async (thubmnailId: string | null) => {
+    if (thubmnailId == null) {
+      return;
+    }
 
-		const { data } = await api.assetApi.getAssetThumbnail(
-			{
-				id: thubmnailId,
-				format: ThumbnailFormat.Jpeg
-			},
-			{
-				responseType: 'blob'
-			}
-		);
+    const { data } = await api.assetApi.getAssetThumbnail(
+      {
+        id: thubmnailId,
+        format: ThumbnailFormat.Jpeg,
+      },
+      {
+        responseType: 'blob',
+      },
+    );
 
-		if (data instanceof Blob) {
-			return URL.createObjectURL(data);
-		}
-	};
+    if (data instanceof Blob) {
+      return URL.createObjectURL(data);
+    }
+  };
 
-	const showAlbumContextMenu = (e: MouseEvent) => {
-		dispatchShowContextMenu('showalbumcontextmenu', {
-			x: e.clientX,
-			y: e.clientY
-		});
-	};
+  const showAlbumContextMenu = (e: MouseEvent) => {
+    dispatchShowContextMenu('showalbumcontextmenu', {
+      x: e.clientX,
+      y: e.clientY,
+    });
+  };
 
-	onMount(async () => {
-		imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || noThumbnailUrl;
-	});
+  onMount(async () => {
+    imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || noThumbnailUrl;
+  });
 
-	const getAlbumOwnerInfo = async (): Promise<UserResponseDto> => {
-		const { data } = await api.userApi.getUserById({ userId: album.ownerId });
+  const getAlbumOwnerInfo = async (): Promise<UserResponseDto> => {
+    const { data } = await api.userApi.getUserById({ userId: album.ownerId });
 
-		return data;
-	};
+    return data;
+  };
 </script>
 
 <div
-	class="group hover:cursor-pointer mt-4 border-[3px] border-transparent dark:hover:border-immich-dark-primary/75 hover:border-immich-primary/75 rounded-3xl p-5 relative"
-	on:click={() => dispatchClick('click', album)}
-	on:keydown={() => dispatchClick('click', album)}
-	data-testid="album-card"
+  class="group hover:cursor-pointer mt-4 border-[3px] border-transparent dark:hover:border-immich-dark-primary/75 hover:border-immich-primary/75 rounded-3xl p-5 relative"
+  on:click={() => dispatchClick('click', album)}
+  on:keydown={() => dispatchClick('click', album)}
+  data-testid="album-card"
 >
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	{#if showContextMenu}
-		<div
-			id={`icon-${album.id}`}
-			class="absolute top-6 right-6 z-10"
-			on:click|stopPropagation|preventDefault={showAlbumContextMenu}
-			data-testid="context-button-parent"
-		>
-			<IconButton color="overlay-primary">
-				<DotsVertical size="20" />
-			</IconButton>
-		</div>
-	{/if}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  {#if showContextMenu}
+    <div
+      id={`icon-${album.id}`}
+      class="absolute top-6 right-6 z-10"
+      on:click|stopPropagation|preventDefault={showAlbumContextMenu}
+      data-testid="context-button-parent"
+    >
+      <IconButton color="overlay-primary">
+        <DotsVertical size="20" />
+      </IconButton>
+    </div>
+  {/if}
 
-	<div class={`aspect-square relative`}>
-		<img
-			src={imageData}
-			alt={album.id}
-			class={`object-cover h-full w-full transition-all z-0 rounded-3xl duration-300 hover:shadow-lg`}
-			data-testid="album-image"
-			draggable="false"
-		/>
-		<div
-			class="w-full h-full absolute top-0 rounded-3xl {isSharingView
-				? 'group-hover:bg-yellow-800/25'
-				: 'group-hover:bg-indigo-800/25'} "
-		/>
-	</div>
+  <div class={`aspect-square relative`}>
+    <img
+      src={imageData}
+      alt={album.id}
+      class={`object-cover h-full w-full transition-all z-0 rounded-3xl duration-300 hover:shadow-lg`}
+      data-testid="album-image"
+      draggable="false"
+    />
+    <div
+      class="w-full h-full absolute top-0 rounded-3xl {isSharingView
+        ? 'group-hover:bg-yellow-800/25'
+        : 'group-hover:bg-indigo-800/25'} "
+    />
+  </div>
 
-	<div class="mt-4">
-		<p
-			class="text-xl font-semibold dark:text-immich-dark-primary text-immich-primary w-full truncate"
-			data-testid="album-name"
-			title={album.albumName}
-		>
-			{album.albumName}
-		</p>
+  <div class="mt-4">
+    <p
+      class="text-xl font-semibold dark:text-immich-dark-primary text-immich-primary w-full truncate"
+      data-testid="album-name"
+      title={album.albumName}
+    >
+      {album.albumName}
+    </p>
 
-		<span class="text-sm flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
-			{#if showItemCount}
-				<p>
-					{album.assetCount.toLocaleString($locale)}
-					{album.assetCount == 1 ? `item` : `items`}
-				</p>
-			{/if}
+    <span class="text-sm flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
+      {#if showItemCount}
+        <p>
+          {album.assetCount.toLocaleString($locale)}
+          {album.assetCount == 1 ? `item` : `items`}
+        </p>
+      {/if}
 
-			{#if isSharingView || album.shared}
-				<p>·</p>
-			{/if}
+      {#if isSharingView || album.shared}
+        <p>·</p>
+      {/if}
 
-			{#if isSharingView}
-				{#await getAlbumOwnerInfo() then albumOwner}
-					{#if user.email == albumOwner.email}
-						<p>Owned</p>
-					{:else}
-						<p>
-							Shared by {albumOwner.firstName}
-							{albumOwner.lastName}
-						</p>
-					{/if}
-				{/await}
-			{:else if album.shared}
-				<p>Shared</p>
-			{/if}
-		</span>
-	</div>
+      {#if isSharingView}
+        {#await getAlbumOwnerInfo() then albumOwner}
+          {#if user.email == albumOwner.email}
+            <p>Owned</p>
+          {:else}
+            <p>
+              Shared by {albumOwner.firstName}
+              {albumOwner.lastName}
+            </p>
+          {/if}
+        {/await}
+      {:else if album.shared}
+        <p>Shared</p>
+      {/if}
+    </span>
+  </div>
 </div>
diff --git a/web/src/lib/components/album-page/album-card.ts b/web/src/lib/components/album-page/album-card.ts
index c69b7e6c3..4d395d3c5 100644
--- a/web/src/lib/components/album-page/album-card.ts
+++ b/web/src/lib/components/album-page/album-card.ts
@@ -1,11 +1,11 @@
 import type { AlbumResponseDto } from '@api';
 
 export type OnShowContextMenu = {
-	showalbumcontextmenu: OnShowContextMenuDetail;
+  showalbumcontextmenu: OnShowContextMenuDetail;
 };
 
 export type OnClick = {
-	click: OnClickDetail;
+  click: OnClickDetail;
 };
 
 export type OnShowContextMenuDetail = { x: number; y: number };
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 4b0c28cc1..c56a579b9 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -1,533 +1,490 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
-	import { afterNavigate, goto } from '$app/navigation';
-	import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
-	import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-	import { locale } from '$lib/stores/preferences.store';
-	import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
-	import {
-		AlbumResponseDto,
-		AssetResponseDto,
-		SharedLinkResponseDto,
-		SharedLinkType,
-		UserResponseDto,
-		api
-	} from '@api';
-	import { onMount } from 'svelte';
-	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-	import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
-	import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
-	import Plus from 'svelte-material-icons/Plus.svelte';
-	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
-	import Button from '../elements/buttons/button.svelte';
-	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-	import DownloadAction from '../photos-page/actions/download-action.svelte';
-	import RemoveFromAlbum from '../photos-page/actions/remove-from-album.svelte';
-	import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
-	import UserAvatar from '../shared-components/user-avatar.svelte';
-	import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
-	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
-	import ControlAppBar from '../shared-components/control-app-bar.svelte';
-	import CreateSharedLinkModal from '../shared-components/create-share-link-modal/create-shared-link-modal.svelte';
-	import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
-	import ImmichLogo from '../shared-components/immich-logo.svelte';
-	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
-	import {
-		NotificationType,
-		notificationController
-	} from '../shared-components/notification/notification';
-	import ThemeButton from '../shared-components/theme-button.svelte';
-	import AssetSelection from './asset-selection.svelte';
-	import ShareInfoModal from './share-info-modal.svelte';
-	import ThumbnailSelection from './thumbnail-selection.svelte';
-	import UserSelectionModal from './user-selection-modal.svelte';
-	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-	import { handleError } from '../../utils/handle-error';
-	import { downloadArchive } from '../../utils/asset-utils';
+  import { browser } from '$app/environment';
+  import { afterNavigate, goto } from '$app/navigation';
+  import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
+  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
+  import { locale } from '$lib/stores/preferences.store';
+  import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
+  import {
+    AlbumResponseDto,
+    AssetResponseDto,
+    SharedLinkResponseDto,
+    SharedLinkType,
+    UserResponseDto,
+    api,
+  } from '@api';
+  import { onMount } from 'svelte';
+  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+  import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
+  import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
+  import Plus from 'svelte-material-icons/Plus.svelte';
+  import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import DownloadAction from '../photos-page/actions/download-action.svelte';
+  import RemoveFromAlbum from '../photos-page/actions/remove-from-album.svelte';
+  import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
+  import MenuOption from '../shared-components/context-menu/menu-option.svelte';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';
+  import CreateSharedLinkModal from '../shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+  import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
+  import ImmichLogo from '../shared-components/immich-logo.svelte';
+  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import ThemeButton from '../shared-components/theme-button.svelte';
+  import AssetSelection from './asset-selection.svelte';
+  import ShareInfoModal from './share-info-modal.svelte';
+  import ThumbnailSelection from './thumbnail-selection.svelte';
+  import UserSelectionModal from './user-selection-modal.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import { handleError } from '../../utils/handle-error';
+  import { downloadArchive } from '../../utils/asset-utils';
 
-	export let album: AlbumResponseDto;
-	export let sharedLink: SharedLinkResponseDto | undefined = undefined;
+  export let album: AlbumResponseDto;
+  export let sharedLink: SharedLinkResponseDto | undefined = undefined;
 
-	const { isAlbumAssetSelectionOpen } = albumAssetSelectionStore;
+  const { isAlbumAssetSelectionOpen } = albumAssetSelectionStore;
 
-	let isShowAssetSelection = false;
+  let isShowAssetSelection = false;
 
-	let isShowShareLinkModal = false;
+  let isShowShareLinkModal = false;
 
-	$: $isAlbumAssetSelectionOpen = isShowAssetSelection;
-	$: {
-		if (browser) {
-			if (isShowAssetSelection) {
-				document.body.style.overflow = 'hidden';
-			} else {
-				document.body.style.overflow = 'auto';
-			}
-		}
-	}
-	let isShowShareUserSelection = false;
-	let isEditingTitle = false;
-	let isCreatingSharedAlbum = false;
-	let isShowShareInfoModal = false;
-	let isShowAlbumOptions = false;
-	let isShowThumbnailSelection = false;
-	let isShowDeleteConfirmation = false;
+  $: $isAlbumAssetSelectionOpen = isShowAssetSelection;
+  $: {
+    if (browser) {
+      if (isShowAssetSelection) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = 'auto';
+      }
+    }
+  }
+  let isShowShareUserSelection = false;
+  let isEditingTitle = false;
+  let isCreatingSharedAlbum = false;
+  let isShowShareInfoModal = false;
+  let isShowAlbumOptions = false;
+  let isShowThumbnailSelection = false;
+  let isShowDeleteConfirmation = false;
 
-	let backUrl = '/albums';
-	let currentAlbumName = '';
-	let currentUser: UserResponseDto;
-	let titleInput: HTMLInputElement;
-	let contextMenuPosition = { x: 0, y: 0 };
+  let backUrl = '/albums';
+  let currentAlbumName = '';
+  let currentUser: UserResponseDto;
+  let titleInput: HTMLInputElement;
+  let contextMenuPosition = { x: 0, y: 0 };
 
-	$: isPublicShared = sharedLink;
-	$: isOwned = currentUser?.id == album.ownerId;
+  $: isPublicShared = sharedLink;
+  $: isOwned = currentUser?.id == album.ownerId;
 
-	dragAndDropFilesStore.subscribe((value) => {
-		if (value.isDragging && value.files.length > 0) {
-			fileUploadHandler(value.files, album.id, sharedLink?.key);
-			dragAndDropFilesStore.set({ isDragging: false, files: [] });
-		}
-	});
+  dragAndDropFilesStore.subscribe((value) => {
+    if (value.isDragging && value.files.length > 0) {
+      fileUploadHandler(value.files, album.id, sharedLink?.key);
+      dragAndDropFilesStore.set({ isDragging: false, files: [] });
+    }
+  });
 
-	let multiSelectAsset: Set<AssetResponseDto> = new Set();
-	$: isMultiSelectionMode = multiSelectAsset.size > 0;
+  let multiSelectAsset: Set<AssetResponseDto> = new Set();
+  $: isMultiSelectionMode = multiSelectAsset.size > 0;
 
-	afterNavigate(({ from }) => {
-		backUrl = from?.url.pathname ?? '/albums';
+  afterNavigate(({ from }) => {
+    backUrl = from?.url.pathname ?? '/albums';
 
-		if (from?.url.pathname === '/sharing' && album.sharedUsers.length === 0) {
-			isCreatingSharedAlbum = true;
-		}
+    if (from?.url.pathname === '/sharing' && album.sharedUsers.length === 0) {
+      isCreatingSharedAlbum = true;
+    }
 
-		if (from?.route.id === '/(user)/search') {
-			backUrl = from.url.href;
-		}
-	});
+    if (from?.route.id === '/(user)/search') {
+      backUrl = from.url.href;
+    }
+  });
 
-	const albumDateFormat: Intl.DateTimeFormatOptions = {
-		month: 'short',
-		day: 'numeric',
-		year: 'numeric'
-	};
+  const albumDateFormat: Intl.DateTimeFormatOptions = {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  };
 
-	const getDateRange = () => {
-		const startDate = new Date(album.assets[0].fileCreatedAt);
-		const endDate = new Date(album.assets[album.assetCount - 1].fileCreatedAt);
+  const getDateRange = () => {
+    const startDate = new Date(album.assets[0].fileCreatedAt);
+    const endDate = new Date(album.assets[album.assetCount - 1].fileCreatedAt);
 
-		const startDateString = startDate.toLocaleDateString($locale, albumDateFormat);
-		const endDateString = endDate.toLocaleDateString($locale, albumDateFormat);
+    const startDateString = startDate.toLocaleDateString($locale, albumDateFormat);
+    const endDateString = endDate.toLocaleDateString($locale, albumDateFormat);
 
-		// If the start and end date are the same, only show one date
-		return startDateString === endDateString
-			? startDateString
-			: `${startDateString} - ${endDateString}`;
-	};
+    // If the start and end date are the same, only show one date
+    return startDateString === endDateString ? startDateString : `${startDateString} - ${endDateString}`;
+  };
 
-	onMount(async () => {
-		currentAlbumName = album.albumName;
+  onMount(async () => {
+    currentAlbumName = album.albumName;
 
-		try {
-			const { data } = await api.userApi.getMyUserInfo();
-			currentUser = data;
-		} catch (e) {
-			console.log('Error [getMyUserInfo - album-viewer] ', e);
-		}
-	});
+    try {
+      const { data } = await api.userApi.getMyUserInfo();
+      currentUser = data;
+    } catch (e) {
+      console.log('Error [getMyUserInfo - album-viewer] ', e);
+    }
+  });
 
-	// Update Album Name
-	$: {
-		if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
-			api.albumApi
-				.updateAlbumInfo({
-					id: album.id,
-					updateAlbumDto: {
-						albumName: album.albumName
-					}
-				})
-				.then(() => {
-					currentAlbumName = album.albumName;
-				})
-				.catch((e) => {
-					console.error('Error [updateAlbumInfo] ', e);
-					notificationController.show({
-						type: NotificationType.Error,
-						message: "Error updating album's name, check console for more details"
-					});
-				});
-		}
-	}
+  // Update Album Name
+  $: {
+    if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
+      api.albumApi
+        .updateAlbumInfo({
+          id: album.id,
+          updateAlbumDto: {
+            albumName: album.albumName,
+          },
+        })
+        .then(() => {
+          currentAlbumName = album.albumName;
+        })
+        .catch((e) => {
+          console.error('Error [updateAlbumInfo] ', e);
+          notificationController.show({
+            type: NotificationType.Error,
+            message: "Error updating album's name, check console for more details",
+          });
+        });
+    }
+  }
 
-	const createAlbumHandler = async (event: CustomEvent) => {
-		const { assets }: { assets: AssetResponseDto[] } = event.detail;
-		try {
-			const { data } = await api.albumApi.addAssetsToAlbum({
-				id: album.id,
-				addAssetsDto: {
-					assetIds: assets.map((a) => a.id)
-				},
-				key: sharedLink?.key
-			});
+  const createAlbumHandler = async (event: CustomEvent) => {
+    const { assets }: { assets: AssetResponseDto[] } = event.detail;
+    try {
+      const { data } = await api.albumApi.addAssetsToAlbum({
+        id: album.id,
+        addAssetsDto: {
+          assetIds: assets.map((a) => a.id),
+        },
+        key: sharedLink?.key,
+      });
 
-			if (data.album) {
-				album = data.album;
-			}
-			isShowAssetSelection = false;
-		} catch (e) {
-			console.error('Error [createAlbumHandler] ', e);
-			notificationController.show({
-				type: NotificationType.Error,
-				message: 'Error creating album, check console for more details'
-			});
-		}
-	};
+      if (data.album) {
+        album = data.album;
+      }
+      isShowAssetSelection = false;
+    } catch (e) {
+      console.error('Error [createAlbumHandler] ', e);
+      notificationController.show({
+        type: NotificationType.Error,
+        message: 'Error creating album, check console for more details',
+      });
+    }
+  };
 
-	const addUserHandler = async (event: CustomEvent) => {
-		const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail;
+  const addUserHandler = async (event: CustomEvent) => {
+    const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail;
 
-		try {
-			const { data } = await api.albumApi.addUsersToAlbum({
-				id: album.id,
-				addUsersDto: {
-					sharedUserIds: Array.from(selectedUsers).map((u) => u.id)
-				}
-			});
+    try {
+      const { data } = await api.albumApi.addUsersToAlbum({
+        id: album.id,
+        addUsersDto: {
+          sharedUserIds: Array.from(selectedUsers).map((u) => u.id),
+        },
+      });
 
-			album = data;
+      album = data;
 
-			isShowShareUserSelection = false;
-		} catch (e) {
-			console.error('Error [addUserHandler] ', e);
-			notificationController.show({
-				type: NotificationType.Error,
-				message: 'Error adding users to album, check console for more details'
-			});
-		}
-	};
+      isShowShareUserSelection = false;
+    } catch (e) {
+      console.error('Error [addUserHandler] ', e);
+      notificationController.show({
+        type: NotificationType.Error,
+        message: 'Error adding users to album, check console for more details',
+      });
+    }
+  };
 
-	const sharedUserDeletedHandler = async (event: CustomEvent) => {
-		const { userId }: { userId: string } = event.detail;
+  const sharedUserDeletedHandler = async (event: CustomEvent) => {
+    const { userId }: { userId: string } = event.detail;
 
-		if (userId == 'me') {
-			isShowShareInfoModal = false;
-			goto(backUrl);
-			return;
-		}
+    if (userId == 'me') {
+      isShowShareInfoModal = false;
+      goto(backUrl);
+      return;
+    }
 
-		try {
-			const { data } = await api.albumApi.getAlbumInfo({ id: album.id });
+    try {
+      const { data } = await api.albumApi.getAlbumInfo({ id: album.id });
 
-			album = data;
-			isShowShareInfoModal = data.sharedUsers.length >= 1;
-		} catch (e) {
-			handleError(e, 'Error deleting share users');
-		}
-	};
+      album = data;
+      isShowShareInfoModal = data.sharedUsers.length >= 1;
+    } catch (e) {
+      handleError(e, 'Error deleting share users');
+    }
+  };
 
-	const removeAlbum = async () => {
-		try {
-			await api.albumApi.deleteAlbum({ id: album.id });
-			goto(backUrl);
-		} catch (e) {
-			console.error('Error [userDeleteMenu] ', e);
-			notificationController.show({
-				type: NotificationType.Error,
-				message: 'Error deleting album, check console for more details'
-			});
-		} finally {
-			isShowDeleteConfirmation = false;
-		}
-	};
+  const removeAlbum = async () => {
+    try {
+      await api.albumApi.deleteAlbum({ id: album.id });
+      goto(backUrl);
+    } catch (e) {
+      console.error('Error [userDeleteMenu] ', e);
+      notificationController.show({
+        type: NotificationType.Error,
+        message: 'Error deleting album, check console for more details',
+      });
+    } finally {
+      isShowDeleteConfirmation = false;
+    }
+  };
 
-	const downloadAlbum = async () => {
-		await downloadArchive(
-			`${album.albumName}.zip`,
-			{ albumId: album.id },
-			undefined,
-			sharedLink?.key
-		);
-	};
+  const downloadAlbum = async () => {
+    await downloadArchive(`${album.albumName}.zip`, { albumId: album.id }, undefined, sharedLink?.key);
+  };
 
-	const showAlbumOptionsMenu = ({ x, y }: MouseEvent) => {
-		contextMenuPosition = { x, y };
-		isShowAlbumOptions = !isShowAlbumOptions;
-	};
+  const showAlbumOptionsMenu = ({ x, y }: MouseEvent) => {
+    contextMenuPosition = { x, y };
+    isShowAlbumOptions = !isShowAlbumOptions;
+  };
 
-	const setAlbumThumbnailHandler = (event: CustomEvent) => {
-		const { asset }: { asset: AssetResponseDto } = event.detail;
-		try {
-			api.albumApi.updateAlbumInfo({
-				id: album.id,
-				updateAlbumDto: {
-					albumThumbnailAssetId: asset.id
-				}
-			});
-		} catch (e) {
-			console.error('Error [setAlbumThumbnailHandler] ', e);
-			notificationController.show({
-				type: NotificationType.Error,
-				message: 'Error setting album thumbnail, check console for more details'
-			});
-		}
+  const setAlbumThumbnailHandler = (event: CustomEvent) => {
+    const { asset }: { asset: AssetResponseDto } = event.detail;
+    try {
+      api.albumApi.updateAlbumInfo({
+        id: album.id,
+        updateAlbumDto: {
+          albumThumbnailAssetId: asset.id,
+        },
+      });
+    } catch (e) {
+      console.error('Error [setAlbumThumbnailHandler] ', e);
+      notificationController.show({
+        type: NotificationType.Error,
+        message: 'Error setting album thumbnail, check console for more details',
+      });
+    }
 
-		isShowThumbnailSelection = false;
-	};
+    isShowThumbnailSelection = false;
+  };
 
-	const onSharedLinkClickHandler = () => {
-		isShowShareUserSelection = false;
-		isShowShareLinkModal = true;
-	};
+  const onSharedLinkClickHandler = () => {
+    isShowShareUserSelection = false;
+    isShowShareLinkModal = true;
+  };
 
-	const handleSelectAll = () => {
-		multiSelectAsset = new Set(album.assets);
-	};
+  const handleSelectAll = () => {
+    multiSelectAsset = new Set(album.assets);
+  };
 </script>
 
 <section class="bg-immich-bg dark:bg-immich-dark-bg" class:hidden={isShowThumbnailSelection}>
-	<!-- Multiselection mode app bar -->
-	{#if isMultiSelectionMode}
-		<AssetSelectControlBar
-			assets={multiSelectAsset}
-			clearSelect={() => (multiSelectAsset = new Set())}
-		>
-			<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
-			{#if sharedLink?.allowDownload || !isPublicShared}
-				<DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink?.key} />
-			{/if}
-			{#if isOwned}
-				<RemoveFromAlbum bind:album />
-			{/if}
-		</AssetSelectControlBar>
-	{/if}
+  <!-- Multiselection mode app bar -->
+  {#if isMultiSelectionMode}
+    <AssetSelectControlBar assets={multiSelectAsset} clearSelect={() => (multiSelectAsset = new Set())}>
+      <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
+      {#if sharedLink?.allowDownload || !isPublicShared}
+        <DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink?.key} />
+      {/if}
+      {#if isOwned}
+        <RemoveFromAlbum bind:album />
+      {/if}
+    </AssetSelectControlBar>
+  {/if}
 
-	<!-- Default app bar -->
-	{#if !isMultiSelectionMode}
-		<ControlAppBar
-			on:close-button-click={() => goto(backUrl)}
-			backIcon={ArrowLeft}
-			showBackButton={(!isPublicShared && isOwned) ||
-				(!isPublicShared && !isOwned) ||
-				(isPublicShared && isOwned)}
-		>
-			<svelte:fragment slot="leading">
-				{#if isPublicShared && !isOwned}
-					<a
-						data-sveltekit-preload-data="hover"
-						class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
-						href="https://immich.app"
-					>
-						<ImmichLogo height={30} width={30} />
-						<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">
-							IMMICH
-						</h1>
-					</a>
-				{/if}
-			</svelte:fragment>
+  <!-- Default app bar -->
+  {#if !isMultiSelectionMode}
+    <ControlAppBar
+      on:close-button-click={() => goto(backUrl)}
+      backIcon={ArrowLeft}
+      showBackButton={(!isPublicShared && isOwned) || (!isPublicShared && !isOwned) || (isPublicShared && isOwned)}
+    >
+      <svelte:fragment slot="leading">
+        {#if isPublicShared && !isOwned}
+          <a
+            data-sveltekit-preload-data="hover"
+            class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
+            href="https://immich.app"
+          >
+            <ImmichLogo height={30} width={30} />
+            <h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">IMMICH</h1>
+          </a>
+        {/if}
+      </svelte:fragment>
 
-			<svelte:fragment slot="trailing">
-				{#if !isCreatingSharedAlbum}
-					{#if !sharedLink}
-						<CircleIconButton
-							title="Add Photos"
-							on:click={() => (isShowAssetSelection = true)}
-							logo={FileImagePlusOutline}
-						/>
-					{:else if sharedLink?.allowUpload}
-						<CircleIconButton
-							title="Add Photos"
-							on:click={() => openFileUploadDialog(album.id, sharedLink?.key)}
-							logo={FileImagePlusOutline}
-						/>
-					{/if}
+      <svelte:fragment slot="trailing">
+        {#if !isCreatingSharedAlbum}
+          {#if !sharedLink}
+            <CircleIconButton
+              title="Add Photos"
+              on:click={() => (isShowAssetSelection = true)}
+              logo={FileImagePlusOutline}
+            />
+          {:else if sharedLink?.allowUpload}
+            <CircleIconButton
+              title="Add Photos"
+              on:click={() => openFileUploadDialog(album.id, sharedLink?.key)}
+              logo={FileImagePlusOutline}
+            />
+          {/if}
 
-					{#if isOwned}
-						<CircleIconButton
-							title="Share"
-							on:click={() => (isShowShareUserSelection = true)}
-							logo={ShareVariantOutline}
-						/>
-						<CircleIconButton
-							title="Remove album"
-							on:click={() => (isShowDeleteConfirmation = true)}
-							logo={DeleteOutline}
-						/>
-					{/if}
-				{/if}
+          {#if isOwned}
+            <CircleIconButton
+              title="Share"
+              on:click={() => (isShowShareUserSelection = true)}
+              logo={ShareVariantOutline}
+            />
+            <CircleIconButton
+              title="Remove album"
+              on:click={() => (isShowDeleteConfirmation = true)}
+              logo={DeleteOutline}
+            />
+          {/if}
+        {/if}
 
-				{#if album.assetCount > 0 && !isCreatingSharedAlbum}
-					{#if !isPublicShared || (isPublicShared && sharedLink?.allowDownload)}
-						<CircleIconButton
-							title="Download"
-							on:click={() => downloadAlbum()}
-							logo={FolderDownloadOutline}
-						/>
-					{/if}
+        {#if album.assetCount > 0 && !isCreatingSharedAlbum}
+          {#if !isPublicShared || (isPublicShared && sharedLink?.allowDownload)}
+            <CircleIconButton title="Download" on:click={() => downloadAlbum()} logo={FolderDownloadOutline} />
+          {/if}
 
-					{#if !isPublicShared && isOwned}
-						<CircleIconButton
-							title="Album options"
-							on:click={showAlbumOptionsMenu}
-							logo={DotsVertical}
-						>
-							{#if isShowAlbumOptions}
-								<ContextMenu
-									{...contextMenuPosition}
-									on:outclick={() => (isShowAlbumOptions = false)}
-								>
-									<MenuOption
-										on:click={() => {
-											isShowThumbnailSelection = true;
-											isShowAlbumOptions = false;
-										}}
-										text="Set album cover"
-									/>
-								</ContextMenu>
-							{/if}
-						</CircleIconButton>
-					{/if}
-				{/if}
+          {#if !isPublicShared && isOwned}
+            <CircleIconButton title="Album options" on:click={showAlbumOptionsMenu} logo={DotsVertical}>
+              {#if isShowAlbumOptions}
+                <ContextMenu {...contextMenuPosition} on:outclick={() => (isShowAlbumOptions = false)}>
+                  <MenuOption
+                    on:click={() => {
+                      isShowThumbnailSelection = true;
+                      isShowAlbumOptions = false;
+                    }}
+                    text="Set album cover"
+                  />
+                </ContextMenu>
+              {/if}
+            </CircleIconButton>
+          {/if}
+        {/if}
 
-				{#if isPublicShared}
-					<ThemeButton />
-				{/if}
+        {#if isPublicShared}
+          <ThemeButton />
+        {/if}
 
-				{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
-					<Button
-						size="sm"
-						rounded="lg"
-						disabled={album.assetCount == 0}
-						on:click={() => (isShowShareUserSelection = true)}
-					>
-						Share
-					</Button>
-				{/if}
-			</svelte:fragment>
-		</ControlAppBar>
-	{/if}
+        {#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
+          <Button
+            size="sm"
+            rounded="lg"
+            disabled={album.assetCount == 0}
+            on:click={() => (isShowShareUserSelection = true)}
+          >
+            Share
+          </Button>
+        {/if}
+      </svelte:fragment>
+    </ControlAppBar>
+  {/if}
 
-	<section class="flex flex-col my-[160px] px-6 sm:px-12 md:px-24 lg:px-40">
-		<input
-			on:keydown={(e) => {
-				if (e.key == 'Enter') {
-					isEditingTitle = false;
-					titleInput.blur();
-				}
-			}}
-			on:focus={() => (isEditingTitle = true)}
-			on:blur={() => (isEditingTitle = false)}
-			class={`transition-all text-6xl text-immich-primary dark:text-immich-dark-primary w-[99%] border-b-2 border-transparent outline-none ${
-				isOwned ? 'hover:border-gray-400' : 'hover:border-transparent'
-			} focus:outline-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary bg-immich-bg dark:bg-immich-dark-bg dark:focus:bg-immich-dark-gray`}
-			type="text"
-			bind:value={album.albumName}
-			disabled={!isOwned}
-			bind:this={titleInput}
-		/>
+  <section class="flex flex-col my-[160px] px-6 sm:px-12 md:px-24 lg:px-40">
+    <input
+      on:keydown={(e) => {
+        if (e.key == 'Enter') {
+          isEditingTitle = false;
+          titleInput.blur();
+        }
+      }}
+      on:focus={() => (isEditingTitle = true)}
+      on:blur={() => (isEditingTitle = false)}
+      class={`transition-all text-6xl text-immich-primary dark:text-immich-dark-primary w-[99%] border-b-2 border-transparent outline-none ${
+        isOwned ? 'hover:border-gray-400' : 'hover:border-transparent'
+      } focus:outline-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary bg-immich-bg dark:bg-immich-dark-bg dark:focus:bg-immich-dark-gray`}
+      type="text"
+      bind:value={album.albumName}
+      disabled={!isOwned}
+      bind:this={titleInput}
+    />
 
-		{#if album.assetCount > 0}
-			<span class="flex gap-2 my-4 text-sm text-gray-500 font-medium" data-testid="album-details">
-				<p class="">{getDateRange()}</p>
-				<p>·</p>
-				<p>{album.assetCount} items</p>
-			</span>
-		{/if}
-		{#if album.shared}
-			<div class="flex my-6 gap-x-1">
-				{#each album.sharedUsers as user (user.id)}
-					<button on:click={() => (isShowShareInfoModal = true)}>
-						<UserAvatar {user} size="md" autoColor />
-					</button>
-				{/each}
+    {#if album.assetCount > 0}
+      <span class="flex gap-2 my-4 text-sm text-gray-500 font-medium" data-testid="album-details">
+        <p class="">{getDateRange()}</p>
+        <p>·</p>
+        <p>{album.assetCount} items</p>
+      </span>
+    {/if}
+    {#if album.shared}
+      <div class="flex my-6 gap-x-1">
+        {#each album.sharedUsers as user (user.id)}
+          <button on:click={() => (isShowShareInfoModal = true)}>
+            <UserAvatar {user} size="md" autoColor />
+          </button>
+        {/each}
 
-				<button
-					style:display={isOwned ? 'block' : 'none'}
-					on:click={() => (isShowShareUserSelection = true)}
-					title="Add more users"
-					class="h-12 w-12 border bg-white transition-colors hover:bg-gray-300 text-3xl flex place-items-center place-content-center rounded-full"
-					>+</button
-				>
-			</div>
-		{/if}
+        <button
+          style:display={isOwned ? 'block' : 'none'}
+          on:click={() => (isShowShareUserSelection = true)}
+          title="Add more users"
+          class="h-12 w-12 border bg-white transition-colors hover:bg-gray-300 text-3xl flex place-items-center place-content-center rounded-full"
+          >+</button
+        >
+      </div>
+    {/if}
 
-		{#if album.assetCount > 0}
-			<GalleryViewer
-				assets={album.assets}
-				{sharedLink}
-				bind:selectedAssets={multiSelectAsset}
-				viewFrom="album-page"
-			/>
-		{:else}
-			<!-- Album is empty - Show asset selectection buttons -->
-			<section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
-				<div class="w-[300px]">
-					<p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
-					<button
-						on:click={() => (isShowAssetSelection = true)}
-						class="w-full py-8 border bg-immich-bg dark:bg-immich-dark-gray text-immich-fg dark:text-immich-dark-fg dark:hover:text-immich-dark-primary rounded-md mt-5 flex place-items-center gap-6 px-8 transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none"
-					>
-						<span class="text-text-immich-primary dark:text-immich-dark-primary"
-							><Plus size="24" />
-						</span>
-						<span class="text-lg">Select photos</span>
-					</button>
-				</div>
-			</section>
-		{/if}
-	</section>
+    {#if album.assetCount > 0}
+      <GalleryViewer assets={album.assets} {sharedLink} bind:selectedAssets={multiSelectAsset} viewFrom="album-page" />
+    {:else}
+      <!-- Album is empty - Show asset selectection buttons -->
+      <section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
+        <div class="w-[300px]">
+          <p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
+          <button
+            on:click={() => (isShowAssetSelection = true)}
+            class="w-full py-8 border bg-immich-bg dark:bg-immich-dark-gray text-immich-fg dark:text-immich-dark-fg dark:hover:text-immich-dark-primary rounded-md mt-5 flex place-items-center gap-6 px-8 transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none"
+          >
+            <span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="24" /> </span>
+            <span class="text-lg">Select photos</span>
+          </button>
+        </div>
+      </section>
+    {/if}
+  </section>
 </section>
 
 {#if isShowAssetSelection}
-	<AssetSelection
-		albumId={album.id}
-		assetsInAlbum={album.assets}
-		on:go-back={() => (isShowAssetSelection = false)}
-		on:create-album={createAlbumHandler}
-	/>
+  <AssetSelection
+    albumId={album.id}
+    assetsInAlbum={album.assets}
+    on:go-back={() => (isShowAssetSelection = false)}
+    on:create-album={createAlbumHandler}
+  />
 {/if}
 
 {#if isShowShareUserSelection}
-	<UserSelectionModal
-		{album}
-		on:close={() => (isShowShareUserSelection = false)}
-		on:add-user={addUserHandler}
-		on:sharedlinkclick={onSharedLinkClickHandler}
-		sharedUsersInAlbum={new Set(album.sharedUsers)}
-	/>
+  <UserSelectionModal
+    {album}
+    on:close={() => (isShowShareUserSelection = false)}
+    on:add-user={addUserHandler}
+    on:sharedlinkclick={onSharedLinkClickHandler}
+    sharedUsersInAlbum={new Set(album.sharedUsers)}
+  />
 {/if}
 
 {#if isShowShareLinkModal}
-	<CreateSharedLinkModal
-		on:close={() => (isShowShareLinkModal = false)}
-		shareType={SharedLinkType.Album}
-		{album}
-	/>
+  <CreateSharedLinkModal on:close={() => (isShowShareLinkModal = false)} shareType={SharedLinkType.Album} {album} />
 {/if}
 {#if isShowShareInfoModal}
-	<ShareInfoModal
-		on:close={() => (isShowShareInfoModal = false)}
-		{album}
-		on:user-deleted={sharedUserDeletedHandler}
-	/>
+  <ShareInfoModal on:close={() => (isShowShareInfoModal = false)} {album} on:user-deleted={sharedUserDeletedHandler} />
 {/if}
 
 {#if isShowThumbnailSelection}
-	<ThumbnailSelection
-		{album}
-		on:close={() => (isShowThumbnailSelection = false)}
-		on:thumbnail-selected={setAlbumThumbnailHandler}
-	/>
+  <ThumbnailSelection
+    {album}
+    on:close={() => (isShowThumbnailSelection = false)}
+    on:thumbnail-selected={setAlbumThumbnailHandler}
+  />
 {/if}
 
 {#if isShowDeleteConfirmation}
-	<ConfirmDialogue
-		title="Delete Album"
-		confirmText="Delete"
-		on:confirm={removeAlbum}
-		on:cancel={() => (isShowDeleteConfirmation = false)}
-	>
-		<svelte:fragment slot="prompt">
-			<p>Are you sure you want to delete the album <b>{album.albumName}</b>?</p>
-			<p>If this album is shared, other users will not be able to access it anymore.</p>
-		</svelte:fragment>
-	</ConfirmDialogue>
+  <ConfirmDialogue
+    title="Delete Album"
+    confirmText="Delete"
+    on:confirm={removeAlbum}
+    on:cancel={() => (isShowDeleteConfirmation = false)}
+  >
+    <svelte:fragment slot="prompt">
+      <p>Are you sure you want to delete the album <b>{album.albumName}</b>?</p>
+      <p>If this album is shared, other users will not be able to access it anymore.</p>
+    </svelte:fragment>
+  </ConfirmDialogue>
 {/if}
diff --git a/web/src/lib/components/album-page/asset-selection.svelte b/web/src/lib/components/album-page/asset-selection.svelte
index 6282da2c3..054ed7c4c 100644
--- a/web/src/lib/components/album-page/asset-selection.svelte
+++ b/web/src/lib/components/album-page/asset-selection.svelte
@@ -1,80 +1,69 @@
 <script lang="ts">
-	import {
-		assetInteractionStore,
-		assetsInAlbumStoreState,
-		selectedAssets
-	} from '$lib/stores/asset-interaction.store';
-	import { locale } from '$lib/stores/preferences.store';
-	import { openFileUploadDialog } from '$lib/utils/file-uploader';
-	import type { AssetResponseDto } from '@api';
-	import { createEventDispatcher, onMount } from 'svelte';
-	import { quintOut } from 'svelte/easing';
-	import { fly } from 'svelte/transition';
-	import Button from '../elements/buttons/button.svelte';
-	import AssetGrid from '../photos-page/asset-grid.svelte';
-	import ControlAppBar from '../shared-components/control-app-bar.svelte';
+  import { assetInteractionStore, assetsInAlbumStoreState, selectedAssets } from '$lib/stores/asset-interaction.store';
+  import { locale } from '$lib/stores/preferences.store';
+  import { openFileUploadDialog } from '$lib/utils/file-uploader';
+  import type { AssetResponseDto } from '@api';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import Button from '../elements/buttons/button.svelte';
+  import AssetGrid from '../photos-page/asset-grid.svelte';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	export let albumId: string;
-	export let assetsInAlbum: AssetResponseDto[];
+  export let albumId: string;
+  export let assetsInAlbum: AssetResponseDto[];
 
-	onMount(() => {
-		$assetsInAlbumStoreState = assetsInAlbum;
-	});
+  onMount(() => {
+    $assetsInAlbumStoreState = assetsInAlbum;
+  });
 
-	const addSelectedAssets = async () => {
-		dispatch('create-album', {
-			assets: Array.from($selectedAssets)
-		});
+  const addSelectedAssets = async () => {
+    dispatch('create-album', {
+      assets: Array.from($selectedAssets),
+    });
 
-		assetInteractionStore.clearMultiselect();
-	};
-	const handleSelectFromComputerClicked = async () => {
-		await openFileUploadDialog(albumId, '');
-		assetInteractionStore.clearMultiselect();
-		dispatch('go-back');
-	};
+    assetInteractionStore.clearMultiselect();
+  };
+  const handleSelectFromComputerClicked = async () => {
+    await openFileUploadDialog(albumId, '');
+    assetInteractionStore.clearMultiselect();
+    dispatch('go-back');
+  };
 </script>
 
 <section
-	transition:fly={{ y: 500, duration: 100, easing: quintOut }}
-	class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
+  transition:fly={{ y: 500, duration: 100, easing: quintOut }}
+  class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
 >
-	<ControlAppBar
-		on:close-button-click={() => {
-			assetInteractionStore.clearMultiselect();
-			dispatch('go-back');
-		}}
-	>
-		<svelte:fragment slot="leading">
-			{#if $selectedAssets.size == 0}
-				<p class="text-lg dark:text-immich-dark-fg">Add to album</p>
-			{:else}
-				<p class="text-lg dark:text-immich-dark-fg">
-					{$selectedAssets.size.toLocaleString($locale)} selected
-				</p>
-			{/if}
-		</svelte:fragment>
+  <ControlAppBar
+    on:close-button-click={() => {
+      assetInteractionStore.clearMultiselect();
+      dispatch('go-back');
+    }}
+  >
+    <svelte:fragment slot="leading">
+      {#if $selectedAssets.size == 0}
+        <p class="text-lg dark:text-immich-dark-fg">Add to album</p>
+      {:else}
+        <p class="text-lg dark:text-immich-dark-fg">
+          {$selectedAssets.size.toLocaleString($locale)} selected
+        </p>
+      {/if}
+    </svelte:fragment>
 
-		<svelte:fragment slot="trailing">
-			<button
-				on:click={handleSelectFromComputerClicked}
-				class="text-immich-primary dark:text-immich-dark-primary text-sm hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/25 transition-all px-6 py-2 rounded-lg font-medium"
-			>
-				Select from computer
-			</button>
-			<Button
-				size="sm"
-				rounded="lg"
-				disabled={$selectedAssets.size === 0}
-				on:click={addSelectedAssets}
-			>
-				Done
-			</Button>
-		</svelte:fragment>
-	</ControlAppBar>
-	<section class="pt-[100px] pl-[70px] grid h-screen bg-immich-bg dark:bg-immich-dark-bg">
-		<AssetGrid isAlbumSelectionMode={true} />
-	</section>
+    <svelte:fragment slot="trailing">
+      <button
+        on:click={handleSelectFromComputerClicked}
+        class="text-immich-primary dark:text-immich-dark-primary text-sm hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/25 transition-all px-6 py-2 rounded-lg font-medium"
+      >
+        Select from computer
+      </button>
+      <Button size="sm" rounded="lg" disabled={$selectedAssets.size === 0} on:click={addSelectedAssets}>Done</Button>
+    </svelte:fragment>
+  </ControlAppBar>
+  <section class="pt-[100px] pl-[70px] grid h-screen bg-immich-bg dark:bg-immich-dark-bg">
+    <AssetGrid isAlbumSelectionMode={true} />
+  </section>
 </section>
diff --git a/web/src/lib/components/album-page/share-info-modal.svelte b/web/src/lib/components/album-page/share-info-modal.svelte
index 593e93b34..f93bd3393 100644
--- a/web/src/lib/components/album-page/share-info-modal.svelte
+++ b/web/src/lib/components/album-page/share-info-modal.svelte
@@ -1,144 +1,140 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
-	import { AlbumResponseDto, api, UserResponseDto } from '@api';
-	import BaseModal from '../shared-components/base-modal.svelte';
-	import UserAvatar from '../shared-components/user-avatar.svelte';
-	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-	import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
-	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '../shared-components/notification/notification';
-	import { handleError } from '../../utils/handle-error';
-	import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { AlbumResponseDto, api, UserResponseDto } from '@api';
+  import BaseModal from '../shared-components/base-modal.svelte';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
+  import MenuOption from '../shared-components/context-menu/menu-option.svelte';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import { handleError } from '../../utils/handle-error';
+  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
 
-	export let album: AlbumResponseDto;
+  export let album: AlbumResponseDto;
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	let currentUser: UserResponseDto;
-	let position = { x: 0, y: 0 };
-	let selectedMenuUser: UserResponseDto | null = null;
-	let selectedRemoveUser: UserResponseDto | null = null;
+  let currentUser: UserResponseDto;
+  let position = { x: 0, y: 0 };
+  let selectedMenuUser: UserResponseDto | null = null;
+  let selectedRemoveUser: UserResponseDto | null = null;
 
-	$: isOwned = currentUser?.id == album.ownerId;
+  $: isOwned = currentUser?.id == album.ownerId;
 
-	onMount(async () => {
-		try {
-			const { data } = await api.userApi.getMyUserInfo();
-			currentUser = data;
-		} catch (e) {
-			handleError(e, 'Unable to refresh user');
-		}
-	});
+  onMount(async () => {
+    try {
+      const { data } = await api.userApi.getMyUserInfo();
+      currentUser = data;
+    } catch (e) {
+      handleError(e, 'Unable to refresh user');
+    }
+  });
 
-	const showContextMenu = (user: UserResponseDto) => {
-		const iconButton = document.getElementById('icon-' + user.id);
+  const showContextMenu = (user: UserResponseDto) => {
+    const iconButton = document.getElementById('icon-' + user.id);
 
-		if (iconButton) {
-			position = {
-				x: iconButton.getBoundingClientRect().left,
-				y: iconButton.getBoundingClientRect().bottom
-			};
-		}
+    if (iconButton) {
+      position = {
+        x: iconButton.getBoundingClientRect().left,
+        y: iconButton.getBoundingClientRect().bottom,
+      };
+    }
 
-		selectedMenuUser = user;
-		selectedRemoveUser = null;
-	};
+    selectedMenuUser = user;
+    selectedRemoveUser = null;
+  };
 
-	const handleMenuRemove = () => {
-		selectedRemoveUser = selectedMenuUser;
-		selectedMenuUser = null;
-	};
+  const handleMenuRemove = () => {
+    selectedRemoveUser = selectedMenuUser;
+    selectedMenuUser = null;
+  };
 
-	const handleRemoveUser = async () => {
-		if (!selectedRemoveUser) {
-			return;
-		}
+  const handleRemoveUser = async () => {
+    if (!selectedRemoveUser) {
+      return;
+    }
 
-		const userId = selectedRemoveUser.id === currentUser?.id ? 'me' : selectedRemoveUser.id;
+    const userId = selectedRemoveUser.id === currentUser?.id ? 'me' : selectedRemoveUser.id;
 
-		try {
-			await api.albumApi.removeUserFromAlbum({ id: album.id, userId });
-			dispatch('user-deleted', { userId });
-			const message =
-				userId === 'me' ? `Left ${album.albumName}` : `Removed ${selectedRemoveUser.firstName}`;
-			notificationController.show({ type: NotificationType.Info, message });
-		} catch (e) {
-			handleError(e, 'Unable to remove user');
-		} finally {
-			selectedRemoveUser = null;
-		}
-	};
+    try {
+      await api.albumApi.removeUserFromAlbum({ id: album.id, userId });
+      dispatch('user-deleted', { userId });
+      const message = userId === 'me' ? `Left ${album.albumName}` : `Removed ${selectedRemoveUser.firstName}`;
+      notificationController.show({ type: NotificationType.Info, message });
+    } catch (e) {
+      handleError(e, 'Unable to remove user');
+    } finally {
+      selectedRemoveUser = null;
+    }
+  };
 </script>
 
 {#if !selectedRemoveUser}
-	<BaseModal on:close={() => dispatch('close')}>
-		<svelte:fragment slot="title">
-			<span class="flex gap-2 place-items-center">
-				<p class="font-medium text-immich-fg dark:text-immich-dark-fg">Options</p>
-			</span>
-		</svelte:fragment>
+  <BaseModal on:close={() => dispatch('close')}>
+    <svelte:fragment slot="title">
+      <span class="flex gap-2 place-items-center">
+        <p class="font-medium text-immich-fg dark:text-immich-dark-fg">Options</p>
+      </span>
+    </svelte:fragment>
 
-		<section class="max-h-[400px] overflow-y-auto immich-scrollbar pb-4">
-			{#each album.sharedUsers as user}
-				<div
-					class="flex gap-4 p-5 place-items-center justify-between w-full transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
-				>
-					<div class="flex gap-4 place-items-center">
-						<UserAvatar {user} size="md" autoColor />
-						<p class="font-medium text-sm">{user.firstName} {user.lastName}</p>
-					</div>
+    <section class="max-h-[400px] overflow-y-auto immich-scrollbar pb-4">
+      {#each album.sharedUsers as user}
+        <div
+          class="flex gap-4 p-5 place-items-center justify-between w-full transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
+        >
+          <div class="flex gap-4 place-items-center">
+            <UserAvatar {user} size="md" autoColor />
+            <p class="font-medium text-sm">{user.firstName} {user.lastName}</p>
+          </div>
 
-					<div id={`icon-${user.id}`} class="flex place-items-center">
-						{#if isOwned}
-							<div>
-								<CircleIconButton
-									on:click={() => showContextMenu(user)}
-									logo={DotsVertical}
-									backgroundColor="transparent"
-									hoverColor="#e2e7e9"
-									size="20"
-								/>
+          <div id={`icon-${user.id}`} class="flex place-items-center">
+            {#if isOwned}
+              <div>
+                <CircleIconButton
+                  on:click={() => showContextMenu(user)}
+                  logo={DotsVertical}
+                  backgroundColor="transparent"
+                  hoverColor="#e2e7e9"
+                  size="20"
+                />
 
-								{#if selectedMenuUser === user}
-									<ContextMenu {...position} on:outclick={() => (selectedMenuUser = null)}>
-										<MenuOption on:click={handleMenuRemove} text="Remove" />
-									</ContextMenu>
-								{/if}
-							</div>
-						{:else if user.id == currentUser?.id}
-							<button
-								on:click={() => (selectedRemoveUser = user)}
-								class="text-sm text-immich-primary dark:text-immich-dark-primary font-medium transition-colors hover:text-immich-primary/75"
-								>Leave</button
-							>
-						{/if}
-					</div>
-				</div>
-			{/each}
-		</section>
-	</BaseModal>
+                {#if selectedMenuUser === user}
+                  <ContextMenu {...position} on:outclick={() => (selectedMenuUser = null)}>
+                    <MenuOption on:click={handleMenuRemove} text="Remove" />
+                  </ContextMenu>
+                {/if}
+              </div>
+            {:else if user.id == currentUser?.id}
+              <button
+                on:click={() => (selectedRemoveUser = user)}
+                class="text-sm text-immich-primary dark:text-immich-dark-primary font-medium transition-colors hover:text-immich-primary/75"
+                >Leave</button
+              >
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </section>
+  </BaseModal>
 {/if}
 
 {#if selectedRemoveUser && selectedRemoveUser?.id === currentUser?.id}
-	<ConfirmDialogue
-		title="Leave Album?"
-		prompt="Are you sure you want to leave {album.albumName}?"
-		confirmText="Leave"
-		on:confirm={handleRemoveUser}
-		on:cancel={() => (selectedRemoveUser = null)}
-	/>
+  <ConfirmDialogue
+    title="Leave Album?"
+    prompt="Are you sure you want to leave {album.albumName}?"
+    confirmText="Leave"
+    on:confirm={handleRemoveUser}
+    on:cancel={() => (selectedRemoveUser = null)}
+  />
 {/if}
 
 {#if selectedRemoveUser && selectedRemoveUser?.id !== currentUser?.id}
-	<ConfirmDialogue
-		title="Remove User?"
-		prompt="Are you sure you want to remove {selectedRemoveUser.firstName} {selectedRemoveUser.lastName}"
-		confirmText="Remove"
-		on:confirm={handleRemoveUser}
-		on:cancel={() => (selectedRemoveUser = null)}
-	/>
+  <ConfirmDialogue
+    title="Remove User?"
+    prompt="Are you sure you want to remove {selectedRemoveUser.firstName} {selectedRemoveUser.lastName}"
+    confirmText="Remove"
+    on:confirm={handleRemoveUser}
+    on:cancel={() => (selectedRemoveUser = null)}
+  />
 {/if}
diff --git a/web/src/lib/components/album-page/thumbnail-selection.svelte b/web/src/lib/components/album-page/thumbnail-selection.svelte
index 6486ad60e..0d9d5deb3 100644
--- a/web/src/lib/components/album-page/thumbnail-selection.svelte
+++ b/web/src/lib/components/album-page/thumbnail-selection.svelte
@@ -1,57 +1,53 @@
 <script lang="ts">
-	import type { AlbumResponseDto, AssetResponseDto } from '@api';
-	import { createEventDispatcher } from 'svelte';
-	import { quintOut } from 'svelte/easing';
-	import { fly } from 'svelte/transition';
-	import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
-	import Button from '../elements/buttons/button.svelte';
-	import ControlAppBar from '../shared-components/control-app-bar.svelte';
+  import type { AlbumResponseDto, AssetResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';
 
-	export let album: AlbumResponseDto;
+  export let album: AlbumResponseDto;
 
-	let selectedThumbnail: AssetResponseDto | undefined;
-	const dispatch = createEventDispatcher();
+  let selectedThumbnail: AssetResponseDto | undefined;
+  const dispatch = createEventDispatcher();
 
-	$: isSelected = (id: string): boolean | undefined => {
-		if (!selectedThumbnail && album.albumThumbnailAssetId == id) {
-			return true;
-		} else {
-			return selectedThumbnail?.id == id;
-		}
-	};
+  $: isSelected = (id: string): boolean | undefined => {
+    if (!selectedThumbnail && album.albumThumbnailAssetId == id) {
+      return true;
+    } else {
+      return selectedThumbnail?.id == id;
+    }
+  };
 </script>
 
 <section
-	transition:fly={{ y: 500, duration: 100, easing: quintOut }}
-	class="absolute top-0 left-0 w-full h-full py-[160px] bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
+  transition:fly={{ y: 500, duration: 100, easing: quintOut }}
+  class="absolute top-0 left-0 w-full h-full py-[160px] bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
 >
-	<ControlAppBar on:close-button-click={() => dispatch('close')}>
-		<svelte:fragment slot="leading">
-			<p class="text-lg">Select album cover</p>
-		</svelte:fragment>
+  <ControlAppBar on:close-button-click={() => dispatch('close')}>
+    <svelte:fragment slot="leading">
+      <p class="text-lg">Select album cover</p>
+    </svelte:fragment>
 
-		<svelte:fragment slot="trailing">
-			<Button
-				size="sm"
-				rounded="lg"
-				disabled={selectedThumbnail == undefined}
-				on:click={() => dispatch('thumbnail-selected', { asset: selectedThumbnail })}
-			>
-				Done
-			</Button>
-		</svelte:fragment>
-	</ControlAppBar>
+    <svelte:fragment slot="trailing">
+      <Button
+        size="sm"
+        rounded="lg"
+        disabled={selectedThumbnail == undefined}
+        on:click={() => dispatch('thumbnail-selected', { asset: selectedThumbnail })}
+      >
+        Done
+      </Button>
+    </svelte:fragment>
+  </ControlAppBar>
 
-	<section class="flex flex-wrap gap-14 px-20 overflow-y-auto">
-		<!-- Image grid -->
-		<div class="flex flex-wrap gap-[2px]">
-			{#each album.assets as asset}
-				<Thumbnail
-					{asset}
-					on:click={() => (selectedThumbnail = asset)}
-					selected={isSelected(asset.id)}
-				/>
-			{/each}
-		</div>
-	</section>
+  <section class="flex flex-wrap gap-14 px-20 overflow-y-auto">
+    <!-- Image grid -->
+    <div class="flex flex-wrap gap-[2px]">
+      {#each album.assets as asset}
+        <Thumbnail {asset} on:click={() => (selectedThumbnail = asset)} selected={isSelected(asset.id)} />
+      {/each}
+    </div>
+  </section>
 </section>
diff --git a/web/src/lib/components/album-page/user-selection-modal.svelte b/web/src/lib/components/album-page/user-selection-modal.svelte
index 207b9e440..3312dbd1d 100644
--- a/web/src/lib/components/album-page/user-selection-modal.svelte
+++ b/web/src/lib/components/album-page/user-selection-modal.svelte
@@ -1,149 +1,146 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
-	import { AlbumResponseDto, api, SharedLinkResponseDto, UserResponseDto } from '@api';
-	import BaseModal from '../shared-components/base-modal.svelte';
-	import UserAvatar from '../shared-components/user-avatar.svelte';
-	import Link from 'svelte-material-icons/Link.svelte';
-	import ShareCircle from 'svelte-material-icons/ShareCircle.svelte';
-	import { goto } from '$app/navigation';
-	import ImmichLogo from '../shared-components/immich-logo.svelte';
-	import Button from '../elements/buttons/button.svelte';
-	import { AppRoute } from '$lib/constants';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { AlbumResponseDto, api, SharedLinkResponseDto, UserResponseDto } from '@api';
+  import BaseModal from '../shared-components/base-modal.svelte';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import Link from 'svelte-material-icons/Link.svelte';
+  import ShareCircle from 'svelte-material-icons/ShareCircle.svelte';
+  import { goto } from '$app/navigation';
+  import ImmichLogo from '../shared-components/immich-logo.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import { AppRoute } from '$lib/constants';
 
-	export let album: AlbumResponseDto;
-	export let sharedUsersInAlbum: Set<UserResponseDto>;
-	let users: UserResponseDto[] = [];
-	let selectedUsers: UserResponseDto[] = [];
+  export let album: AlbumResponseDto;
+  export let sharedUsersInAlbum: Set<UserResponseDto>;
+  let users: UserResponseDto[] = [];
+  let selectedUsers: UserResponseDto[] = [];
 
-	const dispatch = createEventDispatcher();
-	let sharedLinks: SharedLinkResponseDto[] = [];
-	onMount(async () => {
-		await getSharedLinks();
-		const { data } = await api.userApi.getAllUsers({ isAll: false });
+  const dispatch = createEventDispatcher();
+  let sharedLinks: SharedLinkResponseDto[] = [];
+  onMount(async () => {
+    await getSharedLinks();
+    const { data } = await api.userApi.getAllUsers({ isAll: false });
 
-		// remove invalid users
-		users = data.filter((user) => !(user.deletedAt || user.id === album.ownerId));
+    // remove invalid users
+    users = data.filter((user) => !(user.deletedAt || user.id === album.ownerId));
 
-		// Remove the existed shared users from the album
-		sharedUsersInAlbum.forEach((sharedUser) => {
-			users = users.filter((user) => user.id !== sharedUser.id);
-		});
-	});
+    // Remove the existed shared users from the album
+    sharedUsersInAlbum.forEach((sharedUser) => {
+      users = users.filter((user) => user.id !== sharedUser.id);
+    });
+  });
 
-	const getSharedLinks = async () => {
-		const { data } = await api.sharedLinkApi.getAllSharedLinks();
+  const getSharedLinks = async () => {
+    const { data } = await api.sharedLinkApi.getAllSharedLinks();
 
-		sharedLinks = data.filter((link) => link.album?.id === album.id);
-	};
+    sharedLinks = data.filter((link) => link.album?.id === album.id);
+  };
 
-	const selectUser = (user: UserResponseDto) => {
-		if (selectedUsers.includes(user)) {
-			selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
-		} else {
-			selectedUsers = [...selectedUsers, user];
-		}
-	};
+  const selectUser = (user: UserResponseDto) => {
+    if (selectedUsers.includes(user)) {
+      selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
+    } else {
+      selectedUsers = [...selectedUsers, user];
+    }
+  };
 
-	const deselectUser = (user: UserResponseDto) => {
-		selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
-	};
+  const deselectUser = (user: UserResponseDto) => {
+    selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
+  };
 
-	const onSharedLinkClick = () => {
-		dispatch('sharedlinkclick');
-	};
+  const onSharedLinkClick = () => {
+    dispatch('sharedlinkclick');
+  };
 </script>
 
 <BaseModal on:close={() => dispatch('close')}>
-	<svelte:fragment slot="title">
-		<span class="flex gap-2 place-items-center">
-			<ImmichLogo width={24} />
-			<p class="font-medium">Invite to album</p>
-		</span>
-	</svelte:fragment>
+  <svelte:fragment slot="title">
+    <span class="flex gap-2 place-items-center">
+      <ImmichLogo width={24} />
+      <p class="font-medium">Invite to album</p>
+    </span>
+  </svelte:fragment>
 
-	<div class="max-h-[300px] overflow-y-auto immich-scrollbar">
-		{#if selectedUsers.length > 0}
-			<div class="flex gap-4 py-2 px-5 overflow-x-auto place-items-center mb-2">
-				<p class="font-medium">To</p>
+  <div class="max-h-[300px] overflow-y-auto immich-scrollbar">
+    {#if selectedUsers.length > 0}
+      <div class="flex gap-4 py-2 px-5 overflow-x-auto place-items-center mb-2">
+        <p class="font-medium">To</p>
 
-				{#each selectedUsers as user}
-					{#key user.id}
-						<button
-							on:click={() => deselectUser(user)}
-							class="flex gap-1 place-items-center border border-gray-400 rounded-full p-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-						>
-							<UserAvatar {user} size="sm" autoColor />
-							<p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
-						</button>
-					{/key}
-				{/each}
-			</div>
-		{/if}
+        {#each selectedUsers as user}
+          {#key user.id}
+            <button
+              on:click={() => deselectUser(user)}
+              class="flex gap-1 place-items-center border border-gray-400 rounded-full p-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+            >
+              <UserAvatar {user} size="sm" autoColor />
+              <p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
+            </button>
+          {/key}
+        {/each}
+      </div>
+    {/if}
 
-		{#if users.length > 0}
-			<p class="text-xs font-medium px-5">SUGGESTIONS</p>
+    {#if users.length > 0}
+      <p class="text-xs font-medium px-5">SUGGESTIONS</p>
 
-			<div class="my-4">
-				{#each users as user}
-					<button
-						on:click={() => selectUser(user)}
-						class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
-					>
-						{#if selectedUsers.includes(user)}
-							<span
-								class="bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-bg rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl dark:border-immich-dark-gray"
-								>✓</span
-							>
-						{:else}
-							<UserAvatar {user} size="md" autoColor />
-						{/if}
+      <div class="my-4">
+        {#each users as user}
+          <button
+            on:click={() => selectUser(user)}
+            class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
+          >
+            {#if selectedUsers.includes(user)}
+              <span
+                class="bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-bg rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl dark:border-immich-dark-gray"
+                >✓</span
+              >
+            {:else}
+              <UserAvatar {user} size="md" autoColor />
+            {/if}
 
-						<div class="text-left">
-							<p class="text-immich-fg dark:text-immich-dark-fg">
-								{user.firstName}
-								{user.lastName}
-							</p>
-							<p class="text-xs">
-								{user.email}
-							</p>
-						</div>
-					</button>
-				{/each}
-			</div>
-		{:else}
-			<p class="text-sm p-5">
-				Looks like you have shared this album with all users or you don't have any user to share
-				with.
-			</p>
-		{/if}
+            <div class="text-left">
+              <p class="text-immich-fg dark:text-immich-dark-fg">
+                {user.firstName}
+                {user.lastName}
+              </p>
+              <p class="text-xs">
+                {user.email}
+              </p>
+            </div>
+          </button>
+        {/each}
+      </div>
+    {:else}
+      <p class="text-sm p-5">
+        Looks like you have shared this album with all users or you don't have any user to share with.
+      </p>
+    {/if}
 
-		{#if selectedUsers.length > 0}
-			<div class="flex place-content-end p-5">
-				<Button size="sm" rounded="lg" on:click={() => dispatch('add-user', { selectedUsers })}>
-					Add
-				</Button>
-			</div>
-		{/if}
-	</div>
+    {#if selectedUsers.length > 0}
+      <div class="flex place-content-end p-5">
+        <Button size="sm" rounded="lg" on:click={() => dispatch('add-user', { selectedUsers })}>Add</Button>
+      </div>
+    {/if}
+  </div>
 
-	<hr />
-	<div id="shared-buttons" class="flex my-4 justify-around place-items-center place-content-center">
-		<button
-			class="flex flex-col gap-2 place-items-center place-content-center hover:cursor-pointer"
-			on:click={onSharedLinkClick}
-		>
-			<Link size={24} />
-			<p class="text-sm">Create link</p>
-		</button>
+  <hr />
+  <div id="shared-buttons" class="flex my-4 justify-around place-items-center place-content-center">
+    <button
+      class="flex flex-col gap-2 place-items-center place-content-center hover:cursor-pointer"
+      on:click={onSharedLinkClick}
+    >
+      <Link size={24} />
+      <p class="text-sm">Create link</p>
+    </button>
 
-		{#if sharedLinks.length}
-			<button
-				class="flex flex-col gap-2 place-items-center place-content-center hover:cursor-pointer"
-				on:click={() => goto(AppRoute.SHARED_LINKS)}
-			>
-				<ShareCircle size={24} />
-				<p class="text-sm">View links</p>
-			</button>
-		{/if}
-	</div>
+    {#if sharedLinks.length}
+      <button
+        class="flex flex-col gap-2 place-items-center place-content-center hover:cursor-pointer"
+        on:click={() => goto(AppRoute.SHARED_LINKS)}
+      >
+        <ShareCircle size={24} />
+        <p class="text-sm">View links</p>
+      </button>
+    {/if}
+  </div>
 </BaseModal>
diff --git a/web/src/lib/components/asset-viewer/album-list-item.svelte b/web/src/lib/components/asset-viewer/album-list-item.svelte
index dab58f24f..2e8781732 100644
--- a/web/src/lib/components/asset-viewer/album-list-item.svelte
+++ b/web/src/lib/components/asset-viewer/album-list-item.svelte
@@ -1,56 +1,56 @@
 <script lang="ts">
-	import { AlbumResponseDto, ThumbnailFormat, api } from '@api';
-	import { createEventDispatcher } from 'svelte';
+  import { AlbumResponseDto, ThumbnailFormat, api } from '@api';
+  import { createEventDispatcher } from 'svelte';
 
-	const dispatcher = createEventDispatcher();
+  const dispatcher = createEventDispatcher();
 
-	export let album: AlbumResponseDto;
-	export let variant: 'simple' | 'full' = 'full';
-	export let searchQuery = '';
-	let albumNameArray: string[] = ['', '', ''];
+  export let album: AlbumResponseDto;
+  export let variant: 'simple' | 'full' = 'full';
+  export let searchQuery = '';
+  let albumNameArray: string[] = ['', '', ''];
 
-	// This part of the code is responsible for splitting album name into 3 parts where part 2 is the search query
-	// It is used to highlight the search query in the album name
-	$: {
-		let { albumName } = album;
-		let findIndex = albumName.toLowerCase().indexOf(searchQuery.toLowerCase());
-		let findLength = searchQuery.length;
-		albumNameArray = [
-			albumName.slice(0, findIndex),
-			albumName.slice(findIndex, findIndex + findLength),
-			albumName.slice(findIndex + findLength)
-		];
-	}
+  // This part of the code is responsible for splitting album name into 3 parts where part 2 is the search query
+  // It is used to highlight the search query in the album name
+  $: {
+    let { albumName } = album;
+    let findIndex = albumName.toLowerCase().indexOf(searchQuery.toLowerCase());
+    let findLength = searchQuery.length;
+    albumNameArray = [
+      albumName.slice(0, findIndex),
+      albumName.slice(findIndex, findIndex + findLength),
+      albumName.slice(findIndex + findLength),
+    ];
+  }
 </script>
 
 <button
-	on:click={() => dispatcher('album')}
-	class="w-full flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+  on:click={() => dispatcher('album')}
+  class="w-full flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
 >
-	<div class="h-12 w-12 rounded-xl bg-slate-300">
-		{#if album.albumThumbnailAssetId}
-			<img
-				src={api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)}
-				alt={album.albumName}
-				class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
-				data-testid="album-image"
-				draggable="false"
-			/>
-		{/if}
-	</div>
-	<div class="h-12 flex flex-col items-start justify-center">
-		<span>{albumNameArray[0]}<b>{albumNameArray[1]}</b>{albumNameArray[2]}</span>
-		<span class="flex gap-1 text-sm">
-			{#if variant === 'simple'}
-				<span
-					>{#if album.shared}Shared{/if}
-				</span>
-			{:else}
-				<span>{album.assetCount} items</span>
-				<span
-					>{#if album.shared} · Shared{/if}
-				</span>
-			{/if}
-		</span>
-	</div>
+  <div class="h-12 w-12 rounded-xl bg-slate-300">
+    {#if album.albumThumbnailAssetId}
+      <img
+        src={api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)}
+        alt={album.albumName}
+        class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
+        data-testid="album-image"
+        draggable="false"
+      />
+    {/if}
+  </div>
+  <div class="h-12 flex flex-col items-start justify-center">
+    <span>{albumNameArray[0]}<b>{albumNameArray[1]}</b>{albumNameArray[2]}</span>
+    <span class="flex gap-1 text-sm">
+      {#if variant === 'simple'}
+        <span
+          >{#if album.shared}Shared{/if}
+        </span>
+      {:else}
+        <span>{album.assetCount} items</span>
+        <span
+          >{#if album.shared} · Shared{/if}
+        </span>
+      {/if}
+    </span>
+  </div>
 </button>
diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index 241ce2258..35bab9fa8 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -1,155 +1,135 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import { clickOutside } from '$lib/utils/click-outside';
-	import type { AssetResponseDto } from '@api';
-	import { createEventDispatcher } from 'svelte';
-	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
-	import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
-	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-	import Heart from 'svelte-material-icons/Heart.svelte';
-	import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
-	import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
-	import MagnifyPlusOutline from 'svelte-material-icons/MagnifyPlusOutline.svelte';
-	import MagnifyMinusOutline from 'svelte-material-icons/MagnifyMinusOutline.svelte';
-	import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
-	import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
-	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-	import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
-	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
-	import { photoZoomState } from '$lib/stores/zoom-image.store';
+  import { page } from '$app/stores';
+  import { clickOutside } from '$lib/utils/click-outside';
+  import type { AssetResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+  import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
+  import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
+  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+  import Heart from 'svelte-material-icons/Heart.svelte';
+  import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
+  import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
+  import MagnifyPlusOutline from 'svelte-material-icons/MagnifyPlusOutline.svelte';
+  import MagnifyMinusOutline from 'svelte-material-icons/MagnifyMinusOutline.svelte';
+  import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
+  import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
+  import MenuOption from '../shared-components/context-menu/menu-option.svelte';
+  import { photoZoomState } from '$lib/stores/zoom-image.store';
 
-	export let asset: AssetResponseDto;
-	export let showCopyButton: boolean;
-	export let showZoomButton: boolean;
-	export let showMotionPlayButton: boolean;
-	export let isMotionPhotoPlaying = false;
-	export let showDownloadButton: boolean;
+  export let asset: AssetResponseDto;
+  export let showCopyButton: boolean;
+  export let showZoomButton: boolean;
+  export let showMotionPlayButton: boolean;
+  export let isMotionPhotoPlaying = false;
+  export let showDownloadButton: boolean;
 
-	const isOwner = asset.ownerId === $page.data.user?.id;
+  const isOwner = asset.ownerId === $page.data.user?.id;
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	let contextMenuPosition = { x: 0, y: 0 };
-	let isShowAssetOptions = false;
+  let contextMenuPosition = { x: 0, y: 0 };
+  let isShowAssetOptions = false;
 
-	const showOptionsMenu = ({ x, y }: MouseEvent) => {
-		contextMenuPosition = { x, y };
-		isShowAssetOptions = !isShowAssetOptions;
-	};
+  const showOptionsMenu = ({ x, y }: MouseEvent) => {
+    contextMenuPosition = { x, y };
+    isShowAssetOptions = !isShowAssetOptions;
+  };
 
-	const onMenuClick = (eventName: string) => {
-		isShowAssetOptions = false;
-		dispatch(eventName);
-	};
+  const onMenuClick = (eventName: string) => {
+    isShowAssetOptions = false;
+    dispatch(eventName);
+  };
 </script>
 
 <div
-	class="h-16 flex justify-between place-items-center px-3 transition-transform duration-200 z-[1001] bg-gradient-to-b from-black/40"
+  class="h-16 flex justify-between place-items-center px-3 transition-transform duration-200 z-[1001] bg-gradient-to-b from-black/40"
 >
-	<div class="text-white">
-		<CircleIconButton isOpacity={true} logo={ArrowLeft} on:click={() => dispatch('goBack')} />
-	</div>
-	<div class="text-white flex gap-2 justify-end w-[calc(100%-3rem)] overflow-hidden">
-		{#if showMotionPlayButton}
-			{#if isMotionPhotoPlaying}
-				<CircleIconButton
-					isOpacity={true}
-					logo={MotionPauseOutline}
-					title="Stop Motion Photo"
-					on:click={() => dispatch('stopMotionPhoto')}
-				/>
-			{:else}
-				<CircleIconButton
-					isOpacity={true}
-					logo={MotionPlayOutline}
-					title="Play Motion Photo"
-					on:click={() => dispatch('playMotionPhoto')}
-				/>
-			{/if}
-		{/if}
-		{#if showZoomButton}
-			<CircleIconButton
-				isOpacity={true}
-				hideMobile={true}
-				logo={$photoZoomState && $photoZoomState.currentZoom > 1
-					? MagnifyMinusOutline
-					: MagnifyPlusOutline}
-				title="Zoom Image"
-				on:click={() => {
-					const zoomImage = new CustomEvent('zoomImage');
-					window.dispatchEvent(zoomImage);
-				}}
-			/>
-		{/if}
-		{#if showCopyButton}
-			<CircleIconButton
-				isOpacity={true}
-				logo={ContentCopy}
-				title="Copy Image"
-				on:click={() => {
-					const copyEvent = new CustomEvent('copyImage');
-					window.dispatchEvent(copyEvent);
-				}}
-			/>
-		{/if}
+  <div class="text-white">
+    <CircleIconButton isOpacity={true} logo={ArrowLeft} on:click={() => dispatch('goBack')} />
+  </div>
+  <div class="text-white flex gap-2 justify-end w-[calc(100%-3rem)] overflow-hidden">
+    {#if showMotionPlayButton}
+      {#if isMotionPhotoPlaying}
+        <CircleIconButton
+          isOpacity={true}
+          logo={MotionPauseOutline}
+          title="Stop Motion Photo"
+          on:click={() => dispatch('stopMotionPhoto')}
+        />
+      {:else}
+        <CircleIconButton
+          isOpacity={true}
+          logo={MotionPlayOutline}
+          title="Play Motion Photo"
+          on:click={() => dispatch('playMotionPhoto')}
+        />
+      {/if}
+    {/if}
+    {#if showZoomButton}
+      <CircleIconButton
+        isOpacity={true}
+        hideMobile={true}
+        logo={$photoZoomState && $photoZoomState.currentZoom > 1 ? MagnifyMinusOutline : MagnifyPlusOutline}
+        title="Zoom Image"
+        on:click={() => {
+          const zoomImage = new CustomEvent('zoomImage');
+          window.dispatchEvent(zoomImage);
+        }}
+      />
+    {/if}
+    {#if showCopyButton}
+      <CircleIconButton
+        isOpacity={true}
+        logo={ContentCopy}
+        title="Copy Image"
+        on:click={() => {
+          const copyEvent = new CustomEvent('copyImage');
+          window.dispatchEvent(copyEvent);
+        }}
+      />
+    {/if}
 
-		{#if showDownloadButton}
-			<CircleIconButton
-				isOpacity={true}
-				logo={CloudDownloadOutline}
-				on:click={() => dispatch('download')}
-				title="Download"
-			/>
-		{/if}
-		<CircleIconButton
-			isOpacity={true}
-			logo={InformationOutline}
-			on:click={() => dispatch('showDetail')}
-			title="Info"
-		/>
-		{#if isOwner}
-			<CircleIconButton
-				isOpacity={true}
-				logo={asset.isFavorite ? Heart : HeartOutline}
-				on:click={() => dispatch('favorite')}
-				title="Favorite"
-			/>
-		{/if}
+    {#if showDownloadButton}
+      <CircleIconButton
+        isOpacity={true}
+        logo={CloudDownloadOutline}
+        on:click={() => dispatch('download')}
+        title="Download"
+      />
+    {/if}
+    <CircleIconButton isOpacity={true} logo={InformationOutline} on:click={() => dispatch('showDetail')} title="Info" />
+    {#if isOwner}
+      <CircleIconButton
+        isOpacity={true}
+        logo={asset.isFavorite ? Heart : HeartOutline}
+        on:click={() => dispatch('favorite')}
+        title="Favorite"
+      />
+    {/if}
 
-		{#if isOwner}
-			<CircleIconButton
-				isOpacity={true}
-				logo={DeleteOutline}
-				on:click={() => dispatch('delete')}
-				title="Delete"
-			/>
-			<div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}>
-				<CircleIconButton
-					isOpacity={true}
-					logo={DotsVertical}
-					on:click={showOptionsMenu}
-					title="More"
-				>
-					{#if isShowAssetOptions}
-						<ContextMenu {...contextMenuPosition} direction="left">
-							<MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
-							<MenuOption
-								on:click={() => onMenuClick('addToSharedAlbum')}
-								text="Add to Shared Album"
-							/>
+    {#if isOwner}
+      <CircleIconButton isOpacity={true} logo={DeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
+      <div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}>
+        <CircleIconButton isOpacity={true} logo={DotsVertical} on:click={showOptionsMenu} title="More">
+          {#if isShowAssetOptions}
+            <ContextMenu {...contextMenuPosition} direction="left">
+              <MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
+              <MenuOption on:click={() => onMenuClick('addToSharedAlbum')} text="Add to Shared Album" />
 
-							{#if isOwner}
-								<MenuOption
-									on:click={() => dispatch('toggleArchive')}
-									text={asset.isArchived ? 'Unarchive' : 'Archive'}
-								/>
-							{/if}
-						</ContextMenu>
-					{/if}
-				</CircleIconButton>
-			</div>
-		{/if}
-	</div>
+              {#if isOwner}
+                <MenuOption
+                  on:click={() => dispatch('toggleArchive')}
+                  text={asset.isArchived ? 'Unarchive' : 'Archive'}
+                />
+              {/if}
+            </ContextMenu>
+          {/if}
+        </CircleIconButton>
+      </div>
+    {/if}
+  </div>
 </div>
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 358572001..7de3b2f53 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -1,399 +1,386 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import {
-		AlbumResponseDto,
-		api,
-		AssetResponseDto,
-		AssetTypeEnum,
-		SharedLinkResponseDto
-	} from '@api';
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
-	import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
-	import ImageBrokenVariant from 'svelte-material-icons/ImageBrokenVariant.svelte';
-	import { fly } from 'svelte/transition';
-	import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '../shared-components/notification/notification';
-	import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
-	import DetailPanel from './detail-panel.svelte';
-	import PhotoViewer from './photo-viewer.svelte';
-	import VideoViewer from './video-viewer.svelte';
-	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import { goto } from '$app/navigation';
+  import { AlbumResponseDto, api, AssetResponseDto, AssetTypeEnum, SharedLinkResponseDto } from '@api';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
+  import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
+  import ImageBrokenVariant from 'svelte-material-icons/ImageBrokenVariant.svelte';
+  import { fly } from 'svelte/transition';
+  import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
+  import DetailPanel from './detail-panel.svelte';
+  import PhotoViewer from './photo-viewer.svelte';
+  import VideoViewer from './video-viewer.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
 
-	import { assetStore } from '$lib/stores/assets.store';
-	import { isShowDetail } from '$lib/stores/preferences.store';
-	import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils';
-	import { browser } from '$app/environment';
+  import { assetStore } from '$lib/stores/assets.store';
+  import { isShowDetail } from '$lib/stores/preferences.store';
+  import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils';
+  import { browser } from '$app/environment';
 
-	export let asset: AssetResponseDto;
-	export let publicSharedKey = '';
-	export let showNavigation = true;
-	export let sharedLink: SharedLinkResponseDto | undefined = undefined;
+  export let asset: AssetResponseDto;
+  export let publicSharedKey = '';
+  export let showNavigation = true;
+  export let sharedLink: SharedLinkResponseDto | undefined = undefined;
 
-	const dispatch = createEventDispatcher();
-	let halfLeftHover = false;
-	let halfRightHover = false;
-	let appearsInAlbums: AlbumResponseDto[] = [];
-	let isShowAlbumPicker = false;
-	let isShowDeleteConfirmation = false;
-	let addToSharedAlbum = true;
-	let shouldPlayMotionPhoto = false;
-	let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true;
-	let canCopyImagesToClipboard: boolean;
-	const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key);
+  const dispatch = createEventDispatcher();
+  let halfLeftHover = false;
+  let halfRightHover = false;
+  let appearsInAlbums: AlbumResponseDto[] = [];
+  let isShowAlbumPicker = false;
+  let isShowDeleteConfirmation = false;
+  let addToSharedAlbum = true;
+  let shouldPlayMotionPhoto = false;
+  let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true;
+  let canCopyImagesToClipboard: boolean;
+  const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key);
 
-	onMount(async () => {
-		document.addEventListener('keydown', onKeyboardPress);
+  onMount(async () => {
+    document.addEventListener('keydown', onKeyboardPress);
 
-		getAllAlbums();
+    getAllAlbums();
 
-		// Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
-		// TODO: Move to regular import once the package correctly supports ESM.
-		const module = await import('copy-image-clipboard');
-		canCopyImagesToClipboard = module.canCopyImagesToClipboard();
-	});
+    // Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
+    // TODO: Move to regular import once the package correctly supports ESM.
+    const module = await import('copy-image-clipboard');
+    canCopyImagesToClipboard = module.canCopyImagesToClipboard();
+  });
 
-	onDestroy(() => {
-		if (browser) {
-			document.removeEventListener('keydown', onKeyboardPress);
-		}
-	});
+  onDestroy(() => {
+    if (browser) {
+      document.removeEventListener('keydown', onKeyboardPress);
+    }
+  });
 
-	$: asset.id && getAllAlbums(); // Update the album information when the asset ID changes
+  $: asset.id && getAllAlbums(); // Update the album information when the asset ID changes
 
-	const getAllAlbums = async () => {
-		try {
-			const { data } = await api.albumApi.getAllAlbums({ assetId: asset.id });
-			appearsInAlbums = data;
-		} catch (e) {
-			console.error('Error getting album that asset belong to', e);
-		}
-	};
+  const getAllAlbums = async () => {
+    try {
+      const { data } = await api.albumApi.getAllAlbums({ assetId: asset.id });
+      appearsInAlbums = data;
+    } catch (e) {
+      console.error('Error getting album that asset belong to', e);
+    }
+  };
 
-	const handleKeyboardPress = (key: string) => {
-		switch (key) {
-			case 'Escape':
-				closeViewer();
-				return;
-			case 'Delete':
-				isShowDeleteConfirmation = true;
-				return;
-			case 'i':
-				$isShowDetail = !$isShowDetail;
-				return;
-			case 'ArrowLeft':
-				navigateAssetBackward();
-				return;
-			case 'ArrowRight':
-				navigateAssetForward();
-				return;
-		}
-	};
+  const handleKeyboardPress = (key: string) => {
+    switch (key) {
+      case 'Escape':
+        closeViewer();
+        return;
+      case 'Delete':
+        isShowDeleteConfirmation = true;
+        return;
+      case 'i':
+        $isShowDetail = !$isShowDetail;
+        return;
+      case 'ArrowLeft':
+        navigateAssetBackward();
+        return;
+      case 'ArrowRight':
+        navigateAssetForward();
+        return;
+    }
+  };
 
-	const handleCloseViewer = () => {
-		$isShowDetail = false;
-		closeViewer();
-	};
+  const handleCloseViewer = () => {
+    $isShowDetail = false;
+    closeViewer();
+  };
 
-	const closeViewer = () => {
-		dispatch('close');
-	};
+  const closeViewer = () => {
+    dispatch('close');
+  };
 
-	const navigateAssetForward = (e?: Event) => {
-		e?.stopPropagation();
-		dispatch('navigate-next');
-	};
+  const navigateAssetForward = (e?: Event) => {
+    e?.stopPropagation();
+    dispatch('navigate-next');
+  };
 
-	const navigateAssetBackward = (e?: Event) => {
-		e?.stopPropagation();
-		dispatch('navigate-previous');
-	};
+  const navigateAssetBackward = (e?: Event) => {
+    e?.stopPropagation();
+    dispatch('navigate-previous');
+  };
 
-	const showDetailInfoHandler = () => {
-		$isShowDetail = !$isShowDetail;
-	};
+  const showDetailInfoHandler = () => {
+    $isShowDetail = !$isShowDetail;
+  };
 
-	const deleteAsset = async () => {
-		try {
-			const { data: deletedAssets } = await api.assetApi.deleteAsset({
-				deleteAssetDto: {
-					ids: [asset.id]
-				}
-			});
+  const deleteAsset = async () => {
+    try {
+      const { data: deletedAssets } = await api.assetApi.deleteAsset({
+        deleteAssetDto: {
+          ids: [asset.id],
+        },
+      });
 
-			navigateAssetForward();
+      navigateAssetForward();
 
-			for (const asset of deletedAssets) {
-				if (asset.status == 'SUCCESS') {
-					assetStore.removeAsset(asset.id);
-				}
-			}
-		} catch (e) {
-			notificationController.show({
-				type: NotificationType.Error,
-				message: 'Error deleting this asset, check console for more details'
-			});
-			console.error('Error deleteAsset', e);
-		} finally {
-			isShowDeleteConfirmation = false;
-		}
-	};
+      for (const asset of deletedAssets) {
+        if (asset.status == 'SUCCESS') {
+          assetStore.removeAsset(asset.id);
+        }
+      }
+    } catch (e) {
+      notificationController.show({
+        type: NotificationType.Error,
+        message: 'Error deleting this asset, check console for more details',
+      });
+      console.error('Error deleteAsset', e);
+    } finally {
+      isShowDeleteConfirmation = false;
+    }
+  };
 
-	const toggleFavorite = async () => {
-		const { data } = await api.assetApi.updateAsset({
-			id: asset.id,
-			updateAssetDto: {
-				isFavorite: !asset.isFavorite
-			}
-		});
+  const toggleFavorite = async () => {
+    const { data } = await api.assetApi.updateAsset({
+      id: asset.id,
+      updateAssetDto: {
+        isFavorite: !asset.isFavorite,
+      },
+    });
 
-		asset.isFavorite = data.isFavorite;
-		assetStore.updateAsset(asset.id, data.isFavorite);
-	};
+    asset.isFavorite = data.isFavorite;
+    assetStore.updateAsset(asset.id, data.isFavorite);
+  };
 
-	const openAlbumPicker = (shared: boolean) => {
-		isShowAlbumPicker = true;
-		addToSharedAlbum = shared;
-	};
+  const openAlbumPicker = (shared: boolean) => {
+    isShowAlbumPicker = true;
+    addToSharedAlbum = shared;
+  };
 
-	const handleAddToNewAlbum = (event: CustomEvent) => {
-		isShowAlbumPicker = false;
+  const handleAddToNewAlbum = (event: CustomEvent) => {
+    isShowAlbumPicker = false;
 
-		const { albumName }: { albumName: string } = event.detail;
-		api.albumApi
-			.createAlbum({ createAlbumDto: { albumName, assetIds: [asset.id] } })
-			.then((response) => {
-				const album = response.data;
-				goto('/albums/' + album.id);
-			});
-	};
+    const { albumName }: { albumName: string } = event.detail;
+    api.albumApi.createAlbum({ createAlbumDto: { albumName, assetIds: [asset.id] } }).then((response) => {
+      const album = response.data;
+      goto('/albums/' + album.id);
+    });
+  };
 
-	const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
-		isShowAlbumPicker = false;
-		const album = event.detail.album;
+  const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
+    isShowAlbumPicker = false;
+    const album = event.detail.album;
 
-		addAssetsToAlbum(album.id, [asset.id]).then((dto) => {
-			if (dto.successfullyAdded === 1 && dto.album) {
-				appearsInAlbums = [...appearsInAlbums, dto.album];
-			}
-		});
-	};
+    addAssetsToAlbum(album.id, [asset.id]).then((dto) => {
+      if (dto.successfullyAdded === 1 && dto.album) {
+        appearsInAlbums = [...appearsInAlbums, dto.album];
+      }
+    });
+  };
 
-	const disableKeyDownEvent = () => {
-		if (browser) {
-			document.removeEventListener('keydown', onKeyboardPress);
-		}
-	};
+  const disableKeyDownEvent = () => {
+    if (browser) {
+      document.removeEventListener('keydown', onKeyboardPress);
+    }
+  };
 
-	const enableKeyDownEvent = () => {
-		if (browser) {
-			document.addEventListener('keydown', onKeyboardPress);
-		}
-	};
+  const enableKeyDownEvent = () => {
+    if (browser) {
+      document.addEventListener('keydown', onKeyboardPress);
+    }
+  };
 
-	const toggleArchive = async () => {
-		try {
-			const { data } = await api.assetApi.updateAsset({
-				id: asset.id,
-				updateAssetDto: {
-					isArchived: !asset.isArchived
-				}
-			});
+  const toggleArchive = async () => {
+    try {
+      const { data } = await api.assetApi.updateAsset({
+        id: asset.id,
+        updateAssetDto: {
+          isArchived: !asset.isArchived,
+        },
+      });
 
-			asset.isArchived = data.isArchived;
+      asset.isArchived = data.isArchived;
 
-			if (data.isArchived) {
-				dispatch('archived', data);
-			} else {
-				dispatch('unarchived', data);
-			}
+      if (data.isArchived) {
+        dispatch('archived', data);
+      } else {
+        dispatch('unarchived', data);
+      }
 
-			notificationController.show({
-				type: NotificationType.Info,
-				message: asset.isArchived ? `Added to archive` : `Removed from archive`
-			});
-		} catch (error) {
-			console.error(error);
-			notificationController.show({
-				type: NotificationType.Error,
-				message: `Error ${
-					asset.isArchived ? 'archiving' : 'unarchiving'
-				} asset, check console for more details`
-			});
-		}
-	};
+      notificationController.show({
+        type: NotificationType.Info,
+        message: asset.isArchived ? `Added to archive` : `Removed from archive`,
+      });
+    } catch (error) {
+      console.error(error);
+      notificationController.show({
+        type: NotificationType.Error,
+        message: `Error ${asset.isArchived ? 'archiving' : 'unarchiving'} asset, check console for more details`,
+      });
+    }
+  };
 
-	const getAssetType = () => {
-		switch (asset.type) {
-			case 'IMAGE':
-				return 'Photo';
-			case 'VIDEO':
-				return 'Video';
-			default:
-				return 'Asset';
-		}
-	};
+  const getAssetType = () => {
+    switch (asset.type) {
+      case 'IMAGE':
+        return 'Photo';
+      case 'VIDEO':
+        return 'Video';
+      default:
+        return 'Asset';
+    }
+  };
 </script>
 
 <section
-	id="immich-asset-viewer"
-	class="fixed h-screen w-screen left-0 top-0 overflow-y-hidden bg-black z-[1001] grid grid-rows-[64px_1fr] grid-cols-4"
+  id="immich-asset-viewer"
+  class="fixed h-screen w-screen left-0 top-0 overflow-y-hidden bg-black z-[1001] grid grid-rows-[64px_1fr] grid-cols-4"
 >
-	<div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
-		<AssetViewerNavBar
-			{asset}
-			isMotionPhotoPlaying={shouldPlayMotionPhoto}
-			showCopyButton={canCopyImagesToClipboard && asset.type === AssetTypeEnum.Image}
-			showZoomButton={asset.type === AssetTypeEnum.Image}
-			showMotionPlayButton={!!asset.livePhotoVideoId}
-			showDownloadButton={shouldShowDownloadButton}
-			on:goBack={closeViewer}
-			on:showDetail={showDetailInfoHandler}
-			on:download={() => downloadFile(asset, publicSharedKey)}
-			on:delete={() => (isShowDeleteConfirmation = true)}
-			on:favorite={toggleFavorite}
-			on:addToAlbum={() => openAlbumPicker(false)}
-			on:addToSharedAlbum={() => openAlbumPicker(true)}
-			on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
-			on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
-			on:toggleArchive={toggleArchive}
-		/>
-	</div>
+  <div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
+    <AssetViewerNavBar
+      {asset}
+      isMotionPhotoPlaying={shouldPlayMotionPhoto}
+      showCopyButton={canCopyImagesToClipboard && asset.type === AssetTypeEnum.Image}
+      showZoomButton={asset.type === AssetTypeEnum.Image}
+      showMotionPlayButton={!!asset.livePhotoVideoId}
+      showDownloadButton={shouldShowDownloadButton}
+      on:goBack={closeViewer}
+      on:showDetail={showDetailInfoHandler}
+      on:download={() => downloadFile(asset, publicSharedKey)}
+      on:delete={() => (isShowDeleteConfirmation = true)}
+      on:favorite={toggleFavorite}
+      on:addToAlbum={() => openAlbumPicker(false)}
+      on:addToSharedAlbum={() => openAlbumPicker(true)}
+      on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
+      on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
+      on:toggleArchive={toggleArchive}
+    />
+  </div>
 
-	{#if showNavigation}
-		<div
-			class={`row-start-2 row-span-end col-start-1 flex place-items-center hover:cursor-pointer w-1/4 mb-[60px] ${
-				asset.type === AssetTypeEnum.Video ? '' : 'z-[999]'
-			}`}
-			on:mouseenter={() => {
-				halfLeftHover = true;
-				halfRightHover = false;
-			}}
-			on:mouseleave={() => {
-				halfLeftHover = false;
-			}}
-			on:click={navigateAssetBackward}
-			on:keydown={navigateAssetBackward}
-		>
-			<button
-				class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 z-[1000] text-gray-500 mx-4"
-				class:navigation-button-hover={halfLeftHover}
-				on:click={navigateAssetBackward}
-			>
-				<ChevronLeft size="36" />
-			</button>
-		</div>
-	{/if}
+  {#if showNavigation}
+    <div
+      class={`row-start-2 row-span-end col-start-1 flex place-items-center hover:cursor-pointer w-1/4 mb-[60px] ${
+        asset.type === AssetTypeEnum.Video ? '' : 'z-[999]'
+      }`}
+      on:mouseenter={() => {
+        halfLeftHover = true;
+        halfRightHover = false;
+      }}
+      on:mouseleave={() => {
+        halfLeftHover = false;
+      }}
+      on:click={navigateAssetBackward}
+      on:keydown={navigateAssetBackward}
+    >
+      <button
+        class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 z-[1000] text-gray-500 mx-4"
+        class:navigation-button-hover={halfLeftHover}
+        on:click={navigateAssetBackward}
+      >
+        <ChevronLeft size="36" />
+      </button>
+    </div>
+  {/if}
 
-	<div class="row-start-1 row-span-full col-start-1 col-span-4">
-		{#key asset.id}
-			{#if !asset.resized}
-				<div class="h-full w-full flex justify-center">
-					<div
-						class="h-full bg-gray-100 dark:bg-immich-dark-gray flex items-center justify-center aspect-square px-auto"
-					>
-						<ImageBrokenVariant size="25%" />
-					</div>
-				</div>
-			{:else if asset.type === AssetTypeEnum.Image}
-				{#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
-					<VideoViewer
-						{publicSharedKey}
-						assetId={asset.livePhotoVideoId}
-						on:close={closeViewer}
-						on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
-					/>
-				{:else}
-					<PhotoViewer {publicSharedKey} {asset} on:close={closeViewer} />
-				{/if}
-			{:else}
-				<VideoViewer {publicSharedKey} assetId={asset.id} on:close={closeViewer} />
-			{/if}
-		{/key}
-	</div>
+  <div class="row-start-1 row-span-full col-start-1 col-span-4">
+    {#key asset.id}
+      {#if !asset.resized}
+        <div class="h-full w-full flex justify-center">
+          <div
+            class="h-full bg-gray-100 dark:bg-immich-dark-gray flex items-center justify-center aspect-square px-auto"
+          >
+            <ImageBrokenVariant size="25%" />
+          </div>
+        </div>
+      {:else if asset.type === AssetTypeEnum.Image}
+        {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
+          <VideoViewer
+            {publicSharedKey}
+            assetId={asset.livePhotoVideoId}
+            on:close={closeViewer}
+            on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
+          />
+        {:else}
+          <PhotoViewer {publicSharedKey} {asset} on:close={closeViewer} />
+        {/if}
+      {:else}
+        <VideoViewer {publicSharedKey} assetId={asset.id} on:close={closeViewer} />
+      {/if}
+    {/key}
+  </div>
 
-	{#if showNavigation}
-		<div
-			class={`row-start-2 row-span-full col-start-4 flex justify-end place-items-center hover:cursor-pointer w-1/4 justify-self-end mb-[60px] ${
-				asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'
-			}`}
-			on:click={navigateAssetForward}
-			on:keydown={navigateAssetForward}
-			on:mouseenter={() => {
-				halfLeftHover = false;
-				halfRightHover = true;
-			}}
-			on:mouseleave={() => {
-				halfRightHover = false;
-			}}
-		>
-			<button
-				class="rounded-full p-3 hover:bg-gray-500 hover:text-white text-gray-500 mx-4"
-				class:navigation-button-hover={halfRightHover}
-				on:click={navigateAssetForward}
-			>
-				<ChevronRight size="36" />
-			</button>
-		</div>
-	{/if}
+  {#if showNavigation}
+    <div
+      class={`row-start-2 row-span-full col-start-4 flex justify-end place-items-center hover:cursor-pointer w-1/4 justify-self-end mb-[60px] ${
+        asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'
+      }`}
+      on:click={navigateAssetForward}
+      on:keydown={navigateAssetForward}
+      on:mouseenter={() => {
+        halfLeftHover = false;
+        halfRightHover = true;
+      }}
+      on:mouseleave={() => {
+        halfRightHover = false;
+      }}
+    >
+      <button
+        class="rounded-full p-3 hover:bg-gray-500 hover:text-white text-gray-500 mx-4"
+        class:navigation-button-hover={halfRightHover}
+        on:click={navigateAssetForward}
+      >
+        <ChevronRight size="36" />
+      </button>
+    </div>
+  {/if}
 
-	{#if $isShowDetail}
-		<div
-			transition:fly={{ duration: 150 }}
-			id="detail-panel"
-			class="bg-immich-bg w-[360px] z-[1002] row-span-full transition-all overflow-y-auto dark:bg-immich-dark-bg dark:border-l dark:border-l-immich-dark-gray"
-			translate="yes"
-		>
-			<DetailPanel
-				{asset}
-				albums={appearsInAlbums}
-				on:close={() => ($isShowDetail = false)}
-				on:close-viewer={handleCloseViewer}
-				on:description-focus-in={disableKeyDownEvent}
-				on:description-focus-out={enableKeyDownEvent}
-			/>
-		</div>
-	{/if}
+  {#if $isShowDetail}
+    <div
+      transition:fly={{ duration: 150 }}
+      id="detail-panel"
+      class="bg-immich-bg w-[360px] z-[1002] row-span-full transition-all overflow-y-auto dark:bg-immich-dark-bg dark:border-l dark:border-l-immich-dark-gray"
+      translate="yes"
+    >
+      <DetailPanel
+        {asset}
+        albums={appearsInAlbums}
+        on:close={() => ($isShowDetail = false)}
+        on:close-viewer={handleCloseViewer}
+        on:description-focus-in={disableKeyDownEvent}
+        on:description-focus-out={enableKeyDownEvent}
+      />
+    </div>
+  {/if}
 
-	{#if isShowAlbumPicker}
-		<AlbumSelectionModal
-			shared={addToSharedAlbum}
-			on:newAlbum={handleAddToNewAlbum}
-			on:newSharedAlbum={handleAddToNewAlbum}
-			on:album={handleAddToAlbum}
-			on:close={() => (isShowAlbumPicker = false)}
-		/>
-	{/if}
+  {#if isShowAlbumPicker}
+    <AlbumSelectionModal
+      shared={addToSharedAlbum}
+      on:newAlbum={handleAddToNewAlbum}
+      on:newSharedAlbum={handleAddToNewAlbum}
+      on:album={handleAddToAlbum}
+      on:close={() => (isShowAlbumPicker = false)}
+    />
+  {/if}
 
-	{#if isShowDeleteConfirmation}
-		<ConfirmDialogue
-			title="Delete {getAssetType()}"
-			confirmText="Delete"
-			on:confirm={deleteAsset}
-			on:cancel={() => (isShowDeleteConfirmation = false)}
-		>
-			<svelte:fragment slot="prompt">
-				<p>
-					Are you sure you want to delete this {getAssetType().toLowerCase()}? This will also remove
-					it from its album(s).
-				</p>
-				<p><b>You cannot undo this action!</b></p>
-			</svelte:fragment>
-		</ConfirmDialogue>
-	{/if}
+  {#if isShowDeleteConfirmation}
+    <ConfirmDialogue
+      title="Delete {getAssetType()}"
+      confirmText="Delete"
+      on:confirm={deleteAsset}
+      on:cancel={() => (isShowDeleteConfirmation = false)}
+    >
+      <svelte:fragment slot="prompt">
+        <p>
+          Are you sure you want to delete this {getAssetType().toLowerCase()}? This will also remove it from its
+          album(s).
+        </p>
+        <p><b>You cannot undo this action!</b></p>
+      </svelte:fragment>
+    </ConfirmDialogue>
+  {/if}
 </section>
 
 <style>
-	#immich-asset-viewer {
-		contain: layout;
-	}
+  #immich-asset-viewer {
+    contain: layout;
+  }
 
-	.navigation-button-hover {
-		background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-		color: rgb(255 255 255 / var(--tw-text-opacity));
-		transition: all 150ms;
-	}
+  .navigation-button-hover {
+    background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+    transition: all 150ms;
+  }
 </style>
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 365c9bfa3..42bfb6de7 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -1,296 +1,293 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import { locale } from '$lib/stores/preferences.store';
-	import type { LatLngTuple } from 'leaflet';
-	import { DateTime } from 'luxon';
-	import Calendar from 'svelte-material-icons/Calendar.svelte';
-	import CameraIris from 'svelte-material-icons/CameraIris.svelte';
-	import Close from 'svelte-material-icons/Close.svelte';
-	import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
-	import MapMarkerOutline from 'svelte-material-icons/MapMarkerOutline.svelte';
-	import { createEventDispatcher } from 'svelte';
-	import { AssetResponseDto, AlbumResponseDto, api, ThumbnailFormat } from '@api';
-	import { asByteUnitString } from '../../utils/byte-units';
-	import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-	import { getAssetFilename } from '$lib/utils/asset-utils';
+  import { page } from '$app/stores';
+  import { locale } from '$lib/stores/preferences.store';
+  import type { LatLngTuple } from 'leaflet';
+  import { DateTime } from 'luxon';
+  import Calendar from 'svelte-material-icons/Calendar.svelte';
+  import CameraIris from 'svelte-material-icons/CameraIris.svelte';
+  import Close from 'svelte-material-icons/Close.svelte';
+  import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
+  import MapMarkerOutline from 'svelte-material-icons/MapMarkerOutline.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { AssetResponseDto, AlbumResponseDto, api, ThumbnailFormat } from '@api';
+  import { asByteUnitString } from '../../utils/byte-units';
+  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
+  import { getAssetFilename } from '$lib/utils/asset-utils';
 
-	export let asset: AssetResponseDto;
-	export let albums: AlbumResponseDto[] = [];
-	let textarea: HTMLTextAreaElement;
-	let description: string;
+  export let asset: AssetResponseDto;
+  export let albums: AlbumResponseDto[] = [];
+  let textarea: HTMLTextAreaElement;
+  let description: string;
 
-	$: {
-		// Get latest description from server
-		if (asset.id) {
-			api.assetApi.getAssetById({ id: asset.id }).then((res) => {
-				people = res.data?.people || [];
-				textarea.value = res.data?.exifInfo?.description || '';
-			});
-		}
-	}
+  $: {
+    // Get latest description from server
+    if (asset.id) {
+      api.assetApi.getAssetById({ id: asset.id }).then((res) => {
+        people = res.data?.people || [];
+        textarea.value = res.data?.exifInfo?.description || '';
+      });
+    }
+  }
 
-	$: latlng = (() => {
-		const lat = asset.exifInfo?.latitude;
-		const lng = asset.exifInfo?.longitude;
+  $: latlng = (() => {
+    const lat = asset.exifInfo?.latitude;
+    const lng = asset.exifInfo?.longitude;
 
-		if (lat && lng) {
-			return [lat, lng] as LatLngTuple;
-		}
-	})();
+    if (lat && lng) {
+      return [lat, lng] as LatLngTuple;
+    }
+  })();
 
-	$: people = asset.people || [];
+  $: people = asset.people || [];
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	const getMegapixel = (width: number, height: number): number | undefined => {
-		const megapixel = Math.round((height * width) / 1_000_000);
+  const getMegapixel = (width: number, height: number): number | undefined => {
+    const megapixel = Math.round((height * width) / 1_000_000);
 
-		if (megapixel) {
-			return megapixel;
-		}
+    if (megapixel) {
+      return megapixel;
+    }
 
-		return undefined;
-	};
+    return undefined;
+  };
 
-	const autoGrowHeight = (e: Event) => {
-		const target = e.target as HTMLTextAreaElement;
-		target.style.height = 'auto';
-		target.style.height = `${target.scrollHeight}px`;
-	};
+  const autoGrowHeight = (e: Event) => {
+    const target = e.target as HTMLTextAreaElement;
+    target.style.height = 'auto';
+    target.style.height = `${target.scrollHeight}px`;
+  };
 
-	const handleFocusIn = () => {
-		dispatch('description-focus-in');
-	};
+  const handleFocusIn = () => {
+    dispatch('description-focus-in');
+  };
 
-	const handleFocusOut = async () => {
-		dispatch('description-focus-out');
-		try {
-			await api.assetApi.updateAsset({
-				id: asset.id,
-				updateAssetDto: {
-					description: description
-				}
-			});
-		} catch (error) {
-			console.error(error);
-		}
-	};
+  const handleFocusOut = async () => {
+    dispatch('description-focus-out');
+    try {
+      await api.assetApi.updateAsset({
+        id: asset.id,
+        updateAssetDto: {
+          description: description,
+        },
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
 </script>
 
 <section class="p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
-	<div class="flex place-items-center gap-2">
-		<button
-			class="rounded-full p-3 flex place-items-center place-content-center hover:bg-gray-200 transition-colors dark:text-immich-dark-fg dark:hover:bg-gray-900"
-			on:click={() => dispatch('close')}
-		>
-			<Close size="24" />
-		</button>
+  <div class="flex place-items-center gap-2">
+    <button
+      class="rounded-full p-3 flex place-items-center place-content-center hover:bg-gray-200 transition-colors dark:text-immich-dark-fg dark:hover:bg-gray-900"
+      on:click={() => dispatch('close')}
+    >
+      <Close size="24" />
+    </button>
 
-		<p class="text-immich-fg dark:text-immich-dark-fg text-lg">Info</p>
-	</div>
+    <p class="text-immich-fg dark:text-immich-dark-fg text-lg">Info</p>
+  </div>
 
-	<section class="mx-4 mt-10">
-		<textarea
-			bind:this={textarea}
-			class="max-h-[500px]
+  <section class="mx-4 mt-10">
+    <textarea
+      bind:this={textarea}
+      class="max-h-[500px]
       text-base text-black bg-transparent dark:text-white border-b focus:border-b-2 border-gray-500 w-full focus:border-immich-primary dark:focus:border-immich-dark-primary transition-all resize-none overflow-hidden outline-none disabled:border-none"
-			placeholder={$page?.data?.user?.id !== asset.ownerId ? '' : 'Add a description'}
-			style:display={$page?.data?.user?.id !== asset.ownerId && textarea?.value == ''
-				? 'none'
-				: 'block'}
-			on:focusin={handleFocusIn}
-			on:focusout={handleFocusOut}
-			on:input={autoGrowHeight}
-			bind:value={description}
-			disabled={$page?.data?.user?.id !== asset.ownerId}
-		/>
-	</section>
+      placeholder={$page?.data?.user?.id !== asset.ownerId ? '' : 'Add a description'}
+      style:display={$page?.data?.user?.id !== asset.ownerId && textarea?.value == '' ? 'none' : 'block'}
+      on:focusin={handleFocusIn}
+      on:focusout={handleFocusOut}
+      on:input={autoGrowHeight}
+      bind:value={description}
+      disabled={$page?.data?.user?.id !== asset.ownerId}
+    />
+  </section>
 
-	{#if people.length > 0}
-		<section class="px-4 py-4 text-sm">
-			<h2>PEOPLE</h2>
+  {#if people.length > 0}
+    <section class="px-4 py-4 text-sm">
+      <h2>PEOPLE</h2>
 
-			<div class="flex flex-wrap gap-2 mt-4">
-				{#each people as person (person.id)}
-					<a href="/people/{person.id}" class="w-[90px]" on:click={() => dispatch('close-viewer')}>
-						<ImageThumbnail
-							curve
-							shadow
-							url={api.getPeopleThumbnailUrl(person.id)}
-							altText={person.name}
-							widthStyle="90px"
-							heightStyle="90px"
-							thumbhash={null}
-						/>
-						<p class="font-medium mt-1 truncate">{person.name}</p>
-					</a>
-				{/each}
-			</div>
-		</section>
-	{/if}
+      <div class="flex flex-wrap gap-2 mt-4">
+        {#each people as person (person.id)}
+          <a href="/people/{person.id}" class="w-[90px]" on:click={() => dispatch('close-viewer')}>
+            <ImageThumbnail
+              curve
+              shadow
+              url={api.getPeopleThumbnailUrl(person.id)}
+              altText={person.name}
+              widthStyle="90px"
+              heightStyle="90px"
+              thumbhash={null}
+            />
+            <p class="font-medium mt-1 truncate">{person.name}</p>
+          </a>
+        {/each}
+      </div>
+    </section>
+  {/if}
 
-	<div class="px-4 py-4">
-		{#if !asset.exifInfo}
-			<p class="text-sm">NO EXIF INFO AVAILABLE</p>
-		{:else}
-			<p class="text-sm">DETAILS</p>
-		{/if}
+  <div class="px-4 py-4">
+    {#if !asset.exifInfo}
+      <p class="text-sm">NO EXIF INFO AVAILABLE</p>
+    {:else}
+      <p class="text-sm">DETAILS</p>
+    {/if}
 
-		{#if asset.exifInfo?.dateTimeOriginal}
-			{@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
-				zone: asset.exifInfo.timeZone ?? undefined
-			})}
-			<div class="flex gap-4 py-4">
-				<div>
-					<Calendar size="24" />
-				</div>
+    {#if asset.exifInfo?.dateTimeOriginal}
+      {@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
+        zone: asset.exifInfo.timeZone ?? undefined,
+      })}
+      <div class="flex gap-4 py-4">
+        <div>
+          <Calendar size="24" />
+        </div>
 
-				<div>
-					<p>
-						{assetDateTimeOriginal.toLocaleString(
-							{
-								month: 'short',
-								day: 'numeric',
-								year: 'numeric'
-							},
-							{ locale: $locale }
-						)}
-					</p>
-					<div class="flex gap-2 text-sm">
-						<p>
-							{assetDateTimeOriginal.toLocaleString(
-								{
-									weekday: 'short',
-									hour: 'numeric',
-									minute: '2-digit',
-									timeZoneName: 'longOffset'
-								},
-								{ locale: $locale }
-							)}
-						</p>
-					</div>
-				</div>
-			</div>{/if}
+        <div>
+          <p>
+            {assetDateTimeOriginal.toLocaleString(
+              {
+                month: 'short',
+                day: 'numeric',
+                year: 'numeric',
+              },
+              { locale: $locale },
+            )}
+          </p>
+          <div class="flex gap-2 text-sm">
+            <p>
+              {assetDateTimeOriginal.toLocaleString(
+                {
+                  weekday: 'short',
+                  hour: 'numeric',
+                  minute: '2-digit',
+                  timeZoneName: 'longOffset',
+                },
+                { locale: $locale },
+              )}
+            </p>
+          </div>
+        </div>
+      </div>{/if}
 
-		{#if asset.exifInfo?.fileSizeInByte}
-			<div class="flex gap-4 py-4">
-				<div><ImageOutline size="24" /></div>
+    {#if asset.exifInfo?.fileSizeInByte}
+      <div class="flex gap-4 py-4">
+        <div><ImageOutline size="24" /></div>
 
-				<div>
-					<p class="break-all">
-						{getAssetFilename(asset)}
-					</p>
-					<div class="flex text-sm gap-2">
-						{#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
-							{#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
-								<p>
-									{getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP
-								</p>
-							{/if}
+        <div>
+          <p class="break-all">
+            {getAssetFilename(asset)}
+          </p>
+          <div class="flex text-sm gap-2">
+            {#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
+              {#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
+                <p>
+                  {getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP
+                </p>
+              {/if}
 
-							<p>{asset.exifInfo.exifImageHeight} x {asset.exifInfo.exifImageWidth}</p>
-						{/if}
-						<p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
-					</div>
-				</div>
-			</div>
-		{/if}
+              <p>{asset.exifInfo.exifImageHeight} x {asset.exifInfo.exifImageWidth}</p>
+            {/if}
+            <p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
+          </div>
+        </div>
+      </div>
+    {/if}
 
-		{#if asset.exifInfo?.fNumber}
-			<div class="flex gap-4 py-4">
-				<div><CameraIris size="24" /></div>
+    {#if asset.exifInfo?.fNumber}
+      <div class="flex gap-4 py-4">
+        <div><CameraIris size="24" /></div>
 
-				<div>
-					<p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p>
-					<div class="flex text-sm gap-2">
-						<p>{`ƒ/${asset.exifInfo.fNumber.toLocaleString($locale)}` || ''}</p>
+        <div>
+          <p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p>
+          <div class="flex text-sm gap-2">
+            <p>{`ƒ/${asset.exifInfo.fNumber.toLocaleString($locale)}` || ''}</p>
 
-						{#if asset.exifInfo.exposureTime}
-							<p>{`${asset.exifInfo.exposureTime}`}</p>
-						{/if}
+            {#if asset.exifInfo.exposureTime}
+              <p>{`${asset.exifInfo.exposureTime}`}</p>
+            {/if}
 
-						{#if asset.exifInfo.focalLength}
-							<p>{`${asset.exifInfo.focalLength.toLocaleString($locale)} mm`}</p>
-						{/if}
+            {#if asset.exifInfo.focalLength}
+              <p>{`${asset.exifInfo.focalLength.toLocaleString($locale)} mm`}</p>
+            {/if}
 
-						{#if asset.exifInfo.iso}
-							<p>
-								{`ISO${asset.exifInfo.iso}`}
-							</p>
-						{/if}
-					</div>
-				</div>
-			</div>
-		{/if}
+            {#if asset.exifInfo.iso}
+              <p>
+                {`ISO${asset.exifInfo.iso}`}
+              </p>
+            {/if}
+          </div>
+        </div>
+      </div>
+    {/if}
 
-		{#if asset.exifInfo?.city}
-			<div class="flex gap-4 py-4">
-				<div><MapMarkerOutline size="24" /></div>
+    {#if asset.exifInfo?.city}
+      <div class="flex gap-4 py-4">
+        <div><MapMarkerOutline size="24" /></div>
 
-				<div>
-					<p>{asset.exifInfo.city}</p>
-					<div class="flex text-sm gap-2">
-						<p>{asset.exifInfo.state}</p>
-					</div>
-					<div class="flex text-sm gap-2">
-						<p>{asset.exifInfo.country}</p>
-					</div>
-				</div>
-			</div>
-		{/if}
-	</div>
+        <div>
+          <p>{asset.exifInfo.city}</p>
+          <div class="flex text-sm gap-2">
+            <p>{asset.exifInfo.state}</p>
+          </div>
+          <div class="flex text-sm gap-2">
+            <p>{asset.exifInfo.country}</p>
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
 </section>
 
 {#if latlng}
-	<div class="h-[360px]">
-		{#await import('../shared-components/leaflet') then { Map, TileLayer, Marker }}
-			<Map center={latlng} zoom={14}>
-				<TileLayer
-					urlTemplate={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
-					options={{
-						attribution:
-							'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-					}}
-				/>
-				<Marker {latlng} popupContent="{latlng[0].toFixed(7)},{latlng[1].toFixed(7)}" />
-			</Map>
-		{/await}
-	</div>
+  <div class="h-[360px]">
+    {#await import('../shared-components/leaflet') then { Map, TileLayer, Marker }}
+      <Map center={latlng} zoom={14}>
+        <TileLayer
+          urlTemplate={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
+          options={{
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+          }}
+        />
+        <Marker {latlng} popupContent="{latlng[0].toFixed(7)},{latlng[1].toFixed(7)}" />
+      </Map>
+    {/await}
+  </div>
 {/if}
 
 <section class="p-2 dark:text-immich-dark-fg">
-	<div class="px-4 py-4">
-		{#if albums.length > 0}
-			<p class="text-sm pb-4">APPEARS IN</p>
-		{/if}
-		{#each albums as album}
-			<a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
-				<div
-					class="flex gap-4 py-2 hover:cursor-pointer"
-					on:click={() => dispatch('click', album)}
-					on:keydown={() => dispatch('click', album)}
-				>
-					<div>
-						<img
-							alt={album.albumName}
-							class="w-[50px] h-[50px] object-cover rounded"
-							src={album.albumThumbnailAssetId &&
-								api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
-							draggable="false"
-						/>
-					</div>
+  <div class="px-4 py-4">
+    {#if albums.length > 0}
+      <p class="text-sm pb-4">APPEARS IN</p>
+    {/if}
+    {#each albums as album}
+      <a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
+        <div
+          class="flex gap-4 py-2 hover:cursor-pointer"
+          on:click={() => dispatch('click', album)}
+          on:keydown={() => dispatch('click', album)}
+        >
+          <div>
+            <img
+              alt={album.albumName}
+              class="w-[50px] h-[50px] object-cover rounded"
+              src={album.albumThumbnailAssetId &&
+                api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
+              draggable="false"
+            />
+          </div>
 
-					<div class="mt-auto mb-auto">
-						<p class="dark:text-immich-dark-primary">{album.albumName}</p>
-						<div class="flex gap-2 text-sm">
-							<p>{album.assetCount} items</p>
-							{#if album.shared}
-								<p>· Shared</p>
-							{/if}
-						</div>
-					</div>
-				</div>
-			</a>
-		{/each}
-	</div>
+          <div class="mt-auto mb-auto">
+            <p class="dark:text-immich-dark-primary">{album.albumName}</p>
+            <div class="flex gap-2 text-sm">
+              <p>{album.assetCount} items</p>
+              {#if album.shared}
+                <p>· Shared</p>
+              {/if}
+            </div>
+          </div>
+        </div>
+      </a>
+    {/each}
+  </div>
 </section>
diff --git a/web/src/lib/components/asset-viewer/download-panel.svelte b/web/src/lib/components/asset-viewer/download-panel.svelte
index a8c1b46dc..3f0c872d2 100644
--- a/web/src/lib/components/asset-viewer/download-panel.svelte
+++ b/web/src/lib/components/asset-viewer/download-panel.svelte
@@ -1,31 +1,28 @@
 <script lang="ts">
-	import { downloadAssets, isDownloading } from '$lib/stores/download';
-	import { fly, slide } from 'svelte/transition';
+  import { downloadAssets, isDownloading } from '$lib/stores/download';
+  import { fly, slide } from 'svelte/transition';
 </script>
 
 {#if $isDownloading}
-	<div
-		transition:fly={{ x: -100, duration: 350 }}
-		class="w-[315px] max-h-[270px] bg-immich-bg border rounded-2xl shadow-sm absolute bottom-10 left-2 p-4 z-[10000] text-sm"
-	>
-		<p class="text-gray-500 text-xs mb-2">DOWNLOADING</p>
-		<div class="max-h-[200px] my-2 overflow-y-auto mb-2 flex flex-col text-sm">
-			{#each Object.keys($downloadAssets) as fileName}
-				<div class="mb-2" transition:slide>
-					<p class="font-medium text-xs truncate">■ {fileName}</p>
-					<div class="flex flex-row-reverse place-items-center gap-5">
-						<p>
-							<span class="text-immich-primary font-medium">{$downloadAssets[fileName]}</span>/100
-						</p>
-						<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700">
-							<div
-								class="bg-immich-primary h-[7px] rounded-full"
-								style={`width: ${$downloadAssets[fileName]}%`}
-							/>
-						</div>
-					</div>
-				</div>
-			{/each}
-		</div>
-	</div>
+  <div
+    transition:fly={{ x: -100, duration: 350 }}
+    class="w-[315px] max-h-[270px] bg-immich-bg border rounded-2xl shadow-sm absolute bottom-10 left-2 p-4 z-[10000] text-sm"
+  >
+    <p class="text-gray-500 text-xs mb-2">DOWNLOADING</p>
+    <div class="max-h-[200px] my-2 overflow-y-auto mb-2 flex flex-col text-sm">
+      {#each Object.keys($downloadAssets) as fileName}
+        <div class="mb-2" transition:slide>
+          <p class="font-medium text-xs truncate">■ {fileName}</p>
+          <div class="flex flex-row-reverse place-items-center gap-5">
+            <p>
+              <span class="text-immich-primary font-medium">{$downloadAssets[fileName]}</span>/100
+            </p>
+            <div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700">
+              <div class="bg-immich-primary h-[7px] rounded-full" style={`width: ${$downloadAssets[fileName]}%`} />
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
 {/if}
diff --git a/web/src/lib/components/asset-viewer/intersection-observer.svelte b/web/src/lib/components/asset-viewer/intersection-observer.svelte
index b373c2d34..4b3d9b89a 100644
--- a/web/src/lib/components/asset-viewer/intersection-observer.svelte
+++ b/web/src/lib/components/asset-viewer/intersection-observer.svelte
@@ -1,77 +1,77 @@
 <script lang="ts">
-	import { BucketPosition } from '$lib/models/asset-grid-state';
-	import { onMount } from 'svelte';
-	import { createEventDispatcher } from 'svelte';
+  import { BucketPosition } from '$lib/models/asset-grid-state';
+  import { onMount } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
 
-	export let once = false;
-	export let top = 0;
-	export let bottom = 0;
-	export let left = 0;
-	export let right = 0;
-	export let root: HTMLElement | null = null;
+  export let once = false;
+  export let top = 0;
+  export let bottom = 0;
+  export let left = 0;
+  export let right = 0;
+  export let root: HTMLElement | null = null;
 
-	let intersecting = false;
-	let container: HTMLDivElement;
-	const dispatch = createEventDispatcher();
+  let intersecting = false;
+  let container: HTMLDivElement;
+  const dispatch = createEventDispatcher();
 
-	onMount(() => {
-		if (typeof IntersectionObserver !== 'undefined') {
-			const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
-			const observer = new IntersectionObserver(
-				(entries) => {
-					intersecting = entries[0].isIntersecting;
-					if (!intersecting) {
-						dispatch('hidden', container);
-					}
+  onMount(() => {
+    if (typeof IntersectionObserver !== 'undefined') {
+      const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          intersecting = entries[0].isIntersecting;
+          if (!intersecting) {
+            dispatch('hidden', container);
+          }
 
-					if (intersecting && once) {
-						observer.unobserve(container);
-					}
+          if (intersecting && once) {
+            observer.unobserve(container);
+          }
 
-					if (intersecting) {
-						let position: BucketPosition = BucketPosition.Visible;
-						if (entries[0].boundingClientRect.top + 50 > entries[0].intersectionRect.bottom) {
-							position = BucketPosition.Below;
-						} else if (entries[0].boundingClientRect.bottom < 0) {
-							position = BucketPosition.Above;
-						}
+          if (intersecting) {
+            let position: BucketPosition = BucketPosition.Visible;
+            if (entries[0].boundingClientRect.top + 50 > entries[0].intersectionRect.bottom) {
+              position = BucketPosition.Below;
+            } else if (entries[0].boundingClientRect.bottom < 0) {
+              position = BucketPosition.Above;
+            }
 
-						dispatch('intersected', {
-							container,
-							position
-						});
-					}
-				},
-				{
-					rootMargin,
-					root
-				}
-			);
+            dispatch('intersected', {
+              container,
+              position,
+            });
+          }
+        },
+        {
+          rootMargin,
+          root,
+        },
+      );
 
-			observer.observe(container);
-			return () => observer.unobserve(container);
-		}
+      observer.observe(container);
+      return () => observer.unobserve(container);
+    }
 
-		// The following is a fallback for older browsers
-		function handler() {
-			const bcr = container.getBoundingClientRect();
+    // The following is a fallback for older browsers
+    function handler() {
+      const bcr = container.getBoundingClientRect();
 
-			intersecting =
-				bcr.bottom + bottom > 0 &&
-				bcr.right + right > 0 &&
-				bcr.top - top < window.innerHeight &&
-				bcr.left - left < window.innerWidth;
+      intersecting =
+        bcr.bottom + bottom > 0 &&
+        bcr.right + right > 0 &&
+        bcr.top - top < window.innerHeight &&
+        bcr.left - left < window.innerWidth;
 
-			if (intersecting && once) {
-				window.removeEventListener('scroll', handler);
-			}
-		}
+      if (intersecting && once) {
+        window.removeEventListener('scroll', handler);
+      }
+    }
 
-		window.addEventListener('scroll', handler);
-		return () => window.removeEventListener('scroll', handler);
-	});
+    window.addEventListener('scroll', handler);
+    return () => window.removeEventListener('scroll', handler);
+  });
 </script>
 
 <div bind:this={container}>
-	<slot {intersecting} />
+  <slot {intersecting} />
 </div>
diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index e58fa655b..bbf73c734 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -1,119 +1,113 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	import { onMount } from 'svelte';
-	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
-	import { api, AssetResponseDto } from '@api';
-	import {
-		notificationController,
-		NotificationType
-	} from '../shared-components/notification/notification';
-	import { useZoomImageWheel } from '@zoom-image/svelte';
-	import { photoZoomState } from '$lib/stores/zoom-image.store';
+  import { fade } from 'svelte/transition';
+  import { onMount } from 'svelte';
+  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { api, AssetResponseDto } from '@api';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import { useZoomImageWheel } from '@zoom-image/svelte';
+  import { photoZoomState } from '$lib/stores/zoom-image.store';
 
-	export let asset: AssetResponseDto;
-	export let publicSharedKey = '';
-	let imgElement: HTMLDivElement;
+  export let asset: AssetResponseDto;
+  export let publicSharedKey = '';
+  let imgElement: HTMLDivElement;
 
-	let assetData: string;
+  let assetData: string;
 
-	let copyImageToClipboard: (src: string) => Promise<Blob>;
-	let canCopyImagesToClipboard: () => boolean;
+  let copyImageToClipboard: (src: string) => Promise<Blob>;
+  let canCopyImagesToClipboard: () => boolean;
 
-	onMount(async () => {
-		// Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
-		// TODO: Move to regular import once the package correctly supports ESM.
-		const module = await import('copy-image-clipboard');
-		copyImageToClipboard = module.copyImageToClipboard;
-		canCopyImagesToClipboard = module.canCopyImagesToClipboard;
-	});
+  onMount(async () => {
+    // Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
+    // TODO: Move to regular import once the package correctly supports ESM.
+    const module = await import('copy-image-clipboard');
+    copyImageToClipboard = module.copyImageToClipboard;
+    canCopyImagesToClipboard = module.canCopyImagesToClipboard;
+  });
 
-	const loadAssetData = async () => {
-		try {
-			const { data } = await api.assetApi.serveFile(
-				{ id: asset.id, isThumb: false, isWeb: true, key: publicSharedKey },
-				{
-					responseType: 'blob'
-				}
-			);
+  const loadAssetData = async () => {
+    try {
+      const { data } = await api.assetApi.serveFile(
+        { id: asset.id, isThumb: false, isWeb: true, key: publicSharedKey },
+        {
+          responseType: 'blob',
+        },
+      );
 
-			if (!(data instanceof Blob)) {
-				return;
-			}
+      if (!(data instanceof Blob)) {
+        return;
+      }
 
-			assetData = URL.createObjectURL(data);
-			return assetData;
-		} catch {
-			// Do nothing
-		}
-	};
+      assetData = URL.createObjectURL(data);
+      return assetData;
+    } catch {
+      // Do nothing
+    }
+  };
 
-	const handleKeypress = async ({ metaKey, ctrlKey, key }: KeyboardEvent) => {
-		if ((metaKey || ctrlKey) && key === 'c') {
-			await doCopy();
-		}
-	};
+  const handleKeypress = async ({ metaKey, ctrlKey, key }: KeyboardEvent) => {
+    if ((metaKey || ctrlKey) && key === 'c') {
+      await doCopy();
+    }
+  };
 
-	const doCopy = async () => {
-		if (!canCopyImagesToClipboard()) {
-			return;
-		}
+  const doCopy = async () => {
+    if (!canCopyImagesToClipboard()) {
+      return;
+    }
 
-		try {
-			await copyImageToClipboard(assetData);
-			notificationController.show({
-				type: NotificationType.Info,
-				message: 'Copied image to clipboard.',
-				timeout: 3000
-			});
-		} catch (err) {
-			console.error('Error [photo-viewer]:', err);
-			notificationController.show({
-				type: NotificationType.Error,
-				message: 'Copying image to clipboard failed.'
-			});
-		}
-	};
+    try {
+      await copyImageToClipboard(assetData);
+      notificationController.show({
+        type: NotificationType.Info,
+        message: 'Copied image to clipboard.',
+        timeout: 3000,
+      });
+    } catch (err) {
+      console.error('Error [photo-viewer]:', err);
+      notificationController.show({
+        type: NotificationType.Error,
+        message: 'Copying image to clipboard failed.',
+      });
+    }
+  };
 
-	const doZoomImage = async () => {
-		setZoomImageWheelState({
-			currentZoom: $zoomImageWheelState.currentZoom === 1 ? 2 : 1
-		});
-	};
+  const doZoomImage = async () => {
+    setZoomImageWheelState({
+      currentZoom: $zoomImageWheelState.currentZoom === 1 ? 2 : 1,
+    });
+  };
 
-	const {
-		createZoomImage: createZoomImageWheel,
-		zoomImageState: zoomImageWheelState,
-		setZoomImageState: setZoomImageWheelState
-	} = useZoomImageWheel();
+  const {
+    createZoomImage: createZoomImageWheel,
+    zoomImageState: zoomImageWheelState,
+    setZoomImageState: setZoomImageWheelState,
+  } = useZoomImageWheel();
 
-	zoomImageWheelState.subscribe((state) => {
-		photoZoomState.set(state);
-	});
+  zoomImageWheelState.subscribe((state) => {
+    photoZoomState.set(state);
+  });
 
-	$: if (imgElement) {
-		createZoomImageWheel(imgElement, {
-			wheelZoomRatio: 0.06
-		});
-	}
+  $: if (imgElement) {
+    createZoomImageWheel(imgElement, {
+      wheelZoomRatio: 0.06,
+    });
+  }
 </script>
 
 <svelte:window on:keydown={handleKeypress} on:copyImage={doCopy} on:zoomImage={doZoomImage} />
 
-<div
-	transition:fade={{ duration: 150 }}
-	class="flex place-items-center place-content-center h-full select-none"
->
-	{#await loadAssetData()}
-		<LoadingSpinner />
-	{:then assetData}
-		<div bind:this={imgElement} class="h-full w-full">
-			<img
-				transition:fade={{ duration: 150 }}
-				src={assetData}
-				alt={asset.id}
-				class="object-contain h-full w-full"
-				draggable="false"
-			/>
-		</div>
-	{/await}
+<div transition:fade={{ duration: 150 }} class="flex place-items-center place-content-center h-full select-none">
+  {#await loadAssetData()}
+    <LoadingSpinner />
+  {:then assetData}
+    <div bind:this={imgElement} class="h-full w-full">
+      <img
+        transition:fade={{ duration: 150 }}
+        src={assetData}
+        alt={asset.id}
+        class="object-contain h-full w-full"
+        draggable="false"
+      />
+    </div>
+  {/await}
 </div>
diff --git a/web/src/lib/components/asset-viewer/video-viewer.svelte b/web/src/lib/components/asset-viewer/video-viewer.svelte
index 801768dd8..246ee97e1 100644
--- a/web/src/lib/components/asset-viewer/video-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-viewer.svelte
@@ -1,45 +1,42 @@
 <script lang="ts">
-	import { api } from '@api';
-	import { fade } from 'svelte/transition';
-	import { createEventDispatcher } from 'svelte';
-	import { videoViewerVolume } from '$lib/stores/preferences.store';
-	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { api } from '@api';
+  import { fade } from 'svelte/transition';
+  import { createEventDispatcher } from 'svelte';
+  import { videoViewerVolume } from '$lib/stores/preferences.store';
+  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 
-	export let assetId: string;
-	export let publicSharedKey: string | undefined = undefined;
+  export let assetId: string;
+  export let publicSharedKey: string | undefined = undefined;
 
-	let isVideoLoading = true;
-	const dispatch = createEventDispatcher();
+  let isVideoLoading = true;
+  const dispatch = createEventDispatcher();
 
-	const handleCanPlay = (ev: Event & { currentTarget: HTMLVideoElement }) => {
-		const playerNode = ev.currentTarget;
+  const handleCanPlay = (ev: Event & { currentTarget: HTMLVideoElement }) => {
+    const playerNode = ev.currentTarget;
 
-		playerNode.muted = true;
-		playerNode.play();
-		playerNode.muted = false;
+    playerNode.muted = true;
+    playerNode.play();
+    playerNode.muted = false;
 
-		isVideoLoading = false;
-	};
+    isVideoLoading = false;
+  };
 </script>
 
-<div
-	transition:fade={{ duration: 150 }}
-	class="flex place-items-center place-content-center h-full select-none"
->
-	<video
-		controls
-		class="h-full object-contain"
-		on:canplay={handleCanPlay}
-		on:ended={() => dispatch('onVideoEnded')}
-		bind:volume={$videoViewerVolume}
-	>
-		<source src={api.getAssetFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
-		<track kind="captions" />
-	</video>
+<div transition:fade={{ duration: 150 }} class="flex place-items-center place-content-center h-full select-none">
+  <video
+    controls
+    class="h-full object-contain"
+    on:canplay={handleCanPlay}
+    on:ended={() => dispatch('onVideoEnded')}
+    bind:volume={$videoViewerVolume}
+  >
+    <source src={api.getAssetFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
+    <track kind="captions" />
+  </video>
 
-	{#if isVideoLoading}
-		<div class="absolute flex place-items-center place-content-center">
-			<LoadingSpinner />
-		</div>
-	{/if}
+  {#if isVideoLoading}
+    <div class="absolute flex place-items-center place-content-center">
+      <LoadingSpinner />
+    </div>
+  {/if}
 </div>
diff --git a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
index 0acf5622e..4b1eea5e5 100644
--- a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
@@ -1,47 +1,47 @@
 <script lang="ts">
-	import { imageLoad } from '$lib/utils/image-load';
-	import { fade } from 'svelte/transition';
-	import { thumbHashToDataURL } from 'thumbhash';
-	import { Buffer } from 'buffer';
+  import { imageLoad } from '$lib/utils/image-load';
+  import { fade } from 'svelte/transition';
+  import { thumbHashToDataURL } from 'thumbhash';
+  import { Buffer } from 'buffer';
 
-	export let url: string;
-	export let altText: string;
-	export let heightStyle: string | undefined = undefined;
-	export let widthStyle: string;
-	export let thumbhash: string | null = null;
-	export let curve = false;
-	export let shadow = false;
-	export let circle = false;
+  export let url: string;
+  export let altText: string;
+  export let heightStyle: string | undefined = undefined;
+  export let widthStyle: string;
+  export let thumbhash: string | null = null;
+  export let curve = false;
+  export let shadow = false;
+  export let circle = false;
 
-	let complete = false;
+  let complete = false;
 </script>
 
 <img
-	style:width={widthStyle}
-	style:height={heightStyle}
-	src={url}
-	alt={altText}
-	class="object-cover transition-opacity duration-300"
-	class:rounded-lg={curve}
-	class:shadow-lg={shadow}
-	class:rounded-full={circle}
-	class:opacity-0={!thumbhash && !complete}
-	draggable="false"
-	use:imageLoad
-	on:image-load|once={() => (complete = true)}
+  style:width={widthStyle}
+  style:height={heightStyle}
+  src={url}
+  alt={altText}
+  class="object-cover transition-opacity duration-300"
+  class:rounded-lg={curve}
+  class:shadow-lg={shadow}
+  class:rounded-full={circle}
+  class:opacity-0={!thumbhash && !complete}
+  draggable="false"
+  use:imageLoad
+  on:image-load|once={() => (complete = true)}
 />
 
 {#if thumbhash && !complete}
-	<img
-		style:width={widthStyle}
-		style:height={heightStyle}
-		src={thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))}
-		alt={altText}
-		class="absolute object-cover top-0"
-		class:rounded-lg={curve}
-		class:shadow-lg={shadow}
-		class:rounded-full={circle}
-		draggable="false"
-		out:fade={{ duration: 300 }}
-	/>
+  <img
+    style:width={widthStyle}
+    style:height={heightStyle}
+    src={thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))}
+    alt={altText}
+    class="absolute object-cover top-0"
+    class:rounded-lg={curve}
+    class:shadow-lg={shadow}
+    class:rounded-full={circle}
+    draggable="false"
+    out:fade={{ duration: 300 }}
+  />
 {/if}
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 2e1ca9a35..f0946cfd1 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -1,158 +1,158 @@
 <script lang="ts">
-	import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
-	import { timeToSeconds } from '$lib/utils/time-to-seconds';
-	import { api, AssetResponseDto, AssetTypeEnum, ThumbnailFormat } from '@api';
-	import { createEventDispatcher } from 'svelte';
-	import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
-	import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
-	import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
-	import Heart from 'svelte-material-icons/Heart.svelte';
-	import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
-	import ImageThumbnail from './image-thumbnail.svelte';
-	import VideoThumbnail from './video-thumbnail.svelte';
-	import ImageBrokenVariant from 'svelte-material-icons/ImageBrokenVariant.svelte';
+  import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
+  import { timeToSeconds } from '$lib/utils/time-to-seconds';
+  import { api, AssetResponseDto, AssetTypeEnum, ThumbnailFormat } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
+  import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
+  import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
+  import Heart from 'svelte-material-icons/Heart.svelte';
+  import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
+  import ImageThumbnail from './image-thumbnail.svelte';
+  import VideoThumbnail from './video-thumbnail.svelte';
+  import ImageBrokenVariant from 'svelte-material-icons/ImageBrokenVariant.svelte';
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	export let asset: AssetResponseDto;
-	export let groupIndex = 0;
-	export let thumbnailSize: number | undefined = undefined;
-	export let thumbnailWidth: number | undefined = undefined;
-	export let thumbnailHeight: number | undefined = undefined;
-	export let format: ThumbnailFormat = ThumbnailFormat.Webp;
-	export let selected = false;
-	export let disabled = false;
-	export let readonly = false;
-	export let publicSharedKey: string | undefined = undefined;
-	export let showArchiveIcon = false;
+  export let asset: AssetResponseDto;
+  export let groupIndex = 0;
+  export let thumbnailSize: number | undefined = undefined;
+  export let thumbnailWidth: number | undefined = undefined;
+  export let thumbnailHeight: number | undefined = undefined;
+  export let format: ThumbnailFormat = ThumbnailFormat.Webp;
+  export let selected = false;
+  export let disabled = false;
+  export let readonly = false;
+  export let publicSharedKey: string | undefined = undefined;
+  export let showArchiveIcon = false;
 
-	let mouseOver = false;
+  let mouseOver = false;
 
-	$: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
+  $: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
 
-	$: [width, height] = (() => {
-		if (thumbnailSize) {
-			return [thumbnailSize, thumbnailSize];
-		}
+  $: [width, height] = (() => {
+    if (thumbnailSize) {
+      return [thumbnailSize, thumbnailSize];
+    }
 
-		if (thumbnailWidth && thumbnailHeight) {
-			return [thumbnailWidth, thumbnailHeight];
-		}
+    if (thumbnailWidth && thumbnailHeight) {
+      return [thumbnailWidth, thumbnailHeight];
+    }
 
-		return [235, 235];
-	})();
+    return [235, 235];
+  })();
 
-	const thumbnailClickedHandler = () => {
-		if (!disabled) {
-			dispatch('click', { asset });
-		}
-	};
+  const thumbnailClickedHandler = () => {
+    if (!disabled) {
+      dispatch('click', { asset });
+    }
+  };
 
-	const onIconClickedHandler = (e: MouseEvent) => {
-		e.stopPropagation();
-		if (!disabled) {
-			dispatch('select', { asset });
-		}
-	};
+  const onIconClickedHandler = (e: MouseEvent) => {
+    e.stopPropagation();
+    if (!disabled) {
+      dispatch('select', { asset });
+    }
+  };
 </script>
 
 <IntersectionObserver once={false} let:intersecting>
-	<div
-		style:width="{width}px"
-		style:height="{height}px"
-		class="relative group overflow-hidden {disabled
-			? 'bg-gray-300'
-			: 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
-		class:cursor-not-allowed={disabled}
-		class:hover:cursor-pointer={!disabled}
-		on:mouseenter={() => (mouseOver = true)}
-		on:mouseleave={() => (mouseOver = false)}
-		on:click={thumbnailClickedHandler}
-		on:keydown={thumbnailClickedHandler}
-	>
-		{#if intersecting}
-			<div class="absolute w-full h-full z-20">
-				<!-- Select asset button  -->
-				{#if !readonly}
-					<button
-						on:click={onIconClickedHandler}
-						class="absolute p-2 group-hover:block"
-						class:group-hover:block={!disabled}
-						class:hidden={!selected}
-						class:cursor-not-allowed={disabled}
-						role="checkbox"
-						aria-checked={selected}
-						{disabled}
-					>
-						{#if disabled}
-							<CheckCircle size="24" class="text-zinc-800" />
-						{:else if selected}
-							<CheckCircle size="24" class="text-immich-primary" />
-						{:else}
-							<CheckCircle size="24" class="text-white/80 hover:text-white" />
-						{/if}
-					</button>
-				{/if}
-			</div>
+  <div
+    style:width="{width}px"
+    style:height="{height}px"
+    class="relative group overflow-hidden {disabled
+      ? 'bg-gray-300'
+      : 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
+    class:cursor-not-allowed={disabled}
+    class:hover:cursor-pointer={!disabled}
+    on:mouseenter={() => (mouseOver = true)}
+    on:mouseleave={() => (mouseOver = false)}
+    on:click={thumbnailClickedHandler}
+    on:keydown={thumbnailClickedHandler}
+  >
+    {#if intersecting}
+      <div class="absolute w-full h-full z-20">
+        <!-- Select asset button  -->
+        {#if !readonly}
+          <button
+            on:click={onIconClickedHandler}
+            class="absolute p-2 group-hover:block"
+            class:group-hover:block={!disabled}
+            class:hidden={!selected}
+            class:cursor-not-allowed={disabled}
+            role="checkbox"
+            aria-checked={selected}
+            {disabled}
+          >
+            {#if disabled}
+              <CheckCircle size="24" class="text-zinc-800" />
+            {:else if selected}
+              <CheckCircle size="24" class="text-immich-primary" />
+            {:else}
+              <CheckCircle size="24" class="text-white/80 hover:text-white" />
+            {/if}
+          </button>
+        {/if}
+      </div>
 
-			<div
-				class="h-full w-full bg-gray-100 dark:bg-immich-dark-gray absolute select-none transition-transform"
-				class:scale-[0.85]={selected}
-			>
-				<!-- Gradient overlay on hover -->
-				<div
-					class="absolute w-full h-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 group-hover:opacity-100 transition-opacity z-10"
-				/>
+      <div
+        class="h-full w-full bg-gray-100 dark:bg-immich-dark-gray absolute select-none transition-transform"
+        class:scale-[0.85]={selected}
+      >
+        <!-- Gradient overlay on hover -->
+        <div
+          class="absolute w-full h-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 group-hover:opacity-100 transition-opacity z-10"
+        />
 
-				<!-- Favorite asset star -->
-				{#if asset.isFavorite && !publicSharedKey}
-					<div class="absolute bottom-2 left-2 z-10">
-						<Heart size="24" class="text-white" />
-					</div>
-				{/if}
+        <!-- Favorite asset star -->
+        {#if asset.isFavorite && !publicSharedKey}
+          <div class="absolute bottom-2 left-2 z-10">
+            <Heart size="24" class="text-white" />
+          </div>
+        {/if}
 
-				{#if showArchiveIcon && asset.isArchived}
-					<div class="absolute {asset.isFavorite ? 'bottom-10' : 'bottom-2'} left-2 z-10">
-						<ArchiveArrowDownOutline size="24" class="text-white" />
-					</div>
-				{/if}
+        {#if showArchiveIcon && asset.isArchived}
+          <div class="absolute {asset.isFavorite ? 'bottom-10' : 'bottom-2'} left-2 z-10">
+            <ArchiveArrowDownOutline size="24" class="text-white" />
+          </div>
+        {/if}
 
-				{#if asset.resized}
-					<ImageThumbnail
-						url={api.getAssetThumbnailUrl(asset.id, format, publicSharedKey)}
-						altText={asset.originalFileName}
-						widthStyle="{width}px"
-						heightStyle="{height}px"
-						thumbhash={asset.thumbhash}
-					/>
-				{:else}
-					<div class="w-full h-full p-4 flex items-center justify-center">
-						<ImageBrokenVariant size="48" />
-					</div>
-				{/if}
+        {#if asset.resized}
+          <ImageThumbnail
+            url={api.getAssetThumbnailUrl(asset.id, format, publicSharedKey)}
+            altText={asset.originalFileName}
+            widthStyle="{width}px"
+            heightStyle="{height}px"
+            thumbhash={asset.thumbhash}
+          />
+        {:else}
+          <div class="w-full h-full p-4 flex items-center justify-center">
+            <ImageBrokenVariant size="48" />
+          </div>
+        {/if}
 
-				{#if asset.type === AssetTypeEnum.Video}
-					<div class="absolute w-full h-full top-0">
-						<VideoThumbnail
-							url={api.getAssetFileUrl(asset.id, false, true, publicSharedKey)}
-							enablePlayback={mouseOver}
-							durationInSeconds={timeToSeconds(asset.duration)}
-						/>
-					</div>
-				{/if}
+        {#if asset.type === AssetTypeEnum.Video}
+          <div class="absolute w-full h-full top-0">
+            <VideoThumbnail
+              url={api.getAssetFileUrl(asset.id, false, true, publicSharedKey)}
+              enablePlayback={mouseOver}
+              durationInSeconds={timeToSeconds(asset.duration)}
+            />
+          </div>
+        {/if}
 
-				{#if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
-					<div class="absolute w-full h-full top-0">
-						<VideoThumbnail
-							url={api.getAssetFileUrl(asset.livePhotoVideoId, false, true, publicSharedKey)}
-							pauseIcon={MotionPauseOutline}
-							playIcon={MotionPlayOutline}
-							showTime={false}
-							playbackOnIconHover
-						/>
-					</div>
-				{/if}
-			</div>
-		{/if}
-	</div>
+        {#if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
+          <div class="absolute w-full h-full top-0">
+            <VideoThumbnail
+              url={api.getAssetFileUrl(asset.livePhotoVideoId, false, true, publicSharedKey)}
+              pauseIcon={MotionPauseOutline}
+              playIcon={MotionPlayOutline}
+              showTime={false}
+              playbackOnIconHover
+            />
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
 </IntersectionObserver>
diff --git a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
index b8690794d..23e139f67 100644
--- a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
@@ -1,88 +1,86 @@
 <script lang="ts">
-	import { Duration } from 'luxon';
-	import PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
-	import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
-	import AlertCircleOutline from 'svelte-material-icons/AlertCircleOutline.svelte';
-	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { Duration } from 'luxon';
+  import PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
+  import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
+  import AlertCircleOutline from 'svelte-material-icons/AlertCircleOutline.svelte';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
 
-	export let url: string;
-	export let durationInSeconds = 0;
-	export let enablePlayback = false;
-	export let playbackOnIconHover = false;
-	export let showTime = true;
-	export let playIcon = PlayCircleOutline;
-	export let pauseIcon = PauseCircleOutline;
+  export let url: string;
+  export let durationInSeconds = 0;
+  export let enablePlayback = false;
+  export let playbackOnIconHover = false;
+  export let showTime = true;
+  export let playIcon = PlayCircleOutline;
+  export let pauseIcon = PauseCircleOutline;
 
-	let remainingSeconds = durationInSeconds;
-	let loading = true;
-	let error = false;
-	let player: HTMLVideoElement;
+  let remainingSeconds = durationInSeconds;
+  let loading = true;
+  let error = false;
+  let player: HTMLVideoElement;
 
-	$: if (!enablePlayback) {
-		// Reset remaining time when playback is disabled.
-		remainingSeconds = durationInSeconds;
+  $: if (!enablePlayback) {
+    // Reset remaining time when playback is disabled.
+    remainingSeconds = durationInSeconds;
 
-		if (player) {
-			// Cancel video buffering.
-			player.src = '';
-		}
-	}
+    if (player) {
+      // Cancel video buffering.
+      player.src = '';
+    }
+  }
 </script>
 
-<div
-	class="absolute right-0 top-0 text-white text-xs font-medium flex gap-1 place-items-center z-20"
->
-	{#if showTime}
-		<span class="pt-2">
-			{Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
-		</span>
-	{/if}
+<div class="absolute right-0 top-0 text-white text-xs font-medium flex gap-1 place-items-center z-20">
+  {#if showTime}
+    <span class="pt-2">
+      {Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
+    </span>
+  {/if}
 
-	<span
-		class="pt-2 pr-2"
-		on:mouseenter={() => {
-			if (playbackOnIconHover) {
-				enablePlayback = true;
-			}
-		}}
-		on:mouseleave={() => {
-			if (playbackOnIconHover) {
-				enablePlayback = false;
-			}
-		}}
-	>
-		{#if enablePlayback}
-			{#if loading}
-				<LoadingSpinner />
-			{:else if error}
-				<AlertCircleOutline size="24" class="text-red-600" />
-			{:else}
-				<svelte:component this={pauseIcon} size="24" />
-			{/if}
-		{:else}
-			<svelte:component this={playIcon} size="24" />
-		{/if}
-	</span>
+  <span
+    class="pt-2 pr-2"
+    on:mouseenter={() => {
+      if (playbackOnIconHover) {
+        enablePlayback = true;
+      }
+    }}
+    on:mouseleave={() => {
+      if (playbackOnIconHover) {
+        enablePlayback = false;
+      }
+    }}
+  >
+    {#if enablePlayback}
+      {#if loading}
+        <LoadingSpinner />
+      {:else if error}
+        <AlertCircleOutline size="24" class="text-red-600" />
+      {:else}
+        <svelte:component this={pauseIcon} size="24" />
+      {/if}
+    {:else}
+      <svelte:component this={playIcon} size="24" />
+    {/if}
+  </span>
 </div>
 
 {#if enablePlayback}
-	<video
-		bind:this={player}
-		class="w-full h-full object-cover"
-		muted
-		autoplay
-		src={url}
-		on:play={() => {
-			loading = false;
-			error = false;
-		}}
-		on:error={() => {
-			error = true;
-			loading = false;
-		}}
-		on:timeupdate={({ currentTarget }) => {
-			const remaining = currentTarget.duration - currentTarget.currentTime;
-			remainingSeconds = Math.min(Math.ceil(remaining), durationInSeconds);
-		}}
-	/>
+  <video
+    bind:this={player}
+    class="w-full h-full object-cover"
+    muted
+    autoplay
+    src={url}
+    on:play={() => {
+      loading = false;
+      error = false;
+    }}
+    on:error={() => {
+      error = true;
+      loading = false;
+    }}
+    on:timeupdate={({ currentTarget }) => {
+      const remaining = currentTarget.duration - currentTarget.currentTime;
+      remainingSeconds = Math.min(Math.ceil(remaining), durationInSeconds);
+    }}
+  />
 {/if}
diff --git a/web/src/lib/components/elements/badge.svelte b/web/src/lib/components/elements/badge.svelte
index 26296d929..7305d2eb0 100644
--- a/web/src/lib/components/elements/badge.svelte
+++ b/web/src/lib/components/elements/badge.svelte
@@ -1,26 +1,24 @@
 <script lang="ts" context="module">
-	export type Color = 'primary' | 'secondary';
-	export type Rounded = false | true | 'full';
+  export type Color = 'primary' | 'secondary';
+  export type Rounded = false | true | 'full';
 </script>
 
 <script lang="ts">
-	export let color: Color = 'primary';
-	export let rounded: Rounded = true;
+  export let color: Color = 'primary';
+  export let rounded: Rounded = true;
 
-	const colorClasses: Record<Color, string> = {
-		primary:
-			'text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary',
-		secondary:
-			'text-immich-dark-bg dark:text-immich-gray dark:bg-gray-600 bg-gray-300 dark:text-immich-gray'
-	};
+  const colorClasses: Record<Color, string> = {
+    primary: 'text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary',
+    secondary: 'text-immich-dark-bg dark:text-immich-gray dark:bg-gray-600 bg-gray-300 dark:text-immich-gray',
+  };
 </script>
 
 <span
-	class="inline-block h-min whitespace-nowrap px-4 pt-[0.55em] pb-[0.55em] text-center align-baseline text-xs leading-none {colorClasses[
-		color
-	]}"
-	class:rounded-md={rounded === true}
-	class:rounded-full={rounded === 'full'}
+  class="inline-block h-min whitespace-nowrap px-4 pt-[0.55em] pb-[0.55em] text-center align-baseline text-xs leading-none {colorClasses[
+    color
+  ]}"
+  class:rounded-md={rounded === true}
+  class:rounded-full={rounded === 'full'}
 >
-	<slot />
+  <slot />
 </span>
diff --git a/web/src/lib/components/elements/buttons/button.svelte b/web/src/lib/components/elements/buttons/button.svelte
index b0c04e873..8561cbc4c 100644
--- a/web/src/lib/components/elements/buttons/button.svelte
+++ b/web/src/lib/components/elements/buttons/button.svelte
@@ -1,73 +1,73 @@
 <script lang="ts" context="module">
-	export type Type = 'button' | 'submit' | 'reset';
-	export type Color =
-		| 'primary'
-		| 'secondary'
-		| 'transparent-primary'
-		| 'light-red'
-		| 'red'
-		| 'green'
-		| 'gray'
-		| 'transparent-gray'
-		| 'dark-gray'
-		| 'overlay-primary';
-	export type Size = 'icon' | 'link' | 'sm' | 'base' | 'lg';
-	export type Rounded = 'lg' | '3xl' | 'full' | false;
-	export type Shadow = 'md' | false;
+  export type Type = 'button' | 'submit' | 'reset';
+  export type Color =
+    | 'primary'
+    | 'secondary'
+    | 'transparent-primary'
+    | 'light-red'
+    | 'red'
+    | 'green'
+    | 'gray'
+    | 'transparent-gray'
+    | 'dark-gray'
+    | 'overlay-primary';
+  export type Size = 'icon' | 'link' | 'sm' | 'base' | 'lg';
+  export type Rounded = 'lg' | '3xl' | 'full' | false;
+  export type Shadow = 'md' | false;
 </script>
 
 <script lang="ts">
-	export let type: Type = 'button';
-	export let color: Color = 'primary';
-	export let size: Size = 'base';
-	export let rounded: Rounded = '3xl';
-	export let shadow: Shadow = 'md';
-	export let disabled = false;
-	export let fullwidth = false;
-	export let border = false;
-	export let title: string | undefined = '';
+  export let type: Type = 'button';
+  export let color: Color = 'primary';
+  export let size: Size = 'base';
+  export let rounded: Rounded = '3xl';
+  export let shadow: Shadow = 'md';
+  export let disabled = false;
+  export let fullwidth = false;
+  export let border = false;
+  export let title: string | undefined = '';
 
-	const colorClasses: Record<Color, string> = {
-		primary:
-			'bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray enabled:dark:hover:bg-immich-dark-primary/80 enabled:hover:bg-immich-primary/90',
-		secondary:
-			'bg-gray-500 dark:bg-gray-200 text-white dark:text-immich-dark-gray enabled:hover:bg-gray-500/90 enabled:dark:hover:bg-gray-200/90',
-		'transparent-primary':
-			'text-gray-500 dark:text-immich-dark-primary enabled:hover:bg-gray-100 enabled:dark:hover:bg-gray-700',
-		'light-red': 'bg-[#F9DEDC] text-[#410E0B] enabled:hover:bg-red-50',
-		red: 'bg-red-500 text-white enabled:hover:bg-red-400',
-		green: 'bg-lime-600 text-white enabled:hover:bg-lime-500',
-		gray: 'bg-gray-500 dark:bg-gray-200 enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 text-white dark:text-immich-dark-gray',
-		'transparent-gray':
-			'dark:text-immich-dark-fg enabled:hover:bg-immich-primary/5 enabled:hover:text-gray-700 enabled:hover:dark:text-immich-dark-fg enabled:dark:hover:bg-immich-dark-primary/25',
-		'dark-gray':
-			'dark:border-immich-dark-gray dark:bg-gray-500 enabled:dark:hover:bg-immich-dark-primary/50 enabled:hover:bg-immich-primary/10 dark:text-white',
-		'overlay-primary': 'text-gray-500 enabled:hover:bg-gray-100'
-	};
+  const colorClasses: Record<Color, string> = {
+    primary:
+      'bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray enabled:dark:hover:bg-immich-dark-primary/80 enabled:hover:bg-immich-primary/90',
+    secondary:
+      'bg-gray-500 dark:bg-gray-200 text-white dark:text-immich-dark-gray enabled:hover:bg-gray-500/90 enabled:dark:hover:bg-gray-200/90',
+    'transparent-primary':
+      'text-gray-500 dark:text-immich-dark-primary enabled:hover:bg-gray-100 enabled:dark:hover:bg-gray-700',
+    'light-red': 'bg-[#F9DEDC] text-[#410E0B] enabled:hover:bg-red-50',
+    red: 'bg-red-500 text-white enabled:hover:bg-red-400',
+    green: 'bg-lime-600 text-white enabled:hover:bg-lime-500',
+    gray: 'bg-gray-500 dark:bg-gray-200 enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 text-white dark:text-immich-dark-gray',
+    'transparent-gray':
+      'dark:text-immich-dark-fg enabled:hover:bg-immich-primary/5 enabled:hover:text-gray-700 enabled:hover:dark:text-immich-dark-fg enabled:dark:hover:bg-immich-dark-primary/25',
+    'dark-gray':
+      'dark:border-immich-dark-gray dark:bg-gray-500 enabled:dark:hover:bg-immich-dark-primary/50 enabled:hover:bg-immich-primary/10 dark:text-white',
+    'overlay-primary': 'text-gray-500 enabled:hover:bg-gray-100',
+  };
 
-	const sizeClasses: Record<Size, string> = {
-		icon: 'p-2.5',
-		link: 'p-2 font-medium',
-		sm: 'px-4 py-2 text-sm font-medium',
-		base: 'px-6 py-3 font-medium',
-		lg: 'px-6 py-4 font-semibold'
-	};
+  const sizeClasses: Record<Size, string> = {
+    icon: 'p-2.5',
+    link: 'p-2 font-medium',
+    sm: 'px-4 py-2 text-sm font-medium',
+    base: 'px-6 py-3 font-medium',
+    lg: 'px-6 py-4 font-semibold',
+  };
 </script>
 
 <button
-	{type}
-	{disabled}
-	{title}
-	on:click
-	class="inline-flex justify-center items-center transition-colors disabled:cursor-not-allowed disabled:opacity-60 {colorClasses[
-		color
-	]} {sizeClasses[size]}"
-	class:rounded-lg={rounded === 'lg'}
-	class:rounded-3xl={rounded === '3xl'}
-	class:rounded-full={rounded === 'full'}
-	class:shadow-md={shadow === 'md'}
-	class:w-full={fullwidth}
-	class:border
+  {type}
+  {disabled}
+  {title}
+  on:click
+  class="inline-flex justify-center items-center transition-colors disabled:cursor-not-allowed disabled:opacity-60 {colorClasses[
+    color
+  ]} {sizeClasses[size]}"
+  class:rounded-lg={rounded === 'lg'}
+  class:rounded-3xl={rounded === '3xl'}
+  class:rounded-full={rounded === 'full'}
+  class:shadow-md={shadow === 'md'}
+  class:w-full={fullwidth}
+  class:border
 >
-	<slot />
+  <slot />
 </button>
diff --git a/web/src/lib/components/elements/buttons/circle-icon-button.svelte b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
index 356c4079e..e567e0d5b 100644
--- a/web/src/lib/components/elements/buttons/circle-icon-button.svelte
+++ b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
@@ -1,37 +1,37 @@
 <script lang="ts">
-	import type Icon from 'svelte-material-icons/AbTesting.svelte';
+  import type Icon from 'svelte-material-icons/AbTesting.svelte';
 
-	export let logo: typeof Icon;
-	export let backgroundColor = 'transparent';
-	export let hoverColor = '#e2e7e9';
-	export let size = '24';
-	export let title = '';
-	export let isOpacity = false;
-	export let forceDark = false;
-	export let hideMobile = false;
+  export let logo: typeof Icon;
+  export let backgroundColor = 'transparent';
+  export let hoverColor = '#e2e7e9';
+  export let size = '24';
+  export let title = '';
+  export let isOpacity = false;
+  export let forceDark = false;
+  export let hideMobile = false;
 </script>
 
 <button
-	{title}
-	style:background-color={backgroundColor}
-	style:--immich-icon-button-hover-color={hoverColor}
-	class:dark:text-immich-dark-fg={!forceDark}
-	class="rounded-full p-3 flex place-items-center place-content-center transition-all
+  {title}
+  style:background-color={backgroundColor}
+  style:--immich-icon-button-hover-color={hoverColor}
+  class:dark:text-immich-dark-fg={!forceDark}
+  class="rounded-full p-3 flex place-items-center place-content-center transition-all
 	{isOpacity ? 'hover:bg-immich-bg/30' : 'immich-circle-icon-button hover:dark:text-immich-dark-gray'}
   {forceDark && 'hover:text-black'}
   {hideMobile && 'hidden sm:flex'}"
-	on:click
+  on:click
 >
-	<svelte:component this={logo} {size} />
-	<slot />
+  <svelte:component this={logo} {size} />
+  <slot />
 </button>
 
 <style>
-	:root {
-		--immich-icon-button-hover-color: #d3d3d3;
-	}
+  :root {
+    --immich-icon-button-hover-color: #d3d3d3;
+  }
 
-	.immich-circle-icon-button:hover {
-		background-color: var(--immich-icon-button-hover-color) !important;
-	}
+  .immich-circle-icon-button:hover {
+    background-color: var(--immich-icon-button-hover-color) !important;
+  }
 </style>
diff --git a/web/src/lib/components/elements/buttons/icon-button.svelte b/web/src/lib/components/elements/buttons/icon-button.svelte
index ab46a5580..5602b731a 100644
--- a/web/src/lib/components/elements/buttons/icon-button.svelte
+++ b/web/src/lib/components/elements/buttons/icon-button.svelte
@@ -1,14 +1,14 @@
 <script lang="ts" context="module">
-	export type Color = 'transparent-primary' | 'transparent-gray' | 'overlay-primary';
+  export type Color = 'transparent-primary' | 'transparent-gray' | 'overlay-primary';
 </script>
 
 <script lang="ts">
-	import Button from './button.svelte';
+  import Button from './button.svelte';
 
-	export let color: Color = 'transparent-primary';
-	export let title: string | undefined = undefined;
+  export let color: Color = 'transparent-primary';
+  export let title: string | undefined = undefined;
 </script>
 
 <Button size="icon" {color} {title} shadow={false} rounded="full" on:click>
-	<slot />
+  <slot />
 </Button>
diff --git a/web/src/lib/components/elements/buttons/link-button.svelte b/web/src/lib/components/elements/buttons/link-button.svelte
index fa45f384e..0d0d36907 100644
--- a/web/src/lib/components/elements/buttons/link-button.svelte
+++ b/web/src/lib/components/elements/buttons/link-button.svelte
@@ -1,13 +1,13 @@
 <script lang="ts" context="module">
-	export type Color = 'transparent-primary' | 'transparent-gray';
+  export type Color = 'transparent-primary' | 'transparent-gray';
 </script>
 
 <script lang="ts">
-	import Button from './button.svelte';
+  import Button from './button.svelte';
 
-	export let color: Color = 'transparent-gray';
+  export let color: Color = 'transparent-gray';
 </script>
 
 <Button size="link" {color} shadow={false} rounded="lg" on:click>
-	<slot />
+  <slot />
 </Button>
diff --git a/web/src/lib/components/elements/dropdown.svelte b/web/src/lib/components/elements/dropdown.svelte
index 4afc4acbb..38ed86fc9 100644
--- a/web/src/lib/components/elements/dropdown.svelte
+++ b/web/src/lib/components/elements/dropdown.svelte
@@ -1,62 +1,60 @@
 <script lang="ts">
-	import SwapVertical from 'svelte-material-icons/SwapVertical.svelte';
-	import Check from 'svelte-material-icons/Check.svelte';
-	import LinkButton from './buttons/link-button.svelte';
-	import { clickOutside } from '$lib/utils/click-outside';
-	import { fly } from 'svelte/transition';
+  import SwapVertical from 'svelte-material-icons/SwapVertical.svelte';
+  import Check from 'svelte-material-icons/Check.svelte';
+  import LinkButton from './buttons/link-button.svelte';
+  import { clickOutside } from '$lib/utils/click-outside';
+  import { fly } from 'svelte/transition';
 
-	export let options: string[] = [];
-	export let value = options[0];
+  export let options: string[] = [];
+  export let value = options[0];
 
-	let showMenu = false;
+  let showMenu = false;
 
-	const handleClickOutside = () => {
-		showMenu = false;
-	};
+  const handleClickOutside = () => {
+    showMenu = false;
+  };
 
-	const handleSelectOption = (index: number) => {
-		value = options[index];
-		showMenu = false;
-	};
+  const handleSelectOption = (index: number) => {
+    value = options[index];
+    showMenu = false;
+  };
 </script>
 
 <div id="dropdown-button" use:clickOutside on:outclick={handleClickOutside}>
-	<!-- BUTTON TITLE -->
-	<LinkButton on:click={() => (showMenu = true)}>
-		<div class="flex place-items-center gap-2 text-sm">
-			<SwapVertical size="18" />
-			{value}
-		</div>
-	</LinkButton>
+  <!-- BUTTON TITLE -->
+  <LinkButton on:click={() => (showMenu = true)}>
+    <div class="flex place-items-center gap-2 text-sm">
+      <SwapVertical size="18" />
+      {value}
+    </div>
+  </LinkButton>
 
-	<!-- DROP DOWN MENU -->
-	{#if showMenu}
-		<div
-			transition:fly={{ y: -30, x: 30, duration: 200 }}
-			class="absolute top-5 right-0 min-w-[250px] bg-gray-100 dark:bg-gray-700 rounded-2xl py-4 shadow-lg dark:text-white text-black z-50 text-md flex flex-col"
-		>
-			{#each options as option, index (option)}
-				<button
-					class="hover:bg-gray-300 dark:hover:bg-gray-800 p-4 transition-all grid grid-cols-[20px,1fr] place-items-center gap-2"
-					on:click={() => handleSelectOption(index)}
-				>
-					{#if value == option}
-						<div class="text-immich-primary dark:text-immich-dark-primary font-medium">
-							<Check size="18" />
-						</div>
-						<p
-							class="justify-self-start text-immich-primary dark:text-immich-dark-primary font-medium"
-						>
-							{option}
-						</p>
-					{:else}
-						<div />
-						<p class="justify-self-start">
-							{option}
-						</p>
-					{/if}
-				</button>
-			{/each}
-		</div>
-	{/if}
+  <!-- DROP DOWN MENU -->
+  {#if showMenu}
+    <div
+      transition:fly={{ y: -30, x: 30, duration: 200 }}
+      class="absolute top-5 right-0 min-w-[250px] bg-gray-100 dark:bg-gray-700 rounded-2xl py-4 shadow-lg dark:text-white text-black z-50 text-md flex flex-col"
+    >
+      {#each options as option, index (option)}
+        <button
+          class="hover:bg-gray-300 dark:hover:bg-gray-800 p-4 transition-all grid grid-cols-[20px,1fr] place-items-center gap-2"
+          on:click={() => handleSelectOption(index)}
+        >
+          {#if value == option}
+            <div class="text-immich-primary dark:text-immich-dark-primary font-medium">
+              <Check size="18" />
+            </div>
+            <p class="justify-self-start text-immich-primary dark:text-immich-dark-primary font-medium">
+              {option}
+            </p>
+          {:else}
+            <div />
+            <p class="justify-self-start">
+              {option}
+            </p>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
 </div>
diff --git a/web/src/lib/components/faces-page/edit-name-input.svelte b/web/src/lib/components/faces-page/edit-name-input.svelte
index ba9a7eb5c..f4fff8918 100644
--- a/web/src/lib/components/faces-page/edit-name-input.svelte
+++ b/web/src/lib/components/faces-page/edit-name-input.svelte
@@ -1,46 +1,46 @@
 <script lang="ts">
-	import { PersonResponseDto, api } from '@api';
-	import { createEventDispatcher } from 'svelte';
-	import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-	import Button from '../elements/buttons/button.svelte';
-	import { clickOutside } from '$lib/utils/click-outside';
+  import { PersonResponseDto, api } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import { clickOutside } from '$lib/utils/click-outside';
 
-	export let person: PersonResponseDto;
-	let name = person.name;
+  export let person: PersonResponseDto;
+  let name = person.name;
 
-	const dispatch = createEventDispatcher<{
-		change: string;
-		cancel: void;
-	}>();
+  const dispatch = createEventDispatcher<{
+    change: string;
+    cancel: void;
+  }>();
 </script>
 
 <div
-	class="flex place-items-center max-w-lg rounded-lg border dark:border-transparent p-2 bg-gray-100 dark:bg-gray-700"
-	use:clickOutside
-	on:outclick={() => dispatch('cancel')}
+  class="flex place-items-center max-w-lg rounded-lg border dark:border-transparent p-2 bg-gray-100 dark:bg-gray-700"
+  use:clickOutside
+  on:outclick={() => dispatch('cancel')}
 >
-	<ImageThumbnail
-		circle
-		shadow
-		url={api.getPeopleThumbnailUrl(person.id)}
-		altText={person.name}
-		widthStyle="2rem"
-		heightStyle="2rem"
-	/>
-	<form
-		class="ml-4 flex justify-between w-full gap-16"
-		autocomplete="off"
-		on:submit|preventDefault={() => dispatch('change', name)}
-	>
-		<!-- svelte-ignore a11y-autofocus -->
-		<input
-			autofocus
-			class="gap-2 w-full bg-gray-100 dark:bg-gray-700 dark:text-white"
-			type="text"
-			placeholder="New name or nickname"
-			required
-			bind:value={name}
-		/>
-		<Button size="sm" type="submit">Done</Button>
-	</form>
+  <ImageThumbnail
+    circle
+    shadow
+    url={api.getPeopleThumbnailUrl(person.id)}
+    altText={person.name}
+    widthStyle="2rem"
+    heightStyle="2rem"
+  />
+  <form
+    class="ml-4 flex justify-between w-full gap-16"
+    autocomplete="off"
+    on:submit|preventDefault={() => dispatch('change', name)}
+  >
+    <!-- svelte-ignore a11y-autofocus -->
+    <input
+      autofocus
+      class="gap-2 w-full bg-gray-100 dark:bg-gray-700 dark:text-white"
+      type="text"
+      placeholder="New name or nickname"
+      required
+      bind:value={name}
+    />
+    <Button size="sm" type="submit">Done</Button>
+  </form>
 </div>
diff --git a/web/src/lib/components/forms/admin-registration-form.svelte b/web/src/lib/components/forms/admin-registration-form.svelte
index 49253d8ab..353079ab2 100644
--- a/web/src/lib/components/forms/admin-registration-form.svelte
+++ b/web/src/lib/components/forms/admin-registration-form.svelte
@@ -1,123 +1,102 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { AppRoute } from '$lib/constants';
-	import { api } from '@api';
-	import Button from '../elements/buttons/button.svelte';
+  import { goto } from '$app/navigation';
+  import { AppRoute } from '$lib/constants';
+  import { api } from '@api';
+  import Button from '../elements/buttons/button.svelte';
 
-	let error: string;
-	let password = '';
-	let confirmPassowrd = '';
-	let canRegister = false;
+  let error: string;
+  let password = '';
+  let confirmPassowrd = '';
+  let canRegister = false;
 
-	$: {
-		if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
-			error = 'Password does not match';
-			canRegister = false;
-		} else {
-			error = '';
-			canRegister = true;
-		}
-	}
+  $: {
+    if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
+      error = 'Password does not match';
+      canRegister = false;
+    } else {
+      error = '';
+      canRegister = true;
+    }
+  }
 
-	async function registerAdmin(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
-		if (canRegister) {
-			error = '';
+  async function registerAdmin(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
+    if (canRegister) {
+      error = '';
 
-			const form = new FormData(event.currentTarget);
+      const form = new FormData(event.currentTarget);
 
-			const email = form.get('email');
-			const password = form.get('password');
-			const firstName = form.get('firstName');
-			const lastName = form.get('lastName');
+      const email = form.get('email');
+      const password = form.get('password');
+      const firstName = form.get('firstName');
+      const lastName = form.get('lastName');
 
-			const { status } = await api.authenticationApi.adminSignUp({
-				signUpDto: {
-					email: String(email),
-					password: String(password),
-					firstName: String(firstName),
-					lastName: String(lastName)
-				}
-			});
+      const { status } = await api.authenticationApi.adminSignUp({
+        signUpDto: {
+          email: String(email),
+          password: String(password),
+          firstName: String(firstName),
+          lastName: String(lastName),
+        },
+      });
 
-			if (status === 201) {
-				goto(AppRoute.AUTH_LOGIN);
-				return;
-			} else {
-				error = 'Error create admin account';
-				return;
-			}
-		}
-	}
+      if (status === 201) {
+        goto(AppRoute.AUTH_LOGIN);
+        return;
+      } else {
+        error = 'Error create admin account';
+        return;
+      }
+    }
+  }
 </script>
 
 <form on:submit|preventDefault={registerAdmin} method="post" class="flex flex-col gap-5 mt-5">
-	<div class="flex flex-col gap-2">
-		<label class="immich-form-label" for="email">Admin Email</label>
-		<input
-			class="immich-form-input"
-			id="email"
-			name="email"
-			type="email"
-			autocomplete="email"
-			required
-		/>
-	</div>
+  <div class="flex flex-col gap-2">
+    <label class="immich-form-label" for="email">Admin Email</label>
+    <input class="immich-form-input" id="email" name="email" type="email" autocomplete="email" required />
+  </div>
 
-	<div class="flex flex-col gap-2">
-		<label class="immich-form-label" for="password">Admin Password</label>
-		<input
-			class="immich-form-input"
-			id="password"
-			name="password"
-			type="password"
-			autocomplete="new-password"
-			required
-			bind:value={password}
-		/>
-	</div>
+  <div class="flex flex-col gap-2">
+    <label class="immich-form-label" for="password">Admin Password</label>
+    <input
+      class="immich-form-input"
+      id="password"
+      name="password"
+      type="password"
+      autocomplete="new-password"
+      required
+      bind:value={password}
+    />
+  </div>
 
-	<div class="flex flex-col gap-2">
-		<label class="immich-form-label" for="confirmPassword">Confirm Admin Password</label>
-		<input
-			class="immich-form-input"
-			id="confirmPassword"
-			name="password"
-			type="password"
-			autocomplete="new-password"
-			required
-			bind:value={confirmPassowrd}
-		/>
-	</div>
+  <div class="flex flex-col gap-2">
+    <label class="immich-form-label" for="confirmPassword">Confirm Admin Password</label>
+    <input
+      class="immich-form-input"
+      id="confirmPassword"
+      name="password"
+      type="password"
+      autocomplete="new-password"
+      required
+      bind:value={confirmPassowrd}
+    />
+  </div>
 
-	<div class="flex flex-col gap-2">
-		<label class="immich-form-label" for="firstName">First Name</label>
-		<input
-			class="immich-form-input"
-			id="firstName"
-			name="firstName"
-			type="text"
-			autocomplete="given-name"
-			required
-		/>
-	</div>
+  <div class="flex flex-col gap-2">
+    <label class="immich-form-label" for="firstName">First Name</label>
+    <input class="immich-form-input" id="firstName" name="firstName" type="text" autocomplete="given-name" required />
+  </div>
 
-	<div class="flex flex-col gap-2">
-		<label class="immich-form-label" for="lastName">Last Name</label>
-		<input
-			class="immich-form-input"
-			id="lastName"
-			name="lastName"
-			type="text"
-			autocomplete="family-name"
-			required
-		/>
-	</div>
+  <div class="flex flex-col gap-2">
+    <label class="immich-form-label" for="lastName">Last Name</label>
+    <input class="immich-form-input" id="lastName" name="lastName" type="text" autocomplete="family-name" required />
+  </div>
 
-	{#if error}
-		<p class="text-red-400">{error}</p>
-	{/if}
+  {#if error}
+    <p class="text-red-400">{error}</p>
+  {/if}
 
-	<div class="my-5 flex w-full">
-		<Button type="submit" size="lg" fullwidth>Sign up</Button>
-	</div>
+  <div class="my-5 flex w-full">
+    <Button type="submit" size="lg" fullwidth>Sign up</Button>
+  </div>
 </form>
diff --git a/web/src/lib/components/forms/api-key-form.svelte b/web/src/lib/components/forms/api-key-form.svelte
index dad32d61b..10e6c2c56 100644
--- a/web/src/lib/components/forms/api-key-form.svelte
+++ b/web/src/lib/components/forms/api-key-form.svelte
@@ -1,49 +1,43 @@
 <script lang="ts">
-	import type { APIKeyResponseDto } from '@api';
-	import { createEventDispatcher } from 'svelte';
-	import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
-	import Button from '../elements/buttons/button.svelte';
-	import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+  import type { APIKeyResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
 
-	export let apiKey: Partial<APIKeyResponseDto>;
-	export let title = 'API Key';
-	export let cancelText = 'Cancel';
-	export let submitText = 'Save';
+  export let apiKey: Partial<APIKeyResponseDto>;
+  export let title = 'API Key';
+  export let cancelText = 'Cancel';
+  export let submitText = 'Save';
 
-	const dispatch = createEventDispatcher();
-	const handleCancel = () => dispatch('cancel');
-	const handleSubmit = () => dispatch('submit', { ...apiKey, name: apiKey.name });
+  const dispatch = createEventDispatcher();
+  const handleCancel = () => dispatch('cancel');
+  const handleSubmit = () => dispatch('submit', { ...apiKey, name: apiKey.name });
 </script>
 
 <FullScreenModal on:clickOutside={() => handleCancel()}>
-	<div
-		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
-	>
-		<div
-			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-		>
-			<KeyVariant size="4em" />
-			<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
-				{title}
-			</h1>
-		</div>
+  <div
+    class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
+  >
+    <div
+      class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+    >
+      <KeyVariant size="4em" />
+      <h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
+        {title}
+      </h1>
+    </div>
 
-		<form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
-			<div class="m-4 flex flex-col gap-2">
-				<label class="immich-form-label" for="email">Name</label>
-				<input
-					class="immich-form-input"
-					id="name"
-					name="name"
-					type="text"
-					bind:value={apiKey.name}
-				/>
-			</div>
+    <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
+      <div class="m-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="email">Name</label>
+        <input class="immich-form-input" id="name" name="name" type="text" bind:value={apiKey.name} />
+      </div>
 
-			<div class="flex w-full px-4 gap-4 mt-8">
-				<Button color="gray" fullwidth on:click={() => handleCancel()}>{cancelText}</Button>
-				<Button type="submit" fullwidth>{submitText}</Button>
-			</div>
-		</form>
-	</div>
+      <div class="flex w-full px-4 gap-4 mt-8">
+        <Button color="gray" fullwidth on:click={() => handleCancel()}>{cancelText}</Button>
+        <Button type="submit" fullwidth>{submitText}</Button>
+      </div>
+    </form>
+  </div>
 </FullScreenModal>
diff --git a/web/src/lib/components/forms/api-key-secret.svelte b/web/src/lib/components/forms/api-key-secret.svelte
index 178621575..fd2f73585 100644
--- a/web/src/lib/components/forms/api-key-secret.svelte
+++ b/web/src/lib/components/forms/api-key-secret.svelte
@@ -1,70 +1,59 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
-	import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
-	import { handleError } from '../../utils/handle-error';
-	import FullScreenModal from '../shared-components/full-screen-modal.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '../shared-components/notification/notification';
-	import Button from '../elements/buttons/button.svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
+  import { handleError } from '../../utils/handle-error';
+  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import Button from '../elements/buttons/button.svelte';
 
-	export let secret = '';
+  export let secret = '';
 
-	const dispatch = createEventDispatcher();
-	const handleDone = () => dispatch('done');
-	let canCopyImagesToClipboard = true;
+  const dispatch = createEventDispatcher();
+  const handleDone = () => dispatch('done');
+  let canCopyImagesToClipboard = true;
 
-	onMount(async () => {
-		const module = await import('copy-image-clipboard');
-		canCopyImagesToClipboard = module.canCopyImagesToClipboard();
-	});
-	const handleCopy = async () => {
-		try {
-			await navigator.clipboard.writeText(secret);
-			notificationController.show({
-				message: 'Copied to clipboard!',
-				type: NotificationType.Info
-			});
-		} catch (error) {
-			handleError(error, 'Unable to copy to clipboard');
-		}
-	};
+  onMount(async () => {
+    const module = await import('copy-image-clipboard');
+    canCopyImagesToClipboard = module.canCopyImagesToClipboard();
+  });
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(secret);
+      notificationController.show({
+        message: 'Copied to clipboard!',
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to copy to clipboard');
+    }
+  };
 </script>
 
 <FullScreenModal>
-	<div
-		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
-	>
-		<div
-			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-		>
-			<KeyVariant size="4em" />
-			<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
-				API Key
-			</h1>
+  <div
+    class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
+  >
+    <div
+      class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+    >
+      <KeyVariant size="4em" />
+      <h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">API Key</h1>
 
-			<p class="text-sm dark:text-immich-dark-fg">
-				This value will only be shown once. Please be sure to copy it before closing the window.
-			</p>
-		</div>
+      <p class="text-sm dark:text-immich-dark-fg">
+        This value will only be shown once. Please be sure to copy it before closing the window.
+      </p>
+    </div>
 
-		<div class="m-4 flex flex-col gap-2">
-			<!-- <label class="immich-form-label" for="email">API Key</label> -->
-			<textarea
-				class="immich-form-input"
-				id="secret"
-				name="secret"
-				readonly={true}
-				value={secret}
-			/>
-		</div>
+    <div class="m-4 flex flex-col gap-2">
+      <!-- <label class="immich-form-label" for="email">API Key</label> -->
+      <textarea class="immich-form-input" id="secret" name="secret" readonly={true} value={secret} />
+    </div>
 
-		<div class="flex w-full px-4 gap-4 mt-8">
-			{#if canCopyImagesToClipboard}
-				<Button on:click={() => handleCopy()} fullwidth>Copy to Clipboard</Button>
-			{/if}
-			<Button on:click={() => handleDone()} fullwidth>Done</Button>
-		</div>
-	</div>
+    <div class="flex w-full px-4 gap-4 mt-8">
+      {#if canCopyImagesToClipboard}
+        <Button on:click={() => handleCopy()} fullwidth>Copy to Clipboard</Button>
+      {/if}
+      <Button on:click={() => handleDone()} fullwidth>Done</Button>
+    </div>
+  </div>
 </FullScreenModal>
diff --git a/web/src/lib/components/forms/change-password-form.svelte b/web/src/lib/components/forms/change-password-form.svelte
index ba2e37428..35924241c 100644
--- a/web/src/lib/components/forms/change-password-form.svelte
+++ b/web/src/lib/components/forms/change-password-form.svelte
@@ -1,86 +1,86 @@
 <script lang="ts">
-	import { api, UserResponseDto } from '@api';
-	import { createEventDispatcher } from 'svelte';
-	import Button from '../elements/buttons/button.svelte';
+  import { api, UserResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
 
-	export let user: UserResponseDto;
-	let error: string;
-	let success: string;
+  export let user: UserResponseDto;
+  let error: string;
+  let success: string;
 
-	let password = '';
-	let confirmPassowrd = '';
+  let password = '';
+  let confirmPassowrd = '';
 
-	let changeChagePassword = false;
+  let changeChagePassword = false;
 
-	$: {
-		if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
-			error = 'Password does not match';
-			changeChagePassword = false;
-		} else {
-			error = '';
-			changeChagePassword = true;
-		}
-	}
+  $: {
+    if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
+      error = 'Password does not match';
+      changeChagePassword = false;
+    } else {
+      error = '';
+      changeChagePassword = true;
+    }
+  }
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	async function changePassword() {
-		if (changeChagePassword) {
-			error = '';
+  async function changePassword() {
+    if (changeChagePassword) {
+      error = '';
 
-			const { status } = await api.userApi.updateUser({
-				updateUserDto: {
-					id: user.id,
-					password: String(password),
-					shouldChangePassword: false
-				}
-			});
+      const { status } = await api.userApi.updateUser({
+        updateUserDto: {
+          id: user.id,
+          password: String(password),
+          shouldChangePassword: false,
+        },
+      });
 
-			if (status === 200) {
-				dispatch('success');
-				return;
-			} else {
-				console.error('Error changing password');
-			}
-		}
-	}
+      if (status === 200) {
+        dispatch('success');
+        return;
+      } else {
+        console.error('Error changing password');
+      }
+    }
+  }
 </script>
 
 <form on:submit|preventDefault={changePassword} method="post" class="flex flex-col gap-5 mt-5">
-	<div class="flex flex-col gap-2">
-		<label class="immich-form-label" for="password">New Password</label>
-		<input
-			class="immich-form-input"
-			id="password"
-			name="password"
-			type="password"
-			autocomplete="new-password"
-			required
-			bind:value={password}
-		/>
-	</div>
+  <div class="flex flex-col gap-2">
+    <label class="immich-form-label" for="password">New Password</label>
+    <input
+      class="immich-form-input"
+      id="password"
+      name="password"
+      type="password"
+      autocomplete="new-password"
+      required
+      bind:value={password}
+    />
+  </div>
 
-	<div class="flex flex-col gap-2">
-		<label class="immich-form-label" for="confirmPassword">Confirm Password</label>
-		<input
-			class="immich-form-input"
-			id="confirmPassword"
-			name="password"
-			type="password"
-			autocomplete="current-password"
-			required
-			bind:value={confirmPassowrd}
-		/>
-	</div>
+  <div class="flex flex-col gap-2">
+    <label class="immich-form-label" for="confirmPassword">Confirm Password</label>
+    <input
+      class="immich-form-input"
+      id="confirmPassword"
+      name="password"
+      type="password"
+      autocomplete="current-password"
+      required
+      bind:value={confirmPassowrd}
+    />
+  </div>
 
-	{#if error}
-		<p class="text-red-400 text-sm">{error}</p>
-	{/if}
+  {#if error}
+    <p class="text-red-400 text-sm">{error}</p>
+  {/if}
 
-	{#if success}
-		<p class="text-immich-primary text-sm">{success}</p>
-	{/if}
-	<div class="my-5 flex w-full">
-		<Button type="submit" size="lg" fullwidth>Change password</Button>
-	</div>
+  {#if success}
+    <p class="text-immich-primary text-sm">{success}</p>
+  {/if}
+  <div class="my-5 flex w-full">
+    <Button type="submit" size="lg" fullwidth>Change password</Button>
+  </div>
 </form>
diff --git a/web/src/lib/components/forms/create-user-form.svelte b/web/src/lib/components/forms/create-user-form.svelte
index bb2d19882..becced681 100644
--- a/web/src/lib/components/forms/create-user-form.svelte
+++ b/web/src/lib/components/forms/create-user-form.svelte
@@ -1,150 +1,135 @@
 <script lang="ts">
-	import { api } from '@api';
-	import { createEventDispatcher } from 'svelte';
-	import ImmichLogo from '../shared-components/immich-logo.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '../shared-components/notification/notification';
-	import Button from '../elements/buttons/button.svelte';
+  import { api } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import ImmichLogo from '../shared-components/immich-logo.svelte';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import Button from '../elements/buttons/button.svelte';
 
-	let error: string;
-	let success: string;
+  let error: string;
+  let success: string;
 
-	let password = '';
-	let confirmPassowrd = '';
+  let password = '';
+  let confirmPassowrd = '';
 
-	let canCreateUser = false;
+  let canCreateUser = false;
 
-	let isCreatingUser = false;
+  let isCreatingUser = false;
 
-	$: {
-		if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
-			error = 'Password does not match';
-			canCreateUser = false;
-		} else {
-			error = '';
-			canCreateUser = true;
-		}
-	}
-	const dispatch = createEventDispatcher();
+  $: {
+    if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
+      error = 'Password does not match';
+      canCreateUser = false;
+    } else {
+      error = '';
+      canCreateUser = true;
+    }
+  }
+  const dispatch = createEventDispatcher();
 
-	async function registerUser(event: SubmitEvent) {
-		if (canCreateUser && !isCreatingUser) {
-			isCreatingUser = true;
+  async function registerUser(event: SubmitEvent) {
+    if (canCreateUser && !isCreatingUser) {
+      isCreatingUser = true;
 
-			error = '';
+      error = '';
 
-			const formElement = event.target as HTMLFormElement;
+      const formElement = event.target as HTMLFormElement;
 
-			const form = new FormData(formElement);
+      const form = new FormData(formElement);
 
-			const email = form.get('email');
-			const password = form.get('password');
-			const firstName = form.get('firstName');
-			const lastName = form.get('lastName');
+      const email = form.get('email');
+      const password = form.get('password');
+      const firstName = form.get('firstName');
+      const lastName = form.get('lastName');
 
-			try {
-				const { status } = await api.userApi.createUser({
-					createUserDto: {
-						email: String(email),
-						password: String(password),
-						firstName: String(firstName),
-						lastName: String(lastName)
-					}
-				});
+      try {
+        const { status } = await api.userApi.createUser({
+          createUserDto: {
+            email: String(email),
+            password: String(password),
+            firstName: String(firstName),
+            lastName: String(lastName),
+          },
+        });
 
-				if (status === 201) {
-					success = 'New user created';
+        if (status === 201) {
+          success = 'New user created';
 
-					dispatch('user-created');
+          dispatch('user-created');
 
-					isCreatingUser = false;
-					return;
-				} else {
-					error = 'Error create user account';
-					isCreatingUser = false;
-				}
-			} catch (e) {
-				error = 'Error create user account';
-				isCreatingUser = false;
+          isCreatingUser = false;
+          return;
+        } else {
+          error = 'Error create user account';
+          isCreatingUser = false;
+        }
+      } catch (e) {
+        error = 'Error create user account';
+        isCreatingUser = false;
 
-				console.log('[ERROR] registerUser', e);
+        console.log('[ERROR] registerUser', e);
 
-				notificationController.show({
-					message: `Error create new user, check console for more detail`,
-					type: NotificationType.Error
-				});
-			}
-		}
-	}
+        notificationController.show({
+          message: `Error create new user, check console for more detail`,
+          type: NotificationType.Error,
+        });
+      }
+    }
+  }
 </script>
 
 <div
-	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
+  class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 >
-	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
-		<ImmichLogo class="text-center" height="100" width="100" />
-		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
-			Create new user
-		</h1>
-		<p
-			class="text-sm border rounded-md p-4 font-mono text-gray-600 dark:border-immich-dark-bg dark:text-gray-300"
-		>
-			Please provide your user with the password, they will have to change it on their first sign
-			in.
-		</p>
-	</div>
+  <div class="flex flex-col place-items-center place-content-center gap-4 px-4">
+    <ImmichLogo class="text-center" height="100" width="100" />
+    <h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">Create new user</h1>
+    <p class="text-sm border rounded-md p-4 font-mono text-gray-600 dark:border-immich-dark-bg dark:text-gray-300">
+      Please provide your user with the password, they will have to change it on their first sign in.
+    </p>
+  </div>
 
-	<form on:submit|preventDefault={registerUser} autocomplete="off">
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="email">Email</label>
-			<input class="immich-form-input" id="email" name="email" type="email" required />
-		</div>
+  <form on:submit|preventDefault={registerUser} autocomplete="off">
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="email">Email</label>
+      <input class="immich-form-input" id="email" name="email" type="email" required />
+    </div>
 
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="password">Password</label>
-			<input
-				class="immich-form-input"
-				id="password"
-				name="password"
-				type="password"
-				required
-				bind:value={password}
-			/>
-		</div>
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="password">Password</label>
+      <input class="immich-form-input" id="password" name="password" type="password" required bind:value={password} />
+    </div>
 
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="confirmPassword">Confirm Password</label>
-			<input
-				class="immich-form-input"
-				id="confirmPassword"
-				name="password"
-				type="password"
-				required
-				bind:value={confirmPassowrd}
-			/>
-		</div>
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="confirmPassword">Confirm Password</label>
+      <input
+        class="immich-form-input"
+        id="confirmPassword"
+        name="password"
+        type="password"
+        required
+        bind:value={confirmPassowrd}
+      />
+    </div>
 
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="firstName">First Name</label>
-			<input class="immich-form-input" id="firstName" name="firstName" type="text" required />
-		</div>
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="firstName">First Name</label>
+      <input class="immich-form-input" id="firstName" name="firstName" type="text" required />
+    </div>
 
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="lastName">Last Name</label>
-			<input class="immich-form-input" id="lastName" name="lastName" type="text" required />
-		</div>
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="lastName">Last Name</label>
+      <input class="immich-form-input" id="lastName" name="lastName" type="text" required />
+    </div>
 
-		{#if error}
-			<p class="text-red-400 ml-4 text-sm">{error}</p>
-		{/if}
+    {#if error}
+      <p class="text-red-400 ml-4 text-sm">{error}</p>
+    {/if}
 
-		{#if success}
-			<p class="text-immich-primary ml-4 text-sm">{success}</p>
-		{/if}
-		<div class="flex w-full p-4">
-			<Button type="submit" disabled={isCreatingUser} fullwidth>Create</Button>
-		</div>
-	</form>
+    {#if success}
+      <p class="text-immich-primary ml-4 text-sm">{success}</p>
+    {/if}
+    <div class="flex w-full p-4">
+      <Button type="submit" disabled={isCreatingUser} fullwidth>Create</Button>
+    </div>
+  </form>
 </div>
diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte
index 6160901b7..8da224c8c 100644
--- a/web/src/lib/components/forms/edit-user-form.svelte
+++ b/web/src/lib/components/forms/edit-user-form.svelte
@@ -1,187 +1,167 @@
 <script lang="ts">
-	import { api, UserResponseDto } from '@api';
-	import { createEventDispatcher } from 'svelte';
-	import AccountEditOutline from 'svelte-material-icons/AccountEditOutline.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '../shared-components/notification/notification';
-	import Button from '../elements/buttons/button.svelte';
-	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-	import { handleError } from '../../utils/handle-error';
+  import { api, UserResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import AccountEditOutline from 'svelte-material-icons/AccountEditOutline.svelte';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import Button from '../elements/buttons/button.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import { handleError } from '../../utils/handle-error';
 
-	export let user: UserResponseDto;
-	export let canResetPassword = true;
+  export let user: UserResponseDto;
+  export let canResetPassword = true;
 
-	let error: string;
-	let success: string;
+  let error: string;
+  let success: string;
 
-	let isShowResetPasswordConfirmation = false;
+  let isShowResetPasswordConfirmation = false;
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	const editUser = async () => {
-		try {
-			const { id, email, firstName, lastName, storageLabel, externalPath } = user;
-			const { status } = await api.userApi.updateUser({
-				updateUserDto: {
-					id,
-					email,
-					firstName,
-					lastName,
-					storageLabel: storageLabel || '',
-					externalPath: externalPath || ''
-				}
-			});
+  const editUser = async () => {
+    try {
+      const { id, email, firstName, lastName, storageLabel, externalPath } = user;
+      const { status } = await api.userApi.updateUser({
+        updateUserDto: {
+          id,
+          email,
+          firstName,
+          lastName,
+          storageLabel: storageLabel || '',
+          externalPath: externalPath || '',
+        },
+      });
 
-			if (status === 200) {
-				dispatch('edit-success');
-			}
-		} catch (error) {
-			handleError(error, 'Unable to update user');
-		}
-	};
+      if (status === 200) {
+        dispatch('edit-success');
+      }
+    } catch (error) {
+      handleError(error, 'Unable to update user');
+    }
+  };
 
-	const resetPassword = async () => {
-		try {
-			const defaultPassword = 'password';
+  const resetPassword = async () => {
+    try {
+      const defaultPassword = 'password';
 
-			const { status } = await api.userApi.updateUser({
-				updateUserDto: {
-					id: user.id,
-					password: defaultPassword,
-					shouldChangePassword: true
-				}
-			});
+      const { status } = await api.userApi.updateUser({
+        updateUserDto: {
+          id: user.id,
+          password: defaultPassword,
+          shouldChangePassword: true,
+        },
+      });
 
-			if (status == 200) {
-				dispatch('reset-password-success');
-			}
-		} catch (e) {
-			console.error('Error reseting user password', e);
-			notificationController.show({
-				message: 'Error reseting user password, check console for more details',
-				type: NotificationType.Error
-			});
-		} finally {
-			isShowResetPasswordConfirmation = false;
-		}
-	};
+      if (status == 200) {
+        dispatch('reset-password-success');
+      }
+    } catch (e) {
+      console.error('Error reseting user password', e);
+      notificationController.show({
+        message: 'Error reseting user password, check console for more details',
+        type: NotificationType.Error,
+      });
+    } finally {
+      isShowResetPasswordConfirmation = false;
+    }
+  };
 </script>
 
 <div
-	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
+  class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 >
-	<div
-		class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-	>
-		<AccountEditOutline size="4em" />
-		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
-			Edit user
-		</h1>
-	</div>
+  <div
+    class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+  >
+    <AccountEditOutline size="4em" />
+    <h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">Edit user</h1>
+  </div>
 
-	<form on:submit|preventDefault={editUser} autocomplete="off">
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="email">Email</label>
-			<input
-				class="immich-form-input"
-				id="email"
-				name="email"
-				type="email"
-				bind:value={user.email}
-			/>
-		</div>
+  <form on:submit|preventDefault={editUser} autocomplete="off">
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="email">Email</label>
+      <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
+    </div>
 
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="firstName">First Name</label>
-			<input
-				class="immich-form-input"
-				id="firstName"
-				name="firstName"
-				type="text"
-				required
-				bind:value={user.firstName}
-			/>
-		</div>
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="firstName">First Name</label>
+      <input
+        class="immich-form-input"
+        id="firstName"
+        name="firstName"
+        type="text"
+        required
+        bind:value={user.firstName}
+      />
+    </div>
 
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="lastName">Last Name</label>
-			<input
-				class="immich-form-input"
-				id="lastName"
-				name="lastName"
-				type="text"
-				required
-				bind:value={user.lastName}
-			/>
-		</div>
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="lastName">Last Name</label>
+      <input class="immich-form-input" id="lastName" name="lastName" type="text" required bind:value={user.lastName} />
+    </div>
 
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="storage-label">Storage Label</label>
-			<input
-				class="immich-form-input"
-				id="storage-label"
-				name="storage-label"
-				type="text"
-				bind:value={user.storageLabel}
-			/>
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="storage-label">Storage Label</label>
+      <input
+        class="immich-form-input"
+        id="storage-label"
+        name="storage-label"
+        type="text"
+        bind:value={user.storageLabel}
+      />
 
-			<p>
-				Note: To apply the Storage Label to previously uploaded assets, run the
-				<a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary">
-					Storage Migration Job</a
-				>
-			</p>
-		</div>
+      <p>
+        Note: To apply the Storage Label to previously uploaded assets, run the
+        <a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary">
+          Storage Migration Job</a
+        >
+      </p>
+    </div>
 
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="external-path">External Path</label>
-			<input
-				class="immich-form-input"
-				id="external-path"
-				name="external-path"
-				type="text"
-				bind:value={user.externalPath}
-			/>
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="external-path">External Path</label>
+      <input
+        class="immich-form-input"
+        id="external-path"
+        name="external-path"
+        type="text"
+        bind:value={user.externalPath}
+      />
 
-			<p>
-				Note: Absolute path of parent import directory. A user can only import files if they exist
-				at or under this path.
-			</p>
-		</div>
+      <p>
+        Note: Absolute path of parent import directory. A user can only import files if they exist at or under this
+        path.
+      </p>
+    </div>
 
-		{#if error}
-			<p class="text-red-400 ml-4 text-sm">{error}</p>
-		{/if}
+    {#if error}
+      <p class="text-red-400 ml-4 text-sm">{error}</p>
+    {/if}
 
-		{#if success}
-			<p class="text-immich-primary ml-4 text-sm">{success}</p>
-		{/if}
-		<div class="flex w-full px-4 gap-4 mt-8">
-			{#if canResetPassword}
-				<Button
-					color="light-red"
-					fullwidth
-					on:click={() => (isShowResetPasswordConfirmation = true)}>Reset password</Button
-				>
-			{/if}
-			<Button type="submit" fullwidth>Confirm</Button>
-		</div>
-	</form>
+    {#if success}
+      <p class="text-immich-primary ml-4 text-sm">{success}</p>
+    {/if}
+    <div class="flex w-full px-4 gap-4 mt-8">
+      {#if canResetPassword}
+        <Button color="light-red" fullwidth on:click={() => (isShowResetPasswordConfirmation = true)}
+          >Reset password</Button
+        >
+      {/if}
+      <Button type="submit" fullwidth>Confirm</Button>
+    </div>
+  </form>
 </div>
 
 {#if isShowResetPasswordConfirmation}
-	<ConfirmDialogue
-		title="Reset Password"
-		confirmText="Reset"
-		on:confirm={resetPassword}
-		on:cancel={() => (isShowResetPasswordConfirmation = false)}
-	>
-		<svelte:fragment slot="prompt">
-			<p>
-				Are you sure you want to reset <b>{user.firstName} {user.lastName}</b>'s password?
-			</p>
-		</svelte:fragment>
-	</ConfirmDialogue>
+  <ConfirmDialogue
+    title="Reset Password"
+    confirmText="Reset"
+    on:confirm={resetPassword}
+    on:cancel={() => (isShowResetPasswordConfirmation = false)}
+  >
+    <svelte:fragment slot="prompt">
+      <p>
+        Are you sure you want to reset <b>{user.firstName} {user.lastName}</b>'s password?
+      </p>
+    </svelte:fragment>
+  </ConfirmDialogue>
 {/if}
diff --git a/web/src/lib/components/forms/login-form.svelte b/web/src/lib/components/forms/login-form.svelte
index c43be1c0d..ed680b342 100644
--- a/web/src/lib/components/forms/login-form.svelte
+++ b/web/src/lib/components/forms/login-form.svelte
@@ -1,166 +1,166 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-	import { AppRoute } from '$lib/constants';
-	import { handleError } from '$lib/utils/handle-error';
-	import { api, oauth, OAuthConfigResponseDto } from '@api';
-	import { createEventDispatcher, onMount } from 'svelte';
-	import { fade } from 'svelte/transition';
-	import Button from '../elements/buttons/button.svelte';
+  import { goto } from '$app/navigation';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api, oauth, OAuthConfigResponseDto } from '@api';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import Button from '../elements/buttons/button.svelte';
 
-	let error: string;
-	let email = '';
-	let password = '';
-	let oauthError: string;
-	export let authConfig: OAuthConfigResponseDto;
-	let loading = false;
-	let oauthLoading = true;
+  let error: string;
+  let email = '';
+  let password = '';
+  let oauthError: string;
+  export let authConfig: OAuthConfigResponseDto;
+  let loading = false;
+  let oauthLoading = true;
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	onMount(async () => {
-		if (oauth.isCallback(window.location)) {
-			try {
-				await oauth.login(window.location);
-				dispatch('success');
-				return;
-			} catch (e) {
-				console.error('Error [login-form] [oauth.callback]', e);
-				oauthError = 'Unable to complete OAuth login';
-			} finally {
-				oauthLoading = false;
-			}
-		}
+  onMount(async () => {
+    if (oauth.isCallback(window.location)) {
+      try {
+        await oauth.login(window.location);
+        dispatch('success');
+        return;
+      } catch (e) {
+        console.error('Error [login-form] [oauth.callback]', e);
+        oauthError = 'Unable to complete OAuth login';
+      } finally {
+        oauthLoading = false;
+      }
+    }
 
-		try {
-			const { data } = await oauth.getConfig(window.location);
-			authConfig = data;
+    try {
+      const { data } = await oauth.getConfig(window.location);
+      authConfig = data;
 
-			const { enabled, url, autoLaunch } = authConfig;
+      const { enabled, url, autoLaunch } = authConfig;
 
-			if (enabled && url && autoLaunch && !oauth.isAutoLaunchDisabled(window.location)) {
-				await goto(`${AppRoute.AUTH_LOGIN}?autoLaunch=0`, { replaceState: true });
-				await goto(url);
-				return;
-			}
-		} catch (error) {
-			authConfig.passwordLoginEnabled = true;
-			handleError(error, 'Unable to connect!');
-		}
+      if (enabled && url && autoLaunch && !oauth.isAutoLaunchDisabled(window.location)) {
+        await goto(`${AppRoute.AUTH_LOGIN}?autoLaunch=0`, { replaceState: true });
+        await goto(url);
+        return;
+      }
+    } catch (error) {
+      authConfig.passwordLoginEnabled = true;
+      handleError(error, 'Unable to connect!');
+    }
 
-		oauthLoading = false;
-	});
+    oauthLoading = false;
+  });
 
-	const login = async () => {
-		try {
-			error = '';
-			loading = true;
+  const login = async () => {
+    try {
+      error = '';
+      loading = true;
 
-			const { data } = await api.authenticationApi.login({
-				loginCredentialDto: {
-					email,
-					password
-				}
-			});
+      const { data } = await api.authenticationApi.login({
+        loginCredentialDto: {
+          email,
+          password,
+        },
+      });
 
-			if (!data.isAdmin && data.shouldChangePassword) {
-				dispatch('first-login');
-				return;
-			}
+      if (!data.isAdmin && data.shouldChangePassword) {
+        dispatch('first-login');
+        return;
+      }
 
-			dispatch('success');
-			return;
-		} catch (e) {
-			error = 'Incorrect email or password';
-			loading = false;
-			return;
-		}
-	};
+      dispatch('success');
+      return;
+    } catch (e) {
+      error = 'Incorrect email or password';
+      loading = false;
+      return;
+    }
+  };
 </script>
 
 {#if authConfig.passwordLoginEnabled}
-	<form on:submit|preventDefault={login} class="flex flex-col gap-5 mt-5">
-		{#if error}
-			<p class="text-red-400" transition:fade>
-				{error}
-			</p>
-		{/if}
+  <form on:submit|preventDefault={login} class="flex flex-col gap-5 mt-5">
+    {#if error}
+      <p class="text-red-400" transition:fade>
+        {error}
+      </p>
+    {/if}
 
-		<div class="flex flex-col gap-2">
-			<label class="immich-form-label" for="email">Email</label>
-			<input
-				class="immich-form-input"
-				id="email"
-				name="email"
-				type="email"
-				autocomplete="email"
-				bind:value={email}
-				required
-			/>
-		</div>
+    <div class="flex flex-col gap-2">
+      <label class="immich-form-label" for="email">Email</label>
+      <input
+        class="immich-form-input"
+        id="email"
+        name="email"
+        type="email"
+        autocomplete="email"
+        bind:value={email}
+        required
+      />
+    </div>
 
-		<div class="flex flex-col gap-2">
-			<label class="immich-form-label" for="password">Password</label>
-			<input
-				class="immich-form-input"
-				id="password"
-				name="password"
-				type="password"
-				autocomplete="current-password"
-				bind:value={password}
-				required
-			/>
-		</div>
+    <div class="flex flex-col gap-2">
+      <label class="immich-form-label" for="password">Password</label>
+      <input
+        class="immich-form-input"
+        id="password"
+        name="password"
+        type="password"
+        autocomplete="current-password"
+        bind:value={password}
+        required
+      />
+    </div>
 
-		<div class="my-5 flex w-full">
-			<Button type="submit" size="lg" fullwidth disabled={loading || oauthLoading}>
-				{#if loading}
-					<span class="h-6">
-						<LoadingSpinner />
-					</span>
-				{:else}
-					Login
-				{/if}
-			</Button>
-		</div>
-	</form>
+    <div class="my-5 flex w-full">
+      <Button type="submit" size="lg" fullwidth disabled={loading || oauthLoading}>
+        {#if loading}
+          <span class="h-6">
+            <LoadingSpinner />
+          </span>
+        {:else}
+          Login
+        {/if}
+      </Button>
+    </div>
+  </form>
 {/if}
 
 {#if authConfig.enabled}
-	{#if authConfig.passwordLoginEnabled}
-		<div class="inline-flex items-center justify-center w-full">
-			<hr class="w-3/4 h-px my-4 bg-gray-200 border-0 dark:bg-gray-600" />
-			<span
-				class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 left-1/2 dark:text-white bg-white dark:bg-immich-dark-gray"
-			>
-				or
-			</span>
-		</div>
-	{/if}
-	<div class="my-5 flex flex-col gap-5">
-		{#if oauthError}
-			<p class="text-red-400" transition:fade>{oauthError}</p>
-		{/if}
-		<a href={authConfig.url} class="flex w-full">
-			<Button
-				type="button"
-				disabled={loading || oauthLoading}
-				size="lg"
-				fullwidth
-				color={authConfig.passwordLoginEnabled ? 'secondary' : 'primary'}
-			>
-				{#if oauthLoading}
-					<span class="h-6">
-						<LoadingSpinner />
-					</span>
-				{:else}
-					{authConfig.buttonText || 'Login with OAuth'}
-				{/if}
-			</Button>
-		</a>
-	</div>
+  {#if authConfig.passwordLoginEnabled}
+    <div class="inline-flex items-center justify-center w-full">
+      <hr class="w-3/4 h-px my-4 bg-gray-200 border-0 dark:bg-gray-600" />
+      <span
+        class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 left-1/2 dark:text-white bg-white dark:bg-immich-dark-gray"
+      >
+        or
+      </span>
+    </div>
+  {/if}
+  <div class="my-5 flex flex-col gap-5">
+    {#if oauthError}
+      <p class="text-red-400" transition:fade>{oauthError}</p>
+    {/if}
+    <a href={authConfig.url} class="flex w-full">
+      <Button
+        type="button"
+        disabled={loading || oauthLoading}
+        size="lg"
+        fullwidth
+        color={authConfig.passwordLoginEnabled ? 'secondary' : 'primary'}
+      >
+        {#if oauthLoading}
+          <span class="h-6">
+            <LoadingSpinner />
+          </span>
+        {:else}
+          {authConfig.buttonText || 'Login with OAuth'}
+        {/if}
+      </Button>
+    </a>
+  </div>
 {/if}
 
 {#if !authConfig.enabled && !authConfig.passwordLoginEnabled}
-	<p class="text-center dark:text-immich-dark-fg p-4">Login has been disabled.</p>
+  <p class="text-center dark:text-immich-dark-fg p-4">Login has been disabled.</p>
 {/if}
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index 1358a349c..d625707a8 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -1,44 +1,42 @@
 <script lang="ts">
-	import { openFileUploadDialog } from '$lib/utils/file-uploader';
-	import type { UserResponseDto } from '@api';
-	import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
-	import SideBar from '../shared-components/side-bar/side-bar.svelte';
-	export let user: UserResponseDto;
-	export let hideNavbar = false;
-	export let showUploadButton = false;
-	export let title: string | undefined = undefined;
+  import { openFileUploadDialog } from '$lib/utils/file-uploader';
+  import type { UserResponseDto } from '@api';
+  import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
+  import SideBar from '../shared-components/side-bar/side-bar.svelte';
+  export let user: UserResponseDto;
+  export let hideNavbar = false;
+  export let showUploadButton = false;
+  export let title: string | undefined = undefined;
 </script>
 
 <header>
-	{#if !hideNavbar}
-		<NavigationBar {user} {showUploadButton} on:uploadClicked={() => openFileUploadDialog()} />
-	{/if}
+  {#if !hideNavbar}
+    <NavigationBar {user} {showUploadButton} on:uploadClicked={() => openFileUploadDialog()} />
+  {/if}
 
-	<slot name="header" />
+  <slot name="header" />
 </header>
 
 <main
-	class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] relative pt-[var(--navbar-height)] h-screen overflow-hidden bg-immich-bg dark:bg-immich-dark-bg"
+  class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] relative pt-[var(--navbar-height)] h-screen overflow-hidden bg-immich-bg dark:bg-immich-dark-bg"
 >
-	<slot name="sidebar">
-		<SideBar />
-	</slot>
-	<slot name="content">
-		{#if title}
-			<section class="relative">
-				<div
-					class="absolute border-b dark:border-immich-dark-gray flex justify-between place-items-center dark:text-immich-dark-fg w-full p-4 h-16"
-				>
-					<p class="font-medium">{title}</p>
-					<slot name="buttons" />
-				</div>
+  <slot name="sidebar">
+    <SideBar />
+  </slot>
+  <slot name="content">
+    {#if title}
+      <section class="relative">
+        <div
+          class="absolute border-b dark:border-immich-dark-gray flex justify-between place-items-center dark:text-immich-dark-fg w-full p-4 h-16"
+        >
+          <p class="font-medium">{title}</p>
+          <slot name="buttons" />
+        </div>
 
-				<div
-					class="absolute overflow-y-auto top-16 h-[calc(100%-theme(spacing.16))] w-full immich-scrollbar p-4 pb-8"
-				>
-					<slot />
-				</div>
-			</section>
-		{/if}
-	</slot>
+        <div class="absolute overflow-y-auto top-16 h-[calc(100%-theme(spacing.16))] w-full immich-scrollbar p-4 pb-8">
+          <slot />
+        </div>
+      </section>
+    {/if}
+  </slot>
 </main>
diff --git a/web/src/lib/components/map-page/map-settings-modal.svelte b/web/src/lib/components/map-page/map-settings-modal.svelte
index cadf4ee07..786c210c8 100644
--- a/web/src/lib/components/map-page/map-settings-modal.svelte
+++ b/web/src/lib/components/map-page/map-settings-modal.svelte
@@ -1,120 +1,113 @@
 <script lang="ts">
-	import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-	import type { MapSettings } from '$lib/stores/preferences.store';
-	import { Duration } from 'luxon';
-	import { createEventDispatcher } from 'svelte';
-	import { fly } from 'svelte/transition';
-	import SettingSelect from '../admin-page/settings/setting-select.svelte';
-	import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
-	import Button from '../elements/buttons/button.svelte';
-	import LinkButton from '../elements/buttons/link-button.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import type { MapSettings } from '$lib/stores/preferences.store';
+  import { Duration } from 'luxon';
+  import { createEventDispatcher } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import SettingSelect from '../admin-page/settings/setting-select.svelte';
+  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import LinkButton from '../elements/buttons/link-button.svelte';
 
-	export let settings: MapSettings;
-	let customDateRange = !!settings.dateAfter || !!settings.dateBefore;
+  export let settings: MapSettings;
+  let customDateRange = !!settings.dateAfter || !!settings.dateBefore;
 
-	const dispatch = createEventDispatcher<{
-		close: void;
-		save: MapSettings;
-	}>();
+  const dispatch = createEventDispatcher<{
+    close: void;
+    save: MapSettings;
+  }>();
 </script>
 
 <FullScreenModal on:clickOutside={() => dispatch('close')}>
-	<div
-		class="flex flex-col gap-8 border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-8 shadow-sm w-96 max-w-lg rounded-3xl"
-	>
-		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium self-center">
-			Map Settings
-		</h1>
+  <div
+    class="flex flex-col gap-8 border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-8 shadow-sm w-96 max-w-lg rounded-3xl"
+  >
+    <h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium self-center">Map Settings</h1>
 
-		<form
-			on:submit|preventDefault={() => dispatch('save', settings)}
-			class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary"
-		>
-			<SettingSwitch title="Allow dark mode" bind:checked={settings.allowDarkMode} />
-			<SettingSwitch title="Only favorites" bind:checked={settings.onlyFavorites} />
-			{#if customDateRange}
-				<div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
-					<div class="flex justify-between items-center gap-8">
-						<label class="immich-form-label text-sm shrink-0" for="date-after">Date after</label>
-						<input
-							class="immich-form-input w-40"
-							type="date"
-							id="date-after"
-							max={settings.dateBefore}
-							bind:value={settings.dateAfter}
-						/>
-					</div>
-					<div class="flex justify-between items-center gap-8">
-						<label class="immich-form-label text-sm shrink-0" for="date-before">Date before</label>
-						<input
-							class="immich-form-input w-40"
-							type="date"
-							id="date-before"
-							bind:value={settings.dateBefore}
-						/>
-					</div>
-					<div class="flex justify-center text-xs">
-						<LinkButton
-							on:click={() => {
-								customDateRange = false;
-								settings.dateAfter = '';
-								settings.dateBefore = '';
-							}}
-						>
-							Remove custom date range
-						</LinkButton>
-					</div>
-				</div>
-			{:else}
-				<div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
-					<SettingSelect
-						label="Date range"
-						name="date-range"
-						bind:value={settings.relativeDate}
-						options={[
-							{
-								value: '',
-								text: 'All'
-							},
-							{
-								value: Duration.fromObject({ hours: 24 }).toISO() || '',
-								text: 'Past 24 hours'
-							},
-							{
-								value: Duration.fromObject({ days: 7 }).toISO() || '',
-								text: 'Past 7 days'
-							},
-							{
-								value: Duration.fromObject({ days: 30 }).toISO() || '',
-								text: 'Past 30 days'
-							},
-							{
-								value: Duration.fromObject({ years: 1 }).toISO() || '',
-								text: 'Past year'
-							},
-							{
-								value: Duration.fromObject({ years: 3 }).toISO() || '',
-								text: 'Past 3 years'
-							}
-						]}
-					/>
-					<div class="text-xs">
-						<LinkButton
-							on:click={() => {
-								customDateRange = true;
-								settings.relativeDate = '';
-							}}
-						>
-							Use custom date range instead
-						</LinkButton>
-					</div>
-				</div>
-			{/if}
+    <form
+      on:submit|preventDefault={() => dispatch('save', settings)}
+      class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary"
+    >
+      <SettingSwitch title="Allow dark mode" bind:checked={settings.allowDarkMode} />
+      <SettingSwitch title="Only favorites" bind:checked={settings.onlyFavorites} />
+      {#if customDateRange}
+        <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
+          <div class="flex justify-between items-center gap-8">
+            <label class="immich-form-label text-sm shrink-0" for="date-after">Date after</label>
+            <input
+              class="immich-form-input w-40"
+              type="date"
+              id="date-after"
+              max={settings.dateBefore}
+              bind:value={settings.dateAfter}
+            />
+          </div>
+          <div class="flex justify-between items-center gap-8">
+            <label class="immich-form-label text-sm shrink-0" for="date-before">Date before</label>
+            <input class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
+          </div>
+          <div class="flex justify-center text-xs">
+            <LinkButton
+              on:click={() => {
+                customDateRange = false;
+                settings.dateAfter = '';
+                settings.dateBefore = '';
+              }}
+            >
+              Remove custom date range
+            </LinkButton>
+          </div>
+        </div>
+      {:else}
+        <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
+          <SettingSelect
+            label="Date range"
+            name="date-range"
+            bind:value={settings.relativeDate}
+            options={[
+              {
+                value: '',
+                text: 'All',
+              },
+              {
+                value: Duration.fromObject({ hours: 24 }).toISO() || '',
+                text: 'Past 24 hours',
+              },
+              {
+                value: Duration.fromObject({ days: 7 }).toISO() || '',
+                text: 'Past 7 days',
+              },
+              {
+                value: Duration.fromObject({ days: 30 }).toISO() || '',
+                text: 'Past 30 days',
+              },
+              {
+                value: Duration.fromObject({ years: 1 }).toISO() || '',
+                text: 'Past year',
+              },
+              {
+                value: Duration.fromObject({ years: 3 }).toISO() || '',
+                text: 'Past 3 years',
+              },
+            ]}
+          />
+          <div class="text-xs">
+            <LinkButton
+              on:click={() => {
+                customDateRange = true;
+                settings.relativeDate = '';
+              }}
+            >
+              Use custom date range instead
+            </LinkButton>
+          </div>
+        </div>
+      {/if}
 
-			<div class="flex w-full gap-4 mt-4">
-				<Button color="gray" size="sm" fullwidth on:click={() => dispatch('close')}>Cancel</Button>
-				<Button type="submit" size="sm" fullwidth>Save</Button>
-			</div>
-		</form>
-	</div>
+      <div class="flex w-full gap-4 mt-4">
+        <Button color="gray" size="sm" fullwidth on:click={() => dispatch('close')}>Cancel</Button>
+        <Button type="submit" size="sm" fullwidth>Save</Button>
+      </div>
+    </form>
+  </div>
 </FullScreenModal>
diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index 49444ef6b..c9cbecc19 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -1,318 +1,282 @@
 <script lang="ts">
-	import { memoryStore } from '$lib/stores/memory.store';
-	import { DateTime } from 'luxon';
-	import { onMount } from 'svelte';
-	import { api } from '@api';
-	import { goto } from '$app/navigation';
-	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-	import Play from 'svelte-material-icons/Play.svelte';
-	import Pause from 'svelte-material-icons/Pause.svelte';
-	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
-	import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
-	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
-	import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
-	import { AppRoute } from '$lib/constants';
-	import { page } from '$app/stores';
-	import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
-	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
-	import { fade } from 'svelte/transition';
-	import { tweened } from 'svelte/motion';
+  import { memoryStore } from '$lib/stores/memory.store';
+  import { DateTime } from 'luxon';
+  import { onMount } from 'svelte';
+  import { api } from '@api';
+  import { goto } from '$app/navigation';
+  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import Play from 'svelte-material-icons/Play.svelte';
+  import Pause from 'svelte-material-icons/Pause.svelte';
+  import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+  import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
+  import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
+  import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { page } from '$app/stores';
+  import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
+  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
+  import { fade } from 'svelte/transition';
+  import { tweened } from 'svelte/motion';
 
-	const parseIndex = (s: string | null, max: number | null) =>
-		Math.max(Math.min(parseInt(s ?? '') || 0, max ?? 0), 0);
+  const parseIndex = (s: string | null, max: number | null) => Math.max(Math.min(parseInt(s ?? '') || 0, max ?? 0), 0);
 
-	$: memoryIndex = parseIndex($page.url.searchParams.get('memory'), $memoryStore?.length - 1);
-	$: assetIndex = parseIndex($page.url.searchParams.get('asset'), currentMemory?.assets.length - 1);
+  $: memoryIndex = parseIndex($page.url.searchParams.get('memory'), $memoryStore?.length - 1);
+  $: assetIndex = parseIndex($page.url.searchParams.get('asset'), currentMemory?.assets.length - 1);
 
-	$: previousMemory = $memoryStore?.[memoryIndex - 1];
-	$: currentMemory = $memoryStore?.[memoryIndex];
-	$: nextMemory = $memoryStore?.[memoryIndex + 1];
+  $: previousMemory = $memoryStore?.[memoryIndex - 1];
+  $: currentMemory = $memoryStore?.[memoryIndex];
+  $: nextMemory = $memoryStore?.[memoryIndex + 1];
 
-	$: previousAsset = currentMemory?.assets[assetIndex - 1];
-	$: currentAsset = currentMemory?.assets[assetIndex];
-	$: nextAsset = currentMemory?.assets[assetIndex + 1];
+  $: previousAsset = currentMemory?.assets[assetIndex - 1];
+  $: currentAsset = currentMemory?.assets[assetIndex];
+  $: nextAsset = currentMemory?.assets[assetIndex + 1];
 
-	$: canGoForward = !!(nextMemory || nextAsset);
-	$: canGoBack = !!(previousMemory || previousAsset);
+  $: canGoForward = !!(nextMemory || nextAsset);
+  $: canGoBack = !!(previousMemory || previousAsset);
 
-	const toNextMemory = () => goto(`?memory=${memoryIndex + 1}`);
-	const toPreviousMemory = () => goto(`?memory=${memoryIndex - 1}`);
+  const toNextMemory = () => goto(`?memory=${memoryIndex + 1}`);
+  const toPreviousMemory = () => goto(`?memory=${memoryIndex - 1}`);
 
-	const toNextAsset = () => goto(`?memory=${memoryIndex}&asset=${assetIndex + 1}`);
-	const toPreviousAsset = () => goto(`?memory=${memoryIndex}&asset=${assetIndex - 1}`);
+  const toNextAsset = () => goto(`?memory=${memoryIndex}&asset=${assetIndex + 1}`);
+  const toPreviousAsset = () => goto(`?memory=${memoryIndex}&asset=${assetIndex - 1}`);
 
-	const toNext = () => (nextAsset ? toNextAsset() : toNextMemory());
-	const toPrevious = () => (previousAsset ? toPreviousAsset() : toPreviousMemory());
+  const toNext = () => (nextAsset ? toNextAsset() : toNextMemory());
+  const toPrevious = () => (previousAsset ? toPreviousAsset() : toPreviousMemory());
 
-	const progress = tweened<number>(0, {
-		duration: (from: number, to: number) => (to ? 5000 * (to - from) : 0)
-	});
+  const progress = tweened<number>(0, {
+    duration: (from: number, to: number) => (to ? 5000 * (to - from) : 0),
+  });
 
-	const play = () => progress.set(1);
-	const pause = () => progress.set($progress);
+  const play = () => progress.set(1);
+  const pause = () => progress.set($progress);
 
-	let resetPromise = Promise.resolve();
-	const reset = () => (resetPromise = progress.set(0));
+  let resetPromise = Promise.resolve();
+  const reset = () => (resetPromise = progress.set(0));
 
-	let paused = false;
+  let paused = false;
 
-	// Play or pause progress when the paused state changes.
-	$: paused ? pause() : play();
+  // Play or pause progress when the paused state changes.
+  $: paused ? pause() : play();
 
-	// Progress should be paused when it's no longer possible to advance.
-	$: paused ||= !canGoForward || galleryInView;
+  // Progress should be paused when it's no longer possible to advance.
+  $: paused ||= !canGoForward || galleryInView;
 
-	// Advance to the next asset or memory when progress is complete.
-	$: $progress === 1 && toNext();
+  // Advance to the next asset or memory when progress is complete.
+  $: $progress === 1 && toNext();
 
-	// Progress should be resumed when reset and not paused.
-	$: !$progress && !paused && play();
+  // Progress should be resumed when reset and not paused.
+  $: !$progress && !paused && play();
 
-	// Progress should be reset when the current memory or asset changes.
-	$: memoryIndex, assetIndex, reset();
+  // Progress should be reset when the current memory or asset changes.
+  $: memoryIndex, assetIndex, reset();
 
-	const handleKeyDown = (e: KeyboardEvent) => {
-		if (e.key === 'ArrowRight' && canGoForward) {
-			e.preventDefault();
-			toNext();
-		} else if (e.key === 'ArrowLeft' && canGoBack) {
-			e.preventDefault();
-			toPrevious();
-		} else if (e.key === 'Escape') {
-			e.preventDefault();
-			goto(AppRoute.PHOTOS);
-		}
-	};
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowRight' && canGoForward) {
+      e.preventDefault();
+      toNext();
+    } else if (e.key === 'ArrowLeft' && canGoBack) {
+      e.preventDefault();
+      toPrevious();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      goto(AppRoute.PHOTOS);
+    }
+  };
 
-	onMount(async () => {
-		if (!$memoryStore) {
-			const { data } = await api.assetApi.getMemoryLane({
-				timestamp: DateTime.local().startOf('day').toISO() || ''
-			});
-			$memoryStore = data;
-		}
-	});
+  onMount(async () => {
+    if (!$memoryStore) {
+      const { data } = await api.assetApi.getMemoryLane({
+        timestamp: DateTime.local().startOf('day').toISO() || '',
+      });
+      $memoryStore = data;
+    }
+  });
 
-	let memoryGallery: HTMLElement;
-	let memoryWrapper: HTMLElement;
-	let galleryInView = false;
+  let memoryGallery: HTMLElement;
+  let memoryWrapper: HTMLElement;
+  let galleryInView = false;
 </script>
 
 <svelte:window on:keydown={handleKeyDown} />
 
 <section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}>
-	{#if currentMemory}
-		<ControlAppBar on:close-button-click={() => goto(AppRoute.PHOTOS)} forceDark>
-			<svelte:fragment slot="leading">
-				<p class="text-lg">
-					{currentMemory.title}
-				</p>
-			</svelte:fragment>
+  {#if currentMemory}
+    <ControlAppBar on:close-button-click={() => goto(AppRoute.PHOTOS)} forceDark>
+      <svelte:fragment slot="leading">
+        <p class="text-lg">
+          {currentMemory.title}
+        </p>
+      </svelte:fragment>
 
-			{#if !galleryInView}
-				<div class="flex place-items-center place-content-center overflow-hidden gap-2">
-					<CircleIconButton
-						logo={paused ? Play : Pause}
-						forceDark
-						on:click={() => (paused = !paused)}
-					/>
+      {#if !galleryInView}
+        <div class="flex place-items-center place-content-center overflow-hidden gap-2">
+          <CircleIconButton logo={paused ? Play : Pause} forceDark on:click={() => (paused = !paused)} />
 
-					{#each currentMemory.assets as _, i}
-						<button
-							class="relative w-full py-2"
-							on:click={() => goto(`?memory=${memoryIndex}&asset=${i}`)}
-						>
-							<span class="absolute left-0 w-full h-[2px] bg-gray-500" />
-							{#await resetPromise}
-								<span
-									class="absolute left-0 h-[2px] bg-white"
-									style:width={`${i < assetIndex ? 100 : 0}%`}
-								/>
-							{:then}
-								<span
-									class="absolute left-0 h-[2px] bg-white"
-									style:width={`${i < assetIndex ? 100 : i > assetIndex ? 0 : $progress * 100}%`}
-								/>
-							{/await}
-						</button>
-					{/each}
+          {#each currentMemory.assets as _, i}
+            <button class="relative w-full py-2" on:click={() => goto(`?memory=${memoryIndex}&asset=${i}`)}>
+              <span class="absolute left-0 w-full h-[2px] bg-gray-500" />
+              {#await resetPromise}
+                <span class="absolute left-0 h-[2px] bg-white" style:width={`${i < assetIndex ? 100 : 0}%`} />
+              {:then}
+                <span
+                  class="absolute left-0 h-[2px] bg-white"
+                  style:width={`${i < assetIndex ? 100 : i > assetIndex ? 0 : $progress * 100}%`}
+                />
+              {/await}
+            </button>
+          {/each}
 
-					<div>
-						<p class="text-small">
-							{assetIndex + 1}/{currentMemory.assets.length}
-						</p>
-					</div>
-				</div>
-			{/if}
-		</ControlAppBar>
+          <div>
+            <p class="text-small">
+              {assetIndex + 1}/{currentMemory.assets.length}
+            </p>
+          </div>
+        </div>
+      {/if}
+    </ControlAppBar>
 
-		{#if galleryInView}
-			<div
-				class="sticky top-20 flex place-content-center place-items-center z-30 transition-opacity"
-				class:opacity-0={!galleryInView}
-				class:opacity-100={galleryInView}
-			>
-				<button
-					on:click={() => memoryWrapper.scrollIntoView({ behavior: 'smooth' })}
-					disabled={!galleryInView}
-				>
-					<CircleIconButton logo={ChevronUp} backgroundColor="white" forceDark />
-				</button>
-			</div>
-		{/if}
-		<!-- Viewer -->
-		<section class="pt-20 overflow-hidden">
-			<div
-				class="flex w-[300%] h-[calc(100vh_-_180px)] items-center justify-center box-border ml-[-100%] gap-10 overflow-hidden"
-			>
-				<!-- PREVIOUS MEMORY -->
-				<div
-					class="rounded-2xl w-[20vw] h-1/2"
-					class:opacity-25={previousMemory}
-					class:opacity-0={!previousMemory}
-					class:hover:opacity-70={previousMemory}
-				>
-					<button
-						class="rounded-2xl h-full w-full relative"
-						disabled={!previousMemory}
-						on:click={toPreviousMemory}
-					>
-						<img
-							class="rounded-2xl h-full w-full object-cover"
-							src={previousMemory
-								? api.getAssetThumbnailUrl(previousMemory.assets[0].id, 'JPEG')
-								: noThumbnailUrl}
-							alt=""
-							draggable="false"
-						/>
+    {#if galleryInView}
+      <div
+        class="sticky top-20 flex place-content-center place-items-center z-30 transition-opacity"
+        class:opacity-0={!galleryInView}
+        class:opacity-100={galleryInView}
+      >
+        <button on:click={() => memoryWrapper.scrollIntoView({ behavior: 'smooth' })} disabled={!galleryInView}>
+          <CircleIconButton logo={ChevronUp} backgroundColor="white" forceDark />
+        </button>
+      </div>
+    {/if}
+    <!-- Viewer -->
+    <section class="pt-20 overflow-hidden">
+      <div
+        class="flex w-[300%] h-[calc(100vh_-_180px)] items-center justify-center box-border ml-[-100%] gap-10 overflow-hidden"
+      >
+        <!-- PREVIOUS MEMORY -->
+        <div
+          class="rounded-2xl w-[20vw] h-1/2"
+          class:opacity-25={previousMemory}
+          class:opacity-0={!previousMemory}
+          class:hover:opacity-70={previousMemory}
+        >
+          <button class="rounded-2xl h-full w-full relative" disabled={!previousMemory} on:click={toPreviousMemory}>
+            <img
+              class="rounded-2xl h-full w-full object-cover"
+              src={previousMemory ? api.getAssetThumbnailUrl(previousMemory.assets[0].id, 'JPEG') : noThumbnailUrl}
+              alt=""
+              draggable="false"
+            />
 
-						{#if previousMemory}
-							<div class="absolute right-4 bottom-4 text-white text-left">
-								<p class="font-semibold text-xs text-gray-200">PREVIOUS</p>
-								<p class="text-xl">{previousMemory.title}</p>
-							</div>
-						{/if}
-					</button>
-				</div>
+            {#if previousMemory}
+              <div class="absolute right-4 bottom-4 text-white text-left">
+                <p class="font-semibold text-xs text-gray-200">PREVIOUS</p>
+                <p class="text-xl">{previousMemory.title}</p>
+              </div>
+            {/if}
+          </button>
+        </div>
 
-				<!-- CURRENT MEMORY -->
-				<div
-					class="main-view rounded-2xl h-full relative w-[70vw] bg-black flex place-items-center place-content-center"
-				>
-					<div class="bg-black w-full h-full rounded-2xl">
-						<!-- CONTROL BUTTONS -->
-						<div class="absolute h-full flex justify-between w-full">
-							<div class="flex h-full flex-col place-content-center place-items-center ml-4">
-								<div class="inline-block">
-									{#if canGoBack}
-										<CircleIconButton
-											logo={ChevronLeft}
-											backgroundColor="#202123"
-											on:click={toPrevious}
-										/>
-									{/if}
-								</div>
-							</div>
-							<div class="flex h-full flex-col place-content-center place-items-center mr-4">
-								<div class="inline-block">
-									{#if canGoForward}
-										<CircleIconButton
-											logo={ChevronRight}
-											backgroundColor="#202123"
-											on:click={toNext}
-										/>
-									{/if}
-								</div>
-							</div>
-						</div>
+        <!-- CURRENT MEMORY -->
+        <div
+          class="main-view rounded-2xl h-full relative w-[70vw] bg-black flex place-items-center place-content-center"
+        >
+          <div class="bg-black w-full h-full rounded-2xl">
+            <!-- CONTROL BUTTONS -->
+            <div class="absolute h-full flex justify-between w-full">
+              <div class="flex h-full flex-col place-content-center place-items-center ml-4">
+                <div class="inline-block">
+                  {#if canGoBack}
+                    <CircleIconButton logo={ChevronLeft} backgroundColor="#202123" on:click={toPrevious} />
+                  {/if}
+                </div>
+              </div>
+              <div class="flex h-full flex-col place-content-center place-items-center mr-4">
+                <div class="inline-block">
+                  {#if canGoForward}
+                    <CircleIconButton logo={ChevronRight} backgroundColor="#202123" on:click={toNext} />
+                  {/if}
+                </div>
+              </div>
+            </div>
 
-						{#key currentAsset.id}
-							<img
-								transition:fade|local
-								class="rounded-2xl w-full h-full object-contain transition-all"
-								src={api.getAssetThumbnailUrl(currentAsset.id, 'JPEG')}
-								alt=""
-								draggable="false"
-							/>
-						{/key}
+            {#key currentAsset.id}
+              <img
+                transition:fade|local
+                class="rounded-2xl w-full h-full object-contain transition-all"
+                src={api.getAssetThumbnailUrl(currentAsset.id, 'JPEG')}
+                alt=""
+                draggable="false"
+              />
+            {/key}
 
-						<div class="absolute top-4 left-8 text-white text-sm font-medium">
-							<p>
-								{DateTime.fromISO(currentMemory.assets[0].fileCreatedAt).toLocaleString(
-									DateTime.DATE_FULL
-								)}
-							</p>
-							<p>
-								{currentAsset.exifInfo?.city || ''}
-								{currentAsset.exifInfo?.country || ''}
-							</p>
-						</div>
-					</div>
-				</div>
+            <div class="absolute top-4 left-8 text-white text-sm font-medium">
+              <p>
+                {DateTime.fromISO(currentMemory.assets[0].fileCreatedAt).toLocaleString(DateTime.DATE_FULL)}
+              </p>
+              <p>
+                {currentAsset.exifInfo?.city || ''}
+                {currentAsset.exifInfo?.country || ''}
+              </p>
+            </div>
+          </div>
+        </div>
 
-				<!-- NEXT MEMORY -->
-				<div
-					class="rounded-xl w-[20vw] h-1/2"
-					class:opacity-25={nextMemory}
-					class:opacity-0={!nextMemory}
-					class:hover:opacity-70={nextMemory}
-				>
-					<button
-						class="rounded-2xl h-full w-full relative"
-						on:click={toNextMemory}
-						disabled={!nextMemory}
-					>
-						<img
-							class="rounded-2xl h-full w-full object-cover"
-							src={nextMemory
-								? api.getAssetThumbnailUrl(nextMemory.assets[0].id, 'JPEG')
-								: noThumbnailUrl}
-							alt=""
-							draggable="false"
-						/>
+        <!-- NEXT MEMORY -->
+        <div
+          class="rounded-xl w-[20vw] h-1/2"
+          class:opacity-25={nextMemory}
+          class:opacity-0={!nextMemory}
+          class:hover:opacity-70={nextMemory}
+        >
+          <button class="rounded-2xl h-full w-full relative" on:click={toNextMemory} disabled={!nextMemory}>
+            <img
+              class="rounded-2xl h-full w-full object-cover"
+              src={nextMemory ? api.getAssetThumbnailUrl(nextMemory.assets[0].id, 'JPEG') : noThumbnailUrl}
+              alt=""
+              draggable="false"
+            />
 
-						{#if nextMemory}
-							<div class="absolute left-4 bottom-4 text-white text-left">
-								<p class="font-semibold text-xs text-gray-200">UP NEXT</p>
-								<p class="text-xl">{nextMemory.title}</p>
-							</div>
-						{/if}
-					</button>
-				</div>
-			</div>
-		</section>
+            {#if nextMemory}
+              <div class="absolute left-4 bottom-4 text-white text-left">
+                <p class="font-semibold text-xs text-gray-200">UP NEXT</p>
+                <p class="text-xl">{nextMemory.title}</p>
+              </div>
+            {/if}
+          </button>
+        </div>
+      </div>
+    </section>
 
-		<!-- GALERY VIEWER -->
+    <!-- GALERY VIEWER -->
 
-		<section class="bg-immich-dark-gray pl-4">
-			<div
-				class="sticky flex place-content-center place-items-center mb-10 mt-4 transition-all"
-				class:opacity-0={galleryInView}
-				class:opacity-100={!galleryInView}
-			>
-				<button on:click={() => memoryGallery.scrollIntoView({ behavior: 'smooth' })}>
-					<CircleIconButton logo={ChevronDown} backgroundColor="white" forceDark />
-				</button>
-			</div>
+    <section class="bg-immich-dark-gray pl-4">
+      <div
+        class="sticky flex place-content-center place-items-center mb-10 mt-4 transition-all"
+        class:opacity-0={galleryInView}
+        class:opacity-100={!galleryInView}
+      >
+        <button on:click={() => memoryGallery.scrollIntoView({ behavior: 'smooth' })}>
+          <CircleIconButton logo={ChevronDown} backgroundColor="white" forceDark />
+        </button>
+      </div>
 
-			<IntersectionObserver
-				once={false}
-				on:intersected={() => (galleryInView = true)}
-				on:hidden={() => (galleryInView = false)}
-				bottom={-200}
-			>
-				<div id="gallery-memory" bind:this={memoryGallery}>
-					<GalleryViewer assets={currentMemory.assets} viewFrom="album-page" />
-				</div>
-			</IntersectionObserver>
-		</section>
-	{/if}
+      <IntersectionObserver
+        once={false}
+        on:intersected={() => (galleryInView = true)}
+        on:hidden={() => (galleryInView = false)}
+        bottom={-200}
+      >
+        <div id="gallery-memory" bind:this={memoryGallery}>
+          <GalleryViewer assets={currentMemory.assets} viewFrom="album-page" />
+        </div>
+      </IntersectionObserver>
+    </section>
+  {/if}
 </section>
 
 <style>
-	.main-view {
-		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
-	}
+  .main-view {
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
+  }
 </style>
diff --git a/web/src/lib/components/photos-page/actions/add-to-album.svelte b/web/src/lib/components/photos-page/actions/add-to-album.svelte
index 628d98f41..90e2ceff4 100644
--- a/web/src/lib/components/photos-page/actions/add-to-album.svelte
+++ b/web/src/lib/components/photos-page/actions/add-to-album.svelte
@@ -1,67 +1,64 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
-	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-	import {
-		NotificationType,
-		notificationController
-	} from '$lib/components/shared-components/notification/notification';
-	import { addAssetsToAlbum } from '$lib/utils/asset-utils';
-	import { AlbumResponseDto, api } from '@api';
-	import { getMenuContext } from '../asset-select-context-menu.svelte';
-	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { goto } from '$app/navigation';
+  import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import { addAssetsToAlbum } from '$lib/utils/asset-utils';
+  import { AlbumResponseDto, api } from '@api';
+  import { getMenuContext } from '../asset-select-context-menu.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
-	export let shared = false;
-	let showAlbumPicker = false;
+  export let shared = false;
+  let showAlbumPicker = false;
 
-	const { getAssets, clearSelect } = getAssetControlContext();
-	const closeMenu = getMenuContext();
+  const { getAssets, clearSelect } = getAssetControlContext();
+  const closeMenu = getMenuContext();
 
-	const handleHideAlbumPicker = () => {
-		showAlbumPicker = false;
-		closeMenu();
-	};
+  const handleHideAlbumPicker = () => {
+    showAlbumPicker = false;
+    closeMenu();
+  };
 
-	const handleAddToNewAlbum = (event: CustomEvent) => {
-		showAlbumPicker = false;
+  const handleAddToNewAlbum = (event: CustomEvent) => {
+    showAlbumPicker = false;
 
-		const { albumName }: { albumName: string } = event.detail;
-		const assetIds = Array.from(getAssets()).map((asset) => asset.id);
-		api.albumApi.createAlbum({ createAlbumDto: { albumName, assetIds } }).then((response) => {
-			const { id, albumName } = response.data;
+    const { albumName }: { albumName: string } = event.detail;
+    const assetIds = Array.from(getAssets()).map((asset) => asset.id);
+    api.albumApi.createAlbum({ createAlbumDto: { albumName, assetIds } }).then((response) => {
+      const { id, albumName } = response.data;
 
-			notificationController.show({
-				message: `Added ${assetIds.length} to ${albumName}`,
-				type: NotificationType.Info
-			});
+      notificationController.show({
+        message: `Added ${assetIds.length} to ${albumName}`,
+        type: NotificationType.Info,
+      });
 
-			clearSelect();
+      clearSelect();
 
-			goto('/albums/' + id);
-		});
-	};
+      goto('/albums/' + id);
+    });
+  };
 
-	const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
-		showAlbumPicker = false;
-		const album = event.detail.album;
+  const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
+    showAlbumPicker = false;
+    const album = event.detail.album;
 
-		const assetIds = Array.from(getAssets()).map((asset) => asset.id);
+    const assetIds = Array.from(getAssets()).map((asset) => asset.id);
 
-		addAssetsToAlbum(album.id, assetIds).then(clearSelect);
-	};
+    addAssetsToAlbum(album.id, assetIds).then(clearSelect);
+  };
 </script>
 
-<MenuOption
-	on:click={() => (showAlbumPicker = true)}
-	text={shared ? 'Add to Shared Album' : 'Add to Album'}
-/>
+<MenuOption on:click={() => (showAlbumPicker = true)} text={shared ? 'Add to Shared Album' : 'Add to Album'} />
 
 {#if showAlbumPicker}
-	<AlbumSelectionModal
-		{shared}
-		on:newAlbum={handleAddToNewAlbum}
-		on:newSharedAlbum={handleAddToNewAlbum}
-		on:album={handleAddToAlbum}
-		on:close={handleHideAlbumPicker}
-	/>
+  <AlbumSelectionModal
+    {shared}
+    on:newAlbum={handleAddToNewAlbum}
+    on:newSharedAlbum={handleAddToNewAlbum}
+    on:album={handleAddToAlbum}
+    on:close={handleHideAlbumPicker}
+  />
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/archive-action.svelte b/web/src/lib/components/photos-page/actions/archive-action.svelte
index 9f485f6cc..a575c125a 100644
--- a/web/src/lib/components/photos-page/actions/archive-action.svelte
+++ b/web/src/lib/components/photos-page/actions/archive-action.svelte
@@ -1,51 +1,51 @@
 <script lang="ts">
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import {
-		NotificationType,
-		notificationController
-	} from '$lib/components/shared-components/notification/notification';
-	import { api } from '@api';
-	import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
-	import ArchiveArrowUpOutline from 'svelte-material-icons/ArchiveArrowUpOutline.svelte';
-	import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-	import { OnAssetArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import { api } from '@api';
+  import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
+  import ArchiveArrowUpOutline from 'svelte-material-icons/ArchiveArrowUpOutline.svelte';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { OnAssetArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
 
-	export let onAssetArchive: OnAssetArchive = (asset, isArchived) => {
-		asset.isArchived = isArchived;
-	};
+  export let onAssetArchive: OnAssetArchive = (asset, isArchived) => {
+    asset.isArchived = isArchived;
+  };
 
-	export let menuItem = false;
-	export let unarchive = false;
+  export let menuItem = false;
+  export let unarchive = false;
 
-	$: text = unarchive ? 'Unarchive' : 'Archive';
-	$: logo = unarchive ? ArchiveArrowUpOutline : ArchiveArrowDownOutline;
+  $: text = unarchive ? 'Unarchive' : 'Archive';
+  $: logo = unarchive ? ArchiveArrowUpOutline : ArchiveArrowDownOutline;
 
-	const { getAssets, clearSelect } = getAssetControlContext();
+  const { getAssets, clearSelect } = getAssetControlContext();
 
-	const handleArchive = async () => {
-		const isArchived = !unarchive;
-		let cnt = 0;
+  const handleArchive = async () => {
+    const isArchived = !unarchive;
+    let cnt = 0;
 
-		for (const asset of getAssets()) {
-			if (asset.isArchived !== isArchived) {
-				api.assetApi.updateAsset({ id: asset.id, updateAssetDto: { isArchived } });
+    for (const asset of getAssets()) {
+      if (asset.isArchived !== isArchived) {
+        api.assetApi.updateAsset({ id: asset.id, updateAssetDto: { isArchived } });
 
-				onAssetArchive(asset, isArchived);
-				cnt = cnt + 1;
-			}
-		}
+        onAssetArchive(asset, isArchived);
+        cnt = cnt + 1;
+      }
+    }
 
-		notificationController.show({
-			message: `${isArchived ? 'Archived' : 'Unarchived'} ${cnt}`,
-			type: NotificationType.Info
-		});
+    notificationController.show({
+      message: `${isArchived ? 'Archived' : 'Unarchived'} ${cnt}`,
+      type: NotificationType.Info,
+    });
 
-		clearSelect();
-	};
+    clearSelect();
+  };
 </script>
 
 {#if menuItem}
-	<MenuOption {text} on:click={handleArchive} />
+  <MenuOption {text} on:click={handleArchive} />
 {:else}
-	<CircleIconButton title={text} {logo} on:click={handleArchive} />
+  <CircleIconButton title={text} {logo} on:click={handleArchive} />
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/create-shared-link.svelte b/web/src/lib/components/photos-page/actions/create-shared-link.svelte
index 5f436315a..7fee3668e 100644
--- a/web/src/lib/components/photos-page/actions/create-shared-link.svelte
+++ b/web/src/lib/components/photos-page/actions/create-shared-link.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
-	import { SharedLinkType } from '@api';
-	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
-	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+  import { SharedLinkType } from '@api';
+  import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
-	let showModal = false;
-	const { getAssets, clearSelect } = getAssetControlContext();
+  let showModal = false;
+  const { getAssets, clearSelect } = getAssetControlContext();
 </script>
 
 <CircleIconButton title="Share" logo={ShareVariantOutline} on:click={() => (showModal = true)} />
 
 {#if showModal}
-	<CreateSharedLinkModal
-		sharedAssets={Array.from(getAssets())}
-		shareType={SharedLinkType.Individual}
-		on:close={() => {
-			showModal = false;
-			clearSelect();
-		}}
-	/>
+  <CreateSharedLinkModal
+    sharedAssets={Array.from(getAssets())}
+    shareType={SharedLinkType.Individual}
+    on:close={() => {
+      showModal = false;
+      clearSelect();
+    }}
+  />
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/delete-assets.svelte b/web/src/lib/components/photos-page/actions/delete-assets.svelte
index f22a84231..6283d6b4d 100644
--- a/web/src/lib/components/photos-page/actions/delete-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/delete-assets.svelte
@@ -1,74 +1,70 @@
 <script lang="ts">
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import {
-		NotificationType,
-		notificationController
-	} from '$lib/components/shared-components/notification/notification';
-	import { api } from '@api';
-	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-	import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
-	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-	import { handleError } from '../../../utils/handle-error';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import { api } from '@api';
+  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+  import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import { handleError } from '../../../utils/handle-error';
 
-	export let onAssetDelete: OnAssetDelete;
-	const { getAssets, clearSelect } = getAssetControlContext();
+  export let onAssetDelete: OnAssetDelete;
+  const { getAssets, clearSelect } = getAssetControlContext();
 
-	let isShowConfirmation = false;
+  let isShowConfirmation = false;
 
-	const handleDelete = async () => {
-		try {
-			let count = 0;
+  const handleDelete = async () => {
+    try {
+      let count = 0;
 
-			const { data: deletedAssets } = await api.assetApi.deleteAsset({
-				deleteAssetDto: {
-					ids: Array.from(getAssets()).map((a) => a.id)
-				}
-			});
+      const { data: deletedAssets } = await api.assetApi.deleteAsset({
+        deleteAssetDto: {
+          ids: Array.from(getAssets()).map((a) => a.id),
+        },
+      });
 
-			for (const asset of deletedAssets) {
-				if (asset.status === 'SUCCESS') {
-					onAssetDelete(asset.id);
-					count++;
-				}
-			}
+      for (const asset of deletedAssets) {
+        if (asset.status === 'SUCCESS') {
+          onAssetDelete(asset.id);
+          count++;
+        }
+      }
 
-			notificationController.show({
-				message: `Deleted ${count}`,
-				type: NotificationType.Info
-			});
+      notificationController.show({
+        message: `Deleted ${count}`,
+        type: NotificationType.Info,
+      });
 
-			clearSelect();
-		} catch (e) {
-			handleError(e, 'Error deleting assets');
-		} finally {
-			isShowConfirmation = false;
-		}
-	};
+      clearSelect();
+    } catch (e) {
+      handleError(e, 'Error deleting assets');
+    } finally {
+      isShowConfirmation = false;
+    }
+  };
 </script>
 
-<CircleIconButton
-	title="Delete"
-	logo={DeleteOutline}
-	on:click={() => (isShowConfirmation = true)}
-/>
+<CircleIconButton title="Delete" logo={DeleteOutline} on:click={() => (isShowConfirmation = true)} />
 
 {#if isShowConfirmation}
-	<ConfirmDialogue
-		title="Delete Asset{getAssets().size > 1 ? 's' : ''}"
-		confirmText="Delete"
-		on:confirm={handleDelete}
-		on:cancel={() => (isShowConfirmation = false)}
-	>
-		<svelte:fragment slot="prompt">
-			<p>
-				Are you sure you want to delete
-				{#if getAssets().size > 1}
-					these <b>{getAssets().size}</b> assets? This will also remove them from their album(s).
-				{:else}
-					this asset? This will also remove it from its album(s).
-				{/if}
-			</p>
-			<p><b>You cannot undo this action!</b></p>
-		</svelte:fragment>
-	</ConfirmDialogue>
+  <ConfirmDialogue
+    title="Delete Asset{getAssets().size > 1 ? 's' : ''}"
+    confirmText="Delete"
+    on:confirm={handleDelete}
+    on:cancel={() => (isShowConfirmation = false)}
+  >
+    <svelte:fragment slot="prompt">
+      <p>
+        Are you sure you want to delete
+        {#if getAssets().size > 1}
+          these <b>{getAssets().size}</b> assets? This will also remove them from their album(s).
+        {:else}
+          this asset? This will also remove it from its album(s).
+        {/if}
+      </p>
+      <p><b>You cannot undo this action!</b></p>
+    </svelte:fragment>
+  </ConfirmDialogue>
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/download-action.svelte b/web/src/lib/components/photos-page/actions/download-action.svelte
index a79be2681..43b3a9ae4 100644
--- a/web/src/lib/components/photos-page/actions/download-action.svelte
+++ b/web/src/lib/components/photos-page/actions/download-action.svelte
@@ -1,35 +1,30 @@
 <script lang="ts">
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
-	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
-	import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
+  import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
-	export let filename = 'immich.zip';
-	export let sharedLinkKey: string | undefined = undefined;
-	export let menuItem = false;
+  export let filename = 'immich.zip';
+  export let sharedLinkKey: string | undefined = undefined;
+  export let menuItem = false;
 
-	const { getAssets, clearSelect } = getAssetControlContext();
+  const { getAssets, clearSelect } = getAssetControlContext();
 
-	const handleDownloadFiles = async () => {
-		const assets = Array.from(getAssets());
-		if (assets.length === 1) {
-			await downloadFile(assets[0], sharedLinkKey);
-			clearSelect();
-			return;
-		}
+  const handleDownloadFiles = async () => {
+    const assets = Array.from(getAssets());
+    if (assets.length === 1) {
+      await downloadFile(assets[0], sharedLinkKey);
+      clearSelect();
+      return;
+    }
 
-		await downloadArchive(
-			filename,
-			{ assetIds: assets.map((asset) => asset.id) },
-			clearSelect,
-			sharedLinkKey
-		);
-	};
+    await downloadArchive(filename, { assetIds: assets.map((asset) => asset.id) }, clearSelect, sharedLinkKey);
+  };
 </script>
 
 {#if menuItem}
-	<MenuOption text="Download" on:click={handleDownloadFiles} />
+  <MenuOption text="Download" on:click={handleDownloadFiles} />
 {:else}
-	<CircleIconButton title="Download" logo={CloudDownloadOutline} on:click={handleDownloadFiles} />
+  <CircleIconButton title="Download" logo={CloudDownloadOutline} on:click={handleDownloadFiles} />
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/favorite-action.svelte b/web/src/lib/components/photos-page/actions/favorite-action.svelte
index 7ce532444..c427d3934 100644
--- a/web/src/lib/components/photos-page/actions/favorite-action.svelte
+++ b/web/src/lib/components/photos-page/actions/favorite-action.svelte
@@ -1,50 +1,50 @@
 <script lang="ts">
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-	import {
-		NotificationType,
-		notificationController
-	} from '$lib/components/shared-components/notification/notification';
-	import { api } from '@api';
-	import HeartMinusOutline from 'svelte-material-icons/HeartMinusOutline.svelte';
-	import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
-	import { OnAssetFavorite, getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import { api } from '@api';
+  import HeartMinusOutline from 'svelte-material-icons/HeartMinusOutline.svelte';
+  import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
+  import { OnAssetFavorite, getAssetControlContext } from '../asset-select-control-bar.svelte';
 
-	export let onAssetFavorite: OnAssetFavorite = (asset, isFavorite) => {
-		asset.isFavorite = isFavorite;
-	};
+  export let onAssetFavorite: OnAssetFavorite = (asset, isFavorite) => {
+    asset.isFavorite = isFavorite;
+  };
 
-	export let menuItem = false;
-	export let removeFavorite: boolean;
+  export let menuItem = false;
+  export let removeFavorite: boolean;
 
-	$: text = removeFavorite ? 'Remove from Favorites' : 'Favorite';
-	$: logo = removeFavorite ? HeartMinusOutline : HeartOutline;
+  $: text = removeFavorite ? 'Remove from Favorites' : 'Favorite';
+  $: logo = removeFavorite ? HeartMinusOutline : HeartOutline;
 
-	const { getAssets, clearSelect } = getAssetControlContext();
+  const { getAssets, clearSelect } = getAssetControlContext();
 
-	const handleFavorite = () => {
-		const isFavorite = !removeFavorite;
+  const handleFavorite = () => {
+    const isFavorite = !removeFavorite;
 
-		let cnt = 0;
-		for (const asset of getAssets()) {
-			if (asset.isFavorite !== isFavorite) {
-				api.assetApi.updateAsset({ id: asset.id, updateAssetDto: { isFavorite } });
-				onAssetFavorite(asset, isFavorite);
-				cnt = cnt + 1;
-			}
-		}
+    let cnt = 0;
+    for (const asset of getAssets()) {
+      if (asset.isFavorite !== isFavorite) {
+        api.assetApi.updateAsset({ id: asset.id, updateAssetDto: { isFavorite } });
+        onAssetFavorite(asset, isFavorite);
+        cnt = cnt + 1;
+      }
+    }
 
-		notificationController.show({
-			message: isFavorite ? `Added ${cnt} to favorites` : `Removed ${cnt} from favorites`,
-			type: NotificationType.Info
-		});
+    notificationController.show({
+      message: isFavorite ? `Added ${cnt} to favorites` : `Removed ${cnt} from favorites`,
+      type: NotificationType.Info,
+    });
 
-		clearSelect();
-	};
+    clearSelect();
+  };
 </script>
 
 {#if menuItem}
-	<MenuOption {text} on:click={handleFavorite} />
+  <MenuOption {text} on:click={handleFavorite} />
 {:else}
-	<CircleIconButton title={text} {logo} on:click={handleFavorite} />
+  <CircleIconButton title={text} {logo} on:click={handleFavorite} />
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/remove-from-album.svelte b/web/src/lib/components/photos-page/actions/remove-from-album.svelte
index 33a3d011b..1a553e031 100644
--- a/web/src/lib/components/photos-page/actions/remove-from-album.svelte
+++ b/web/src/lib/components/photos-page/actions/remove-from-album.svelte
@@ -1,66 +1,62 @@
 <script lang="ts">
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import {
-		NotificationType,
-		notificationController
-	} from '$lib/components/shared-components/notification/notification';
-	import { AlbumResponseDto, api } from '@api';
-	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import { AlbumResponseDto, api } from '@api';
+  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
 
-	export let album: AlbumResponseDto;
+  export let album: AlbumResponseDto;
 
-	const { getAssets, clearSelect } = getAssetControlContext();
+  const { getAssets, clearSelect } = getAssetControlContext();
 
-	let isShowConfirmation = false;
+  let isShowConfirmation = false;
 
-	const removeFromAlbum = async () => {
-		try {
-			const { data } = await api.albumApi.removeAssetFromAlbum({
-				id: album.id,
-				removeAssetsDto: {
-					assetIds: Array.from(getAssets()).map((a) => a.id)
-				}
-			});
+  const removeFromAlbum = async () => {
+    try {
+      const { data } = await api.albumApi.removeAssetFromAlbum({
+        id: album.id,
+        removeAssetsDto: {
+          assetIds: Array.from(getAssets()).map((a) => a.id),
+        },
+      });
 
-			album = data;
-			clearSelect();
-		} catch (e) {
-			console.error('Error [album-viewer] [removeAssetFromAlbum]', e);
-			notificationController.show({
-				type: NotificationType.Error,
-				message: 'Error removing assets from album, check console for more details'
-			});
-		} finally {
-			isShowConfirmation = false;
-		}
-	};
+      album = data;
+      clearSelect();
+    } catch (e) {
+      console.error('Error [album-viewer] [removeAssetFromAlbum]', e);
+      notificationController.show({
+        type: NotificationType.Error,
+        message: 'Error removing assets from album, check console for more details',
+      });
+    } finally {
+      isShowConfirmation = false;
+    }
+  };
 </script>
 
-<CircleIconButton
-	title="Remove from album"
-	on:click={() => (isShowConfirmation = true)}
-	logo={DeleteOutline}
-/>
+<CircleIconButton title="Remove from album" on:click={() => (isShowConfirmation = true)} logo={DeleteOutline} />
 
 {#if isShowConfirmation}
-	<ConfirmDialogue
-		title="Remove Asset{getAssets().size > 1 ? 's' : ''}"
-		confirmText="Remove"
-		on:confirm={removeFromAlbum}
-		on:cancel={() => (isShowConfirmation = false)}
-	>
-		<svelte:fragment slot="prompt">
-			<p>
-				Are you sure you want to remove
-				{#if getAssets().size > 1}
-					these <b>{getAssets().size}</b> assets
-				{:else}
-					this asset
-				{/if}
-				from the album?
-			</p>
-		</svelte:fragment>
-	</ConfirmDialogue>
+  <ConfirmDialogue
+    title="Remove Asset{getAssets().size > 1 ? 's' : ''}"
+    confirmText="Remove"
+    on:confirm={removeFromAlbum}
+    on:cancel={() => (isShowConfirmation = false)}
+  >
+    <svelte:fragment slot="prompt">
+      <p>
+        Are you sure you want to remove
+        {#if getAssets().size > 1}
+          these <b>{getAssets().size}</b> assets
+        {:else}
+          this asset
+        {/if}
+        from the album?
+      </p>
+    </svelte:fragment>
+  </ConfirmDialogue>
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte b/web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte
index 4dc964239..08768b984 100644
--- a/web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte
+++ b/web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte
@@ -1,65 +1,58 @@
 <script lang="ts">
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import { SharedLinkResponseDto, api } from '@api';
-	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-	import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
-	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-	import {
-		NotificationType,
-		notificationController
-	} from '../../shared-components/notification/notification';
-	import { handleError } from '../../../utils/handle-error';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { SharedLinkResponseDto, api } from '@api';
+  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+  import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { NotificationType, notificationController } from '../../shared-components/notification/notification';
+  import { handleError } from '../../../utils/handle-error';
 
-	export let sharedLink: SharedLinkResponseDto;
+  export let sharedLink: SharedLinkResponseDto;
 
-	let removing = false;
+  let removing = false;
 
-	const { getAssets, clearSelect } = getAssetControlContext();
+  const { getAssets, clearSelect } = getAssetControlContext();
 
-	const handleRemove = async () => {
-		try {
-			const { data: results } = await api.sharedLinkApi.removeSharedLinkAssets({
-				id: sharedLink.id,
-				assetIdsDto: {
-					assetIds: Array.from(getAssets()).map((asset) => asset.id)
-				},
-				key: sharedLink.key
-			});
+  const handleRemove = async () => {
+    try {
+      const { data: results } = await api.sharedLinkApi.removeSharedLinkAssets({
+        id: sharedLink.id,
+        assetIdsDto: {
+          assetIds: Array.from(getAssets()).map((asset) => asset.id),
+        },
+        key: sharedLink.key,
+      });
 
-			for (const result of results) {
-				if (!result.success) {
-					continue;
-				}
+      for (const result of results) {
+        if (!result.success) {
+          continue;
+        }
 
-				sharedLink.assets = sharedLink.assets.filter((asset) => asset.id !== result.assetId);
-			}
+        sharedLink.assets = sharedLink.assets.filter((asset) => asset.id !== result.assetId);
+      }
 
-			const count = results.filter((item) => item.success).length;
+      const count = results.filter((item) => item.success).length;
 
-			notificationController.show({
-				type: NotificationType.Info,
-				message: `Removed ${count} assets`
-			});
+      notificationController.show({
+        type: NotificationType.Info,
+        message: `Removed ${count} assets`,
+      });
 
-			clearSelect();
-		} catch (error) {
-			handleError(error, 'Unable to remove assets from shared link');
-		}
-	};
+      clearSelect();
+    } catch (error) {
+      handleError(error, 'Unable to remove assets from shared link');
+    }
+  };
 </script>
 
-<CircleIconButton
-	title="Remove from shared link"
-	on:click={() => (removing = true)}
-	logo={DeleteOutline}
-/>
+<CircleIconButton title="Remove from shared link" on:click={() => (removing = true)} logo={DeleteOutline} />
 
 {#if removing}
-	<ConfirmDialogue
-		title="Remove Assets?"
-		prompt="Are you sure you want to remove {getAssets().size} asset(s) from this shared link?"
-		confirmText="Remove"
-		on:confirm={() => handleRemove()}
-		on:cancel={() => (removing = false)}
-	/>
+  <ConfirmDialogue
+    title="Remove Assets?"
+    prompt="Are you sure you want to remove {getAssets().size} asset(s) from this shared link?"
+    confirmText="Remove"
+    on:confirm={() => handleRemove()}
+    on:cancel={() => (removing = false)}
+  />
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/select-all-assets.svelte b/web/src/lib/components/photos-page/actions/select-all-assets.svelte
index 31e6c3ee3..ff95fb951 100644
--- a/web/src/lib/components/photos-page/actions/select-all-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/select-all-assets.svelte
@@ -1,41 +1,38 @@
 <script lang="ts">
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
-	import TimerSand from 'svelte-material-icons/TimerSand.svelte';
-	import { assetInteractionStore } from '$lib/stores/asset-interaction.store';
-	import { assetGridState, assetStore } from '$lib/stores/assets.store';
-	import { handleError } from '../../../utils/handle-error';
-	import { AssetGridState, BucketPosition } from '$lib/models/asset-grid-state';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+  import TimerSand from 'svelte-material-icons/TimerSand.svelte';
+  import { assetInteractionStore } from '$lib/stores/asset-interaction.store';
+  import { assetGridState, assetStore } from '$lib/stores/assets.store';
+  import { handleError } from '../../../utils/handle-error';
+  import { AssetGridState, BucketPosition } from '$lib/models/asset-grid-state';
 
-	let selecting = false;
+  let selecting = false;
 
-	const handleSelectAll = async () => {
-		try {
-			selecting = true;
-			let _assetGridState = new AssetGridState();
-			assetGridState.subscribe((state) => {
-				_assetGridState = state;
-			});
+  const handleSelectAll = async () => {
+    try {
+      selecting = true;
+      let _assetGridState = new AssetGridState();
+      assetGridState.subscribe((state) => {
+        _assetGridState = state;
+      });
 
-			for (let i = 0; i < _assetGridState.buckets.length; i++) {
-				await assetStore.getAssetsByBucket(
-					_assetGridState.buckets[i].bucketDate,
-					BucketPosition.Unknown
-				);
-				for (const asset of _assetGridState.buckets[i].assets) {
-					assetInteractionStore.addAssetToMultiselectGroup(asset);
-				}
-			}
-			selecting = false;
-		} catch (e) {
-			handleError(e, 'Error selecting all assets');
-		}
-	};
+      for (let i = 0; i < _assetGridState.buckets.length; i++) {
+        await assetStore.getAssetsByBucket(_assetGridState.buckets[i].bucketDate, BucketPosition.Unknown);
+        for (const asset of _assetGridState.buckets[i].assets) {
+          assetInteractionStore.addAssetToMultiselectGroup(asset);
+        }
+      }
+      selecting = false;
+    } catch (e) {
+      handleError(e, 'Error selecting all assets');
+    }
+  };
 </script>
 
 {#if selecting}
-	<CircleIconButton title="Delete" logo={TimerSand} />
+  <CircleIconButton title="Delete" logo={TimerSand} />
 {/if}
 {#if !selecting}
-	<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
+  <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
 {/if}
diff --git a/web/src/lib/components/photos-page/asset-date-group.svelte b/web/src/lib/components/photos-page/asset-date-group.svelte
index 5733d73d9..fc9eaf2a6 100644
--- a/web/src/lib/components/photos-page/asset-date-group.svelte
+++ b/web/src/lib/components/photos-page/asset-date-group.svelte
@@ -1,244 +1,236 @@
 <script lang="ts">
-	import {
-		assetInteractionStore,
-		assetsInAlbumStoreState,
-		isMultiSelectStoreState,
-		selectedAssets,
-		selectedGroup
-	} from '$lib/stores/asset-interaction.store';
-	import { assetStore } from '$lib/stores/assets.store';
-	import { locale } from '$lib/stores/preferences.store';
-	import type { AssetResponseDto } from '@api';
-	import justifiedLayout from 'justified-layout';
-	import lodash from 'lodash-es';
-	import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
-	import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
-	import { fly } from 'svelte/transition';
-	import { getAssetRatio } from '$lib/utils/asset-utils';
-	import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
-	import { createEventDispatcher } from 'svelte';
+  import {
+    assetInteractionStore,
+    assetsInAlbumStoreState,
+    isMultiSelectStoreState,
+    selectedAssets,
+    selectedGroup,
+  } from '$lib/stores/asset-interaction.store';
+  import { assetStore } from '$lib/stores/assets.store';
+  import { locale } from '$lib/stores/preferences.store';
+  import type { AssetResponseDto } from '@api';
+  import justifiedLayout from 'justified-layout';
+  import lodash from 'lodash-es';
+  import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
+  import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
+  import { fly } from 'svelte/transition';
+  import { getAssetRatio } from '$lib/utils/asset-utils';
+  import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
+  import { createEventDispatcher } from 'svelte';
 
-	export let assets: AssetResponseDto[];
-	export let bucketDate: string;
-	export let bucketHeight: number;
-	export let isAlbumSelectionMode = false;
-	export let viewportWidth: number;
+  export let assets: AssetResponseDto[];
+  export let bucketDate: string;
+  export let bucketHeight: number;
+  export let isAlbumSelectionMode = false;
+  export let viewportWidth: number;
 
-	const groupDateFormat: Intl.DateTimeFormatOptions = {
-		weekday: 'short',
-		month: 'short',
-		day: 'numeric',
-		year: 'numeric'
-	};
+  const groupDateFormat: Intl.DateTimeFormatOptions = {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  };
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	let isMouseOverGroup = false;
-	let actualBucketHeight: number;
-	let hoveredDateGroup = '';
+  let isMouseOverGroup = false;
+  let actualBucketHeight: number;
+  let hoveredDateGroup = '';
 
-	interface LayoutBox {
-		top: number;
-		left: number;
-		width: number;
-	}
+  interface LayoutBox {
+    top: number;
+    left: number;
+    width: number;
+  }
 
-	$: assetsGroupByDate = lodash
-		.chain(assets)
-		.groupBy((a) => new Date(a.fileCreatedAt).toLocaleDateString($locale, groupDateFormat))
-		.sortBy((group) => assets.indexOf(group[0]))
-		.value();
+  $: assetsGroupByDate = lodash
+    .chain(assets)
+    .groupBy((a) => new Date(a.fileCreatedAt).toLocaleDateString($locale, groupDateFormat))
+    .sortBy((group) => assets.indexOf(group[0]))
+    .value();
 
-	$: geometry = (() => {
-		const geometry = [];
-		for (let group of assetsGroupByDate) {
-			const justifiedLayoutResult = justifiedLayout(group.map(getAssetRatio), {
-				boxSpacing: 2,
-				containerWidth: Math.floor(viewportWidth),
-				containerPadding: 0,
-				targetRowHeightTolerance: 0.15,
-				targetRowHeight: 235
-			});
-			geometry.push({
-				...justifiedLayoutResult,
-				containerWidth: calculateWidth(justifiedLayoutResult.boxes)
-			});
-		}
-		return geometry;
-	})();
+  $: geometry = (() => {
+    const geometry = [];
+    for (let group of assetsGroupByDate) {
+      const justifiedLayoutResult = justifiedLayout(group.map(getAssetRatio), {
+        boxSpacing: 2,
+        containerWidth: Math.floor(viewportWidth),
+        containerPadding: 0,
+        targetRowHeightTolerance: 0.15,
+        targetRowHeight: 235,
+      });
+      geometry.push({
+        ...justifiedLayoutResult,
+        containerWidth: calculateWidth(justifiedLayoutResult.boxes),
+      });
+    }
+    return geometry;
+  })();
 
-	$: {
-		if (actualBucketHeight && actualBucketHeight != 0 && actualBucketHeight != bucketHeight) {
-			const heightDelta = assetStore.updateBucketHeight(bucketDate, actualBucketHeight);
-			if (heightDelta !== 0) {
-				scrollTimeline(heightDelta);
-			}
-		}
-	}
+  $: {
+    if (actualBucketHeight && actualBucketHeight != 0 && actualBucketHeight != bucketHeight) {
+      const heightDelta = assetStore.updateBucketHeight(bucketDate, actualBucketHeight);
+      if (heightDelta !== 0) {
+        scrollTimeline(heightDelta);
+      }
+    }
+  }
 
-	function scrollTimeline(heightDelta: number) {
-		dispatch('shift', {
-			heightDelta
-		});
-	}
+  function scrollTimeline(heightDelta: number) {
+    dispatch('shift', {
+      heightDelta,
+    });
+  }
 
-	const calculateWidth = (boxes: LayoutBox[]): number => {
-		let width = 0;
-		for (const box of boxes) {
-			if (box.top < 100) {
-				width = box.left + box.width;
-			}
-		}
+  const calculateWidth = (boxes: LayoutBox[]): number => {
+    let width = 0;
+    for (const box of boxes) {
+      if (box.top < 100) {
+        width = box.left + box.width;
+      }
+    }
 
-		return width;
-	};
+    return width;
+  };
 
-	const assetClickHandler = (
-		asset: AssetResponseDto,
-		assetsInDateGroup: AssetResponseDto[],
-		dateGroupTitle: string
-	) => {
-		if (isAlbumSelectionMode) {
-			assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
-			return;
-		}
+  const assetClickHandler = (
+    asset: AssetResponseDto,
+    assetsInDateGroup: AssetResponseDto[],
+    dateGroupTitle: string,
+  ) => {
+    if (isAlbumSelectionMode) {
+      assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
+      return;
+    }
 
-		if ($isMultiSelectStoreState) {
-			assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
-		} else {
-			assetInteractionStore.setViewingAsset(asset);
-		}
-	};
+    if ($isMultiSelectStoreState) {
+      assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
+    } else {
+      assetInteractionStore.setViewingAsset(asset);
+    }
+  };
 
-	const selectAssetGroupHandler = (
-		selectAssetGroupHandler: AssetResponseDto[],
-		dateGroupTitle: string
-	) => {
-		if ($selectedGroup.has(dateGroupTitle)) {
-			assetInteractionStore.removeGroupFromMultiselectGroup(dateGroupTitle);
-			selectAssetGroupHandler.forEach((asset) => {
-				assetInteractionStore.removeAssetFromMultiselectGroup(asset);
-			});
-		} else {
-			assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
-			selectAssetGroupHandler.forEach((asset) => {
-				assetInteractionStore.addAssetToMultiselectGroup(asset);
-			});
-		}
-	};
+  const selectAssetGroupHandler = (selectAssetGroupHandler: AssetResponseDto[], dateGroupTitle: string) => {
+    if ($selectedGroup.has(dateGroupTitle)) {
+      assetInteractionStore.removeGroupFromMultiselectGroup(dateGroupTitle);
+      selectAssetGroupHandler.forEach((asset) => {
+        assetInteractionStore.removeAssetFromMultiselectGroup(asset);
+      });
+    } else {
+      assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
+      selectAssetGroupHandler.forEach((asset) => {
+        assetInteractionStore.addAssetToMultiselectGroup(asset);
+      });
+    }
+  };
 
-	const assetSelectHandler = (
-		asset: AssetResponseDto,
-		assetsInDateGroup: AssetResponseDto[],
-		dateGroupTitle: string
-	) => {
-		if ($selectedAssets.has(asset)) {
-			assetInteractionStore.removeAssetFromMultiselectGroup(asset);
-		} else {
-			assetInteractionStore.addAssetToMultiselectGroup(asset);
-		}
+  const assetSelectHandler = (
+    asset: AssetResponseDto,
+    assetsInDateGroup: AssetResponseDto[],
+    dateGroupTitle: string,
+  ) => {
+    if ($selectedAssets.has(asset)) {
+      assetInteractionStore.removeAssetFromMultiselectGroup(asset);
+    } else {
+      assetInteractionStore.addAssetToMultiselectGroup(asset);
+    }
 
-		// Check if all assets are selected in a group to toggle the group selection's icon
-		let selectedAssetsInGroupCount = 0;
-		assetsInDateGroup.forEach((asset) => {
-			if ($selectedAssets.has(asset)) {
-				selectedAssetsInGroupCount++;
-			}
-		});
+    // Check if all assets are selected in a group to toggle the group selection's icon
+    let selectedAssetsInGroupCount = 0;
+    assetsInDateGroup.forEach((asset) => {
+      if ($selectedAssets.has(asset)) {
+        selectedAssetsInGroupCount++;
+      }
+    });
 
-		// if all assets are selected in a group, add the group to selected group
-		if (selectedAssetsInGroupCount == assetsInDateGroup.length) {
-			assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
-		} else {
-			assetInteractionStore.removeGroupFromMultiselectGroup(dateGroupTitle);
-		}
-	};
+    // if all assets are selected in a group, add the group to selected group
+    if (selectedAssetsInGroupCount == assetsInDateGroup.length) {
+      assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
+    } else {
+      assetInteractionStore.removeGroupFromMultiselectGroup(dateGroupTitle);
+    }
+  };
 
-	const assetMouseEventHandler = (dateGroupTitle: string) => {
-		// Show multi select icon on hover on date group
-		hoveredDateGroup = dateGroupTitle;
-	};
+  const assetMouseEventHandler = (dateGroupTitle: string) => {
+    // Show multi select icon on hover on date group
+    hoveredDateGroup = dateGroupTitle;
+  };
 </script>
 
 <section
-	id="asset-group-by-date"
-	class="flex flex-wrap gap-x-12"
-	bind:clientHeight={actualBucketHeight}
-	bind:clientWidth={viewportWidth}
+  id="asset-group-by-date"
+  class="flex flex-wrap gap-x-12"
+  bind:clientHeight={actualBucketHeight}
+  bind:clientWidth={viewportWidth}
 >
-	{#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
-		{@const dateGroupTitle = new Date(assetsInDateGroup[0].fileCreatedAt).toLocaleDateString(
-			$locale,
-			groupDateFormat
-		)}
-		<!-- Asset Group By Date -->
+  {#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
+    {@const dateGroupTitle = new Date(assetsInDateGroup[0].fileCreatedAt).toLocaleDateString($locale, groupDateFormat)}
+    <!-- Asset Group By Date -->
 
-		<div
-			class="flex flex-col mt-5"
-			on:mouseenter={() => {
-				isMouseOverGroup = true;
-				assetMouseEventHandler(dateGroupTitle);
-			}}
-			on:mouseleave={() => (isMouseOverGroup = false)}
-		>
-			<!-- Date group title -->
-			<p
-				class="font-medium text-xs md:text-sm text-immich-fg dark:text-immich-dark-fg mb-2 flex place-items-center h-6"
-				style="width: {geometry[groupIndex].containerWidth}px"
-			>
-				{#if (hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle)}
-					<div
-						transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
-						class="inline-block px-2 hover:cursor-pointer"
-						on:click={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
-						on:keydown={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
-					>
-						{#if $selectedGroup.has(dateGroupTitle)}
-							<CheckCircle size="24" color="#4250af" />
-						{:else}
-							<CircleOutline size="24" color="#757575" />
-						{/if}
-					</div>
-				{/if}
+    <div
+      class="flex flex-col mt-5"
+      on:mouseenter={() => {
+        isMouseOverGroup = true;
+        assetMouseEventHandler(dateGroupTitle);
+      }}
+      on:mouseleave={() => (isMouseOverGroup = false)}
+    >
+      <!-- Date group title -->
+      <p
+        class="font-medium text-xs md:text-sm text-immich-fg dark:text-immich-dark-fg mb-2 flex place-items-center h-6"
+        style="width: {geometry[groupIndex].containerWidth}px"
+      >
+        {#if (hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle)}
+          <div
+            transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
+            class="inline-block px-2 hover:cursor-pointer"
+            on:click={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
+            on:keydown={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
+          >
+            {#if $selectedGroup.has(dateGroupTitle)}
+              <CheckCircle size="24" color="#4250af" />
+            {:else}
+              <CircleOutline size="24" color="#757575" />
+            {/if}
+          </div>
+        {/if}
 
-				<span class="truncate" title={dateGroupTitle}>
-					{dateGroupTitle}
-				</span>
-			</p>
+        <span class="truncate" title={dateGroupTitle}>
+          {dateGroupTitle}
+        </span>
+      </p>
 
-			<!-- Image grid -->
-			<div
-				class="relative"
-				style="height: {geometry[groupIndex].containerHeight}px;width: {geometry[groupIndex]
-					.containerWidth}px"
-			>
-				{#each assetsInDateGroup as asset, index (asset.id)}
-					{@const box = geometry[groupIndex].boxes[index]}
-					<div
-						class="absolute"
-						style="width: {box.width}px; height: {box.height}px; top: {box.top}px; left: {box.left}px"
-					>
-						<Thumbnail
-							{asset}
-							{groupIndex}
-							on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)}
-							on:select={() => assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle)}
-							on:mouse-event={() => assetMouseEventHandler(dateGroupTitle)}
-							selected={$selectedAssets.has(asset) ||
-								$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1}
-							disabled={$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1}
-							thumbnailWidth={box.width}
-							thumbnailHeight={box.height}
-						/>
-					</div>
-				{/each}
-			</div>
-		</div>
-	{/each}
+      <!-- Image grid -->
+      <div
+        class="relative"
+        style="height: {geometry[groupIndex].containerHeight}px;width: {geometry[groupIndex].containerWidth}px"
+      >
+        {#each assetsInDateGroup as asset, index (asset.id)}
+          {@const box = geometry[groupIndex].boxes[index]}
+          <div
+            class="absolute"
+            style="width: {box.width}px; height: {box.height}px; top: {box.top}px; left: {box.left}px"
+          >
+            <Thumbnail
+              {asset}
+              {groupIndex}
+              on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)}
+              on:select={() => assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle)}
+              on:mouse-event={() => assetMouseEventHandler(dateGroupTitle)}
+              selected={$selectedAssets.has(asset) || $assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1}
+              disabled={$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1}
+              thumbnailWidth={box.width}
+              thumbnailHeight={box.height}
+            />
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/each}
 </section>
 
 <style>
-	#asset-group-by-date {
-		contain: layout;
-	}
+  #asset-group-by-date {
+    contain: layout;
+  }
 </style>
diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index 1a7387577..7e7b7979d 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@@ -1,190 +1,190 @@
 <script lang="ts">
-	import {
-		assetInteractionStore,
-		isViewingAssetStoreState,
-		viewingAssetStoreState
-	} from '$lib/stores/asset-interaction.store';
-	import { assetGridState, assetStore, loadingBucketState } from '$lib/stores/assets.store';
-	import type { UserResponseDto } from '@api';
-	import { AssetCountByTimeBucketResponseDto, AssetResponseDto, TimeGroupEnum, api } from '@api';
-	import { onDestroy, onMount } from 'svelte';
-	import AssetViewer from '../asset-viewer/asset-viewer.svelte';
-	import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
-	import Portal from '../shared-components/portal/portal.svelte';
-	import Scrollbar, {
-		OnScrollbarClickDetail,
-		OnScrollbarDragDetail
-	} from '../shared-components/scrollbar/scrollbar.svelte';
-	import AssetDateGroup from './asset-date-group.svelte';
-	import { BucketPosition } from '$lib/models/asset-grid-state';
-	import MemoryLane from './memory-lane.svelte';
+  import {
+    assetInteractionStore,
+    isViewingAssetStoreState,
+    viewingAssetStoreState,
+  } from '$lib/stores/asset-interaction.store';
+  import { assetGridState, assetStore, loadingBucketState } from '$lib/stores/assets.store';
+  import type { UserResponseDto } from '@api';
+  import { AssetCountByTimeBucketResponseDto, AssetResponseDto, TimeGroupEnum, api } from '@api';
+  import { onDestroy, onMount } from 'svelte';
+  import AssetViewer from '../asset-viewer/asset-viewer.svelte';
+  import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
+  import Portal from '../shared-components/portal/portal.svelte';
+  import Scrollbar, {
+    OnScrollbarClickDetail,
+    OnScrollbarDragDetail,
+  } from '../shared-components/scrollbar/scrollbar.svelte';
+  import AssetDateGroup from './asset-date-group.svelte';
+  import { BucketPosition } from '$lib/models/asset-grid-state';
+  import MemoryLane from './memory-lane.svelte';
 
-	export let user: UserResponseDto | undefined = undefined;
-	export let isAlbumSelectionMode = false;
-	export let showMemoryLane = false;
+  export let user: UserResponseDto | undefined = undefined;
+  export let isAlbumSelectionMode = false;
+  export let showMemoryLane = false;
 
-	let viewportHeight = 0;
-	let viewportWidth = 0;
-	let assetGridElement: HTMLElement;
-	let bucketInfo: AssetCountByTimeBucketResponseDto;
+  let viewportHeight = 0;
+  let viewportWidth = 0;
+  let assetGridElement: HTMLElement;
+  let bucketInfo: AssetCountByTimeBucketResponseDto;
 
-	onMount(async () => {
-		const { data: assetCountByTimebucket } = await api.assetApi.getAssetCountByTimeBucket({
-			getAssetCountByTimeBucketDto: {
-				timeGroup: TimeGroupEnum.Month,
-				userId: user?.id,
-				withoutThumbs: true
-			}
-		});
+  onMount(async () => {
+    const { data: assetCountByTimebucket } = await api.assetApi.getAssetCountByTimeBucket({
+      getAssetCountByTimeBucketDto: {
+        timeGroup: TimeGroupEnum.Month,
+        userId: user?.id,
+        withoutThumbs: true,
+      },
+    });
 
-		bucketInfo = assetCountByTimebucket;
+    bucketInfo = assetCountByTimebucket;
 
-		assetStore.setInitialState(viewportHeight, viewportWidth, assetCountByTimebucket, user?.id);
+    assetStore.setInitialState(viewportHeight, viewportWidth, assetCountByTimebucket, user?.id);
 
-		// Get asset bucket if bucket height is smaller than viewport height
-		let bucketsToFetchInitially: string[] = [];
-		let initialBucketsHeight = 0;
-		$assetGridState.buckets.every((bucket) => {
-			if (initialBucketsHeight < viewportHeight) {
-				initialBucketsHeight += bucket.bucketHeight;
-				bucketsToFetchInitially.push(bucket.bucketDate);
-				return true;
-			} else {
-				return false;
-			}
-		});
+    // Get asset bucket if bucket height is smaller than viewport height
+    let bucketsToFetchInitially: string[] = [];
+    let initialBucketsHeight = 0;
+    $assetGridState.buckets.every((bucket) => {
+      if (initialBucketsHeight < viewportHeight) {
+        initialBucketsHeight += bucket.bucketHeight;
+        bucketsToFetchInitially.push(bucket.bucketDate);
+        return true;
+      } else {
+        return false;
+      }
+    });
 
-		bucketsToFetchInitially.forEach((bucketDate) => {
-			assetStore.getAssetsByBucket(bucketDate, BucketPosition.Visible);
-		});
-	});
+    bucketsToFetchInitially.forEach((bucketDate) => {
+      assetStore.getAssetsByBucket(bucketDate, BucketPosition.Visible);
+    });
+  });
 
-	onDestroy(() => {
-		assetStore.setInitialState(0, 0, { totalCount: 0, buckets: [] }, undefined);
-	});
+  onDestroy(() => {
+    assetStore.setInitialState(0, 0, { totalCount: 0, buckets: [] }, undefined);
+  });
 
-	function intersectedHandler(event: CustomEvent) {
-		const el = event.detail.container as HTMLElement;
-		const target = el.firstChild as HTMLElement;
-		if (target) {
-			const bucketDate = target.id.split('_')[1];
-			assetStore.getAssetsByBucket(bucketDate, event.detail.position);
-		}
-	}
+  function intersectedHandler(event: CustomEvent) {
+    const el = event.detail.container as HTMLElement;
+    const target = el.firstChild as HTMLElement;
+    if (target) {
+      const bucketDate = target.id.split('_')[1];
+      assetStore.getAssetsByBucket(bucketDate, event.detail.position);
+    }
+  }
 
-	function handleScrollTimeline(event: CustomEvent) {
-		assetGridElement.scrollBy(0, event.detail.heightDelta);
-	}
+  function handleScrollTimeline(event: CustomEvent) {
+    assetGridElement.scrollBy(0, event.detail.heightDelta);
+  }
 
-	const navigateToPreviousAsset = () => {
-		assetInteractionStore.navigateAsset('previous');
-	};
+  const navigateToPreviousAsset = () => {
+    assetInteractionStore.navigateAsset('previous');
+  };
 
-	const navigateToNextAsset = () => {
-		assetInteractionStore.navigateAsset('next');
-	};
+  const navigateToNextAsset = () => {
+    assetInteractionStore.navigateAsset('next');
+  };
 
-	let lastScrollPosition = 0;
-	let animationTick = false;
+  let lastScrollPosition = 0;
+  let animationTick = false;
 
-	const handleTimelineScroll = () => {
-		if (!animationTick) {
-			window.requestAnimationFrame(() => {
-				lastScrollPosition = assetGridElement?.scrollTop;
-				animationTick = false;
-			});
+  const handleTimelineScroll = () => {
+    if (!animationTick) {
+      window.requestAnimationFrame(() => {
+        lastScrollPosition = assetGridElement?.scrollTop;
+        animationTick = false;
+      });
 
-			animationTick = true;
-		}
-	};
+      animationTick = true;
+    }
+  };
 
-	const handleScrollbarClick = (e: OnScrollbarClickDetail) => {
-		assetGridElement.scrollTop = e.scrollTo;
-	};
+  const handleScrollbarClick = (e: OnScrollbarClickDetail) => {
+    assetGridElement.scrollTop = e.scrollTo;
+  };
 
-	const handleScrollbarDrag = (e: OnScrollbarDragDetail) => {
-		assetGridElement.scrollTop = e.scrollTo;
-	};
+  const handleScrollbarDrag = (e: OnScrollbarDragDetail) => {
+    assetGridElement.scrollTop = e.scrollTo;
+  };
 
-	const handleArchiveSuccess = (e: CustomEvent) => {
-		const asset = e.detail as AssetResponseDto;
-		navigateToNextAsset();
-		assetStore.removeAsset(asset.id);
-	};
+  const handleArchiveSuccess = (e: CustomEvent) => {
+    const asset = e.detail as AssetResponseDto;
+    navigateToNextAsset();
+    assetStore.removeAsset(asset.id);
+  };
 </script>
 
 {#if bucketInfo && viewportHeight && $assetGridState.timelineHeight > viewportHeight}
-	<Scrollbar
-		scrollbarHeight={viewportHeight}
-		scrollTop={lastScrollPosition}
-		on:onscrollbarclick={(e) => handleScrollbarClick(e.detail)}
-		on:onscrollbardrag={(e) => handleScrollbarDrag(e.detail)}
-	/>
+  <Scrollbar
+    scrollbarHeight={viewportHeight}
+    scrollTop={lastScrollPosition}
+    on:onscrollbarclick={(e) => handleScrollbarClick(e.detail)}
+    on:onscrollbardrag={(e) => handleScrollbarDrag(e.detail)}
+  />
 {/if}
 
 <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
 <section
-	id="asset-grid"
-	class="overflow-y-auto ml-4 mb-4 mr-[60px] scrollbar-hidden"
-	bind:clientHeight={viewportHeight}
-	bind:clientWidth={viewportWidth}
-	bind:this={assetGridElement}
-	on:scroll={handleTimelineScroll}
+  id="asset-grid"
+  class="overflow-y-auto ml-4 mb-4 mr-[60px] scrollbar-hidden"
+  bind:clientHeight={viewportHeight}
+  bind:clientWidth={viewportWidth}
+  bind:this={assetGridElement}
+  on:scroll={handleTimelineScroll}
 >
-	{#if assetGridElement}
-		{#if showMemoryLane}
-			<MemoryLane />
-		{/if}
-		<section id="virtual-timeline" style:height={$assetGridState.timelineHeight + 'px'}>
-			{#each $assetGridState.buckets as bucket, bucketIndex (bucketIndex)}
-				<IntersectionObserver
-					on:intersected={intersectedHandler}
-					on:hidden={async () => {
-						// If bucket is hidden and in loading state, cancel the request
-						if ($loadingBucketState[bucket.bucketDate]) {
-							await assetStore.cancelBucketRequest(bucket.cancelToken, bucket.bucketDate);
-						}
-					}}
-					let:intersecting
-					top={750}
-					bottom={750}
-					root={assetGridElement}
-				>
-					<div id={'bucket_' + bucket.bucketDate} style:height={bucket.bucketHeight + 'px'}>
-						{#if intersecting}
-							<AssetDateGroup
-								{isAlbumSelectionMode}
-								on:shift={handleScrollTimeline}
-								assets={bucket.assets}
-								bucketDate={bucket.bucketDate}
-								bucketHeight={bucket.bucketHeight}
-								{viewportWidth}
-							/>
-						{/if}
-					</div>
-				</IntersectionObserver>
-			{/each}
-		</section>
-	{/if}
+  {#if assetGridElement}
+    {#if showMemoryLane}
+      <MemoryLane />
+    {/if}
+    <section id="virtual-timeline" style:height={$assetGridState.timelineHeight + 'px'}>
+      {#each $assetGridState.buckets as bucket, bucketIndex (bucketIndex)}
+        <IntersectionObserver
+          on:intersected={intersectedHandler}
+          on:hidden={async () => {
+            // If bucket is hidden and in loading state, cancel the request
+            if ($loadingBucketState[bucket.bucketDate]) {
+              await assetStore.cancelBucketRequest(bucket.cancelToken, bucket.bucketDate);
+            }
+          }}
+          let:intersecting
+          top={750}
+          bottom={750}
+          root={assetGridElement}
+        >
+          <div id={'bucket_' + bucket.bucketDate} style:height={bucket.bucketHeight + 'px'}>
+            {#if intersecting}
+              <AssetDateGroup
+                {isAlbumSelectionMode}
+                on:shift={handleScrollTimeline}
+                assets={bucket.assets}
+                bucketDate={bucket.bucketDate}
+                bucketHeight={bucket.bucketHeight}
+                {viewportWidth}
+              />
+            {/if}
+          </div>
+        </IntersectionObserver>
+      {/each}
+    </section>
+  {/if}
 </section>
 
 <Portal target="body">
-	{#if $isViewingAssetStoreState}
-		<AssetViewer
-			asset={$viewingAssetStoreState}
-			on:navigate-previous={navigateToPreviousAsset}
-			on:navigate-next={navigateToNextAsset}
-			on:close={() => {
-				assetInteractionStore.setIsViewingAsset(false);
-			}}
-			on:archived={handleArchiveSuccess}
-		/>
-	{/if}
+  {#if $isViewingAssetStoreState}
+    <AssetViewer
+      asset={$viewingAssetStoreState}
+      on:navigate-previous={navigateToPreviousAsset}
+      on:navigate-next={navigateToNextAsset}
+      on:close={() => {
+        assetInteractionStore.setIsViewingAsset(false);
+      }}
+      on:archived={handleArchiveSuccess}
+    />
+  {/if}
 </Portal>
 
 <style>
-	#asset-grid {
-		contain: layout;
-		scrollbar-width: none;
-	}
+  #asset-grid {
+    contain: layout;
+    scrollbar-width: none;
+  }
 </style>
diff --git a/web/src/lib/components/photos-page/asset-select-context-menu.svelte b/web/src/lib/components/photos-page/asset-select-context-menu.svelte
index b5f9e6348..9bfb493cf 100644
--- a/web/src/lib/components/photos-page/asset-select-context-menu.svelte
+++ b/web/src/lib/components/photos-page/asset-select-context-menu.svelte
@@ -1,35 +1,35 @@
 <script lang="ts" context="module">
-	import { createContext } from '$lib/utils/context';
+  import { createContext } from '$lib/utils/context';
 
-	const { get: getMenuContext, set: setContext } = createContext<() => void>();
-	export { getMenuContext };
+  const { get: getMenuContext, set: setContext } = createContext<() => void>();
+  export { getMenuContext };
 </script>
 
 <script lang="ts">
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
-	import type Icon from 'svelte-material-icons/AbTesting.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+  import type Icon from 'svelte-material-icons/AbTesting.svelte';
 
-	export let icon: typeof Icon;
-	export let title: string;
+  export let icon: typeof Icon;
+  export let title: string;
 
-	let showContextMenu = false;
-	let contextMenuPosition = { x: 0, y: 0 };
+  let showContextMenu = false;
+  let contextMenuPosition = { x: 0, y: 0 };
 
-	const handleShowMenu = ({ x, y }: MouseEvent) => {
-		contextMenuPosition = { x, y };
-		showContextMenu = !showContextMenu;
-	};
+  const handleShowMenu = ({ x, y }: MouseEvent) => {
+    contextMenuPosition = { x, y };
+    showContextMenu = !showContextMenu;
+  };
 
-	setContext(() => (showContextMenu = false));
+  setContext(() => (showContextMenu = false));
 </script>
 
 <CircleIconButton {title} logo={icon} on:click={handleShowMenu} />
 
 {#if showContextMenu}
-	<ContextMenu {...contextMenuPosition} on:outclick={() => (showContextMenu = false)}>
-		<div class="flex flex-col rounded-lg">
-			<slot />
-		</div>
-	</ContextMenu>
+  <ContextMenu {...contextMenuPosition} on:outclick={() => (showContextMenu = false)}>
+    <div class="flex flex-col rounded-lg">
+      <slot />
+    </div>
+  </ContextMenu>
 {/if}
diff --git a/web/src/lib/components/photos-page/asset-select-control-bar.svelte b/web/src/lib/components/photos-page/asset-select-control-bar.svelte
index 3e0f4bcca..98c522938 100644
--- a/web/src/lib/components/photos-page/asset-select-control-bar.svelte
+++ b/web/src/lib/components/photos-page/asset-select-control-bar.svelte
@@ -1,39 +1,35 @@
 <script lang="ts" context="module">
-	import { createContext } from '$lib/utils/context';
+  import { createContext } from '$lib/utils/context';
 
-	export type OnAssetDelete = (assetId: string) => void;
-	export type OnAssetArchive = (asset: AssetResponseDto, archived: boolean) => void;
-	export type OnAssetFavorite = (asset: AssetResponseDto, favorite: boolean) => void;
+  export type OnAssetDelete = (assetId: string) => void;
+  export type OnAssetArchive = (asset: AssetResponseDto, archived: boolean) => void;
+  export type OnAssetFavorite = (asset: AssetResponseDto, favorite: boolean) => void;
 
-	export interface AssetControlContext {
-		// Wrap assets in a function, because context isn't reactive.
-		getAssets: () => Set<AssetResponseDto>;
-		clearSelect: () => void;
-	}
+  export interface AssetControlContext {
+    // Wrap assets in a function, because context isn't reactive.
+    getAssets: () => Set<AssetResponseDto>;
+    clearSelect: () => void;
+  }
 
-	const { get: getAssetControlContext, set: setContext } = createContext<AssetControlContext>();
-	export { getAssetControlContext };
+  const { get: getAssetControlContext, set: setContext } = createContext<AssetControlContext>();
+  export { getAssetControlContext };
 </script>
 
 <script lang="ts">
-	import { locale } from '$lib/stores/preferences.store';
-	import type { AssetResponseDto } from '@api';
-	import Close from 'svelte-material-icons/Close.svelte';
-	import ControlAppBar from '../shared-components/control-app-bar.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import type { AssetResponseDto } from '@api';
+  import Close from 'svelte-material-icons/Close.svelte';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';
 
-	export let assets: Set<AssetResponseDto>;
-	export let clearSelect: () => void;
+  export let assets: Set<AssetResponseDto>;
+  export let clearSelect: () => void;
 
-	setContext({ getAssets: () => assets, clearSelect });
+  setContext({ getAssets: () => assets, clearSelect });
 </script>
 
-<ControlAppBar
-	on:close-button-click={clearSelect}
-	backIcon={Close}
-	tailwindClasses="bg-white shadow-md"
->
-	<p class="font-medium text-immich-primary dark:text-immich-dark-primary" slot="leading">
-		Selected {assets.size.toLocaleString($locale)}
-	</p>
-	<slot slot="trailing" />
+<ControlAppBar on:close-button-click={clearSelect} backIcon={Close} tailwindClasses="bg-white shadow-md">
+  <p class="font-medium text-immich-primary dark:text-immich-dark-primary" slot="leading">
+    Selected {assets.size.toLocaleString($locale)}
+  </p>
+  <slot slot="trailing" />
 </ControlAppBar>
diff --git a/web/src/lib/components/photos-page/memory-lane.svelte b/web/src/lib/components/photos-page/memory-lane.svelte
index 843a38ea9..15d20ff02 100644
--- a/web/src/lib/components/photos-page/memory-lane.svelte
+++ b/web/src/lib/components/photos-page/memory-lane.svelte
@@ -1,95 +1,95 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { DateTime } from 'luxon';
-	import { api } from '@api';
-	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
-	import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
-	import { memoryStore } from '$lib/stores/memory.store';
-	import { goto } from '$app/navigation';
-	import { fade } from 'svelte/transition';
+  import { onMount } from 'svelte';
+  import { DateTime } from 'luxon';
+  import { api } from '@api';
+  import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
+  import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
+  import { memoryStore } from '$lib/stores/memory.store';
+  import { goto } from '$app/navigation';
+  import { fade } from 'svelte/transition';
 
-	$: shouldRender = $memoryStore?.length > 0;
+  $: shouldRender = $memoryStore?.length > 0;
 
-	onMount(async () => {
-		const { data } = await api.assetApi.getMemoryLane({
-			timestamp: DateTime.local().startOf('day').toISO() || ''
-		});
-		$memoryStore = data;
-	});
+  onMount(async () => {
+    const { data } = await api.assetApi.getMemoryLane({
+      timestamp: DateTime.local().startOf('day').toISO() || '',
+    });
+    $memoryStore = data;
+  });
 
-	let memoryLaneElement: HTMLElement;
-	let offsetWidth = 0;
-	let innerWidth = 0;
+  let memoryLaneElement: HTMLElement;
+  let offsetWidth = 0;
+  let innerWidth = 0;
 
-	let scrollLeftPosition = 0;
+  let scrollLeftPosition = 0;
 
-	const onScroll = () => (scrollLeftPosition = memoryLaneElement?.scrollLeft);
+  const onScroll = () => (scrollLeftPosition = memoryLaneElement?.scrollLeft);
 
-	$: canScrollLeft = scrollLeftPosition > 0;
-	$: canScrollRight = Math.ceil(scrollLeftPosition) < innerWidth - offsetWidth;
+  $: canScrollLeft = scrollLeftPosition > 0;
+  $: canScrollRight = Math.ceil(scrollLeftPosition) < innerWidth - offsetWidth;
 
-	const scrollBy = 400;
-	const scrollLeft = () => memoryLaneElement.scrollBy({ left: -scrollBy, behavior: 'smooth' });
-	const scrollRight = () => memoryLaneElement.scrollBy({ left: scrollBy, behavior: 'smooth' });
+  const scrollBy = 400;
+  const scrollLeft = () => memoryLaneElement.scrollBy({ left: -scrollBy, behavior: 'smooth' });
+  const scrollRight = () => memoryLaneElement.scrollBy({ left: scrollBy, behavior: 'smooth' });
 </script>
 
 {#if shouldRender}
-	<section
-		id="memory-lane"
-		bind:this={memoryLaneElement}
-		class="relative overflow-x-hidden whitespace-nowrap mt-5 transition-all"
-		bind:offsetWidth
-		on:scroll={onScroll}
-	>
-		{#if canScrollLeft || canScrollRight}
-			<div class="sticky left-0 z-20">
-				{#if canScrollLeft}
-					<div class="absolute left-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
-						<button
-							class="rounded-full opacity-50 hover:opacity-100 p-2 border border-gray-500 bg-gray-100 text-gray-500"
-							on:click={scrollLeft}
-						>
-							<ChevronLeft size="36" /></button
-						>
-					</div>
-				{/if}
-				{#if canScrollRight}
-					<div class="absolute right-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
-						<button
-							class="rounded-full opacity-50 hover:opacity-100 p-2 border border-gray-500 bg-gray-100 text-gray-500"
-							on:click={scrollRight}
-						>
-							<ChevronRight size="36" /></button
-						>
-					</div>
-				{/if}
-			</div>
-		{/if}
+  <section
+    id="memory-lane"
+    bind:this={memoryLaneElement}
+    class="relative overflow-x-hidden whitespace-nowrap mt-5 transition-all"
+    bind:offsetWidth
+    on:scroll={onScroll}
+  >
+    {#if canScrollLeft || canScrollRight}
+      <div class="sticky left-0 z-20">
+        {#if canScrollLeft}
+          <div class="absolute left-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
+            <button
+              class="rounded-full opacity-50 hover:opacity-100 p-2 border border-gray-500 bg-gray-100 text-gray-500"
+              on:click={scrollLeft}
+            >
+              <ChevronLeft size="36" /></button
+            >
+          </div>
+        {/if}
+        {#if canScrollRight}
+          <div class="absolute right-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
+            <button
+              class="rounded-full opacity-50 hover:opacity-100 p-2 border border-gray-500 bg-gray-100 text-gray-500"
+              on:click={scrollRight}
+            >
+              <ChevronRight size="36" /></button
+            >
+          </div>
+        {/if}
+      </div>
+    {/if}
 
-		<div class="inline-block" bind:offsetWidth={innerWidth}>
-			{#each $memoryStore as memory, i (memory.title)}
-				<button
-					class="memory-card relative inline-block mr-8 rounded-xl aspect-video h-[215px]"
-					on:click={() => goto(`/memory?memory=${i}`)}
-				>
-					<img
-						class="rounded-xl h-full w-full object-cover"
-						src={api.getAssetThumbnailUrl(memory.assets[0].id, 'JPEG')}
-						alt={memory.title}
-						draggable="false"
-					/>
-					<p class="absolute bottom-2 left-4 text-lg text-white z-10">{memory.title}</p>
-					<div
-						class="absolute top-0 left-0 w-full h-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent z-0 hover:bg-black/20 transition-all"
-					/>
-				</button>
-			{/each}
-		</div>
-	</section>
+    <div class="inline-block" bind:offsetWidth={innerWidth}>
+      {#each $memoryStore as memory, i (memory.title)}
+        <button
+          class="memory-card relative inline-block mr-8 rounded-xl aspect-video h-[215px]"
+          on:click={() => goto(`/memory?memory=${i}`)}
+        >
+          <img
+            class="rounded-xl h-full w-full object-cover"
+            src={api.getAssetThumbnailUrl(memory.assets[0].id, 'JPEG')}
+            alt={memory.title}
+            draggable="false"
+          />
+          <p class="absolute bottom-2 left-4 text-lg text-white z-10">{memory.title}</p>
+          <div
+            class="absolute top-0 left-0 w-full h-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent z-0 hover:bg-black/20 transition-all"
+          />
+        </button>
+      {/each}
+    </div>
+  </section>
 {/if}
 
 <style>
-	.memory-card {
-		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
-	}
+  .memory-card {
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+  }
 </style>
diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte
index 97e123bf6..aa16f1b45 100644
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte
@@ -1,133 +1,116 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
-	import { downloadArchive } from '$lib/utils/asset-utils';
-	import { api, AssetResponseDto, SharedLinkResponseDto } from '@api';
-	import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-	import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
-	import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.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 SelectAll from 'svelte-material-icons/SelectAll.svelte';
-	import ImmichLogo from '../shared-components/immich-logo.svelte';
+  import { goto } from '$app/navigation';
+  import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
+  import { downloadArchive } from '$lib/utils/asset-utils';
+  import { api, AssetResponseDto, SharedLinkResponseDto } from '@api';
+  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
+  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+  import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
+  import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.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 SelectAll from 'svelte-material-icons/SelectAll.svelte';
+  import ImmichLogo from '../shared-components/immich-logo.svelte';
 
-	import {
-		notificationController,
-		NotificationType
-	} from '../shared-components/notification/notification';
-	import { handleError } from '../../utils/handle-error';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import { handleError } from '../../utils/handle-error';
 
-	export let sharedLink: SharedLinkResponseDto;
-	export let isOwned: boolean;
+  export let sharedLink: SharedLinkResponseDto;
+  export let isOwned: boolean;
 
-	let selectedAssets: Set<AssetResponseDto> = new Set();
+  let selectedAssets: Set<AssetResponseDto> = new Set();
 
-	$: assets = sharedLink.assets;
-	$: isMultiSelectionMode = selectedAssets.size > 0;
+  $: assets = sharedLink.assets;
+  $: isMultiSelectionMode = selectedAssets.size > 0;
 
-	dragAndDropFilesStore.subscribe((value) => {
-		if (value.isDragging && value.files.length > 0) {
-			handleUploadAssets(value.files);
-			dragAndDropFilesStore.set({ isDragging: false, files: [] });
-		}
-	});
+  dragAndDropFilesStore.subscribe((value) => {
+    if (value.isDragging && value.files.length > 0) {
+      handleUploadAssets(value.files);
+      dragAndDropFilesStore.set({ isDragging: false, files: [] });
+    }
+  });
 
-	const downloadAssets = async () => {
-		await downloadArchive(
-			`immich-shared.zip`,
-			{ assetIds: assets.map((asset) => asset.id) },
-			undefined,
-			sharedLink.key
-		);
-	};
+  const downloadAssets = async () => {
+    await downloadArchive(
+      `immich-shared.zip`,
+      { assetIds: assets.map((asset) => asset.id) },
+      undefined,
+      sharedLink.key,
+    );
+  };
 
-	const handleUploadAssets = async (files: File[] = []) => {
-		try {
-			let results: (string | undefined)[] = [];
-			if (!files || files.length === 0 || !Array.isArray(files)) {
-				results = await openFileUploadDialog(undefined, sharedLink.key);
-			} else {
-				results = await fileUploadHandler(files, undefined, sharedLink.key);
-			}
-			const { data } = await api.sharedLinkApi.addSharedLinkAssets({
-				id: sharedLink.id,
-				assetIdsDto: {
-					assetIds: results.filter((id) => !!id) as string[]
-				},
-				key: sharedLink.key
-			});
+  const handleUploadAssets = async (files: File[] = []) => {
+    try {
+      let results: (string | undefined)[] = [];
+      if (!files || files.length === 0 || !Array.isArray(files)) {
+        results = await openFileUploadDialog(undefined, sharedLink.key);
+      } else {
+        results = await fileUploadHandler(files, undefined, sharedLink.key);
+      }
+      const { data } = await api.sharedLinkApi.addSharedLinkAssets({
+        id: sharedLink.id,
+        assetIdsDto: {
+          assetIds: results.filter((id) => !!id) as string[],
+        },
+        key: sharedLink.key,
+      });
 
-			const added = data.filter((item) => item.success).length;
+      const added = data.filter((item) => item.success).length;
 
-			notificationController.show({
-				message: `Added ${added} assets`,
-				type: NotificationType.Info
-			});
-		} catch (e) {
-			handleError(e, 'Unable to add assets to shared link');
-		}
-	};
+      notificationController.show({
+        message: `Added ${added} assets`,
+        type: NotificationType.Info,
+      });
+    } catch (e) {
+      handleError(e, 'Unable to add assets to shared link');
+    }
+  };
 
-	const handleSelectAll = () => {
-		selectedAssets = new Set(assets);
-	};
+  const handleSelectAll = () => {
+    selectedAssets = new Set(assets);
+  };
 </script>
 
 <section class="bg-immich-bg dark:bg-immich-dark-bg">
-	{#if isMultiSelectionMode}
-		<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
-			<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
-			{#if sharedLink?.allowDownload}
-				<DownloadAction filename="immich-shared.zip" sharedLinkKey={sharedLink.key} />
-			{/if}
-			{#if isOwned}
-				<RemoveFromSharedLink bind:sharedLink />
-			{/if}
-		</AssetSelectControlBar>
-	{:else}
-		<ControlAppBar
-			on:close-button-click={() => goto('/photos')}
-			backIcon={ArrowLeft}
-			showBackButton={false}
-		>
-			<svelte:fragment slot="leading">
-				<a
-					data-sveltekit-preload-data="hover"
-					class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
-					href="https://immich.app"
-				>
-					<ImmichLogo height="30" width="30" />
-					<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">
-						IMMICH
-					</h1>
-				</a>
-			</svelte:fragment>
+  {#if isMultiSelectionMode}
+    <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
+      <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
+      {#if sharedLink?.allowDownload}
+        <DownloadAction filename="immich-shared.zip" sharedLinkKey={sharedLink.key} />
+      {/if}
+      {#if isOwned}
+        <RemoveFromSharedLink bind:sharedLink />
+      {/if}
+    </AssetSelectControlBar>
+  {:else}
+    <ControlAppBar on:close-button-click={() => goto('/photos')} backIcon={ArrowLeft} showBackButton={false}>
+      <svelte:fragment slot="leading">
+        <a
+          data-sveltekit-preload-data="hover"
+          class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
+          href="https://immich.app"
+        >
+          <ImmichLogo height="30" width="30" />
+          <h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">IMMICH</h1>
+        </a>
+      </svelte:fragment>
 
-			<svelte:fragment slot="trailing">
-				{#if sharedLink?.allowUpload}
-					<CircleIconButton
-						title="Add Photos"
-						on:click={() => handleUploadAssets()}
-						logo={FileImagePlusOutline}
-					/>
-				{/if}
+      <svelte:fragment slot="trailing">
+        {#if sharedLink?.allowUpload}
+          <CircleIconButton title="Add Photos" on:click={() => handleUploadAssets()} logo={FileImagePlusOutline} />
+        {/if}
 
-				{#if sharedLink?.allowDownload}
-					<CircleIconButton
-						title="Download"
-						on:click={downloadAssets}
-						logo={FolderDownloadOutline}
-					/>
-				{/if}
-			</svelte:fragment>
-		</ControlAppBar>
-	{/if}
-	<section class="flex flex-col my-[160px] px-6 sm:px-12 md:px-24 lg:px-40">
-		<GalleryViewer {assets} {sharedLink} bind:selectedAssets viewFrom="shared-link-page" />
-	</section>
+        {#if sharedLink?.allowDownload}
+          <CircleIconButton title="Download" on:click={downloadAssets} logo={FolderDownloadOutline} />
+        {/if}
+      </svelte:fragment>
+    </ControlAppBar>
+  {/if}
+  <section class="flex flex-col my-[160px] px-6 sm:px-12 md:px-24 lg:px-40">
+    <GalleryViewer {assets} {sharedLink} bind:selectedAssets viewFrom="shared-link-page" />
+  </section>
 </section>
diff --git a/web/src/lib/components/shared-components/album-selection-modal.svelte b/web/src/lib/components/shared-components/album-selection-modal.svelte
index f63c22bb1..1019a9e33 100644
--- a/web/src/lib/components/shared-components/album-selection-modal.svelte
+++ b/web/src/lib/components/shared-components/album-selection-modal.svelte
@@ -1,121 +1,117 @@
 <script lang="ts">
-	import { AlbumResponseDto, api } from '@api';
-	import { createEventDispatcher, onMount } from 'svelte';
-	import Plus from 'svelte-material-icons/Plus.svelte';
-	import BaseModal from './base-modal.svelte';
-	import AlbumListItem from '../asset-viewer/album-list-item.svelte';
+  import { AlbumResponseDto, api } from '@api';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import Plus from 'svelte-material-icons/Plus.svelte';
+  import BaseModal from './base-modal.svelte';
+  import AlbumListItem from '../asset-viewer/album-list-item.svelte';
 
-	let albums: AlbumResponseDto[] = [];
-	let recentAlbums: AlbumResponseDto[] = [];
-	let filteredAlbums: AlbumResponseDto[] = [];
-	let loading = true;
-	let search = '';
+  let albums: AlbumResponseDto[] = [];
+  let recentAlbums: AlbumResponseDto[] = [];
+  let filteredAlbums: AlbumResponseDto[] = [];
+  let loading = true;
+  let search = '';
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	export let shared: boolean;
+  export let shared: boolean;
 
-	onMount(async () => {
-		const { data } = await api.albumApi.getAllAlbums({ shared: shared || undefined });
-		albums = data;
+  onMount(async () => {
+    const { data } = await api.albumApi.getAllAlbums({ shared: shared || undefined });
+    albums = data;
 
-		recentAlbums = albums
-			.sort((a, b) => (new Date(a.createdAt) > new Date(b.createdAt) ? -1 : 1))
-			.slice(0, 3);
+    recentAlbums = albums.sort((a, b) => (new Date(a.createdAt) > new Date(b.createdAt) ? -1 : 1)).slice(0, 3);
 
-		loading = false;
-	});
+    loading = false;
+  });
 
-	$: {
-		if (search.length > 0 && albums.length > 0) {
-			filteredAlbums = albums.filter((album) => {
-				return album.albumName.toLowerCase().includes(search.toLowerCase());
-			});
-		} else {
-			filteredAlbums = albums;
-		}
-	}
+  $: {
+    if (search.length > 0 && albums.length > 0) {
+      filteredAlbums = albums.filter((album) => {
+        return album.albumName.toLowerCase().includes(search.toLowerCase());
+      });
+    } else {
+      filteredAlbums = albums;
+    }
+  }
 
-	const handleSelect = (album: AlbumResponseDto) => {
-		dispatch('album', { album });
-	};
+  const handleSelect = (album: AlbumResponseDto) => {
+    dispatch('album', { album });
+  };
 
-	const handleNew = () => {
-		if (shared) {
-			dispatch('newAlbum', { albumName: search.length > 0 ? search : 'Untitled' });
-		} else {
-			dispatch('newSharedAlbum', { albumName: search.length > 0 ? search : 'Untitled' });
-		}
-	};
+  const handleNew = () => {
+    if (shared) {
+      dispatch('newAlbum', { albumName: search.length > 0 ? search : 'Untitled' });
+    } else {
+      dispatch('newSharedAlbum', { albumName: search.length > 0 ? search : 'Untitled' });
+    }
+  };
 </script>
 
 <BaseModal on:close={() => dispatch('close')}>
-	<svelte:fragment slot="title">
-		<span class="flex gap-2 place-items-center">
-			<p class="font-medium">
-				Add to {#if shared}Shared {/if} Album
-			</p>
-		</span>
-	</svelte:fragment>
+  <svelte:fragment slot="title">
+    <span class="flex gap-2 place-items-center">
+      <p class="font-medium">
+        Add to {#if shared}Shared {/if} Album
+      </p>
+    </span>
+  </svelte:fragment>
 
-	<div class="max-h-[400px] flex flex-col mb-2">
-		{#if loading}
-			{#each { length: 3 } as _}
-				<div class="animate-pulse flex gap-4 px-6 py-2">
-					<div class="h-12 w-12 bg-slate-200 rounded-xl" />
-					<div class="flex flex-col items-start justify-center gap-2">
-						<span class="animate-pulse w-36 h-4 bg-slate-200" />
-						<div class="flex animate-pulse gap-1">
-							<span class="w-8 h-3 bg-slate-200" />
-							<span class="w-20 h-3 bg-slate-200" />
-						</div>
-					</div>
-				</div>
-			{/each}
-		{:else}
-			<!-- svelte-ignore a11y-autofocus -->
-			<input
-				class="px-6 py-2 text-2xl border-b-4 bg-immich-bg border-immich-bg focus:border-immich-primary dark:bg-immich-dark-gray dark:border-immich-dark-gray dark:focus:border-immich-dark-primary"
-				placeholder="Search"
-				autofocus
-				bind:value={search}
-			/>
-			<div class="overflow-y-auto immich-scrollbar">
-				<button
-					on:click={handleNew}
-					class="w-full flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors items-center"
-				>
-					<div class="h-12 w-12 flex justify-center items-center">
-						<Plus size="30" />
-					</div>
-					<p class="">
-						New {#if shared}Shared {/if}Album {#if search.length > 0}<b>{search}</b>{/if}
-					</p>
-				</button>
-				{#if filteredAlbums.length > 0}
-					{#if !shared && search.length === 0}
-						<p class="text-xs px-5 py-3">RECENT</p>
-						{#each recentAlbums as album (album.id)}
-							<AlbumListItem variant="simple" {album} on:album={() => handleSelect(album)} />
-						{/each}
-					{/if}
+  <div class="max-h-[400px] flex flex-col mb-2">
+    {#if loading}
+      {#each { length: 3 } as _}
+        <div class="animate-pulse flex gap-4 px-6 py-2">
+          <div class="h-12 w-12 bg-slate-200 rounded-xl" />
+          <div class="flex flex-col items-start justify-center gap-2">
+            <span class="animate-pulse w-36 h-4 bg-slate-200" />
+            <div class="flex animate-pulse gap-1">
+              <span class="w-8 h-3 bg-slate-200" />
+              <span class="w-20 h-3 bg-slate-200" />
+            </div>
+          </div>
+        </div>
+      {/each}
+    {:else}
+      <!-- svelte-ignore a11y-autofocus -->
+      <input
+        class="px-6 py-2 text-2xl border-b-4 bg-immich-bg border-immich-bg focus:border-immich-primary dark:bg-immich-dark-gray dark:border-immich-dark-gray dark:focus:border-immich-dark-primary"
+        placeholder="Search"
+        autofocus
+        bind:value={search}
+      />
+      <div class="overflow-y-auto immich-scrollbar">
+        <button
+          on:click={handleNew}
+          class="w-full flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors items-center"
+        >
+          <div class="h-12 w-12 flex justify-center items-center">
+            <Plus size="30" />
+          </div>
+          <p class="">
+            New {#if shared}Shared {/if}Album {#if search.length > 0}<b>{search}</b>{/if}
+          </p>
+        </button>
+        {#if filteredAlbums.length > 0}
+          {#if !shared && search.length === 0}
+            <p class="text-xs px-5 py-3">RECENT</p>
+            {#each recentAlbums as album (album.id)}
+              <AlbumListItem variant="simple" {album} on:album={() => handleSelect(album)} />
+            {/each}
+          {/if}
 
-					{#if !shared}
-						<p class="text-xs px-5 py-3">
-							{#if search.length === 0}ALL {/if}ALBUMS
-						</p>
-					{/if}
-					{#each filteredAlbums as album (album.id)}
-						<AlbumListItem {album} searchQuery={search} on:album={() => handleSelect(album)} />
-					{/each}
-				{:else if albums.length > 0}
-					<p class="text-sm px-5 py-1">
-						It looks like you do not have any albums with this name yet.
-					</p>
-				{:else}
-					<p class="text-sm px-5 py-1">It looks like you do not have any albums yet.</p>
-				{/if}
-			</div>
-		{/if}
-	</div>
+          {#if !shared}
+            <p class="text-xs px-5 py-3">
+              {#if search.length === 0}ALL {/if}ALBUMS
+            </p>
+          {/if}
+          {#each filteredAlbums as album (album.id)}
+            <AlbumListItem {album} searchQuery={search} on:album={() => handleSelect(album)} />
+          {/each}
+        {:else if albums.length > 0}
+          <p class="text-sm px-5 py-1">It looks like you do not have any albums with this name yet.</p>
+        {:else}
+          <p class="text-sm px-5 py-1">It looks like you do not have any albums yet.</p>
+        {/if}
+      </div>
+    {/if}
+  </div>
 </BaseModal>
diff --git a/web/src/lib/components/shared-components/apple-header.svelte b/web/src/lib/components/shared-components/apple-header.svelte
index 11079a989..fb45627ed 100644
--- a/web/src/lib/components/shared-components/apple-header.svelte
+++ b/web/src/lib/components/shared-components/apple-header.svelte
@@ -1,184 +1,184 @@
 <script lang="ts">
-	import appleSplash20482732 from '$lib/assets/apple/apple-splash-2048-2732.png';
-	import appleSplash27322048 from '$lib/assets/apple/apple-splash-2732-2048.png';
-	import appleSplash16682388 from '$lib/assets/apple/apple-splash-1668-2388.png';
-	import appleSplash23881668 from '$lib/assets/apple/apple-splash-2388-1668.png';
-	import appleSplash15362048 from '$lib/assets/apple/apple-splash-1536-2048.png';
-	import appleSplash20481536 from '$lib/assets/apple/apple-splash-2048-1536.png';
-	import appleSplash16682224 from '$lib/assets/apple/apple-splash-1668-2224.png';
-	import appleSplash22241668 from '$lib/assets/apple/apple-splash-2224-1668.png';
-	import appleSplash16202160 from '$lib/assets/apple/apple-splash-1620-2160.png';
-	import appleSplash21601620 from '$lib/assets/apple/apple-splash-2160-1620.png';
-	import appleSplash12902796 from '$lib/assets/apple/apple-splash-1290-2796.png';
-	import appleSplash27961290 from '$lib/assets/apple/apple-splash-2796-1290.png';
-	import appleSplash11792556 from '$lib/assets/apple/apple-splash-1179-2556.png';
-	import appleSplash25561179 from '$lib/assets/apple/apple-splash-2556-1179.png';
-	import appleSplash12842778 from '$lib/assets/apple/apple-splash-1284-2778.png';
-	import appleSplash27781284 from '$lib/assets/apple/apple-splash-2778-1284.png';
-	import appleSplash11702532 from '$lib/assets/apple/apple-splash-1170-2532.png';
-	import appleSplash25321170 from '$lib/assets/apple/apple-splash-2532-1170.png';
-	import appleSplash11252436 from '$lib/assets/apple/apple-splash-1125-2436.png';
-	import appleSplash24361125 from '$lib/assets/apple/apple-splash-2436-1125.png';
-	import appleSplash12422688 from '$lib/assets/apple/apple-splash-1242-2688.png';
-	import appleSplash26881242 from '$lib/assets/apple/apple-splash-2688-1242.png';
-	import appleSplash8281792 from '$lib/assets/apple/apple-splash-828-1792.png';
-	import appleSplash1792828 from '$lib/assets/apple/apple-splash-1792-828.png';
-	import appleSplash12422208 from '$lib/assets/apple/apple-splash-1242-2208.png';
-	import appleSplash22081242 from '$lib/assets/apple/apple-splash-2208-1242.png';
-	import appleSplash7501334 from '$lib/assets/apple/apple-splash-750-1334.png';
-	import appleSplash1334750 from '$lib/assets/apple/apple-splash-1334-750.png';
-	import appleSplash6401136 from '$lib/assets/apple/apple-splash-640-1136.png';
-	import appleSplash1136640 from '$lib/assets/apple/apple-splash-1136-640.png';
+  import appleSplash20482732 from '$lib/assets/apple/apple-splash-2048-2732.png';
+  import appleSplash27322048 from '$lib/assets/apple/apple-splash-2732-2048.png';
+  import appleSplash16682388 from '$lib/assets/apple/apple-splash-1668-2388.png';
+  import appleSplash23881668 from '$lib/assets/apple/apple-splash-2388-1668.png';
+  import appleSplash15362048 from '$lib/assets/apple/apple-splash-1536-2048.png';
+  import appleSplash20481536 from '$lib/assets/apple/apple-splash-2048-1536.png';
+  import appleSplash16682224 from '$lib/assets/apple/apple-splash-1668-2224.png';
+  import appleSplash22241668 from '$lib/assets/apple/apple-splash-2224-1668.png';
+  import appleSplash16202160 from '$lib/assets/apple/apple-splash-1620-2160.png';
+  import appleSplash21601620 from '$lib/assets/apple/apple-splash-2160-1620.png';
+  import appleSplash12902796 from '$lib/assets/apple/apple-splash-1290-2796.png';
+  import appleSplash27961290 from '$lib/assets/apple/apple-splash-2796-1290.png';
+  import appleSplash11792556 from '$lib/assets/apple/apple-splash-1179-2556.png';
+  import appleSplash25561179 from '$lib/assets/apple/apple-splash-2556-1179.png';
+  import appleSplash12842778 from '$lib/assets/apple/apple-splash-1284-2778.png';
+  import appleSplash27781284 from '$lib/assets/apple/apple-splash-2778-1284.png';
+  import appleSplash11702532 from '$lib/assets/apple/apple-splash-1170-2532.png';
+  import appleSplash25321170 from '$lib/assets/apple/apple-splash-2532-1170.png';
+  import appleSplash11252436 from '$lib/assets/apple/apple-splash-1125-2436.png';
+  import appleSplash24361125 from '$lib/assets/apple/apple-splash-2436-1125.png';
+  import appleSplash12422688 from '$lib/assets/apple/apple-splash-1242-2688.png';
+  import appleSplash26881242 from '$lib/assets/apple/apple-splash-2688-1242.png';
+  import appleSplash8281792 from '$lib/assets/apple/apple-splash-828-1792.png';
+  import appleSplash1792828 from '$lib/assets/apple/apple-splash-1792-828.png';
+  import appleSplash12422208 from '$lib/assets/apple/apple-splash-1242-2208.png';
+  import appleSplash22081242 from '$lib/assets/apple/apple-splash-2208-1242.png';
+  import appleSplash7501334 from '$lib/assets/apple/apple-splash-750-1334.png';
+  import appleSplash1334750 from '$lib/assets/apple/apple-splash-1334-750.png';
+  import appleSplash6401136 from '$lib/assets/apple/apple-splash-640-1136.png';
+  import appleSplash1136640 from '$lib/assets/apple/apple-splash-1136-640.png';
 </script>
 
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash20482732}
-	media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash20482732}
+  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash27322048}
-	media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash27322048}
+  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash16682388}
-	media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash16682388}
+  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash23881668}
-	media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash23881668}
+  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash15362048}
-	media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash15362048}
+  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash20481536}
-	media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash20481536}
+  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash16682224}
-	media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash16682224}
+  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash22241668}
-	media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash22241668}
+  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash16202160}
-	media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash16202160}
+  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash21601620}
-	media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash21601620}
+  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash12902796}
-	media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash12902796}
+  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash27961290}
-	media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash27961290}
+  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
 />
 
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash11792556}
-	media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash11792556}
+  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash25561179}
-	media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash25561179}
+  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash12842778}
-	media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash12842778}
+  media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash27781284}
-	media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash27781284}
+  media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash11702532}
-	media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash11702532}
+  media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash25321170}
-	media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash25321170}
+  media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash11252436}
-	media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash11252436}
+  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash24361125}
-	media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash24361125}
+  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash12422688}
-	media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash12422688}
+  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash26881242}
-	media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash26881242}
+  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash8281792}
-	media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash8281792}
+  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash1792828}
-	media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash1792828}
+  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash12422208}
-	media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash12422208}
+  media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash22081242}
-	media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash22081242}
+  media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash7501334}
-	media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash7501334}
+  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash1334750}
-	media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash1334750}
+  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash6401136}
-	media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+  rel="apple-touch-startup-image"
+  href={appleSplash6401136}
+  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
 />
 <link
-	rel="apple-touch-startup-image"
-	href={appleSplash1136640}
-	media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+  rel="apple-touch-startup-image"
+  href={appleSplash1136640}
+  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
 />
diff --git a/web/src/lib/components/shared-components/base-modal.svelte b/web/src/lib/components/shared-components/base-modal.svelte
index 8393b2be8..33704b5d3 100644
--- a/web/src/lib/components/shared-components/base-modal.svelte
+++ b/web/src/lib/components/shared-components/base-modal.svelte
@@ -1,55 +1,55 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	import { quintOut } from 'svelte/easing';
-	import Close from 'svelte-material-icons/Close.svelte';
-	import { createEventDispatcher, onMount, onDestroy } from 'svelte';
-	import { browser } from '$app/environment';
-	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-	import { clickOutside } from '$lib/utils/click-outside';
+  import { fade } from 'svelte/transition';
+  import { quintOut } from 'svelte/easing';
+  import Close from 'svelte-material-icons/Close.svelte';
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { browser } from '$app/environment';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import { clickOutside } from '$lib/utils/click-outside';
 
-	const dispatch = createEventDispatcher();
-	export let zIndex = 9999;
+  const dispatch = createEventDispatcher();
+  export let zIndex = 9999;
 
-	onMount(() => {
-		if (browser) {
-			const scrollTop = document.documentElement.scrollTop;
-			const scrollLeft = document.documentElement.scrollLeft;
-			window.onscroll = function () {
-				window.scrollTo(scrollLeft, scrollTop);
-			};
-		}
-	});
+  onMount(() => {
+    if (browser) {
+      const scrollTop = document.documentElement.scrollTop;
+      const scrollLeft = document.documentElement.scrollLeft;
+      window.onscroll = function () {
+        window.scrollTo(scrollLeft, scrollTop);
+      };
+    }
+  });
 
-	onDestroy(() => {
-		if (browser) {
-			window.onscroll = null;
-		}
-	});
+  onDestroy(() => {
+    if (browser) {
+      window.onscroll = null;
+    }
+  });
 </script>
 
 <div
-	id="immich-modal"
-	style:z-index={zIndex}
-	transition:fade={{ duration: 100, easing: quintOut }}
-	class="fixed top-0 left-0 w-full h-full bg-black/50 flex place-items-center place-content-center overflow-hidden"
+  id="immich-modal"
+  style:z-index={zIndex}
+  transition:fade={{ duration: 100, easing: quintOut }}
+  class="fixed top-0 left-0 w-full h-full bg-black/50 flex place-items-center place-content-center overflow-hidden"
 >
-	<div
-		use:clickOutside
-		on:outclick={() => dispatch('close')}
-		class="bg-immich-bg dark:bg-immich-dark-gray dark:text-immich-dark-fg w-[450px] min-h-[200px] max-h-[600px] rounded-lg shadow-md"
-	>
-		<div class="flex justify-between place-items-center px-5 py-3">
-			<div>
-				<slot name="title">
-					<p>Modal Title</p>
-				</slot>
-			</div>
+  <div
+    use:clickOutside
+    on:outclick={() => dispatch('close')}
+    class="bg-immich-bg dark:bg-immich-dark-gray dark:text-immich-dark-fg w-[450px] min-h-[200px] max-h-[600px] rounded-lg shadow-md"
+  >
+    <div class="flex justify-between place-items-center px-5 py-3">
+      <div>
+        <slot name="title">
+          <p>Modal Title</p>
+        </slot>
+      </div>
 
-			<CircleIconButton on:click={() => dispatch('close')} logo={Close} size={'20'} />
-		</div>
+      <CircleIconButton on:click={() => dispatch('close')} logo={Close} size={'20'} />
+    </div>
 
-		<div class="">
-			<slot />
-		</div>
-	</div>
+    <div class="">
+      <slot />
+    </div>
+  </div>
 </div>
diff --git a/web/src/lib/components/shared-components/confirm-dialogue.svelte b/web/src/lib/components/shared-components/confirm-dialogue.svelte
index 5f6551920..8437a5ab3 100644
--- a/web/src/lib/components/shared-components/confirm-dialogue.svelte
+++ b/web/src/lib/components/shared-components/confirm-dialogue.svelte
@@ -1,62 +1,57 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import FullScreenModal from './full-screen-modal.svelte';
-	import Button from '../elements/buttons/button.svelte';
-	import type { Color } from '$lib/components/elements/buttons/button.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import FullScreenModal from './full-screen-modal.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import type { Color } from '$lib/components/elements/buttons/button.svelte';
 
-	export let title = 'Confirm';
-	export let prompt = 'Are you sure you want to do this?';
-	export let confirmText = 'Confirm';
-	export let confirmColor: Color = 'red';
-	export let cancelText = 'Cancel';
-	export let cancelColor: Color = 'primary';
-	export let hideCancelButton = false;
+  export let title = 'Confirm';
+  export let prompt = 'Are you sure you want to do this?';
+  export let confirmText = 'Confirm';
+  export let confirmColor: Color = 'red';
+  export let cancelText = 'Cancel';
+  export let cancelColor: Color = 'primary';
+  export let hideCancelButton = false;
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	let isConfirmButtonDisabled = false;
+  let isConfirmButtonDisabled = false;
 
-	const handleCancel = () => dispatch('cancel');
+  const handleCancel = () => dispatch('cancel');
 
-	const handleConfirm = () => {
-		isConfirmButtonDisabled = true;
-		dispatch('confirm');
-	};
+  const handleConfirm = () => {
+    isConfirmButtonDisabled = true;
+    dispatch('confirm');
+  };
 </script>
 
 <FullScreenModal on:clickOutside={handleCancel}>
-	<div
-		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
-	>
-		<div
-			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-		>
-			<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium pb-2">
-				{title}
-			</h1>
-		</div>
-		<div>
-			<div class="px-4 py-5 text-md text-center">
-				<slot name="prompt">
-					<p>{prompt}</p>
-				</slot>
-			</div>
+  <div
+    class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
+  >
+    <div
+      class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+    >
+      <h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium pb-2">
+        {title}
+      </h1>
+    </div>
+    <div>
+      <div class="px-4 py-5 text-md text-center">
+        <slot name="prompt">
+          <p>{prompt}</p>
+        </slot>
+      </div>
 
-			<div class="flex w-full px-4 gap-4 mt-4">
-				{#if !hideCancelButton}
-					<Button color={cancelColor} fullwidth on:click={handleCancel}>
-						{cancelText}
-					</Button>
-				{/if}
-				<Button
-					color={confirmColor}
-					fullwidth
-					on:click={handleConfirm}
-					disabled={isConfirmButtonDisabled}
-				>
-					{confirmText}
-				</Button>
-			</div>
-		</div>
-	</div>
+      <div class="flex w-full px-4 gap-4 mt-4">
+        {#if !hideCancelButton}
+          <Button color={cancelColor} fullwidth on:click={handleCancel}>
+            {cancelText}
+          </Button>
+        {/if}
+        <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={isConfirmButtonDisabled}>
+          {confirmText}
+        </Button>
+      </div>
+    </div>
+  </div>
 </FullScreenModal>
diff --git a/web/src/lib/components/shared-components/context-menu/context-menu.svelte b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
index aafd9f5d6..484be868e 100644
--- a/web/src/lib/components/shared-components/context-menu/context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
@@ -1,33 +1,33 @@
 <script lang="ts">
-	import { clickOutside } from '$lib/utils/click-outside';
-	import { quintOut } from 'svelte/easing';
-	import { slide } from 'svelte/transition';
+  import { clickOutside } from '$lib/utils/click-outside';
+  import { quintOut } from 'svelte/easing';
+  import { slide } from 'svelte/transition';
 
-	export let direction: 'left' | 'right' = 'right';
-	export let x = 0;
-	export let y = 0;
+  export let direction: 'left' | 'right' = 'right';
+  export let x = 0;
+  export let y = 0;
 
-	let menuElement: HTMLDivElement;
-	let left: number;
-	let top: number;
+  let menuElement: HTMLDivElement;
+  let left: number;
+  let top: number;
 
-	$: if (menuElement) {
-		const rect = menuElement.getBoundingClientRect();
-		const directionWidth = direction === 'left' ? rect.width : 0;
+  $: if (menuElement) {
+    const rect = menuElement.getBoundingClientRect();
+    const directionWidth = direction === 'left' ? rect.width : 0;
 
-		left = Math.min(window.innerWidth - rect.width, x - directionWidth);
-		top = Math.min(window.innerHeight - rect.height, y);
-	}
+    left = Math.min(window.innerWidth - rect.width, x - directionWidth);
+    top = Math.min(window.innerHeight - rect.height, y);
+  }
 </script>
 
 <div
-	transition:slide={{ duration: 200, easing: quintOut }}
-	bind:this={menuElement}
-	class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden shadow-lg"
-	style="left: {left}px; top: {top}px;"
-	role="menu"
-	use:clickOutside
-	on:outclick
+  transition:slide={{ duration: 200, easing: quintOut }}
+  bind:this={menuElement}
+  class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden shadow-lg"
+  style="left: {left}px; top: {top}px;"
+  role="menu"
+  use:clickOutside
+  on:outclick
 >
-	<slot />
+  <slot />
 </div>
diff --git a/web/src/lib/components/shared-components/context-menu/menu-option.svelte b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
index d8ab46212..bbf94a08e 100644
--- a/web/src/lib/components/shared-components/context-menu/menu-option.svelte
+++ b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
@@ -1,15 +1,15 @@
 <script>
-	export let text = '';
+  export let text = '';
 </script>
 
 <button
-	on:click
-	class="bg-slate-100 hover:bg-gray-200 text-immich-fg dark:text-immich-dark-bg p-4 w-full text-left text-sm font-medium focus:outline-none focus:ring-inset focus:ring-2"
-	role="menuitem"
+  on:click
+  class="bg-slate-100 hover:bg-gray-200 text-immich-fg dark:text-immich-dark-bg p-4 w-full text-left text-sm font-medium focus:outline-none focus:ring-inset focus:ring-2"
+  role="menuitem"
 >
-	{#if text}
-		{text}
-	{:else}
-		<slot />
-	{/if}
+  {#if text}
+    {text}
+  {:else}
+    <slot />
+  {/if}
 </button>
diff --git a/web/src/lib/components/shared-components/control-app-bar.svelte b/web/src/lib/components/shared-components/control-app-bar.svelte
index ab105e30d..3e32a16aa 100644
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/web/src/lib/components/shared-components/control-app-bar.svelte
@@ -1,72 +1,72 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+  import { browser } from '$app/environment';
 
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-	import Close from 'svelte-material-icons/Close.svelte';
-	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-	import { fly } from 'svelte/transition';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  import Close from 'svelte-material-icons/Close.svelte';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import { fly } from 'svelte/transition';
 
-	export let showBackButton = true;
-	export let backIcon = Close;
-	export let tailwindClasses = '';
-	export let forceDark = false;
+  export let showBackButton = true;
+  export let backIcon = Close;
+  export let tailwindClasses = '';
+  export let forceDark = false;
 
-	let appBarBorder = 'bg-immich-bg border border-transparent';
+  let appBarBorder = 'bg-immich-bg border border-transparent';
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	const onScroll = () => {
-		if (window.pageYOffset > 80) {
-			appBarBorder = 'border border-gray-200 bg-gray-50 dark:border-gray-600';
+  const onScroll = () => {
+    if (window.pageYOffset > 80) {
+      appBarBorder = 'border border-gray-200 bg-gray-50 dark:border-gray-600';
 
-			if (forceDark) {
-				appBarBorder = 'border border-gray-600';
-			}
-		} else {
-			appBarBorder = 'bg-immich-bg border border-transparent';
-		}
-	};
+      if (forceDark) {
+        appBarBorder = 'border border-gray-600';
+      }
+    } else {
+      appBarBorder = 'bg-immich-bg border border-transparent';
+    }
+  };
 
-	onMount(() => {
-		if (browser) {
-			document.addEventListener('scroll', onScroll);
-		}
-	});
+  onMount(() => {
+    if (browser) {
+      document.addEventListener('scroll', onScroll);
+    }
+  });
 
-	onDestroy(() => {
-		if (browser) {
-			document.removeEventListener('scroll', onScroll);
-		}
-	});
+  onDestroy(() => {
+    if (browser) {
+      document.removeEventListener('scroll', onScroll);
+    }
+  });
 </script>
 
 <div in:fly={{ y: 10, duration: 200 }} class="fixed top-0 w-full bg-transparent z-[100]">
-	<div
-		id="asset-selection-app-bar"
-		class={`grid grid-cols-3 justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center ${tailwindClasses} dark:bg-immich-dark-gray ${
-			forceDark && 'bg-immich-dark-gray text-white'
-		}`}
-	>
-		<div class="flex place-items-center gap-6 dark:text-immich-dark-fg justify-self-start">
-			{#if showBackButton}
-				<CircleIconButton
-					on:click={() => dispatch('close-button-click')}
-					logo={backIcon}
-					backgroundColor={'transparent'}
-					hoverColor={'#e2e7e9'}
-					size={'24'}
-					forceDark
-				/>
-			{/if}
-			<slot name="leading" />
-		</div>
+  <div
+    id="asset-selection-app-bar"
+    class={`grid grid-cols-3 justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center ${tailwindClasses} dark:bg-immich-dark-gray ${
+      forceDark && 'bg-immich-dark-gray text-white'
+    }`}
+  >
+    <div class="flex place-items-center gap-6 dark:text-immich-dark-fg justify-self-start">
+      {#if showBackButton}
+        <CircleIconButton
+          on:click={() => dispatch('close-button-click')}
+          logo={backIcon}
+          backgroundColor={'transparent'}
+          hoverColor={'#e2e7e9'}
+          size={'24'}
+          forceDark
+        />
+      {/if}
+      <slot name="leading" />
+    </div>
 
-		<div class="w-full">
-			<slot />
-		</div>
+    <div class="w-full">
+      <slot />
+    </div>
 
-		<div class="flex place-items-center gap-1 mr-4 justify-self-end">
-			<slot name="trailing" />
-		</div>
-	</div>
+    <div class="flex place-items-center gap-1 mr-4 justify-self-end">
+      <slot name="trailing" />
+    </div>
+  </div>
 </div>
diff --git a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
index b15dc0e61..547cd154a 100644
--- a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
+++ b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
@@ -1,259 +1,241 @@
 <script lang="ts">
-	import SettingInputField, {
-		SettingInputFieldType
-	} from '$lib/components/admin-page/settings/setting-input-field.svelte';
-	import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
-	import Button from '$lib/components/elements/buttons/button.svelte';
-	import { handleError } from '$lib/utils/handle-error';
-	import {
-		AlbumResponseDto,
-		api,
-		AssetResponseDto,
-		SharedLinkResponseDto,
-		SharedLinkType
-	} from '@api';
-	import { createEventDispatcher, onMount } from 'svelte';
-	import Link from 'svelte-material-icons/Link.svelte';
-	import BaseModal from '../base-modal.svelte';
-	import type { ImmichDropDownOption } from '../dropdown-button.svelte';
-	import DropdownButton from '../dropdown-button.svelte';
-	import { notificationController, NotificationType } from '../notification/notification';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/admin-page/settings/setting-input-field.svelte';
+  import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import { handleError } from '$lib/utils/handle-error';
+  import { AlbumResponseDto, api, AssetResponseDto, SharedLinkResponseDto, SharedLinkType } from '@api';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import Link from 'svelte-material-icons/Link.svelte';
+  import BaseModal from '../base-modal.svelte';
+  import type { ImmichDropDownOption } from '../dropdown-button.svelte';
+  import DropdownButton from '../dropdown-button.svelte';
+  import { notificationController, NotificationType } from '../notification/notification';
 
-	export let shareType: SharedLinkType;
-	export let sharedAssets: AssetResponseDto[] = [];
-	export let album: AlbumResponseDto | undefined = undefined;
-	export let editingLink: SharedLinkResponseDto | undefined = undefined;
+  export let shareType: SharedLinkType;
+  export let sharedAssets: AssetResponseDto[] = [];
+  export let album: AlbumResponseDto | undefined = undefined;
+  export let editingLink: SharedLinkResponseDto | undefined = undefined;
 
-	let sharedLink: string | null = null;
-	let description = '';
-	let allowDownload = true;
-	let allowUpload = false;
-	let showExif = true;
-	let expirationTime = '';
-	let shouldChangeExpirationTime = false;
-	let canCopyImagesToClipboard = true;
-	const dispatch = createEventDispatcher();
+  let sharedLink: string | null = null;
+  let description = '';
+  let allowDownload = true;
+  let allowUpload = false;
+  let showExif = true;
+  let expirationTime = '';
+  let shouldChangeExpirationTime = false;
+  let canCopyImagesToClipboard = true;
+  const dispatch = createEventDispatcher();
 
-	const expiredDateOption: ImmichDropDownOption = {
-		default: 'Never',
-		options: ['Never', '30 minutes', '1 hour', '6 hours', '1 day', '7 days', '30 days']
-	};
+  const expiredDateOption: ImmichDropDownOption = {
+    default: 'Never',
+    options: ['Never', '30 minutes', '1 hour', '6 hours', '1 day', '7 days', '30 days'],
+  };
 
-	onMount(async () => {
-		if (editingLink) {
-			if (editingLink.description) {
-				description = editingLink.description;
-			}
-			allowUpload = editingLink.allowUpload;
-			allowDownload = editingLink.allowDownload;
-			showExif = editingLink.showExif;
-		}
+  onMount(async () => {
+    if (editingLink) {
+      if (editingLink.description) {
+        description = editingLink.description;
+      }
+      allowUpload = editingLink.allowUpload;
+      allowDownload = editingLink.allowDownload;
+      showExif = editingLink.showExif;
+    }
 
-		const module = await import('copy-image-clipboard');
-		canCopyImagesToClipboard = module.canCopyImagesToClipboard();
-	});
+    const module = await import('copy-image-clipboard');
+    canCopyImagesToClipboard = module.canCopyImagesToClipboard();
+  });
 
-	const handleCreateSharedLink = async () => {
-		const expirationTime = getExpirationTimeInMillisecond();
-		const currentTime = new Date().getTime();
-		const expirationDate = expirationTime
-			? new Date(currentTime + expirationTime).toISOString()
-			: undefined;
+  const handleCreateSharedLink = async () => {
+    const expirationTime = getExpirationTimeInMillisecond();
+    const currentTime = new Date().getTime();
+    const expirationDate = expirationTime ? new Date(currentTime + expirationTime).toISOString() : undefined;
 
-		try {
-			const { data } = await api.sharedLinkApi.createSharedLink({
-				sharedLinkCreateDto: {
-					type: shareType,
-					albumId: album ? album.id : undefined,
-					assetIds: sharedAssets.map((a) => a.id),
-					expiresAt: expirationDate,
-					allowUpload,
-					description,
-					allowDownload,
-					showExif
-				}
-			});
-			sharedLink = `${window.location.origin}/share/${data.key}`;
-		} catch (e) {
-			handleError(e, 'Failed to create shared link');
-		}
-	};
+    try {
+      const { data } = await api.sharedLinkApi.createSharedLink({
+        sharedLinkCreateDto: {
+          type: shareType,
+          albumId: album ? album.id : undefined,
+          assetIds: sharedAssets.map((a) => a.id),
+          expiresAt: expirationDate,
+          allowUpload,
+          description,
+          allowDownload,
+          showExif,
+        },
+      });
+      sharedLink = `${window.location.origin}/share/${data.key}`;
+    } catch (e) {
+      handleError(e, 'Failed to create shared link');
+    }
+  };
 
-	const handleCopy = async () => {
-		if (!sharedLink) {
-			return;
-		}
+  const handleCopy = async () => {
+    if (!sharedLink) {
+      return;
+    }
 
-		try {
-			await navigator.clipboard.writeText(sharedLink);
-			notificationController.show({ message: 'Copied to clipboard!', type: NotificationType.Info });
-		} catch (e) {
-			handleError(
-				e,
-				'Cannot copy to clipboard, make sure you are accessing the page through https'
-			);
-		}
-	};
+    try {
+      await navigator.clipboard.writeText(sharedLink);
+      notificationController.show({ message: 'Copied to clipboard!', type: NotificationType.Info });
+    } catch (e) {
+      handleError(e, 'Cannot copy to clipboard, make sure you are accessing the page through https');
+    }
+  };
 
-	const getExpirationTimeInMillisecond = () => {
-		switch (expirationTime) {
-			case '30 minutes':
-				return 30 * 60 * 1000;
-			case '1 hour':
-				return 60 * 60 * 1000;
-			case '6 hours':
-				return 6 * 60 * 60 * 1000;
-			case '1 day':
-				return 24 * 60 * 60 * 1000;
-			case '7 days':
-				return 7 * 24 * 60 * 60 * 1000;
-			case '30 days':
-				return 30 * 24 * 60 * 60 * 1000;
-			default:
-				return 0;
-		}
-	};
+  const getExpirationTimeInMillisecond = () => {
+    switch (expirationTime) {
+      case '30 minutes':
+        return 30 * 60 * 1000;
+      case '1 hour':
+        return 60 * 60 * 1000;
+      case '6 hours':
+        return 6 * 60 * 60 * 1000;
+      case '1 day':
+        return 24 * 60 * 60 * 1000;
+      case '7 days':
+        return 7 * 24 * 60 * 60 * 1000;
+      case '30 days':
+        return 30 * 24 * 60 * 60 * 1000;
+      default:
+        return 0;
+    }
+  };
 
-	const handleEditLink = async () => {
-		if (!editingLink) {
-			return;
-		}
+  const handleEditLink = async () => {
+    if (!editingLink) {
+      return;
+    }
 
-		try {
-			const expirationTime = getExpirationTimeInMillisecond();
-			const currentTime = new Date().getTime();
-			const expirationDate: string | null = expirationTime
-				? new Date(currentTime + expirationTime).toISOString()
-				: null;
+    try {
+      const expirationTime = getExpirationTimeInMillisecond();
+      const currentTime = new Date().getTime();
+      const expirationDate: string | null = expirationTime
+        ? new Date(currentTime + expirationTime).toISOString()
+        : null;
 
-			await api.sharedLinkApi.updateSharedLink({
-				id: editingLink.id,
-				sharedLinkEditDto: {
-					description,
-					expiresAt: shouldChangeExpirationTime ? expirationDate : undefined,
-					allowUpload: allowUpload,
-					allowDownload: allowDownload,
-					showExif: showExif
-				}
-			});
+      await api.sharedLinkApi.updateSharedLink({
+        id: editingLink.id,
+        sharedLinkEditDto: {
+          description,
+          expiresAt: shouldChangeExpirationTime ? expirationDate : undefined,
+          allowUpload: allowUpload,
+          allowDownload: allowDownload,
+          showExif: showExif,
+        },
+      });
 
-			notificationController.show({
-				type: NotificationType.Info,
-				message: 'Edited'
-			});
+      notificationController.show({
+        type: NotificationType.Info,
+        message: 'Edited',
+      });
 
-			dispatch('close');
-		} catch (e) {
-			handleError(e, 'Failed to edit shared link');
-		}
-	};
+      dispatch('close');
+    } catch (e) {
+      handleError(e, 'Failed to edit shared link');
+    }
+  };
 </script>
 
 <BaseModal on:close={() => dispatch('close')}>
-	<svelte:fragment slot="title">
-		<span class="flex gap-2 place-items-center">
-			<Link size={24} />
-			{#if editingLink}
-				<p class="font-medium text-immich-fg dark:text-immich-dark-fg">Edit link</p>
-			{:else}
-				<p class="font-medium text-immich-fg dark:text-immich-dark-fg">Create link to share</p>
-			{/if}
-		</span>
-	</svelte:fragment>
+  <svelte:fragment slot="title">
+    <span class="flex gap-2 place-items-center">
+      <Link size={24} />
+      {#if editingLink}
+        <p class="font-medium text-immich-fg dark:text-immich-dark-fg">Edit link</p>
+      {:else}
+        <p class="font-medium text-immich-fg dark:text-immich-dark-fg">Create link to share</p>
+      {/if}
+    </span>
+  </svelte:fragment>
 
-	<section class="mx-6 mb-6">
-		{#if shareType == SharedLinkType.Album}
-			{#if !editingLink}
-				<div>Let anyone with the link see photos and people in this album.</div>
-			{:else}
-				<div class="text-sm">
-					Public album | <span class="text-immich-primary dark:text-immich-dark-primary"
-						>{editingLink.album?.albumName}</span
-					>
-				</div>
-			{/if}
-		{/if}
+  <section class="mx-6 mb-6">
+    {#if shareType == SharedLinkType.Album}
+      {#if !editingLink}
+        <div>Let anyone with the link see photos and people in this album.</div>
+      {:else}
+        <div class="text-sm">
+          Public album | <span class="text-immich-primary dark:text-immich-dark-primary"
+            >{editingLink.album?.albumName}</span
+          >
+        </div>
+      {/if}
+    {/if}
 
-		{#if shareType == SharedLinkType.Individual}
-			{#if !editingLink}
-				<div>Let anyone with the link see the selected photo(s)</div>
-			{:else}
-				<div class="text-sm">
-					Individual shared | <span class="text-immich-primary dark:text-immich-dark-primary"
-						>{editingLink.description}</span
-					>
-				</div>
-			{/if}
-		{/if}
+    {#if shareType == SharedLinkType.Individual}
+      {#if !editingLink}
+        <div>Let anyone with the link see the selected photo(s)</div>
+      {:else}
+        <div class="text-sm">
+          Individual shared | <span class="text-immich-primary dark:text-immich-dark-primary"
+            >{editingLink.description}</span
+          >
+        </div>
+      {/if}
+    {/if}
 
-		<div class="mt-4 mb-2">
-			<p class="text-xs">LINK OPTIONS</p>
-		</div>
-		<div class="p-4 bg-gray-100 dark:bg-black/40 rounded-lg">
-			<div class="flex flex-col">
-				<div class="mb-2">
-					<SettingInputField
-						inputType={SettingInputFieldType.TEXT}
-						label="Description"
-						bind:value={description}
-					/>
-				</div>
+    <div class="mt-4 mb-2">
+      <p class="text-xs">LINK OPTIONS</p>
+    </div>
+    <div class="p-4 bg-gray-100 dark:bg-black/40 rounded-lg">
+      <div class="flex flex-col">
+        <div class="mb-2">
+          <SettingInputField inputType={SettingInputFieldType.TEXT} label="Description" bind:value={description} />
+        </div>
 
-				<div class="my-3">
-					<SettingSwitch bind:checked={showExif} title={'Show metadata'} />
-				</div>
+        <div class="my-3">
+          <SettingSwitch bind:checked={showExif} title={'Show metadata'} />
+        </div>
 
-				<div class="my-3">
-					<SettingSwitch bind:checked={allowDownload} title={'Allow public user to download'} />
-				</div>
+        <div class="my-3">
+          <SettingSwitch bind:checked={allowDownload} title={'Allow public user to download'} />
+        </div>
 
-				<div class="my-3">
-					<SettingSwitch bind:checked={allowUpload} title={'Allow public user to upload'} />
-				</div>
+        <div class="my-3">
+          <SettingSwitch bind:checked={allowUpload} title={'Allow public user to upload'} />
+        </div>
 
-				<div class="text-sm">
-					{#if editingLink}
-						<p class="my-2 immich-form-label">
-							<SettingSwitch
-								bind:checked={shouldChangeExpirationTime}
-								title={'Change expiration time'}
-							/>
-						</p>
-					{:else}
-						<p class="my-2 immich-form-label">Expire after</p>
-					{/if}
+        <div class="text-sm">
+          {#if editingLink}
+            <p class="my-2 immich-form-label">
+              <SettingSwitch bind:checked={shouldChangeExpirationTime} title={'Change expiration time'} />
+            </p>
+          {:else}
+            <p class="my-2 immich-form-label">Expire after</p>
+          {/if}
 
-					<DropdownButton
-						options={expiredDateOption}
-						bind:selected={expirationTime}
-						disabled={editingLink && !shouldChangeExpirationTime}
-					/>
-				</div>
-			</div>
-		</div>
-	</section>
+          <DropdownButton
+            options={expiredDateOption}
+            bind:selected={expirationTime}
+            disabled={editingLink && !shouldChangeExpirationTime}
+          />
+        </div>
+      </div>
+    </div>
+  </section>
 
-	<hr />
+  <hr />
 
-	<section class="m-6">
-		{#if !sharedLink}
-			{#if editingLink}
-				<div class="flex justify-end">
-					<Button size="sm" rounded="lg" on:click={handleEditLink}>Confirm</Button>
-				</div>
-			{:else}
-				<div class="flex justify-end">
-					<Button size="sm" rounded="lg" on:click={handleCreateSharedLink}>Create link</Button>
-				</div>
-			{/if}
-		{:else}
-			<div class="flex w-full gap-4">
-				<input class="immich-form-input w-full" bind:value={sharedLink} disabled />
+  <section class="m-6">
+    {#if !sharedLink}
+      {#if editingLink}
+        <div class="flex justify-end">
+          <Button size="sm" rounded="lg" on:click={handleEditLink}>Confirm</Button>
+        </div>
+      {:else}
+        <div class="flex justify-end">
+          <Button size="sm" rounded="lg" on:click={handleCreateSharedLink}>Create link</Button>
+        </div>
+      {/if}
+    {:else}
+      <div class="flex w-full gap-4">
+        <input class="immich-form-input w-full" bind:value={sharedLink} disabled />
 
-				{#if canCopyImagesToClipboard}
-					<Button on:click={() => handleCopy()}>Copy</Button>
-				{/if}
-			</div>
-		{/if}
-	</section>
+        {#if canCopyImagesToClipboard}
+          <Button on:click={() => handleCopy()}>Copy</Button>
+        {/if}
+      </div>
+    {/if}
+  </section>
 </BaseModal>
diff --git a/web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte b/web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
index 736fdcab4..f6a628745 100644
--- a/web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
+++ b/web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
@@ -1,39 +1,39 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	import ImmichLogo from './immich-logo.svelte';
-	export let dropHandler: (event: DragEvent) => void;
+  import { fade } from 'svelte/transition';
+  import ImmichLogo from './immich-logo.svelte';
+  export let dropHandler: (event: DragEvent) => void;
 
-	let dragStartTarget: EventTarget | null = null;
+  let dragStartTarget: EventTarget | null = null;
 
-	const handleDragEnter = (e: DragEvent) => {
-		dragStartTarget = e.target;
-	};
+  const handleDragEnter = (e: DragEvent) => {
+    dragStartTarget = e.target;
+  };
 </script>
 
 <svelte:body
-	on:dragenter|stopPropagation|preventDefault={handleDragEnter}
-	on:dragleave|stopPropagation|preventDefault={(e) => {
-		if (dragStartTarget === e.target) {
-			dragStartTarget = null;
-		}
-	}}
-	on:drop|stopPropagation|preventDefault={(e) => {
-		dragStartTarget = null;
-		dropHandler(e);
-	}}
+  on:dragenter|stopPropagation|preventDefault={handleDragEnter}
+  on:dragleave|stopPropagation|preventDefault={(e) => {
+    if (dragStartTarget === e.target) {
+      dragStartTarget = null;
+    }
+  }}
+  on:drop|stopPropagation|preventDefault={(e) => {
+    dragStartTarget = null;
+    dropHandler(e);
+  }}
 />
 
 {#if dragStartTarget}
-	<div
-		class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray"
-		transition:fade={{ duration: 250 }}
-		on:dragover={(e) => {
-			// Prevent browser from opening the dropped file.
-			e.stopPropagation();
-			e.preventDefault();
-		}}
-	>
-		<ImmichLogo class="animate-bounce w-48 m-16" />
-		<div class="text-2xl">Drop files anywhere to upload</div>
-	</div>
+  <div
+    class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray"
+    transition:fade={{ duration: 250 }}
+    on:dragover={(e) => {
+      // Prevent browser from opening the dropped file.
+      e.stopPropagation();
+      e.preventDefault();
+    }}
+  >
+    <ImmichLogo class="animate-bounce w-48 m-16" />
+    <div class="text-2xl">Drop files anywhere to upload</div>
+  </div>
 {/if}
diff --git a/web/src/lib/components/shared-components/dropdown-button.svelte b/web/src/lib/components/shared-components/dropdown-button.svelte
index 9ad15fbe2..4cf63f758 100644
--- a/web/src/lib/components/shared-components/dropdown-button.svelte
+++ b/web/src/lib/components/shared-components/dropdown-button.svelte
@@ -1,76 +1,76 @@
 <script lang="ts" context="module">
-	export type ImmichDropDownOption = {
-		default: string;
-		options: string[];
-	};
+  export type ImmichDropDownOption = {
+    default: string;
+    options: string[];
+  };
 </script>
 
 <script lang="ts">
-	import { onMount } from 'svelte';
+  import { onMount } from 'svelte';
 
-	export let options: ImmichDropDownOption;
-	export let selected: string;
-	export let disabled = false;
+  export let options: ImmichDropDownOption;
+  export let selected: string;
+  export let disabled = false;
 
-	onMount(() => {
-		selected = options.default;
-	});
+  onMount(() => {
+    selected = options.default;
+  });
 
-	export let isOpen = false;
-	const toggle = () => (isOpen = !isOpen);
+  export let isOpen = false;
+  const toggle = () => (isOpen = !isOpen);
 </script>
 
 <div id="immich-dropdown" class="relative">
-	<button
-		{disabled}
-		on:click={toggle}
-		aria-expanded={isOpen}
-		class="bg-gray-200 w-full flex p-2 rounded-lg dark:bg-gray-600 place-items-center justify-between disabled:cursor-not-allowed dark:disabled:bg-gray-300 disabled:bg-gray-600"
-	>
-		<div>
-			{selected}
-		</div>
+  <button
+    {disabled}
+    on:click={toggle}
+    aria-expanded={isOpen}
+    class="bg-gray-200 w-full flex p-2 rounded-lg dark:bg-gray-600 place-items-center justify-between disabled:cursor-not-allowed dark:disabled:bg-gray-300 disabled:bg-gray-600"
+  >
+    <div>
+      {selected}
+    </div>
 
-		<div>
-			<svg
-				style="tran"
-				width="20"
-				height="20"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path d="M19 9l-7 7-7-7" />
-			</svg>
-		</div>
-	</button>
+    <div>
+      <svg
+        style="tran"
+        width="20"
+        height="20"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path d="M19 9l-7 7-7-7" />
+      </svg>
+    </div>
+  </button>
 
-	{#if isOpen}
-		<div class="flex flex-col mt-2 absolute w-full">
-			{#each options.options as option}
-				<button
-					on:click={() => {
-						selected = option;
-						isOpen = false;
-					}}
-					class="bg-gray-200 dark:bg-gray-500 dark:hover:bg-gray-700 w-full flex p-2 hover:bg-gray-300 transition-all"
-				>
-					{option}
-				</button>
-			{/each}
-		</div>
-	{/if}
+  {#if isOpen}
+    <div class="flex flex-col mt-2 absolute w-full">
+      {#each options.options as option}
+        <button
+          on:click={() => {
+            selected = option;
+            isOpen = false;
+          }}
+          class="bg-gray-200 dark:bg-gray-500 dark:hover:bg-gray-700 w-full flex p-2 hover:bg-gray-300 transition-all"
+        >
+          {option}
+        </button>
+      {/each}
+    </div>
+  {/if}
 </div>
 
 <style>
-	svg {
-		transition: transform 0.2s ease-in;
-	}
+  svg {
+    transition: transform 0.2s ease-in;
+  }
 
-	[aria-expanded='true'] svg {
-		transform: rotate(0.5turn);
-	}
+  [aria-expanded='true'] svg {
+    transform: rotate(0.5turn);
+  }
 </style>
diff --git a/web/src/lib/components/shared-components/empty-placeholder.svelte b/web/src/lib/components/shared-components/empty-placeholder.svelte
index 55b225ac7..d0655aa20 100644
--- a/web/src/lib/components/shared-components/empty-placeholder.svelte
+++ b/web/src/lib/components/shared-components/empty-placeholder.svelte
@@ -1,28 +1,27 @@
 <script lang="ts">
-	import empty1Url from '$lib/assets/empty-1.svg';
+  import empty1Url from '$lib/assets/empty-1.svg';
 
-	export let actionHandler: undefined | (() => Promise<void>) = undefined;
-	export let text = '';
-	export let alt = '';
+  export let actionHandler: undefined | (() => Promise<void>) = undefined;
+  export let text = '';
+  export let alt = '';
 
-	let hoverClasses =
-		'hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer';
+  let hoverClasses = 'hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer';
 </script>
 
 {#if actionHandler}
-	<div
-		on:click={actionHandler}
-		on:keydown={actionHandler}
-		class="border dark:border-immich-dark-gray {hoverClasses} p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
-	>
-		<img src={empty1Url} {alt} width="500" draggable="false" />
-		<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">{text}</p>
-	</div>
+  <div
+    on:click={actionHandler}
+    on:keydown={actionHandler}
+    class="border dark:border-immich-dark-gray {hoverClasses} p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
+  >
+    <img src={empty1Url} {alt} width="500" draggable="false" />
+    <p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">{text}</p>
+  </div>
 {:else}
-	<div
-		class="border dark:border-immich-dark-gray p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
-	>
-		<img src={empty1Url} {alt} width="500" draggable="false" />
-		<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">{text}</p>
-	</div>
+  <div
+    class="border dark:border-immich-dark-gray p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
+  >
+    <img src={empty1Url} {alt} width="500" draggable="false" />
+    <p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">{text}</p>
+  </div>
 {/if}
diff --git a/web/src/lib/components/shared-components/favicon-header.svelte b/web/src/lib/components/shared-components/favicon-header.svelte
index 9555a04b2..c61682c91 100644
--- a/web/src/lib/components/shared-components/favicon-header.svelte
+++ b/web/src/lib/components/shared-components/favicon-header.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import IconAppleTouch180 from '$lib/assets/favicon/apple-icon-180.png';
-	import Icon16 from '$lib/assets/favicon/favicon-16.png';
-	import Icon32 from '$lib/assets/favicon/favicon-32.png';
-	import Icon96 from '$lib/assets/favicon/favicon-96.png';
+  import IconAppleTouch180 from '$lib/assets/favicon/apple-icon-180.png';
+  import Icon16 from '$lib/assets/favicon/favicon-16.png';
+  import Icon32 from '$lib/assets/favicon/favicon-32.png';
+  import Icon96 from '$lib/assets/favicon/favicon-96.png';
 </script>
 
 <link rel="icon" type="image/png" sizes="16x16" href={Icon16} />
diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index 063db78e7..915583b9f 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { clickOutside } from '../../utils/click-outside';
-	import { createEventDispatcher } from 'svelte';
-	import { fade } from 'svelte/transition';
+  import { clickOutside } from '../../utils/click-outside';
+  import { createEventDispatcher } from 'svelte';
+  import { fade } from 'svelte/transition';
 
-	const dispatch = createEventDispatcher<{ clickOutside: void }>();
+  const dispatch = createEventDispatcher<{ clickOutside: void }>();
 </script>
 
 <section
-	in:fade={{ duration: 100 }}
-	out:fade={{ duration: 100 }}
-	class="fixed left-0 top-0 w-screen h-screen bg-black/40 z-[990] flex place-items-center place-content-center"
+  in:fade={{ duration: 100 }}
+  out:fade={{ duration: 100 }}
+  class="fixed left-0 top-0 w-screen h-screen bg-black/40 z-[990] flex place-items-center place-content-center"
 >
-	<div class="z-[9999]" use:clickOutside on:outclick={() => dispatch('clickOutside')}>
-		<slot />
-	</div>
+  <div class="z-[9999]" use:clickOutside on:outclick={() => dispatch('clickOutside')}>
+    <slot />
+  </div>
 </section>
diff --git a/web/src/lib/components/shared-components/fullscreen-container.svelte b/web/src/lib/components/shared-components/fullscreen-container.svelte
index 4bf39362b..0fb52fdd9 100644
--- a/web/src/lib/components/shared-components/fullscreen-container.svelte
+++ b/web/src/lib/components/shared-components/fullscreen-container.svelte
@@ -1,29 +1,29 @@
 <script lang="ts">
-	import ImmichLogo from './immich-logo.svelte';
+  import ImmichLogo from './immich-logo.svelte';
 
-	export let title: string;
-	export let showMessage = $$slots.message;
+  export let title: string;
+  export let showMessage = $$slots.message;
 </script>
 
 <section class="min-h-screen w-screen flex place-items-center place-content-center p-4">
-	<div
-		class="flex flex-col gap-4 border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-8 shadow-sm w-full max-w-lg rounded-3xl"
-	>
-		<div class="flex flex-col place-items-center place-content-center gap-4 py-4">
-			<ImmichLogo class="h-24 w-24" />
-			<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
-				{title}
-			</h1>
-		</div>
+  <div
+    class="flex flex-col gap-4 border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-8 shadow-sm w-full max-w-lg rounded-3xl"
+  >
+    <div class="flex flex-col place-items-center place-content-center gap-4 py-4">
+      <ImmichLogo class="h-24 w-24" />
+      <h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
+        {title}
+      </h1>
+    </div>
 
-		{#if showMessage}
-			<div
-				class="text-sm rounded-xl p-4 text-immich-primary dark:text-immich-dark-primary font-medium bg-immich-primary/5 dark:border-immich-dark-bg w-full border-immich-primary border-2"
-			>
-				<slot name="message" />
-			</div>
-		{/if}
+    {#if showMessage}
+      <div
+        class="text-sm rounded-xl p-4 text-immich-primary dark:text-immich-dark-primary font-medium bg-immich-primary/5 dark:border-immich-dark-bg w-full border-immich-primary border-2"
+      >
+        <slot name="message" />
+      </div>
+    {/if}
 
-		<slot />
-	</div>
+    <slot />
+  </div>
 </section>
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index ac99c105e..2f2737d15 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -1,147 +1,142 @@
 <script lang="ts" context="module">
-	export type ViewFrom =
-		| 'archive-page'
-		| 'album-page'
-		| 'favorites-page'
-		| 'search-page'
-		| 'shared-link-page';
+  export type ViewFrom = 'archive-page' | 'album-page' | 'favorites-page' | 'search-page' | 'shared-link-page';
 </script>
 
 <script lang="ts">
-	import { page } from '$app/stores';
-	import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
-	import { handleError } from '$lib/utils/handle-error';
-	import { AssetResponseDto, SharedLinkResponseDto, ThumbnailFormat } from '@api';
-	import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-	import { flip } from 'svelte/animate';
-	import { archivedAsset } from '$lib/stores/archived-asset.store';
+  import { page } from '$app/stores';
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import { handleError } from '$lib/utils/handle-error';
+  import { AssetResponseDto, SharedLinkResponseDto, ThumbnailFormat } from '@api';
+  import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
+  import { flip } from 'svelte/animate';
+  import { archivedAsset } from '$lib/stores/archived-asset.store';
 
-	export let assets: AssetResponseDto[];
-	export let sharedLink: SharedLinkResponseDto | undefined = undefined;
-	export let selectedAssets: Set<AssetResponseDto> = new Set();
-	export let disableAssetSelect = false;
-	export let viewFrom: ViewFrom;
-	export let showArchiveIcon = false;
+  export let assets: AssetResponseDto[];
+  export let sharedLink: SharedLinkResponseDto | undefined = undefined;
+  export let selectedAssets: Set<AssetResponseDto> = new Set();
+  export let disableAssetSelect = false;
+  export let viewFrom: ViewFrom;
+  export let showArchiveIcon = false;
 
-	let isShowAssetViewer = false;
+  let isShowAssetViewer = false;
 
-	let selectedAsset: AssetResponseDto;
-	let currentViewAssetIndex = 0;
+  let selectedAsset: AssetResponseDto;
+  let currentViewAssetIndex = 0;
 
-	let viewWidth: number;
-	let thumbnailSize = 300;
+  let viewWidth: number;
+  let thumbnailSize = 300;
 
-	$: isMultiSelectionMode = selectedAssets.size > 0;
+  $: isMultiSelectionMode = selectedAssets.size > 0;
 
-	$: {
-		if (assets.length < 6) {
-			thumbnailSize = Math.min(320, Math.floor(viewWidth / assets.length - assets.length));
-		} else {
-			if (viewWidth > 600) thumbnailSize = Math.floor(viewWidth / 7 - 7);
-			else if (viewWidth > 400) thumbnailSize = Math.floor(viewWidth / 4 - 6);
-			else if (viewWidth > 300) thumbnailSize = Math.floor(viewWidth / 2 - 6);
-			else if (viewWidth > 200) thumbnailSize = Math.floor(viewWidth / 2 - 6);
-			else if (viewWidth > 100) thumbnailSize = Math.floor(viewWidth / 1 - 6);
-		}
-	}
+  $: {
+    if (assets.length < 6) {
+      thumbnailSize = Math.min(320, Math.floor(viewWidth / assets.length - assets.length));
+    } else {
+      if (viewWidth > 600) thumbnailSize = Math.floor(viewWidth / 7 - 7);
+      else if (viewWidth > 400) thumbnailSize = Math.floor(viewWidth / 4 - 6);
+      else if (viewWidth > 300) thumbnailSize = Math.floor(viewWidth / 2 - 6);
+      else if (viewWidth > 200) thumbnailSize = Math.floor(viewWidth / 2 - 6);
+      else if (viewWidth > 100) thumbnailSize = Math.floor(viewWidth / 1 - 6);
+    }
+  }
 
-	const viewAssetHandler = (event: CustomEvent) => {
-		const { asset }: { asset: AssetResponseDto } = event.detail;
+  const viewAssetHandler = (event: CustomEvent) => {
+    const { asset }: { asset: AssetResponseDto } = event.detail;
 
-		currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id);
-		selectedAsset = assets[currentViewAssetIndex];
-		isShowAssetViewer = true;
-		pushState(selectedAsset.id);
-	};
+    currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id);
+    selectedAsset = assets[currentViewAssetIndex];
+    isShowAssetViewer = true;
+    pushState(selectedAsset.id);
+  };
 
-	const selectAssetHandler = (event: CustomEvent) => {
-		const { asset }: { asset: AssetResponseDto } = event.detail;
-		let temp = new Set(selectedAssets);
+  const selectAssetHandler = (event: CustomEvent) => {
+    const { asset }: { asset: AssetResponseDto } = event.detail;
+    let temp = new Set(selectedAssets);
 
-		if (selectedAssets.has(asset)) {
-			temp.delete(asset);
-		} else {
-			temp.add(asset);
-		}
+    if (selectedAssets.has(asset)) {
+      temp.delete(asset);
+    } else {
+      temp.add(asset);
+    }
 
-		selectedAssets = temp;
-	};
+    selectedAssets = temp;
+  };
 
-	const navigateAssetForward = () => {
-		try {
-			if (currentViewAssetIndex < assets.length - 1) {
-				currentViewAssetIndex++;
-				selectedAsset = assets[currentViewAssetIndex];
-				pushState(selectedAsset.id);
-			}
-		} catch (e) {
-			handleError(e, 'Cannot navigate to the next asset');
-		}
-	};
+  const navigateAssetForward = () => {
+    try {
+      if (currentViewAssetIndex < assets.length - 1) {
+        currentViewAssetIndex++;
+        selectedAsset = assets[currentViewAssetIndex];
+        pushState(selectedAsset.id);
+      }
+    } catch (e) {
+      handleError(e, 'Cannot navigate to the next asset');
+    }
+  };
 
-	const navigateAssetBackward = () => {
-		try {
-			if (currentViewAssetIndex > 0) {
-				currentViewAssetIndex--;
-				selectedAsset = assets[currentViewAssetIndex];
-				pushState(selectedAsset.id);
-			}
-		} catch (e) {
-			handleError(e, 'Cannot navigate to previous asset');
-		}
-	};
+  const navigateAssetBackward = () => {
+    try {
+      if (currentViewAssetIndex > 0) {
+        currentViewAssetIndex--;
+        selectedAsset = assets[currentViewAssetIndex];
+        pushState(selectedAsset.id);
+      }
+    } catch (e) {
+      handleError(e, 'Cannot navigate to previous asset');
+    }
+  };
 
-	const pushState = (assetId: string) => {
-		// add a URL to the browser's history
-		// changes the current URL in the address bar but doesn't perform any SvelteKit navigation
-		history.pushState(null, '', `${$page.url.pathname}/photos/${assetId}`);
-	};
+  const pushState = (assetId: string) => {
+    // add a URL to the browser's history
+    // changes the current URL in the address bar but doesn't perform any SvelteKit navigation
+    history.pushState(null, '', `${$page.url.pathname}/photos/${assetId}`);
+  };
 
-	const closeViewer = () => {
-		isShowAssetViewer = false;
-		history.pushState(null, '', `${$page.url.pathname}`);
-	};
+  const closeViewer = () => {
+    isShowAssetViewer = false;
+    history.pushState(null, '', `${$page.url.pathname}`);
+  };
 
-	const handleUnarchivedSuccess = (event: CustomEvent) => {
-		const asset = event.detail as AssetResponseDto;
-		switch (viewFrom) {
-			case 'archive-page':
-				$archivedAsset = $archivedAsset.filter((a) => a.id != asset.id);
-				navigateAssetForward();
-				break;
-		}
-	};
+  const handleUnarchivedSuccess = (event: CustomEvent) => {
+    const asset = event.detail as AssetResponseDto;
+    switch (viewFrom) {
+      case 'archive-page':
+        $archivedAsset = $archivedAsset.filter((a) => a.id != asset.id);
+        navigateAssetForward();
+        break;
+    }
+  };
 </script>
 
 {#if assets.length > 0}
-	<div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
-		{#each assets as asset (asset.id)}
-			<div animate:flip={{ duration: 500 }}>
-				<Thumbnail
-					{asset}
-					{thumbnailSize}
-					readonly={disableAssetSelect}
-					publicSharedKey={sharedLink?.key}
-					format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
-					on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
-					on:select={selectAssetHandler}
-					selected={selectedAssets.has(asset)}
-					{showArchiveIcon}
-				/>
-			</div>
-		{/each}
-	</div>
+  <div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
+    {#each assets as asset (asset.id)}
+      <div animate:flip={{ duration: 500 }}>
+        <Thumbnail
+          {asset}
+          {thumbnailSize}
+          readonly={disableAssetSelect}
+          publicSharedKey={sharedLink?.key}
+          format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
+          on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
+          on:select={selectAssetHandler}
+          selected={selectedAssets.has(asset)}
+          {showArchiveIcon}
+        />
+      </div>
+    {/each}
+  </div>
 {/if}
 
 <!-- Overlay Asset Viewer -->
 {#if isShowAssetViewer}
-	<AssetViewer
-		asset={selectedAsset}
-		publicSharedKey={sharedLink?.key}
-		{sharedLink}
-		on:navigate-previous={navigateAssetBackward}
-		on:navigate-next={navigateAssetForward}
-		on:close={closeViewer}
-		on:unarchived={handleUnarchivedSuccess}
-	/>
+  <AssetViewer
+    asset={selectedAsset}
+    publicSharedKey={sharedLink?.key}
+    {sharedLink}
+    on:navigate-previous={navigateAssetBackward}
+    on:navigate-next={navigateAssetForward}
+    on:close={closeViewer}
+    on:unarchived={handleUnarchivedSuccess}
+  />
 {/if}
diff --git a/web/src/lib/components/shared-components/immich-logo.svelte b/web/src/lib/components/shared-components/immich-logo.svelte
index c4bfa1c5e..e3881c5b3 100644
--- a/web/src/lib/components/shared-components/immich-logo.svelte
+++ b/web/src/lib/components/shared-components/immich-logo.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import immichLogoUrl from '$lib/assets/immich-logo.svg';
+  import immichLogoUrl from '$lib/assets/immich-logo.svg';
 
-	export let draggable = false;
+  export let draggable = false;
 </script>
 
 <img src={immichLogoUrl} alt="Immich Logo" {draggable} {...$$restProps} />
diff --git a/web/src/lib/components/shared-components/leaflet/control.svelte b/web/src/lib/components/shared-components/leaflet/control.svelte
index 126a566d3..35767e705 100644
--- a/web/src/lib/components/shared-components/leaflet/control.svelte
+++ b/web/src/lib/components/shared-components/leaflet/control.svelte
@@ -1,35 +1,35 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-	import { Control, type ControlPosition } from 'leaflet';
-	import { getMapContext } from './map.svelte';
+  import { onDestroy, onMount } from 'svelte';
+  import { Control, type ControlPosition } from 'leaflet';
+  import { getMapContext } from './map.svelte';
 
-	export let position: ControlPosition | undefined = undefined;
-	let className: string | undefined = undefined;
-	export { className as class };
+  export let position: ControlPosition | undefined = undefined;
+  let className: string | undefined = undefined;
+  export { className as class };
 
-	let control: Control;
-	let target: HTMLDivElement;
+  let control: Control;
+  let target: HTMLDivElement;
 
-	const map = getMapContext();
+  const map = getMapContext();
 
-	onMount(() => {
-		const ControlClass = Control.extend({
-			position,
-			onAdd: () => target
-		});
+  onMount(() => {
+    const ControlClass = Control.extend({
+      position,
+      onAdd: () => target,
+    });
 
-		control = new ControlClass().addTo(map);
-	});
+    control = new ControlClass().addTo(map);
+  });
 
-	onDestroy(() => {
-		control.remove();
-	});
+  onDestroy(() => {
+    control.remove();
+  });
 
-	$: if (control && position) {
-		control.setPosition(position);
-	}
+  $: if (control && position) {
+    control.setPosition(position);
+  }
 </script>
 
 <div bind:this={target} class={className}>
-	<slot />
+  <slot />
 </div>
diff --git a/web/src/lib/components/shared-components/leaflet/index.ts b/web/src/lib/components/shared-components/leaflet/index.ts
index 73248651a..896c976e2 100644
--- a/web/src/lib/components/shared-components/leaflet/index.ts
+++ b/web/src/lib/components/shared-components/leaflet/index.ts
@@ -1,5 +1,5 @@
-export { default as AssetMarkerCluster } from './marker-cluster/asset-marker-cluster.svelte';
 export { default as Control } from './control.svelte';
 export { default as Map } from './map.svelte';
+export { default as AssetMarkerCluster } from './marker-cluster/asset-marker-cluster.svelte';
 export { default as Marker } from './marker.svelte';
 export { default as TileLayer } from './tile-layer.svelte';
diff --git a/web/src/lib/components/shared-components/leaflet/map.svelte b/web/src/lib/components/shared-components/leaflet/map.svelte
index ad587c437..994ca28ce 100644
--- a/web/src/lib/components/shared-components/leaflet/map.svelte
+++ b/web/src/lib/components/shared-components/leaflet/map.svelte
@@ -1,50 +1,50 @@
 <script lang="ts" context="module">
-	import { createContext } from '$lib/utils/context';
+  import { createContext } from '$lib/utils/context';
 
-	const { get: getContext, set: setMapContext } = createContext<() => Map>();
+  const { get: getContext, set: setMapContext } = createContext<() => Map>();
 
-	export const getMapContext = () => {
-		const getMap = getContext();
-		return getMap();
-	};
+  export const getMapContext = () => {
+    const getMap = getContext();
+    return getMap();
+  };
 </script>
 
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-	import { browser } from '$app/environment';
-	import { Map, type LatLngExpression, type MapOptions } from 'leaflet';
-	import 'leaflet/dist/leaflet.css';
+  import { onMount, onDestroy } from 'svelte';
+  import { browser } from '$app/environment';
+  import { Map, type LatLngExpression, type MapOptions } from 'leaflet';
+  import 'leaflet/dist/leaflet.css';
 
-	export let center: LatLngExpression;
-	export let zoom: number;
-	export let options: MapOptions | undefined = undefined;
-	export let allowDarkMode = false;
-	let container: HTMLDivElement;
-	let map: Map;
+  export let center: LatLngExpression;
+  export let zoom: number;
+  export let options: MapOptions | undefined = undefined;
+  export let allowDarkMode = false;
+  let container: HTMLDivElement;
+  let map: Map;
 
-	setMapContext(() => map);
+  setMapContext(() => map);
 
-	onMount(() => {
-		if (browser) {
-			map = new Map(container, options);
-		}
-	});
+  onMount(() => {
+    if (browser) {
+      map = new Map(container, options);
+    }
+  });
 
-	onDestroy(() => {
-		if (map) map.remove();
-	});
+  onDestroy(() => {
+    if (map) map.remove();
+  });
 
-	$: if (map) map.setView(center, zoom);
+  $: if (map) map.setView(center, zoom);
 </script>
 
 <div bind:this={container} class="w-full h-full" class:map-dark={allowDarkMode}>
-	{#if map}
-		<slot />
-	{/if}
+  {#if map}
+    <slot />
+  {/if}
 </div>
 
 <style>
-	:global(.dark) .map-dark :global(.leaflet-layer) {
-		filter: invert(100%) brightness(130%) saturate(0%);
-	}
+  :global(.dark) .map-dark :global(.leaflet-layer) {
+    filter: invert(100%) brightness(130%) saturate(0%);
+  }
 </style>
diff --git a/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker-cluster.css b/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker-cluster.css
index 4998aa363..73f0abc11 100644
--- a/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker-cluster.css
+++ b/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker-cluster.css
@@ -1,32 +1,31 @@
 .asset-marker-icon {
-	@apply rounded-full;
-	@apply object-cover;
-	@apply border;
-	@apply border-immich-primary;
-	@apply transition-all;
-	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
-		rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
-		rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
+  @apply rounded-full;
+  @apply object-cover;
+  @apply border;
+  @apply border-immich-primary;
+  @apply transition-all;
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px,
+    rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
 }
 
 .marker-cluster-icon {
-	@apply h-full;
-	@apply w-full;
-	@apply flex;
-	@apply justify-center;
-	@apply items-center;
-	@apply rounded-full;
-	@apply font-bold;
-	@apply bg-violet-50;
-	@apply border;
-	@apply border-immich-primary;
-	@apply text-immich-primary;
-	box-shadow: rgba(5, 5, 122, 0.12) 0px 2px 4px 0px, rgba(4, 4, 230, 0.32) 0px 2px 16px 0px;
+  @apply h-full;
+  @apply w-full;
+  @apply flex;
+  @apply justify-center;
+  @apply items-center;
+  @apply rounded-full;
+  @apply font-bold;
+  @apply bg-violet-50;
+  @apply border;
+  @apply border-immich-primary;
+  @apply text-immich-primary;
+  box-shadow: rgba(5, 5, 122, 0.12) 0px 2px 4px 0px, rgba(4, 4, 230, 0.32) 0px 2px 16px 0px;
 }
 
 .dark .map-dark .marker-cluster-icon {
-	@apply bg-blue-200;
-	@apply text-black;
-	@apply border-blue-200;
-	box-shadow: none;
+  @apply bg-blue-200;
+  @apply text-black;
+  @apply border-blue-200;
+  box-shadow: none;
 }
diff --git a/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker-cluster.svelte b/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker-cluster.svelte
index 15288b2a1..4d408a5a7 100644
--- a/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker-cluster.svelte
+++ b/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker-cluster.svelte
@@ -1,104 +1,102 @@
 <script lang="ts" context="module">
-	import { createContext } from '$lib/utils/context';
-	import { MarkerClusterGroup } from 'leaflet';
+  import { createContext } from '$lib/utils/context';
+  import { MarkerClusterGroup } from 'leaflet';
 
-	const { get: getContext, set: setClusterContext } = createContext<() => MarkerClusterGroup>();
+  const { get: getContext, set: setClusterContext } = createContext<() => MarkerClusterGroup>();
 
-	export const getClusterContext = () => {
-		return getContext()();
-	};
+  export const getClusterContext = () => {
+    return getContext()();
+  };
 </script>
 
 <script lang="ts">
-	import type { MapMarkerResponseDto } from '@api';
-	import { DivIcon, LeafletEvent, LeafletMouseEvent, MarkerCluster, Point } from 'leaflet';
-	import 'leaflet.markercluster';
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-	import { getMapContext } from '../map.svelte';
-	import AssetMarker from './asset-marker';
-	import './asset-marker-cluster.css';
+  import type { MapMarkerResponseDto } from '@api';
+  import { DivIcon, LeafletEvent, LeafletMouseEvent, MarkerCluster, Point } from 'leaflet';
+  import 'leaflet.markercluster';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  import { getMapContext } from '../map.svelte';
+  import AssetMarker from './asset-marker';
+  import './asset-marker-cluster.css';
 
-	export let markers: MapMarkerResponseDto[];
-	export let spiderfyLimit = 10;
-	let cluster: MarkerClusterGroup;
+  export let markers: MapMarkerResponseDto[];
+  export let spiderfyLimit = 10;
+  let cluster: MarkerClusterGroup;
 
-	const map = getMapContext();
-	const dispatch = createEventDispatcher<{
-		view: { assetIds: string[]; activeAssetIndex: number };
-	}>();
+  const map = getMapContext();
+  const dispatch = createEventDispatcher<{
+    view: { assetIds: string[]; activeAssetIndex: number };
+  }>();
 
-	setClusterContext(() => cluster);
+  setClusterContext(() => cluster);
 
-	onMount(() => {
-		cluster = new MarkerClusterGroup({
-			showCoverageOnHover: false,
-			zoomToBoundsOnClick: false,
-			spiderfyOnMaxZoom: false,
-			maxClusterRadius: (zoom) => 80 - zoom * 2,
-			spiderLegPolylineOptions: { opacity: 0 },
-			spiderfyDistanceMultiplier: 3,
-			iconCreateFunction: (options) => {
-				const childCount = options.getChildCount();
-				const iconSize = childCount > spiderfyLimit ? 45 : 40;
+  onMount(() => {
+    cluster = new MarkerClusterGroup({
+      showCoverageOnHover: false,
+      zoomToBoundsOnClick: false,
+      spiderfyOnMaxZoom: false,
+      maxClusterRadius: (zoom) => 80 - zoom * 2,
+      spiderLegPolylineOptions: { opacity: 0 },
+      spiderfyDistanceMultiplier: 3,
+      iconCreateFunction: (options) => {
+        const childCount = options.getChildCount();
+        const iconSize = childCount > spiderfyLimit ? 45 : 40;
 
-				return new DivIcon({
-					html: `<div class="marker-cluster-icon">${childCount}</div>`,
-					className: '',
-					iconSize: new Point(iconSize, iconSize)
-				});
-			}
-		});
+        return new DivIcon({
+          html: `<div class="marker-cluster-icon">${childCount}</div>`,
+          className: '',
+          iconSize: new Point(iconSize, iconSize),
+        });
+      },
+    });
 
-		cluster.on('clusterclick', (event: LeafletEvent) => {
-			const markerCluster: MarkerCluster = event.sourceTarget;
-			const childCount = markerCluster.getChildCount();
+    cluster.on('clusterclick', (event: LeafletEvent) => {
+      const markerCluster: MarkerCluster = event.sourceTarget;
+      const childCount = markerCluster.getChildCount();
 
-			if (childCount > spiderfyLimit) {
-				const markers = markerCluster.getAllChildMarkers() as AssetMarker[];
-				onView(markers, markers[0].id);
-			} else {
-				markerCluster.spiderfy();
-			}
-		});
+      if (childCount > spiderfyLimit) {
+        const markers = markerCluster.getAllChildMarkers() as AssetMarker[];
+        onView(markers, markers[0].id);
+      } else {
+        markerCluster.spiderfy();
+      }
+    });
 
-		cluster.on('click', (event: LeafletMouseEvent) => {
-			const marker: AssetMarker = event.sourceTarget;
-			const markerCluster = getClusterByMarker(marker);
-			const markers = markerCluster
-				? (markerCluster.getAllChildMarkers() as AssetMarker[])
-				: [marker];
+    cluster.on('click', (event: LeafletMouseEvent) => {
+      const marker: AssetMarker = event.sourceTarget;
+      const markerCluster = getClusterByMarker(marker);
+      const markers = markerCluster ? (markerCluster.getAllChildMarkers() as AssetMarker[]) : [marker];
 
-			onView(markers, marker.id);
-		});
+      onView(markers, marker.id);
+    });
 
-		map.addLayer(cluster);
-	});
+    map.addLayer(cluster);
+  });
 
-	/* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
-	const getClusterByMarker = (marker: any): MarkerCluster | undefined => {
-		const mapZoom = map.getZoom();
+  /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
+  const getClusterByMarker = (marker: any): MarkerCluster | undefined => {
+    const mapZoom = map.getZoom();
 
-		while (marker && marker._zoom !== mapZoom) {
-			marker = marker.__parent;
-		}
+    while (marker && marker._zoom !== mapZoom) {
+      marker = marker.__parent;
+    }
 
-		return marker;
-	};
+    return marker;
+  };
 
-	const onView = (markers: AssetMarker[], activeAssetId: string) => {
-		const assetIds = markers.map((marker) => marker.id);
-		const activeAssetIndex = assetIds.indexOf(activeAssetId) || 0;
-		dispatch('view', { assetIds, activeAssetIndex });
-	};
+  const onView = (markers: AssetMarker[], activeAssetId: string) => {
+    const assetIds = markers.map((marker) => marker.id);
+    const activeAssetIndex = assetIds.indexOf(activeAssetId) || 0;
+    dispatch('view', { assetIds, activeAssetIndex });
+  };
 
-	$: if (cluster) {
-		const leafletMarkers = markers.map((marker) => new AssetMarker(marker));
+  $: if (cluster) {
+    const leafletMarkers = markers.map((marker) => new AssetMarker(marker));
 
-		cluster.clearLayers();
-		cluster.addLayers(leafletMarkers);
-	}
+    cluster.clearLayers();
+    cluster.addLayers(leafletMarkers);
+  }
 
-	onDestroy(() => {
-		if (cluster) cluster.remove();
-	});
+  onDestroy(() => {
+    if (cluster) cluster.remove();
+  });
 </script>
diff --git a/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker.ts b/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker.ts
index 38e6299b9..c5ded9c93 100644
--- a/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker.ts
+++ b/web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker.ts
@@ -1,37 +1,37 @@
-import { MapMarkerResponseDto, api } from '@api';
-import { Marker, Map, Icon } from 'leaflet';
+import { api, MapMarkerResponseDto } from '@api';
+import { Icon, Map, Marker } from 'leaflet';
 
 export default class AssetMarker extends Marker {
-	id: string;
-	private iconCreated = false;
+  id: string;
+  private iconCreated = false;
 
-	constructor(marker: MapMarkerResponseDto) {
-		super([marker.lat, marker.lon]);
-		this.id = marker.id;
-	}
+  constructor(marker: MapMarkerResponseDto) {
+    super([marker.lat, marker.lon]);
+    this.id = marker.id;
+  }
 
-	onAdd(map: Map) {
-		// Set icon when the marker gets actually added to the map. This only
-		// gets called for individual assets and when selecting a cluster, so
-		// creating an icon for every marker in advance is pretty wasteful.
-		if (!this.iconCreated) {
-			this.iconCreated = true;
-			this.setIcon(this.getIcon());
-		}
+  onAdd(map: Map) {
+    // Set icon when the marker gets actually added to the map. This only
+    // gets called for individual assets and when selecting a cluster, so
+    // creating an icon for every marker in advance is pretty wasteful.
+    if (!this.iconCreated) {
+      this.iconCreated = true;
+      this.setIcon(this.getIcon());
+    }
 
-		return super.onAdd(map);
-	}
+    return super.onAdd(map);
+  }
 
-	getIcon() {
-		return new Icon({
-			iconUrl: api.getAssetThumbnailUrl(this.id),
-			iconRetinaUrl: api.getAssetThumbnailUrl(this.id),
-			iconSize: [60, 60],
-			iconAnchor: [12, 41],
-			popupAnchor: [1, -34],
-			tooltipAnchor: [16, -28],
-			shadowSize: [41, 41],
-			className: 'asset-marker-icon'
-		});
-	}
+  getIcon() {
+    return new Icon({
+      iconUrl: api.getAssetThumbnailUrl(this.id),
+      iconRetinaUrl: api.getAssetThumbnailUrl(this.id),
+      iconSize: [60, 60],
+      iconAnchor: [12, 41],
+      popupAnchor: [1, -34],
+      tooltipAnchor: [16, -28],
+      shadowSize: [41, 41],
+      className: 'asset-marker-icon',
+    });
+  }
 }
diff --git a/web/src/lib/components/shared-components/leaflet/marker.svelte b/web/src/lib/components/shared-components/leaflet/marker.svelte
index 598bb9f11..dac396703 100644
--- a/web/src/lib/components/shared-components/leaflet/marker.svelte
+++ b/web/src/lib/components/shared-components/leaflet/marker.svelte
@@ -1,46 +1,46 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-	import { Marker, Icon, type LatLngExpression, type Content } from 'leaflet';
-	import { getMapContext } from './map.svelte';
-	import iconUrl from 'leaflet/dist/images/marker-icon.png';
-	import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
-	import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
+  import { onDestroy, onMount } from 'svelte';
+  import { Marker, Icon, type LatLngExpression, type Content } from 'leaflet';
+  import { getMapContext } from './map.svelte';
+  import iconUrl from 'leaflet/dist/images/marker-icon.png';
+  import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
+  import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
 
-	export let latlng: LatLngExpression;
-	export let popupContent: Content | undefined = undefined;
-	let marker: Marker;
+  export let latlng: LatLngExpression;
+  export let popupContent: Content | undefined = undefined;
+  let marker: Marker;
 
-	const defaultIcon = new Icon({
-		iconUrl,
-		iconRetinaUrl,
-		shadowUrl,
+  const defaultIcon = new Icon({
+    iconUrl,
+    iconRetinaUrl,
+    shadowUrl,
 
-		// Default values from Leaflet
-		iconSize: [25, 41],
-		iconAnchor: [12, 41],
-		popupAnchor: [1, -34],
-		tooltipAnchor: [16, -28],
-		shadowSize: [41, 41]
-	});
-	const map = getMapContext();
+    // Default values from Leaflet
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    tooltipAnchor: [16, -28],
+    shadowSize: [41, 41],
+  });
+  const map = getMapContext();
 
-	onMount(() => {
-		marker = new Marker(latlng, {
-			icon: defaultIcon
-		}).addTo(map);
-	});
+  onMount(() => {
+    marker = new Marker(latlng, {
+      icon: defaultIcon,
+    }).addTo(map);
+  });
 
-	onDestroy(() => {
-		if (marker) marker.remove();
-	});
+  onDestroy(() => {
+    if (marker) marker.remove();
+  });
 
-	$: if (marker) {
-		marker.setLatLng(latlng);
+  $: if (marker) {
+    marker.setLatLng(latlng);
 
-		if (popupContent) {
-			marker.bindPopup(popupContent);
-		} else {
-			marker.unbindPopup();
-		}
-	}
+    if (popupContent) {
+      marker.bindPopup(popupContent);
+    } else {
+      marker.unbindPopup();
+    }
+  }
 </script>
diff --git a/web/src/lib/components/shared-components/leaflet/tile-layer.svelte b/web/src/lib/components/shared-components/leaflet/tile-layer.svelte
index 60a5662eb..facc32cb2 100644
--- a/web/src/lib/components/shared-components/leaflet/tile-layer.svelte
+++ b/web/src/lib/components/shared-components/leaflet/tile-layer.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-	import { TileLayer, type TileLayerOptions } from 'leaflet';
-	import { getMapContext } from './map.svelte';
+  import { onDestroy, onMount } from 'svelte';
+  import { TileLayer, type TileLayerOptions } from 'leaflet';
+  import { getMapContext } from './map.svelte';
 
-	export let urlTemplate: string;
-	export let options: TileLayerOptions | undefined = undefined;
+  export let urlTemplate: string;
+  export let options: TileLayerOptions | undefined = undefined;
 
-	let tileLayer: TileLayer;
+  let tileLayer: TileLayer;
 
-	const map = getMapContext();
+  const map = getMapContext();
 
-	onMount(() => {
-		tileLayer = new TileLayer(urlTemplate, options).addTo(map);
-	});
+  onMount(() => {
+    tileLayer = new TileLayer(urlTemplate, options).addTo(map);
+  });
 
-	onDestroy(() => {
-		if (tileLayer) tileLayer.remove();
-	});
+  onDestroy(() => {
+    if (tileLayer) tileLayer.remove();
+  });
 </script>
diff --git a/web/src/lib/components/shared-components/loading-spinner.svelte b/web/src/lib/components/shared-components/loading-spinner.svelte
index 6dcd23b6d..a81194db8 100644
--- a/web/src/lib/components/shared-components/loading-spinner.svelte
+++ b/web/src/lib/components/shared-components/loading-spinner.svelte
@@ -1,18 +1,18 @@
 <div>
-	<svg
-		role="status"
-		class={`w-[24px] h-[24px] text-gray-400 animate-spin dark:text-gray-600 fill-immich-primary`}
-		viewBox="0 0 100 101"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-			fill="currentColor"
-		/>
-		<path
-			d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-			fill="currentFill"
-		/>
-	</svg>
+  <svg
+    role="status"
+    class={`w-[24px] h-[24px] text-gray-400 animate-spin dark:text-gray-600 fill-immich-primary`}
+    viewBox="0 0 100 101"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+      fill="currentColor"
+    />
+    <path
+      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+      fill="currentFill"
+    />
+  </svg>
 </div>
diff --git a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
index 957eed203..41ac5c21b 100644
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@@ -1,54 +1,54 @@
 <script lang="ts">
-	import Button from '$lib/components/elements/buttons/button.svelte';
-	import { AppRoute } from '$lib/constants';
-	import type { UserResponseDto } from '@api';
-	import { createEventDispatcher } from 'svelte';
-	import Cog from 'svelte-material-icons/Cog.svelte';
-	import Logout from 'svelte-material-icons/Logout.svelte';
-	import { fade } from 'svelte/transition';
-	import UserAvatar from '../user-avatar.svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import { AppRoute } from '$lib/constants';
+  import type { UserResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import Cog from 'svelte-material-icons/Cog.svelte';
+  import Logout from 'svelte-material-icons/Logout.svelte';
+  import { fade } from 'svelte/transition';
+  import UserAvatar from '../user-avatar.svelte';
 
-	export let user: UserResponseDto;
+  export let user: UserResponseDto;
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 </script>
 
 <div
-	in:fade={{ duration: 100 }}
-	out:fade={{ duration: 100 }}
-	id="account-info-panel"
-	class="absolute right-[25px] top-[75px] bg-gray-200 dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-3xl w-[360px] z-[100]"
+  in:fade={{ duration: 100 }}
+  out:fade={{ duration: 100 }}
+  id="account-info-panel"
+  class="absolute right-[25px] top-[75px] bg-gray-200 dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-3xl w-[360px] z-[100]"
 >
-	<div
-		class="flex flex-col items-center justify-center gap-4 bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 p-4"
-	>
-		<UserAvatar size="lg" {user} />
+  <div
+    class="flex flex-col items-center justify-center gap-4 bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 p-4"
+  >
+    <UserAvatar size="lg" {user} />
 
-		<div>
-			<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium text-center">
-				{user.firstName}
-				{user.lastName}
-			</p>
-			<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
-		</div>
+    <div>
+      <p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium text-center">
+        {user.firstName}
+        {user.lastName}
+      </p>
+      <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
+    </div>
 
-		<a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
-			<Button color="dark-gray" size="sm" shadow={false} border>
-				<div class="flex gap-2 place-items-center place-content-center px-2">
-					<Cog size="18" />
-					Account Settings
-				</div>
-			</Button>
-		</a>
-	</div>
+    <a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
+      <Button color="dark-gray" size="sm" shadow={false} border>
+        <div class="flex gap-2 place-items-center place-content-center px-2">
+          <Cog size="18" />
+          Account Settings
+        </div>
+      </Button>
+    </a>
+  </div>
 
-	<div class="mb-4 flex flex-col">
-		<button
-			class="py-3 w-full font-medium flex place-items-center gap-2 hover:bg-immich-primary/10 text-gray-500 dark:text-gray-300 place-content-center"
-			on:click={() => dispatch('logout')}
-		>
-			<Logout size={24} />
-			Sign Out</button
-		>
-	</div>
+  <div class="mb-4 flex flex-col">
+    <button
+      class="py-3 w-full font-medium flex place-items-center gap-2 hover:bg-immich-primary/10 text-gray-500 dark:text-gray-300 place-content-center"
+      on:click={() => dispatch('logout')}
+    >
+      <Logout size={24} />
+      Sign Out</button
+    >
+  </div>
 </div>
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index f7eac2bf2..a4f4ac4fd 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -1,147 +1,141 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
-	import { clickOutside } from '$lib/utils/click-outside';
-	import { createEventDispatcher } from 'svelte';
-	import { fade, fly } from 'svelte/transition';
-	import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
-	import { api, UserResponseDto } from '@api';
-	import ThemeButton from '../theme-button.svelte';
-	import { AppRoute } from '../../../constants';
-	import AccountInfoPanel from './account-info-panel.svelte';
-	import ImmichLogo from '../immich-logo.svelte';
-	import SearchBar from '../search-bar/search-bar.svelte';
-	import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-	import Magnify from 'svelte-material-icons/Magnify.svelte';
-	import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
-	import Cog from 'svelte-material-icons/Cog.svelte';
-	import UserAvatar from '../user-avatar.svelte';
-	export let user: UserResponseDto;
-	export let showUploadButton = true;
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { clickOutside } from '$lib/utils/click-outside';
+  import { createEventDispatcher } from 'svelte';
+  import { fade, fly } from 'svelte/transition';
+  import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
+  import { api, UserResponseDto } from '@api';
+  import ThemeButton from '../theme-button.svelte';
+  import { AppRoute } from '../../../constants';
+  import AccountInfoPanel from './account-info-panel.svelte';
+  import ImmichLogo from '../immich-logo.svelte';
+  import SearchBar from '../search-bar/search-bar.svelte';
+  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import Magnify from 'svelte-material-icons/Magnify.svelte';
+  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
+  import Cog from 'svelte-material-icons/Cog.svelte';
+  import UserAvatar from '../user-avatar.svelte';
+  export let user: UserResponseDto;
+  export let showUploadButton = true;
 
-	let shouldShowAccountInfo = false;
-	let shouldShowAccountInfoPanel = false;
+  let shouldShowAccountInfo = false;
+  let shouldShowAccountInfoPanel = false;
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	const logOut = async () => {
-		const { data } = await api.authenticationApi.logout();
+  const logOut = async () => {
+    const { data } = await api.authenticationApi.logout();
 
-		await fetch('/auth/logout', { method: 'POST' });
+    await fetch('/auth/logout', { method: 'POST' });
 
-		goto(data.redirectUri || '/auth/login?autoLaunch=0');
-	};
+    goto(data.redirectUri || '/auth/login?autoLaunch=0');
+  };
 </script>
 
 <section id="dashboard-navbar" class="fixed h-[var(--navbar-height)] w-screen z-[900] text-sm">
-	<div
-		class="grid h-full md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] border-b dark:border-b-immich-dark-gray items-center py-2 bg-immich-bg dark:bg-immich-dark-bg"
-	>
-		<a
-			data-sveltekit-preload-data="hover"
-			class="flex gap-2 md:mx-6 mx-4 place-items-center"
-			href={AppRoute.PHOTOS}
-		>
-			<ImmichLogo height="35" width="35" />
-			<h1
-				class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary md:block hidden"
-			>
-				IMMICH
-			</h1>
-		</a>
-		<div class="flex justify-between gap-16 pr-6">
-			<div class="w-full max-w-5xl flex-1 pl-4 sm:block hidden">
-				<SearchBar grayTheme={true} />
-			</div>
+  <div
+    class="grid h-full md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] border-b dark:border-b-immich-dark-gray items-center py-2 bg-immich-bg dark:bg-immich-dark-bg"
+  >
+    <a data-sveltekit-preload-data="hover" class="flex gap-2 md:mx-6 mx-4 place-items-center" href={AppRoute.PHOTOS}>
+      <ImmichLogo height="35" width="35" />
+      <h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary md:block hidden">
+        IMMICH
+      </h1>
+    </a>
+    <div class="flex justify-between gap-16 pr-6">
+      <div class="w-full max-w-5xl flex-1 pl-4 sm:block hidden">
+        <SearchBar grayTheme={true} />
+      </div>
 
-			<section class="flex gap-4 place-items-center justify-end max-sm:w-full">
-				<a href={AppRoute.SEARCH} id="search-button" class="sm:hidden pl-4">
-					<IconButton title="Search">
-						<div class="flex gap-2">
-							<Magnify size="1.5em" />
-						</div>
-					</IconButton>
-				</a>
+      <section class="flex gap-4 place-items-center justify-end max-sm:w-full">
+        <a href={AppRoute.SEARCH} id="search-button" class="sm:hidden pl-4">
+          <IconButton title="Search">
+            <div class="flex gap-2">
+              <Magnify size="1.5em" />
+            </div>
+          </IconButton>
+        </a>
 
-				<ThemeButton />
+        <ThemeButton />
 
-				{#if !$page.url.pathname.includes('/admin') && showUploadButton}
-					<div in:fly={{ x: 50, duration: 250 }}>
-						<LinkButton on:click={() => dispatch('uploadClicked')}>
-							<div class="flex gap-2">
-								<TrayArrowUp size="1.5em" />
-								<span class="md:block hidden">Upload</span>
-							</div>
-						</LinkButton>
-					</div>
-				{/if}
+        {#if !$page.url.pathname.includes('/admin') && showUploadButton}
+          <div in:fly={{ x: 50, duration: 250 }}>
+            <LinkButton on:click={() => dispatch('uploadClicked')}>
+              <div class="flex gap-2">
+                <TrayArrowUp size="1.5em" />
+                <span class="md:block hidden">Upload</span>
+              </div>
+            </LinkButton>
+          </div>
+        {/if}
 
-				{#if user.isAdmin}
-					<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
-						<div class="sm:block hidden">
-							<LinkButton>
-								<span
-									class={$page.url.pathname.includes('/admin')
-										? 'text-immich-primary dark:text-immich-dark-primary underline item'
-										: ''}
-								>
-									Administration
-								</span>
-							</LinkButton>
-						</div>
-						<div class="sm:hidden block">
-							<IconButton title="Administration">
-								<Cog
-									size="1.5em"
-									class="dark:text-immich-dark-fg {$page.url.pathname.includes('/admin')
-										? 'text-immich-primary dark:text-immich-dark-primary'
-										: ''}"
-								/>
-							</IconButton>
-							<hr
-								class={$page.url.pathname.includes('/admin')
-									? 'block border-1 w-2/3 mx-auto border-immich-primary dark:border-immich-dark-primary'
-									: 'hidden'}
-							/>
-						</div>
-					</a>
-				{/if}
+        {#if user.isAdmin}
+          <a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
+            <div class="sm:block hidden">
+              <LinkButton>
+                <span
+                  class={$page.url.pathname.includes('/admin')
+                    ? 'text-immich-primary dark:text-immich-dark-primary underline item'
+                    : ''}
+                >
+                  Administration
+                </span>
+              </LinkButton>
+            </div>
+            <div class="sm:hidden block">
+              <IconButton title="Administration">
+                <Cog
+                  size="1.5em"
+                  class="dark:text-immich-dark-fg {$page.url.pathname.includes('/admin')
+                    ? 'text-immich-primary dark:text-immich-dark-primary'
+                    : ''}"
+                />
+              </IconButton>
+              <hr
+                class={$page.url.pathname.includes('/admin')
+                  ? 'block border-1 w-2/3 mx-auto border-immich-primary dark:border-immich-dark-primary'
+                  : 'hidden'}
+              />
+            </div>
+          </a>
+        {/if}
 
-				<div use:clickOutside on:outclick={() => (shouldShowAccountInfoPanel = false)}>
-					<button
-						class="flex"
-						on:mouseover={() => (shouldShowAccountInfo = true)}
-						on:focus={() => (shouldShowAccountInfo = true)}
-						on:blur={() => (shouldShowAccountInfo = false)}
-						on:mouseleave={() => (shouldShowAccountInfo = false)}
-						on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
-					>
-						<UserAvatar {user} size="md" showTitle={false} interactive />
-					</button>
+        <div use:clickOutside on:outclick={() => (shouldShowAccountInfoPanel = false)}>
+          <button
+            class="flex"
+            on:mouseover={() => (shouldShowAccountInfo = true)}
+            on:focus={() => (shouldShowAccountInfo = true)}
+            on:blur={() => (shouldShowAccountInfo = false)}
+            on:mouseleave={() => (shouldShowAccountInfo = false)}
+            on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
+          >
+            <UserAvatar {user} size="md" showTitle={false} interactive />
+          </button>
 
-					{#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}
-						<div
-							in:fade={{ delay: 500, duration: 150 }}
-							out:fade={{ delay: 200, duration: 150 }}
-							class="absolute -bottom-12 right-5 border bg-gray-500 dark:bg-immich-dark-gray text-[12px] text-gray-100 p-2 rounded-md shadow-md dark:border-immich-dark-gray"
-						>
-							<p>{user.firstName} {user.lastName}</p>
-							<p>{user.email}</p>
-						</div>
-					{/if}
+          {#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}
+            <div
+              in:fade={{ delay: 500, duration: 150 }}
+              out:fade={{ delay: 200, duration: 150 }}
+              class="absolute -bottom-12 right-5 border bg-gray-500 dark:bg-immich-dark-gray text-[12px] text-gray-100 p-2 rounded-md shadow-md dark:border-immich-dark-gray"
+            >
+              <p>{user.firstName} {user.lastName}</p>
+              <p>{user.email}</p>
+            </div>
+          {/if}
 
-					{#if shouldShowAccountInfoPanel}
-						<AccountInfoPanel {user} on:logout={logOut} />
-					{/if}
-				</div>
-			</section>
-		</div>
-	</div>
+          {#if shouldShowAccountInfoPanel}
+            <AccountInfoPanel {user} on:logout={logOut} />
+          {/if}
+        </div>
+      </section>
+    </div>
+  </div>
 </section>
 
 <style>
-	:root {
-		/* Used by layouts to ensure proper spacing between navbar and content */
-		--navbar-height: calc(theme(spacing.18) + 4px);
-	}
+  :root {
+    /* Used by layouts to ensure proper spacing between navbar and content */
+    --navbar-height: calc(theme(spacing.18) + 4px);
+  }
 </style>
diff --git a/web/src/lib/components/shared-components/navigation-loading-bar.svelte b/web/src/lib/components/shared-components/navigation-loading-bar.svelte
index c4f7f63b0..bfca26ada 100644
--- a/web/src/lib/components/shared-components/navigation-loading-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-loading-bar.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { cubicOut } from 'svelte/easing';
-	import { tweened } from 'svelte/motion';
+  import { onMount } from 'svelte';
+  import { cubicOut } from 'svelte/easing';
+  import { tweened } from 'svelte/motion';
 
-	const progress = tweened(0, {
-		duration: 1000,
-		easing: cubicOut
-	});
+  const progress = tweened(0, {
+    duration: 1000,
+    easing: cubicOut,
+  });
 
-	onMount(() => {
-		progress.set(90);
-	});
+  onMount(() => {
+    progress.set(90);
+  });
 </script>
 
 <div class="absolute top-0 left-0 w-screen h-[3px] bg-white z-[999999999]">
-	<span class="absolute bg-immich-primary h-[3px]" style:width={`${$progress}%`} />
+  <span class="absolute bg-immich-primary h-[3px]" style:width={`${$progress}%`} />
 </div>
diff --git a/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts b/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts
index 551f4fd23..dd1017ea3 100644
--- a/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts
+++ b/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts
@@ -1,41 +1,41 @@
-import { jest, describe, it } from '@jest/globals';
-import { render, cleanup, RenderResult } from '@testing-library/svelte';
+import { describe, it, jest } from '@jest/globals';
+import '@testing-library/jest-dom';
+import { cleanup, render, RenderResult } from '@testing-library/svelte';
 import { NotificationType } from '../notification';
 import NotificationCard from '../notification-card.svelte';
-import '@testing-library/jest-dom';
 
 describe('NotificationCard component', () => {
-	let sut: RenderResult<NotificationCard>;
+  let sut: RenderResult<NotificationCard>;
 
-	it('disposes timeout if already removed from the DOM', () => {
-		jest.spyOn(window, 'clearTimeout');
+  it('disposes timeout if already removed from the DOM', () => {
+    jest.spyOn(window, 'clearTimeout');
 
-		sut = render(NotificationCard, {
-			notificationInfo: {
-				id: 1234,
-				message: 'Notification message',
-				timeout: 1000,
-				type: NotificationType.Info,
-				action: { type: 'discard' }
-			}
-		});
+    sut = render(NotificationCard, {
+      notificationInfo: {
+        id: 1234,
+        message: 'Notification message',
+        timeout: 1000,
+        type: NotificationType.Info,
+        action: { type: 'discard' },
+      },
+    });
 
-		cleanup();
-		expect(window.clearTimeout).toHaveBeenCalledTimes(1);
-	});
+    cleanup();
+    expect(window.clearTimeout).toHaveBeenCalledTimes(1);
+  });
 
-	it('shows message and title', () => {
-		sut = render(NotificationCard, {
-			notificationInfo: {
-				id: 1234,
-				message: 'Notification message',
-				timeout: 1000,
-				type: NotificationType.Info,
-				action: { type: 'discard' }
-			}
-		});
+  it('shows message and title', () => {
+    sut = render(NotificationCard, {
+      notificationInfo: {
+        id: 1234,
+        message: 'Notification message',
+        timeout: 1000,
+        type: NotificationType.Info,
+        action: { type: 'discard' },
+      },
+    });
 
-		expect(sut.getByTestId('title')).toHaveTextContent('Info');
-		expect(sut.getByTestId('message')).toHaveTextContent('Notification message');
-	});
+    expect(sut.getByTestId('title')).toHaveTextContent('Info');
+    expect(sut.getByTestId('message')).toHaveTextContent('Notification message');
+  });
 });
diff --git a/web/src/lib/components/shared-components/notification/__tests__/notification-list.spec.ts b/web/src/lib/components/shared-components/notification/__tests__/notification-list.spec.ts
index 84ab73403..1ab5cd18c 100644
--- a/web/src/lib/components/shared-components/notification/__tests__/notification-list.spec.ts
+++ b/web/src/lib/components/shared-components/notification/__tests__/notification-list.spec.ts
@@ -1,44 +1,42 @@
-import { jest, describe, it } from '@jest/globals';
-import { render, RenderResult, waitFor } from '@testing-library/svelte';
-import { notificationController, NotificationType } from '../notification';
-import { get } from 'svelte/store';
-import NotificationList from '../notification-list.svelte';
+import { describe, it, jest } from '@jest/globals';
 import '@testing-library/jest-dom';
+import { render, RenderResult, waitFor } from '@testing-library/svelte';
+import { get } from 'svelte/store';
+import { notificationController, NotificationType } from '../notification';
+import NotificationList from '../notification-list.svelte';
 
-function _getNotificationListElement(
-	sut: RenderResult<NotificationList>
-): HTMLAnchorElement | null {
-	return sut.container.querySelector('#notification-list');
+function _getNotificationListElement(sut: RenderResult<NotificationList>): HTMLAnchorElement | null {
+  return sut.container.querySelector('#notification-list');
 }
 
 describe('NotificationList component', () => {
-	const sut: RenderResult<NotificationList> = render(NotificationList);
+  const sut: RenderResult<NotificationList> = render(NotificationList);
 
-	beforeAll(() => {
-		jest.useFakeTimers();
-	});
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
 
-	afterAll(() => {
-		jest.useRealTimers();
-	});
+  afterAll(() => {
+    jest.useRealTimers();
+  });
 
-	it('shows a notification when added and closes it automatically after the delay timeout', async () => {
-		expect(_getNotificationListElement(sut)).not.toBeInTheDocument();
+  it('shows a notification when added and closes it automatically after the delay timeout', async () => {
+    expect(_getNotificationListElement(sut)).not.toBeInTheDocument();
 
-		notificationController.show({
-			message: 'Notification',
-			type: NotificationType.Info,
-			timeout: 3000
-		});
+    notificationController.show({
+      message: 'Notification',
+      type: NotificationType.Info,
+      timeout: 3000,
+    });
 
-		await waitFor(() => expect(_getNotificationListElement(sut)).toBeInTheDocument());
+    await waitFor(() => expect(_getNotificationListElement(sut)).toBeInTheDocument());
 
-		expect(_getNotificationListElement(sut)?.children).toHaveLength(1);
+    expect(_getNotificationListElement(sut)?.children).toHaveLength(1);
 
-		jest.advanceTimersByTime(3000);
-		// due to some weirdness in svelte (or testing-library) need to check if it has been removed from the store to make sure it works.
-		expect(get(notificationController.notificationList)).toHaveLength(0);
+    jest.advanceTimersByTime(3000);
+    // due to some weirdness in svelte (or testing-library) need to check if it has been removed from the store to make sure it works.
+    expect(get(notificationController.notificationList)).toHaveLength(0);
 
-		await waitFor(() => expect(_getNotificationListElement(sut)).not.toBeInTheDocument());
-	});
+    await waitFor(() => expect(_getNotificationListElement(sut)).not.toBeInTheDocument());
+  });
 });
diff --git a/web/src/lib/components/shared-components/notification/notification-card.svelte b/web/src/lib/components/shared-components/notification/notification-card.svelte
index 5bce6f692..1c11b2597 100644
--- a/web/src/lib/components/shared-components/notification/notification-card.svelte
+++ b/web/src/lib/components/shared-components/notification/notification-card.svelte
@@ -1,96 +1,95 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	import CloseCircleOutline from 'svelte-material-icons/CloseCircleOutline.svelte';
-	import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
-	import WindowClose from 'svelte-material-icons/WindowClose.svelte';
+  import { fade } from 'svelte/transition';
+  import CloseCircleOutline from 'svelte-material-icons/CloseCircleOutline.svelte';
+  import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
+  import WindowClose from 'svelte-material-icons/WindowClose.svelte';
 
-	import {
-		ImmichNotification,
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import { onMount } from 'svelte';
+  import {
+    ImmichNotification,
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { onMount } from 'svelte';
 
-	export let notificationInfo: ImmichNotification;
+  export let notificationInfo: ImmichNotification;
 
-	let infoPrimaryColor = '#4250AF';
-	let errorPrimaryColor = '#E64132';
+  let infoPrimaryColor = '#4250AF';
+  let errorPrimaryColor = '#E64132';
 
-	$: icon =
-		notificationInfo.type === NotificationType.Error ? CloseCircleOutline : InformationOutline;
+  $: icon = notificationInfo.type === NotificationType.Error ? CloseCircleOutline : InformationOutline;
 
-	$: backgroundColor = () => {
-		if (notificationInfo.type === NotificationType.Info) {
-			return '#E0E2F0';
-		}
+  $: backgroundColor = () => {
+    if (notificationInfo.type === NotificationType.Info) {
+      return '#E0E2F0';
+    }
 
-		if (notificationInfo.type === NotificationType.Error) {
-			return '#FBE8E6';
-		}
-	};
+    if (notificationInfo.type === NotificationType.Error) {
+      return '#FBE8E6';
+    }
+  };
 
-	$: borderStyle = () => {
-		if (notificationInfo.type === NotificationType.Info) {
-			return '1px solid #D8DDFF';
-		}
+  $: borderStyle = () => {
+    if (notificationInfo.type === NotificationType.Info) {
+      return '1px solid #D8DDFF';
+    }
 
-		if (notificationInfo.type === NotificationType.Error) {
-			return '1px solid #F0E8E7';
-		}
-	};
+    if (notificationInfo.type === NotificationType.Error) {
+      return '1px solid #F0E8E7';
+    }
+  };
 
-	$: primaryColor = () => {
-		if (notificationInfo.type === NotificationType.Info) {
-			return infoPrimaryColor;
-		}
+  $: primaryColor = () => {
+    if (notificationInfo.type === NotificationType.Info) {
+      return infoPrimaryColor;
+    }
 
-		if (notificationInfo.type === NotificationType.Error) {
-			return errorPrimaryColor;
-		}
-	};
+    if (notificationInfo.type === NotificationType.Error) {
+      return errorPrimaryColor;
+    }
+  };
 
-	let removeNotificationTimeout: NodeJS.Timeout | undefined = undefined;
+  let removeNotificationTimeout: NodeJS.Timeout | undefined = undefined;
 
-	onMount(() => {
-		removeNotificationTimeout = setTimeout(discard, notificationInfo.timeout);
-		return () => clearTimeout(removeNotificationTimeout);
-	});
+  onMount(() => {
+    removeNotificationTimeout = setTimeout(discard, notificationInfo.timeout);
+    return () => clearTimeout(removeNotificationTimeout);
+  });
 
-	const discard = () => {
-		notificationController.removeNotificationById(notificationInfo.id);
-	};
+  const discard = () => {
+    notificationController.removeNotificationById(notificationInfo.id);
+  };
 
-	const handleClick = () => {
-		const action = notificationInfo.action;
-		if (action.type == 'discard') {
-			discard();
-		} else if (action.type == 'link') {
-			window.open(action.target);
-		}
-	};
+  const handleClick = () => {
+    const action = notificationInfo.action;
+    if (action.type == 'discard') {
+      discard();
+    } else if (action.type == 'link') {
+      window.open(action.target);
+    }
+  };
 </script>
 
 <div
-	transition:fade={{ duration: 250 }}
-	style:background-color={backgroundColor()}
-	style:border={borderStyle()}
-	class="min-h-[80px] w-[300px] rounded-2xl z-[999999] shadow-md p-4 mb-4 hover:cursor-pointer"
-	on:click={handleClick}
-	on:keydown={handleClick}
+  transition:fade={{ duration: 250 }}
+  style:background-color={backgroundColor()}
+  style:border={borderStyle()}
+  class="min-h-[80px] w-[300px] rounded-2xl z-[999999] shadow-md p-4 mb-4 hover:cursor-pointer"
+  on:click={handleClick}
+  on:keydown={handleClick}
 >
-	<div class="flex justify-between">
-		<div class="flex gap-2 place-items-center">
-			<svelte:component this={icon} color={primaryColor()} size="20" />
-			<h2 style:color={primaryColor()} class="font-medium" data-testid="title">
-				{notificationInfo.type.toString()}
-			</h2>
-		</div>
-		<button on:click|stopPropagation={discard}>
-			<svelte:component this={WindowClose} size="20" />
-		</button>
-	</div>
+  <div class="flex justify-between">
+    <div class="flex gap-2 place-items-center">
+      <svelte:component this={icon} color={primaryColor()} size="20" />
+      <h2 style:color={primaryColor()} class="font-medium" data-testid="title">
+        {notificationInfo.type.toString()}
+      </h2>
+    </div>
+    <button on:click|stopPropagation={discard}>
+      <svelte:component this={WindowClose} size="20" />
+    </button>
+  </div>
 
-	<p class="whitespace-pre-wrap text-sm pl-[28px] pr-[16px]" data-testid="message">
-		{notificationInfo.message}
-	</p>
+  <p class="whitespace-pre-wrap text-sm pl-[28px] pr-[16px]" data-testid="message">
+    {notificationInfo.message}
+  </p>
 </div>
diff --git a/web/src/lib/components/shared-components/notification/notification-list.svelte b/web/src/lib/components/shared-components/notification/notification-list.svelte
index 205346b61..af795072a 100644
--- a/web/src/lib/components/shared-components/notification/notification-list.svelte
+++ b/web/src/lib/components/shared-components/notification/notification-list.svelte
@@ -1,24 +1,20 @@
 <script lang="ts">
-	import { notificationController } from './notification';
-	import { fade } from 'svelte/transition';
+  import { notificationController } from './notification';
+  import { fade } from 'svelte/transition';
 
-	import NotificationCard from './notification-card.svelte';
-	import { flip } from 'svelte/animate';
-	import { quintOut } from 'svelte/easing';
+  import NotificationCard from './notification-card.svelte';
+  import { flip } from 'svelte/animate';
+  import { quintOut } from 'svelte/easing';
 
-	const { notificationList } = notificationController;
+  const { notificationList } = notificationController;
 </script>
 
 {#if $notificationList.length > 0}
-	<section
-		transition:fade={{ duration: 250 }}
-		id="notification-list"
-		class="absolute right-5 top-[80px] z-[99999999]"
-	>
-		{#each $notificationList as notificationInfo (notificationInfo.id)}
-			<div animate:flip={{ duration: 250, easing: quintOut }}>
-				<NotificationCard {notificationInfo} />
-			</div>
-		{/each}
-	</section>
+  <section transition:fade={{ duration: 250 }} id="notification-list" class="absolute right-5 top-[80px] z-[99999999]">
+    {#each $notificationList as notificationInfo (notificationInfo.id)}
+      <div animate:flip={{ duration: 250, easing: quintOut }}>
+        <NotificationCard {notificationInfo} />
+      </div>
+    {/each}
+  </section>
 {/if}
diff --git a/web/src/lib/components/shared-components/notification/notification.ts b/web/src/lib/components/shared-components/notification/notification.ts
index 8dccdd653..ff1e6d595 100644
--- a/web/src/lib/components/shared-components/notification/notification.ts
+++ b/web/src/lib/components/shared-components/notification/notification.ts
@@ -1,16 +1,16 @@
 import { writable } from 'svelte/store';
 
 export enum NotificationType {
-	Info = 'Info',
-	Error = 'Error'
+  Info = 'Info',
+  Error = 'Error',
 }
 
 export class ImmichNotification {
-	id = new Date().getTime();
-	type!: NotificationType;
-	message!: string;
-	action!: NotificationAction;
-	timeout = 3000;
+  id = new Date().getTime();
+  type!: NotificationType;
+  message!: string;
+  action!: NotificationAction;
+  timeout = 3000;
 }
 
 type DiscardAction = { type: 'discard' };
@@ -19,50 +19,50 @@ type LinkAction = { type: 'link'; target: string };
 export type NotificationAction = DiscardAction | NoopAction | LinkAction;
 
 export class ImmichNotificationDto {
-	/**
-	 * Notification type
-	 * @type {NotificationType} [Info, Error]
-	 */
-	type: NotificationType = NotificationType.Info;
+  /**
+   * Notification type
+   * @type {NotificationType} [Info, Error]
+   */
+  type: NotificationType = NotificationType.Info;
 
-	/**
-	 * Notification message
-	 */
-	message = '';
+  /**
+   * Notification message
+   */
+  message = '';
 
-	/**
-	 * Timeout in miliseconds
-	 */
-	timeout?: number;
+  /**
+   * Timeout in miliseconds
+   */
+  timeout?: number;
 
-	/**
-	 * The action to take when the notification is clicked
-	 */
-	action?: NotificationAction;
+  /**
+   * The action to take when the notification is clicked
+   */
+  action?: NotificationAction;
 }
 
 function createNotificationList() {
-	const notificationList = writable<ImmichNotification[]>([]);
+  const notificationList = writable<ImmichNotification[]>([]);
 
-	const show = (notificationInfo: ImmichNotificationDto) => {
-		const newNotification = new ImmichNotification();
-		newNotification.message = notificationInfo.message;
-		newNotification.type = notificationInfo.type;
-		newNotification.timeout = notificationInfo.timeout || 3000;
-		newNotification.action = notificationInfo.action || { type: 'discard' };
+  const show = (notificationInfo: ImmichNotificationDto) => {
+    const newNotification = new ImmichNotification();
+    newNotification.message = notificationInfo.message;
+    newNotification.type = notificationInfo.type;
+    newNotification.timeout = notificationInfo.timeout || 3000;
+    newNotification.action = notificationInfo.action || { type: 'discard' };
 
-		notificationList.update((currentList) => [...currentList, newNotification]);
-	};
+    notificationList.update((currentList) => [...currentList, newNotification]);
+  };
 
-	const removeNotificationById = (id: number) => {
-		notificationList.update((currentList) => currentList.filter((n) => n.id != id));
-	};
+  const removeNotificationById = (id: number) => {
+    notificationList.update((currentList) => currentList.filter((n) => n.id != id));
+  };
 
-	return {
-		show,
-		removeNotificationById,
-		notificationList
-	};
+  return {
+    show,
+    removeNotificationById,
+    notificationList,
+  };
 }
 
 export const notificationController = createNotificationList();
diff --git a/web/src/lib/components/shared-components/portal/portal.svelte b/web/src/lib/components/shared-components/portal/portal.svelte
index 4443896d6..431950fd3 100644
--- a/web/src/lib/components/shared-components/portal/portal.svelte
+++ b/web/src/lib/components/shared-components/portal/portal.svelte
@@ -1,56 +1,56 @@
 <script context="module" lang="ts">
-	import { tick } from 'svelte';
+  import { tick } from 'svelte';
 
-	/**
-	 * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
-	 */
-	export function portal(el: HTMLElement, target: HTMLElement | string = 'body') {
-		let targetEl;
-		async function update(newTarget: HTMLElement | string) {
-			target = newTarget;
-			if (typeof target === 'string') {
-				targetEl = document.querySelector(target);
-				if (targetEl === null) {
-					await tick();
-					targetEl = document.querySelector(target);
-				}
-				if (targetEl === null) {
-					throw new Error(`No element found matching css selector: "${target}"`);
-				}
-			} else if (target instanceof HTMLElement) {
-				targetEl = target;
-			} else {
-				throw new TypeError(
-					`Unknown portal target type: ${
-						target === null ? 'null' : typeof target
-					}. Allowed types: string (CSS selector) or HTMLElement.`
-				);
-			}
-			targetEl.appendChild(el);
-			el.hidden = false;
-		}
+  /**
+   * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
+   */
+  export function portal(el: HTMLElement, target: HTMLElement | string = 'body') {
+    let targetEl;
+    async function update(newTarget: HTMLElement | string) {
+      target = newTarget;
+      if (typeof target === 'string') {
+        targetEl = document.querySelector(target);
+        if (targetEl === null) {
+          await tick();
+          targetEl = document.querySelector(target);
+        }
+        if (targetEl === null) {
+          throw new Error(`No element found matching css selector: "${target}"`);
+        }
+      } else if (target instanceof HTMLElement) {
+        targetEl = target;
+      } else {
+        throw new TypeError(
+          `Unknown portal target type: ${
+            target === null ? 'null' : typeof target
+          }. Allowed types: string (CSS selector) or HTMLElement.`,
+        );
+      }
+      targetEl.appendChild(el);
+      el.hidden = false;
+    }
 
-		function destroy() {
-			if (el.parentNode) {
-				el.parentNode.removeChild(el);
-			}
-		}
+    function destroy() {
+      if (el.parentNode) {
+        el.parentNode.removeChild(el);
+      }
+    }
 
-		update(target);
-		return {
-			update,
-			destroy
-		};
-	}
+    update(target);
+    return {
+      update,
+      destroy,
+    };
+  }
 </script>
 
 <script lang="ts">
-	/**
-	 * DOM Element or CSS Selector
-	 */
-	export let target: HTMLElement | string = 'body';
+  /**
+   * DOM Element or CSS Selector
+   */
+  export let target: HTMLElement | string = 'body';
 </script>
 
 <div use:portal={target} hidden>
-	<slot />
+  <slot />
 </div>
diff --git a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
index 4821f7531..2f707c961 100644
--- a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
+++ b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
@@ -1,161 +1,161 @@
 <script lang="ts" context="module">
-	type OnScrollbarClick = {
-		onscrollbarclick: OnScrollbarClickDetail;
-	};
+  type OnScrollbarClick = {
+    onscrollbarclick: OnScrollbarClickDetail;
+  };
 
-	export type OnScrollbarClickDetail = {
-		scrollTo: number;
-	};
+  export type OnScrollbarClickDetail = {
+    scrollTo: number;
+  };
 
-	type OnScrollbarDrag = {
-		onscrollbardrag: OnScrollbarDragDetail;
-	};
+  type OnScrollbarDrag = {
+    onscrollbardrag: OnScrollbarDragDetail;
+  };
 
-	export type OnScrollbarDragDetail = {
-		scrollTo: number;
-	};
+  export type OnScrollbarDragDetail = {
+    scrollTo: number;
+  };
 </script>
 
 <script lang="ts">
-	import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
+  import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
 
-	import { assetGridState } from '$lib/stores/assets.store';
+  import { assetGridState } from '$lib/stores/assets.store';
 
-	import { createEventDispatcher } from 'svelte';
-	import { SegmentScrollbarLayout } from './segment-scrollbar-layout';
+  import { createEventDispatcher } from 'svelte';
+  import { SegmentScrollbarLayout } from './segment-scrollbar-layout';
 
-	export let scrollTop = 0;
-	export let scrollbarHeight = 0;
+  export let scrollTop = 0;
+  export let scrollbarHeight = 0;
 
-	$: timelineHeight = $assetGridState.timelineHeight;
-	$: timelineScrolltop = (scrollbarPosition / scrollbarHeight) * timelineHeight;
+  $: timelineHeight = $assetGridState.timelineHeight;
+  $: timelineScrolltop = (scrollbarPosition / scrollbarHeight) * timelineHeight;
 
-	let segmentScrollbarLayout: SegmentScrollbarLayout[] = [];
-	let isHover = false;
-	let isDragging = false;
-	let hoveredDate: Date;
-	let currentMouseYLocation = 0;
-	let scrollbarPosition = 0;
-	let animationTick = false;
+  let segmentScrollbarLayout: SegmentScrollbarLayout[] = [];
+  let isHover = false;
+  let isDragging = false;
+  let hoveredDate: Date;
+  let currentMouseYLocation = 0;
+  let scrollbarPosition = 0;
+  let animationTick = false;
 
-	const { isAlbumAssetSelectionOpen } = albumAssetSelectionStore;
-	$: offset = $isAlbumAssetSelectionOpen ? 100 : 71;
-	const dispatchClick = createEventDispatcher<OnScrollbarClick>();
-	const dispatchDrag = createEventDispatcher<OnScrollbarDrag>();
-	$: {
-		scrollbarPosition = (scrollTop / timelineHeight) * scrollbarHeight;
-	}
+  const { isAlbumAssetSelectionOpen } = albumAssetSelectionStore;
+  $: offset = $isAlbumAssetSelectionOpen ? 100 : 71;
+  const dispatchClick = createEventDispatcher<OnScrollbarClick>();
+  const dispatchDrag = createEventDispatcher<OnScrollbarDrag>();
+  $: {
+    scrollbarPosition = (scrollTop / timelineHeight) * scrollbarHeight;
+  }
 
-	$: {
-		let result: SegmentScrollbarLayout[] = [];
-		for (const bucket of $assetGridState.buckets) {
-			let segmentLayout = new SegmentScrollbarLayout();
-			segmentLayout.count = bucket.assets.length;
-			segmentLayout.height = (bucket.bucketHeight / timelineHeight) * scrollbarHeight;
-			segmentLayout.timeGroup = bucket.bucketDate;
-			result.push(segmentLayout);
-		}
-		segmentScrollbarLayout = result;
-	}
+  $: {
+    let result: SegmentScrollbarLayout[] = [];
+    for (const bucket of $assetGridState.buckets) {
+      let segmentLayout = new SegmentScrollbarLayout();
+      segmentLayout.count = bucket.assets.length;
+      segmentLayout.height = (bucket.bucketHeight / timelineHeight) * scrollbarHeight;
+      segmentLayout.timeGroup = bucket.bucketDate;
+      result.push(segmentLayout);
+    }
+    segmentScrollbarLayout = result;
+  }
 
-	const handleMouseMove = (e: MouseEvent, currentDate: Date) => {
-		currentMouseYLocation = e.clientY - offset - 30;
+  const handleMouseMove = (e: MouseEvent, currentDate: Date) => {
+    currentMouseYLocation = e.clientY - offset - 30;
 
-		hoveredDate = new Date(currentDate.toISOString().slice(0, -1));
-	};
+    hoveredDate = new Date(currentDate.toISOString().slice(0, -1));
+  };
 
-	const handleMouseDown = (e: MouseEvent) => {
-		isDragging = true;
-		scrollbarPosition = e.clientY - offset;
-	};
+  const handleMouseDown = (e: MouseEvent) => {
+    isDragging = true;
+    scrollbarPosition = e.clientY - offset;
+  };
 
-	const handleMouseUp = (e: MouseEvent) => {
-		isDragging = false;
-		scrollbarPosition = e.clientY - offset;
-		dispatchClick('onscrollbarclick', { scrollTo: timelineScrolltop });
-	};
+  const handleMouseUp = (e: MouseEvent) => {
+    isDragging = false;
+    scrollbarPosition = e.clientY - offset;
+    dispatchClick('onscrollbarclick', { scrollTo: timelineScrolltop });
+  };
 
-	const handleMouseDrag = (e: MouseEvent) => {
-		if (isDragging) {
-			if (!animationTick) {
-				window.requestAnimationFrame(() => {
-					const dy = e.clientY - scrollbarPosition - offset;
-					scrollbarPosition += dy;
-					dispatchDrag('onscrollbardrag', { scrollTo: timelineScrolltop });
-					animationTick = false;
-				});
+  const handleMouseDrag = (e: MouseEvent) => {
+    if (isDragging) {
+      if (!animationTick) {
+        window.requestAnimationFrame(() => {
+          const dy = e.clientY - scrollbarPosition - offset;
+          scrollbarPosition += dy;
+          dispatchDrag('onscrollbardrag', { scrollTo: timelineScrolltop });
+          animationTick = false;
+        });
 
-				animationTick = true;
-			}
-		}
-	};
+        animationTick = true;
+      }
+    }
+  };
 </script>
 
 <div
-	id="immich-scrubbable-scrollbar"
-	class="fixed right-0 bg-immich-bg z-[100] hover:cursor-row-resize select-none"
-	style:width={isDragging ? '100vw' : '60px'}
-	style:background-color={isDragging ? 'transparent' : 'transparent'}
-	on:mouseenter={() => (isHover = true)}
-	on:mouseleave={() => {
-		isHover = false;
-		isDragging = false;
-	}}
-	on:mouseup={handleMouseUp}
-	on:mousemove={handleMouseDrag}
-	on:mousedown={handleMouseDown}
-	style:height={scrollbarHeight + 'px'}
+  id="immich-scrubbable-scrollbar"
+  class="fixed right-0 bg-immich-bg z-[100] hover:cursor-row-resize select-none"
+  style:width={isDragging ? '100vw' : '60px'}
+  style:background-color={isDragging ? 'transparent' : 'transparent'}
+  on:mouseenter={() => (isHover = true)}
+  on:mouseleave={() => {
+    isHover = false;
+    isDragging = false;
+  }}
+  on:mouseup={handleMouseUp}
+  on:mousemove={handleMouseDrag}
+  on:mousedown={handleMouseDown}
+  style:height={scrollbarHeight + 'px'}
 >
-	{#if isHover}
-		<div
-			class="border-b-2 border-immich-primary dark:border-immich-dark-primary w-[100px] right-0 pr-6 py-1 text-sm pl-1 font-medium absolute bg-immich-bg dark:bg-immich-dark-gray z-[100] pointer-events-none rounded-tl-md shadow-lg dark:text-immich-dark-fg"
-			style:top={currentMouseYLocation + 'px'}
-		>
-			{hoveredDate?.toLocaleString('default', { month: 'short' })}
-			{hoveredDate?.getFullYear()}
-		</div>
-	{/if}
+  {#if isHover}
+    <div
+      class="border-b-2 border-immich-primary dark:border-immich-dark-primary w-[100px] right-0 pr-6 py-1 text-sm pl-1 font-medium absolute bg-immich-bg dark:bg-immich-dark-gray z-[100] pointer-events-none rounded-tl-md shadow-lg dark:text-immich-dark-fg"
+      style:top={currentMouseYLocation + 'px'}
+    >
+      {hoveredDate?.toLocaleString('default', { month: 'short' })}
+      {hoveredDate?.getFullYear()}
+    </div>
+  {/if}
 
-	<!-- Scroll Position Indicator Line -->
-	{#if !isDragging}
-		<div
-			class="absolute right-0 w-10 h-[2px] bg-immich-primary dark:bg-immich-dark-primary"
-			style:top={scrollbarPosition + 'px'}
-		/>
-	{/if}
-	<!-- Time Segment -->
-	{#each segmentScrollbarLayout as segment, index (segment.timeGroup)}
-		{@const groupDate = new Date(segment.timeGroup)}
+  <!-- Scroll Position Indicator Line -->
+  {#if !isDragging}
+    <div
+      class="absolute right-0 w-10 h-[2px] bg-immich-primary dark:bg-immich-dark-primary"
+      style:top={scrollbarPosition + 'px'}
+    />
+  {/if}
+  <!-- Time Segment -->
+  {#each segmentScrollbarLayout as segment, index (segment.timeGroup)}
+    {@const groupDate = new Date(segment.timeGroup)}
 
-		<div
-			id="time-segment"
-			class="relative"
-			style:height={segment.height + 'px'}
-			aria-label={segment.timeGroup + ' ' + segment.count}
-			on:mousemove={(e) => handleMouseMove(e, groupDate)}
-		>
-			{#if new Date(segmentScrollbarLayout[index - 1]?.timeGroup).getFullYear() !== groupDate.getFullYear()}
-				{#if segment.height > 8}
-					<div
-						aria-label={segment.timeGroup + ' ' + segment.count}
-						class="absolute right-0 pr-5 z-10 text-xs font-medium dark:text-immich-dark-fg"
-					>
-						{groupDate.getFullYear()}
-					</div>
-				{/if}
-			{:else if segment.height > 5}
-				<div
-					aria-label={segment.timeGroup + ' ' + segment.count}
-					class="absolute right-0 rounded-full h-[4px] w-[4px] mr-3 bg-gray-300 block"
-				/>
-			{/if}
-		</div>
-	{/each}
+    <div
+      id="time-segment"
+      class="relative"
+      style:height={segment.height + 'px'}
+      aria-label={segment.timeGroup + ' ' + segment.count}
+      on:mousemove={(e) => handleMouseMove(e, groupDate)}
+    >
+      {#if new Date(segmentScrollbarLayout[index - 1]?.timeGroup).getFullYear() !== groupDate.getFullYear()}
+        {#if segment.height > 8}
+          <div
+            aria-label={segment.timeGroup + ' ' + segment.count}
+            class="absolute right-0 pr-5 z-10 text-xs font-medium dark:text-immich-dark-fg"
+          >
+            {groupDate.getFullYear()}
+          </div>
+        {/if}
+      {:else if segment.height > 5}
+        <div
+          aria-label={segment.timeGroup + ' ' + segment.count}
+          class="absolute right-0 rounded-full h-[4px] w-[4px] mr-3 bg-gray-300 block"
+        />
+      {/if}
+    </div>
+  {/each}
 </div>
 
 <style>
-	#immich-scrubbable-scrollbar,
-	#time-segment {
-		contain: layout;
-	}
+  #immich-scrubbable-scrollbar,
+  #time-segment {
+    contain: layout;
+  }
 </style>
diff --git a/web/src/lib/components/shared-components/scrollbar/segment-scrollbar-layout.ts b/web/src/lib/components/shared-components/scrollbar/segment-scrollbar-layout.ts
index 337ee47f0..c62a94274 100644
--- a/web/src/lib/components/shared-components/scrollbar/segment-scrollbar-layout.ts
+++ b/web/src/lib/components/shared-components/scrollbar/segment-scrollbar-layout.ts
@@ -1,5 +1,5 @@
 export class SegmentScrollbarLayout {
-	height!: number;
-	timeGroup!: string;
-	count!: number;
+  height!: number;
+  timeGroup!: string;
+  count!: number;
 }
diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
index 8726da558..8ae28760c 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -1,129 +1,129 @@
 <script lang="ts">
-	import { AppRoute } from '$lib/constants';
-	import Magnify from 'svelte-material-icons/Magnify.svelte';
-	import Close from 'svelte-material-icons/Close.svelte';
-	import { goto } from '$app/navigation';
-	import { savedSearchTerms } from '$lib/stores/search.store';
-	import { fly } from 'svelte/transition';
-	export let value = '';
-	export let grayTheme: boolean;
+  import { AppRoute } from '$lib/constants';
+  import Magnify from 'svelte-material-icons/Magnify.svelte';
+  import Close from 'svelte-material-icons/Close.svelte';
+  import { goto } from '$app/navigation';
+  import { savedSearchTerms } from '$lib/stores/search.store';
+  import { fly } from 'svelte/transition';
+  export let value = '';
+  export let grayTheme: boolean;
 
-	let showBigSearchBar = false;
-	$: showClearIcon = value.length > 0;
+  let showBigSearchBar = false;
+  $: showClearIcon = value.length > 0;
 
-	function onSearch(saveSearch: boolean) {
-		let clipSearch = 'true';
-		let searchValue = value;
+  function onSearch(saveSearch: boolean) {
+    let clipSearch = 'true';
+    let searchValue = value;
 
-		if (value.slice(0, 2) == 'm:') {
-			clipSearch = 'false';
-			searchValue = value.slice(2);
-		}
+    if (value.slice(0, 2) == 'm:') {
+      clipSearch = 'false';
+      searchValue = value.slice(2);
+    }
 
-		if (saveSearch) {
-			saveSearchTerm(value);
-		}
+    if (saveSearch) {
+      saveSearchTerm(value);
+    }
 
-		const params = new URLSearchParams({
-			q: searchValue,
-			clip: clipSearch
-		});
+    const params = new URLSearchParams({
+      q: searchValue,
+      clip: clipSearch,
+    });
 
-		goto(`${AppRoute.SEARCH}?${params}`);
-	}
+    goto(`${AppRoute.SEARCH}?${params}`);
+  }
 
-	const saveSearchTerm = (saveValue: string) => {
-		$savedSearchTerms = [saveValue, ...$savedSearchTerms];
+  const saveSearchTerm = (saveValue: string) => {
+    $savedSearchTerms = [saveValue, ...$savedSearchTerms];
 
-		if ($savedSearchTerms.length > 5) {
-			$savedSearchTerms = $savedSearchTerms.slice(0, 5);
-		}
-	};
+    if ($savedSearchTerms.length > 5) {
+      $savedSearchTerms = $savedSearchTerms.slice(0, 5);
+    }
+  };
 
-	const clearSearchTerm = () => {
-		$savedSearchTerms = [];
-	};
+  const clearSearchTerm = () => {
+    $savedSearchTerms = [];
+  };
 </script>
 
 <form
-	draggable="false"
-	autocomplete="off"
-	class="relative text-sm"
-	action={AppRoute.SEARCH}
-	on:reset={() => (value = '')}
-	on:submit|preventDefault={() => onSearch(true)}
-	on:focusin={() => (showBigSearchBar = true)}
-	on:focusout={() => (showBigSearchBar = false)}
+  draggable="false"
+  autocomplete="off"
+  class="relative text-sm"
+  action={AppRoute.SEARCH}
+  on:reset={() => (value = '')}
+  on:submit|preventDefault={() => onSearch(true)}
+  on:focusin={() => (showBigSearchBar = true)}
+  on:focusout={() => (showBigSearchBar = false)}
 >
-	<label>
-		<div class="absolute inset-y-0 left-0 flex items-center pl-6">
-			<div class="pointer-events-none dark:text-immich-dark-fg/75">
-				<Magnify size="1.5em" />
-			</div>
-		</div>
-		<input
-			type="text"
-			name="q"
-			class="w-full transition-all {grayTheme
-				? 'dark:bg-immich-dark-gray'
-				: 'dark:bg-immich-dark-bg'} text-immich-fg/75 dark:text-immich-dark-fg px-14 py-4 {showBigSearchBar
-				? 'rounded-t-3xl bg-white  border border-gray-200 dark:border-gray-800'
-				: 'rounded-3xl bg-gray-200 border border-transparent'}"
-			placeholder="Search your photos"
-			required
-			pattern="^(?!m:$).*$"
-			bind:value
-		/>
-	</label>
-	{#if showClearIcon}
-		<div class="absolute inset-y-0 right-0 flex items-center pr-4">
-			<button
-				type="reset"
-				class="dark:text-immich-dark-fg/75 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 rounded-full p-2 active:bg-immich-primary/10 dark:active:bg-immich-dark-primary/[.35]"
-			>
-				<Close size="1.5em" />
-			</button>
-		</div>
-	{/if}
+  <label>
+    <div class="absolute inset-y-0 left-0 flex items-center pl-6">
+      <div class="pointer-events-none dark:text-immich-dark-fg/75">
+        <Magnify size="1.5em" />
+      </div>
+    </div>
+    <input
+      type="text"
+      name="q"
+      class="w-full transition-all {grayTheme
+        ? 'dark:bg-immich-dark-gray'
+        : 'dark:bg-immich-dark-bg'} text-immich-fg/75 dark:text-immich-dark-fg px-14 py-4 {showBigSearchBar
+        ? 'rounded-t-3xl bg-white  border border-gray-200 dark:border-gray-800'
+        : 'rounded-3xl bg-gray-200 border border-transparent'}"
+      placeholder="Search your photos"
+      required
+      pattern="^(?!m:$).*$"
+      bind:value
+    />
+  </label>
+  {#if showClearIcon}
+    <div class="absolute inset-y-0 right-0 flex items-center pr-4">
+      <button
+        type="reset"
+        class="dark:text-immich-dark-fg/75 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 rounded-full p-2 active:bg-immich-primary/10 dark:active:bg-immich-dark-primary/[.35]"
+      >
+        <Close size="1.5em" />
+      </button>
+    </div>
+  {/if}
 
-	{#if showBigSearchBar}
-		<div
-			transition:fly={{ y: 25, duration: 250 }}
-			class="w-full pb-5 absolute bg-white transition-all rounded-b-3xl shadow-2xl border border-gray-200 dark:bg-immich-dark-gray dark:border-gray-800 dark:text-gray-300"
-		>
-			<div class="px-5 pt-5 text-xs">
-				<p>
-					Smart search is enabled by default, to search for metadata use the syntax <span
-						class="font-mono p-2 font-semibold text-immich-primary dark:text-immich-dark-primary bg-gray-100 rounded-lg dark:bg-gray-900 leading-7"
-						>m:your-search-term</span
-					>
-				</p>
-			</div>
+  {#if showBigSearchBar}
+    <div
+      transition:fly={{ y: 25, duration: 250 }}
+      class="w-full pb-5 absolute bg-white transition-all rounded-b-3xl shadow-2xl border border-gray-200 dark:bg-immich-dark-gray dark:border-gray-800 dark:text-gray-300"
+    >
+      <div class="px-5 pt-5 text-xs">
+        <p>
+          Smart search is enabled by default, to search for metadata use the syntax <span
+            class="font-mono p-2 font-semibold text-immich-primary dark:text-immich-dark-primary bg-gray-100 rounded-lg dark:bg-gray-900 leading-7"
+            >m:your-search-term</span
+          >
+        </p>
+      </div>
 
-			{#if $savedSearchTerms.length > 0}
-				<div class="px-5 pt-5 text-xs flex justify-between">
-					<p>RECENT SEARCHES</p>
-					<button
-						type="button"
-						class="text-immich-primary dark:text-immich-dark-primary font-semibold p-2 hover:bg-immich-primary/25 rounded-lg"
-						on:click={clearSearchTerm}>Clear all</button
-					>
-				</div>
-			{/if}
+      {#if $savedSearchTerms.length > 0}
+        <div class="px-5 pt-5 text-xs flex justify-between">
+          <p>RECENT SEARCHES</p>
+          <button
+            type="button"
+            class="text-immich-primary dark:text-immich-dark-primary font-semibold p-2 hover:bg-immich-primary/25 rounded-lg"
+            on:click={clearSearchTerm}>Clear all</button
+          >
+        </div>
+      {/if}
 
-			{#each $savedSearchTerms as savedSearchTerm, i (i)}
-				<button
-					type="button"
-					class="w-full hover:bg-gray-100 dark:hover:bg-gray-500/10 px-5 py-3 cursor-pointer flex gap-3 text-black dark:text-gray-300"
-					on:click={() => {
-						value = savedSearchTerm;
-						onSearch(false);
-					}}
-				>
-					<Magnify size="1.5em" />
-					{savedSearchTerm}
-				</button>
-			{/each}
-		</div>
-	{/if}
+      {#each $savedSearchTerms as savedSearchTerm, i (i)}
+        <button
+          type="button"
+          class="w-full hover:bg-gray-100 dark:hover:bg-gray-500/10 px-5 py-3 cursor-pointer flex gap-3 text-black dark:text-gray-300"
+          on:click={() => {
+            value = savedSearchTerm;
+            onSearch(false);
+          }}
+        >
+          <Magnify size="1.5em" />
+          {savedSearchTerm}
+        </button>
+      {/each}
+    </div>
+  {/if}
 </form>
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
index 0ac581566..ec0858a96 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
@@ -1,64 +1,60 @@
 <script lang="ts">
-	import type Icon from 'svelte-material-icons/AbTesting.svelte';
-	import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
-	import { fade } from 'svelte/transition';
-	import { createEventDispatcher } from 'svelte';
+  import type Icon from 'svelte-material-icons/AbTesting.svelte';
+  import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
+  import { fade } from 'svelte/transition';
+  import { createEventDispatcher } from 'svelte';
 
-	export let title: string;
-	export let logo: typeof Icon;
-	export let isSelected: boolean;
-	export let flippedLogo = false;
+  export let title: string;
+  export let logo: typeof Icon;
+  export let isSelected: boolean;
+  export let flippedLogo = false;
 
-	let showMoreInformation = false;
+  let showMoreInformation = false;
 
-	const dispatch = createEventDispatcher();
-	const onButtonClicked = () => dispatch('selected');
+  const dispatch = createEventDispatcher();
+  const onButtonClicked = () => dispatch('selected');
 </script>
 
 <div
-	on:click={onButtonClicked}
-	on:keydown={onButtonClicked}
-	class="flex gap-4 justify-between place-items-center w-full transition-[padding] delay-100 duration-100 py-3 rounded-r-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
+  on:click={onButtonClicked}
+  on:keydown={onButtonClicked}
+  class="flex gap-4 justify-between place-items-center w-full transition-[padding] delay-100 duration-100 py-3 rounded-r-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
     {isSelected
-		? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-immich-dark-primary hover:bg-immich-primary/25'
-		: ''}
+    ? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-immich-dark-primary hover:bg-immich-primary/25'
+    : ''}
 		pl-5 group-hover:sm:px-5 md:px-5
   "
 >
-	<div class="flex gap-4 place-items-center w-full overflow-hidden truncate">
-		<svelte:component
-			this={logo}
-			size="1.5em"
-			class="shrink-0 {flippedLogo ? '-scale-x-100' : ''}"
-		/>
-		<p class="font-medium text-sm">{title}</p>
-	</div>
+  <div class="flex gap-4 place-items-center w-full overflow-hidden truncate">
+    <svelte:component this={logo} size="1.5em" class="shrink-0 {flippedLogo ? '-scale-x-100' : ''}" />
+    <p class="font-medium text-sm">{title}</p>
+  </div>
 
-	<div
-		class="transition-[height] group-hover:sm:overflow-visible md:overflow-visible overflow-hidden duration-100 delay-1000 sm:group-hover:h-auto md:h-auto h-0"
-	>
-		{#if $$slots.moreInformation}
-			<div
-				class="relative flex justify-center select-none cursor-default"
-				on:mouseenter={() => (showMoreInformation = true)}
-				on:mouseleave={() => (showMoreInformation = false)}
-			>
-				<div class="hover:cursor-help p-1 text-gray-600 dark:text-gray-400">
-					<InformationOutline />
-				</div>
+  <div
+    class="transition-[height] group-hover:sm:overflow-visible md:overflow-visible overflow-hidden duration-100 delay-1000 sm:group-hover:h-auto md:h-auto h-0"
+  >
+    {#if $$slots.moreInformation}
+      <div
+        class="relative flex justify-center select-none cursor-default"
+        on:mouseenter={() => (showMoreInformation = true)}
+        on:mouseleave={() => (showMoreInformation = false)}
+      >
+        <div class="hover:cursor-help p-1 text-gray-600 dark:text-gray-400">
+          <InformationOutline />
+        </div>
 
-				{#if showMoreInformation}
-					<div class="absolute right-6 top-0">
-						<div
-							class="flex place-items-center place-content-center whitespace-nowrap rounded-3xl shadow-lg py-3 px-6 bg-immich-bg text-immich-fg dark:bg-gray-600 dark:text-immich-dark-fg text-xs border dark:border-immich-dark-gray"
-							class:hidden={!showMoreInformation}
-							transition:fade={{ duration: 200 }}
-						>
-							<slot name="moreInformation" />
-						</div>
-					</div>
-				{/if}
-			</div>
-		{/if}
-	</div>
+        {#if showMoreInformation}
+          <div class="absolute right-6 top-0">
+            <div
+              class="flex place-items-center place-content-center whitespace-nowrap rounded-3xl shadow-lg py-3 px-6 bg-immich-bg text-immich-fg dark:bg-gray-600 dark:text-immich-dark-fg text-xs border dark:border-immich-dark-gray"
+              class:hidden={!showMoreInformation}
+              transition:fade={{ duration: 200 }}
+            >
+              <slot name="moreInformation" />
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
 </div>
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
index 5ec4b755e..4e72c46d1 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
@@ -2,8 +2,8 @@
 </script>
 
 <section
-	id="sidebar"
-	class="group flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-all duration-200 z-10 w-18 md:w-64 hover:sm:pr-6 md:pr-6 hover:sm:w-64 hover:sm:shadow-2xl hover:md:shadow-none hover:md:border-none hover:sm:border-r hover:sm:dark:border-r-immich-dark-gray relative overflow-y-auto immich-scrollbar"
+  id="sidebar"
+  class="group flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-all duration-200 z-10 w-18 md:w-64 hover:sm:pr-6 md:pr-6 hover:sm:w-64 hover:sm:shadow-2xl hover:md:shadow-none hover:md:border-none hover:sm:border-r hover:sm:dark:border-r-immich-dark-gray relative overflow-y-auto immich-scrollbar"
 >
-	<slot />
+  <slot />
 </section>
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index 12513701f..3d985661a 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
@@ -1,197 +1,174 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import { api } from '@api';
-	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
-	import AccountMultiple from 'svelte-material-icons/AccountMultiple.svelte';
-	import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
-	import ImageMultipleOutline from 'svelte-material-icons/ImageMultipleOutline.svelte';
-	import ImageMultiple from 'svelte-material-icons/ImageMultiple.svelte';
-	import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
-	import Magnify from 'svelte-material-icons/Magnify.svelte';
-	import Map from 'svelte-material-icons/Map.svelte';
-	import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
-	import HeartMultiple from 'svelte-material-icons/HeartMultiple.svelte';
-	import { AppRoute } from '../../../constants';
-	import LoadingSpinner from '../loading-spinner.svelte';
-	import StatusBox from '../status-box.svelte';
-	import SideBarButton from './side-bar-button.svelte';
-	import { locale } from '$lib/stores/preferences.store';
-	import SideBarSection from './side-bar-section.svelte';
+  import { page } from '$app/stores';
+  import { api } from '@api';
+  import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
+  import AccountMultiple from 'svelte-material-icons/AccountMultiple.svelte';
+  import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
+  import ImageMultipleOutline from 'svelte-material-icons/ImageMultipleOutline.svelte';
+  import ImageMultiple from 'svelte-material-icons/ImageMultiple.svelte';
+  import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
+  import Magnify from 'svelte-material-icons/Magnify.svelte';
+  import Map from 'svelte-material-icons/Map.svelte';
+  import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
+  import HeartMultiple from 'svelte-material-icons/HeartMultiple.svelte';
+  import { AppRoute } from '../../../constants';
+  import LoadingSpinner from '../loading-spinner.svelte';
+  import StatusBox from '../status-box.svelte';
+  import SideBarButton from './side-bar-button.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import SideBarSection from './side-bar-section.svelte';
 
-	const getAssetCount = async () => {
-		const { data: allAssetCount } = await api.assetApi.getAssetCountByUserId();
-		const { data: archivedCount } = await api.assetApi.getArchivedAssetCountByUserId();
+  const getAssetCount = async () => {
+    const { data: allAssetCount } = await api.assetApi.getAssetCountByUserId();
+    const { data: archivedCount } = await api.assetApi.getArchivedAssetCountByUserId();
 
-		return {
-			videos: allAssetCount.videos - archivedCount.videos,
-			photos: allAssetCount.photos - archivedCount.photos
-		};
-	};
+    return {
+      videos: allAssetCount.videos - archivedCount.videos,
+      photos: allAssetCount.photos - archivedCount.photos,
+    };
+  };
 
-	const getFavoriteCount = async () => {
-		try {
-			const { data: assets } = await api.assetApi.getAllAssets({
-				isFavorite: true,
-				withoutThumbs: true
-			});
+  const getFavoriteCount = async () => {
+    try {
+      const { data: assets } = await api.assetApi.getAllAssets({
+        isFavorite: true,
+        withoutThumbs: true,
+      });
 
-			return {
-				favorites: assets.length
-			};
-		} catch {
-			return {
-				favorites: 0
-			};
-		}
-	};
+      return {
+        favorites: assets.length,
+      };
+    } catch {
+      return {
+        favorites: 0,
+      };
+    }
+  };
 
-	const getAlbumCount = async () => {
-		try {
-			const { data: albumCount } = await api.albumApi.getAlbumCount();
-			return albumCount;
-		} catch {
-			return { owned: 0, shared: 0, notShared: 0 };
-		}
-	};
+  const getAlbumCount = async () => {
+    try {
+      const { data: albumCount } = await api.albumApi.getAlbumCount();
+      return albumCount;
+    } catch {
+      return { owned: 0, shared: 0, notShared: 0 };
+    }
+  };
 
-	const getArchivedAssetsCount = async () => {
-		try {
-			const { data: assetCount } = await api.assetApi.getArchivedAssetCountByUserId();
+  const getArchivedAssetsCount = async () => {
+    try {
+      const { data: assetCount } = await api.assetApi.getArchivedAssetCountByUserId();
 
-			return {
-				videos: assetCount.videos,
-				photos: assetCount.photos
-			};
-		} catch {
-			return {
-				videos: 0,
-				photos: 0
-			};
-		}
-	};
+      return {
+        videos: assetCount.videos,
+        photos: assetCount.photos,
+      };
+    } catch {
+      return {
+        videos: 0,
+        photos: 0,
+      };
+    }
+  };
 
-	const isFavoritesSelected = $page.route.id === '/(user)/favorites';
-	const isPhotosSelected = $page.route.id === '/(user)/photos';
-	const isSharingSelected = $page.route.id === '/(user)/sharing';
+  const isFavoritesSelected = $page.route.id === '/(user)/favorites';
+  const isPhotosSelected = $page.route.id === '/(user)/photos';
+  const isSharingSelected = $page.route.id === '/(user)/sharing';
 </script>
 
 <SideBarSection>
-	<a
-		data-sveltekit-preload-data="hover"
-		data-sveltekit-noscroll
-		href={AppRoute.PHOTOS}
-		draggable="false"
-	>
-		<SideBarButton
-			title="Photos"
-			logo={isPhotosSelected ? ImageMultiple : ImageMultipleOutline}
-			isSelected={isPhotosSelected}
-		>
-			<svelte:fragment slot="moreInformation">
-				{#await getAssetCount()}
-					<LoadingSpinner />
-				{:then data}
-					<div>
-						<p>{data.videos.toLocaleString($locale)} Videos</p>
-						<p>{data.photos.toLocaleString($locale)} Photos</p>
-					</div>
-				{/await}
-			</svelte:fragment>
-		</SideBarButton>
-	</a>
-	<a
-		data-sveltekit-preload-data="hover"
-		data-sveltekit-noscroll
-		href={AppRoute.EXPLORE}
-		draggable="false"
-	>
-		<SideBarButton
-			title="Explore"
-			logo={Magnify}
-			isSelected={$page.route.id === '/(user)/explore'}
-		/>
-	</a>
-	<a data-sveltekit-preload-data="hover" href={AppRoute.MAP} draggable="false">
-		<SideBarButton title="Map" logo={Map} isSelected={$page.route.id === '/(user)/map'} />
-	</a>
-	<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
-		<SideBarButton
-			title="Sharing"
-			logo={isSharingSelected ? AccountMultiple : AccountMultipleOutline}
-			isSelected={isSharingSelected}
-		>
-			<svelte:fragment slot="moreInformation">
-				{#await getAlbumCount()}
-					<LoadingSpinner />
-				{:then data}
-					<div>
-						<p>{data.shared.toLocaleString($locale)} Albums</p>
-					</div>
-				{/await}
-			</svelte:fragment>
-		</SideBarButton>
-	</a>
+  <a data-sveltekit-preload-data="hover" data-sveltekit-noscroll href={AppRoute.PHOTOS} draggable="false">
+    <SideBarButton
+      title="Photos"
+      logo={isPhotosSelected ? ImageMultiple : ImageMultipleOutline}
+      isSelected={isPhotosSelected}
+    >
+      <svelte:fragment slot="moreInformation">
+        {#await getAssetCount()}
+          <LoadingSpinner />
+        {:then data}
+          <div>
+            <p>{data.videos.toLocaleString($locale)} Videos</p>
+            <p>{data.photos.toLocaleString($locale)} Photos</p>
+          </div>
+        {/await}
+      </svelte:fragment>
+    </SideBarButton>
+  </a>
+  <a data-sveltekit-preload-data="hover" data-sveltekit-noscroll href={AppRoute.EXPLORE} draggable="false">
+    <SideBarButton title="Explore" logo={Magnify} isSelected={$page.route.id === '/(user)/explore'} />
+  </a>
+  <a data-sveltekit-preload-data="hover" href={AppRoute.MAP} draggable="false">
+    <SideBarButton title="Map" logo={Map} isSelected={$page.route.id === '/(user)/map'} />
+  </a>
+  <a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
+    <SideBarButton
+      title="Sharing"
+      logo={isSharingSelected ? AccountMultiple : AccountMultipleOutline}
+      isSelected={isSharingSelected}
+    >
+      <svelte:fragment slot="moreInformation">
+        {#await getAlbumCount()}
+          <LoadingSpinner />
+        {:then data}
+          <div>
+            <p>{data.shared.toLocaleString($locale)} Albums</p>
+          </div>
+        {/await}
+      </svelte:fragment>
+    </SideBarButton>
+  </a>
 
-	<div class="text-xs dark:text-immich-dark-fg transition-all duration-200">
-		<p class="p-6 hidden md:block group-hover:sm:block">LIBRARY</p>
-		<hr class="mt-8 mb-[31px] mx-4 block md:hidden group-hover:sm:hidden" />
-	</div>
-	<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
-		<SideBarButton
-			title="Favorites"
-			logo={isFavoritesSelected ? HeartMultiple : HeartMultipleOutline}
-			isSelected={isFavoritesSelected}
-		>
-			<svelte:fragment slot="moreInformation">
-				{#await getFavoriteCount()}
-					<LoadingSpinner />
-				{:then data}
-					<div>
-						<p>{data.favorites} Favorites</p>
-					</div>
-				{/await}
-			</svelte:fragment>
-		</SideBarButton>
-	</a>
-	<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} draggable="false">
-		<SideBarButton
-			title="Albums"
-			logo={ImageAlbum}
-			flippedLogo={true}
-			isSelected={$page.route.id === '/(user)/albums'}
-		>
-			<svelte:fragment slot="moreInformation">
-				{#await getAlbumCount()}
-					<LoadingSpinner />
-				{:then data}
-					<div>
-						<p>{data.owned.toLocaleString($locale)} Albums</p>
-					</div>
-				{/await}
-			</svelte:fragment>
-		</SideBarButton>
-	</a>
-	<a data-sveltekit-preload-data="hover" href={AppRoute.ARCHIVE} draggable="false">
-		<SideBarButton
-			title="Archive"
-			logo={ArchiveArrowDownOutline}
-			isSelected={$page.route.id === '/(user)/archive'}
-		>
-			<svelte:fragment slot="moreInformation">
-				{#await getArchivedAssetsCount()}
-					<LoadingSpinner />
-				{:then data}
-					<div>
-						<p>{data.videos.toLocaleString($locale)} Videos</p>
-						<p>{data.photos.toLocaleString($locale)} Photos</p>
-					</div>
-				{/await}
-			</svelte:fragment>
-		</SideBarButton>
-	</a>
+  <div class="text-xs dark:text-immich-dark-fg transition-all duration-200">
+    <p class="p-6 hidden md:block group-hover:sm:block">LIBRARY</p>
+    <hr class="mt-8 mb-[31px] mx-4 block md:hidden group-hover:sm:hidden" />
+  </div>
+  <a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
+    <SideBarButton
+      title="Favorites"
+      logo={isFavoritesSelected ? HeartMultiple : HeartMultipleOutline}
+      isSelected={isFavoritesSelected}
+    >
+      <svelte:fragment slot="moreInformation">
+        {#await getFavoriteCount()}
+          <LoadingSpinner />
+        {:then data}
+          <div>
+            <p>{data.favorites} Favorites</p>
+          </div>
+        {/await}
+      </svelte:fragment>
+    </SideBarButton>
+  </a>
+  <a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} draggable="false">
+    <SideBarButton title="Albums" logo={ImageAlbum} flippedLogo={true} isSelected={$page.route.id === '/(user)/albums'}>
+      <svelte:fragment slot="moreInformation">
+        {#await getAlbumCount()}
+          <LoadingSpinner />
+        {:then data}
+          <div>
+            <p>{data.owned.toLocaleString($locale)} Albums</p>
+          </div>
+        {/await}
+      </svelte:fragment>
+    </SideBarButton>
+  </a>
+  <a data-sveltekit-preload-data="hover" href={AppRoute.ARCHIVE} draggable="false">
+    <SideBarButton title="Archive" logo={ArchiveArrowDownOutline} isSelected={$page.route.id === '/(user)/archive'}>
+      <svelte:fragment slot="moreInformation">
+        {#await getArchivedAssetsCount()}
+          <LoadingSpinner />
+        {:then data}
+          <div>
+            <p>{data.videos.toLocaleString($locale)} Videos</p>
+            <p>{data.photos.toLocaleString($locale)} Photos</p>
+          </div>
+        {/await}
+      </svelte:fragment>
+    </SideBarButton>
+  </a>
 
-	<!-- Status Box -->
-	<div class="mb-6 mt-auto">
-		<StatusBox />
-	</div>
+  <!-- Status Box -->
+  <div class="mb-6 mt-auto">
+    <StatusBox />
+  </div>
 </SideBarSection>
diff --git a/web/src/lib/components/shared-components/status-box.svelte b/web/src/lib/components/shared-components/status-box.svelte
index 19751d52a..03806f8c7 100644
--- a/web/src/lib/components/shared-components/status-box.svelte
+++ b/web/src/lib/components/shared-components/status-box.svelte
@@ -1,113 +1,109 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-	import Cloud from 'svelte-material-icons/Cloud.svelte';
-	import Dns from 'svelte-material-icons/Dns.svelte';
-	import LoadingSpinner from './loading-spinner.svelte';
-	import { api, ServerInfoResponseDto } from '@api';
-	import { asByteUnitString } from '../../utils/byte-units';
-	import { locale } from '$lib/stores/preferences.store';
+  import { onDestroy, onMount } from 'svelte';
+  import Cloud from 'svelte-material-icons/Cloud.svelte';
+  import Dns from 'svelte-material-icons/Dns.svelte';
+  import LoadingSpinner from './loading-spinner.svelte';
+  import { api, ServerInfoResponseDto } from '@api';
+  import { asByteUnitString } from '../../utils/byte-units';
+  import { locale } from '$lib/stores/preferences.store';
 
-	let isServerOk = true;
-	let serverVersion = '';
-	let serverInfo: ServerInfoResponseDto;
-	let pingServerInterval: NodeJS.Timer;
+  let isServerOk = true;
+  let serverVersion = '';
+  let serverInfo: ServerInfoResponseDto;
+  let pingServerInterval: NodeJS.Timer;
 
-	onMount(async () => {
-		try {
-			const { data: version } = await api.serverInfoApi.getServerVersion();
+  onMount(async () => {
+    try {
+      const { data: version } = await api.serverInfoApi.getServerVersion();
 
-			serverVersion = `v${version.major}.${version.minor}.${version.patch}`;
+      serverVersion = `v${version.major}.${version.minor}.${version.patch}`;
 
-			const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
-			serverInfo = serverInfoRes;
-			getStorageUsagePercentage();
-		} catch (e) {
-			console.log('Error [StatusBox] [onMount]');
-			isServerOk = false;
-		}
+      const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
+      serverInfo = serverInfoRes;
+      getStorageUsagePercentage();
+    } catch (e) {
+      console.log('Error [StatusBox] [onMount]');
+      isServerOk = false;
+    }
 
-		pingServerInterval = setInterval(async () => {
-			try {
-				const { data: pingReponse } = await api.serverInfoApi.pingServer();
+    pingServerInterval = setInterval(async () => {
+      try {
+        const { data: pingReponse } = await api.serverInfoApi.pingServer();
 
-				if (pingReponse.res === 'pong') isServerOk = true;
-				else isServerOk = false;
+        if (pingReponse.res === 'pong') isServerOk = true;
+        else isServerOk = false;
 
-				const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
-				serverInfo = serverInfoRes;
-			} catch (e) {
-				console.log('Error [StatusBox] [pingServerInterval]', e);
-				isServerOk = false;
-			}
-		}, 10000);
-	});
+        const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
+        serverInfo = serverInfoRes;
+      } catch (e) {
+        console.log('Error [StatusBox] [pingServerInterval]', e);
+        isServerOk = false;
+      }
+    }, 10000);
+  });
 
-	onDestroy(() => clearInterval(pingServerInterval));
+  onDestroy(() => clearInterval(pingServerInterval));
 
-	const getStorageUsagePercentage = () => {
-		return Math.round((serverInfo?.diskUseRaw / serverInfo?.diskSizeRaw) * 100);
-	};
+  const getStorageUsagePercentage = () => {
+    return Math.round((serverInfo?.diskUseRaw / serverInfo?.diskSizeRaw) * 100);
+  };
 </script>
 
 <div class="dark:text-immich-dark-fg">
-	<div class="storage-status grid grid-cols-[64px_auto]">
-		<div
-			class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-[2.15rem] group-hover:sm:pb-0 md:pb-0"
-		>
-			<Cloud size={'24'} />
-		</div>
-		<div class="hidden md:block group-hover:sm:block">
-			<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
-			{#if serverInfo}
-				<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
-					<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
-					<div
-						class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
-						style="width: {getStorageUsagePercentage()}%"
-					/>
-				</div>
-				<p class="text-xs">
-					{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
-					{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
-				</p>
-			{:else}
-				<div class="mt-2">
-					<LoadingSpinner />
-				</div>
-			{/if}
-		</div>
-	</div>
-	<div>
-		<hr class="ml-5 my-4 dark:border-immich-dark-gray" />
-	</div>
-	<div class="server-status grid grid-cols-[64px_auto]">
-		<div
-			class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-11 md:pb-0 group-hover:sm:pb-0"
-		>
-			<Dns size={'24'} />
-		</div>
-		<div class="text-xs hidden md:block group-hover:sm:block">
-			<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
+  <div class="storage-status grid grid-cols-[64px_auto]">
+    <div class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-[2.15rem] group-hover:sm:pb-0 md:pb-0">
+      <Cloud size={'24'} />
+    </div>
+    <div class="hidden md:block group-hover:sm:block">
+      <p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
+      {#if serverInfo}
+        <div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
+          <!-- style={`width: ${$downloadAssets[fileName]}%`} -->
+          <div
+            class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
+            style="width: {getStorageUsagePercentage()}%"
+          />
+        </div>
+        <p class="text-xs">
+          {asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
+          {asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
+        </p>
+      {:else}
+        <div class="mt-2">
+          <LoadingSpinner />
+        </div>
+      {/if}
+    </div>
+  </div>
+  <div>
+    <hr class="ml-5 my-4 dark:border-immich-dark-gray" />
+  </div>
+  <div class="server-status grid grid-cols-[64px_auto]">
+    <div class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-11 md:pb-0 group-hover:sm:pb-0">
+      <Dns size={'24'} />
+    </div>
+    <div class="text-xs hidden md:block group-hover:sm:block">
+      <p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
 
-			<div class="flex justify-items-center justify-between mt-2">
-				<p>Status</p>
+      <div class="flex justify-items-center justify-between mt-2">
+        <p>Status</p>
 
-				{#if isServerOk}
-					<p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
-				{:else}
-					<p class="font-medium text-red-500">Offline</p>
-				{/if}
-			</div>
+        {#if isServerOk}
+          <p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
+        {:else}
+          <p class="font-medium text-red-500">Offline</p>
+        {/if}
+      </div>
 
-			<div class="flex justify-items-center justify-between mt-2">
-				<p>Version</p>
-				<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
-					{serverVersion}
-				</p>
-			</div>
-		</div>
-	</div>
-	<!-- <div>
+      <div class="flex justify-items-center justify-between mt-2">
+        <p>Version</p>
+        <p class="font-medium text-immich-primary dark:text-immich-dark-primary">
+          {serverVersion}
+        </p>
+      </div>
+    </div>
+  </div>
+  <!-- <div>
 		<hr class="ml-5 my-4" />
 	</div>
 	<button class="text-xs ml-5 underline hover:cursor-pointer text-immich-primary" on:click={() => goto('/changelog')}
diff --git a/web/src/lib/components/shared-components/theme-button.svelte b/web/src/lib/components/shared-components/theme-button.svelte
index 19e7cfd4b..31b423c7b 100644
--- a/web/src/lib/components/shared-components/theme-button.svelte
+++ b/web/src/lib/components/shared-components/theme-button.svelte
@@ -1,35 +1,35 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
-	import { colorTheme } from '$lib/stores/preferences.store';
-	import IconButton from '../elements/buttons/icon-button.svelte';
+  import { browser } from '$app/environment';
+  import { colorTheme } from '$lib/stores/preferences.store';
+  import IconButton from '../elements/buttons/icon-button.svelte';
 
-	const toggleTheme = () => {
-		$colorTheme = $colorTheme === 'dark' ? 'light' : 'dark';
-	};
+  const toggleTheme = () => {
+    $colorTheme = $colorTheme === 'dark' ? 'light' : 'dark';
+  };
 
-	$: {
-		if (browser) {
-			if ($colorTheme === 'light') {
-				document.documentElement.classList.remove('dark');
-			} else {
-				document.documentElement.classList.add('dark');
-			}
-		}
-	}
+  $: {
+    if (browser) {
+      if ($colorTheme === 'light') {
+        document.documentElement.classList.remove('dark');
+      } else {
+        document.documentElement.classList.add('dark');
+      }
+    }
+  }
 </script>
 
 <IconButton on:click={toggleTheme} title="Toggle theme">
-	{#if $colorTheme === 'light'}
-		<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-			><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg
-		>
-	{:else}
-		<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-			><path
-				d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-				fill-rule="evenodd"
-				clip-rule="evenodd"
-			/></svg
-		>
-	{/if}
+  {#if $colorTheme === 'light'}
+    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+      ><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg
+    >
+  {:else}
+    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+      ><path
+        d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+      /></svg
+    >
+  {/if}
 </IconButton>
diff --git a/web/src/lib/components/shared-components/upload-asset-preview.svelte b/web/src/lib/components/shared-components/upload-asset-preview.svelte
index b417b85d6..5af410625 100644
--- a/web/src/lib/components/shared-components/upload-asset-preview.svelte
+++ b/web/src/lib/components/shared-components/upload-asset-preview.svelte
@@ -1,67 +1,64 @@
 <script lang="ts">
-	import type { UploadAsset } from '$lib/models/upload-asset';
-	import { locale } from '$lib/stores/preferences.store';
-	import { asByteUnitString } from '$lib/utils/byte-units';
-	import { fade } from 'svelte/transition';
-	import ImmichLogo from './immich-logo.svelte';
+  import type { UploadAsset } from '$lib/models/upload-asset';
+  import { locale } from '$lib/stores/preferences.store';
+  import { asByteUnitString } from '$lib/utils/byte-units';
+  import { fade } from 'svelte/transition';
+  import ImmichLogo from './immich-logo.svelte';
 
-	export let uploadAsset: UploadAsset;
+  export let uploadAsset: UploadAsset;
 
-	let showFallbackImage = false;
-	const previewURL = URL.createObjectURL(uploadAsset.file);
+  let showFallbackImage = false;
+  const previewURL = URL.createObjectURL(uploadAsset.file);
 </script>
 
 <div
-	in:fade={{ duration: 250 }}
-	out:fade={{ duration: 100 }}
-	class="text-xs mt-3 rounded-lg bg-immich-bg grid grid-cols-[70px_auto] gap-2 h-[70px]"
+  in:fade={{ duration: 250 }}
+  out:fade={{ duration: 100 }}
+  class="text-xs mt-3 rounded-lg bg-immich-bg grid grid-cols-[70px_auto] gap-2 h-[70px]"
 >
-	<div class="relative">
-		{#if showFallbackImage}
-			<div in:fade={{ duration: 250 }}>
-				<ImmichLogo class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg" />
-			</div>
-		{:else}
-			<img
-				in:fade={{ duration: 250 }}
-				on:load={() => {
-					URL.revokeObjectURL(previewURL);
-				}}
-				on:error={() => {
-					URL.revokeObjectURL(previewURL);
-					showFallbackImage = true;
-				}}
-				src={previewURL}
-				alt="Preview of asset"
-				class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg"
-				draggable="false"
-			/>
-		{/if}
+  <div class="relative">
+    {#if showFallbackImage}
+      <div in:fade={{ duration: 250 }}>
+        <ImmichLogo class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg" />
+      </div>
+    {:else}
+      <img
+        in:fade={{ duration: 250 }}
+        on:load={() => {
+          URL.revokeObjectURL(previewURL);
+        }}
+        on:error={() => {
+          URL.revokeObjectURL(previewURL);
+          showFallbackImage = true;
+        }}
+        src={previewURL}
+        alt="Preview of asset"
+        class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg"
+        draggable="false"
+      />
+    {/if}
 
-		<div class="bottom-0 left-0 absolute w-full h-[25px] bg-immich-primary/30">
-			<p
-				class="absolute bottom-1 right-1 object-right-bottom text-gray-50/95 font-semibold stroke-immich-primary uppercase"
-			>
-				.{uploadAsset.fileExtension}
-			</p>
-		</div>
-	</div>
+    <div class="bottom-0 left-0 absolute w-full h-[25px] bg-immich-primary/30">
+      <p
+        class="absolute bottom-1 right-1 object-right-bottom text-gray-50/95 font-semibold stroke-immich-primary uppercase"
+      >
+        .{uploadAsset.fileExtension}
+      </p>
+    </div>
+  </div>
 
-	<div class="p-2 pr-4 flex flex-col justify-between">
-		<input
-			disabled
-			class="bg-gray-100 border w-full p-1 rounded-md text-[10px] px-2"
-			value={`[${asByteUnitString(uploadAsset.file.size, $locale)}] ${uploadAsset.file.name}`}
-		/>
+  <div class="p-2 pr-4 flex flex-col justify-between">
+    <input
+      disabled
+      class="bg-gray-100 border w-full p-1 rounded-md text-[10px] px-2"
+      value={`[${asByteUnitString(uploadAsset.file.size, $locale)}] ${uploadAsset.file.name}`}
+    />
 
-		<div class="w-full bg-gray-300 h-[15px] rounded-md mt-[5px] text-white relative">
-			<div
-				class="bg-immich-primary h-[15px] rounded-md transition-all"
-				style={`width: ${uploadAsset.progress}%`}
-			/>
-			<p class="absolute h-full w-full text-center top-0 text-[10px]">
-				{uploadAsset.progress}/100
-			</p>
-		</div>
-	</div>
+    <div class="w-full bg-gray-300 h-[15px] rounded-md mt-[5px] text-white relative">
+      <div class="bg-immich-primary h-[15px] rounded-md transition-all" style={`width: ${uploadAsset.progress}%`} />
+      <p class="absolute h-full w-full text-center top-0 text-[10px]">
+        {uploadAsset.progress}/100
+      </p>
+    </div>
+  </div>
 </div>
diff --git a/web/src/lib/components/shared-components/upload-panel.svelte b/web/src/lib/components/shared-components/upload-panel.svelte
index 5783dccf5..ecb92bc59 100644
--- a/web/src/lib/components/shared-components/upload-panel.svelte
+++ b/web/src/lib/components/shared-components/upload-panel.svelte
@@ -1,82 +1,82 @@
 <script lang="ts">
-	import { quartInOut } from 'svelte/easing';
-	import { scale, fade } from 'svelte/transition';
-	import { uploadAssetsStore } from '$lib/stores/upload';
-	import CloudUploadOutline from 'svelte-material-icons/CloudUploadOutline.svelte';
-	import WindowMinimize from 'svelte-material-icons/WindowMinimize.svelte';
-	import { notificationController, NotificationType } from './notification/notification';
-	import UploadAssetPreview from './upload-asset-preview.svelte';
+  import { quartInOut } from 'svelte/easing';
+  import { scale, fade } from 'svelte/transition';
+  import { uploadAssetsStore } from '$lib/stores/upload';
+  import CloudUploadOutline from 'svelte-material-icons/CloudUploadOutline.svelte';
+  import WindowMinimize from 'svelte-material-icons/WindowMinimize.svelte';
+  import { notificationController, NotificationType } from './notification/notification';
+  import UploadAssetPreview from './upload-asset-preview.svelte';
 
-	let showDetail = true;
-	let uploadLength = 0;
-	let isUploading = false;
+  let showDetail = true;
+  let uploadLength = 0;
+  let isUploading = false;
 
-	// Reactive action to update asset uploadLength whenever there is a new one added to the list
-	$: {
-		if ($uploadAssetsStore.length != uploadLength) {
-			uploadLength = $uploadAssetsStore.length;
-		}
-	}
+  // Reactive action to update asset uploadLength whenever there is a new one added to the list
+  $: {
+    if ($uploadAssetsStore.length != uploadLength) {
+      uploadLength = $uploadAssetsStore.length;
+    }
+  }
 
-	uploadAssetsStore.isUploading.subscribe((value) => {
-		isUploading = value;
-	});
+  uploadAssetsStore.isUploading.subscribe((value) => {
+    isUploading = value;
+  });
 </script>
 
 {#if isUploading}
-	<div
-		in:fade={{ duration: 250 }}
-		out:fade={{ duration: 250, delay: 1000 }}
-		on:outroend={() => {
-			notificationController.show({
-				message: 'Upload success, refresh the page to see new upload assets',
-				type: NotificationType.Info
-			});
-		}}
-		class="absolute right-6 bottom-6 z-[10000]"
-	>
-		{#if showDetail}
-			<div
-				in:scale={{ duration: 250, easing: quartInOut }}
-				class="bg-gray-200 p-4 text-sm w-[300px] rounded-lg shadow-sm border"
-			>
-				<div class="flex justify-between place-item-center mb-4">
-					<p class="text-xs text-gray-500">UPLOADING {$uploadAssetsStore.length}</p>
-					<button
-						on:click={() => (showDetail = false)}
-						class="w-[20px] h-[20px] bg-gray-50 rounded-full flex place-items-center place-content-center transition-colors hover:bg-gray-100"
-					>
-						<WindowMinimize />
-					</button>
-				</div>
+  <div
+    in:fade={{ duration: 250 }}
+    out:fade={{ duration: 250, delay: 1000 }}
+    on:outroend={() => {
+      notificationController.show({
+        message: 'Upload success, refresh the page to see new upload assets',
+        type: NotificationType.Info,
+      });
+    }}
+    class="absolute right-6 bottom-6 z-[10000]"
+  >
+    {#if showDetail}
+      <div
+        in:scale={{ duration: 250, easing: quartInOut }}
+        class="bg-gray-200 p-4 text-sm w-[300px] rounded-lg shadow-sm border"
+      >
+        <div class="flex justify-between place-item-center mb-4">
+          <p class="text-xs text-gray-500">UPLOADING {$uploadAssetsStore.length}</p>
+          <button
+            on:click={() => (showDetail = false)}
+            class="w-[20px] h-[20px] bg-gray-50 rounded-full flex place-items-center place-content-center transition-colors hover:bg-gray-100"
+          >
+            <WindowMinimize />
+          </button>
+        </div>
 
-				<div class="max-h-[400px] overflow-y-auto pr-2 rounded-lg immich-scrollbar">
-					{#each $uploadAssetsStore as uploadAsset}
-						{#key uploadAsset.id}
-							<UploadAssetPreview {uploadAsset} />
-						{/key}
-					{/each}
-				</div>
-			</div>
-		{:else}
-			<div class="rounded-full">
-				<button
-					in:scale={{ duration: 250, easing: quartInOut }}
-					on:click={() => (showDetail = true)}
-					class="absolute -top-4 -left-4 text-xs rounded-full w-10 h-10 p-5 flex place-items-center place-content-center bg-immich-primary text-gray-200"
-				>
-					{$uploadAssetsStore.length}
-				</button>
-				<button
-					in:scale={{ duration: 250, easing: quartInOut }}
-					on:click={() => (showDetail = true)}
-					class="bg-gray-300 p-5 rounded-full w-16 h-16 flex place-items-center place-content-center text-sm shadow-lg"
-				>
-					<div class="animate-pulse">
-						<CloudUploadOutline size="30" color="#4250af" />
-					</div>
-				</button>
-			</div>
-		{/if}
-	</div>
+        <div class="max-h-[400px] overflow-y-auto pr-2 rounded-lg immich-scrollbar">
+          {#each $uploadAssetsStore as uploadAsset}
+            {#key uploadAsset.id}
+              <UploadAssetPreview {uploadAsset} />
+            {/key}
+          {/each}
+        </div>
+      </div>
+    {:else}
+      <div class="rounded-full">
+        <button
+          in:scale={{ duration: 250, easing: quartInOut }}
+          on:click={() => (showDetail = true)}
+          class="absolute -top-4 -left-4 text-xs rounded-full w-10 h-10 p-5 flex place-items-center place-content-center bg-immich-primary text-gray-200"
+        >
+          {$uploadAssetsStore.length}
+        </button>
+        <button
+          in:scale={{ duration: 250, easing: quartInOut }}
+          on:click={() => (showDetail = true)}
+          class="bg-gray-300 p-5 rounded-full w-16 h-16 flex place-items-center place-content-center text-sm shadow-lg"
+        >
+          <div class="animate-pulse">
+            <CloudUploadOutline size="30" color="#4250af" />
+          </div>
+        </button>
+      </div>
+    {/if}
+  </div>
 {/if}
diff --git a/web/src/lib/components/shared-components/user-avatar.svelte b/web/src/lib/components/shared-components/user-avatar.svelte
index bf6ff1382..a9ab500a9 100644
--- a/web/src/lib/components/shared-components/user-avatar.svelte
+++ b/web/src/lib/components/shared-components/user-avatar.svelte
@@ -1,79 +1,78 @@
 <script lang="ts" context="module">
-	export type Color = 'primary' | 'pink' | 'red' | 'yellow' | 'blue' | 'green';
-	export type Size = 'full' | 'sm' | 'md' | 'lg';
+  export type Color = 'primary' | 'pink' | 'red' | 'yellow' | 'blue' | 'green';
+  export type Size = 'full' | 'sm' | 'md' | 'lg';
 </script>
 
 <script lang="ts">
-	import { imageLoad } from '$lib/utils/image-load';
-	import { api, UserResponseDto } from '@api';
+  import { imageLoad } from '$lib/utils/image-load';
+  import { api, UserResponseDto } from '@api';
 
-	export let user: UserResponseDto;
-	export let color: Color = 'primary';
-	export let size: Size = 'full';
-	export let rounded = true;
-	export let interactive = false;
-	export let showTitle = true;
-	export let autoColor = false;
-	let showFallback = true;
+  export let user: UserResponseDto;
+  export let color: Color = 'primary';
+  export let size: Size = 'full';
+  export let rounded = true;
+  export let interactive = false;
+  export let showTitle = true;
+  export let autoColor = false;
+  let showFallback = true;
 
-	const colorClasses: Record<Color, string> = {
-		primary:
-			'bg-immich-primary dark:bg-immich-dark-primary text-immich-dark-fg dark:text-immich-fg',
-		pink: 'bg-pink-400 text-immich-bg',
-		red: 'bg-red-500 text-immich-bg',
-		yellow: 'bg-yellow-500 text-immich-bg',
-		blue: 'bg-blue-500 text-immich-bg',
-		green: 'bg-green-600 text-immich-bg'
-	};
+  const colorClasses: Record<Color, string> = {
+    primary: 'bg-immich-primary dark:bg-immich-dark-primary text-immich-dark-fg dark:text-immich-fg',
+    pink: 'bg-pink-400 text-immich-bg',
+    red: 'bg-red-500 text-immich-bg',
+    yellow: 'bg-yellow-500 text-immich-bg',
+    blue: 'bg-blue-500 text-immich-bg',
+    green: 'bg-green-600 text-immich-bg',
+  };
 
-	const sizeClasses: Record<Size, string> = {
-		full: 'w-full h-full',
-		sm: 'w-7 h-7',
-		md: 'w-12 h-12',
-		lg: 'w-20 h-20'
-	};
+  const sizeClasses: Record<Size, string> = {
+    full: 'w-full h-full',
+    sm: 'w-7 h-7',
+    md: 'w-12 h-12',
+    lg: 'w-20 h-20',
+  };
 
-	// Get color based on the user UUID.
-	function getUserColor() {
-		const seed = parseInt(user.id.split('-')[0], 16);
-		const colors = Object.keys(colorClasses).filter((color) => color !== 'primary') as Color[];
-		const randomIndex = seed % colors.length;
-		return colors[randomIndex];
-	}
+  // Get color based on the user UUID.
+  function getUserColor() {
+    const seed = parseInt(user.id.split('-')[0], 16);
+    const colors = Object.keys(colorClasses).filter((color) => color !== 'primary') as Color[];
+    const randomIndex = seed % colors.length;
+    return colors[randomIndex];
+  }
 
-	$: colorClass = colorClasses[autoColor ? getUserColor() : color];
-	$: sizeClass = sizeClasses[size];
-	$: title = `${user.firstName} ${user.lastName} (${user.email})`;
-	$: interactiveClass = interactive
-		? 'border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-colors'
-		: '';
+  $: colorClass = colorClasses[autoColor ? getUserColor() : color];
+  $: sizeClass = sizeClasses[size];
+  $: title = `${user.firstName} ${user.lastName} (${user.email})`;
+  $: interactiveClass = interactive
+    ? 'border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-colors'
+    : '';
 </script>
 
 <figure
-	class="{sizeClass} {colorClass} {interactiveClass} shadow-md overflow-hidden"
-	class:rounded-full={rounded}
-	title={showTitle ? title : undefined}
+  class="{sizeClass} {colorClass} {interactiveClass} shadow-md overflow-hidden"
+  class:rounded-full={rounded}
+  title={showTitle ? title : undefined}
 >
-	{#if user.profileImagePath}
-		<img
-			src={api.getProfileImageUrl(user.id)}
-			alt="Profile image of {title}"
-			class="object-cover w-full h-full"
-			class:hidden={showFallback}
-			draggable="false"
-			use:imageLoad
-			on:image-load={() => (showFallback = false)}
-		/>
-	{/if}
-	{#if showFallback}
-		<span
-			class="flex justify-center items-center w-full h-full select-none"
-			class:text-xs={size === 'sm'}
-			class:text-lg={size === 'lg'}
-			class:font-medium={!autoColor}
-			class:font-semibold={autoColor}
-		>
-			{((user.firstName[0] || '') + (user.lastName[0] || '')).toUpperCase()}
-		</span>
-	{/if}
+  {#if user.profileImagePath}
+    <img
+      src={api.getProfileImageUrl(user.id)}
+      alt="Profile image of {title}"
+      class="object-cover w-full h-full"
+      class:hidden={showFallback}
+      draggable="false"
+      use:imageLoad
+      on:image-load={() => (showFallback = false)}
+    />
+  {/if}
+  {#if showFallback}
+    <span
+      class="flex justify-center items-center w-full h-full select-none"
+      class:text-xs={size === 'sm'}
+      class:text-lg={size === 'lg'}
+      class:font-medium={!autoColor}
+      class:font-semibold={autoColor}
+    >
+      {((user.firstName[0] || '') + (user.lastName[0] || '')).toUpperCase()}
+    </span>
+  {/if}
 </figure>
diff --git a/web/src/lib/components/shared-components/version-announcement-box.svelte b/web/src/lib/components/shared-components/version-announcement-box.svelte
index 944a874e5..097148f7c 100644
--- a/web/src/lib/components/shared-components/version-announcement-box.svelte
+++ b/web/src/lib/components/shared-components/version-announcement-box.svelte
@@ -1,80 +1,76 @@
 <script lang="ts">
-	import { getGithubVersion } from '$lib/utils/get-github-version';
-	import { onMount } from 'svelte';
-	import FullScreenModal from './full-screen-modal.svelte';
-	import type { ServerVersionReponseDto } from '@api';
-	import Button from '../elements/buttons/button.svelte';
+  import { getGithubVersion } from '$lib/utils/get-github-version';
+  import { onMount } from 'svelte';
+  import FullScreenModal from './full-screen-modal.svelte';
+  import type { ServerVersionReponseDto } from '@api';
+  import Button from '../elements/buttons/button.svelte';
 
-	export let serverVersion: ServerVersionReponseDto;
+  export let serverVersion: ServerVersionReponseDto;
 
-	let showModal = false;
-	let githubVersion: string;
-	$: serverVersionName = semverToName(serverVersion);
+  let showModal = false;
+  let githubVersion: string;
+  $: serverVersionName = semverToName(serverVersion);
 
-	function semverToName({ major, minor, patch }: ServerVersionReponseDto) {
-		return `v${major}.${minor}.${patch}`;
-	}
+  function semverToName({ major, minor, patch }: ServerVersionReponseDto) {
+    return `v${major}.${minor}.${patch}`;
+  }
 
-	function onAcknowledge() {
-		// Store server version to prevent the notification
-		// from showing again.
-		localStorage.setItem('appVersion', githubVersion);
-		showModal = false;
-	}
+  function onAcknowledge() {
+    // Store server version to prevent the notification
+    // from showing again.
+    localStorage.setItem('appVersion', githubVersion);
+    showModal = false;
+  }
 
-	onMount(async () => {
-		try {
-			githubVersion = await getGithubVersion();
-			if (localStorage.getItem('appVersion') === githubVersion) {
-				// Updated version has already been acknowledged.
-				return;
-			}
+  onMount(async () => {
+    try {
+      githubVersion = await getGithubVersion();
+      if (localStorage.getItem('appVersion') === githubVersion) {
+        // Updated version has already been acknowledged.
+        return;
+      }
 
-			if (githubVersion !== serverVersionName) {
-				showModal = true;
-			}
-		} catch (err) {
-			// Only log any errors that occur.
-			console.error('Error [VersionAnnouncementBox]:', err);
-		}
-	});
+      if (githubVersion !== serverVersionName) {
+        showModal = true;
+      }
+    } catch (err) {
+      // Only log any errors that occur.
+      console.error('Error [VersionAnnouncementBox]:', err);
+    }
+  });
 </script>
 
 {#if showModal}
-	<FullScreenModal on:clickOutside={() => (showModal = false)}>
-		<div
-			class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray shadow-sm max-w-lg rounded-3xl py-10 px-8 dark:text-immich-dark-fg"
-		>
-			<p class="text-2xl mb-4">🎉 NEW VERSION AVAILABLE 🎉</p>
+  <FullScreenModal on:clickOutside={() => (showModal = false)}>
+    <div
+      class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray shadow-sm max-w-lg rounded-3xl py-10 px-8 dark:text-immich-dark-fg"
+    >
+      <p class="text-2xl mb-4">🎉 NEW VERSION AVAILABLE 🎉</p>
 
-			<div>
-				Hi friend, there is a new release of
-				<span class="font-immich-title text-immich-primary dark:text-immich-dark-primary font-bold"
-					>IMMICH</span
-				>, please take your time to visit the
-				<span class="underline font-medium"
-					><a
-						href="https://github.com/immich-app/immich/releases/latest"
-						target="_blank"
-						rel="noopener noreferrer">release notes</a
-					></span
-				>
-				and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent
-				any misconfigurations, especially if you use WatchTower or any mechanism that handles updating
-				your application automatically.
-			</div>
+      <div>
+        Hi friend, there is a new release of
+        <span class="font-immich-title text-immich-primary dark:text-immich-dark-primary font-bold">IMMICH</span>,
+        please take your time to visit the
+        <span class="underline font-medium"
+          ><a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer"
+            >release notes</a
+          ></span
+        >
+        and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent any misconfigurations,
+        especially if you use WatchTower or any mechanism that handles updating your application automatically.
+      </div>
 
-			<div class="font-medium mt-4">Your friend, Alex</div>
+      <div class="font-medium mt-4">Your friend, Alex</div>
 
-			<div class="font-sm mt-8">
-				<code>Server Version: {serverVersionName}</code>
-				<br />
-				<code>Latest Version: {githubVersion}</code>
-			</div>
+      <div class="font-sm mt-8">
+        <code>Server Version: {serverVersionName}</code>
+        <br />
+        <code>Latest Version: {githubVersion}</code>
+      </div>
 
-			<div class="text-right mt-8">
-				<Button fullwidth on:click={onAcknowledge}>Acknowledge</Button>
-			</div>
-		</div>
-	</FullScreenModal>
+      <div class="text-right mt-8">
+        <Button fullwidth on:click={onAcknowledge}>Acknowledge</Button>
+      </div>
+    </div>
+  </FullScreenModal>
 {/if}
diff --git a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
index fc9ab4806..feaa036d1 100644
--- a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
+++ b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
@@ -1,165 +1,155 @@
 <script lang="ts">
-	import {
-		api,
-		AssetResponseDto,
-		SharedLinkResponseDto,
-		SharedLinkType,
-		ThumbnailFormat
-	} from '@api';
-	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
-	import OpenInNew from 'svelte-material-icons/OpenInNew.svelte';
-	import Delete from 'svelte-material-icons/TrashCanOutline.svelte';
-	import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
-	import CircleEditOutline from 'svelte-material-icons/CircleEditOutline.svelte';
-	import * as luxon from 'luxon';
-	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-	import { createEventDispatcher } from 'svelte';
-	import { goto } from '$app/navigation';
+  import { api, AssetResponseDto, SharedLinkResponseDto, SharedLinkType, ThumbnailFormat } from '@api';
+  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import OpenInNew from 'svelte-material-icons/OpenInNew.svelte';
+  import Delete from 'svelte-material-icons/TrashCanOutline.svelte';
+  import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
+  import CircleEditOutline from 'svelte-material-icons/CircleEditOutline.svelte';
+  import * as luxon from 'luxon';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { goto } from '$app/navigation';
 
-	export let link: SharedLinkResponseDto;
+  export let link: SharedLinkResponseDto;
 
-	let expirationCountdown: luxon.DurationObjectUnits;
-	const dispatch = createEventDispatcher();
+  let expirationCountdown: luxon.DurationObjectUnits;
+  const dispatch = createEventDispatcher();
 
-	const getAssetInfo = async (): Promise<AssetResponseDto> => {
-		let assetId = '';
+  const getAssetInfo = async (): Promise<AssetResponseDto> => {
+    let assetId = '';
 
-		if (link.album?.albumThumbnailAssetId) {
-			assetId = link.album.albumThumbnailAssetId;
-		} else if (link.assets.length > 0) {
-			assetId = link.assets[0].id;
-		}
+    if (link.album?.albumThumbnailAssetId) {
+      assetId = link.album.albumThumbnailAssetId;
+    } else if (link.assets.length > 0) {
+      assetId = link.assets[0].id;
+    }
 
-		const { data } = await api.assetApi.getAssetById({ id: assetId });
+    const { data } = await api.assetApi.getAssetById({ id: assetId });
 
-		return data;
-	};
+    return data;
+  };
 
-	const getCountDownExpirationDate = () => {
-		if (!link.expiresAt) {
-			return;
-		}
+  const getCountDownExpirationDate = () => {
+    if (!link.expiresAt) {
+      return;
+    }
 
-		const expiresAtDate = luxon.DateTime.fromISO(new Date(link.expiresAt).toISOString());
-		const now = luxon.DateTime.now();
+    const expiresAtDate = luxon.DateTime.fromISO(new Date(link.expiresAt).toISOString());
+    const now = luxon.DateTime.now();
 
-		expirationCountdown = expiresAtDate
-			.diff(now, ['days', 'hours', 'minutes', 'seconds'])
-			.toObject();
+    expirationCountdown = expiresAtDate.diff(now, ['days', 'hours', 'minutes', 'seconds']).toObject();
 
-		if (expirationCountdown.days && expirationCountdown.days > 0) {
-			return expiresAtDate.toRelativeCalendar({ base: now, locale: 'en-US', unit: 'days' });
-		} else if (expirationCountdown.hours && expirationCountdown.hours > 0) {
-			return expiresAtDate.toRelativeCalendar({ base: now, locale: 'en-US', unit: 'hours' });
-		} else if (expirationCountdown.minutes && expirationCountdown.minutes > 0) {
-			return expiresAtDate.toRelativeCalendar({ base: now, locale: 'en-US', unit: 'minutes' });
-		} else if (expirationCountdown.seconds && expirationCountdown.seconds > 0) {
-			return expiresAtDate.toRelativeCalendar({ base: now, locale: 'en-US', unit: 'seconds' });
-		}
-	};
+    if (expirationCountdown.days && expirationCountdown.days > 0) {
+      return expiresAtDate.toRelativeCalendar({ base: now, locale: 'en-US', unit: 'days' });
+    } else if (expirationCountdown.hours && expirationCountdown.hours > 0) {
+      return expiresAtDate.toRelativeCalendar({ base: now, locale: 'en-US', unit: 'hours' });
+    } else if (expirationCountdown.minutes && expirationCountdown.minutes > 0) {
+      return expiresAtDate.toRelativeCalendar({ base: now, locale: 'en-US', unit: 'minutes' });
+    } else if (expirationCountdown.seconds && expirationCountdown.seconds > 0) {
+      return expiresAtDate.toRelativeCalendar({ base: now, locale: 'en-US', unit: 'seconds' });
+    }
+  };
 
-	const isExpired = (expiresAt: string) => {
-		const now = new Date().getTime();
-		const expiration = new Date(expiresAt).getTime();
+  const isExpired = (expiresAt: string) => {
+    const now = new Date().getTime();
+    const expiration = new Date(expiresAt).getTime();
 
-		return now > expiration;
-	};
+    return now > expiration;
+  };
 </script>
 
 <div
-	class="w-full flex gap-4 dark:text-immich-gray transition-all border-b border-gray-200 dark:border-gray-600 hover:border-immich-primary dark:hover:border-immich-dark-primary py-4"
+  class="w-full flex gap-4 dark:text-immich-gray transition-all border-b border-gray-200 dark:border-gray-600 hover:border-immich-primary dark:hover:border-immich-dark-primary py-4"
 >
-	<div>
-		{#await getAssetInfo()}
-			<LoadingSpinner />
-		{:then asset}
-			<img
-				id={asset.id}
-				src={api.getAssetThumbnailUrl(asset.id, ThumbnailFormat.Webp)}
-				alt={asset.id}
-				class="object-cover w-[100px] h-[100px] rounded-lg"
-				loading="lazy"
-				draggable="false"
-			/>
-		{/await}
-	</div>
+  <div>
+    {#await getAssetInfo()}
+      <LoadingSpinner />
+    {:then asset}
+      <img
+        id={asset.id}
+        src={api.getAssetThumbnailUrl(asset.id, ThumbnailFormat.Webp)}
+        alt={asset.id}
+        class="object-cover w-[100px] h-[100px] rounded-lg"
+        loading="lazy"
+        draggable="false"
+      />
+    {/await}
+  </div>
 
-	<div class="flex flex-col justify-between">
-		<div class="info-top">
-			<div class="text-xs font-mono font-semibold text-gray-500 dark:text-gray-400">
-				{#if link.expiresAt}
-					{#if isExpired(link.expiresAt)}
-						<p class="text-red-600 dark:text-red-400 font-bold">Expired</p>
-					{:else}
-						<p>
-							Expires {getCountDownExpirationDate()}
-						</p>
-					{/if}
-				{:else}
-					<p>Expires ∞</p>
-				{/if}
-			</div>
+  <div class="flex flex-col justify-between">
+    <div class="info-top">
+      <div class="text-xs font-mono font-semibold text-gray-500 dark:text-gray-400">
+        {#if link.expiresAt}
+          {#if isExpired(link.expiresAt)}
+            <p class="text-red-600 dark:text-red-400 font-bold">Expired</p>
+          {:else}
+            <p>
+              Expires {getCountDownExpirationDate()}
+            </p>
+          {/if}
+        {:else}
+          <p>Expires ∞</p>
+        {/if}
+      </div>
 
-			<div class="text-sm">
-				<div
-					class="flex gap-2 place-items-center text-immich-primary dark:text-immich-dark-primary"
-				>
-					{#if link.type === SharedLinkType.Album}
-						<p>
-							{link.album?.albumName.toUpperCase()}
-						</p>
-					{:else if link.type === SharedLinkType.Individual}
-						<p>INDIVIDUAL SHARE</p>
-					{/if}
+      <div class="text-sm">
+        <div class="flex gap-2 place-items-center text-immich-primary dark:text-immich-dark-primary">
+          {#if link.type === SharedLinkType.Album}
+            <p>
+              {link.album?.albumName.toUpperCase()}
+            </p>
+          {:else if link.type === SharedLinkType.Individual}
+            <p>INDIVIDUAL SHARE</p>
+          {/if}
 
-					{#if !link.expiresAt || !isExpired(link.expiresAt)}
-						<div
-							class="hover:cursor-pointer"
-							title="Go to share page"
-							on:click={() => goto(`/share/${link.key}`)}
-							on:keydown={() => goto(`/share/${link.key}`)}
-						>
-							<OpenInNew />
-						</div>
-					{/if}
-				</div>
+          {#if !link.expiresAt || !isExpired(link.expiresAt)}
+            <div
+              class="hover:cursor-pointer"
+              title="Go to share page"
+              on:click={() => goto(`/share/${link.key}`)}
+              on:keydown={() => goto(`/share/${link.key}`)}
+            >
+              <OpenInNew />
+            </div>
+          {/if}
+        </div>
 
-				<p class="text-sm">{link.description ?? ''}</p>
-			</div>
-		</div>
+        <p class="text-sm">{link.description ?? ''}</p>
+      </div>
+    </div>
 
-		<div class="info-bottom flex gap-4">
-			{#if link.allowUpload}
-				<div
-					class="text-xs px-2 py-1 bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray flex place-items-center place-content-center rounded-full w-[80px]"
-				>
-					Upload
-				</div>
-			{/if}
+    <div class="info-bottom flex gap-4">
+      {#if link.allowUpload}
+        <div
+          class="text-xs px-2 py-1 bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray flex place-items-center place-content-center rounded-full w-[80px]"
+        >
+          Upload
+        </div>
+      {/if}
 
-			{#if link.allowDownload}
-				<div
-					class="text-xs px-2 py-1 bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray flex place-items-center place-content-center rounded-full w-[100px]"
-				>
-					Download
-				</div>
-			{/if}
+      {#if link.allowDownload}
+        <div
+          class="text-xs px-2 py-1 bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray flex place-items-center place-content-center rounded-full w-[100px]"
+        >
+          Download
+        </div>
+      {/if}
 
-			{#if link.showExif}
-				<div
-					class="text-xs px-2 py-1 bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray flex place-items-center place-content-center rounded-full w-[60px]"
-				>
-					EXIF
-				</div>
-			{/if}
-		</div>
-	</div>
+      {#if link.showExif}
+        <div
+          class="text-xs px-2 py-1 bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray flex place-items-center place-content-center rounded-full w-[60px]"
+        >
+          EXIF
+        </div>
+      {/if}
+    </div>
+  </div>
 
-	<div class="flex-auto flex flex-col place-content-center place-items-end text-right">
-		<div class="flex">
-			<CircleIconButton logo={Delete} on:click={() => dispatch('delete')} />
-			<CircleIconButton logo={CircleEditOutline} on:click={() => dispatch('edit')} />
-			<CircleIconButton logo={ContentCopy} on:click={() => dispatch('copy')} />
-		</div>
-	</div>
+  <div class="flex-auto flex flex-col place-content-center place-items-end text-right">
+    <div class="flex">
+      <CircleIconButton logo={Delete} on:click={() => dispatch('delete')} />
+      <CircleIconButton logo={CircleEditOutline} on:click={() => dispatch('edit')} />
+      <CircleIconButton logo={ContentCopy} on:click={() => dispatch('copy')} />
+    </div>
+  </div>
 </div>
diff --git a/web/src/lib/components/user-settings-page/change-password-settings.svelte b/web/src/lib/components/user-settings-page/change-password-settings.svelte
index 9902f6670..4439d75d7 100644
--- a/web/src/lib/components/user-settings-page/change-password-settings.svelte
+++ b/web/src/lib/components/user-settings-page/change-password-settings.svelte
@@ -1,80 +1,78 @@
 <script lang="ts">
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import { api, ApiError } from '@api';
-	import { fade } from 'svelte/transition';
-	import SettingInputField, {
-		SettingInputFieldType
-	} from '../admin-page/settings/setting-input-field.svelte';
-	import Button from '../elements/buttons/button.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { api, ApiError } from '@api';
+  import { fade } from 'svelte/transition';
+  import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
+  import Button from '../elements/buttons/button.svelte';
 
-	let password = '';
-	let newPassword = '';
-	let confirmPassword = '';
+  let password = '';
+  let newPassword = '';
+  let confirmPassword = '';
 
-	const handleChangePassword = async () => {
-		try {
-			await api.authenticationApi.changePassword({
-				changePasswordDto: {
-					password,
-					newPassword
-				}
-			});
+  const handleChangePassword = async () => {
+    try {
+      await api.authenticationApi.changePassword({
+        changePasswordDto: {
+          password,
+          newPassword,
+        },
+      });
 
-			notificationController.show({
-				message: 'Updated password',
-				type: NotificationType.Info
-			});
+      notificationController.show({
+        message: 'Updated password',
+        type: NotificationType.Info,
+      });
 
-			password = '';
-			newPassword = '';
-			confirmPassword = '';
-		} catch (error) {
-			console.error('Error [user-profile] [changePassword]', error);
-			notificationController.show({
-				message: (error as ApiError)?.response?.data?.message || 'Unable to change password',
-				type: NotificationType.Error
-			});
-		}
-	};
+      password = '';
+      newPassword = '';
+      confirmPassword = '';
+    } catch (error) {
+      console.error('Error [user-profile] [changePassword]', error);
+      notificationController.show({
+        message: (error as ApiError)?.response?.data?.message || 'Unable to change password',
+        type: NotificationType.Error,
+      });
+    }
+  };
 </script>
 
 <section class="my-4">
-	<div in:fade={{ duration: 500 }}>
-		<form autocomplete="off" on:submit|preventDefault>
-			<div class="flex flex-col gap-4 ml-4 mt-4">
-				<SettingInputField
-					inputType={SettingInputFieldType.PASSWORD}
-					label="PASSWORD"
-					bind:value={password}
-					required={true}
-				/>
+  <div in:fade={{ duration: 500 }}>
+    <form autocomplete="off" on:submit|preventDefault>
+      <div class="flex flex-col gap-4 ml-4 mt-4">
+        <SettingInputField
+          inputType={SettingInputFieldType.PASSWORD}
+          label="PASSWORD"
+          bind:value={password}
+          required={true}
+        />
 
-				<SettingInputField
-					inputType={SettingInputFieldType.PASSWORD}
-					label="NEW PASSWORD"
-					bind:value={newPassword}
-					required={true}
-				/>
+        <SettingInputField
+          inputType={SettingInputFieldType.PASSWORD}
+          label="NEW PASSWORD"
+          bind:value={newPassword}
+          required={true}
+        />
 
-				<SettingInputField
-					inputType={SettingInputFieldType.PASSWORD}
-					label="CONFIRM PASSWORD"
-					bind:value={confirmPassword}
-					required={true}
-				/>
+        <SettingInputField
+          inputType={SettingInputFieldType.PASSWORD}
+          label="CONFIRM PASSWORD"
+          bind:value={confirmPassword}
+          required={true}
+        />
 
-				<div class="flex justify-end">
-					<Button
-						type="submit"
-						size="sm"
-						disabled={!(password && newPassword && newPassword === confirmPassword)}
-						on:click={() => handleChangePassword()}>Save</Button
-					>
-				</div>
-			</div>
-		</form>
-	</div>
+        <div class="flex justify-end">
+          <Button
+            type="submit"
+            size="sm"
+            disabled={!(password && newPassword && newPassword === confirmPassword)}
+            on:click={() => handleChangePassword()}>Save</Button
+          >
+        </div>
+      </div>
+    </form>
+  </div>
 </section>
diff --git a/web/src/lib/components/user-settings-page/device-card.svelte b/web/src/lib/components/user-settings-page/device-card.svelte
index b55d54f7e..593c0e407 100644
--- a/web/src/lib/components/user-settings-page/device-card.svelte
+++ b/web/src/lib/components/user-settings-page/device-card.svelte
@@ -1,72 +1,70 @@
 <script lang="ts">
-	import { locale } from '$lib/stores/preferences.store';
-	import type { AuthDeviceResponseDto } from '@api';
-	import { DateTime, ToRelativeCalendarOptions } from 'luxon';
-	import { createEventDispatcher } from 'svelte';
-	import Android from 'svelte-material-icons/Android.svelte';
-	import Apple from 'svelte-material-icons/Apple.svelte';
-	import AppleSafari from 'svelte-material-icons/AppleSafari.svelte';
-	import GoogleChrome from 'svelte-material-icons/GoogleChrome.svelte';
-	import Help from 'svelte-material-icons/Help.svelte';
-	import Linux from 'svelte-material-icons/Linux.svelte';
-	import MicrosoftWindows from 'svelte-material-icons/MicrosoftWindows.svelte';
-	import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import type { AuthDeviceResponseDto } from '@api';
+  import { DateTime, ToRelativeCalendarOptions } from 'luxon';
+  import { createEventDispatcher } from 'svelte';
+  import Android from 'svelte-material-icons/Android.svelte';
+  import Apple from 'svelte-material-icons/Apple.svelte';
+  import AppleSafari from 'svelte-material-icons/AppleSafari.svelte';
+  import GoogleChrome from 'svelte-material-icons/GoogleChrome.svelte';
+  import Help from 'svelte-material-icons/Help.svelte';
+  import Linux from 'svelte-material-icons/Linux.svelte';
+  import MicrosoftWindows from 'svelte-material-icons/MicrosoftWindows.svelte';
+  import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
 
-	export let device: AuthDeviceResponseDto;
+  export let device: AuthDeviceResponseDto;
 
-	const dispatcher = createEventDispatcher();
+  const dispatcher = createEventDispatcher();
 
-	const options: ToRelativeCalendarOptions = {
-		unit: 'days',
-		locale: $locale
-	};
+  const options: ToRelativeCalendarOptions = {
+    unit: 'days',
+    locale: $locale,
+  };
 </script>
 
 <div class="flex flex-row w-full">
-	<!-- TODO: Device Image -->
-	<div
-		class="hidden sm:flex pr-2 justify-center items-center text-immich-primary dark:text-immich-dark-primary"
-	>
-		{#if device.deviceOS === 'Android'}
-			<Android size="40" />
-		{:else if device.deviceOS === 'iOS' || device.deviceOS === 'Mac OS'}
-			<Apple size="40" />
-		{:else if device.deviceOS.indexOf('Safari') !== -1}
-			<AppleSafari size="40" />
-		{:else if device.deviceOS.indexOf('Windows') !== -1}
-			<MicrosoftWindows size="40" />
-		{:else if device.deviceOS === 'Linux'}
-			<Linux size="40" />
-		{:else if device.deviceOS === 'Chromium OS' || device.deviceType === 'Chrome' || device.deviceType === 'Chromium'}
-			<GoogleChrome size="40" />
-		{:else}
-			<Help size="40" />
-		{/if}
-	</div>
-	<div class="pl-4 sm:pl-0 flex flex-row grow justify-between gap-1">
-		<div class="flex flex-col gap-1 justify-center dark:text-white">
-			<span class="text-sm">
-				{#if device.deviceType || device.deviceOS}
-					<span>{device.deviceOS || 'Unknown'} • {device.deviceType || 'Unknown'}</span>
-				{:else}
-					<span>Unknown</span>
-				{/if}
-			</span>
-			<div class="text-sm">
-				<span class="">Last seen</span>
-				<span>{DateTime.fromISO(device.updatedAt).toRelativeCalendar(options)}</span>
-			</div>
-		</div>
-		{#if !device.current}
-			<div class="text-sm flex flex-col justify-center">
-				<button
-					on:click={() => dispatcher('delete')}
-					class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
-					title="Log out"
-				>
-					<TrashCanOutline size="16" />
-				</button>
-			</div>
-		{/if}
-	</div>
+  <!-- TODO: Device Image -->
+  <div class="hidden sm:flex pr-2 justify-center items-center text-immich-primary dark:text-immich-dark-primary">
+    {#if device.deviceOS === 'Android'}
+      <Android size="40" />
+    {:else if device.deviceOS === 'iOS' || device.deviceOS === 'Mac OS'}
+      <Apple size="40" />
+    {:else if device.deviceOS.indexOf('Safari') !== -1}
+      <AppleSafari size="40" />
+    {:else if device.deviceOS.indexOf('Windows') !== -1}
+      <MicrosoftWindows size="40" />
+    {:else if device.deviceOS === 'Linux'}
+      <Linux size="40" />
+    {:else if device.deviceOS === 'Chromium OS' || device.deviceType === 'Chrome' || device.deviceType === 'Chromium'}
+      <GoogleChrome size="40" />
+    {:else}
+      <Help size="40" />
+    {/if}
+  </div>
+  <div class="pl-4 sm:pl-0 flex flex-row grow justify-between gap-1">
+    <div class="flex flex-col gap-1 justify-center dark:text-white">
+      <span class="text-sm">
+        {#if device.deviceType || device.deviceOS}
+          <span>{device.deviceOS || 'Unknown'} • {device.deviceType || 'Unknown'}</span>
+        {:else}
+          <span>Unknown</span>
+        {/if}
+      </span>
+      <div class="text-sm">
+        <span class="">Last seen</span>
+        <span>{DateTime.fromISO(device.updatedAt).toRelativeCalendar(options)}</span>
+      </div>
+    </div>
+    {#if !device.current}
+      <div class="text-sm flex flex-col justify-center">
+        <button
+          on:click={() => dispatcher('delete')}
+          class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
+          title="Log out"
+        >
+          <TrashCanOutline size="16" />
+        </button>
+      </div>
+    {/if}
+  </div>
 </div>
diff --git a/web/src/lib/components/user-settings-page/device-list.svelte b/web/src/lib/components/user-settings-page/device-list.svelte
index dfd85a667..d19f1ad3c 100644
--- a/web/src/lib/components/user-settings-page/device-list.svelte
+++ b/web/src/lib/components/user-settings-page/device-list.svelte
@@ -1,102 +1,93 @@
 <script lang="ts">
-	import { api, AuthDeviceResponseDto } from '@api';
-	import { onMount } from 'svelte';
-	import { handleError } from '../../utils/handle-error';
-	import Button from '../elements/buttons/button.svelte';
-	import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '../shared-components/notification/notification';
-	import DeviceCard from './device-card.svelte';
+  import { api, AuthDeviceResponseDto } from '@api';
+  import { onMount } from 'svelte';
+  import { handleError } from '../../utils/handle-error';
+  import Button from '../elements/buttons/button.svelte';
+  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import DeviceCard from './device-card.svelte';
 
-	let devices: AuthDeviceResponseDto[] = [];
-	let deleteDevice: AuthDeviceResponseDto | null = null;
-	let deleteAll = false;
+  let devices: AuthDeviceResponseDto[] = [];
+  let deleteDevice: AuthDeviceResponseDto | null = null;
+  let deleteAll = false;
 
-	const refresh = () => api.authenticationApi.getAuthDevices().then(({ data }) => (devices = data));
+  const refresh = () => api.authenticationApi.getAuthDevices().then(({ data }) => (devices = data));
 
-	onMount(() => {
-		refresh();
-	});
+  onMount(() => {
+    refresh();
+  });
 
-	$: currentDevice = devices.find((device) => device.current);
-	$: otherDevices = devices.filter((device) => !device.current);
+  $: currentDevice = devices.find((device) => device.current);
+  $: otherDevices = devices.filter((device) => !device.current);
 
-	const handleDelete = async () => {
-		if (!deleteDevice) {
-			return;
-		}
+  const handleDelete = async () => {
+    if (!deleteDevice) {
+      return;
+    }
 
-		try {
-			await api.authenticationApi.logoutAuthDevice({ id: deleteDevice.id });
-			notificationController.show({ message: `Logged out device`, type: NotificationType.Info });
-		} catch (error) {
-			handleError(error, 'Unable to log out device');
-		} finally {
-			await refresh();
-			deleteDevice = null;
-		}
-	};
+    try {
+      await api.authenticationApi.logoutAuthDevice({ id: deleteDevice.id });
+      notificationController.show({ message: `Logged out device`, type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, 'Unable to log out device');
+    } finally {
+      await refresh();
+      deleteDevice = null;
+    }
+  };
 
-	const handleDeleteAll = async () => {
-		try {
-			await api.authenticationApi.logoutAuthDevices();
-			notificationController.show({
-				message: `Logged out all devices`,
-				type: NotificationType.Info
-			});
-		} catch (error) {
-			handleError(error, 'Unable to log out all devices');
-		} finally {
-			await refresh();
-			deleteAll = false;
-		}
-	};
+  const handleDeleteAll = async () => {
+    try {
+      await api.authenticationApi.logoutAuthDevices();
+      notificationController.show({
+        message: `Logged out all devices`,
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to log out all devices');
+    } finally {
+      await refresh();
+      deleteAll = false;
+    }
+  };
 </script>
 
 {#if deleteDevice}
-	<ConfirmDialogue
-		prompt="Are you sure you want to log out this device?"
-		on:confirm={() => handleDelete()}
-		on:cancel={() => (deleteDevice = null)}
-	/>
+  <ConfirmDialogue
+    prompt="Are you sure you want to log out this device?"
+    on:confirm={() => handleDelete()}
+    on:cancel={() => (deleteDevice = null)}
+  />
 {/if}
 
 {#if deleteAll}
-	<ConfirmDialogue
-		prompt="Are you sure you want to log out all devices?"
-		on:confirm={() => handleDeleteAll()}
-		on:cancel={() => (deleteAll = false)}
-	/>
+  <ConfirmDialogue
+    prompt="Are you sure you want to log out all devices?"
+    on:confirm={() => handleDeleteAll()}
+    on:cancel={() => (deleteAll = false)}
+  />
 {/if}
 
 <section class="my-4">
-	{#if currentDevice}
-		<div class="mb-6">
-			<h3 class="font-medium text-xs mb-2 text-immich-primary dark:text-immich-dark-primary">
-				CURRENT DEVICE
-			</h3>
-			<DeviceCard device={currentDevice} />
-		</div>
-	{/if}
-	{#if otherDevices.length > 0}
-		<div class="mb-6">
-			<h3 class="font-medium text-xs mb-2 text-immich-primary dark:text-immich-dark-primary">
-				OTHER DEVICES
-			</h3>
-			{#each otherDevices as device, i}
-				<DeviceCard {device} on:delete={() => (deleteDevice = device)} />
-				{#if i !== otherDevices.length - 1}
-					<hr class="my-3" />
-				{/if}
-			{/each}
-		</div>
-		<h3 class="font-medium text-xs mb-2 text-immich-primary dark:text-immich-dark-primary">
-			LOG OUT ALL DEVICES
-		</h3>
-		<div class="flex justify-end">
-			<Button color="red" size="sm" on:click={() => (deleteAll = true)}>Log Out All Devices</Button>
-		</div>
-	{/if}
+  {#if currentDevice}
+    <div class="mb-6">
+      <h3 class="font-medium text-xs mb-2 text-immich-primary dark:text-immich-dark-primary">CURRENT DEVICE</h3>
+      <DeviceCard device={currentDevice} />
+    </div>
+  {/if}
+  {#if otherDevices.length > 0}
+    <div class="mb-6">
+      <h3 class="font-medium text-xs mb-2 text-immich-primary dark:text-immich-dark-primary">OTHER DEVICES</h3>
+      {#each otherDevices as device, i}
+        <DeviceCard {device} on:delete={() => (deleteDevice = device)} />
+        {#if i !== otherDevices.length - 1}
+          <hr class="my-3" />
+        {/if}
+      {/each}
+    </div>
+    <h3 class="font-medium text-xs mb-2 text-immich-primary dark:text-immich-dark-primary">LOG OUT ALL DEVICES</h3>
+    <div class="flex justify-end">
+      <Button color="red" size="sm" on:click={() => (deleteAll = true)}>Log Out All Devices</Button>
+    </div>
+  {/if}
 </section>
diff --git a/web/src/lib/components/user-settings-page/oauth-settings.svelte b/web/src/lib/components/user-settings-page/oauth-settings.svelte
index 384db14e8..f6f490639 100644
--- a/web/src/lib/components/user-settings-page/oauth-settings.svelte
+++ b/web/src/lib/components/user-settings-page/oauth-settings.svelte
@@ -1,80 +1,77 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { oauth, OAuthConfigResponseDto, UserResponseDto } from '@api';
-	import { onMount } from 'svelte';
-	import { fade } from 'svelte/transition';
-	import { handleError } from '../../utils/handle-error';
-	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '../shared-components/notification/notification';
-	import Button from '../elements/buttons/button.svelte';
+  import { goto } from '$app/navigation';
+  import { oauth, OAuthConfigResponseDto, UserResponseDto } from '@api';
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import { handleError } from '../../utils/handle-error';
+  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import Button from '../elements/buttons/button.svelte';
 
-	export let user: UserResponseDto;
+  export let user: UserResponseDto;
 
-	let config: OAuthConfigResponseDto = { enabled: false, passwordLoginEnabled: true };
-	let loading = true;
+  let config: OAuthConfigResponseDto = { enabled: false, passwordLoginEnabled: true };
+  let loading = true;
 
-	onMount(async () => {
-		if (oauth.isCallback(window.location)) {
-			try {
-				loading = true;
+  onMount(async () => {
+    if (oauth.isCallback(window.location)) {
+      try {
+        loading = true;
 
-				const { data } = await oauth.link(window.location);
-				user = data;
+        const { data } = await oauth.link(window.location);
+        user = data;
 
-				notificationController.show({
-					message: 'Linked OAuth account',
-					type: NotificationType.Info
-				});
-			} catch (error) {
-				handleError(error, 'Unable to link OAuth account');
-			} finally {
-				goto('?open=oauth');
-			}
-		}
+        notificationController.show({
+          message: 'Linked OAuth account',
+          type: NotificationType.Info,
+        });
+      } catch (error) {
+        handleError(error, 'Unable to link OAuth account');
+      } finally {
+        goto('?open=oauth');
+      }
+    }
 
-		try {
-			const { data } = await oauth.getConfig(window.location);
-			config = data;
-		} catch (error) {
-			handleError(error, 'Unable to load OAuth config');
-		}
+    try {
+      const { data } = await oauth.getConfig(window.location);
+      config = data;
+    } catch (error) {
+      handleError(error, 'Unable to load OAuth config');
+    }
 
-		loading = false;
-	});
+    loading = false;
+  });
 
-	const handleUnlink = async () => {
-		try {
-			const { data } = await oauth.unlink();
-			user = data;
-			notificationController.show({
-				message: 'Unlinked OAuth account',
-				type: NotificationType.Info
-			});
-		} catch (error) {
-			handleError(error, 'Unable to unlink account');
-		}
-	};
+  const handleUnlink = async () => {
+    try {
+      const { data } = await oauth.unlink();
+      user = data;
+      notificationController.show({
+        message: 'Unlinked OAuth account',
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to unlink account');
+    }
+  };
 </script>
 
 <section class="my-4">
-	<div in:fade={{ duration: 500 }}>
-		<div class="flex justify-end">
-			{#if loading}
-				<div class="flex place-items-center place-content-center">
-					<LoadingSpinner />
-				</div>
-			{:else if config.enabled}
-				{#if user.oauthId}
-					<Button size="sm" on:click={() => handleUnlink()}>Unlink Oauth</Button>
-				{:else}
-					<a href={config.url}>
-						<Button size="sm" on:click={() => handleUnlink()}>Link to OAuth</Button>
-					</a>
-				{/if}
-			{/if}
-		</div>
-	</div>
+  <div in:fade={{ duration: 500 }}>
+    <div class="flex justify-end">
+      {#if loading}
+        <div class="flex place-items-center place-content-center">
+          <LoadingSpinner />
+        </div>
+      {:else if config.enabled}
+        {#if user.oauthId}
+          <Button size="sm" on:click={() => handleUnlink()}>Unlink Oauth</Button>
+        {:else}
+          <a href={config.url}>
+            <Button size="sm" on:click={() => handleUnlink()}>Link to OAuth</Button>
+          </a>
+        {/if}
+      {/if}
+    </div>
+  </div>
 </section>
diff --git a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte b/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
index 2446883e7..99c13aad0 100644
--- a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
+++ b/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
@@ -1,87 +1,85 @@
 <script lang="ts">
-	import { api, UserResponseDto } from '@api';
-	import BaseModal from '../shared-components/base-modal.svelte';
-	import UserAvatar from '../shared-components/user-avatar.svelte';
-	import ImmichLogo from '../shared-components/immich-logo.svelte';
-	import Button from '../elements/buttons/button.svelte';
-	import { createEventDispatcher, onMount } from 'svelte';
+  import { api, UserResponseDto } from '@api';
+  import BaseModal from '../shared-components/base-modal.svelte';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import ImmichLogo from '../shared-components/immich-logo.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
 
-	export let user: UserResponseDto;
+  export let user: UserResponseDto;
 
-	let availableUsers: UserResponseDto[] = [];
-	let selectedUsers: UserResponseDto[] = [];
+  let availableUsers: UserResponseDto[] = [];
+  let selectedUsers: UserResponseDto[] = [];
 
-	const dispatch = createEventDispatcher<{ close: void; 'add-users': UserResponseDto[] }>();
+  const dispatch = createEventDispatcher<{ close: void; 'add-users': UserResponseDto[] }>();
 
-	onMount(async () => {
-		// TODO: update endpoint to have a query param for deleted users
-		let { data: users } = await api.userApi.getAllUsers({ isAll: false });
+  onMount(async () => {
+    // TODO: update endpoint to have a query param for deleted users
+    let { data: users } = await api.userApi.getAllUsers({ isAll: false });
 
-		// remove invalid users
-		users = users.filter((_user) => !(_user.deletedAt || _user.id === user.id));
+    // remove invalid users
+    users = users.filter((_user) => !(_user.deletedAt || _user.id === user.id));
 
-		// exclude partners from the list of users available for selection
-		const { data: partners } = await api.partnerApi.getPartners({ direction: 'shared-by' });
-		const partnerIds = partners.map((partner) => partner.id);
-		availableUsers = users.filter((user) => !partnerIds.includes(user.id));
-	});
+    // exclude partners from the list of users available for selection
+    const { data: partners } = await api.partnerApi.getPartners({ direction: 'shared-by' });
+    const partnerIds = partners.map((partner) => partner.id);
+    availableUsers = users.filter((user) => !partnerIds.includes(user.id));
+  });
 
-	const selectUser = (user: UserResponseDto) => {
-		if (selectedUsers.includes(user)) {
-			selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
-		} else {
-			selectedUsers = [...selectedUsers, user];
-		}
-	};
+  const selectUser = (user: UserResponseDto) => {
+    if (selectedUsers.includes(user)) {
+      selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
+    } else {
+      selectedUsers = [...selectedUsers, user];
+    }
+  };
 </script>
 
 <BaseModal on:close={() => dispatch('close')}>
-	<svelte:fragment slot="title">
-		<span class="flex gap-2 place-items-center">
-			<ImmichLogo width={24} />
-			<p class="font-medium">Add partner</p>
-		</span>
-	</svelte:fragment>
+  <svelte:fragment slot="title">
+    <span class="flex gap-2 place-items-center">
+      <ImmichLogo width={24} />
+      <p class="font-medium">Add partner</p>
+    </span>
+  </svelte:fragment>
 
-	<div class="max-h-[300px] overflow-y-auto immich-scrollbar">
-		{#if availableUsers.length > 0}
-			{#each availableUsers as user}
-				<button
-					on:click={() => selectUser(user)}
-					class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
-				>
-					{#if selectedUsers.includes(user)}
-						<span
-							class="bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-bg rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl dark:border-immich-dark-gray"
-							>✓</span
-						>
-					{:else}
-						<UserAvatar {user} size="md" autoColor />
-					{/if}
+  <div class="max-h-[300px] overflow-y-auto immich-scrollbar">
+    {#if availableUsers.length > 0}
+      {#each availableUsers as user}
+        <button
+          on:click={() => selectUser(user)}
+          class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
+        >
+          {#if selectedUsers.includes(user)}
+            <span
+              class="bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-bg rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl dark:border-immich-dark-gray"
+              >✓</span
+            >
+          {:else}
+            <UserAvatar {user} size="md" autoColor />
+          {/if}
 
-					<div class="text-left">
-						<p class="text-immich-fg dark:text-immich-dark-fg">
-							{user.firstName}
-							{user.lastName}
-						</p>
-						<p class="text-xs">
-							{user.email}
-						</p>
-					</div>
-				</button>
-			{/each}
-		{:else}
-			<p class="text-sm p-5">
-				Looks like you shared your photos with all users or you don't have any user to share with.
-			</p>
-		{/if}
+          <div class="text-left">
+            <p class="text-immich-fg dark:text-immich-dark-fg">
+              {user.firstName}
+              {user.lastName}
+            </p>
+            <p class="text-xs">
+              {user.email}
+            </p>
+          </div>
+        </button>
+      {/each}
+    {:else}
+      <p class="text-sm p-5">
+        Looks like you shared your photos with all users or you don't have any user to share with.
+      </p>
+    {/if}
 
-		{#if selectedUsers.length > 0}
-			<div class="flex place-content-end p-5">
-				<Button size="sm" rounded="lg" on:click={() => dispatch('add-users', selectedUsers)}>
-					Add
-				</Button>
-			</div>
-		{/if}
-	</div>
+    {#if selectedUsers.length > 0}
+      <div class="flex place-content-end p-5">
+        <Button size="sm" rounded="lg" on:click={() => dispatch('add-users', selectedUsers)}>Add</Button>
+      </div>
+    {/if}
+  </div>
 </BaseModal>
diff --git a/web/src/lib/components/user-settings-page/partner-settings.svelte b/web/src/lib/components/user-settings-page/partner-settings.svelte
index 7aedbfba9..a8719d911 100644
--- a/web/src/lib/components/user-settings-page/partner-settings.svelte
+++ b/web/src/lib/components/user-settings-page/partner-settings.svelte
@@ -1,100 +1,100 @@
 <script lang="ts">
-	import { UserResponseDto, api } from '@api';
-	import UserAvatar from '../shared-components/user-avatar.svelte';
-	import Close from 'svelte-material-icons/Close.svelte';
-	import Button from '../elements/buttons/button.svelte';
-	import PartnerSelectionModal from './partner-selection-modal.svelte';
-	import { handleError } from '../../utils/handle-error';
-	import { onMount } from 'svelte';
-	import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
-	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import { UserResponseDto, api } from '@api';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import Close from 'svelte-material-icons/Close.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import PartnerSelectionModal from './partner-selection-modal.svelte';
+  import { handleError } from '../../utils/handle-error';
+  import { onMount } from 'svelte';
+  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
 
-	export let user: UserResponseDto;
+  export let user: UserResponseDto;
 
-	let partners: UserResponseDto[] = [];
-	let createPartner = false;
-	let removePartner: UserResponseDto | null = null;
+  let partners: UserResponseDto[] = [];
+  let createPartner = false;
+  let removePartner: UserResponseDto | null = null;
 
-	const refreshPartners = async () => {
-		const { data } = await api.partnerApi.getPartners({ direction: 'shared-by' });
-		partners = data;
-	};
+  const refreshPartners = async () => {
+    const { data } = await api.partnerApi.getPartners({ direction: 'shared-by' });
+    partners = data;
+  };
 
-	const handleRemovePartner = async () => {
-		if (!removePartner) {
-			return;
-		}
+  const handleRemovePartner = async () => {
+    if (!removePartner) {
+      return;
+    }
 
-		try {
-			await api.partnerApi.removePartner({ id: removePartner.id });
-			removePartner = null;
-			await refreshPartners();
-		} catch (error) {
-			handleError(error, 'Unable to remove partner');
-		}
-	};
+    try {
+      await api.partnerApi.removePartner({ id: removePartner.id });
+      removePartner = null;
+      await refreshPartners();
+    } catch (error) {
+      handleError(error, 'Unable to remove partner');
+    }
+  };
 
-	const handleCreatePartners = async (users: UserResponseDto[]) => {
-		try {
-			for (const user of users) {
-				await api.partnerApi.createPartner({ id: user.id });
-			}
+  const handleCreatePartners = async (users: UserResponseDto[]) => {
+    try {
+      for (const user of users) {
+        await api.partnerApi.createPartner({ id: user.id });
+      }
 
-			await refreshPartners();
-			createPartner = false;
-		} catch (error) {
-			handleError(error, 'Unable to add partners');
-		}
-	};
+      await refreshPartners();
+      createPartner = false;
+    } catch (error) {
+      handleError(error, 'Unable to add partners');
+    }
+  };
 
-	onMount(async () => {
-		await refreshPartners();
-	});
+  onMount(async () => {
+    await refreshPartners();
+  });
 </script>
 
 <section class="my-4">
-	{#if partners.length > 0}
-		<div class="flex flex-row gap-4">
-			{#each partners as partner (partner.id)}
-				<div class="flex rounded-lg gap-4 py-4 px-5 transition-all">
-					<UserAvatar user={partner} size="md" autoColor />
-					<div class="text-left">
-						<p class="text-immich-fg dark:text-immich-dark-fg">
-							{partner.firstName}
-							{partner.lastName}
-						</p>
-						<p class="text-xs text-immich-fg/75 dark:text-immich-dark-fg/75">
-							{partner.email}
-						</p>
-					</div>
-					<CircleIconButton
-						on:click={() => (removePartner = partner)}
-						logo={Close}
-						size={'16'}
-						title="Remove partner"
-					/>
-				</div>
-			{/each}
-		</div>
-	{/if}
-	<div class="flex justify-end">
-		<Button size="sm" on:click={() => (createPartner = true)}>Add partner</Button>
-	</div>
+  {#if partners.length > 0}
+    <div class="flex flex-row gap-4">
+      {#each partners as partner (partner.id)}
+        <div class="flex rounded-lg gap-4 py-4 px-5 transition-all">
+          <UserAvatar user={partner} size="md" autoColor />
+          <div class="text-left">
+            <p class="text-immich-fg dark:text-immich-dark-fg">
+              {partner.firstName}
+              {partner.lastName}
+            </p>
+            <p class="text-xs text-immich-fg/75 dark:text-immich-dark-fg/75">
+              {partner.email}
+            </p>
+          </div>
+          <CircleIconButton
+            on:click={() => (removePartner = partner)}
+            logo={Close}
+            size={'16'}
+            title="Remove partner"
+          />
+        </div>
+      {/each}
+    </div>
+  {/if}
+  <div class="flex justify-end">
+    <Button size="sm" on:click={() => (createPartner = true)}>Add partner</Button>
+  </div>
 </section>
 
 {#if createPartner}
-	<PartnerSelectionModal
-		{user}
-		on:close={() => (createPartner = false)}
-		on:add-users={(event) => handleCreatePartners(event.detail)}
-	/>
+  <PartnerSelectionModal
+    {user}
+    on:close={() => (createPartner = false)}
+    on:add-users={(event) => handleCreatePartners(event.detail)}
+  />
 {/if}
 
 {#if removePartner}
-	<ConfirmDialogue
-		title="Stop sharing your photos?"
-		prompt="{removePartner.firstName} will no longer be able to access your photos."
-		on:cancel={() => (removePartner = null)}
-		on:confirm={() => handleRemovePartner()}
-	/>
+  <ConfirmDialogue
+    title="Stop sharing your photos?"
+    prompt="{removePartner.firstName} will no longer be able to access your photos."
+    on:cancel={() => (removePartner = null)}
+    on:confirm={() => handleRemovePartner()}
+  />
 {/if}
diff --git a/web/src/lib/components/user-settings-page/user-api-key-list.svelte b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
index 5612497ef..129418c95 100644
--- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
@@ -1,177 +1,167 @@
 <script lang="ts">
-	import { api, APIKeyResponseDto } from '@api';
-	import { onMount } from 'svelte';
-	import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
-	import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
-	import { fade } from 'svelte/transition';
-	import { handleError } from '../../utils/handle-error';
-	import APIKeyForm from '../forms/api-key-form.svelte';
-	import APIKeySecret from '../forms/api-key-secret.svelte';
-	import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '../shared-components/notification/notification';
-	import { locale } from '$lib/stores/preferences.store';
-	import Button from '../elements/buttons/button.svelte';
+  import { api, APIKeyResponseDto } from '@api';
+  import { onMount } from 'svelte';
+  import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
+  import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
+  import { fade } from 'svelte/transition';
+  import { handleError } from '../../utils/handle-error';
+  import APIKeyForm from '../forms/api-key-form.svelte';
+  import APIKeySecret from '../forms/api-key-secret.svelte';
+  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import { locale } from '$lib/stores/preferences.store';
+  import Button from '../elements/buttons/button.svelte';
 
-	let keys: APIKeyResponseDto[] = [];
+  let keys: APIKeyResponseDto[] = [];
 
-	let newKey: Partial<APIKeyResponseDto> | null = null;
-	let editKey: APIKeyResponseDto | null = null;
-	let deleteKey: APIKeyResponseDto | null = null;
-	let secret = '';
+  let newKey: Partial<APIKeyResponseDto> | null = null;
+  let editKey: APIKeyResponseDto | null = null;
+  let deleteKey: APIKeyResponseDto | null = null;
+  let secret = '';
 
-	const format: Intl.DateTimeFormatOptions = {
-		month: 'short',
-		day: 'numeric',
-		year: 'numeric'
-	};
+  const format: Intl.DateTimeFormatOptions = {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  };
 
-	onMount(() => {
-		refreshKeys();
-	});
+  onMount(() => {
+    refreshKeys();
+  });
 
-	async function refreshKeys() {
-		const { data } = await api.keyApi.getKeys();
-		keys = data;
-	}
+  async function refreshKeys() {
+    const { data } = await api.keyApi.getKeys();
+    keys = data;
+  }
 
-	const handleCreate = async (event: CustomEvent<APIKeyResponseDto>) => {
-		try {
-			const dto = event.detail;
-			const { data } = await api.keyApi.createKey({ aPIKeyCreateDto: dto });
-			secret = data.secret;
-		} catch (error) {
-			handleError(error, 'Unable to create a new API Key');
-		} finally {
-			await refreshKeys();
-			newKey = null;
-		}
-	};
+  const handleCreate = async (event: CustomEvent<APIKeyResponseDto>) => {
+    try {
+      const dto = event.detail;
+      const { data } = await api.keyApi.createKey({ aPIKeyCreateDto: dto });
+      secret = data.secret;
+    } catch (error) {
+      handleError(error, 'Unable to create a new API Key');
+    } finally {
+      await refreshKeys();
+      newKey = null;
+    }
+  };
 
-	const handleUpdate = async (event: CustomEvent<APIKeyResponseDto>) => {
-		if (!editKey) {
-			return;
-		}
+  const handleUpdate = async (event: CustomEvent<APIKeyResponseDto>) => {
+    if (!editKey) {
+      return;
+    }
 
-		const dto = event.detail;
+    const dto = event.detail;
 
-		try {
-			await api.keyApi.updateKey({ id: editKey.id, aPIKeyUpdateDto: { name: dto.name } });
-			notificationController.show({
-				message: `Saved API Key`,
-				type: NotificationType.Info
-			});
-		} catch (error) {
-			handleError(error, 'Unable to save API Key');
-		} finally {
-			await refreshKeys();
-			editKey = null;
-		}
-	};
+    try {
+      await api.keyApi.updateKey({ id: editKey.id, aPIKeyUpdateDto: { name: dto.name } });
+      notificationController.show({
+        message: `Saved API Key`,
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to save API Key');
+    } finally {
+      await refreshKeys();
+      editKey = null;
+    }
+  };
 
-	const handleDelete = async () => {
-		if (!deleteKey) {
-			return;
-		}
+  const handleDelete = async () => {
+    if (!deleteKey) {
+      return;
+    }
 
-		try {
-			await api.keyApi.deleteKey({ id: deleteKey.id });
-			notificationController.show({
-				message: `Removed API Key: ${deleteKey.name}`,
-				type: NotificationType.Info
-			});
-		} catch (error) {
-			handleError(error, 'Unable to remove API Key');
-		} finally {
-			await refreshKeys();
-			deleteKey = null;
-		}
-	};
+    try {
+      await api.keyApi.deleteKey({ id: deleteKey.id });
+      notificationController.show({
+        message: `Removed API Key: ${deleteKey.name}`,
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to remove API Key');
+    } finally {
+      await refreshKeys();
+      deleteKey = null;
+    }
+  };
 </script>
 
 {#if newKey}
-	<APIKeyForm
-		title="New API Key"
-		submitText="Create"
-		apiKey={newKey}
-		on:submit={handleCreate}
-		on:cancel={() => (newKey = null)}
-	/>
+  <APIKeyForm
+    title="New API Key"
+    submitText="Create"
+    apiKey={newKey}
+    on:submit={handleCreate}
+    on:cancel={() => (newKey = null)}
+  />
 {/if}
 
 {#if secret}
-	<APIKeySecret {secret} on:done={() => (secret = '')} />
+  <APIKeySecret {secret} on:done={() => (secret = '')} />
 {/if}
 
 {#if editKey}
-	<APIKeyForm
-		submitText="Save"
-		apiKey={editKey}
-		on:submit={handleUpdate}
-		on:cancel={() => (editKey = null)}
-	/>
+  <APIKeyForm submitText="Save" apiKey={editKey} on:submit={handleUpdate} on:cancel={() => (editKey = null)} />
 {/if}
 
 {#if deleteKey}
-	<ConfirmDialogue
-		prompt="Are you sure you want to delete this API Key?"
-		on:confirm={() => handleDelete()}
-		on:cancel={() => (deleteKey = null)}
-	/>
+  <ConfirmDialogue
+    prompt="Are you sure you want to delete this API Key?"
+    on:confirm={() => handleDelete()}
+    on:cancel={() => (deleteKey = null)}
+  />
 {/if}
 
 <section class="my-4">
-	<div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
-		<div class="flex justify-end mb-2">
-			<Button size="sm" on:click={() => (newKey = { name: 'API Key' })}>New API Key</Button>
-		</div>
+  <div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
+    <div class="flex justify-end mb-2">
+      <Button size="sm" on:click={() => (newKey = { name: 'API Key' })}>New API Key</Button>
+    </div>
 
-		{#if keys.length > 0}
-			<table class="text-left w-full">
-				<thead
-					class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
-				>
-					<tr class="flex w-full place-items-center">
-						<th class="text-center w-1/3 font-medium text-sm">Name</th>
-						<th class="text-center w-1/3 font-medium text-sm">Created</th>
-						<th class="text-center w-1/3 font-medium text-sm">Action</th>
-					</tr>
-				</thead>
-				<tbody class="overflow-y-auto rounded-md w-full block border dark:border-immich-dark-gray">
-					{#each keys as key, i}
-						{#key key.id}
-							<tr
-								class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
-									i % 2 == 0
-										? 'bg-immich-gray dark:bg-immich-dark-gray/75'
-										: 'bg-immich-bg dark:bg-immich-dark-gray/50'
-								}`}
-							>
-								<td class="text-sm px-4 w-1/3 text-ellipsis">{key.name}</td>
-								<td class="text-sm px-4 w-1/3 text-ellipsis"
-									>{new Date(key.createdAt).toLocaleDateString($locale, format)}
-								</td>
-								<td class="text-sm px-4 w-1/3 text-ellipsis">
-									<button
-										on:click={() => (editKey = key)}
-										class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
-									>
-										<PencilOutline size="16" />
-									</button>
-									<button
-										on:click={() => (deleteKey = key)}
-										class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
-									>
-										<TrashCanOutline size="16" />
-									</button>
-								</td>
-							</tr>
-						{/key}
-					{/each}
-				</tbody>
-			</table>
-		{/if}
-	</div>
+    {#if keys.length > 0}
+      <table class="text-left w-full">
+        <thead
+          class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
+        >
+          <tr class="flex w-full place-items-center">
+            <th class="text-center w-1/3 font-medium text-sm">Name</th>
+            <th class="text-center w-1/3 font-medium text-sm">Created</th>
+            <th class="text-center w-1/3 font-medium text-sm">Action</th>
+          </tr>
+        </thead>
+        <tbody class="overflow-y-auto rounded-md w-full block border dark:border-immich-dark-gray">
+          {#each keys as key, i}
+            {#key key.id}
+              <tr
+                class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
+                  i % 2 == 0 ? 'bg-immich-gray dark:bg-immich-dark-gray/75' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
+                }`}
+              >
+                <td class="text-sm px-4 w-1/3 text-ellipsis">{key.name}</td>
+                <td class="text-sm px-4 w-1/3 text-ellipsis"
+                  >{new Date(key.createdAt).toLocaleDateString($locale, format)}
+                </td>
+                <td class="text-sm px-4 w-1/3 text-ellipsis">
+                  <button
+                    on:click={() => (editKey = key)}
+                    class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
+                  >
+                    <PencilOutline size="16" />
+                  </button>
+                  <button
+                    on:click={() => (deleteKey = key)}
+                    class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
+                  >
+                    <TrashCanOutline size="16" />
+                  </button>
+                </td>
+              </tr>
+            {/key}
+          {/each}
+        </tbody>
+      </table>
+    {/if}
+  </div>
 </section>
diff --git a/web/src/lib/components/user-settings-page/user-profile-settings.svelte b/web/src/lib/components/user-settings-page/user-profile-settings.svelte
index 847e517db..0c4571f60 100644
--- a/web/src/lib/components/user-settings-page/user-profile-settings.svelte
+++ b/web/src/lib/components/user-settings-page/user-profile-settings.svelte
@@ -1,92 +1,86 @@
 <script lang="ts">
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import { api, UserResponseDto } from '@api';
-	import { fade } from 'svelte/transition';
-	import { handleError } from '../../utils/handle-error';
-	import SettingInputField, {
-		SettingInputFieldType
-	} from '../admin-page/settings/setting-input-field.svelte';
-	import Button from '../elements/buttons/button.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { api, UserResponseDto } from '@api';
+  import { fade } from 'svelte/transition';
+  import { handleError } from '../../utils/handle-error';
+  import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
+  import Button from '../elements/buttons/button.svelte';
 
-	export let user: UserResponseDto;
+  export let user: UserResponseDto;
 
-	const handleSaveProfile = async () => {
-		try {
-			const { data } = await api.userApi.updateUser({
-				updateUserDto: {
-					id: user.id,
-					email: user.email,
-					firstName: user.firstName,
-					lastName: user.lastName
-				}
-			});
+  const handleSaveProfile = async () => {
+    try {
+      const { data } = await api.userApi.updateUser({
+        updateUserDto: {
+          id: user.id,
+          email: user.email,
+          firstName: user.firstName,
+          lastName: user.lastName,
+        },
+      });
 
-			Object.assign(user, data);
+      Object.assign(user, data);
 
-			notificationController.show({
-				message: 'Saved profile',
-				type: NotificationType.Info
-			});
-		} catch (error) {
-			handleError(error, 'Unable to save profile');
-		}
-	};
+      notificationController.show({
+        message: 'Saved profile',
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to save profile');
+    }
+  };
 </script>
 
 <section class="my-4">
-	<div in:fade={{ duration: 500 }}>
-		<form autocomplete="off" on:submit|preventDefault>
-			<div class="flex flex-col gap-4 ml-4 mt-4">
-				<SettingInputField
-					inputType={SettingInputFieldType.TEXT}
-					label="USER ID"
-					bind:value={user.id}
-					disabled={true}
-				/>
+  <div in:fade={{ duration: 500 }}>
+    <form autocomplete="off" on:submit|preventDefault>
+      <div class="flex flex-col gap-4 ml-4 mt-4">
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label="USER ID"
+          bind:value={user.id}
+          disabled={true}
+        />
 
-				<SettingInputField
-					inputType={SettingInputFieldType.EMAIL}
-					label="EMAIL"
-					bind:value={user.email}
-				/>
+        <SettingInputField inputType={SettingInputFieldType.EMAIL} label="EMAIL" bind:value={user.email} />
 
-				<SettingInputField
-					inputType={SettingInputFieldType.TEXT}
-					label="FIRST NAME"
-					bind:value={user.firstName}
-					required={true}
-				/>
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label="FIRST NAME"
+          bind:value={user.firstName}
+          required={true}
+        />
 
-				<SettingInputField
-					inputType={SettingInputFieldType.TEXT}
-					label="LAST NAME"
-					bind:value={user.lastName}
-					required={true}
-				/>
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label="LAST NAME"
+          bind:value={user.lastName}
+          required={true}
+        />
 
-				<SettingInputField
-					inputType={SettingInputFieldType.TEXT}
-					label="STORAGE LABEL"
-					disabled={true}
-					value={user.storageLabel || ''}
-					required={false}
-				/>
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label="STORAGE LABEL"
+          disabled={true}
+          value={user.storageLabel || ''}
+          required={false}
+        />
 
-				<SettingInputField
-					inputType={SettingInputFieldType.TEXT}
-					label="EXTERNAL PATH"
-					disabled={true}
-					value={user.externalPath || ''}
-					required={false}
-				/>
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label="EXTERNAL PATH"
+          disabled={true}
+          value={user.externalPath || ''}
+          required={false}
+        />
 
-				<div class="flex justify-end">
-					<Button type="submit" size="sm" on:click={() => handleSaveProfile()}>Save</Button>
-				</div>
-			</div>
-		</form>
-	</div>
+        <div class="flex justify-end">
+          <Button type="submit" size="sm" on:click={() => handleSaveProfile()}>Save</Button>
+        </div>
+      </div>
+    </form>
+  </div>
 </section>
diff --git a/web/src/lib/components/user-settings-page/user-settings-list.svelte b/web/src/lib/components/user-settings-page/user-settings-list.svelte
index 6f069f664..76311414c 100644
--- a/web/src/lib/components/user-settings-page/user-settings-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-settings-list.svelte
@@ -1,58 +1,58 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import { oauth, UserResponseDto } from '@api';
-	import { onMount } from 'svelte';
-	import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
-	import ChangePasswordSettings from './change-password-settings.svelte';
-	import OAuthSettings from './oauth-settings.svelte';
-	import UserAPIKeyList from './user-api-key-list.svelte';
-	import DeviceList from './device-list.svelte';
-	import PartnerSettings from './partner-settings.svelte';
-	import UserProfileSettings from './user-profile-settings.svelte';
+  import { page } from '$app/stores';
+  import { oauth, UserResponseDto } from '@api';
+  import { onMount } from 'svelte';
+  import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
+  import ChangePasswordSettings from './change-password-settings.svelte';
+  import OAuthSettings from './oauth-settings.svelte';
+  import UserAPIKeyList from './user-api-key-list.svelte';
+  import DeviceList from './device-list.svelte';
+  import PartnerSettings from './partner-settings.svelte';
+  import UserProfileSettings from './user-profile-settings.svelte';
 
-	export let user: UserResponseDto;
+  export let user: UserResponseDto;
 
-	let oauthEnabled = false;
-	let oauthOpen = false;
+  let oauthEnabled = false;
+  let oauthOpen = false;
 
-	onMount(async () => {
-		oauthOpen = oauth.isCallback(window.location);
+  onMount(async () => {
+    oauthOpen = oauth.isCallback(window.location);
 
-		try {
-			const { data } = await oauth.getConfig(window.location);
-			oauthEnabled = data.enabled;
-		} catch {
-			// noop
-		}
-	});
+    try {
+      const { data } = await oauth.getConfig(window.location);
+      oauthEnabled = data.enabled;
+    } catch {
+      // noop
+    }
+  });
 </script>
 
 <SettingAccordion title="Account" subtitle="Manage your account">
-	<UserProfileSettings {user} />
+  <UserProfileSettings {user} />
 </SettingAccordion>
 
 <SettingAccordion title="API Keys" subtitle="Manage your API keys">
-	<UserAPIKeyList />
+  <UserAPIKeyList />
 </SettingAccordion>
 
 <SettingAccordion title="Authorized Devices" subtitle="Manage your logged-in devices">
-	<DeviceList />
+  <DeviceList />
 </SettingAccordion>
 
 {#if oauthEnabled}
-	<SettingAccordion
-		title="OAuth"
-		subtitle="Manage your OAuth connection"
-		isOpen={oauthOpen || $page.url.searchParams.get('open') === 'oauth'}
-	>
-		<OAuthSettings {user} />
-	</SettingAccordion>
+  <SettingAccordion
+    title="OAuth"
+    subtitle="Manage your OAuth connection"
+    isOpen={oauthOpen || $page.url.searchParams.get('open') === 'oauth'}
+  >
+    <OAuthSettings {user} />
+  </SettingAccordion>
 {/if}
 
 <SettingAccordion title="Password" subtitle="Change your password">
-	<ChangePasswordSettings />
+  <ChangePasswordSettings />
 </SettingAccordion>
 
 <SettingAccordion title="Sharing" subtitle="Manage sharing with partners">
-	<PartnerSettings {user} />
+  <PartnerSettings {user} />
 </SettingAccordion>
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index cc3bc635d..1e715fa25 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -2,26 +2,26 @@ import { env } from '$env/dynamic/public';
 export const loginPageMessage: string | undefined = env.PUBLIC_LOGIN_PAGE_MESSAGE;
 
 export enum AppRoute {
-	ADMIN_USER_MANAGEMENT = '/admin/user-management',
-	ADMIN_SETTINGS = '/admin/system-settings',
-	ADMIN_STATS = '/admin/server-status',
-	ADMIN_JOBS = '/admin/jobs-status',
+  ADMIN_USER_MANAGEMENT = '/admin/user-management',
+  ADMIN_SETTINGS = '/admin/system-settings',
+  ADMIN_STATS = '/admin/server-status',
+  ADMIN_JOBS = '/admin/jobs-status',
 
-	ALBUMS = '/albums',
-	ARCHIVE = '/archive',
-	FAVORITES = '/favorites',
-	PEOPLE = '/people',
-	PHOTOS = '/photos',
-	EXPLORE = '/explore',
-	SHARING = '/sharing',
-	SHARED_LINKS = '/sharing/sharedlinks',
-	SEARCH = '/search',
-	MAP = '/map',
-	USER_SETTINGS = '/user-settings',
-	MEMORY = '/memory',
+  ALBUMS = '/albums',
+  ARCHIVE = '/archive',
+  FAVORITES = '/favorites',
+  PEOPLE = '/people',
+  PHOTOS = '/photos',
+  EXPLORE = '/explore',
+  SHARING = '/sharing',
+  SHARED_LINKS = '/sharing/sharedlinks',
+  SEARCH = '/search',
+  MAP = '/map',
+  USER_SETTINGS = '/user-settings',
+  MEMORY = '/memory',
 
-	AUTH_LOGIN = '/auth/login',
-	AUTH_LOGOUT = '/auth/logout',
-	AUTH_REGISTER = '/auth/register',
-	AUTH_CHANGE_PASSWORD = '/auth/change-password'
+  AUTH_LOGIN = '/auth/login',
+  AUTH_LOGOUT = '/auth/logout',
+  AUTH_REGISTER = '/auth/register',
+  AUTH_CHANGE_PASSWORD = '/auth/change-password',
 }
diff --git a/web/src/lib/models/asset-grid-state.ts b/web/src/lib/models/asset-grid-state.ts
index 1f3eb26ab..fcf5da767 100644
--- a/web/src/lib/models/asset-grid-state.ts
+++ b/web/src/lib/models/asset-grid-state.ts
@@ -1,53 +1,53 @@
 import type { AssetResponseDto } from '@api';
 
 export enum BucketPosition {
-	Above = 'above',
-	Below = 'below',
-	Visible = 'visible',
-	Unknown = 'unknown'
+  Above = 'above',
+  Below = 'below',
+  Visible = 'visible',
+  Unknown = 'unknown',
 }
 
 export class AssetBucket {
-	/**
-	 * The DOM height of the bucket in pixel
-	 * This value is first estimated by the number of asset and later is corrected as the user scroll
-	 */
-	bucketHeight!: number;
-	bucketDate!: string;
-	assets!: AssetResponseDto[];
-	cancelToken!: AbortController;
-	position!: BucketPosition;
+  /**
+   * The DOM height of the bucket in pixel
+   * This value is first estimated by the number of asset and later is corrected as the user scroll
+   */
+  bucketHeight!: number;
+  bucketDate!: string;
+  assets!: AssetResponseDto[];
+  cancelToken!: AbortController;
+  position!: BucketPosition;
 }
 
 export class AssetGridState {
-	/**
-	 * The total height of the timeline in pixel
-	 * This value is first estimated by the number of asset and later is corrected as the user scroll
-	 */
-	timelineHeight = 0;
+  /**
+   * The total height of the timeline in pixel
+   * This value is first estimated by the number of asset and later is corrected as the user scroll
+   */
+  timelineHeight = 0;
 
-	/**
-	 * The fixed viewport height in pixel
-	 */
-	viewportHeight = 0;
+  /**
+   * The fixed viewport height in pixel
+   */
+  viewportHeight = 0;
 
-	/**
-	 * The fixed viewport width in pixel
-	 */
-	viewportWidth = 0;
+  /**
+   * The fixed viewport width in pixel
+   */
+  viewportWidth = 0;
 
-	/**
-	 * List of bucket information
-	 */
-	buckets: AssetBucket[] = [];
+  /**
+   * List of bucket information
+   */
+  buckets: AssetBucket[] = [];
 
-	/**
-	 * Total assets that have been loaded
-	 */
-	assets: AssetResponseDto[] = [];
+  /**
+   * Total assets that have been loaded
+   */
+  assets: AssetResponseDto[] = [];
 
-	/**
-	 * User that owns assets
-	 */
-	userId: string | undefined;
+  /**
+   * User that owns assets
+   */
+  userId: string | undefined;
 }
diff --git a/web/src/lib/models/upload-asset.ts b/web/src/lib/models/upload-asset.ts
index 6079251b6..c4de5458b 100644
--- a/web/src/lib/models/upload-asset.ts
+++ b/web/src/lib/models/upload-asset.ts
@@ -1,6 +1,6 @@
 export type UploadAsset = {
-	id: string;
-	file: File;
-	progress: number;
-	fileExtension: string;
+  id: string;
+  file: File;
+  progress: number;
+  fileExtension: string;
 };
diff --git a/web/src/lib/stores/album-asset-selection.store.ts b/web/src/lib/stores/album-asset-selection.store.ts
index 18cf42eb2..a99e2baac 100644
--- a/web/src/lib/stores/album-asset-selection.store.ts
+++ b/web/src/lib/stores/album-asset-selection.store.ts
@@ -1,10 +1,10 @@
 import { writable } from 'svelte/store';
 
 function createAlbumAssetSelectionStore() {
-	const isAlbumAssetSelectionOpen = writable<boolean>(false);
-	return {
-		isAlbumAssetSelectionOpen
-	};
+  const isAlbumAssetSelectionOpen = writable<boolean>(false);
+  return {
+    isAlbumAssetSelectionOpen,
+  };
 }
 
 export const albumAssetSelectionStore = createAlbumAssetSelectionStore();
diff --git a/web/src/lib/stores/asset-interaction.store.ts b/web/src/lib/stores/asset-interaction.store.ts
index ec7dbb169..a49f7f4bc 100644
--- a/web/src/lib/stores/asset-interaction.store.ts
+++ b/web/src/lib/stores/asset-interaction.store.ts
@@ -1,8 +1,8 @@
 import { AssetGridState, BucketPosition } from '$lib/models/asset-grid-state';
 import { api, AssetResponseDto } from '@api';
+import { sortBy } from 'lodash-es';
 import { derived, writable } from 'svelte/store';
 import { assetGridState, assetStore } from './assets.store';
-import { sortBy } from 'lodash-es';
 
 // Asset Viewer
 export const viewingAssetStoreState = writable<AssetResponseDto>();
@@ -12,147 +12,144 @@ export const isViewingAssetStoreState = writable<boolean>(false);
 export const assetsInAlbumStoreState = writable<AssetResponseDto[]>([]);
 export const selectedAssets = writable<Set<AssetResponseDto>>(new Set());
 export const selectedGroup = writable<Set<string>>(new Set());
-export const isMultiSelectStoreState = derived(
-	selectedAssets,
-	($selectedAssets) => $selectedAssets.size > 0
-);
+export const isMultiSelectStoreState = derived(selectedAssets, ($selectedAssets) => $selectedAssets.size > 0);
 
 function createAssetInteractionStore() {
-	let _assetGridState = new AssetGridState();
-	let _viewingAssetStoreState: AssetResponseDto;
-	let _selectedAssets: Set<AssetResponseDto>;
-	let _selectedGroup: Set<string>;
-	let _assetsInAlbums: AssetResponseDto[];
-	let savedAssetLength = 0;
-	let assetSortedByDate: AssetResponseDto[] = [];
+  let _assetGridState = new AssetGridState();
+  let _viewingAssetStoreState: AssetResponseDto;
+  let _selectedAssets: Set<AssetResponseDto>;
+  let _selectedGroup: Set<string>;
+  let _assetsInAlbums: AssetResponseDto[];
+  let savedAssetLength = 0;
+  let assetSortedByDate: AssetResponseDto[] = [];
 
-	// Subscriber
-	assetGridState.subscribe((state) => {
-		_assetGridState = state;
-	});
+  // Subscriber
+  assetGridState.subscribe((state) => {
+    _assetGridState = state;
+  });
 
-	viewingAssetStoreState.subscribe((asset) => {
-		_viewingAssetStoreState = asset;
-	});
+  viewingAssetStoreState.subscribe((asset) => {
+    _viewingAssetStoreState = asset;
+  });
 
-	selectedAssets.subscribe((assets) => {
-		_selectedAssets = assets;
-	});
+  selectedAssets.subscribe((assets) => {
+    _selectedAssets = assets;
+  });
 
-	selectedGroup.subscribe((group) => {
-		_selectedGroup = group;
-	});
+  selectedGroup.subscribe((group) => {
+    _selectedGroup = group;
+  });
 
-	assetsInAlbumStoreState.subscribe((assets) => {
-		_assetsInAlbums = assets;
-	});
+  assetsInAlbumStoreState.subscribe((assets) => {
+    _assetsInAlbums = assets;
+  });
 
-	// Methods
+  // Methods
 
-	/**
-	 * Asset Viewer
-	 */
-	const setViewingAsset = async (asset: AssetResponseDto) => {
-		setViewingAssetId(asset.id);
-	};
+  /**
+   * Asset Viewer
+   */
+  const setViewingAsset = async (asset: AssetResponseDto) => {
+    setViewingAssetId(asset.id);
+  };
 
-	const setViewingAssetId = async (id: string) => {
-		const { data } = await api.assetApi.getAssetById({ id });
-		viewingAssetStoreState.set(data);
-		isViewingAssetStoreState.set(true);
-	};
+  const setViewingAssetId = async (id: string) => {
+    const { data } = await api.assetApi.getAssetById({ id });
+    viewingAssetStoreState.set(data);
+    isViewingAssetStoreState.set(true);
+  };
 
-	const setIsViewingAsset = (isViewing: boolean) => {
-		isViewingAssetStoreState.set(isViewing);
-	};
+  const setIsViewingAsset = (isViewing: boolean) => {
+    isViewingAssetStoreState.set(isViewing);
+  };
 
-	const navigateAsset = async (direction: 'next' | 'previous') => {
-		// Flatten and sort the asset by date if there are new assets
-		if (assetSortedByDate.length === 0 || savedAssetLength !== _assetGridState.assets.length) {
-			assetSortedByDate = sortBy(_assetGridState.assets, (a) => a.fileCreatedAt);
-			savedAssetLength = _assetGridState.assets.length;
-		}
+  const navigateAsset = async (direction: 'next' | 'previous') => {
+    // Flatten and sort the asset by date if there are new assets
+    if (assetSortedByDate.length === 0 || savedAssetLength !== _assetGridState.assets.length) {
+      assetSortedByDate = sortBy(_assetGridState.assets, (a) => a.fileCreatedAt);
+      savedAssetLength = _assetGridState.assets.length;
+    }
 
-		// Find the index of the current asset
-		const currentIndex = assetSortedByDate.findIndex((a) => a.id === _viewingAssetStoreState.id);
+    // Find the index of the current asset
+    const currentIndex = assetSortedByDate.findIndex((a) => a.id === _viewingAssetStoreState.id);
 
-		// Get the next or previous asset
-		const nextIndex = direction === 'previous' ? currentIndex + 1 : currentIndex - 1;
+    // Get the next or previous asset
+    const nextIndex = direction === 'previous' ? currentIndex + 1 : currentIndex - 1;
 
-		// Run out of asset, this might be because there is no asset in the next bucket.
-		if (nextIndex == -1) {
-			let nextBucket = '';
-			// Find next bucket that doesn't have all assets loaded
+    // Run out of asset, this might be because there is no asset in the next bucket.
+    if (nextIndex == -1) {
+      let nextBucket = '';
+      // Find next bucket that doesn't have all assets loaded
 
-			for (const bucket of _assetGridState.buckets) {
-				if (bucket.assets.length === 0) {
-					nextBucket = bucket.bucketDate;
-					break;
-				}
-			}
+      for (const bucket of _assetGridState.buckets) {
+        if (bucket.assets.length === 0) {
+          nextBucket = bucket.bucketDate;
+          break;
+        }
+      }
 
-			if (nextBucket !== '') {
-				await assetStore.getAssetsByBucket(nextBucket, BucketPosition.Below);
-				navigateAsset(direction);
-			}
-			return;
-		}
+      if (nextBucket !== '') {
+        await assetStore.getAssetsByBucket(nextBucket, BucketPosition.Below);
+        navigateAsset(direction);
+      }
+      return;
+    }
 
-		const nextAsset = assetSortedByDate[nextIndex];
-		if (nextAsset) {
-			setViewingAsset(nextAsset);
-		}
-	};
+    const nextAsset = assetSortedByDate[nextIndex];
+    if (nextAsset) {
+      setViewingAsset(nextAsset);
+    }
+  };
 
-	/**
-	 * Multiselect
-	 */
-	const addAssetToMultiselectGroup = (asset: AssetResponseDto) => {
-		// Not select if in album already
-		if (_assetsInAlbums.find((a) => a.id === asset.id)) {
-			return;
-		}
+  /**
+   * Multiselect
+   */
+  const addAssetToMultiselectGroup = (asset: AssetResponseDto) => {
+    // Not select if in album already
+    if (_assetsInAlbums.find((a) => a.id === asset.id)) {
+      return;
+    }
 
-		_selectedAssets.add(asset);
-		selectedAssets.set(_selectedAssets);
-	};
+    _selectedAssets.add(asset);
+    selectedAssets.set(_selectedAssets);
+  };
 
-	const removeAssetFromMultiselectGroup = (asset: AssetResponseDto) => {
-		_selectedAssets.delete(asset);
-		selectedAssets.set(_selectedAssets);
-	};
+  const removeAssetFromMultiselectGroup = (asset: AssetResponseDto) => {
+    _selectedAssets.delete(asset);
+    selectedAssets.set(_selectedAssets);
+  };
 
-	const addGroupToMultiselectGroup = (group: string) => {
-		_selectedGroup.add(group);
-		selectedGroup.set(_selectedGroup);
-	};
+  const addGroupToMultiselectGroup = (group: string) => {
+    _selectedGroup.add(group);
+    selectedGroup.set(_selectedGroup);
+  };
 
-	const removeGroupFromMultiselectGroup = (group: string) => {
-		_selectedGroup.delete(group);
-		selectedGroup.set(_selectedGroup);
-	};
+  const removeGroupFromMultiselectGroup = (group: string) => {
+    _selectedGroup.delete(group);
+    selectedGroup.set(_selectedGroup);
+  };
 
-	const clearMultiselect = () => {
-		_selectedAssets.clear();
-		_selectedGroup.clear();
-		_assetsInAlbums = [];
+  const clearMultiselect = () => {
+    _selectedAssets.clear();
+    _selectedGroup.clear();
+    _assetsInAlbums = [];
 
-		selectedAssets.set(_selectedAssets);
-		selectedGroup.set(_selectedGroup);
-		assetsInAlbumStoreState.set(_assetsInAlbums);
-	};
+    selectedAssets.set(_selectedAssets);
+    selectedGroup.set(_selectedGroup);
+    assetsInAlbumStoreState.set(_assetsInAlbums);
+  };
 
-	return {
-		setViewingAsset,
-		setViewingAssetId,
-		setIsViewingAsset,
-		navigateAsset,
-		addAssetToMultiselectGroup,
-		removeAssetFromMultiselectGroup,
-		addGroupToMultiselectGroup,
-		removeGroupFromMultiselectGroup,
-		clearMultiselect
-	};
+  return {
+    setViewingAsset,
+    setViewingAssetId,
+    setIsViewingAsset,
+    navigateAsset,
+    addAssetToMultiselectGroup,
+    removeAssetFromMultiselectGroup,
+    addGroupToMultiselectGroup,
+    removeGroupFromMultiselectGroup,
+    clearMultiselect,
+  };
 }
 
 export const assetInteractionStore = createAssetInteractionStore();
diff --git a/web/src/lib/stores/assets.store.ts b/web/src/lib/stores/assets.store.ts
index eac4e1846..13475dba6 100644
--- a/web/src/lib/stores/assets.store.ts
+++ b/web/src/lib/stores/assets.store.ts
@@ -1,6 +1,6 @@
 import { AssetGridState, BucketPosition } from '$lib/models/asset-grid-state';
-import { AssetCountByTimeBucketResponseDto, api } from '@api';
-import { sumBy, flatMap } from 'lodash-es';
+import { api, AssetCountByTimeBucketResponseDto } from '@api';
+import { flatMap, sumBy } from 'lodash-es';
 import { writable } from 'svelte/store';
 
 /**
@@ -10,189 +10,189 @@ export const assetGridState = writable<AssetGridState>(new AssetGridState());
 export const loadingBucketState = writable<{ [key: string]: boolean }>({});
 
 function createAssetStore() {
-	let _assetGridState = new AssetGridState();
-	assetGridState.subscribe((state) => {
-		_assetGridState = state;
-	});
+  let _assetGridState = new AssetGridState();
+  assetGridState.subscribe((state) => {
+    _assetGridState = state;
+  });
 
-	let _loadingBucketState: { [key: string]: boolean } = {};
-	loadingBucketState.subscribe((state) => {
-		_loadingBucketState = state;
-	});
+  let _loadingBucketState: { [key: string]: boolean } = {};
+  loadingBucketState.subscribe((state) => {
+    _loadingBucketState = state;
+  });
 
-	const estimateViewportHeight = (assetCount: number, viewportWidth: number): number => {
-		// Ideally we would use the average aspect ratio for the photoset, however assume
-		// a normal landscape aspect ratio of 3:2, then discount for the likelihood we
-		// will be scaling down and coalescing.
-		const thumbnailHeight = 235;
-		const unwrappedWidth = (3 / 2) * assetCount * thumbnailHeight * (7 / 10);
-		const rows = Math.ceil(unwrappedWidth / viewportWidth);
-		const height = rows * thumbnailHeight;
-		return height;
-	};
+  const estimateViewportHeight = (assetCount: number, viewportWidth: number): number => {
+    // Ideally we would use the average aspect ratio for the photoset, however assume
+    // a normal landscape aspect ratio of 3:2, then discount for the likelihood we
+    // will be scaling down and coalescing.
+    const thumbnailHeight = 235;
+    const unwrappedWidth = (3 / 2) * assetCount * thumbnailHeight * (7 / 10);
+    const rows = Math.ceil(unwrappedWidth / viewportWidth);
+    const height = rows * thumbnailHeight;
+    return height;
+  };
 
-	/**
-	 * Set initial state
-	 * @param viewportHeight
-	 * @param viewportWidth
-	 * @param data
-	 */
-	const setInitialState = (
-		viewportHeight: number,
-		viewportWidth: number,
-		data: AssetCountByTimeBucketResponseDto,
-		userId: string | undefined
-	) => {
-		assetGridState.set({
-			viewportHeight,
-			viewportWidth,
-			timelineHeight: 0,
-			buckets: data.buckets.map((bucket) => ({
-				bucketDate: bucket.timeBucket,
-				bucketHeight: estimateViewportHeight(bucket.count, viewportWidth),
-				assets: [],
-				cancelToken: new AbortController(),
-				position: BucketPosition.Unknown
-			})),
-			assets: [],
-			userId
-		});
+  /**
+   * Set initial state
+   * @param viewportHeight
+   * @param viewportWidth
+   * @param data
+   */
+  const setInitialState = (
+    viewportHeight: number,
+    viewportWidth: number,
+    data: AssetCountByTimeBucketResponseDto,
+    userId: string | undefined,
+  ) => {
+    assetGridState.set({
+      viewportHeight,
+      viewportWidth,
+      timelineHeight: 0,
+      buckets: data.buckets.map((bucket) => ({
+        bucketDate: bucket.timeBucket,
+        bucketHeight: estimateViewportHeight(bucket.count, viewportWidth),
+        assets: [],
+        cancelToken: new AbortController(),
+        position: BucketPosition.Unknown,
+      })),
+      assets: [],
+      userId,
+    });
 
-		// Update timeline height based on calculated bucket height
-		assetGridState.update((state) => {
-			state.timelineHeight = sumBy(state.buckets, (d) => d.bucketHeight);
-			return state;
-		});
-	};
+    // Update timeline height based on calculated bucket height
+    assetGridState.update((state) => {
+      state.timelineHeight = sumBy(state.buckets, (d) => d.bucketHeight);
+      return state;
+    });
+  };
 
-	const getAssetsByBucket = async (bucket: string, position: BucketPosition) => {
-		try {
-			const currentBucketData = _assetGridState.buckets.find((b) => b.bucketDate === bucket);
-			if (currentBucketData?.assets && currentBucketData.assets.length > 0) {
-				assetGridState.update((state) => {
-					const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucket);
-					state.buckets[bucketIndex].position = position;
-					return state;
-				});
-				return;
-			}
+  const getAssetsByBucket = async (bucket: string, position: BucketPosition) => {
+    try {
+      const currentBucketData = _assetGridState.buckets.find((b) => b.bucketDate === bucket);
+      if (currentBucketData?.assets && currentBucketData.assets.length > 0) {
+        assetGridState.update((state) => {
+          const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucket);
+          state.buckets[bucketIndex].position = position;
+          return state;
+        });
+        return;
+      }
 
-			loadingBucketState.set({
-				..._loadingBucketState,
-				[bucket]: true
-			});
-			const { data: assets } = await api.assetApi.getAssetByTimeBucket(
-				{
-					getAssetByTimeBucketDto: {
-						timeBucket: [bucket],
-						userId: _assetGridState.userId,
-						withoutThumbs: true
-					}
-				},
-				{ signal: currentBucketData?.cancelToken.signal }
-			);
-			loadingBucketState.set({
-				..._loadingBucketState,
-				[bucket]: false
-			});
+      loadingBucketState.set({
+        ..._loadingBucketState,
+        [bucket]: true,
+      });
+      const { data: assets } = await api.assetApi.getAssetByTimeBucket(
+        {
+          getAssetByTimeBucketDto: {
+            timeBucket: [bucket],
+            userId: _assetGridState.userId,
+            withoutThumbs: true,
+          },
+        },
+        { signal: currentBucketData?.cancelToken.signal },
+      );
+      loadingBucketState.set({
+        ..._loadingBucketState,
+        [bucket]: false,
+      });
 
-			// Update assetGridState with assets by time bucket
-			assetGridState.update((state) => {
-				const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucket);
-				state.buckets[bucketIndex].assets = assets;
-				state.buckets[bucketIndex].position = position;
-				state.assets = flatMap(state.buckets, (b) => b.assets);
-				return state;
-			});
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		} catch (e: any) {
-			if (e.name === 'CanceledError') {
-				return;
-			}
-			console.error('Failed to get asset for bucket ', bucket);
-			console.error(e);
-		}
-	};
+      // Update assetGridState with assets by time bucket
+      assetGridState.update((state) => {
+        const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucket);
+        state.buckets[bucketIndex].assets = assets;
+        state.buckets[bucketIndex].position = position;
+        state.assets = flatMap(state.buckets, (b) => b.assets);
+        return state;
+      });
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (e: any) {
+      if (e.name === 'CanceledError') {
+        return;
+      }
+      console.error('Failed to get asset for bucket ', bucket);
+      console.error(e);
+    }
+  };
 
-	const removeAsset = (assetId: string) => {
-		assetGridState.update((state) => {
-			const bucketIndex = state.buckets.findIndex((b) => b.assets.some((a) => a.id === assetId));
-			const assetIndex = state.buckets[bucketIndex].assets.findIndex((a) => a.id === assetId);
-			state.buckets[bucketIndex].assets.splice(assetIndex, 1);
+  const removeAsset = (assetId: string) => {
+    assetGridState.update((state) => {
+      const bucketIndex = state.buckets.findIndex((b) => b.assets.some((a) => a.id === assetId));
+      const assetIndex = state.buckets[bucketIndex].assets.findIndex((a) => a.id === assetId);
+      state.buckets[bucketIndex].assets.splice(assetIndex, 1);
 
-			if (state.buckets[bucketIndex].assets.length === 0) {
-				_removeBucket(state.buckets[bucketIndex].bucketDate);
-			}
-			state.assets = flatMap(state.buckets, (b) => b.assets);
-			return state;
-		});
-	};
+      if (state.buckets[bucketIndex].assets.length === 0) {
+        _removeBucket(state.buckets[bucketIndex].bucketDate);
+      }
+      state.assets = flatMap(state.buckets, (b) => b.assets);
+      return state;
+    });
+  };
 
-	const _removeBucket = (bucketDate: string) => {
-		assetGridState.update((state) => {
-			const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucketDate);
-			state.buckets.splice(bucketIndex, 1);
-			state.assets = flatMap(state.buckets, (b) => b.assets);
-			return state;
-		});
-	};
+  const _removeBucket = (bucketDate: string) => {
+    assetGridState.update((state) => {
+      const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucketDate);
+      state.buckets.splice(bucketIndex, 1);
+      state.assets = flatMap(state.buckets, (b) => b.assets);
+      return state;
+    });
+  };
 
-	const updateBucketHeight = (bucket: string, actualBucketHeight: number): number => {
-		let scrollTimeline = false;
-		let heightDelta = 0;
+  const updateBucketHeight = (bucket: string, actualBucketHeight: number): number => {
+    let scrollTimeline = false;
+    let heightDelta = 0;
 
-		assetGridState.update((state) => {
-			const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucket);
-			// Update timeline height based on the new bucket height
-			const estimateBucketHeight = state.buckets[bucketIndex].bucketHeight;
+    assetGridState.update((state) => {
+      const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucket);
+      // Update timeline height based on the new bucket height
+      const estimateBucketHeight = state.buckets[bucketIndex].bucketHeight;
 
-			heightDelta = actualBucketHeight - estimateBucketHeight;
-			state.timelineHeight += heightDelta;
+      heightDelta = actualBucketHeight - estimateBucketHeight;
+      state.timelineHeight += heightDelta;
 
-			scrollTimeline = state.buckets[bucketIndex].position == BucketPosition.Above;
+      scrollTimeline = state.buckets[bucketIndex].position == BucketPosition.Above;
 
-			state.buckets[bucketIndex].bucketHeight = actualBucketHeight;
-			state.buckets[bucketIndex].position = BucketPosition.Unknown;
+      state.buckets[bucketIndex].bucketHeight = actualBucketHeight;
+      state.buckets[bucketIndex].position = BucketPosition.Unknown;
 
-			return state;
-		});
+      return state;
+    });
 
-		if (scrollTimeline) {
-			return heightDelta;
-		}
+    if (scrollTimeline) {
+      return heightDelta;
+    }
 
-		return 0;
-	};
+    return 0;
+  };
 
-	const cancelBucketRequest = async (token: AbortController, bucketDate: string) => {
-		token.abort();
-		// set new abort controller for bucket
-		assetGridState.update((state) => {
-			const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucketDate);
-			state.buckets[bucketIndex].cancelToken = new AbortController();
-			return state;
-		});
-	};
+  const cancelBucketRequest = async (token: AbortController, bucketDate: string) => {
+    token.abort();
+    // set new abort controller for bucket
+    assetGridState.update((state) => {
+      const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucketDate);
+      state.buckets[bucketIndex].cancelToken = new AbortController();
+      return state;
+    });
+  };
 
-	const updateAsset = (assetId: string, isFavorite: boolean) => {
-		assetGridState.update((state) => {
-			const bucketIndex = state.buckets.findIndex((b) => b.assets.some((a) => a.id === assetId));
-			const assetIndex = state.buckets[bucketIndex].assets.findIndex((a) => a.id === assetId);
-			state.buckets[bucketIndex].assets[assetIndex].isFavorite = isFavorite;
+  const updateAsset = (assetId: string, isFavorite: boolean) => {
+    assetGridState.update((state) => {
+      const bucketIndex = state.buckets.findIndex((b) => b.assets.some((a) => a.id === assetId));
+      const assetIndex = state.buckets[bucketIndex].assets.findIndex((a) => a.id === assetId);
+      state.buckets[bucketIndex].assets[assetIndex].isFavorite = isFavorite;
 
-			state.assets = flatMap(state.buckets, (b) => b.assets);
-			return state;
-		});
-	};
+      state.assets = flatMap(state.buckets, (b) => b.assets);
+      return state;
+    });
+  };
 
-	return {
-		setInitialState,
-		getAssetsByBucket,
-		removeAsset,
-		updateBucketHeight,
-		cancelBucketRequest,
-		updateAsset
-	};
+  return {
+    setInitialState,
+    getAssetsByBucket,
+    removeAsset,
+    updateBucketHeight,
+    cancelBucketRequest,
+    updateAsset,
+  };
 }
 
 export const assetStore = createAssetStore();
diff --git a/web/src/lib/stores/download.ts b/web/src/lib/stores/download.ts
index e0a5d10c6..a7a9f81c0 100644
--- a/web/src/lib/stores/download.ts
+++ b/web/src/lib/stores/download.ts
@@ -1,25 +1,25 @@
-import { writable, derived } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 
 export const downloadAssets = writable<Record<string, number>>({});
 
 export const isDownloading = derived(downloadAssets, ($downloadAssets) => {
-	if (Object.keys($downloadAssets).length == 0) {
-		return false;
-	}
+  if (Object.keys($downloadAssets).length == 0) {
+    return false;
+  }
 
-	return true;
+  return true;
 });
 
 const update = (key: string, value: number | null) => {
-	downloadAssets.update((state) => {
-		const newState = { ...state };
-		if (value === null) {
-			delete newState[key];
-		} else {
-			newState[key] = value;
-		}
-		return newState;
-	});
+  downloadAssets.update((state) => {
+    const newState = { ...state };
+    if (value === null) {
+      delete newState[key];
+    } else {
+      newState[key] = value;
+    }
+    return newState;
+  });
 };
 
 export const clearDownload = (key: string) => update(key, null);
diff --git a/web/src/lib/stores/drag-and-drop-files.store.ts b/web/src/lib/stores/drag-and-drop-files.store.ts
index 018687f26..1b8733aa8 100644
--- a/web/src/lib/stores/drag-and-drop-files.store.ts
+++ b/web/src/lib/stores/drag-and-drop-files.store.ts
@@ -2,6 +2,6 @@
 import { writable } from 'svelte/store';
 
 export const dragAndDropFilesStore = writable({
-	isDragging: false as boolean,
-	files: [] as File[]
+  isDragging: false as boolean,
+  files: [] as File[],
 });
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index 7969838ce..b70af7664 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -1,39 +1,38 @@
 import { browser } from '$app/environment';
 import { persisted } from 'svelte-local-storage-store';
 
-const initialTheme =
-	browser && !window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark';
+const initialTheme = browser && !window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark';
 
 // The 'color-theme' key is also used by app.html to prevent FOUC on page load.
 export const colorTheme = persisted<'dark' | 'light'>('color-theme', initialTheme, {
-	serializer: {
-		parse: (text) => (text === 'light' ? text : 'dark'),
-		stringify: (obj) => obj
-	}
+  serializer: {
+    parse: (text) => (text === 'light' ? text : 'dark'),
+    stringify: (obj) => obj,
+  },
 });
 
 // Locale to use for formatting dates, numbers, etc.
 export const locale = persisted<string | undefined>('locale', undefined, {
-	serializer: {
-		parse: (text) => text,
-		stringify: (obj) => obj ?? ''
-	}
+  serializer: {
+    parse: (text) => text,
+    stringify: (obj) => obj ?? '',
+  },
 });
 
 export interface MapSettings {
-	allowDarkMode: boolean;
-	onlyFavorites: boolean;
-	relativeDate: string;
-	dateAfter: string;
-	dateBefore: string;
+  allowDarkMode: boolean;
+  onlyFavorites: boolean;
+  relativeDate: string;
+  dateAfter: string;
+  dateBefore: string;
 }
 
 export const mapSettings = persisted<MapSettings>('map-settings', {
-	allowDarkMode: true,
-	onlyFavorites: false,
-	relativeDate: '',
-	dateAfter: '',
-	dateBefore: ''
+  allowDarkMode: true,
+  onlyFavorites: false,
+  relativeDate: '',
+  dateAfter: '',
+  dateBefore: '',
 });
 
 export const videoViewerVolume = persisted<number>('video-viewer-volume', 1, {});
@@ -41,9 +40,9 @@ export const videoViewerVolume = persisted<number>('video-viewer-volume', 1, {})
 export const isShowDetail = persisted<boolean>('info-opened', false, {});
 
 export interface AlbumViewSettings {
-	sortBy: string;
+  sortBy: string;
 }
 
 export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settings', {
-	sortBy: 'Most recent photo'
+  sortBy: 'Most recent photo',
 });
diff --git a/web/src/lib/stores/upload.ts b/web/src/lib/stores/upload.ts
index d3b7a7f0e..0d8d31cfa 100644
--- a/web/src/lib/stores/upload.ts
+++ b/web/src/lib/stores/upload.ts
@@ -1,45 +1,45 @@
-import { writable, derived } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 import type { UploadAsset } from '../models/upload-asset';
 
 function createUploadStore() {
-	const uploadAssets = writable<Array<UploadAsset>>([]);
+  const uploadAssets = writable<Array<UploadAsset>>([]);
 
-	const { subscribe } = uploadAssets;
+  const { subscribe } = uploadAssets;
 
-	const isUploading = derived(uploadAssets, ($uploadAssets) => {
-		return $uploadAssets.length > 0 ? true : false;
-	});
+  const isUploading = derived(uploadAssets, ($uploadAssets) => {
+    return $uploadAssets.length > 0 ? true : false;
+  });
 
-	const addNewUploadAsset = (newAsset: UploadAsset) => {
-		uploadAssets.update((currentSet) => [...currentSet, newAsset]);
-	};
+  const addNewUploadAsset = (newAsset: UploadAsset) => {
+    uploadAssets.update((currentSet) => [...currentSet, newAsset]);
+  };
 
-	const updateProgress = (id: string, progress: number) => {
-		uploadAssets.update((uploadingAssets) => {
-			return uploadingAssets.map((asset) => {
-				if (asset.id == id) {
-					return {
-						...asset,
-						progress: progress
-					};
-				}
+  const updateProgress = (id: string, progress: number) => {
+    uploadAssets.update((uploadingAssets) => {
+      return uploadingAssets.map((asset) => {
+        if (asset.id == id) {
+          return {
+            ...asset,
+            progress: progress,
+          };
+        }
 
-				return asset;
-			});
-		});
-	};
+        return asset;
+      });
+    });
+  };
 
-	const removeUploadAsset = (id: string) => {
-		uploadAssets.update((uploadingAsset) => uploadingAsset.filter((a) => a.id != id));
-	};
+  const removeUploadAsset = (id: string) => {
+    uploadAssets.update((uploadingAsset) => uploadingAsset.filter((a) => a.id != id));
+  };
 
-	return {
-		subscribe,
-		isUploading,
-		addNewUploadAsset,
-		updateProgress,
-		removeUploadAsset
-	};
+  return {
+    subscribe,
+    isUploading,
+    addNewUploadAsset,
+    updateProgress,
+    removeUploadAsset,
+  };
 }
 
 export const uploadAssetsStore = createUploadStore();
diff --git a/web/src/lib/stores/websocket.ts b/web/src/lib/stores/websocket.ts
index 74e323cb7..09777891e 100644
--- a/web/src/lib/stores/websocket.ts
+++ b/web/src/lib/stores/websocket.ts
@@ -1,32 +1,32 @@
-import { Socket, io } from 'socket.io-client';
+import { io, Socket } from 'socket.io-client';
 
 let websocket: Socket;
 
 export const openWebsocketConnection = () => {
-	try {
-		websocket = io('', {
-			path: '/api/socket.io',
-			transports: ['polling'],
-			reconnection: true,
-			forceNew: true,
-			autoConnect: true
-		});
+  try {
+    websocket = io('', {
+      path: '/api/socket.io',
+      transports: ['polling'],
+      reconnection: true,
+      forceNew: true,
+      autoConnect: true,
+    });
 
-		listenToEvent(websocket);
-	} catch (e) {
-		console.log('Cannot connect to websocket ', e);
-	}
+    listenToEvent(websocket);
+  } catch (e) {
+    console.log('Cannot connect to websocket ', e);
+  }
 };
 
 const listenToEvent = (socket: Socket) => {
-	//TODO: if we are not using this, we should probably remove it?
-	socket.on('on_upload_success', () => undefined);
+  //TODO: if we are not using this, we should probably remove it?
+  socket.on('on_upload_success', () => undefined);
 
-	socket.on('error', (e) => {
-		console.log('Websocket Error', e);
-	});
+  socket.on('error', (e) => {
+    console.log('Websocket Error', e);
+  });
 };
 
 export const closeWebsocketConnection = () => {
-	websocket?.close();
+  websocket?.close();
 };
diff --git a/web/src/lib/stores/zoom-image.store.ts b/web/src/lib/stores/zoom-image.store.ts
index cdad99ab7..2c6ee1897 100644
--- a/web/src/lib/stores/zoom-image.store.ts
+++ b/web/src/lib/stores/zoom-image.store.ts
@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store';
 import type { ZoomImageWheelState } from '@zoom-image/core';
+import { writable } from 'svelte/store';
 
 export const photoZoomState = writable<ZoomImageWheelState>();
diff --git a/web/src/lib/utils/asset-utils.spec.ts b/web/src/lib/utils/asset-utils.spec.ts
index 9105420e3..d9abbdcdc 100644
--- a/web/src/lib/utils/asset-utils.spec.ts
+++ b/web/src/lib/utils/asset-utils.spec.ts
@@ -1,145 +1,144 @@
 import type { AssetResponseDto } from '@api';
 import { describe, expect, it } from '@jest/globals';
-import { getAssetFilename, getFilenameExtension, getFileMimeType } from './asset-utils';
+import { getAssetFilename, getFileMimeType, getFilenameExtension } from './asset-utils';
 
 describe('get file extension from filename', () => {
-	it('returns the extension without including the dot', () => {
-		expect(getFilenameExtension('filename.txt')).toEqual('txt');
-	});
+  it('returns the extension without including the dot', () => {
+    expect(getFilenameExtension('filename.txt')).toEqual('txt');
+  });
 
-	it('takes the last file extension and ignores the rest', () => {
-		expect(getFilenameExtension('filename.txt.pdf')).toEqual('pdf');
-		expect(getFilenameExtension('filename.txt.pdf.jpg')).toEqual('jpg');
-	});
+  it('takes the last file extension and ignores the rest', () => {
+    expect(getFilenameExtension('filename.txt.pdf')).toEqual('pdf');
+    expect(getFilenameExtension('filename.txt.pdf.jpg')).toEqual('jpg');
+  });
 
-	it('returns an empty string when no file extension is found', () => {
-		expect(getFilenameExtension('filename')).toEqual('');
-		expect(getFilenameExtension('filename.')).toEqual('');
-		expect(getFilenameExtension('filename..')).toEqual('');
-		expect(getFilenameExtension('.filename')).toEqual('');
-	});
+  it('returns an empty string when no file extension is found', () => {
+    expect(getFilenameExtension('filename')).toEqual('');
+    expect(getFilenameExtension('filename.')).toEqual('');
+    expect(getFilenameExtension('filename..')).toEqual('');
+    expect(getFilenameExtension('.filename')).toEqual('');
+  });
 
-	it('returns the extension from a filepath', () => {
-		expect(getFilenameExtension('/folder/file.txt')).toEqual('txt');
-		expect(getFilenameExtension('./folder/file.txt')).toEqual('txt');
-		expect(getFilenameExtension('~/folder/file.txt')).toEqual('txt');
-		expect(getFilenameExtension('./folder/.file.txt')).toEqual('txt');
-		expect(getFilenameExtension('/folder.with.dots/file.txt')).toEqual('txt');
-	});
+  it('returns the extension from a filepath', () => {
+    expect(getFilenameExtension('/folder/file.txt')).toEqual('txt');
+    expect(getFilenameExtension('./folder/file.txt')).toEqual('txt');
+    expect(getFilenameExtension('~/folder/file.txt')).toEqual('txt');
+    expect(getFilenameExtension('./folder/.file.txt')).toEqual('txt');
+    expect(getFilenameExtension('/folder.with.dots/file.txt')).toEqual('txt');
+  });
 });
 
 describe('get asset filename', () => {
-	it('returns the filename including file extension', () => {
-		[
-			{
-				asset: {
-					originalFileName: 'filename',
-					originalPath: 'upload/library/test/2016/2016-08-30/filename.jpg'
-				},
-				result: 'filename.jpg'
-			},
-			{
-				asset: {
-					originalFileName: 'new-filename',
-					originalPath:
-						'upload/library/89d14e47-a40d-4cae-a347-a914cdef1f22/2016/2016-08-30/filename.jpg'
-				},
-				result: 'new-filename.jpg'
-			},
-			{
-				asset: {
-					originalFileName: 'new-filename.txt',
-					originalPath: 'upload/library/test/2016/2016-08-30/filename.txt.jpg'
-				},
-				result: 'new-filename.txt.jpg'
-			}
-		].forEach(({ asset, result }) => {
-			expect(getAssetFilename(asset as AssetResponseDto)).toEqual(result);
-		});
-	});
+  it('returns the filename including file extension', () => {
+    [
+      {
+        asset: {
+          originalFileName: 'filename',
+          originalPath: 'upload/library/test/2016/2016-08-30/filename.jpg',
+        },
+        result: 'filename.jpg',
+      },
+      {
+        asset: {
+          originalFileName: 'new-filename',
+          originalPath: 'upload/library/89d14e47-a40d-4cae-a347-a914cdef1f22/2016/2016-08-30/filename.jpg',
+        },
+        result: 'new-filename.jpg',
+      },
+      {
+        asset: {
+          originalFileName: 'new-filename.txt',
+          originalPath: 'upload/library/test/2016/2016-08-30/filename.txt.jpg',
+        },
+        result: 'new-filename.txt.jpg',
+      },
+    ].forEach(({ asset, result }) => {
+      expect(getAssetFilename(asset as AssetResponseDto)).toEqual(result);
+    });
+  });
 });
 
 describe('get file mime type', () => {
-	for (const { mimetype, extension } of [
-		{ mimetype: 'image/avif', extension: 'avif' },
-		{ mimetype: 'image/gif', extension: 'gif' },
-		{ mimetype: 'image/heic', extension: 'heic' },
-		{ mimetype: 'image/heif', extension: 'heif' },
-		{ mimetype: 'image/jpeg', extension: 'jpeg' },
-		{ mimetype: 'image/jpeg', extension: 'jpg' },
-		{ mimetype: 'image/jxl', extension: 'jxl' },
-		{ mimetype: 'image/png', extension: 'png' },
-		{ mimetype: 'image/tiff', extension: 'tiff' },
-		{ mimetype: 'image/webp', extension: 'webp' },
-		{ mimetype: 'image/x-adobe-dng', extension: 'dng' },
-		{ mimetype: 'image/x-arriflex-ari', extension: 'ari' },
-		{ mimetype: 'image/x-canon-cr2', extension: 'cr2' },
-		{ mimetype: 'image/x-canon-cr3', extension: 'cr3' },
-		{ mimetype: 'image/x-canon-crw', extension: 'crw' },
-		{ mimetype: 'image/x-epson-erf', extension: 'erf' },
-		{ mimetype: 'image/x-fuji-raf', extension: 'raf' },
-		{ mimetype: 'image/x-hasselblad-3fr', extension: '3fr' },
-		{ mimetype: 'image/x-hasselblad-fff', extension: 'fff' },
-		{ mimetype: 'image/x-kodak-dcr', extension: 'dcr' },
-		{ mimetype: 'image/x-kodak-k25', extension: 'k25' },
-		{ mimetype: 'image/x-kodak-kdc', extension: 'kdc' },
-		{ mimetype: 'image/x-leica-rwl', extension: 'rwl' },
-		{ mimetype: 'image/x-minolta-mrw', extension: 'mrw' },
-		{ mimetype: 'image/x-nikon-nef', extension: 'nef' },
-		{ mimetype: 'image/x-olympus-orf', extension: 'orf' },
-		{ mimetype: 'image/x-olympus-ori', extension: 'ori' },
-		{ mimetype: 'image/x-panasonic-raw', extension: 'raw' },
-		{ mimetype: 'image/x-pentax-pef', extension: 'pef' },
-		{ mimetype: 'image/x-phantom-cin', extension: 'cin' },
-		{ mimetype: 'image/x-phaseone-cap', extension: 'cap' },
-		{ mimetype: 'image/x-phaseone-iiq', extension: 'iiq' },
-		{ mimetype: 'image/x-samsung-srw', extension: 'srw' },
-		{ mimetype: 'image/x-sigma-x3f', extension: 'x3f' },
-		{ mimetype: 'image/x-sony-arw', extension: 'arw' },
-		{ mimetype: 'image/x-sony-sr2', extension: 'sr2' },
-		{ mimetype: 'image/x-sony-srf', extension: 'srf' },
-		{ mimetype: 'video/3gpp', extension: '3gp' },
-		{ mimetype: 'video/avi', extension: 'avi' },
-		{ mimetype: 'video/mp2t', extension: 'm2ts' },
-		{ mimetype: 'video/mp2t', extension: 'mts' },
-		{ mimetype: 'video/mp4', extension: 'mp4' },
-		{ mimetype: 'video/mpeg', extension: 'mpg' },
-		{ mimetype: 'video/quicktime', extension: 'mov' },
-		{ mimetype: 'video/webm', extension: 'webm' },
-		{ mimetype: 'video/x-flv', extension: 'flv' },
-		{ mimetype: 'video/x-matroska', extension: 'mkv' },
-		{ mimetype: 'video/x-ms-wmv', extension: 'wmv' }
-	]) {
-		it(`returns the mime type for ${extension}`, () => {
-			expect(getFileMimeType({ name: `filename.${extension}` } as File)).toEqual(mimetype);
-		});
-	}
+  for (const { mimetype, extension } of [
+    { mimetype: 'image/avif', extension: 'avif' },
+    { mimetype: 'image/gif', extension: 'gif' },
+    { mimetype: 'image/heic', extension: 'heic' },
+    { mimetype: 'image/heif', extension: 'heif' },
+    { mimetype: 'image/jpeg', extension: 'jpeg' },
+    { mimetype: 'image/jpeg', extension: 'jpg' },
+    { mimetype: 'image/jxl', extension: 'jxl' },
+    { mimetype: 'image/png', extension: 'png' },
+    { mimetype: 'image/tiff', extension: 'tiff' },
+    { mimetype: 'image/webp', extension: 'webp' },
+    { mimetype: 'image/x-adobe-dng', extension: 'dng' },
+    { mimetype: 'image/x-arriflex-ari', extension: 'ari' },
+    { mimetype: 'image/x-canon-cr2', extension: 'cr2' },
+    { mimetype: 'image/x-canon-cr3', extension: 'cr3' },
+    { mimetype: 'image/x-canon-crw', extension: 'crw' },
+    { mimetype: 'image/x-epson-erf', extension: 'erf' },
+    { mimetype: 'image/x-fuji-raf', extension: 'raf' },
+    { mimetype: 'image/x-hasselblad-3fr', extension: '3fr' },
+    { mimetype: 'image/x-hasselblad-fff', extension: 'fff' },
+    { mimetype: 'image/x-kodak-dcr', extension: 'dcr' },
+    { mimetype: 'image/x-kodak-k25', extension: 'k25' },
+    { mimetype: 'image/x-kodak-kdc', extension: 'kdc' },
+    { mimetype: 'image/x-leica-rwl', extension: 'rwl' },
+    { mimetype: 'image/x-minolta-mrw', extension: 'mrw' },
+    { mimetype: 'image/x-nikon-nef', extension: 'nef' },
+    { mimetype: 'image/x-olympus-orf', extension: 'orf' },
+    { mimetype: 'image/x-olympus-ori', extension: 'ori' },
+    { mimetype: 'image/x-panasonic-raw', extension: 'raw' },
+    { mimetype: 'image/x-pentax-pef', extension: 'pef' },
+    { mimetype: 'image/x-phantom-cin', extension: 'cin' },
+    { mimetype: 'image/x-phaseone-cap', extension: 'cap' },
+    { mimetype: 'image/x-phaseone-iiq', extension: 'iiq' },
+    { mimetype: 'image/x-samsung-srw', extension: 'srw' },
+    { mimetype: 'image/x-sigma-x3f', extension: 'x3f' },
+    { mimetype: 'image/x-sony-arw', extension: 'arw' },
+    { mimetype: 'image/x-sony-sr2', extension: 'sr2' },
+    { mimetype: 'image/x-sony-srf', extension: 'srf' },
+    { mimetype: 'video/3gpp', extension: '3gp' },
+    { mimetype: 'video/avi', extension: 'avi' },
+    { mimetype: 'video/mp2t', extension: 'm2ts' },
+    { mimetype: 'video/mp2t', extension: 'mts' },
+    { mimetype: 'video/mp4', extension: 'mp4' },
+    { mimetype: 'video/mpeg', extension: 'mpg' },
+    { mimetype: 'video/quicktime', extension: 'mov' },
+    { mimetype: 'video/webm', extension: 'webm' },
+    { mimetype: 'video/x-flv', extension: 'flv' },
+    { mimetype: 'video/x-matroska', extension: 'mkv' },
+    { mimetype: 'video/x-ms-wmv', extension: 'wmv' },
+  ]) {
+    it(`returns the mime type for ${extension}`, () => {
+      expect(getFileMimeType({ name: `filename.${extension}` } as File)).toEqual(mimetype);
+    });
+  }
 
-	it('returns the mime type from the file', () => {
-		[
-			{
-				file: {
-					name: 'filename.jpg',
-					type: 'image/jpeg'
-				},
-				result: 'image/jpeg'
-			},
-			{
-				file: {
-					name: 'filename.txt',
-					type: 'text/plain'
-				},
-				result: 'text/plain'
-			},
-			{
-				file: {
-					name: 'filename.txt',
-					type: ''
-				},
-				result: ''
-			}
-		].forEach(({ file, result }) => {
-			expect(getFileMimeType(file as File)).toEqual(result);
-		});
-	});
+  it('returns the mime type from the file', () => {
+    [
+      {
+        file: {
+          name: 'filename.jpg',
+          type: 'image/jpeg',
+        },
+        result: 'image/jpeg',
+      },
+      {
+        file: {
+          name: 'filename.txt',
+          type: 'text/plain',
+        },
+        result: 'text/plain',
+      },
+      {
+        file: {
+          name: 'filename.txt',
+          type: '',
+        },
+        result: '',
+      },
+    ].forEach(({ file, result }) => {
+      expect(getFileMimeType(file as File)).toEqual(result);
+    });
+  });
 });
diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts
index af90d2a45..13c7c26b0 100644
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -1,133 +1,121 @@
-import {
-	notificationController,
-	NotificationType
-} from '$lib/components/shared-components/notification/notification';
+import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
 import { clearDownload, updateDownload } from '$lib/stores/download';
-import {
-	AddAssetsResponseDto,
-	api,
-	AssetApiGetDownloadInfoRequest,
-	AssetResponseDto,
-	DownloadResponseDto
-} from '@api';
+import { AddAssetsResponseDto, api, AssetApiGetDownloadInfoRequest, AssetResponseDto, DownloadResponseDto } from '@api';
 import { handleError } from './handle-error';
 
 export const addAssetsToAlbum = async (
-	albumId: string,
-	assetIds: Array<string>,
-	key: string | undefined = undefined
+  albumId: string,
+  assetIds: Array<string>,
+  key: string | undefined = undefined,
 ): Promise<AddAssetsResponseDto> =>
-	api.albumApi
-		.addAssetsToAlbum({ id: albumId, addAssetsDto: { assetIds }, key })
-		.then(({ data: dto }) => {
-			if (dto.successfullyAdded > 0) {
-				// This might be 0 if the user tries to add an asset that is already in the album
-				notificationController.show({
-					message: `Added ${dto.successfullyAdded} to ${dto.album?.albumName}`,
-					type: NotificationType.Info
-				});
-			}
+  api.albumApi.addAssetsToAlbum({ id: albumId, addAssetsDto: { assetIds }, key }).then(({ data: dto }) => {
+    if (dto.successfullyAdded > 0) {
+      // This might be 0 if the user tries to add an asset that is already in the album
+      notificationController.show({
+        message: `Added ${dto.successfullyAdded} to ${dto.album?.albumName}`,
+        type: NotificationType.Info,
+      });
+    }
 
-			return dto;
-		});
+    return dto;
+  });
 
 const downloadBlob = (data: Blob, filename: string) => {
-	const url = URL.createObjectURL(data);
+  const url = URL.createObjectURL(data);
 
-	const anchor = document.createElement('a');
-	anchor.href = url;
-	anchor.download = filename;
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = filename;
 
-	document.body.appendChild(anchor);
-	anchor.click();
-	document.body.removeChild(anchor);
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
 
-	URL.revokeObjectURL(url);
+  URL.revokeObjectURL(url);
 };
 
 export const downloadArchive = async (
-	fileName: string,
-	options: Omit<AssetApiGetDownloadInfoRequest, 'key'>,
-	onDone?: () => void,
-	key?: string
+  fileName: string,
+  options: Omit<AssetApiGetDownloadInfoRequest, 'key'>,
+  onDone?: () => void,
+  key?: string,
 ) => {
-	let downloadInfo: DownloadResponseDto | null = null;
+  let downloadInfo: DownloadResponseDto | null = null;
 
-	try {
-		const { data } = await api.assetApi.getDownloadInfo({ ...options, key });
-		downloadInfo = data;
-	} catch (error) {
-		handleError(error, 'Unable to download files');
-		return;
-	}
+  try {
+    const { data } = await api.assetApi.getDownloadInfo({ ...options, key });
+    downloadInfo = data;
+  } catch (error) {
+    handleError(error, 'Unable to download files');
+    return;
+  }
 
-	// TODO: prompt for big download
-	// const total = downloadInfo.totalSize;
+  // TODO: prompt for big download
+  // const total = downloadInfo.totalSize;
 
-	for (let i = 0; i < downloadInfo.archives.length; i++) {
-		const archive = downloadInfo.archives[i];
-		const suffix = downloadInfo.archives.length === 1 ? '' : `+${i + 1}`;
-		const archiveName = fileName.replace('.zip', `${suffix}.zip`);
+  for (let i = 0; i < downloadInfo.archives.length; i++) {
+    const archive = downloadInfo.archives[i];
+    const suffix = downloadInfo.archives.length === 1 ? '' : `+${i + 1}`;
+    const archiveName = fileName.replace('.zip', `${suffix}.zip`);
 
-		let downloadKey = `${archiveName}`;
-		if (downloadInfo.archives.length > 1) {
-			downloadKey = `${archiveName} (${i + 1}/${downloadInfo.archives.length})`;
-		}
+    let downloadKey = `${archiveName}`;
+    if (downloadInfo.archives.length > 1) {
+      downloadKey = `${archiveName} (${i + 1}/${downloadInfo.archives.length})`;
+    }
 
-		updateDownload(downloadKey, 0);
+    updateDownload(downloadKey, 0);
 
-		try {
-			const { data } = await api.assetApi.downloadArchive(
-				{ assetIdsDto: { assetIds: archive.assetIds }, key },
-				{
-					responseType: 'blob',
-					onDownloadProgress: (event) =>
-						updateDownload(downloadKey, Math.floor((event.loaded / archive.size) * 100))
-				}
-			);
+    try {
+      const { data } = await api.assetApi.downloadArchive(
+        { assetIdsDto: { assetIds: archive.assetIds }, key },
+        {
+          responseType: 'blob',
+          onDownloadProgress: (event) => updateDownload(downloadKey, Math.floor((event.loaded / archive.size) * 100)),
+        },
+      );
 
-			downloadBlob(data, archiveName);
-		} catch (e) {
-			handleError(e, 'Unable to download files');
-			clearDownload(downloadKey);
-			return;
-		} finally {
-			setTimeout(() => clearDownload(downloadKey), 3_000);
-		}
-	}
+      downloadBlob(data, archiveName);
+    } catch (e) {
+      handleError(e, 'Unable to download files');
+      clearDownload(downloadKey);
+      return;
+    } finally {
+      setTimeout(() => clearDownload(downloadKey), 3_000);
+    }
+  }
 
-	onDone?.();
+  onDone?.();
 };
 
 export const downloadFile = async (asset: AssetResponseDto, key?: string) => {
-	const filenames = [`${asset.originalFileName}.${getFilenameExtension(asset.originalPath)}`];
-	if (asset.livePhotoVideoId) {
-		filenames.push(`${asset.originalFileName}.mov`);
-	}
+  const filenames = [`${asset.originalFileName}.${getFilenameExtension(asset.originalPath)}`];
+  if (asset.livePhotoVideoId) {
+    filenames.push(`${asset.originalFileName}.mov`);
+  }
 
-	for (const filename of filenames) {
-		try {
-			updateDownload(filename, 0);
+  for (const filename of filenames) {
+    try {
+      updateDownload(filename, 0);
 
-			const { data } = await api.assetApi.downloadFile(
-				{ id: asset.id, key },
-				{
-					responseType: 'blob',
-					onDownloadProgress: (event: ProgressEvent) => {
-						if (event.lengthComputable) {
-							updateDownload(filename, Math.floor((event.loaded / event.total) * 100));
-						}
-					}
-				}
-			);
+      const { data } = await api.assetApi.downloadFile(
+        { id: asset.id, key },
+        {
+          responseType: 'blob',
+          onDownloadProgress: (event: ProgressEvent) => {
+            if (event.lengthComputable) {
+              updateDownload(filename, Math.floor((event.loaded / event.total) * 100));
+            }
+          },
+        },
+      );
 
-			downloadBlob(data, filename);
-		} catch (e) {
-			handleError(e, `Error downloading ${filename}`);
-		} finally {
-			setTimeout(() => clearDownload(filename), 3_000);
-		}
-	}
+      downloadBlob(data, filename);
+    } catch (e) {
+      handleError(e, `Error downloading ${filename}`);
+    } finally {
+      setTimeout(() => clearDownload(filename), 3_000);
+    }
+  }
 };
 
 /**
@@ -135,98 +123,98 @@ export const downloadFile = async (asset: AssetResponseDto, key?: string) => {
  * an empty string when not found.
  */
 export function getFilenameExtension(filename: string): string {
-	const lastIndex = Math.max(0, filename.lastIndexOf('.'));
-	const startIndex = (lastIndex || Infinity) + 1;
-	return filename.slice(startIndex).toLowerCase();
+  const lastIndex = Math.max(0, filename.lastIndexOf('.'));
+  const startIndex = (lastIndex || Infinity) + 1;
+  return filename.slice(startIndex).toLowerCase();
 }
 
 /**
  * Returns the filename of an asset including file extension
  */
 export function getAssetFilename(asset: AssetResponseDto): string {
-	const fileExtension = getFilenameExtension(asset.originalPath);
-	return `${asset.originalFileName}.${fileExtension}`;
+  const fileExtension = getFilenameExtension(asset.originalPath);
+  return `${asset.originalFileName}.${fileExtension}`;
 }
 
 /**
  * Returns the MIME type of the file and an empty string when not found.
  */
 export function getFileMimeType(file: File): string {
-	const mimeTypes: Record<string, string> = {
-		'3fr': 'image/x-hasselblad-3fr',
-		'3gp': 'video/3gpp',
-		ari: 'image/x-arriflex-ari',
-		arw: 'image/x-sony-arw',
-		avi: 'video/avi',
-		avif: 'image/avif',
-		cap: 'image/x-phaseone-cap',
-		cin: 'image/x-phantom-cin',
-		cr2: 'image/x-canon-cr2',
-		cr3: 'image/x-canon-cr3',
-		crw: 'image/x-canon-crw',
-		dcr: 'image/x-kodak-dcr',
-		dng: 'image/x-adobe-dng',
-		erf: 'image/x-epson-erf',
-		fff: 'image/x-hasselblad-fff',
-		flv: 'video/x-flv',
-		gif: 'image/gif',
-		heic: 'image/heic',
-		heif: 'image/heif',
-		iiq: 'image/x-phaseone-iiq',
-		insp: 'image/jpeg',
-		insv: 'video/mp4',
-		jpeg: 'image/jpeg',
-		jpg: 'image/jpeg',
-		jxl: 'image/jxl',
-		k25: 'image/x-kodak-k25',
-		kdc: 'image/x-kodak-kdc',
-		m2ts: 'video/mp2t',
-		mkv: 'video/x-matroska',
-		mov: 'video/quicktime',
-		mp4: 'video/mp4',
-		mpg: 'video/mpeg',
-		mrw: 'image/x-minolta-mrw',
-		mts: 'video/mp2t',
-		nef: 'image/x-nikon-nef',
-		orf: 'image/x-olympus-orf',
-		ori: 'image/x-olympus-ori',
-		pef: 'image/x-pentax-pef',
-		png: 'image/png',
-		raf: 'image/x-fuji-raf',
-		raw: 'image/x-panasonic-raw',
-		rwl: 'image/x-leica-rwl',
-		sr2: 'image/x-sony-sr2',
-		srf: 'image/x-sony-srf',
-		srw: 'image/x-samsung-srw',
-		tiff: 'image/tiff',
-		webm: 'video/webm',
-		webp: 'image/webp',
-		wmv: 'video/x-ms-wmv',
-		x3f: 'image/x-sigma-x3f'
-	};
-	// Return the MIME type determined by the browser or the MIME type based on the file extension.
-	return file.type || (mimeTypes[getFilenameExtension(file.name)] ?? '');
+  const mimeTypes: Record<string, string> = {
+    '3fr': 'image/x-hasselblad-3fr',
+    '3gp': 'video/3gpp',
+    ari: 'image/x-arriflex-ari',
+    arw: 'image/x-sony-arw',
+    avi: 'video/avi',
+    avif: 'image/avif',
+    cap: 'image/x-phaseone-cap',
+    cin: 'image/x-phantom-cin',
+    cr2: 'image/x-canon-cr2',
+    cr3: 'image/x-canon-cr3',
+    crw: 'image/x-canon-crw',
+    dcr: 'image/x-kodak-dcr',
+    dng: 'image/x-adobe-dng',
+    erf: 'image/x-epson-erf',
+    fff: 'image/x-hasselblad-fff',
+    flv: 'video/x-flv',
+    gif: 'image/gif',
+    heic: 'image/heic',
+    heif: 'image/heif',
+    iiq: 'image/x-phaseone-iiq',
+    insp: 'image/jpeg',
+    insv: 'video/mp4',
+    jpeg: 'image/jpeg',
+    jpg: 'image/jpeg',
+    jxl: 'image/jxl',
+    k25: 'image/x-kodak-k25',
+    kdc: 'image/x-kodak-kdc',
+    m2ts: 'video/mp2t',
+    mkv: 'video/x-matroska',
+    mov: 'video/quicktime',
+    mp4: 'video/mp4',
+    mpg: 'video/mpeg',
+    mrw: 'image/x-minolta-mrw',
+    mts: 'video/mp2t',
+    nef: 'image/x-nikon-nef',
+    orf: 'image/x-olympus-orf',
+    ori: 'image/x-olympus-ori',
+    pef: 'image/x-pentax-pef',
+    png: 'image/png',
+    raf: 'image/x-fuji-raf',
+    raw: 'image/x-panasonic-raw',
+    rwl: 'image/x-leica-rwl',
+    sr2: 'image/x-sony-sr2',
+    srf: 'image/x-sony-srf',
+    srw: 'image/x-samsung-srw',
+    tiff: 'image/tiff',
+    webm: 'video/webm',
+    webp: 'image/webp',
+    wmv: 'video/x-ms-wmv',
+    x3f: 'image/x-sigma-x3f',
+  };
+  // Return the MIME type determined by the browser or the MIME type based on the file extension.
+  return file.type || (mimeTypes[getFilenameExtension(file.name)] ?? '');
 }
 
 function isRotated90CW(orientation: number) {
-	return orientation == 6 || orientation == 90;
+  return orientation == 6 || orientation == 90;
 }
 
 function isRotated270CW(orientation: number) {
-	return orientation == 8 || orientation == -90;
+  return orientation == 8 || orientation == -90;
 }
 
 /**
  * Returns aspect ratio for the asset
  */
 export function getAssetRatio(asset: AssetResponseDto) {
-	let height = asset.exifInfo?.exifImageHeight || 235;
-	let width = asset.exifInfo?.exifImageWidth || 235;
-	const orientation = Number(asset.exifInfo?.orientation);
-	if (orientation) {
-		if (isRotated90CW(orientation) || isRotated270CW(orientation)) {
-			[width, height] = [height, width];
-		}
-	}
-	return { width, height };
+  let height = asset.exifInfo?.exifImageHeight || 235;
+  let width = asset.exifInfo?.exifImageWidth || 235;
+  const orientation = Number(asset.exifInfo?.orientation);
+  if (orientation) {
+    if (isRotated90CW(orientation) || isRotated270CW(orientation)) {
+      [width, height] = [height, width];
+    }
+  }
+  return { width, height };
 }
diff --git a/web/src/lib/utils/byte-units.ts b/web/src/lib/utils/byte-units.ts
index 2ab620f5c..4a41a23bc 100644
--- a/web/src/lib/utils/byte-units.ts
+++ b/web/src/lib/utils/byte-units.ts
@@ -9,22 +9,22 @@
  * @returns size (number) and unit (string)
  */
 export function getBytesWithUnit(bytes: number, maxPrecision = 1): [number, string] {
-	const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB'];
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB'];
 
-	let magnitude = 0;
-	let remainder = bytes;
-	while (remainder >= 1024) {
-		if (magnitude + 1 < units.length) {
-			magnitude++;
-			remainder /= 1024;
-		} else {
-			break;
-		}
-	}
+  let magnitude = 0;
+  let remainder = bytes;
+  while (remainder >= 1024) {
+    if (magnitude + 1 < units.length) {
+      magnitude++;
+      remainder /= 1024;
+    } else {
+      break;
+    }
+  }
 
-	remainder = parseFloat(remainder.toFixed(maxPrecision));
+  remainder = parseFloat(remainder.toFixed(maxPrecision));
 
-	return [remainder, units[magnitude]];
+  return [remainder, units[magnitude]];
 }
 
 /**
@@ -39,6 +39,6 @@ export function getBytesWithUnit(bytes: number, maxPrecision = 1): [number, stri
  * @returns localized bytes with unit as string
  */
 export function asByteUnitString(bytes: number, locale?: string, maxPrecision = 1): string {
-	const [size, unit] = getBytesWithUnit(bytes, maxPrecision);
-	return `${size.toLocaleString(locale)} ${unit}`;
+  const [size, unit] = getBytesWithUnit(bytes, maxPrecision);
+  return `${size.toLocaleString(locale)} ${unit}`;
 }
diff --git a/web/src/lib/utils/click-outside.ts b/web/src/lib/utils/click-outside.ts
index 3b73f085d..7e929ab74 100644
--- a/web/src/lib/utils/click-outside.ts
+++ b/web/src/lib/utils/click-outside.ts
@@ -1,30 +1,30 @@
 import type { ActionReturn } from 'svelte/action';
 
 interface Attributes {
-	'on:outclick'?: (e: CustomEvent) => void;
+  'on:outclick'?: (e: CustomEvent) => void;
 }
 
 export function clickOutside(node: HTMLElement): ActionReturn<void, Attributes> {
-	const handleClick = (event: MouseEvent) => {
-		const targetNode = event.target as Node | null;
-		if (!node.contains(targetNode)) {
-			node.dispatchEvent(new CustomEvent('outclick'));
-		}
-	};
+  const handleClick = (event: MouseEvent) => {
+    const targetNode = event.target as Node | null;
+    if (!node.contains(targetNode)) {
+      node.dispatchEvent(new CustomEvent('outclick'));
+    }
+  };
 
-	const handleKey = (event: KeyboardEvent) => {
-		if (event.key === 'Escape') {
-			node.dispatchEvent(new CustomEvent('outclick'));
-		}
-	};
+  const handleKey = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      node.dispatchEvent(new CustomEvent('outclick'));
+    }
+  };
 
-	document.addEventListener('click', handleClick, true);
-	document.addEventListener('keydown', handleKey, true);
+  document.addEventListener('click', handleClick, true);
+  document.addEventListener('keydown', handleKey, true);
 
-	return {
-		destroy() {
-			document.removeEventListener('click', handleClick, true);
-			document.removeEventListener('keydown', handleKey, true);
-		}
-	};
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+      document.removeEventListener('keydown', handleKey, true);
+    },
+  };
 }
diff --git a/web/src/lib/utils/context.ts b/web/src/lib/utils/context.ts
index 05394097d..733b8e6eb 100644
--- a/web/src/lib/utils/context.ts
+++ b/web/src/lib/utils/context.ts
@@ -1,8 +1,8 @@
 import { getContext, setContext } from 'svelte';
 
 export function createContext<T>(key: string | symbol = Symbol()) {
-	return {
-		get: () => getContext<T>(key),
-		set: (context: T) => setContext<T>(key, context)
-	};
+  return {
+    get: () => getContext<T>(key),
+    set: (context: T) => setContext<T>(key, context),
+  };
 }
diff --git a/web/src/lib/utils/file-uploader.ts b/web/src/lib/utils/file-uploader.ts
index 908aec970..2e5a411a2 100644
--- a/web/src/lib/utils/file-uploader.ts
+++ b/web/src/lib/utils/file-uploader.ts
@@ -4,196 +4,193 @@ import type { AssetFileUploadResponseDto } from '@api';
 import axios from 'axios';
 import { combineLatestAll, filter, firstValueFrom, from, mergeMap, of } from 'rxjs';
 import type { UploadAsset } from '../models/upload-asset';
-import {
-	notificationController,
-	NotificationType
-} from './../components/shared-components/notification/notification';
+import { notificationController, NotificationType } from './../components/shared-components/notification/notification';
 
 export const openFileUploadDialog = async (
-	albumId: string | undefined = undefined,
-	sharedKey: string | undefined = undefined
+  albumId: string | undefined = undefined,
+  sharedKey: string | undefined = undefined,
 ) => {
-	return new Promise<(string | undefined)[]>((resolve, reject) => {
-		try {
-			const fileSelector = document.createElement('input');
+  return new Promise<(string | undefined)[]>((resolve, reject) => {
+    try {
+      const fileSelector = document.createElement('input');
 
-			fileSelector.type = 'file';
-			fileSelector.multiple = true;
+      fileSelector.type = 'file';
+      fileSelector.multiple = true;
 
-			// When adding a content type that is unsupported by browsers, make sure
-			// to also add it to getFileMimeType() otherwise the upload will fail.
-			fileSelector.accept = [
-				'image/*',
-				'video/*',
-				'.3fr',
-				'.3gp',
-				'.ari',
-				'.arw',
-				'.avif',
-				'.cap',
-				'.cin',
-				'.cr2',
-				'.cr3',
-				'.crw',
-				'.dcr',
-				'.dng',
-				'.erf',
-				'.fff',
-				'.heic',
-				'.heif',
-				'.iiq',
-				'.insp',
-				'.insv',
-				'.jxl',
-				'.k25',
-				'.kdc',
-				'.m2ts',
-				'.mov',
-				'.mrw',
-				'.mts',
-				'.nef',
-				'.orf',
-				'.ori',
-				'.pef',
-				'.raf',
-				'.raf',
-				'.raw',
-				'.rwl',
-				'.sr2',
-				'.srf',
-				'.srw',
-				'.x3f'
-			].join(',');
+      // When adding a content type that is unsupported by browsers, make sure
+      // to also add it to getFileMimeType() otherwise the upload will fail.
+      fileSelector.accept = [
+        'image/*',
+        'video/*',
+        '.3fr',
+        '.3gp',
+        '.ari',
+        '.arw',
+        '.avif',
+        '.cap',
+        '.cin',
+        '.cr2',
+        '.cr3',
+        '.crw',
+        '.dcr',
+        '.dng',
+        '.erf',
+        '.fff',
+        '.heic',
+        '.heif',
+        '.iiq',
+        '.insp',
+        '.insv',
+        '.jxl',
+        '.k25',
+        '.kdc',
+        '.m2ts',
+        '.mov',
+        '.mrw',
+        '.mts',
+        '.nef',
+        '.orf',
+        '.ori',
+        '.pef',
+        '.raf',
+        '.raf',
+        '.raw',
+        '.rwl',
+        '.sr2',
+        '.srf',
+        '.srw',
+        '.x3f',
+      ].join(',');
 
-			fileSelector.onchange = async (e: Event) => {
-				const target = e.target as HTMLInputElement;
-				if (!target.files) {
-					return;
-				}
-				const files = Array.from<File>(target.files);
+      fileSelector.onchange = async (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        if (!target.files) {
+          return;
+        }
+        const files = Array.from<File>(target.files);
 
-				resolve(await fileUploadHandler(files, albumId, sharedKey));
-			};
+        resolve(await fileUploadHandler(files, albumId, sharedKey));
+      };
 
-			fileSelector.click();
-		} catch (e) {
-			console.log('Error selecting file', e);
-			reject(e);
-		}
-	});
+      fileSelector.click();
+    } catch (e) {
+      console.log('Error selecting file', e);
+      reject(e);
+    }
+  });
 };
 
 export const fileUploadHandler = async (
-	files: File[],
-	albumId: string | undefined = undefined,
-	sharedKey: string | undefined = undefined
+  files: File[],
+  albumId: string | undefined = undefined,
+  sharedKey: string | undefined = undefined,
 ) => {
-	return firstValueFrom(
-		from(files).pipe(
-			filter((file) => {
-				const assetType = getFileMimeType(file).split('/')[0];
-				return assetType === 'video' || assetType === 'image';
-			}),
-			mergeMap(async (file) => of(await fileUploader(file, albumId, sharedKey)), 2),
-			combineLatestAll()
-		)
-	);
+  return firstValueFrom(
+    from(files).pipe(
+      filter((file) => {
+        const assetType = getFileMimeType(file).split('/')[0];
+        return assetType === 'video' || assetType === 'image';
+      }),
+      mergeMap(async (file) => of(await fileUploader(file, albumId, sharedKey)), 2),
+      combineLatestAll(),
+    ),
+  );
 };
 
 //TODO: should probably use the @api SDK
 async function fileUploader(
-	asset: File,
-	albumId: string | undefined = undefined,
-	sharedKey: string | undefined = undefined
+  asset: File,
+  albumId: string | undefined = undefined,
+  sharedKey: string | undefined = undefined,
 ): Promise<string | undefined> {
-	const mimeType = getFileMimeType(asset);
-	const assetType = mimeType.split('/')[0].toUpperCase();
-	const fileExtension = getFilenameExtension(asset.name);
-	const formData = new FormData();
-	const fileCreatedAt = new Date(asset.lastModified).toISOString();
-	const deviceAssetId = 'web' + '-' + asset.name + '-' + asset.lastModified;
+  const mimeType = getFileMimeType(asset);
+  const assetType = mimeType.split('/')[0].toUpperCase();
+  const fileExtension = getFilenameExtension(asset.name);
+  const formData = new FormData();
+  const fileCreatedAt = new Date(asset.lastModified).toISOString();
+  const deviceAssetId = 'web' + '-' + asset.name + '-' + asset.lastModified;
 
-	try {
-		// Create and add pseudo-unique ID of asset on the device
-		formData.append('deviceAssetId', deviceAssetId);
+  try {
+    // Create and add pseudo-unique ID of asset on the device
+    formData.append('deviceAssetId', deviceAssetId);
 
-		// Get device id - for web -> use WEB
-		formData.append('deviceId', 'WEB');
+    // Get device id - for web -> use WEB
+    formData.append('deviceId', 'WEB');
 
-		// Get asset type
-		formData.append('assetType', assetType);
+    // Get asset type
+    formData.append('assetType', assetType);
 
-		// Get Asset Created Date
-		formData.append('fileCreatedAt', fileCreatedAt);
+    // Get Asset Created Date
+    formData.append('fileCreatedAt', fileCreatedAt);
 
-		// Get Asset Modified At
-		formData.append('fileModifiedAt', new Date(asset.lastModified).toISOString());
+    // Get Asset Modified At
+    formData.append('fileModifiedAt', new Date(asset.lastModified).toISOString());
 
-		// Set Asset is Favorite to false
-		formData.append('isFavorite', 'false');
+    // Set Asset is Favorite to false
+    formData.append('isFavorite', 'false');
 
-		// Get asset duration
-		formData.append('duration', '0:00:00.000000');
+    // Get asset duration
+    formData.append('duration', '0:00:00.000000');
 
-		// Get asset file extension
-		formData.append('fileExtension', '.' + fileExtension);
+    // Get asset file extension
+    formData.append('fileExtension', '.' + fileExtension);
 
-		// Get asset binary data with a custom MIME type, because browsers will
-		// use application/octet-stream for unsupported MIME types, leading to
-		// failed uploads.
-		formData.append('assetData', new File([asset], asset.name, { type: mimeType }));
+    // Get asset binary data with a custom MIME type, because browsers will
+    // use application/octet-stream for unsupported MIME types, leading to
+    // failed uploads.
+    formData.append('assetData', new File([asset], asset.name, { type: mimeType }));
 
-		const newUploadAsset: UploadAsset = {
-			id: deviceAssetId,
-			file: asset,
-			progress: 0,
-			fileExtension: fileExtension
-		};
+    const newUploadAsset: UploadAsset = {
+      id: deviceAssetId,
+      file: asset,
+      progress: 0,
+      fileExtension: fileExtension,
+    };
 
-		uploadAssetsStore.addNewUploadAsset(newUploadAsset);
+    uploadAssetsStore.addNewUploadAsset(newUploadAsset);
 
-		const response = await axios.post(`/api/asset/upload`, formData, {
-			params: {
-				key: sharedKey
-			},
-			onUploadProgress: (event) => {
-				const percentComplete = Math.floor((event.loaded / event.total) * 100);
-				uploadAssetsStore.updateProgress(deviceAssetId, percentComplete);
-			}
-		});
+    const response = await axios.post(`/api/asset/upload`, formData, {
+      params: {
+        key: sharedKey,
+      },
+      onUploadProgress: (event) => {
+        const percentComplete = Math.floor((event.loaded / event.total) * 100);
+        uploadAssetsStore.updateProgress(deviceAssetId, percentComplete);
+      },
+    });
 
-		if (response.status == 200 || response.status == 201) {
-			const res: AssetFileUploadResponseDto = response.data;
+    if (response.status == 200 || response.status == 201) {
+      const res: AssetFileUploadResponseDto = response.data;
 
-			if (albumId && res.id) {
-				await addAssetsToAlbum(albumId, [res.id], sharedKey);
-			}
+      if (albumId && res.id) {
+        await addAssetsToAlbum(albumId, [res.id], sharedKey);
+      }
 
-			setTimeout(() => {
-				uploadAssetsStore.removeUploadAsset(deviceAssetId);
-			}, 1000);
+      setTimeout(() => {
+        uploadAssetsStore.removeUploadAsset(deviceAssetId);
+      }, 1000);
 
-			return res.id;
-		}
-	} catch (e) {
-		console.log('error uploading file ', e);
-		handleUploadError(asset, JSON.stringify(e));
-		uploadAssetsStore.removeUploadAsset(deviceAssetId);
-	}
+      return res.id;
+    }
+  } catch (e) {
+    console.log('error uploading file ', e);
+    handleUploadError(asset, JSON.stringify(e));
+    uploadAssetsStore.removeUploadAsset(deviceAssetId);
+  }
 }
 
 function handleUploadError(asset: File, respBody = '{}', extraMessage?: string) {
-	try {
-		const res = JSON.parse(respBody);
+  try {
+    const res = JSON.parse(respBody);
 
-		const extraMsg = res ? ' ' + res?.message : '';
+    const extraMsg = res ? ' ' + res?.message : '';
 
-		notificationController.show({
-			type: NotificationType.Error,
-			message: `Cannot upload file ${asset.name} ${extraMsg}${extraMessage}`,
-			timeout: 5000
-		});
-	} catch (e) {
-		console.error('ERROR parsing data JSON in handleUploadError');
-	}
+    notificationController.show({
+      type: NotificationType.Error,
+      message: `Cannot upload file ${asset.name} ${extraMsg}${extraMessage}`,
+      timeout: 5000,
+    });
+  } catch (e) {
+    console.error('ERROR parsing data JSON in handleUploadError');
+  }
 }
diff --git a/web/src/lib/utils/get-github-version.ts b/web/src/lib/utils/get-github-version.ts
index e3ae98190..574858505 100644
--- a/web/src/lib/utils/get-github-version.ts
+++ b/web/src/lib/utils/get-github-version.ts
@@ -1,18 +1,15 @@
 import axios from 'axios';
 
 type GithubRelease = {
-	tag_name: string;
+  tag_name: string;
 };
 
 export const getGithubVersion = async (): Promise<string> => {
-	const { data } = await axios.get<GithubRelease>(
-		'https://api.github.com/repos/immich-app/immich/releases/latest',
-		{
-			headers: {
-				Accept: 'application/vnd.github.v3+json'
-			}
-		}
-	);
+  const { data } = await axios.get<GithubRelease>('https://api.github.com/repos/immich-app/immich/releases/latest', {
+    headers: {
+      Accept: 'application/vnd.github.v3+json',
+    },
+  });
 
-	return data.tag_name;
+  return data.tag_name;
 };
diff --git a/web/src/lib/utils/handle-error.ts b/web/src/lib/utils/handle-error.ts
index bb3ad6930..3c9c0e1c9 100644
--- a/web/src/lib/utils/handle-error.ts
+++ b/web/src/lib/utils/handle-error.ts
@@ -1,29 +1,26 @@
 import type { ApiError } from '@api';
-import {
-	notificationController,
-	NotificationType
-} from '../components/shared-components/notification/notification';
+import { notificationController, NotificationType } from '../components/shared-components/notification/notification';
 
 export async function handleError(error: unknown, message: string) {
-	console.error(`[handleError]: ${message}`, error);
+  console.error(`[handleError]: ${message}`, error);
 
-	let data = (error as ApiError)?.response?.data;
-	if (data instanceof Blob) {
-		const response = await data.text();
-		try {
-			data = JSON.parse(response);
-		} catch {
-			data = { message: response };
-		}
-	}
+  let data = (error as ApiError)?.response?.data;
+  if (data instanceof Blob) {
+    const response = await data.text();
+    try {
+      data = JSON.parse(response);
+    } catch {
+      data = { message: response };
+    }
+  }
 
-	let serverMessage = data?.message;
-	if (serverMessage) {
-		serverMessage = `${String(serverMessage).slice(0, 75)}\n(Immich Server Error)`;
-	}
+  let serverMessage = data?.message;
+  if (serverMessage) {
+    serverMessage = `${String(serverMessage).slice(0, 75)}\n(Immich Server Error)`;
+  }
 
-	notificationController.show({
-		message: serverMessage || message,
-		type: NotificationType.Error
-	});
+  notificationController.show({
+    message: serverMessage || message,
+    type: NotificationType.Error,
+  });
 }
diff --git a/web/src/lib/utils/image-load.ts b/web/src/lib/utils/image-load.ts
index a3a785871..d8e35223b 100644
--- a/web/src/lib/utils/image-load.ts
+++ b/web/src/lib/utils/image-load.ts
@@ -2,37 +2,37 @@ import { tick } from 'svelte';
 import type { ActionReturn } from 'svelte/action';
 
 interface Attributes {
-	'on:image-error'?: (e: CustomEvent) => void;
-	'on:image-load'?: (e: CustomEvent) => void;
+  'on:image-error'?: (e: CustomEvent) => void;
+  'on:image-load'?: (e: CustomEvent) => void;
 }
 
 export function imageLoad(img: HTMLImageElement): ActionReturn<void, Attributes> {
-	const onImageError = () => img.dispatchEvent(new CustomEvent('image-error'));
-	const onImageLoaded = () => img.dispatchEvent(new CustomEvent('image-load'));
+  const onImageError = () => img.dispatchEvent(new CustomEvent('image-error'));
+  const onImageLoaded = () => img.dispatchEvent(new CustomEvent('image-load'));
 
-	if (img.complete) {
-		// Browser has fetched the image, naturalHeight is used to check
-		// if any loading errors have occurred.
-		const loadingError = img.naturalHeight === 0;
+  if (img.complete) {
+    // Browser has fetched the image, naturalHeight is used to check
+    // if any loading errors have occurred.
+    const loadingError = img.naturalHeight === 0;
 
-		// Report status after a tick, to make sure event listeners are registered.
-		if (loadingError) {
-			tick().then(onImageError);
-		} else {
-			tick().then(onImageLoaded);
-		}
+    // Report status after a tick, to make sure event listeners are registered.
+    if (loadingError) {
+      tick().then(onImageError);
+    } else {
+      tick().then(onImageLoaded);
+    }
 
-		return {};
-	}
+    return {};
+  }
 
-	// Image has not been loaded yet, report status with event listeners.
-	img.addEventListener('load', onImageLoaded, { once: true });
-	img.addEventListener('error', onImageError, { once: true });
+  // Image has not been loaded yet, report status with event listeners.
+  img.addEventListener('load', onImageLoaded, { once: true });
+  img.addEventListener('error', onImageError, { once: true });
 
-	return {
-		destroy() {
-			img.removeEventListener('load', onImageLoaded);
-			img.removeEventListener('error', onImageError);
-		}
-	};
+  return {
+    destroy() {
+      img.removeEventListener('load', onImageLoaded);
+      img.removeEventListener('error', onImageError);
+    },
+  };
 }
diff --git a/web/src/lib/utils/time-to-seconds.spec.ts b/web/src/lib/utils/time-to-seconds.spec.ts
index 5cc644417..0bb432857 100644
--- a/web/src/lib/utils/time-to-seconds.spec.ts
+++ b/web/src/lib/utils/time-to-seconds.spec.ts
@@ -1,24 +1,24 @@
-import { describe, it, expect } from '@jest/globals';
+import { describe, expect, it } from '@jest/globals';
 import { timeToSeconds } from './time-to-seconds';
 
 describe('converting time to seconds', () => {
-	it('parses hh:mm:ss correctly', () => {
-		expect(timeToSeconds('01:02:03')).toBeCloseTo(3723);
-	});
+  it('parses hh:mm:ss correctly', () => {
+    expect(timeToSeconds('01:02:03')).toBeCloseTo(3723);
+  });
 
-	it('parses hh:mm:ss.SSS correctly', () => {
-		expect(timeToSeconds('01:02:03.456')).toBeCloseTo(3723.456);
-	});
+  it('parses hh:mm:ss.SSS correctly', () => {
+    expect(timeToSeconds('01:02:03.456')).toBeCloseTo(3723.456);
+  });
 
-	it('parses h:m:s.S correctly', () => {
-		expect(timeToSeconds('1:2:3.4')).toBeCloseTo(3723.4);
-	});
+  it('parses h:m:s.S correctly', () => {
+    expect(timeToSeconds('1:2:3.4')).toBeCloseTo(3723.4);
+  });
 
-	it('parses hhh:mm:ss.SSS correctly', () => {
-		expect(timeToSeconds('100:02:03.456')).toBeCloseTo(360123.456);
-	});
+  it('parses hhh:mm:ss.SSS correctly', () => {
+    expect(timeToSeconds('100:02:03.456')).toBeCloseTo(360123.456);
+  });
 
-	it('ignores ignores double milliseconds hh:mm:ss.SSS.SSSSSS', () => {
-		expect(timeToSeconds('01:02:03.456.123456')).toBeCloseTo(3723.456);
-	});
+  it('ignores ignores double milliseconds hh:mm:ss.SSS.SSSSSS', () => {
+    expect(timeToSeconds('01:02:03.456.123456')).toBeCloseTo(3723.456);
+  });
 });
diff --git a/web/src/lib/utils/time-to-seconds.ts b/web/src/lib/utils/time-to-seconds.ts
index 4b710fd53..026615ea0 100644
--- a/web/src/lib/utils/time-to-seconds.ts
+++ b/web/src/lib/utils/time-to-seconds.ts
@@ -4,10 +4,10 @@ import { Duration } from 'luxon';
  * Convert time like `01:02:03.456` to seconds.
  */
 export function timeToSeconds(time: string) {
-	const parts = time.split(':');
-	parts[2] = parts[2].split('.').slice(0, 2).join('.');
+  const parts = time.split(':');
+  parts[2] = parts[2].split('.').slice(0, 2).join('.');
 
-	const [hours, minutes, seconds] = parts.map(Number);
+  const [hours, minutes, seconds] = parts.map(Number);
 
-	return Duration.fromObject({ hours, minutes, seconds }).as('seconds');
+  return Duration.fromObject({ hours, minutes, seconds }).as('seconds');
 }
diff --git a/web/src/routes/(user)/albums/+page.server.ts b/web/src/routes/(user)/albums/+page.server.ts
index d13840148..a9373d09c 100644
--- a/web/src/routes/(user)/albums/+page.server.ts
+++ b/web/src/routes/(user)/albums/+page.server.ts
@@ -3,21 +3,21 @@ import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { api, user } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	try {
-		const { data: albums } = await api.albumApi.getAllAlbums();
+  try {
+    const { data: albums } = await api.albumApi.getAllAlbums();
 
-		return {
-			user: user,
-			albums: albums,
-			meta: {
-				title: 'Albums'
-			}
-		};
-	} catch (e) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+    return {
+      user: user,
+      albums: albums,
+      meta: {
+        title: 'Albums',
+      },
+    };
+  } catch (e) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index 59f57f613..9624da0b2 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -1,171 +1,163 @@
 <script lang="ts">
-	import { albumViewSettings } from '$lib/stores/preferences.store';
-	import AlbumCard from '$lib/components/album-page/album-card.svelte';
-	import { goto } from '$app/navigation';
-	import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
-	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-	import type { PageData } from './$types';
-	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
-	import { useAlbums } from './albums.bloc';
-	import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-	import { onMount } from 'svelte';
-	import { flip } from 'svelte/animate';
-	import Dropdown from '$lib/components/elements/dropdown.svelte';
-	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import type { AlbumResponseDto } from '@api';
+  import { albumViewSettings } from '$lib/stores/preferences.store';
+  import AlbumCard from '$lib/components/album-page/album-card.svelte';
+  import { goto } from '$app/navigation';
+  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+  import type { PageData } from './$types';
+  import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
+  import { useAlbums } from './albums.bloc';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import { onMount } from 'svelte';
+  import { flip } from 'svelte/animate';
+  import Dropdown from '$lib/components/elements/dropdown.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import type { AlbumResponseDto } from '@api';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
+  const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
 
-	const {
-		albums: unsortedAlbums,
-		isShowContextMenu,
-		contextMenuPosition,
-		contextMenuTargetAlbum,
-		createAlbum,
-		deleteAlbum,
-		showAlbumContextMenu,
-		closeAlbumContextMenu
-	} = useAlbums({ albums: data.albums });
+  const {
+    albums: unsortedAlbums,
+    isShowContextMenu,
+    contextMenuPosition,
+    contextMenuTargetAlbum,
+    createAlbum,
+    deleteAlbum,
+    showAlbumContextMenu,
+    closeAlbumContextMenu,
+  } = useAlbums({ albums: data.albums });
 
-	let albums = unsortedAlbums;
-	let albumToDelete: AlbumResponseDto | null;
+  let albums = unsortedAlbums;
+  let albumToDelete: AlbumResponseDto | null;
 
-	const setAlbumToDelete = () => {
-		albumToDelete = $contextMenuTargetAlbum ?? null;
-		closeAlbumContextMenu();
-	};
+  const setAlbumToDelete = () => {
+    albumToDelete = $contextMenuTargetAlbum ?? null;
+    closeAlbumContextMenu();
+  };
 
-	const deleteSelectedAlbum = async () => {
-		if (!albumToDelete) {
-			return;
-		}
-		try {
-			await deleteAlbum(albumToDelete);
-		} catch {
-			notificationController.show({
-				message: 'Error deleting album',
-				type: NotificationType.Error
-			});
-		} finally {
-			albumToDelete = null;
-		}
-	};
+  const deleteSelectedAlbum = async () => {
+    if (!albumToDelete) {
+      return;
+    }
+    try {
+      await deleteAlbum(albumToDelete);
+    } catch {
+      notificationController.show({
+        message: 'Error deleting album',
+        type: NotificationType.Error,
+      });
+    } finally {
+      albumToDelete = null;
+    }
+  };
 
-	const sortByDate = (a: string, b: string) => {
-		const aDate = new Date(a);
-		const bDate = new Date(b);
-		return bDate.getTime() - aDate.getTime();
-	};
+  const sortByDate = (a: string, b: string) => {
+    const aDate = new Date(a);
+    const bDate = new Date(b);
+    return bDate.getTime() - aDate.getTime();
+  };
 
-	$: {
-		const { sortBy } = $albumViewSettings;
-		if (sortBy === 'Most recent photo') {
-			$albums = $unsortedAlbums.sort((a, b) =>
-				a.lastModifiedAssetTimestamp && b.lastModifiedAssetTimestamp
-					? sortByDate(a.lastModifiedAssetTimestamp, b.lastModifiedAssetTimestamp)
-					: sortByDate(a.updatedAt, b.updatedAt)
-			);
-		} else if (sortBy === 'Last modified') {
-			$albums = $unsortedAlbums.sort((a, b) => sortByDate(a.updatedAt, b.updatedAt));
-		} else if (sortBy === 'Album title') {
-			$albums = $unsortedAlbums.sort((a, b) => a.albumName.localeCompare(b.albumName));
-		}
-	}
+  $: {
+    const { sortBy } = $albumViewSettings;
+    if (sortBy === 'Most recent photo') {
+      $albums = $unsortedAlbums.sort((a, b) =>
+        a.lastModifiedAssetTimestamp && b.lastModifiedAssetTimestamp
+          ? sortByDate(a.lastModifiedAssetTimestamp, b.lastModifiedAssetTimestamp)
+          : sortByDate(a.updatedAt, b.updatedAt),
+      );
+    } else if (sortBy === 'Last modified') {
+      $albums = $unsortedAlbums.sort((a, b) => sortByDate(a.updatedAt, b.updatedAt));
+    } else if (sortBy === 'Album title') {
+      $albums = $unsortedAlbums.sort((a, b) => a.albumName.localeCompare(b.albumName));
+    }
+  }
 
-	const handleCreateAlbum = async () => {
-		const newAlbum = await createAlbum();
-		if (newAlbum) {
-			goto('/albums/' + newAlbum.id);
-		}
-	};
+  const handleCreateAlbum = async () => {
+    const newAlbum = await createAlbum();
+    if (newAlbum) {
+      goto('/albums/' + newAlbum.id);
+    }
+  };
 
-	onMount(() => {
-		removeAlbumsIfEmpty();
-	});
+  onMount(() => {
+    removeAlbumsIfEmpty();
+  });
 
-	const removeAlbumsIfEmpty = async () => {
-		try {
-			for (const album of $albums) {
-				if (album.assetCount == 0 && album.albumName == 'Untitled') {
-					await deleteAlbum(album);
-				}
-			}
-		} catch (error) {
-			console.log(error);
-		}
-	};
+  const removeAlbumsIfEmpty = async () => {
+    try {
+      for (const album of $albums) {
+        if (album.assetCount == 0 && album.albumName == 'Untitled') {
+          await deleteAlbum(album);
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
-	<div class="flex place-items-center gap-2" slot="buttons">
-		<LinkButton on:click={handleCreateAlbum}>
-			<div class="flex place-items-center gap-2 text-sm">
-				<PlusBoxOutline size="18" />
-				Create album
-			</div>
-		</LinkButton>
+  <div class="flex place-items-center gap-2" slot="buttons">
+    <LinkButton on:click={handleCreateAlbum}>
+      <div class="flex place-items-center gap-2 text-sm">
+        <PlusBoxOutline size="18" />
+        Create album
+      </div>
+    </LinkButton>
 
-		<Dropdown options={sortByOptions} bind:value={$albumViewSettings.sortBy} />
-	</div>
+    <Dropdown options={sortByOptions} bind:value={$albumViewSettings.sortBy} />
+  </div>
 
-	<!-- Album Card -->
-	<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
-		{#each $albums as album (album.id)}
-			<a
-				data-sveltekit-preload-data="hover"
-				href={`albums/${album.id}`}
-				animate:flip={{ duration: 200 }}
-			>
-				<AlbumCard
-					{album}
-					on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
-					user={data.user}
-				/>
-			</a>
-		{/each}
-	</div>
+  <!-- Album Card -->
+  <div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
+    {#each $albums as album (album.id)}
+      <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
+        <AlbumCard {album} on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)} user={data.user} />
+      </a>
+    {/each}
+  </div>
 
-	<!-- Empty Message -->
-	{#if $albums.length === 0}
-		<EmptyPlaceholder
-			text="Create an album to organize your photos and videos"
-			actionHandler={handleCreateAlbum}
-			alt="Empty albums"
-		/>
-	{/if}
+  <!-- Empty Message -->
+  {#if $albums.length === 0}
+    <EmptyPlaceholder
+      text="Create an album to organize your photos and videos"
+      actionHandler={handleCreateAlbum}
+      alt="Empty albums"
+    />
+  {/if}
 </UserPageLayout>
 
 <!-- Context Menu -->
 {#if $isShowContextMenu}
-	<ContextMenu {...$contextMenuPosition} on:outclick={closeAlbumContextMenu}>
-		<MenuOption on:click={() => setAlbumToDelete()}>
-			<span class="flex place-items-center place-content-center gap-2">
-				<DeleteOutline size="18" />
-				<p>Delete album</p>
-			</span>
-		</MenuOption>
-	</ContextMenu>
+  <ContextMenu {...$contextMenuPosition} on:outclick={closeAlbumContextMenu}>
+    <MenuOption on:click={() => setAlbumToDelete()}>
+      <span class="flex place-items-center place-content-center gap-2">
+        <DeleteOutline size="18" />
+        <p>Delete album</p>
+      </span>
+    </MenuOption>
+  </ContextMenu>
 {/if}
 
 {#if albumToDelete}
-	<ConfirmDialogue
-		title="Delete Album"
-		confirmText="Delete"
-		on:confirm={deleteSelectedAlbum}
-		on:cancel={() => (albumToDelete = null)}
-	>
-		<svelte:fragment slot="prompt">
-			<p>Are you sure you want to delete the album <b>{albumToDelete.albumName}</b>?</p>
-			<p>If this album is shared, other users will not be able to access it anymore.</p>
-		</svelte:fragment>
-	</ConfirmDialogue>
+  <ConfirmDialogue
+    title="Delete Album"
+    confirmText="Delete"
+    on:confirm={deleteSelectedAlbum}
+    on:cancel={() => (albumToDelete = null)}
+  >
+    <svelte:fragment slot="prompt">
+      <p>Are you sure you want to delete the album <b>{albumToDelete.albumName}</b>?</p>
+      <p>If this album is shared, other users will not be able to access it anymore.</p>
+    </svelte:fragment>
+  </ConfirmDialogue>
 {/if}
diff --git a/web/src/routes/(user)/albums/[albumId]/+page.server.ts b/web/src/routes/(user)/albums/[albumId]/+page.server.ts
index 75764423e..bb01e2928 100644
--- a/web/src/routes/(user)/albums/[albumId]/+page.server.ts
+++ b/web/src/routes/(user)/albums/[albumId]/+page.server.ts
@@ -3,21 +3,21 @@ import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ params, locals: { api, user } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	const albumId = params['albumId'];
+  const albumId = params['albumId'];
 
-	try {
-		const { data: album } = await api.albumApi.getAlbumInfo({ id: albumId });
-		return {
-			album,
-			meta: {
-				title: album.albumName
-			}
-		};
-	} catch (e) {
-		throw redirect(302, AppRoute.ALBUMS);
-	}
+  try {
+    const { data: album } = await api.albumApi.getAlbumInfo({ id: albumId });
+    return {
+      album,
+      meta: {
+        title: album.albumName,
+      },
+    };
+  } catch (e) {
+    throw redirect(302, AppRoute.ALBUMS);
+  }
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte
index 2b28a37e8..ecb749b4b 100644
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
-	import type { PageData } from './$types';
+  import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
+  export let data: PageData;
 </script>
 
 <div class="immich-scrollbar">
-	<AlbumViewer album={data.album} />
+  <AlbumViewer album={data.album} />
 </div>
diff --git a/web/src/routes/(user)/albums/[albumId]/photos/[assetId]/+page.ts b/web/src/routes/(user)/albums/[albumId]/photos/[assetId]/+page.ts
index 683d8492d..cb325776e 100644
--- a/web/src/routes/(user)/albums/[albumId]/photos/[assetId]/+page.ts
+++ b/web/src/routes/(user)/albums/[albumId]/photos/[assetId]/+page.ts
@@ -1,19 +1,19 @@
-import { redirect } from '@sveltejs/kit';
-export const prerender = false;
-import type { PageLoad } from './$types';
 import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+export const prerender = false;
 
 export const load: PageLoad = async ({ params, parent }) => {
-	const { user } = await parent();
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  const { user } = await parent();
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	const albumId = params['albumId'];
+  const albumId = params['albumId'];
 
-	if (albumId) {
-		throw redirect(302, `${AppRoute.ALBUMS}/${albumId}`);
-	} else {
-		throw redirect(302, AppRoute.PHOTOS);
-	}
+  if (albumId) {
+    throw redirect(302, `${AppRoute.ALBUMS}/${albumId}`);
+  } else {
+    throw redirect(302, AppRoute.PHOTOS);
+  }
 };
diff --git a/web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts b/web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts
index 0ae8afe5c..660c3f195 100644
--- a/web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts
+++ b/web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts
@@ -1,142 +1,137 @@
-import { jest, describe, it, expect, beforeEach, afterEach } from '@jest/globals';
-import { useAlbums } from '../albums.bloc';
+import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
 import { api, CreateAlbumDto } from '@api';
-import {
-	notificationController,
-	NotificationType
-} from '$lib/components/shared-components/notification/notification';
+import { afterEach, beforeEach, describe, expect, it, jest } from '@jest/globals';
 import { albumFactory } from '@test-data';
 import { get } from 'svelte/store';
+import { useAlbums } from '../albums.bloc';
 
 jest.mock('@api');
 
 const apiMock: jest.MockedObject<typeof api> = api as jest.MockedObject<typeof api>;
 
 describe('Albums BLoC', () => {
-	let sut: ReturnType<typeof useAlbums>;
-	const _albums = albumFactory.buildList(5);
+  let sut: ReturnType<typeof useAlbums>;
+  const _albums = albumFactory.buildList(5);
 
-	beforeEach(() => {
-		sut = useAlbums({ albums: [..._albums] });
-	});
+  beforeEach(() => {
+    sut = useAlbums({ albums: [..._albums] });
+  });
 
-	afterEach(() => {
-		const notifications = get(notificationController.notificationList);
+  afterEach(() => {
+    const notifications = get(notificationController.notificationList);
 
-		notifications.forEach((notification) =>
-			notificationController.removeNotificationById(notification.id)
-		);
-	});
+    notifications.forEach((notification) => notificationController.removeNotificationById(notification.id));
+  });
 
-	it('inits with provided albums', () => {
-		const albums = get(sut.albums);
-		expect(albums.length).toEqual(5);
-		expect(albums).toEqual(_albums);
-	});
+  it('inits with provided albums', () => {
+    const albums = get(sut.albums);
+    expect(albums.length).toEqual(5);
+    expect(albums).toEqual(_albums);
+  });
 
-	it('loads albums from the server', async () => {
-		// TODO: this method currently deletes albums with no assets and albumName === 'Untitled' which might not be the best approach
-		const loadedAlbums = [..._albums, albumFactory.build({ id: 'new_loaded_uuid' })];
+  it('loads albums from the server', async () => {
+    // TODO: this method currently deletes albums with no assets and albumName === 'Untitled' which might not be the best approach
+    const loadedAlbums = [..._albums, albumFactory.build({ id: 'new_loaded_uuid' })];
 
-		apiMock.albumApi.getAllAlbums.mockResolvedValueOnce({
-			data: loadedAlbums,
-			config: {},
-			headers: {},
-			status: 200,
-			statusText: ''
-		});
+    apiMock.albumApi.getAllAlbums.mockResolvedValueOnce({
+      data: loadedAlbums,
+      config: {},
+      headers: {},
+      status: 200,
+      statusText: '',
+    });
 
-		await sut.loadAlbums();
-		const albums = get(sut.albums);
+    await sut.loadAlbums();
+    const albums = get(sut.albums);
 
-		expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(1);
-		expect(albums).toEqual(loadedAlbums);
-	});
+    expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(1);
+    expect(albums).toEqual(loadedAlbums);
+  });
 
-	it('shows error message when it fails loading albums', async () => {
-		apiMock.albumApi.getAllAlbums.mockRejectedValueOnce({}); // TODO: implement APIProblem interface in the server
+  it('shows error message when it fails loading albums', async () => {
+    apiMock.albumApi.getAllAlbums.mockRejectedValueOnce({}); // TODO: implement APIProblem interface in the server
 
-		expect(get(notificationController.notificationList)).toHaveLength(0);
-		await sut.loadAlbums();
-		const albums = get(sut.albums);
-		const notifications = get(notificationController.notificationList);
+    expect(get(notificationController.notificationList)).toHaveLength(0);
+    await sut.loadAlbums();
+    const albums = get(sut.albums);
+    const notifications = get(notificationController.notificationList);
 
-		expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(1);
-		expect(albums).toEqual(_albums);
-		expect(notifications).toHaveLength(1);
-		expect(notifications[0].type).toEqual(NotificationType.Error);
-	});
+    expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(1);
+    expect(albums).toEqual(_albums);
+    expect(notifications).toHaveLength(1);
+    expect(notifications[0].type).toEqual(NotificationType.Error);
+  });
 
-	it('creates a new album', async () => {
-		// TODO: we probably shouldn't hardcode the album name "untitled" here and let the user input the album name before creating it
-		const payload: CreateAlbumDto = {
-			albumName: 'Untitled'
-		};
+  it('creates a new album', async () => {
+    // TODO: we probably shouldn't hardcode the album name "untitled" here and let the user input the album name before creating it
+    const payload: CreateAlbumDto = {
+      albumName: 'Untitled',
+    };
 
-		const returnedAlbum = albumFactory.build();
+    const returnedAlbum = albumFactory.build();
 
-		apiMock.albumApi.createAlbum.mockResolvedValueOnce({
-			data: returnedAlbum,
-			config: {},
-			headers: {},
-			status: 200,
-			statusText: ''
-		});
+    apiMock.albumApi.createAlbum.mockResolvedValueOnce({
+      data: returnedAlbum,
+      config: {},
+      headers: {},
+      status: 200,
+      statusText: '',
+    });
 
-		const newAlbum = await sut.createAlbum();
+    const newAlbum = await sut.createAlbum();
 
-		expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(1);
-		expect(apiMock.albumApi.createAlbum).toHaveBeenCalledWith({ createAlbumDto: payload });
-		expect(newAlbum).toEqual(returnedAlbum);
-	});
+    expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(1);
+    expect(apiMock.albumApi.createAlbum).toHaveBeenCalledWith({ createAlbumDto: payload });
+    expect(newAlbum).toEqual(returnedAlbum);
+  });
 
-	it('shows error message when it fails creating an album', async () => {
-		apiMock.albumApi.createAlbum.mockRejectedValueOnce({});
+  it('shows error message when it fails creating an album', async () => {
+    apiMock.albumApi.createAlbum.mockRejectedValueOnce({});
 
-		const newAlbum = await sut.createAlbum();
-		const notifications = get(notificationController.notificationList);
+    const newAlbum = await sut.createAlbum();
+    const notifications = get(notificationController.notificationList);
 
-		expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(1);
-		expect(newAlbum).not.toBeDefined();
-		expect(notifications).toHaveLength(1);
-		expect(notifications[0].type).toEqual(NotificationType.Error);
-	});
+    expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(1);
+    expect(newAlbum).not.toBeDefined();
+    expect(notifications).toHaveLength(1);
+    expect(notifications[0].type).toEqual(NotificationType.Error);
+  });
 
-	it('selects an album and deletes it', async () => {
-		apiMock.albumApi.deleteAlbum.mockResolvedValueOnce({
-			data: undefined,
-			config: {},
-			headers: {},
-			status: 200,
-			statusText: ''
-		});
+  it('selects an album and deletes it', async () => {
+    apiMock.albumApi.deleteAlbum.mockResolvedValueOnce({
+      data: undefined,
+      config: {},
+      headers: {},
+      status: 200,
+      statusText: '',
+    });
 
-		const albumToDelete = get(sut.albums)[2]; // delete third album
-		const albumToDeleteId = albumToDelete.id;
-		const contextMenuCoords = { x: 100, y: 150 };
+    const albumToDelete = get(sut.albums)[2]; // delete third album
+    const albumToDeleteId = albumToDelete.id;
+    const contextMenuCoords = { x: 100, y: 150 };
 
-		expect(get(sut.isShowContextMenu)).toBe(false);
-		sut.showAlbumContextMenu(contextMenuCoords, albumToDelete);
-		expect(get(sut.contextMenuPosition)).toEqual(contextMenuCoords);
-		expect(get(sut.isShowContextMenu)).toBe(true);
-		expect(get(sut.contextMenuTargetAlbum)).toEqual(albumToDelete);
+    expect(get(sut.isShowContextMenu)).toBe(false);
+    sut.showAlbumContextMenu(contextMenuCoords, albumToDelete);
+    expect(get(sut.contextMenuPosition)).toEqual(contextMenuCoords);
+    expect(get(sut.isShowContextMenu)).toBe(true);
+    expect(get(sut.contextMenuTargetAlbum)).toEqual(albumToDelete);
 
-		await sut.deleteAlbum(albumToDelete);
-		const updatedAlbums = get(sut.albums);
+    await sut.deleteAlbum(albumToDelete);
+    const updatedAlbums = get(sut.albums);
 
-		expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledTimes(1);
-		expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledWith({ id: albumToDeleteId });
-		expect(updatedAlbums).toHaveLength(4);
-		expect(updatedAlbums).not.toContain(albumToDelete);
-	});
+    expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledTimes(1);
+    expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledWith({ id: albumToDeleteId });
+    expect(updatedAlbums).toHaveLength(4);
+    expect(updatedAlbums).not.toContain(albumToDelete);
+  });
 
-	it('closes album context menu, deselecting album', () => {
-		const albumToDelete = get(sut.albums)[2]; // delete third album
-		sut.showAlbumContextMenu({ x: 100, y: 150 }, albumToDelete);
+  it('closes album context menu, deselecting album', () => {
+    const albumToDelete = get(sut.albums)[2]; // delete third album
+    sut.showAlbumContextMenu({ x: 100, y: 150 }, albumToDelete);
 
-		expect(get(sut.isShowContextMenu)).toBe(true);
+    expect(get(sut.isShowContextMenu)).toBe(true);
 
-		sut.closeAlbumContextMenu();
-		expect(get(sut.isShowContextMenu)).toBe(false);
-	});
+    sut.closeAlbumContextMenu();
+    expect(get(sut.isShowContextMenu)).toBe(false);
+  });
 });
diff --git a/web/src/routes/(user)/albums/albums.bloc.ts b/web/src/routes/(user)/albums/albums.bloc.ts
index 78cd907d5..6758be06b 100644
--- a/web/src/routes/(user)/albums/albums.bloc.ts
+++ b/web/src/routes/(user)/albums/albums.bloc.ts
@@ -1,91 +1,88 @@
 import type { OnShowContextMenuDetail } from '$lib/components/album-page/album-card';
-import {
-	notificationController,
-	NotificationType
-} from '$lib/components/shared-components/notification/notification';
+import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
 import { AlbumResponseDto, api } from '@api';
 import { derived, get, writable } from 'svelte/store';
 
 type AlbumsProps = { albums: AlbumResponseDto[] };
 
 export const useAlbums = (props: AlbumsProps) => {
-	const albums = writable([...props.albums]);
-	const contextMenuPosition = writable<OnShowContextMenuDetail>({ x: 0, y: 0 });
-	const contextMenuTargetAlbum = writable<AlbumResponseDto | undefined>();
-	const isShowContextMenu = derived(contextMenuTargetAlbum, ($selectedAlbum) => !!$selectedAlbum);
+  const albums = writable([...props.albums]);
+  const contextMenuPosition = writable<OnShowContextMenuDetail>({ x: 0, y: 0 });
+  const contextMenuTargetAlbum = writable<AlbumResponseDto | undefined>();
+  const isShowContextMenu = derived(contextMenuTargetAlbum, ($selectedAlbum) => !!$selectedAlbum);
 
-	async function loadAlbums(): Promise<void> {
-		try {
-			const { data } = await api.albumApi.getAllAlbums();
-			albums.set(data);
+  async function loadAlbums(): Promise<void> {
+    try {
+      const { data } = await api.albumApi.getAllAlbums();
+      albums.set(data);
 
-			// Delete album that has no photos and is named 'Untitled'
-			for (const album of data) {
-				if (album.albumName === 'Untitled' && album.assetCount === 0) {
-					setTimeout(async () => {
-						await deleteAlbum(album);
-					}, 500);
-				}
-			}
-		} catch {
-			notificationController.show({
-				message: 'Error loading albums',
-				type: NotificationType.Error
-			});
-		}
-	}
+      // Delete album that has no photos and is named 'Untitled'
+      for (const album of data) {
+        if (album.albumName === 'Untitled' && album.assetCount === 0) {
+          setTimeout(async () => {
+            await deleteAlbum(album);
+          }, 500);
+        }
+      }
+    } catch {
+      notificationController.show({
+        message: 'Error loading albums',
+        type: NotificationType.Error,
+      });
+    }
+  }
 
-	async function createAlbum(): Promise<AlbumResponseDto | undefined> {
-		try {
-			const { data: newAlbum } = await api.albumApi.createAlbum({
-				createAlbumDto: {
-					albumName: 'Untitled'
-				}
-			});
+  async function createAlbum(): Promise<AlbumResponseDto | undefined> {
+    try {
+      const { data: newAlbum } = await api.albumApi.createAlbum({
+        createAlbumDto: {
+          albumName: 'Untitled',
+        },
+      });
 
-			return newAlbum;
-		} catch {
-			notificationController.show({
-				message: 'Error creating album',
-				type: NotificationType.Error
-			});
-		}
-	}
+      return newAlbum;
+    } catch {
+      notificationController.show({
+        message: 'Error creating album',
+        type: NotificationType.Error,
+      });
+    }
+  }
 
-	async function deleteAlbum(albumToDelete: AlbumResponseDto): Promise<void> {
-		await api.albumApi.deleteAlbum({ id: albumToDelete.id });
-		albums.set(
-			get(albums).filter(({ id }) => {
-				return id !== albumToDelete.id;
-			})
-		);
-	}
+  async function deleteAlbum(albumToDelete: AlbumResponseDto): Promise<void> {
+    await api.albumApi.deleteAlbum({ id: albumToDelete.id });
+    albums.set(
+      get(albums).filter(({ id }) => {
+        return id !== albumToDelete.id;
+      }),
+    );
+  }
 
-	async function showAlbumContextMenu(
-		contextMenuDetail: OnShowContextMenuDetail,
-		album: AlbumResponseDto
-	): Promise<void> {
-		contextMenuTargetAlbum.set(album);
+  async function showAlbumContextMenu(
+    contextMenuDetail: OnShowContextMenuDetail,
+    album: AlbumResponseDto,
+  ): Promise<void> {
+    contextMenuTargetAlbum.set(album);
 
-		contextMenuPosition.set({
-			x: contextMenuDetail.x,
-			y: contextMenuDetail.y
-		});
-	}
+    contextMenuPosition.set({
+      x: contextMenuDetail.x,
+      y: contextMenuDetail.y,
+    });
+  }
 
-	function closeAlbumContextMenu() {
-		contextMenuTargetAlbum.set(undefined);
-	}
+  function closeAlbumContextMenu() {
+    contextMenuTargetAlbum.set(undefined);
+  }
 
-	return {
-		albums,
-		isShowContextMenu,
-		contextMenuPosition,
-		contextMenuTargetAlbum,
-		loadAlbums,
-		createAlbum,
-		deleteAlbum,
-		showAlbumContextMenu,
-		closeAlbumContextMenu
-	};
+  return {
+    albums,
+    isShowContextMenu,
+    contextMenuPosition,
+    contextMenuTargetAlbum,
+    loadAlbums,
+    createAlbum,
+    deleteAlbum,
+    showAlbumContextMenu,
+    closeAlbumContextMenu,
+  };
 };
diff --git a/web/src/routes/(user)/archive/+page.server.ts b/web/src/routes/(user)/archive/+page.server.ts
index 3ba49ba37..43e7c8652 100644
--- a/web/src/routes/(user)/archive/+page.server.ts
+++ b/web/src/routes/(user)/archive/+page.server.ts
@@ -1,16 +1,16 @@
-import type { PageServerLoad } from './$types';
-import { redirect } from '@sveltejs/kit';
 import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { user } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	return {
-		user,
-		meta: {
-			title: 'Archive'
-		}
-	};
+  return {
+    user,
+    meta: {
+      title: 'Archive',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/archive/+page.svelte b/web/src/routes/(user)/archive/+page.svelte
index c58249355..25bc1f2ff 100644
--- a/web/src/routes/(user)/archive/+page.svelte
+++ b/web/src/routes/(user)/archive/+page.svelte
@@ -1,81 +1,75 @@
 <script lang="ts">
-	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-	import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-	import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
-	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-	import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
-	import { archivedAsset } from '$lib/stores/archived-asset.store';
-	import { handleError } from '$lib/utils/handle-error';
-	import { api, AssetResponseDto } from '@api';
-	import { onMount } from 'svelte';
-	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-	import Plus from 'svelte-material-icons/Plus.svelte';
-	import type { PageData } from './$types';
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+  import { archivedAsset } from '$lib/stores/archived-asset.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api, AssetResponseDto } from '@api';
+  import { onMount } from 'svelte';
+  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+  import Plus from 'svelte-material-icons/Plus.svelte';
+  import type { PageData } from './$types';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	let selectedAssets: Set<AssetResponseDto> = new Set();
-	$: isMultiSelectionMode = selectedAssets.size > 0;
-	$: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
+  let selectedAssets: Set<AssetResponseDto> = new Set();
+  $: isMultiSelectionMode = selectedAssets.size > 0;
+  $: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
 
-	onMount(async () => {
-		try {
-			const { data: assets } = await api.assetApi.getAllAssets({
-				isArchived: true,
-				withoutThumbs: true
-			});
-			$archivedAsset = assets;
-		} catch {
-			handleError(Error, 'Unable to load archived assets');
-		}
-	});
+  onMount(async () => {
+    try {
+      const { data: assets } = await api.assetApi.getAllAssets({
+        isArchived: true,
+        withoutThumbs: true,
+      });
+      $archivedAsset = assets;
+    } catch {
+      handleError(Error, 'Unable to load archived assets');
+    }
+  });
 
-	const onAssetDelete = (assetId: string) => {
-		$archivedAsset = $archivedAsset.filter((a) => a.id !== assetId);
-	};
-	const handleSelectAll = () => {
-		selectedAssets = new Set($archivedAsset);
-	};
+  const onAssetDelete = (assetId: string) => {
+    $archivedAsset = $archivedAsset.filter((a) => a.id !== assetId);
+  };
+  const handleSelectAll = () => {
+    selectedAssets = new Set($archivedAsset);
+  };
 </script>
 
 <UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode} title={data.meta.title}>
-	<!-- Empty Message -->
-	{#if $archivedAsset.length === 0}
-		<EmptyPlaceholder
-			text="Archive photos and videos to hide them from your Photos view"
-			alt="Empty archive"
-		/>
-	{/if}
+  <!-- Empty Message -->
+  {#if $archivedAsset.length === 0}
+    <EmptyPlaceholder text="Archive photos and videos to hide them from your Photos view" alt="Empty archive" />
+  {/if}
 
-	<svelte:fragment slot="header">
-		{#if isMultiSelectionMode}
-			<AssetSelectControlBar
-				assets={selectedAssets}
-				clearSelect={() => (selectedAssets = new Set())}
-			>
-				<ArchiveAction unarchive onAssetArchive={(asset) => onAssetDelete(asset.id)} />
-				<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
-				<CreateSharedLink />
-				<AssetSelectContextMenu icon={Plus} title="Add">
-					<AddToAlbum />
-					<AddToAlbum shared />
-				</AssetSelectContextMenu>
-				<DeleteAssets {onAssetDelete} />
-				<AssetSelectContextMenu icon={DotsVertical} title="Add">
-					<DownloadAction menuItem />
-					<FavoriteAction menuItem removeFavorite={isAllFavorite} />
-				</AssetSelectContextMenu>
-			</AssetSelectControlBar>
-		{/if}
-	</svelte:fragment>
+  <svelte:fragment slot="header">
+    {#if isMultiSelectionMode}
+      <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
+        <ArchiveAction unarchive onAssetArchive={(asset) => onAssetDelete(asset.id)} />
+        <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
+        <CreateSharedLink />
+        <AssetSelectContextMenu icon={Plus} title="Add">
+          <AddToAlbum />
+          <AddToAlbum shared />
+        </AssetSelectContextMenu>
+        <DeleteAssets {onAssetDelete} />
+        <AssetSelectContextMenu icon={DotsVertical} title="Add">
+          <DownloadAction menuItem />
+          <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+        </AssetSelectContextMenu>
+      </AssetSelectControlBar>
+    {/if}
+  </svelte:fragment>
 
-	<GalleryViewer assets={$archivedAsset} bind:selectedAssets viewFrom="archive-page" />
+  <GalleryViewer assets={$archivedAsset} bind:selectedAssets viewFrom="archive-page" />
 </UserPageLayout>
diff --git a/web/src/routes/(user)/archive/photos/[assetId]/+page.ts b/web/src/routes/(user)/archive/photos/[assetId]/+page.ts
index 80c499ee8..88923a1af 100644
--- a/web/src/routes/(user)/archive/photos/[assetId]/+page.ts
+++ b/web/src/routes/(user)/archive/photos/[assetId]/+page.ts
@@ -1,13 +1,13 @@
-import { redirect } from '@sveltejs/kit';
-export const prerender = false;
-import type { PageLoad } from './$types';
 import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+export const prerender = false;
 
 export const load: PageLoad = async ({ parent }) => {
-	const { user } = await parent();
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  const { user } = await parent();
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	throw redirect(302, AppRoute.ARCHIVE);
+  throw redirect(302, AppRoute.ARCHIVE);
 };
diff --git a/web/src/routes/(user)/explore/+page.server.ts b/web/src/routes/(user)/explore/+page.server.ts
index 44473aa3a..97b674cb3 100644
--- a/web/src/routes/(user)/explore/+page.server.ts
+++ b/web/src/routes/(user)/explore/+page.server.ts
@@ -1,21 +1,21 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { AppRoute } from '$lib/constants';
 
 export const load = (async ({ locals, parent }) => {
-	const { user } = await parent();
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  const { user } = await parent();
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	const { data: items } = await locals.api.searchApi.getExploreData();
-	const { data: people } = await locals.api.personApi.getAllPeople();
-	return {
-		user,
-		items,
-		people,
-		meta: {
-			title: 'Explore'
-		}
-	};
+  const { data: items } = await locals.api.searchApi.getExploreData();
+  const { data: people } = await locals.api.personApi.getAllPeople();
+  return {
+    user,
+    items,
+    people,
+    meta: {
+      title: 'Explore',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index 4405a55db..68f59d887 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -1,157 +1,157 @@
 <script lang="ts">
-	import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-	import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
-	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	import { AppRoute } from '$lib/constants';
-	import { AssetTypeEnum, SearchExploreResponseDto, api } from '@api';
-	import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
-	import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
-	import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
-	import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
-	import type { PageData } from './$types';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { AssetTypeEnum, SearchExploreResponseDto, api } from '@api';
+  import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
+  import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
+  import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
+  import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	enum Field {
-		CITY = 'exifInfo.city',
-		TAGS = 'smartInfo.tags',
-		OBJECTS = 'smartInfo.objects'
-	}
+  enum Field {
+    CITY = 'exifInfo.city',
+    TAGS = 'smartInfo.tags',
+    OBJECTS = 'smartInfo.objects',
+  }
 
-	const MAX_ITEMS = 12;
+  const MAX_ITEMS = 12;
 
-	const getFieldItems = (items: SearchExploreResponseDto[], field: Field) => {
-		const targetField = items.find((item) => item.fieldName === field);
-		return targetField?.items || [];
-	};
+  const getFieldItems = (items: SearchExploreResponseDto[], field: Field) => {
+    const targetField = items.find((item) => item.fieldName === field);
+    return targetField?.items || [];
+  };
 
-	$: things = getFieldItems(data.items, Field.OBJECTS);
-	$: places = getFieldItems(data.items, Field.CITY);
-	$: people = data.people.slice(0, MAX_ITEMS);
+  $: things = getFieldItems(data.items, Field.OBJECTS);
+  $: places = getFieldItems(data.items, Field.CITY);
+  $: people = data.people.slice(0, MAX_ITEMS);
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
-	{#if people.length > 0}
-		<div class="mb-6 mt-2">
-			<div class="flex justify-between">
-				<p class="mb-4 dark:text-immich-dark-fg font-medium">People</p>
-				{#if data.people.length > MAX_ITEMS}
-					<a
-						href={AppRoute.PEOPLE}
-						class="font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary dark:text-immich-dark-fg"
-						draggable="false">View All</a
-					>
-				{/if}
-			</div>
-			<div class="flex flex-row flex-wrap gap-4">
-				{#each people as person (person.id)}
-					<a href="/people/{person.id}" class="w-24 text-center">
-						<ImageThumbnail
-							circle
-							shadow
-							url={api.getPeopleThumbnailUrl(person.id)}
-							altText={person.name}
-							widthStyle="100%"
-						/>
-						<p class="font-medium mt-2 text-ellipsis text-sm dark:text-white">{person.name}</p>
-					</a>
-				{/each}
-			</div>
-		</div>
-	{/if}
+  {#if people.length > 0}
+    <div class="mb-6 mt-2">
+      <div class="flex justify-between">
+        <p class="mb-4 dark:text-immich-dark-fg font-medium">People</p>
+        {#if data.people.length > MAX_ITEMS}
+          <a
+            href={AppRoute.PEOPLE}
+            class="font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary dark:text-immich-dark-fg"
+            draggable="false">View All</a
+          >
+        {/if}
+      </div>
+      <div class="flex flex-row flex-wrap gap-4">
+        {#each people as person (person.id)}
+          <a href="/people/{person.id}" class="w-24 text-center">
+            <ImageThumbnail
+              circle
+              shadow
+              url={api.getPeopleThumbnailUrl(person.id)}
+              altText={person.name}
+              widthStyle="100%"
+            />
+            <p class="font-medium mt-2 text-ellipsis text-sm dark:text-white">{person.name}</p>
+          </a>
+        {/each}
+      </div>
+    </div>
+  {/if}
 
-	{#if places.length > 0}
-		<div class="mb-6 mt-2">
-			<div>
-				<p class="mb-4 dark:text-immich-dark-fg font-medium">Places</p>
-			</div>
-			<div class="flex flex-row flex-wrap gap-4">
-				{#each places as item}
-					<a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
-						<div
-							class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] flex justify-center"
-						>
-							<Thumbnail thumbnailSize={156} asset={item.data} readonly />
-						</div>
-						<span
-							class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
-						>
-							{item.value}
-						</span>
-					</a>
-				{/each}
-			</div>
-		</div>
-	{/if}
+  {#if places.length > 0}
+    <div class="mb-6 mt-2">
+      <div>
+        <p class="mb-4 dark:text-immich-dark-fg font-medium">Places</p>
+      </div>
+      <div class="flex flex-row flex-wrap gap-4">
+        {#each places as item}
+          <a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
+            <div
+              class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] flex justify-center"
+            >
+              <Thumbnail thumbnailSize={156} asset={item.data} readonly />
+            </div>
+            <span
+              class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
+            >
+              {item.value}
+            </span>
+          </a>
+        {/each}
+      </div>
+    </div>
+  {/if}
 
-	{#if things.length > 0}
-		<div class="mb-6 mt-2">
-			<div>
-				<p class="mb-4 dark:text-immich-dark-fg font-medium">Things</p>
-			</div>
-			<div class="flex flex-row flex-wrap gap-4">
-				{#each things as item}
-					<a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
-						<div
-							class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center flex"
-						>
-							<Thumbnail thumbnailSize={156} asset={item.data} readonly />
-						</div>
-						<span
-							class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
-						>
-							{item.value}
-						</span>
-					</a>
-				{/each}
-			</div>
-		</div>
-	{/if}
+  {#if things.length > 0}
+    <div class="mb-6 mt-2">
+      <div>
+        <p class="mb-4 dark:text-immich-dark-fg font-medium">Things</p>
+      </div>
+      <div class="flex flex-row flex-wrap gap-4">
+        {#each things as item}
+          <a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
+            <div
+              class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center flex"
+            >
+              <Thumbnail thumbnailSize={156} asset={item.data} readonly />
+            </div>
+            <span
+              class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
+            >
+              {item.value}
+            </span>
+          </a>
+        {/each}
+      </div>
+    </div>
+  {/if}
 
-	<hr class="dark:border-immich-dark-gray mb-4" />
+  <hr class="dark:border-immich-dark-gray mb-4" />
 
-	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
-		<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
-			<p class="text-sm">YOUR ACTIVITY</p>
-			<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
-				<a
-					href={AppRoute.FAVORITES}
-					class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
-					draggable="false"
-				>
-					<HeartMultipleOutline size={24} />
-					<span>Favorites</span>
-				</a>
-				<a
-					href="/search?recent=true"
-					class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
-					draggable="false"
-				>
-					<ClockOutline size={24} />
-					<span>Recently added</span>
-				</a>
-			</div>
-		</div>
-		<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
-			<p class="text-sm">CATEGORIES</p>
-			<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
-				<a
-					href="/search?type={AssetTypeEnum.Video}"
-					class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
-				>
-					<PlayCircleOutline size={24} />
-					<span>Videos</span>
-				</a>
-				<div>
-					<a
-						href="/search?motion=true"
-						class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
-					>
-						<MotionPlayOutline size={24} />
-						<span>Motion photos</span>
-					</a>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
+    <div class="flex flex-col gap-6 dark:text-immich-dark-fg">
+      <p class="text-sm">YOUR ACTIVITY</p>
+      <div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
+        <a
+          href={AppRoute.FAVORITES}
+          class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
+          draggable="false"
+        >
+          <HeartMultipleOutline size={24} />
+          <span>Favorites</span>
+        </a>
+        <a
+          href="/search?recent=true"
+          class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
+          draggable="false"
+        >
+          <ClockOutline size={24} />
+          <span>Recently added</span>
+        </a>
+      </div>
+    </div>
+    <div class="flex flex-col gap-6 dark:text-immich-dark-fg">
+      <p class="text-sm">CATEGORIES</p>
+      <div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
+        <a
+          href="/search?type={AssetTypeEnum.Video}"
+          class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
+        >
+          <PlayCircleOutline size={24} />
+          <span>Videos</span>
+        </a>
+        <div>
+          <a
+            href="/search?motion=true"
+            class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
+          >
+            <MotionPlayOutline size={24} />
+            <span>Motion photos</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/favorites/+page.server.ts b/web/src/routes/(user)/favorites/+page.server.ts
index 5ac8e2712..d65255b45 100644
--- a/web/src/routes/(user)/favorites/+page.server.ts
+++ b/web/src/routes/(user)/favorites/+page.server.ts
@@ -1,16 +1,16 @@
-import type { PageServerLoad } from './$types';
-import { redirect } from '@sveltejs/kit';
 import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { user } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	return {
-		user,
-		meta: {
-			title: 'Favorites'
-		}
-	};
+  return {
+    user,
+    meta: {
+      title: 'Favorites',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/favorites/+page.svelte b/web/src/routes/(user)/favorites/+page.svelte
index 56149c779..3a397ceb6 100644
--- a/web/src/routes/(user)/favorites/+page.svelte
+++ b/web/src/routes/(user)/favorites/+page.svelte
@@ -1,82 +1,79 @@
 <script lang="ts">
-	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-	import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-	import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
-	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-	import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-	import { handleError } from '$lib/utils/handle-error';
-	import { api, AssetResponseDto } from '@api';
-	import { onMount } from 'svelte';
-	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-	import Plus from 'svelte-material-icons/Plus.svelte';
-	import Error from '../../+error.svelte';
-	import type { PageData } from './$types';
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api, AssetResponseDto } from '@api';
+  import { onMount } from 'svelte';
+  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+  import Plus from 'svelte-material-icons/Plus.svelte';
+  import Error from '../../+error.svelte';
+  import type { PageData } from './$types';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
 
-	let favorites: AssetResponseDto[] = [];
-	let selectedAssets: Set<AssetResponseDto> = new Set();
+  let favorites: AssetResponseDto[] = [];
+  let selectedAssets: Set<AssetResponseDto> = new Set();
 
-	export let data: PageData;
+  export let data: PageData;
 
-	$: isMultiSelectionMode = selectedAssets.size > 0;
-	$: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
+  $: isMultiSelectionMode = selectedAssets.size > 0;
+  $: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
 
-	onMount(async () => {
-		try {
-			const { data: assets } = await api.assetApi.getAllAssets({
-				isFavorite: true,
-				withoutThumbs: true
-			});
-			favorites = assets;
-		} catch {
-			handleError(Error, 'Unable to load favorites');
-		}
-	});
+  onMount(async () => {
+    try {
+      const { data: assets } = await api.assetApi.getAllAssets({
+        isFavorite: true,
+        withoutThumbs: true,
+      });
+      favorites = assets;
+    } catch {
+      handleError(Error, 'Unable to load favorites');
+    }
+  });
 
-	const handleSelectAll = () => {
-		selectedAssets = new Set(favorites);
-	};
+  const handleSelectAll = () => {
+    selectedAssets = new Set(favorites);
+  };
 
-	const onAssetDelete = (assetId: string) => {
-		favorites = favorites.filter((a) => a.id !== assetId);
-	};
+  const onAssetDelete = (assetId: string) => {
+    favorites = favorites.filter((a) => a.id !== assetId);
+  };
 </script>
 
 <!-- Multiselection mode app bar -->
 {#if isMultiSelectionMode}
-	<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
-		<FavoriteAction removeFavorite onAssetFavorite={(asset) => onAssetDelete(asset.id)} />
-		<CreateSharedLink />
-		<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
-		<AssetSelectContextMenu icon={Plus} title="Add">
-			<AddToAlbum />
-			<AddToAlbum shared />
-		</AssetSelectContextMenu>
-		<DeleteAssets {onAssetDelete} />
-		<AssetSelectContextMenu icon={DotsVertical} title="Menu">
-			<DownloadAction menuItem />
-			<ArchiveAction menuItem unarchive={isAllArchive} />
-		</AssetSelectContextMenu>
-	</AssetSelectControlBar>
+  <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
+    <FavoriteAction removeFavorite onAssetFavorite={(asset) => onAssetDelete(asset.id)} />
+    <CreateSharedLink />
+    <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
+    <AssetSelectContextMenu icon={Plus} title="Add">
+      <AddToAlbum />
+      <AddToAlbum shared />
+    </AssetSelectContextMenu>
+    <DeleteAssets {onAssetDelete} />
+    <AssetSelectContextMenu icon={DotsVertical} title="Menu">
+      <DownloadAction menuItem />
+      <ArchiveAction menuItem unarchive={isAllArchive} />
+    </AssetSelectContextMenu>
+  </AssetSelectControlBar>
 {/if}
 
 <UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode} title={data.meta.title}>
-	<section>
-		<!-- Empty Message -->
-		{#if favorites.length === 0}
-			<EmptyPlaceholder
-				text="Add favorites to quickly find your best pictures and videos"
-				alt="Empty favorites"
-			/>
-		{/if}
+  <section>
+    <!-- Empty Message -->
+    {#if favorites.length === 0}
+      <EmptyPlaceholder text="Add favorites to quickly find your best pictures and videos" alt="Empty favorites" />
+    {/if}
 
-		<GalleryViewer assets={favorites} bind:selectedAssets viewFrom="favorites-page" />
-	</section>
+    <GalleryViewer assets={favorites} bind:selectedAssets viewFrom="favorites-page" />
+  </section>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/favorites/[assetId]/+page.server.ts b/web/src/routes/(user)/favorites/[assetId]/+page.server.ts
index 4a553a192..fd6aa42d4 100644
--- a/web/src/routes/(user)/favorites/[assetId]/+page.server.ts
+++ b/web/src/routes/(user)/favorites/[assetId]/+page.server.ts
@@ -1,15 +1,15 @@
 import { redirect } from '@sveltejs/kit';
 export const prerender = false;
 
-import type { PageServerLoad } from './$types';
 import { AppRoute } from '$lib/constants';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ parent }) => {
-	const { user } = await parent();
+  const { user } = await parent();
 
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	} else {
-		throw redirect(302, AppRoute.FAVORITES);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  } else {
+    throw redirect(302, AppRoute.FAVORITES);
+  }
 };
diff --git a/web/src/routes/(user)/map/+page.server.ts b/web/src/routes/(user)/map/+page.server.ts
index 6bcb95791..50f450fa6 100644
--- a/web/src/routes/(user)/map/+page.server.ts
+++ b/web/src/routes/(user)/map/+page.server.ts
@@ -3,14 +3,14 @@ import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { user } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	return {
-		user,
-		meta: {
-			title: 'Map'
-		}
-	};
+  return {
+    user,
+    meta: {
+      title: 'Map',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/map/+page.svelte b/web/src/routes/(user)/map/+page.svelte
index cdf1fec3e..b4301ba78 100644
--- a/web/src/routes/(user)/map/+page.svelte
+++ b/web/src/routes/(user)/map/+page.svelte
@@ -1,176 +1,172 @@
 <script lang="ts">
-	import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
-	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	import MapSettingsModal from '$lib/components/map-page/map-settings-modal.svelte';
-	import Portal from '$lib/components/shared-components/portal/portal.svelte';
-	import {
-		assetInteractionStore,
-		isViewingAssetStoreState,
-		viewingAssetStoreState
-	} from '$lib/stores/asset-interaction.store';
-	import { mapSettings } from '$lib/stores/preferences.store';
-	import { MapMarkerResponseDto, api } from '@api';
-	import { isEqual, omit } from 'lodash-es';
-	import { onDestroy, onMount } from 'svelte';
-	import Cog from 'svelte-material-icons/Cog.svelte';
-	import type { PageData } from './$types';
-	import { DateTime, Duration } from 'luxon';
+  import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import MapSettingsModal from '$lib/components/map-page/map-settings-modal.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import {
+    assetInteractionStore,
+    isViewingAssetStoreState,
+    viewingAssetStoreState,
+  } from '$lib/stores/asset-interaction.store';
+  import { mapSettings } from '$lib/stores/preferences.store';
+  import { MapMarkerResponseDto, api } from '@api';
+  import { isEqual, omit } from 'lodash-es';
+  import { onDestroy, onMount } from 'svelte';
+  import Cog from 'svelte-material-icons/Cog.svelte';
+  import type { PageData } from './$types';
+  import { DateTime, Duration } from 'luxon';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	let leaflet: typeof import('$lib/components/shared-components/leaflet');
-	let mapMarkers: MapMarkerResponseDto[] = [];
-	let abortController: AbortController;
-	let viewingAssets: string[] = [];
-	let viewingAssetCursor = 0;
-	let showSettingsModal = false;
+  let leaflet: typeof import('$lib/components/shared-components/leaflet');
+  let mapMarkers: MapMarkerResponseDto[] = [];
+  let abortController: AbortController;
+  let viewingAssets: string[] = [];
+  let viewingAssetCursor = 0;
+  let showSettingsModal = false;
 
-	onMount(() => {
-		loadMapMarkers().then((data) => (mapMarkers = data));
-		import('$lib/components/shared-components/leaflet').then((data) => (leaflet = data));
-	});
+  onMount(() => {
+    loadMapMarkers().then((data) => (mapMarkers = data));
+    import('$lib/components/shared-components/leaflet').then((data) => (leaflet = data));
+  });
 
-	onDestroy(() => {
-		if (abortController) {
-			abortController.abort();
-		}
-		assetInteractionStore.clearMultiselect();
-		assetInteractionStore.setIsViewingAsset(false);
-	});
+  onDestroy(() => {
+    if (abortController) {
+      abortController.abort();
+    }
+    assetInteractionStore.clearMultiselect();
+    assetInteractionStore.setIsViewingAsset(false);
+  });
 
-	async function loadMapMarkers() {
-		if (abortController) {
-			abortController.abort();
-		}
-		abortController = new AbortController();
+  async function loadMapMarkers() {
+    if (abortController) {
+      abortController.abort();
+    }
+    abortController = new AbortController();
 
-		const { onlyFavorites } = $mapSettings;
-		const { fileCreatedAfter, fileCreatedBefore } = getFileCreatedDates();
+    const { onlyFavorites } = $mapSettings;
+    const { fileCreatedAfter, fileCreatedBefore } = getFileCreatedDates();
 
-		const { data } = await api.assetApi.getMapMarkers(
-			{
-				isFavorite: onlyFavorites || undefined,
-				fileCreatedAfter: fileCreatedAfter || undefined,
-				fileCreatedBefore
-			},
-			{
-				signal: abortController.signal
-			}
-		);
-		return data;
-	}
+    const { data } = await api.assetApi.getMapMarkers(
+      {
+        isFavorite: onlyFavorites || undefined,
+        fileCreatedAfter: fileCreatedAfter || undefined,
+        fileCreatedBefore,
+      },
+      {
+        signal: abortController.signal,
+      },
+    );
+    return data;
+  }
 
-	function getFileCreatedDates() {
-		const { relativeDate, dateAfter, dateBefore } = $mapSettings;
+  function getFileCreatedDates() {
+    const { relativeDate, dateAfter, dateBefore } = $mapSettings;
 
-		if (relativeDate) {
-			const duration = Duration.fromISO(relativeDate);
-			return {
-				fileCreatedAfter: duration.isValid ? DateTime.now().minus(duration).toISO() : undefined
-			};
-		}
+    if (relativeDate) {
+      const duration = Duration.fromISO(relativeDate);
+      return {
+        fileCreatedAfter: duration.isValid ? DateTime.now().minus(duration).toISO() : undefined,
+      };
+    }
 
-		try {
-			return {
-				fileCreatedAfter: dateAfter ? new Date(dateAfter).toISOString() : undefined,
-				fileCreatedBefore: dateBefore ? new Date(dateBefore).toISOString() : undefined
-			};
-		} catch {
-			$mapSettings.dateAfter = '';
-			$mapSettings.dateBefore = '';
-			return {};
-		}
-	}
+    try {
+      return {
+        fileCreatedAfter: dateAfter ? new Date(dateAfter).toISOString() : undefined,
+        fileCreatedBefore: dateBefore ? new Date(dateBefore).toISOString() : undefined,
+      };
+    } catch {
+      $mapSettings.dateAfter = '';
+      $mapSettings.dateBefore = '';
+      return {};
+    }
+  }
 
-	function onViewAssets(assetIds: string[], activeAssetIndex: number) {
-		assetInteractionStore.setViewingAssetId(assetIds[activeAssetIndex]);
-		viewingAssets = assetIds;
-		viewingAssetCursor = activeAssetIndex;
-	}
+  function onViewAssets(assetIds: string[], activeAssetIndex: number) {
+    assetInteractionStore.setViewingAssetId(assetIds[activeAssetIndex]);
+    viewingAssets = assetIds;
+    viewingAssetCursor = activeAssetIndex;
+  }
 
-	function navigateNext() {
-		if (viewingAssetCursor < viewingAssets.length - 1) {
-			assetInteractionStore.setViewingAssetId(viewingAssets[++viewingAssetCursor]);
-		}
-	}
+  function navigateNext() {
+    if (viewingAssetCursor < viewingAssets.length - 1) {
+      assetInteractionStore.setViewingAssetId(viewingAssets[++viewingAssetCursor]);
+    }
+  }
 
-	function navigatePrevious() {
-		if (viewingAssetCursor > 0) {
-			assetInteractionStore.setViewingAssetId(viewingAssets[--viewingAssetCursor]);
-		}
-	}
+  function navigatePrevious() {
+    if (viewingAssetCursor > 0) {
+      assetInteractionStore.setViewingAssetId(viewingAssets[--viewingAssetCursor]);
+    }
+  }
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
-	<div class="h-full w-full isolate">
-		{#if leaflet}
-			{@const { Map, TileLayer, AssetMarkerCluster, Control } = leaflet}
-			<Map
-				center={[30, 0]}
-				zoom={3}
-				allowDarkMode={$mapSettings.allowDarkMode}
-				options={{
-					maxBounds: [
-						[-90, -180],
-						[90, 180]
-					],
-					minZoom: 2.5
-				}}
-			>
-				<TileLayer
-					urlTemplate={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
-					options={{
-						attribution:
-							'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-					}}
-				/>
-				<AssetMarkerCluster
-					markers={mapMarkers}
-					on:view={({ detail }) => onViewAssets(detail.assetIds, detail.activeAssetIndex)}
-				/>
-				<Control>
-					<button
-						class="flex justify-center items-center bg-white text-black/70 w-8 h-8 font-bold rounded-sm border-2 border-black/20 hover:bg-gray-50 focus:bg-gray-50"
-						title="Open map settings"
-						on:click={() => (showSettingsModal = true)}
-					>
-						<Cog size="100%" class="p-1" />
-					</button>
-				</Control>
-			</Map>
-		{/if}
-	</div>
+  <div class="h-full w-full isolate">
+    {#if leaflet}
+      {@const { Map, TileLayer, AssetMarkerCluster, Control } = leaflet}
+      <Map
+        center={[30, 0]}
+        zoom={3}
+        allowDarkMode={$mapSettings.allowDarkMode}
+        options={{
+          maxBounds: [
+            [-90, -180],
+            [90, 180],
+          ],
+          minZoom: 2.5,
+        }}
+      >
+        <TileLayer
+          urlTemplate={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
+          options={{
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+          }}
+        />
+        <AssetMarkerCluster
+          markers={mapMarkers}
+          on:view={({ detail }) => onViewAssets(detail.assetIds, detail.activeAssetIndex)}
+        />
+        <Control>
+          <button
+            class="flex justify-center items-center bg-white text-black/70 w-8 h-8 font-bold rounded-sm border-2 border-black/20 hover:bg-gray-50 focus:bg-gray-50"
+            title="Open map settings"
+            on:click={() => (showSettingsModal = true)}
+          >
+            <Cog size="100%" class="p-1" />
+          </button>
+        </Control>
+      </Map>
+    {/if}
+  </div>
 </UserPageLayout>
 
 <Portal target="body">
-	{#if $isViewingAssetStoreState}
-		<AssetViewer
-			asset={$viewingAssetStoreState}
-			showNavigation={viewingAssets.length > 1}
-			on:navigate-next={navigateNext}
-			on:navigate-previous={navigatePrevious}
-			on:close={() => {
-				assetInteractionStore.setIsViewingAsset(false);
-			}}
-		/>
-	{/if}
+  {#if $isViewingAssetStoreState}
+    <AssetViewer
+      asset={$viewingAssetStoreState}
+      showNavigation={viewingAssets.length > 1}
+      on:navigate-next={navigateNext}
+      on:navigate-previous={navigatePrevious}
+      on:close={() => {
+        assetInteractionStore.setIsViewingAsset(false);
+      }}
+    />
+  {/if}
 </Portal>
 
 {#if showSettingsModal}
-	<MapSettingsModal
-		settings={{ ...$mapSettings }}
-		on:close={() => (showSettingsModal = false)}
-		on:save={async ({ detail }) => {
-			const shouldUpdate = !isEqual(
-				omit(detail, 'allowDarkMode'),
-				omit($mapSettings, 'allowDarkMode')
-			);
-			showSettingsModal = false;
-			$mapSettings = detail;
+  <MapSettingsModal
+    settings={{ ...$mapSettings }}
+    on:close={() => (showSettingsModal = false)}
+    on:save={async ({ detail }) => {
+      const shouldUpdate = !isEqual(omit(detail, 'allowDarkMode'), omit($mapSettings, 'allowDarkMode'));
+      showSettingsModal = false;
+      $mapSettings = detail;
 
-			if (shouldUpdate) {
-				mapMarkers = await loadMapMarkers();
-			}
-		}}
-	/>
+      if (shouldUpdate) {
+        mapMarkers = await loadMapMarkers();
+      }
+    }}
+  />
 {/if}
diff --git a/web/src/routes/(user)/memory/+page.server.ts b/web/src/routes/(user)/memory/+page.server.ts
index 88bba26af..3973762d7 100644
--- a/web/src/routes/(user)/memory/+page.server.ts
+++ b/web/src/routes/(user)/memory/+page.server.ts
@@ -1,16 +1,16 @@
-import type { PageServerLoad } from './$types';
-import { redirect } from '@sveltejs/kit';
 import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { user } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	return {
-		user,
-		meta: {
-			title: 'Memory'
-		}
-	};
+  return {
+    user,
+    meta: {
+      title: 'Memory',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/memory/+page.svelte b/web/src/routes/(user)/memory/+page.svelte
index 28a4f538c..7f3491322 100644
--- a/web/src/routes/(user)/memory/+page.svelte
+++ b/web/src/routes/(user)/memory/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import MemoryViewer from '$lib/components/memory-page/memory-viewer.svelte';
+  import MemoryViewer from '$lib/components/memory-page/memory-viewer.svelte';
 </script>
 
 <MemoryViewer />
diff --git a/web/src/routes/(user)/memory/photos/+page.server.ts b/web/src/routes/(user)/memory/photos/+page.server.ts
index b7c5e3991..bd32438aa 100644
--- a/web/src/routes/(user)/memory/photos/+page.server.ts
+++ b/web/src/routes/(user)/memory/photos/+page.server.ts
@@ -1,15 +1,15 @@
 import { redirect } from '@sveltejs/kit';
 export const prerender = false;
 
-import type { PageServerLoad } from './$types';
 import { AppRoute } from '$lib/constants';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ parent }) => {
-	const { user } = await parent();
+  const { user } = await parent();
 
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	} else {
-		throw redirect(302, AppRoute.MEMORY);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  } else {
+    throw redirect(302, AppRoute.MEMORY);
+  }
 };
diff --git a/web/src/routes/(user)/memory/photos/[assetId]/+page.server.ts b/web/src/routes/(user)/memory/photos/[assetId]/+page.server.ts
index b7c5e3991..bd32438aa 100644
--- a/web/src/routes/(user)/memory/photos/[assetId]/+page.server.ts
+++ b/web/src/routes/(user)/memory/photos/[assetId]/+page.server.ts
@@ -1,15 +1,15 @@
 import { redirect } from '@sveltejs/kit';
 export const prerender = false;
 
-import type { PageServerLoad } from './$types';
 import { AppRoute } from '$lib/constants';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ parent }) => {
-	const { user } = await parent();
+  const { user } = await parent();
 
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	} else {
-		throw redirect(302, AppRoute.MEMORY);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  } else {
+    throw redirect(302, AppRoute.MEMORY);
+  }
 };
diff --git a/web/src/routes/(user)/partners/[userId]/+page.server.ts b/web/src/routes/(user)/partners/[userId]/+page.server.ts
index 8ce5f7760..58ed9fb3d 100644
--- a/web/src/routes/(user)/partners/[userId]/+page.server.ts
+++ b/web/src/routes/(user)/partners/[userId]/+page.server.ts
@@ -1,21 +1,21 @@
-import type { PageServerLoad } from './$types';
-import { redirect } from '@sveltejs/kit';
 import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ params, parent, locals: { api } }) => {
-	const { user } = await parent();
+  const { user } = await parent();
 
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	const { data: partner } = await api.userApi.getUserById({ userId: params['userId'] });
+  const { data: partner } = await api.userApi.getUserById({ userId: params['userId'] });
 
-	return {
-		user,
-		partner,
-		meta: {
-			title: 'Partner'
-		}
-	};
+  return {
+    user,
+    partner,
+    meta: {
+      title: 'Partner',
+    },
+  };
 };
diff --git a/web/src/routes/(user)/partners/[userId]/+page.svelte b/web/src/routes/(user)/partners/[userId]/+page.svelte
index 2bfae57bb..e5f25dc69 100644
--- a/web/src/routes/(user)/partners/[userId]/+page.svelte
+++ b/web/src/routes/(user)/partners/[userId]/+page.svelte
@@ -1,62 +1,48 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-	import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-	import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
-	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-	import { AppRoute } from '$lib/constants';
-	import {
-		assetInteractionStore,
-		isMultiSelectStoreState,
-		selectedAssets
-	} from '$lib/stores/asset-interaction.store';
-	import { onDestroy } from 'svelte';
-	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-	import Plus from 'svelte-material-icons/Plus.svelte';
-	import type { PageData } from './$types';
+  import { goto } from '$app/navigation';
+  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { assetInteractionStore, isMultiSelectStoreState, selectedAssets } from '$lib/stores/asset-interaction.store';
+  import { onDestroy } from 'svelte';
+  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+  import Plus from 'svelte-material-icons/Plus.svelte';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	onDestroy(() => {
-		assetInteractionStore.clearMultiselect();
-	});
+  onDestroy(() => {
+    assetInteractionStore.clearMultiselect();
+  });
 </script>
 
 <main class="grid h-screen pt-18 bg-immich-bg dark:bg-immich-dark-bg">
-	{#if $isMultiSelectStoreState}
-		<AssetSelectControlBar
-			assets={$selectedAssets}
-			clearSelect={assetInteractionStore.clearMultiselect}
-		>
-			<DownloadAction />
-		</AssetSelectControlBar>
-		<AssetSelectControlBar
-			assets={$selectedAssets}
-			clearSelect={assetInteractionStore.clearMultiselect}
-		>
-			<CreateSharedLink />
-			<AssetSelectContextMenu icon={Plus} title="Add">
-				<AddToAlbum />
-				<AddToAlbum shared />
-			</AssetSelectContextMenu>
-			<DownloadAction />
-		</AssetSelectControlBar>
-	{:else}
-		<ControlAppBar
-			showBackButton
-			backIcon={ArrowLeft}
-			on:close-button-click={() => goto(AppRoute.SHARING)}
-		>
-			<svelte:fragment slot="leading">
-				<p class="text-immich-fg dark:text-immich-dark-fg">
-					{data.partner.firstName}
-					{data.partner.lastName}'s photos
-				</p>
-			</svelte:fragment>
-		</ControlAppBar>
-	{/if}
-	<AssetGrid user={data.partner} />
+  {#if $isMultiSelectStoreState}
+    <AssetSelectControlBar assets={$selectedAssets} clearSelect={assetInteractionStore.clearMultiselect}>
+      <DownloadAction />
+    </AssetSelectControlBar>
+    <AssetSelectControlBar assets={$selectedAssets} clearSelect={assetInteractionStore.clearMultiselect}>
+      <CreateSharedLink />
+      <AssetSelectContextMenu icon={Plus} title="Add">
+        <AddToAlbum />
+        <AddToAlbum shared />
+      </AssetSelectContextMenu>
+      <DownloadAction />
+    </AssetSelectControlBar>
+  {:else}
+    <ControlAppBar showBackButton backIcon={ArrowLeft} on:close-button-click={() => goto(AppRoute.SHARING)}>
+      <svelte:fragment slot="leading">
+        <p class="text-immich-fg dark:text-immich-dark-fg">
+          {data.partner.firstName}
+          {data.partner.lastName}'s photos
+        </p>
+      </svelte:fragment>
+    </ControlAppBar>
+  {/if}
+  <AssetGrid user={data.partner} />
 </main>
diff --git a/web/src/routes/(user)/people/+page.server.ts b/web/src/routes/(user)/people/+page.server.ts
index 07ce852f6..bfcae137d 100644
--- a/web/src/routes/(user)/people/+page.server.ts
+++ b/web/src/routes/(user)/people/+page.server.ts
@@ -1,20 +1,20 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { AppRoute } from '$lib/constants';
 
 export const load = (async ({ locals, parent }) => {
-	const { user } = await parent();
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  const { user } = await parent();
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	const { data: people } = await locals.api.personApi.getAllPeople();
+  const { data: people } = await locals.api.personApi.getAllPeople();
 
-	return {
-		user,
-		people,
-		meta: {
-			title: 'People'
-		}
-	};
+  return {
+    user,
+    people,
+    meta: {
+      title: 'People',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index 1f83d9d46..b0f60a6d2 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -1,48 +1,46 @@
 <script lang="ts">
-	import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	import { api } from '@api';
-	import AccountOff from 'svelte-material-icons/AccountOff.svelte';
-	import type { PageData } from './$types';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import { api } from '@api';
+  import AccountOff from 'svelte-material-icons/AccountOff.svelte';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
+  export let data: PageData;
 </script>
 
 <UserPageLayout user={data.user} showUploadButton title="People">
-	{#if data.people.length > 0}
-		<div class="pl-4">
-			<div class="flex flex-row flex-wrap gap-1">
-				{#each data.people as person (person.id)}
-					<div class="relative">
-						<a href="/people/{person.id}" draggable="false">
-							<div class="filter brightness-75 rounded-xl w-48">
-								<ImageThumbnail
-									shadow
-									url={api.getPeopleThumbnailUrl(person.id)}
-									altText={person.name}
-									widthStyle="100%"
-								/>
-							</div>
-							{#if person.name}
-								<span
-									class="absolute bottom-2 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
-								>
-									{person.name}
-								</span>
-							{/if}
-						</a>
-					</div>
-				{/each}
-			</div>
-		</div>
-	{:else}
-		<div
-			class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white"
-		>
-			<div class="flex flex-col content-center items-center text-center">
-				<AccountOff size="3.5em" />
-				<p class="font-medium text-3xl mt-5">No people</p>
-			</div>
-		</div>
-	{/if}
+  {#if data.people.length > 0}
+    <div class="pl-4">
+      <div class="flex flex-row flex-wrap gap-1">
+        {#each data.people as person (person.id)}
+          <div class="relative">
+            <a href="/people/{person.id}" draggable="false">
+              <div class="filter brightness-75 rounded-xl w-48">
+                <ImageThumbnail
+                  shadow
+                  url={api.getPeopleThumbnailUrl(person.id)}
+                  altText={person.name}
+                  widthStyle="100%"
+                />
+              </div>
+              {#if person.name}
+                <span
+                  class="absolute bottom-2 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
+                >
+                  {person.name}
+                </span>
+              {/if}
+            </a>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {:else}
+    <div class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white">
+      <div class="flex flex-col content-center items-center text-center">
+        <AccountOff size="3.5em" />
+        <p class="font-medium text-3xl mt-5">No people</p>
+      </div>
+    </div>
+  {/if}
 </UserPageLayout>
diff --git a/web/src/routes/(user)/people/[personId]/+page.server.ts b/web/src/routes/(user)/people/[personId]/+page.server.ts
index 27c3ac797..564f4a0fd 100644
--- a/web/src/routes/(user)/people/[personId]/+page.server.ts
+++ b/web/src/routes/(user)/people/[personId]/+page.server.ts
@@ -1,22 +1,22 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { AppRoute } from '$lib/constants';
 
 export const load = (async ({ locals, parent, params }) => {
-	const { user } = await parent();
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  const { user } = await parent();
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	const { data: person } = await locals.api.personApi.getPerson({ id: params.personId });
-	const { data: assets } = await locals.api.personApi.getPersonAssets({ id: params.personId });
+  const { data: person } = await locals.api.personApi.getPerson({ id: params.personId });
+  const { data: assets } = await locals.api.personApi.getPersonAssets({ id: params.personId });
 
-	return {
-		user,
-		assets,
-		person,
-		meta: {
-			title: person.name || 'Person'
-		}
-	};
+  return {
+    user,
+    assets,
+    person,
+    meta: {
+      title: person.name || 'Person',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index 0724d2d15..53523e4b8 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -1,133 +1,118 @@
 <script lang="ts">
-	import { afterNavigate, goto } from '$app/navigation';
-	import { page } from '$app/stores';
-	import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-	import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
-	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-	import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-	import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
-	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-	import { AppRoute } from '$lib/constants';
-	import { handleError } from '$lib/utils/handle-error';
-	import { AssetResponseDto, api } from '@api';
-	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-	import Plus from 'svelte-material-icons/Plus.svelte';
-	import type { PageData } from './$types';
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+  import { afterNavigate, goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
+  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { AssetResponseDto, api } from '@api';
+  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+  import Plus from 'svelte-material-icons/Plus.svelte';
+  import type { PageData } from './$types';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	let isEditName = false;
-	let previousRoute: string = AppRoute.EXPLORE;
-	let selectedAssets: Set<AssetResponseDto> = new Set();
-	$: isMultiSelectionMode = selectedAssets.size > 0;
-	$: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
-	$: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
+  let isEditName = false;
+  let previousRoute: string = AppRoute.EXPLORE;
+  let selectedAssets: Set<AssetResponseDto> = new Set();
+  $: isMultiSelectionMode = selectedAssets.size > 0;
+  $: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
+  $: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
 
-	afterNavigate(({ from }) => {
-		// Prevent setting previousRoute to the current page.
-		if (from && from.route.id !== $page.route.id) {
-			previousRoute = from.url.href;
-		}
-	});
+  afterNavigate(({ from }) => {
+    // Prevent setting previousRoute to the current page.
+    if (from && from.route.id !== $page.route.id) {
+      previousRoute = from.url.href;
+    }
+  });
 
-	const handleNameChange = async (name: string) => {
-		try {
-			isEditName = false;
-			data.person.name = name;
-			await api.personApi.updatePerson({ id: data.person.id, personUpdateDto: { name } });
-		} catch (error) {
-			handleError(error, 'Unable to save name');
-		}
-	};
+  const handleNameChange = async (name: string) => {
+    try {
+      isEditName = false;
+      data.person.name = name;
+      await api.personApi.updatePerson({ id: data.person.id, personUpdateDto: { name } });
+    } catch (error) {
+      handleError(error, 'Unable to save name');
+    }
+  };
 
-	const onAssetDelete = (assetId: string) => {
-		data.assets = data.assets.filter((asset: AssetResponseDto) => asset.id !== assetId);
-	};
-	const handleSelectAll = () => {
-		selectedAssets = new Set(data.assets);
-	};
+  const onAssetDelete = (assetId: string) => {
+    data.assets = data.assets.filter((asset: AssetResponseDto) => asset.id !== assetId);
+  };
+  const handleSelectAll = () => {
+    selectedAssets = new Set(data.assets);
+  };
 </script>
 
 {#if isMultiSelectionMode}
-	<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
-		<CreateSharedLink />
-		<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
-		<AssetSelectContextMenu icon={Plus} title="Add">
-			<AddToAlbum />
-			<AddToAlbum shared />
-		</AssetSelectContextMenu>
-		<DeleteAssets {onAssetDelete} />
-		<AssetSelectContextMenu icon={DotsVertical} title="Add">
-			<DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
-			<FavoriteAction menuItem removeFavorite={isAllFavorite} />
-			<ArchiveAction
-				menuItem
-				unarchive={isAllArchive}
-				onAssetArchive={(asset) => onAssetDelete(asset.id)}
-			/>
-		</AssetSelectContextMenu>
-	</AssetSelectControlBar>
+  <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
+    <CreateSharedLink />
+    <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
+    <AssetSelectContextMenu icon={Plus} title="Add">
+      <AddToAlbum />
+      <AddToAlbum shared />
+    </AssetSelectContextMenu>
+    <DeleteAssets {onAssetDelete} />
+    <AssetSelectContextMenu icon={DotsVertical} title="Add">
+      <DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
+      <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+      <ArchiveAction menuItem unarchive={isAllArchive} onAssetArchive={(asset) => onAssetDelete(asset.id)} />
+    </AssetSelectContextMenu>
+  </AssetSelectControlBar>
 {:else}
-	<ControlAppBar
-		showBackButton
-		backIcon={ArrowLeft}
-		on:close-button-click={() => goto(previousRoute)}
-	/>
+  <ControlAppBar showBackButton backIcon={ArrowLeft} on:close-button-click={() => goto(previousRoute)} />
 {/if}
 
 <!-- Face information block -->
 <section class="pt-24 px-4 sm:px-6 flex place-items-center">
-	{#if isEditName}
-		<EditNameInput
-			person={data.person}
-			on:change={(event) => handleNameChange(event.detail)}
-			on:cancel={() => (isEditName = false)}
-		/>
-	{:else}
-		<ImageThumbnail
-			circle
-			shadow
-			url={api.getPeopleThumbnailUrl(data.person.id)}
-			altText={data.person.name}
-			widthStyle="3.375rem"
-			heightStyle="3.375rem"
-		/>
-		<button
-			title="Edit name"
-			class="px-4 text-immich-primary dark:text-immich-dark-primary"
-			on:click={() => (isEditName = true)}
-		>
-			{#if data.person.name}
-				<p class="font-medium py-2">{data.person.name}</p>
-			{:else}
-				<p class="font-medium w-fit">Add a name</p>
-				<p class="text-sm text-gray-500 dark:text-immich-gray">
-					Find them fast by name with search
-				</p>
-			{/if}
-		</button>
-	{/if}
+  {#if isEditName}
+    <EditNameInput
+      person={data.person}
+      on:change={(event) => handleNameChange(event.detail)}
+      on:cancel={() => (isEditName = false)}
+    />
+  {:else}
+    <ImageThumbnail
+      circle
+      shadow
+      url={api.getPeopleThumbnailUrl(data.person.id)}
+      altText={data.person.name}
+      widthStyle="3.375rem"
+      heightStyle="3.375rem"
+    />
+    <button
+      title="Edit name"
+      class="px-4 text-immich-primary dark:text-immich-dark-primary"
+      on:click={() => (isEditName = true)}
+    >
+      {#if data.person.name}
+        <p class="font-medium py-2">{data.person.name}</p>
+      {:else}
+        <p class="font-medium w-fit">Add a name</p>
+        <p class="text-sm text-gray-500 dark:text-immich-gray">Find them fast by name with search</p>
+      {/if}
+    </button>
+  {/if}
 </section>
 
 <!-- Gallery Block -->
 <section class="relative pt-8 sm:px-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
-	<section class="overflow-y-auto relative immich-scrollbar">
-		<section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
-			<GalleryViewer
-				assets={data.assets}
-				viewFrom="search-page"
-				showArchiveIcon={true}
-				bind:selectedAssets
-			/>
-		</section>
-	</section>
+  <section class="overflow-y-auto relative immich-scrollbar">
+    <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
+      <GalleryViewer assets={data.assets} viewFrom="search-page" showArchiveIcon={true} bind:selectedAssets />
+    </section>
+  </section>
 </section>
diff --git a/web/src/routes/(user)/people/[personId]/photos/[assetId]/+page.ts b/web/src/routes/(user)/people/[personId]/photos/[assetId]/+page.ts
index 235e620d6..ff1ae1cf8 100644
--- a/web/src/routes/(user)/people/[personId]/photos/[assetId]/+page.ts
+++ b/web/src/routes/(user)/people/[personId]/photos/[assetId]/+page.ts
@@ -1,14 +1,14 @@
-import { redirect } from '@sveltejs/kit';
-export const prerender = false;
-import type { PageLoad } from './$types';
 import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+export const prerender = false;
 
 export const load: PageLoad = async ({ params, parent }) => {
-	const { user } = await parent();
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  const { user } = await parent();
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	const personId = params['personId'];
-	throw redirect(302, `${AppRoute.PEOPLE}/${personId}`);
+  const personId = params['personId'];
+  throw redirect(302, `${AppRoute.PEOPLE}/${personId}`);
 };
diff --git a/web/src/routes/(user)/photos/+page.server.ts b/web/src/routes/(user)/photos/+page.server.ts
index db2e0b539..e8965f02f 100644
--- a/web/src/routes/(user)/photos/+page.server.ts
+++ b/web/src/routes/(user)/photos/+page.server.ts
@@ -1,16 +1,16 @@
-import type { PageServerLoad } from './$types';
-import { redirect } from '@sveltejs/kit';
 import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { user } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	return {
-		user,
-		meta: {
-			title: 'Photos'
-		}
-	};
+  return {
+    user,
+    meta: {
+      title: 'Photos',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/photos/+page.svelte b/web/src/routes/(user)/photos/+page.svelte
index d3915f548..830c21f7f 100644
--- a/web/src/routes/(user)/photos/+page.svelte
+++ b/web/src/routes/(user)/photos/+page.svelte
@@ -1,57 +1,50 @@
 <script lang="ts">
-	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-	import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-	import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-	import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
-	import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
-	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-	import {
-		assetInteractionStore,
-		isMultiSelectStoreState,
-		selectedAssets
-	} from '$lib/stores/asset-interaction.store';
-	import { assetStore } from '$lib/stores/assets.store';
-	import { onDestroy } from 'svelte';
-	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-	import Plus from 'svelte-material-icons/Plus.svelte';
-	import type { PageData } from './$types';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import { assetInteractionStore, isMultiSelectStoreState, selectedAssets } from '$lib/stores/asset-interaction.store';
+  import { assetStore } from '$lib/stores/assets.store';
+  import { onDestroy } from 'svelte';
+  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+  import Plus from 'svelte-material-icons/Plus.svelte';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	onDestroy(() => {
-		assetInteractionStore.clearMultiselect();
-	});
+  onDestroy(() => {
+    assetInteractionStore.clearMultiselect();
+  });
 
-	$: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
+  $: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
 </script>
 
 <UserPageLayout user={data.user} hideNavbar={$isMultiSelectStoreState} showUploadButton>
-	<svelte:fragment slot="header">
-		{#if $isMultiSelectStoreState}
-			<AssetSelectControlBar
-				assets={$selectedAssets}
-				clearSelect={assetInteractionStore.clearMultiselect}
-			>
-				<CreateSharedLink />
-				<SelectAllAssets />
-				<AssetSelectContextMenu icon={Plus} title="Add">
-					<AddToAlbum />
-					<AddToAlbum shared />
-				</AssetSelectContextMenu>
-				<DeleteAssets onAssetDelete={assetStore.removeAsset} />
-				<AssetSelectContextMenu icon={DotsVertical} title="Menu">
-					<FavoriteAction menuItem removeFavorite={isAllFavorite} />
-					<DownloadAction menuItem />
-					<ArchiveAction menuItem onAssetArchive={(asset) => assetStore.removeAsset(asset.id)} />
-				</AssetSelectContextMenu>
-			</AssetSelectControlBar>
-		{/if}
-	</svelte:fragment>
+  <svelte:fragment slot="header">
+    {#if $isMultiSelectStoreState}
+      <AssetSelectControlBar assets={$selectedAssets} clearSelect={assetInteractionStore.clearMultiselect}>
+        <CreateSharedLink />
+        <SelectAllAssets />
+        <AssetSelectContextMenu icon={Plus} title="Add">
+          <AddToAlbum />
+          <AddToAlbum shared />
+        </AssetSelectContextMenu>
+        <DeleteAssets onAssetDelete={assetStore.removeAsset} />
+        <AssetSelectContextMenu icon={DotsVertical} title="Menu">
+          <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+          <DownloadAction menuItem />
+          <ArchiveAction menuItem onAssetArchive={(asset) => assetStore.removeAsset(asset.id)} />
+        </AssetSelectContextMenu>
+      </AssetSelectControlBar>
+    {/if}
+  </svelte:fragment>
 
-	<AssetGrid slot="content" showMemoryLane />
+  <AssetGrid slot="content" showMemoryLane />
 </UserPageLayout>
diff --git a/web/src/routes/(user)/photos/[assetId]/+page.server.ts b/web/src/routes/(user)/photos/[assetId]/+page.server.ts
index a44ab35a0..1c8a2a51c 100644
--- a/web/src/routes/(user)/photos/[assetId]/+page.server.ts
+++ b/web/src/routes/(user)/photos/[assetId]/+page.server.ts
@@ -1,15 +1,15 @@
 import { redirect } from '@sveltejs/kit';
 export const prerender = false;
 
-import type { PageServerLoad } from './$types';
 import { AppRoute } from '$lib/constants';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ parent }) => {
-	const { user } = await parent();
+  const { user } = await parent();
 
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	} else {
-		throw redirect(302, AppRoute.PHOTOS);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  } else {
+    throw redirect(302, AppRoute.PHOTOS);
+  }
 };
diff --git a/web/src/routes/(user)/search/+page.server.ts b/web/src/routes/(user)/search/+page.server.ts
index 14e03c970..17a09fefc 100644
--- a/web/src/routes/(user)/search/+page.server.ts
+++ b/web/src/routes/(user)/search/+page.server.ts
@@ -1,23 +1,23 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { AppRoute } from '$lib/constants';
 
 export const load = (async ({ locals, parent, url }) => {
-	const { user } = await parent();
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  const { user } = await parent();
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	const term = url.searchParams.get('q') || url.searchParams.get('query') || undefined;
+  const term = url.searchParams.get('q') || url.searchParams.get('query') || undefined;
 
-	const { data: results } = await locals.api.searchApi.search({}, { params: url.searchParams });
+  const { data: results } = await locals.api.searchApi.search({}, { params: url.searchParams });
 
-	return {
-		user,
-		term,
-		results,
-		meta: {
-			title: 'Search'
-		}
-	};
+  return {
+    user,
+    term,
+    results,
+    meta: {
+      title: 'Search',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/search/+page.svelte b/web/src/routes/(user)/search/+page.svelte
index 69bffadde..07d8943d8 100644
--- a/web/src/routes/(user)/search/+page.svelte
+++ b/web/src/routes/(user)/search/+page.svelte
@@ -1,144 +1,132 @@
 <script lang="ts">
-	import { afterNavigate, goto } from '$app/navigation';
-	import { page } from '$app/stores';
-	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-	import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-	import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
-	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-	import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
-	import type { AssetResponseDto } from '@api';
-	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-	import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.svelte';
-	import Plus from 'svelte-material-icons/Plus.svelte';
-	import type { PageData } from './$types';
-	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
-	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-	import { AppRoute } from '$lib/constants';
-	import AlbumCard from '$lib/components/album-page/album-card.svelte';
-	import { flip } from 'svelte/animate';
+  import { afterNavigate, goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+  import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
+  import type { AssetResponseDto } from '@api';
+  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+  import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.svelte';
+  import Plus from 'svelte-material-icons/Plus.svelte';
+  import type { PageData } from './$types';
+  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { AppRoute } from '$lib/constants';
+  import AlbumCard from '$lib/components/album-page/album-card.svelte';
+  import { flip } from 'svelte/animate';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	// The GalleryViewer pushes it's own history state, which causes weird
-	// behavior for history.back(). To prevent that we store the previous page
-	// manually and navigate back to that.
-	let previousRoute = AppRoute.EXPLORE as string;
-	$: albums = data.results.albums.items;
+  // The GalleryViewer pushes it's own history state, which causes weird
+  // behavior for history.back(). To prevent that we store the previous page
+  // manually and navigate back to that.
+  let previousRoute = AppRoute.EXPLORE as string;
+  $: albums = data.results.albums.items;
 
-	afterNavigate(({ from }) => {
-		// Prevent setting previousRoute to the current page.
-		if (from && from.route.id !== $page.route.id) {
-			previousRoute = from.url.href;
-		}
+  afterNavigate(({ from }) => {
+    // Prevent setting previousRoute to the current page.
+    if (from && from.route.id !== $page.route.id) {
+      previousRoute = from.url.href;
+    }
 
-		if (from?.route.id === '/(user)/albums/[albumId]') {
-			previousRoute = AppRoute.EXPLORE;
-		}
-	});
+    if (from?.route.id === '/(user)/albums/[albumId]') {
+      previousRoute = AppRoute.EXPLORE;
+    }
+  });
 
-	$: term = (() => {
-		let term = $page.url.searchParams.get('q') || data.term || '';
-		const isMetadataSearch = $page.url.searchParams.get('clip') === 'false';
-		if (isMetadataSearch && term !== '') {
-			term = `m:${term}`;
-		}
-		return term;
-	})();
+  $: term = (() => {
+    let term = $page.url.searchParams.get('q') || data.term || '';
+    const isMetadataSearch = $page.url.searchParams.get('clip') === 'false';
+    if (isMetadataSearch && term !== '') {
+      term = `m:${term}`;
+    }
+    return term;
+  })();
 
-	let selectedAssets: Set<AssetResponseDto> = new Set();
-	$: isMultiSelectionMode = selectedAssets.size > 0;
-	$: isAllArchived = Array.from(selectedAssets).every((asset) => asset.isArchived);
-	$: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
-	$: searchResultAssets = data.results.assets.items;
+  let selectedAssets: Set<AssetResponseDto> = new Set();
+  $: isMultiSelectionMode = selectedAssets.size > 0;
+  $: isAllArchived = Array.from(selectedAssets).every((asset) => asset.isArchived);
+  $: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
+  $: searchResultAssets = data.results.assets.items;
 
-	const onAssetDelete = (assetId: string) => {
-		searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => a.id !== assetId);
-	};
-	const handleSelectAll = () => {
-		selectedAssets = new Set(searchResultAssets);
-	};
+  const onAssetDelete = (assetId: string) => {
+    searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => a.id !== assetId);
+  };
+  const handleSelectAll = () => {
+    selectedAssets = new Set(searchResultAssets);
+  };
 </script>
 
 <section>
-	{#if isMultiSelectionMode}
-		<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
-			<CreateSharedLink />
-			<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
-			<AssetSelectContextMenu icon={Plus} title="Add">
-				<AddToAlbum />
-				<AddToAlbum shared />
-			</AssetSelectContextMenu>
-			<DeleteAssets {onAssetDelete} />
+  {#if isMultiSelectionMode}
+    <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
+      <CreateSharedLink />
+      <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
+      <AssetSelectContextMenu icon={Plus} title="Add">
+        <AddToAlbum />
+        <AddToAlbum shared />
+      </AssetSelectContextMenu>
+      <DeleteAssets {onAssetDelete} />
 
-			<AssetSelectContextMenu icon={DotsVertical} title="Add">
-				<DownloadAction menuItem />
-				<FavoriteAction menuItem removeFavorite={isAllFavorite} />
-				<ArchiveAction menuItem unarchive={isAllArchived} />
-			</AssetSelectContextMenu>
-		</AssetSelectControlBar>
-	{:else}
-		<ControlAppBar on:close-button-click={() => goto(previousRoute)} backIcon={ArrowLeft}>
-			<div class="w-full max-w-2xl flex-1 pl-4">
-				<SearchBar grayTheme={false} value={term} />
-			</div>
-		</ControlAppBar>
-	{/if}
+      <AssetSelectContextMenu icon={DotsVertical} title="Add">
+        <DownloadAction menuItem />
+        <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+        <ArchiveAction menuItem unarchive={isAllArchived} />
+      </AssetSelectContextMenu>
+    </AssetSelectControlBar>
+  {:else}
+    <ControlAppBar on:close-button-click={() => goto(previousRoute)} backIcon={ArrowLeft}>
+      <div class="w-full max-w-2xl flex-1 pl-4">
+        <SearchBar grayTheme={false} value={term} />
+      </div>
+    </ControlAppBar>
+  {/if}
 </section>
 
 <section class="relative pt-32 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
-	<section class="overflow-y-auto relative immich-scrollbar">
-		{#if albums.length}
-			<section>
-				<div class="text-4xl font-medium text-black/70 dark:text-white/80 ml-6">ALBUMS</div>
-				<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
-					{#each albums as album (album.id)}
-						<a
-							data-sveltekit-preload-data="hover"
-							href={`albums/${album.id}`}
-							animate:flip={{ duration: 200 }}
-						>
-							<AlbumCard
-								{album}
-								user={data.user}
-								isSharingView={false}
-								showItemCount={false}
-								showContextMenu={false}
-							/>
-						</a>
-					{/each}
-				</div>
+  <section class="overflow-y-auto relative immich-scrollbar">
+    {#if albums.length}
+      <section>
+        <div class="text-4xl font-medium text-black/70 dark:text-white/80 ml-6">ALBUMS</div>
+        <div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
+          {#each albums as album (album.id)}
+            <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
+              <AlbumCard {album} user={data.user} isSharingView={false} showItemCount={false} showContextMenu={false} />
+            </a>
+          {/each}
+        </div>
 
-				<div class="m-6 text-4xl font-medium text-black/70 dark:text-white/80">PHOTOS & VIDEOS</div>
-			</section>
-		{/if}
-		<section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
-			{#if data.results?.assets?.items.length > 0}
-				<div class="pl-4">
-					<GalleryViewer
-						assets={searchResultAssets}
-						bind:selectedAssets
-						viewFrom="search-page"
-						showArchiveIcon={true}
-					/>
-				</div>
-			{:else}
-				<div
-					class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white"
-				>
-					<div class="flex flex-col content-center items-center text-center">
-						<ImageOffOutline size="3.5em" />
-						<p class="font-medium text-3xl mt-5">No results</p>
-						<p class="text-base font-normal">Try a synonym or more general keyword</p>
-					</div>
-				</div>
-			{/if}
-		</section>
-	</section>
+        <div class="m-6 text-4xl font-medium text-black/70 dark:text-white/80">PHOTOS & VIDEOS</div>
+      </section>
+    {/if}
+    <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
+      {#if data.results?.assets?.items.length > 0}
+        <div class="pl-4">
+          <GalleryViewer
+            assets={searchResultAssets}
+            bind:selectedAssets
+            viewFrom="search-page"
+            showArchiveIcon={true}
+          />
+        </div>
+      {:else}
+        <div class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white">
+          <div class="flex flex-col content-center items-center text-center">
+            <ImageOffOutline size="3.5em" />
+            <p class="font-medium text-3xl mt-5">No results</p>
+            <p class="text-base font-normal">Try a synonym or more general keyword</p>
+          </div>
+        </div>
+      {/if}
+    </section>
+  </section>
 </section>
diff --git a/web/src/routes/(user)/search/photos/[assetId]/+page.ts b/web/src/routes/(user)/search/photos/[assetId]/+page.ts
index 3b3b2caf0..994670a69 100644
--- a/web/src/routes/(user)/search/photos/[assetId]/+page.ts
+++ b/web/src/routes/(user)/search/photos/[assetId]/+page.ts
@@ -1,13 +1,13 @@
-import { redirect } from '@sveltejs/kit';
-export const prerender = false;
-import type { PageLoad } from './$types';
 import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+export const prerender = false;
 
 export const load: PageLoad = async ({ parent }) => {
-	const { user } = await parent();
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  const { user } = await parent();
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	throw redirect(302, AppRoute.SEARCH);
+  throw redirect(302, AppRoute.SEARCH);
 };
diff --git a/web/src/routes/(user)/share/[key]/+error.svelte b/web/src/routes/(user)/share/[key]/+error.svelte
index 966bb1b15..2d85595fd 100644
--- a/web/src/routes/(user)/share/[key]/+error.svelte
+++ b/web/src/routes/(user)/share/[key]/+error.svelte
@@ -1,9 +1,7 @@
 <svelte:head>
-	<title>Opps! Error - Immich</title>
+  <title>Opps! Error - Immich</title>
 </svelte:head>
 
 <section class="w-screen h-screen flex place-items-center place-content-center">
-	<div class="p-20 text-4xl dark:text-immich-dark-primary text-immich-primary">
-		Page not found :/
-	</div>
+  <div class="p-20 text-4xl dark:text-immich-dark-primary text-immich-primary">Page not found :/</div>
 </section>
diff --git a/web/src/routes/(user)/share/[key]/+page.server.ts b/web/src/routes/(user)/share/[key]/+page.server.ts
index c2863f093..d1d711fda 100644
--- a/web/src/routes/(user)/share/[key]/+page.server.ts
+++ b/web/src/routes/(user)/share/[key]/+page.server.ts
@@ -1,30 +1,30 @@
-import { error } from '@sveltejs/kit';
-import { ThumbnailFormat, api as clientApi } from '@api';
-import type { PageServerLoad } from './$types';
 import featurePanelUrl from '$lib/assets/feature-panel.png';
+import { api as clientApi, ThumbnailFormat } from '@api';
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
 
 export const load = (async ({ params, locals: { api } }) => {
-	const { key } = params;
+  const { key } = params;
 
-	try {
-		const { data: sharedLink } = await api.sharedLinkApi.getMySharedLink({ key });
+  try {
+    const { data: sharedLink } = await api.sharedLinkApi.getMySharedLink({ key });
 
-		const assetCount = sharedLink.assets.length;
-		const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
+    const assetCount = sharedLink.assets.length;
+    const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
 
-		return {
-			sharedLink,
-			meta: {
-				title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',
-				description: sharedLink.description || `${assetCount} shared photos & videos.`,
-				imageUrl: assetId
-					? clientApi.getAssetThumbnailUrl(assetId, ThumbnailFormat.Webp, sharedLink.key)
-					: featurePanelUrl
-			}
-		};
-	} catch (e) {
-		throw error(404, {
-			message: 'Invalid shared link'
-		});
-	}
+    return {
+      sharedLink,
+      meta: {
+        title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',
+        description: sharedLink.description || `${assetCount} shared photos & videos.`,
+        imageUrl: assetId
+          ? clientApi.getAssetThumbnailUrl(assetId, ThumbnailFormat.Webp, sharedLink.key)
+          : featurePanelUrl,
+      },
+    };
+  } catch (e) {
+    throw error(404, {
+      message: 'Invalid shared link',
+    });
+  }
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/share/[key]/+page.svelte b/web/src/routes/(user)/share/[key]/+page.svelte
index 258fd7120..bece11c32 100644
--- a/web/src/routes/(user)/share/[key]/+page.svelte
+++ b/web/src/routes/(user)/share/[key]/+page.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
-	import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
-	import { AlbumResponseDto, SharedLinkType } from '@api';
-	import type { PageData } from './$types';
+  import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+  import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
+  import { AlbumResponseDto, SharedLinkType } from '@api';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
-	const { sharedLink } = data;
+  export let data: PageData;
+  const { sharedLink } = data;
 
-	let album: AlbumResponseDto | null = null;
-	let isOwned = data.user ? data.user.id === sharedLink.userId : false;
-	if (sharedLink.album) {
-		album = { ...sharedLink.album, assets: sharedLink.assets };
-	}
+  let album: AlbumResponseDto | null = null;
+  let isOwned = data.user ? data.user.id === sharedLink.userId : false;
+  if (sharedLink.album) {
+    album = { ...sharedLink.album, assets: sharedLink.assets };
+  }
 </script>
 
 {#if sharedLink.type == SharedLinkType.Album && album}
-	<div class="immich-scrollbar">
-		<AlbumViewer {album} {sharedLink} />
-	</div>
+  <div class="immich-scrollbar">
+    <AlbumViewer {album} {sharedLink} />
+  </div>
 {/if}
 
 {#if sharedLink.type == SharedLinkType.Individual}
-	<div class="immich-scrollbar">
-		<IndividualSharedViewer {sharedLink} {isOwned} />
-	</div>
+  <div class="immich-scrollbar">
+    <IndividualSharedViewer {sharedLink} {isOwned} />
+  </div>
 {/if}
diff --git a/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.server.ts b/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.server.ts
index af5e6b652..b0e26e842 100644
--- a/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.server.ts
+++ b/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.server.ts
@@ -2,18 +2,18 @@ import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ params, locals: { api } }) => {
-	const { key, assetId } = params;
-	const { data: asset } = await api.assetApi.getAssetById({ id: assetId, key });
+  const { key, assetId } = params;
+  const { data: asset } = await api.assetApi.getAssetById({ id: assetId, key });
 
-	if (!asset) {
-		throw error(404, 'Asset not found');
-	}
+  if (!asset) {
+    throw error(404, 'Asset not found');
+  }
 
-	return {
-		asset,
-		key,
-		meta: {
-			title: 'Public Share'
-		}
-	};
+  return {
+    asset,
+    key,
+    meta: {
+      title: 'Public Share',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte b/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte
index 41f5012c9..800f1f6fd 100644
--- a/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte
+++ b/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
-	import type { PageData } from './$types';
-	import { goto } from '$app/navigation';
-	export let data: PageData;
+  import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
+  import type { PageData } from './$types';
+  import { goto } from '$app/navigation';
+  export let data: PageData;
 </script>
 
 {#if data.asset && data.key}
-	<AssetViewer
-		asset={data.asset}
-		publicSharedKey={data.key}
-		on:navigate-previous={() => null}
-		on:navigate-next={() => null}
-		showNavigation={false}
-		on:close={() => goto(`/share/${data.key}`)}
-	/>
+  <AssetViewer
+    asset={data.asset}
+    publicSharedKey={data.key}
+    on:navigate-previous={() => null}
+    on:navigate-next={() => null}
+    showNavigation={false}
+    on:close={() => goto(`/share/${data.key}`)}
+  />
 {/if}
diff --git a/web/src/routes/(user)/sharing/+page.server.ts b/web/src/routes/(user)/sharing/+page.server.ts
index 4e8d4f764..2b77b4677 100644
--- a/web/src/routes/(user)/sharing/+page.server.ts
+++ b/web/src/routes/(user)/sharing/+page.server.ts
@@ -3,24 +3,24 @@ import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { api, user } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	try {
-		const { data: sharedAlbums } = await api.albumApi.getAllAlbums({ shared: true });
-		const { data: partners } = await api.partnerApi.getPartners({ direction: 'shared-with' });
+  try {
+    const { data: sharedAlbums } = await api.albumApi.getAllAlbums({ shared: true });
+    const { data: partners } = await api.partnerApi.getPartners({ direction: 'shared-with' });
 
-		return {
-			user,
-			sharedAlbums,
-			partners,
-			meta: {
-				title: 'Sharing'
-			}
-		};
-	} catch (e) {
-		console.log(e);
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+    return {
+      user,
+      sharedAlbums,
+      partners,
+      meta: {
+        title: 'Sharing',
+      },
+    };
+  } catch (e) {
+    console.log(e);
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/sharing/+page.svelte b/web/src/routes/(user)/sharing/+page.svelte
index a2327d271..3b967995a 100644
--- a/web/src/routes/(user)/sharing/+page.svelte
+++ b/web/src/routes/(user)/sharing/+page.svelte
@@ -1,122 +1,118 @@
 <script lang="ts">
-	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
-	import Link from 'svelte-material-icons/Link.svelte';
-	import { goto } from '$app/navigation';
-	import { api } from '@api';
-	import type { PageData } from './$types';
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import empty2Url from '$lib/assets/empty-2.svg';
-	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-	import { flip } from 'svelte/animate';
-	import AlbumCard from '$lib/components/album-page/album-card.svelte';
-	import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-	import { AppRoute } from '$lib/constants';
+  import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
+  import Link from 'svelte-material-icons/Link.svelte';
+  import { goto } from '$app/navigation';
+  import { api } from '@api';
+  import type { PageData } from './$types';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import empty2Url from '$lib/assets/empty-2.svg';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import { flip } from 'svelte/animate';
+  import AlbumCard from '$lib/components/album-page/album-card.svelte';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import { AppRoute } from '$lib/constants';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	const createSharedAlbum = async () => {
-		try {
-			const { data: newAlbum } = await api.albumApi.createAlbum({
-				createAlbumDto: {
-					albumName: 'Untitled'
-				}
-			});
+  const createSharedAlbum = async () => {
+    try {
+      const { data: newAlbum } = await api.albumApi.createAlbum({
+        createAlbumDto: {
+          albumName: 'Untitled',
+        },
+      });
 
-			goto('/albums/' + newAlbum.id);
-		} catch (e) {
-			notificationController.show({
-				message: 'Error creating album, check console for more details',
-				type: NotificationType.Error
-			});
+      goto('/albums/' + newAlbum.id);
+    } catch (e) {
+      notificationController.show({
+        message: 'Error creating album, check console for more details',
+        type: NotificationType.Error,
+      });
 
-			console.log('Error [createAlbum] ', e);
-		}
-	};
+      console.log('Error [createAlbum] ', e);
+    }
+  };
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
-	<div class="flex" slot="buttons">
-		<LinkButton on:click={createSharedAlbum}>
-			<div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
-				<PlusBoxOutline size="18" class="shrink-0" />
-				<span class="max-sm:text-xs leading-none">Create shared album</span>
-			</div>
-		</LinkButton>
+  <div class="flex" slot="buttons">
+    <LinkButton on:click={createSharedAlbum}>
+      <div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
+        <PlusBoxOutline size="18" class="shrink-0" />
+        <span class="max-sm:text-xs leading-none">Create shared album</span>
+      </div>
+    </LinkButton>
 
-		<LinkButton on:click={() => goto(AppRoute.SHARED_LINKS)}>
-			<div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
-				<Link size="18" class="shrink-0" />
-				<span class="max-sm:text-xs leading-none">Shared links</span>
-			</div>
-		</LinkButton>
-	</div>
+    <LinkButton on:click={() => goto(AppRoute.SHARED_LINKS)}>
+      <div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
+        <Link size="18" class="shrink-0" />
+        <span class="max-sm:text-xs leading-none">Shared links</span>
+      </div>
+    </LinkButton>
+  </div>
 
-	<div class="flex flex-col">
-		{#if data.partners.length > 0}
-			<div class="mb-6 mt-2">
-				<div>
-					<p class="mb-4 dark:text-immich-dark-fg font-medium">Partners</p>
-				</div>
+  <div class="flex flex-col">
+    {#if data.partners.length > 0}
+      <div class="mb-6 mt-2">
+        <div>
+          <p class="mb-4 dark:text-immich-dark-fg font-medium">Partners</p>
+        </div>
 
-				<div class="flex flex-row flex-wrap gap-4">
-					{#each data.partners as partner (partner.id)}
-						<a
-							href="/partners/{partner.id}"
-							class="flex rounded-lg gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
-						>
-							<UserAvatar user={partner} size="md" autoColor />
-							<div class="text-left">
-								<p class="text-immich-fg dark:text-immich-dark-fg">
-									{partner.firstName}
-									{partner.lastName}
-								</p>
-								<p class="text-xs text-immich-fg/75 dark:text-immich-dark-fg/75">
-									{partner.email}
-								</p>
-							</div>
-						</a>
-					{/each}
-				</div>
-			</div>
+        <div class="flex flex-row flex-wrap gap-4">
+          {#each data.partners as partner (partner.id)}
+            <a
+              href="/partners/{partner.id}"
+              class="flex rounded-lg gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
+            >
+              <UserAvatar user={partner} size="md" autoColor />
+              <div class="text-left">
+                <p class="text-immich-fg dark:text-immich-dark-fg">
+                  {partner.firstName}
+                  {partner.lastName}
+                </p>
+                <p class="text-xs text-immich-fg/75 dark:text-immich-dark-fg/75">
+                  {partner.email}
+                </p>
+              </div>
+            </a>
+          {/each}
+        </div>
+      </div>
 
-			<hr class="dark:border-immich-dark-gray mb-4" />
-		{/if}
+      <hr class="dark:border-immich-dark-gray mb-4" />
+    {/if}
 
-		<div class="mb-6 mt-2">
-			<div>
-				<p class="mb-4 dark:text-immich-dark-fg font-medium">Albums</p>
-			</div>
+    <div class="mb-6 mt-2">
+      <div>
+        <p class="mb-4 dark:text-immich-dark-fg font-medium">Albums</p>
+      </div>
 
-			<div>
-				<!-- Share Album List -->
-				<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
-					{#each data.sharedAlbums as album (album.id)}
-						<a
-							data-sveltekit-preload-data="hover"
-							href={`albums/${album.id}`}
-							animate:flip={{ duration: 200 }}
-						>
-							<AlbumCard {album} user={data.user} isSharingView showContextMenu={false} />
-						</a>
-					{/each}
-				</div>
+      <div>
+        <!-- Share Album List -->
+        <div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
+          {#each data.sharedAlbums as album (album.id)}
+            <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
+              <AlbumCard {album} user={data.user} isSharingView showContextMenu={false} />
+            </a>
+          {/each}
+        </div>
 
-				<!-- Empty List -->
-				{#if data.sharedAlbums.length === 0}
-					<div
-						class="border dark:border-immich-dark-gray p-5 md:w-[500px] w-2/3 m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
-					>
-						<img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
-						<p class="text-center text-immich-text-gray-500">
-							Create a shared album to share photos and videos with people in your network
-						</p>
-					</div>
-				{/if}
-			</div>
-		</div>
-	</div>
+        <!-- Empty List -->
+        {#if data.sharedAlbums.length === 0}
+          <div
+            class="border dark:border-immich-dark-gray p-5 md:w-[500px] w-2/3 m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
+          >
+            <img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
+            <p class="text-center text-immich-text-gray-500">
+              Create a shared album to share photos and videos with people in your network
+            </p>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/sharing/sharedlinks/+page.server.ts b/web/src/routes/(user)/sharing/sharedlinks/+page.server.ts
index ec3d8ee66..c849ff997 100644
--- a/web/src/routes/(user)/sharing/sharedlinks/+page.server.ts
+++ b/web/src/routes/(user)/sharing/sharedlinks/+page.server.ts
@@ -3,14 +3,14 @@ import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { user } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	return {
-		user,
-		meta: {
-			title: 'Shared Links'
-		}
-	};
+  return {
+    user,
+    meta: {
+      title: 'Shared Links',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/sharing/sharedlinks/+page.svelte b/web/src/routes/(user)/sharing/sharedlinks/+page.svelte
index 6cd7e2e51..04f77683c 100644
--- a/web/src/routes/(user)/sharing/sharedlinks/+page.svelte
+++ b/web/src/routes/(user)/sharing/sharedlinks/+page.svelte
@@ -1,106 +1,104 @@
 <script lang="ts">
-	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-	import { api, SharedLinkResponseDto } from '@api';
-	import { goto } from '$app/navigation';
-	import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import { onMount } from 'svelte';
-	import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
-	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-	import { handleError } from '$lib/utils/handle-error';
-	import { AppRoute } from '$lib/constants';
+  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+  import { api, SharedLinkResponseDto } from '@api';
+  import { goto } from '$app/navigation';
+  import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { onMount } from 'svelte';
+  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import { handleError } from '$lib/utils/handle-error';
+  import { AppRoute } from '$lib/constants';
 
-	let sharedLinks: SharedLinkResponseDto[] = [];
-	let editSharedLink: SharedLinkResponseDto | null = null;
+  let sharedLinks: SharedLinkResponseDto[] = [];
+  let editSharedLink: SharedLinkResponseDto | null = null;
 
-	let deleteLinkId: string | null = null;
+  let deleteLinkId: string | null = null;
 
-	const refresh = async () => {
-		const { data } = await api.sharedLinkApi.getAllSharedLinks();
-		sharedLinks = data;
-	};
+  const refresh = async () => {
+    const { data } = await api.sharedLinkApi.getAllSharedLinks();
+    sharedLinks = data;
+  };
 
-	onMount(async () => {
-		await refresh();
-	});
+  onMount(async () => {
+    await refresh();
+  });
 
-	const handleDeleteLink = async () => {
-		if (!deleteLinkId) {
-			return;
-		}
+  const handleDeleteLink = async () => {
+    if (!deleteLinkId) {
+      return;
+    }
 
-		try {
-			await api.sharedLinkApi.removeSharedLink({ id: deleteLinkId });
-			notificationController.show({ message: 'Deleted shared link', type: NotificationType.Info });
-			deleteLinkId = null;
-			refresh();
-		} catch (error) {
-			handleError(error, 'Unable to delete shared link');
-		}
-	};
+    try {
+      await api.sharedLinkApi.removeSharedLink({ id: deleteLinkId });
+      notificationController.show({ message: 'Deleted shared link', type: NotificationType.Info });
+      deleteLinkId = null;
+      refresh();
+    } catch (error) {
+      handleError(error, 'Unable to delete shared link');
+    }
+  };
 
-	const handleEditDone = async () => {
-		refresh();
-		editSharedLink = null;
-	};
+  const handleEditDone = async () => {
+    refresh();
+    editSharedLink = null;
+  };
 
-	const handleCopyLink = async (key: string) => {
-		const link = `${window.location.origin}/share/${key}`;
-		await navigator.clipboard.writeText(link);
-		notificationController.show({
-			message: 'Link copied to clipboard',
-			type: NotificationType.Info
-		});
-	};
+  const handleCopyLink = async (key: string) => {
+    const link = `${window.location.origin}/share/${key}`;
+    await navigator.clipboard.writeText(link);
+    notificationController.show({
+      message: 'Link copied to clipboard',
+      type: NotificationType.Info,
+    });
+  };
 </script>
 
 <ControlAppBar backIcon={ArrowLeft} on:close-button-click={() => goto(AppRoute.SHARING)}>
-	<svelte:fragment slot="leading">Shared links</svelte:fragment>
+  <svelte:fragment slot="leading">Shared links</svelte:fragment>
 </ControlAppBar>
 
 <section class="flex flex-col pb-[120px] mt-[120px]">
-	<div class="w-[50%] m-auto mb-4 dark:text-immich-gray">
-		<p>Manage shared links</p>
-	</div>
-	{#if sharedLinks.length === 0}
-		<div
-			class="w-[50%] m-auto bg-gray-100 flex place-items-center place-content-center rounded-lg p-12"
-		>
-			<p>You don't have any shared links</p>
-		</div>
-	{:else}
-		<div class="flex flex-col w-[50%] m-auto">
-			{#each sharedLinks as link (link.id)}
-				<SharedLinkCard
-					{link}
-					on:delete={() => (deleteLinkId = link.id)}
-					on:edit={() => (editSharedLink = link)}
-					on:copy={() => handleCopyLink(link.key)}
-				/>
-			{/each}
-		</div>
-	{/if}
+  <div class="w-[50%] m-auto mb-4 dark:text-immich-gray">
+    <p>Manage shared links</p>
+  </div>
+  {#if sharedLinks.length === 0}
+    <div class="w-[50%] m-auto bg-gray-100 flex place-items-center place-content-center rounded-lg p-12">
+      <p>You don't have any shared links</p>
+    </div>
+  {:else}
+    <div class="flex flex-col w-[50%] m-auto">
+      {#each sharedLinks as link (link.id)}
+        <SharedLinkCard
+          {link}
+          on:delete={() => (deleteLinkId = link.id)}
+          on:edit={() => (editSharedLink = link)}
+          on:copy={() => handleCopyLink(link.key)}
+        />
+      {/each}
+    </div>
+  {/if}
 </section>
 
 {#if editSharedLink}
-	<CreateSharedLinkModal
-		editingLink={editSharedLink}
-		shareType={editSharedLink.type}
-		album={editSharedLink.album}
-		on:close={handleEditDone}
-	/>
+  <CreateSharedLinkModal
+    editingLink={editSharedLink}
+    shareType={editSharedLink.type}
+    album={editSharedLink.album}
+    on:close={handleEditDone}
+  />
 {/if}
 
 {#if deleteLinkId}
-	<ConfirmDialogue
-		title="Delete Shared Link"
-		prompt="Are you sure you want to delete this shared link?"
-		confirmText="Delete"
-		on:confirm={() => handleDeleteLink()}
-		on:cancel={() => (deleteLinkId = null)}
-	/>
+  <ConfirmDialogue
+    title="Delete Shared Link"
+    prompt="Are you sure you want to delete this shared link?"
+    confirmText="Delete"
+    on:confirm={() => handleDeleteLink()}
+    on:cancel={() => (deleteLinkId = null)}
+  />
 {/if}
diff --git a/web/src/routes/(user)/user-settings/+page.server.ts b/web/src/routes/(user)/user-settings/+page.server.ts
index 80784c7b8..c952d6cb5 100644
--- a/web/src/routes/(user)/user-settings/+page.server.ts
+++ b/web/src/routes/(user)/user-settings/+page.server.ts
@@ -3,14 +3,14 @@ import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { user } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	return {
-		user,
-		meta: {
-			title: 'Settings'
-		}
-	};
+  return {
+    user,
+    meta: {
+      title: 'Settings',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/(user)/user-settings/+page.svelte b/web/src/routes/(user)/user-settings/+page.svelte
index 0cc87046f..aac45c93a 100644
--- a/web/src/routes/(user)/user-settings/+page.svelte
+++ b/web/src/routes/(user)/user-settings/+page.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
-	import type { PageData } from './$types';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
+  export let data: PageData;
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
-	<section class="flex place-content-center mx-4">
-		<div class="w-full max-w-3xl">
-			<UserSettingsList user={data.user} />
-		</div>
-	</section>
+  <section class="flex place-content-center mx-4">
+    <div class="w-full max-w-3xl">
+      <UserSettingsList user={data.user} />
+    </div>
+  </section>
 </UserPageLayout>
diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
index 42a22e9d8..4702ca2d1 100644
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -1,123 +1,119 @@
 <script>
-	import { page } from '$app/stores';
-	import Message from 'svelte-material-icons/Message.svelte';
-	import PartyPopper from 'svelte-material-icons/PartyPopper.svelte';
-	import CodeTags from 'svelte-material-icons/CodeTags.svelte';
-	import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
-	import { handleError } from '$lib/utils/handle-error';
-	import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import { page } from '$app/stores';
+  import Message from 'svelte-material-icons/Message.svelte';
+  import PartyPopper from 'svelte-material-icons/PartyPopper.svelte';
+  import CodeTags from 'svelte-material-icons/CodeTags.svelte';
+  import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
 
-	const handleCopy = async () => {
-		//
-		const error = $page.error || null;
-		if (!error) {
-			return;
-		}
+  const handleCopy = async () => {
+    //
+    const error = $page.error || null;
+    if (!error) {
+      return;
+    }
 
-		try {
-			await navigator.clipboard.writeText(`${error.message} - ${error.code}\n${error.stack}`);
-			notificationController.show({
-				type: NotificationType.Info,
-				message: 'Copied error to clipboard'
-			});
-		} catch (error) {
-			handleError(error, 'Unable to copy to clipboard');
-		}
-	};
+    try {
+      await navigator.clipboard.writeText(`${error.message} - ${error.code}\n${error.stack}`);
+      notificationController.show({
+        type: NotificationType.Info,
+        message: 'Copied error to clipboard',
+      });
+    } catch (error) {
+      handleError(error, 'Unable to copy to clipboard');
+    }
+  };
 </script>
 
 <div class="h-screen w-screen">
-	<section class="bg-immich-bg dark:bg-immich-dark-bg">
-		<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-4">
-			<a class="flex gap-2 place-items-center hover:cursor-pointer" href="/photos">
-				<ImmichLogo height="35" width="35" />
-				<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
-					IMMICH
-				</h1>
-			</a>
-		</div>
-	</section>
+  <section class="bg-immich-bg dark:bg-immich-dark-bg">
+    <div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-4">
+      <a class="flex gap-2 place-items-center hover:cursor-pointer" href="/photos">
+        <ImmichLogo height="35" width="35" />
+        <h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">IMMICH</h1>
+      </a>
+    </div>
+  </section>
 
-	<div
-		class="fixed top-0 w-full h-full bg-black/50 flex place-items-center place-content-center overflow-hidden"
-	>
-		<div>
-			<div
-				class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray shadow-sm w-[500px] max-w-[95vw] rounded-3xl dark:text-immich-dark-fg"
-			>
-				<div>
-					<div class="flex items-center justify-between gap-4 px-4 py-4">
-						<h1 class="text-immich-primary dark:text-immich-dark-primary font-medium">
-							🚨 Error - Something went wrong
-						</h1>
-						<div class="flex justify-end">
-							<button
-								on:click={() => handleCopy()}
-								class="transition-colors bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-3 py-2 text-white rounded-full shadow-md text-sm"
-							>
-								<ContentCopy size={24} />
-							</button>
-						</div>
-					</div>
+  <div class="fixed top-0 w-full h-full bg-black/50 flex place-items-center place-content-center overflow-hidden">
+    <div>
+      <div
+        class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray shadow-sm w-[500px] max-w-[95vw] rounded-3xl dark:text-immich-dark-fg"
+      >
+        <div>
+          <div class="flex items-center justify-between gap-4 px-4 py-4">
+            <h1 class="text-immich-primary dark:text-immich-dark-primary font-medium">
+              🚨 Error - Something went wrong
+            </h1>
+            <div class="flex justify-end">
+              <button
+                on:click={() => handleCopy()}
+                class="transition-colors bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-3 py-2 text-white rounded-full shadow-md text-sm"
+              >
+                <ContentCopy size={24} />
+              </button>
+            </div>
+          </div>
 
-					<hr />
+          <hr />
 
-					<div class="p-4 max-h-[75vh] min-h-[300px] overflow-y-auto immich-scrollbar pb-4 gap-4">
-						<div class="flex flex-col w-full gap-2">
-							<p class="text-red-500">{$page.error?.message} ({$page.error?.code})</p>
-							{#if $page.error?.stack}
-								<label for="stacktrace">Stacktrace</label>
-								<pre id="stacktrace" class="text-xs">{$page.error?.stack || 'No stack'}</pre>
-							{/if}
-						</div>
-					</div>
+          <div class="p-4 max-h-[75vh] min-h-[300px] overflow-y-auto immich-scrollbar pb-4 gap-4">
+            <div class="flex flex-col w-full gap-2">
+              <p class="text-red-500">{$page.error?.message} ({$page.error?.code})</p>
+              {#if $page.error?.stack}
+                <label for="stacktrace">Stacktrace</label>
+                <pre id="stacktrace" class="text-xs">{$page.error?.stack || 'No stack'}</pre>
+              {/if}
+            </div>
+          </div>
 
-					<hr />
+          <hr />
 
-					<div class="flex justify-around place-items-center place-content-center">
-						<!-- href="https://github.com/immich-app/immich/issues/new" -->
-						<a
-							href="https://discord.com/invite/D8JsnBEuKb"
-							target="_blank"
-							rel="noopener noreferrer"
-							class="flex justify-center grow basis-0 p-4"
-						>
-							<button class="flex flex-col gap-2 place-items-center place-content-center">
-								<Message size={24} />
-								<p class="text-sm">Get Help</p>
-							</button>
-						</a>
+          <div class="flex justify-around place-items-center place-content-center">
+            <!-- href="https://github.com/immich-app/immich/issues/new" -->
+            <a
+              href="https://discord.com/invite/D8JsnBEuKb"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex justify-center grow basis-0 p-4"
+            >
+              <button class="flex flex-col gap-2 place-items-center place-content-center">
+                <Message size={24} />
+                <p class="text-sm">Get Help</p>
+              </button>
+            </a>
 
-						<a
-							href="https://github.com/immich-app/immich/releases"
-							target="_blank"
-							rel="noopener noreferrer"
-							class="flex justify-center grow basis-0 p-4"
-						>
-							<button class="flex flex-col gap-2 place-items-center place-content-center">
-								<PartyPopper size={24} />
-								<p class="text-sm">Read Changelog</p>
-							</button>
-						</a>
+            <a
+              href="https://github.com/immich-app/immich/releases"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex justify-center grow basis-0 p-4"
+            >
+              <button class="flex flex-col gap-2 place-items-center place-content-center">
+                <PartyPopper size={24} />
+                <p class="text-sm">Read Changelog</p>
+              </button>
+            </a>
 
-						<a
-							href="https://immich.app/docs/guides/docker-help"
-							target="_blank"
-							rel="noopener noreferrer"
-							class="flex justify-center grow basis-0 p-4"
-						>
-							<button class="flex flex-col gap-2 place-items-center place-content-center">
-								<CodeTags size={24} />
-								<p class="text-sm">Check Logs</p>
-							</button>
-						</a>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+            <a
+              href="https://immich.app/docs/guides/docker-help"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex justify-center grow basis-0 p-4"
+            >
+              <button class="flex flex-col gap-2 place-items-center place-content-center">
+                <CodeTags size={24} />
+                <p class="text-sm">Check Logs</p>
+              </button>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/web/src/routes/+layout.server.ts b/web/src/routes/+layout.server.ts
index bf504b7ef..6ee389073 100644
--- a/web/src/routes/+layout.server.ts
+++ b/web/src/routes/+layout.server.ts
@@ -1,7 +1,7 @@
 import type { LayoutServerLoad } from './$types';
 
 export const load = (async ({ locals: { api, user } }) => {
-	const { data: serverVersion } = await api.serverInfoApi.getServerVersion();
+  const { data: serverVersion } = await api.serverInfoApi.getServerVersion();
 
-	return { serverVersion, user };
+  return { serverVersion, user };
 }) satisfies LayoutServerLoad;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index f817768bf..a03592aca 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,86 +1,86 @@
 <script lang="ts">
-	import '../app.css';
+  import '../app.css';
 
-	import { page } from '$app/stores';
-	import { afterNavigate, beforeNavigate } from '$app/navigation';
-	import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
-	import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
-	import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
-	import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
-	import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
-	import type { LayoutData } from './$types';
-	import { fileUploadHandler } from '$lib/utils/file-uploader';
-	import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
-	import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
-	import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
-	import FaviconHeader from '$lib/components/shared-components/favicon-header.svelte';
+  import { page } from '$app/stores';
+  import { afterNavigate, beforeNavigate } from '$app/navigation';
+  import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
+  import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
+  import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
+  import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
+  import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
+  import type { LayoutData } from './$types';
+  import { fileUploadHandler } from '$lib/utils/file-uploader';
+  import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
+  import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
+  import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
+  import FaviconHeader from '$lib/components/shared-components/favicon-header.svelte';
 
-	import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
+  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
 
-	let showNavigationLoadingBar = false;
-	export let data: LayoutData;
-	let albumId: string | undefined;
+  let showNavigationLoadingBar = false;
+  export let data: LayoutData;
+  let albumId: string | undefined;
 
-	beforeNavigate(() => {
-		showNavigationLoadingBar = true;
-	});
+  beforeNavigate(() => {
+    showNavigationLoadingBar = true;
+  });
 
-	afterNavigate(() => {
-		showNavigationLoadingBar = false;
-	});
+  afterNavigate(() => {
+    showNavigationLoadingBar = false;
+  });
 
-	const dropHandler = async ({ dataTransfer }: DragEvent) => {
-		const files = dataTransfer?.files;
-		if (!files) {
-			return;
-		}
+  const dropHandler = async ({ dataTransfer }: DragEvent) => {
+    const files = dataTransfer?.files;
+    if (!files) {
+      return;
+    }
 
-		const filesArray: File[] = Array.from<File>(files);
-		albumId = ($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
+    const filesArray: File[] = Array.from<File>(files);
+    albumId = ($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
 
-		const isShare = $page.route.id === '/(user)/share/[key]' || undefined;
-		if (isShare) {
-			dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
-		} else {
-			await fileUploadHandler(filesArray, albumId);
-		}
-	};
+    const isShare = $page.route.id === '/(user)/share/[key]' || undefined;
+    if (isShare) {
+      dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
+    } else {
+      await fileUploadHandler(filesArray, albumId);
+    }
+  };
 </script>
 
 <svelte:head>
-	<title>{$page.data.meta?.title || 'Web'} - Immich</title>
-	<link rel="manifest" href="/manifest.json" />
-	<meta name="theme-color" content="currentColor" />
-	<FaviconHeader />
-	<AppleHeader />
+  <title>{$page.data.meta?.title || 'Web'} - Immich</title>
+  <link rel="manifest" href="/manifest.json" />
+  <meta name="theme-color" content="currentColor" />
+  <FaviconHeader />
+  <AppleHeader />
 
-	{#if $page.data.meta}
-		<meta name="description" content={$page.data.meta.description} />
+  {#if $page.data.meta}
+    <meta name="description" content={$page.data.meta.description} />
 
-		<!-- Facebook Meta Tags -->
-		<meta property="og:type" content="website" />
-		<meta property="og:title" content={$page.data.meta.title} />
-		<meta property="og:description" content={$page.data.meta.description} />
-		<meta property="og:image" content={$page.data.meta.imageUrl} />
+    <!-- Facebook Meta Tags -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={$page.data.meta.title} />
+    <meta property="og:description" content={$page.data.meta.description} />
+    <meta property="og:image" content={$page.data.meta.imageUrl} />
 
-		<!-- Twitter Meta Tags -->
-		<meta name="twitter:card" content="summary_large_image" />
-		<meta name="twitter:title" content={$page.data.meta.title} />
-		<meta name="twitter:description" content={$page.data.meta.description} />
-		<meta name="twitter:image" content={$page.data.meta.imageUrl} />
-	{/if}
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={$page.data.meta.title} />
+    <meta name="twitter:description" content={$page.data.meta.description} />
+    <meta name="twitter:image" content={$page.data.meta.imageUrl} />
+  {/if}
 </svelte:head>
 
 <noscript
-	class="h-screen w-screen absolute z-[1000] flex place-items-center place-content-center bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
+  class="h-screen w-screen absolute z-[1000] flex place-items-center place-content-center bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
 >
-	<FullscreenContainer title="Welcome to Immich">
-		To use Immich, you must enable JavaScript or use a JavaScript compatible browser.
-	</FullscreenContainer>
+  <FullscreenContainer title="Welcome to Immich">
+    To use Immich, you must enable JavaScript or use a JavaScript compatible browser.
+  </FullscreenContainer>
 </noscript>
 
 {#if showNavigationLoadingBar}
-	<NavigationLoadingBar />
+  <NavigationLoadingBar />
 {/if}
 
 <slot {albumId} />
@@ -90,9 +90,9 @@
 <NotificationList />
 
 {#if data.user?.isAdmin}
-	<VersionAnnouncementBox serverVersion={data.serverVersion} />
+  <VersionAnnouncementBox serverVersion={data.serverVersion} />
 {/if}
 
 {#if $page.route.id?.includes('(user)')}
-	<UploadCover {dropHandler} />
+  <UploadCover {dropHandler} />
 {/if}
diff --git a/web/src/routes/+page.server.ts b/web/src/routes/+page.server.ts
index c2227e2fc..51a6ef71d 100644
--- a/web/src/routes/+page.server.ts
+++ b/web/src/routes/+page.server.ts
@@ -1,26 +1,26 @@
 export const prerender = false;
 
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { AppRoute } from '$lib/constants';
 
 export const load = (async ({ parent, locals: { api } }) => {
-	const { user } = await parent();
-	if (user) {
-		throw redirect(302, AppRoute.PHOTOS);
-	}
+  const { user } = await parent();
+  if (user) {
+    throw redirect(302, AppRoute.PHOTOS);
+  }
 
-	const { data } = await api.userApi.getUserCount({ admin: true });
+  const { data } = await api.userApi.getUserCount({ admin: true });
 
-	if (data.userCount > 0) {
-		// Redirect to login page if an admin is already registered.
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  if (data.userCount > 0) {
+    // Redirect to login page if an admin is already registered.
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	return {
-		meta: {
-			title: 'Welcome 🎉',
-			description: 'Immich Web Interface'
-		}
-	};
+  return {
+    meta: {
+      title: 'Welcome 🎉',
+      description: 'Immich Web Interface',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 67e30e734..4006da311 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,21 +1,19 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import Button from '$lib/components/elements/buttons/button.svelte';
-	import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import { goto } from '$app/navigation';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
 </script>
 
 <section class="h-screen w-screen flex place-items-center place-content-center">
-	<div class="flex flex-col place-items-center gap-8 text-center max-w-[350px]">
-		<div class="flex place-items-center place-content-center">
-			<ImmichLogo class="text-center" height="200" width="200" />
-		</div>
-		<h1
-			class="text-4xl text-immich-primary dark:text-immich-dark-primary font-bold font-immich-title"
-		>
-			Welcome to IMMICH Web
-		</h1>
-		<Button size="lg" rounded="lg" on:click={() => goto('/auth/register')}>
-			<span class="font-bold px-2">Getting Started</span>
-		</Button>
-	</div>
+  <div class="flex flex-col place-items-center gap-8 text-center max-w-[350px]">
+    <div class="flex place-items-center place-content-center">
+      <ImmichLogo class="text-center" height="200" width="200" />
+    </div>
+    <h1 class="text-4xl text-immich-primary dark:text-immich-dark-primary font-bold font-immich-title">
+      Welcome to IMMICH Web
+    </h1>
+    <Button size="lg" rounded="lg" on:click={() => goto('/auth/register')}>
+      <span class="font-bold px-2">Getting Started</span>
+    </Button>
+  </div>
 </section>
diff --git a/web/src/routes/.well-known/immich/+server.ts b/web/src/routes/.well-known/immich/+server.ts
index 8ae494123..37d778806 100644
--- a/web/src/routes/.well-known/immich/+server.ts
+++ b/web/src/routes/.well-known/immich/+server.ts
@@ -3,9 +3,9 @@ import { json } from '@sveltejs/kit';
 const endpoint = process.env.IMMICH_API_URL_EXTERNAL || '/api';
 
 export const GET = async () => {
-	return json({
-		api: {
-			endpoint
-		}
-	});
+  return json({
+    api: {
+      endpoint,
+    },
+  });
 };
diff --git a/web/src/routes/admin/+layout.svelte b/web/src/routes/admin/+layout.svelte
index 98a16ab1d..61800f6be 100644
--- a/web/src/routes/admin/+layout.svelte
+++ b/web/src/routes/admin/+layout.svelte
@@ -1,77 +1,77 @@
 <script lang="ts">
-	// DO NOT include `import { page } from '$app/stores'` here, because this can
-	// lead to pages not being unmounted, which then causes weird page nesting
-	// and routing issues.
-	//
-	// This is an issue in SvelteKit caused by using the page store in layouts and
-	// using transitions on pages: https://github.com/sveltejs/kit/issues/7405
+  // DO NOT include `import { page } from '$app/stores'` here, because this can
+  // lead to pages not being unmounted, which then causes weird page nesting
+  // and routing issues.
+  //
+  // This is an issue in SvelteKit caused by using the page store in layouts and
+  // using transitions on pages: https://github.com/sveltejs/kit/issues/7405
 
-	import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
-	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
-	import Sync from 'svelte-material-icons/Sync.svelte';
-	import Cog from 'svelte-material-icons/Cog.svelte';
-	import Server from 'svelte-material-icons/Server.svelte';
-	import StatusBox from '$lib/components/shared-components/status-box.svelte';
-	import { goto } from '$app/navigation';
-	import { AppRoute } from '../../lib/constants';
-	import type { LayoutData } from './$types';
-	import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
-	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
+  import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
+  import Sync from 'svelte-material-icons/Sync.svelte';
+  import Cog from 'svelte-material-icons/Cog.svelte';
+  import Server from 'svelte-material-icons/Server.svelte';
+  import StatusBox from '$lib/components/shared-components/status-box.svelte';
+  import { goto } from '$app/navigation';
+  import { AppRoute } from '../../lib/constants';
+  import type { LayoutData } from './$types';
+  import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
 
-	export let data: LayoutData;
+  export let data: LayoutData;
 
-	// Circumvents the need to import the page store. Should be replaced by
-	// `$page.data.meta.title` once issue #7405 of SvelteKit is resolved.
-	const getPageTitle = (routeId: string | null) => {
-		switch (routeId) {
-			case AppRoute.ADMIN_USER_MANAGEMENT:
-				return 'User Management';
-			case AppRoute.ADMIN_SETTINGS:
-				return 'System Settings';
-			case AppRoute.ADMIN_JOBS:
-				return 'Jobs';
-			case AppRoute.ADMIN_STATS:
-				return 'Server Stats';
-			default:
-				return '';
-		}
-	};
+  // Circumvents the need to import the page store. Should be replaced by
+  // `$page.data.meta.title` once issue #7405 of SvelteKit is resolved.
+  const getPageTitle = (routeId: string | null) => {
+    switch (routeId) {
+      case AppRoute.ADMIN_USER_MANAGEMENT:
+        return 'User Management';
+      case AppRoute.ADMIN_SETTINGS:
+        return 'System Settings';
+      case AppRoute.ADMIN_JOBS:
+        return 'Jobs';
+      case AppRoute.ADMIN_STATS:
+        return 'Server Stats';
+      default:
+        return '';
+    }
+  };
 </script>
 
 <UserPageLayout user={data.user} showUploadButton={false} title={getPageTitle(data.routeId)}>
-	<SideBarSection slot="sidebar">
-		<SideBarButton
-			title="Users"
-			logo={AccountMultipleOutline}
-			isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
-			on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
-		/>
-		<SideBarButton
-			title="Jobs"
-			logo={Sync}
-			isSelected={data.routeId === AppRoute.ADMIN_JOBS}
-			on:selected={() => goto(AppRoute.ADMIN_JOBS)}
-		/>
-		<SideBarButton
-			title="Settings"
-			logo={Cog}
-			isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
-			on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
-		/>
-		<SideBarButton
-			title="Server Stats"
-			logo={Server}
-			isSelected={data.routeId === AppRoute.ADMIN_STATS}
-			on:selected={() => goto(AppRoute.ADMIN_STATS)}
-		/>
-		<div class="mb-6 mt-auto">
-			<StatusBox />
-		</div>
-	</SideBarSection>
+  <SideBarSection slot="sidebar">
+    <SideBarButton
+      title="Users"
+      logo={AccountMultipleOutline}
+      isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
+      on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
+    />
+    <SideBarButton
+      title="Jobs"
+      logo={Sync}
+      isSelected={data.routeId === AppRoute.ADMIN_JOBS}
+      on:selected={() => goto(AppRoute.ADMIN_JOBS)}
+    />
+    <SideBarButton
+      title="Settings"
+      logo={Cog}
+      isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
+      on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
+    />
+    <SideBarButton
+      title="Server Stats"
+      logo={Server}
+      isSelected={data.routeId === AppRoute.ADMIN_STATS}
+      on:selected={() => goto(AppRoute.ADMIN_STATS)}
+    />
+    <div class="mb-6 mt-auto">
+      <StatusBox />
+    </div>
+  </SideBarSection>
 
-	<section id="setting-content" class="flex place-content-center mx-4">
-		<section class="w-full sm:w-5/6 md:w-[800px] pt-5 pb-28">
-			<slot />
-		</section>
-	</section>
+  <section id="setting-content" class="flex place-content-center mx-4">
+    <section class="w-full sm:w-5/6 md:w-[800px] pt-5 pb-28">
+      <slot />
+    </section>
+  </section>
 </UserPageLayout>
diff --git a/web/src/routes/admin/+layout.ts b/web/src/routes/admin/+layout.ts
index e2128861b..edabd3d06 100644
--- a/web/src/routes/admin/+layout.ts
+++ b/web/src/routes/admin/+layout.ts
@@ -3,12 +3,12 @@ import { redirect } from '@sveltejs/kit';
 import type { LayoutLoad } from './$types';
 
 export const load = (async ({ parent, route }) => {
-	const { user } = await parent();
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	} else if (!user.isAdmin) {
-		throw redirect(302, AppRoute.PHOTOS);
-	}
+  const { user } = await parent();
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  } else if (!user.isAdmin) {
+    throw redirect(302, AppRoute.PHOTOS);
+  }
 
-	return { routeId: route.id, user };
+  return { routeId: route.id, user };
 }) satisfies LayoutLoad;
diff --git a/web/src/routes/admin/+page.server.ts b/web/src/routes/admin/+page.server.ts
index bb148ff37..777b940dc 100644
--- a/web/src/routes/admin/+page.server.ts
+++ b/web/src/routes/admin/+page.server.ts
@@ -1,15 +1,15 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { AppRoute } from '$lib/constants';
 
 export const load: PageServerLoad = async ({ parent }) => {
-	const { user } = await parent();
+  const { user } = await parent();
 
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	} else if (!user.isAdmin) {
-		throw redirect(302, AppRoute.PHOTOS);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  } else if (!user.isAdmin) {
+    throw redirect(302, AppRoute.PHOTOS);
+  }
 
-	throw redirect(302, AppRoute.ADMIN_USER_MANAGEMENT);
+  throw redirect(302, AppRoute.ADMIN_USER_MANAGEMENT);
 };
diff --git a/web/src/routes/admin/jobs-status/+page.server.ts b/web/src/routes/admin/jobs-status/+page.server.ts
index f20e0010e..7407fee65 100644
--- a/web/src/routes/admin/jobs-status/+page.server.ts
+++ b/web/src/routes/admin/jobs-status/+page.server.ts
@@ -3,23 +3,23 @@ import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { user, api } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	} else if (!user.isAdmin) {
-		throw redirect(302, AppRoute.PHOTOS);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  } else if (!user.isAdmin) {
+    throw redirect(302, AppRoute.PHOTOS);
+  }
 
-	try {
-		const { data: jobs } = await api.jobApi.getAllJobsStatus();
+  try {
+    const { data: jobs } = await api.jobApi.getAllJobsStatus();
 
-		return {
-			jobs,
-			meta: {
-				title: 'Job Status'
-			}
-		};
-	} catch (err) {
-		console.error('[jobs] > getAllJobsStatus', err);
-		throw err;
-	}
+    return {
+      jobs,
+      meta: {
+        title: 'Job Status',
+      },
+    };
+  } catch (err) {
+    console.error('[jobs] > getAllJobsStatus', err);
+    throw err;
+  }
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/admin/jobs-status/+page.svelte b/web/src/routes/admin/jobs-status/+page.svelte
index e69cb6898..a30a9fffd 100644
--- a/web/src/routes/admin/jobs-status/+page.svelte
+++ b/web/src/routes/admin/jobs-status/+page.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-	import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
-	import { api } from '@api';
-	import { onDestroy, onMount } from 'svelte';
-	import type { PageData } from './$types';
+  import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
+  import { api } from '@api';
+  import { onDestroy, onMount } from 'svelte';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
-	let timer: NodeJS.Timer;
+  export let data: PageData;
+  let timer: NodeJS.Timer;
 
-	$: jobs = data.jobs;
+  $: jobs = data.jobs;
 
-	const load = async () => {
-		const { data } = await api.jobApi.getAllJobsStatus();
-		jobs = data;
-	};
+  const load = async () => {
+    const { data } = await api.jobApi.getAllJobsStatus();
+    jobs = data;
+  };
 
-	onMount(async () => {
-		await load();
-		timer = setInterval(load, 5_000);
-	});
+  onMount(async () => {
+    await load();
+    timer = setInterval(load, 5_000);
+  });
 
-	onDestroy(() => {
-		clearInterval(timer);
-	});
+  onDestroy(() => {
+    clearInterval(timer);
+  });
 </script>
 
 <JobsPanel {jobs} />
diff --git a/web/src/routes/admin/server-status/+page.server.ts b/web/src/routes/admin/server-status/+page.server.ts
index 2e366f365..477e27d8b 100644
--- a/web/src/routes/admin/server-status/+page.server.ts
+++ b/web/src/routes/admin/server-status/+page.server.ts
@@ -1,22 +1,22 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { AppRoute } from '$lib/constants';
 
 export const load = (async ({ parent, locals: { api } }) => {
-	const { user } = await parent();
+  const { user } = await parent();
 
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	} else if (!user.isAdmin) {
-		throw redirect(302, AppRoute.PHOTOS);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  } else if (!user.isAdmin) {
+    throw redirect(302, AppRoute.PHOTOS);
+  }
 
-	const { data: stats } = await api.serverInfoApi.getStats();
+  const { data: stats } = await api.serverInfoApi.getStats();
 
-	return {
-		stats,
-		meta: {
-			title: 'Server Stats'
-		}
-	};
+  return {
+    stats,
+    meta: {
+      title: 'Server Stats',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/admin/server-status/+page.svelte b/web/src/routes/admin/server-status/+page.svelte
index 8a930af79..e096ff002 100644
--- a/web/src/routes/admin/server-status/+page.svelte
+++ b/web/src/routes/admin/server-status/+page.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-	import { api } from '@api';
-	import ServerStatsPanel from '$lib/components/admin-page/server-stats/server-stats-panel.svelte';
-	import type { PageData } from './$types';
+  import { onMount, onDestroy } from 'svelte';
+  import { api } from '@api';
+  import ServerStatsPanel from '$lib/components/admin-page/server-stats/server-stats-panel.svelte';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
-	let setIntervalHandler: NodeJS.Timer;
+  export let data: PageData;
+  let setIntervalHandler: NodeJS.Timer;
 
-	onMount(async () => {
-		setIntervalHandler = setInterval(async () => {
-			const { data: stats } = await api.serverInfoApi.getStats();
-			data.stats = stats;
-		}, 5000);
-	});
+  onMount(async () => {
+    setIntervalHandler = setInterval(async () => {
+      const { data: stats } = await api.serverInfoApi.getStats();
+      data.stats = stats;
+    }, 5000);
+  });
 
-	onDestroy(() => {
-		clearInterval(setIntervalHandler);
-	});
+  onDestroy(() => {
+    clearInterval(setIntervalHandler);
+  });
 </script>
 
 <ServerStatsPanel stats={data.stats} />
diff --git a/web/src/routes/admin/system-settings/+page.server.ts b/web/src/routes/admin/system-settings/+page.server.ts
index 2550325c9..65a9485de 100644
--- a/web/src/routes/admin/system-settings/+page.server.ts
+++ b/web/src/routes/admin/system-settings/+page.server.ts
@@ -1,20 +1,20 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { AppRoute } from '$lib/constants';
 
 export const load: PageServerLoad = async ({ parent }) => {
-	const { user } = await parent();
+  const { user } = await parent();
 
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	} else if (!user.isAdmin) {
-		throw redirect(302, AppRoute.PHOTOS);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  } else if (!user.isAdmin) {
+    throw redirect(302, AppRoute.PHOTOS);
+  }
 
-	return {
-		user,
-		meta: {
-			title: 'System Settings'
-		}
-	};
+  return {
+    user,
+    meta: {
+      title: 'System Settings',
+    },
+  };
 };
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index e6274900d..24a1532fd 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -1,59 +1,56 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import FFmpegSettings from '$lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte';
-	import JobSettings from '$lib/components/admin-page/settings/job-settings/job-settings.svelte';
-	import OAuthSettings from '$lib/components/admin-page/settings/oauth/oauth-settings.svelte';
-	import PasswordLoginSettings from '$lib/components/admin-page/settings/password-login/password-login-settings.svelte';
-	import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte';
-	import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
-	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-	import { api } from '@api';
-	import type { PageData } from './$types';
+  import { page } from '$app/stores';
+  import FFmpegSettings from '$lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte';
+  import JobSettings from '$lib/components/admin-page/settings/job-settings/job-settings.svelte';
+  import OAuthSettings from '$lib/components/admin-page/settings/oauth/oauth-settings.svelte';
+  import PasswordLoginSettings from '$lib/components/admin-page/settings/password-login/password-login-settings.svelte';
+  import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte';
+  import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { api } from '@api';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	const getConfig = async () => {
-		const { data } = await api.systemConfigApi.getConfig();
-		return data;
-	};
+  const getConfig = async () => {
+    const { data } = await api.systemConfigApi.getConfig();
+    return data;
+  };
 </script>
 
 <section class="">
-	{#await getConfig()}
-		<LoadingSpinner />
-	{:then configs}
-		<SettingAccordion
-			title="FFmpeg Settings"
-			subtitle="Manage the resolution and encoding information of the video files"
-		>
-			<FFmpegSettings ffmpegConfig={configs.ffmpeg} />
-		</SettingAccordion>
+  {#await getConfig()}
+    <LoadingSpinner />
+  {:then configs}
+    <SettingAccordion
+      title="FFmpeg Settings"
+      subtitle="Manage the resolution and encoding information of the video files"
+    >
+      <FFmpegSettings ffmpegConfig={configs.ffmpeg} />
+    </SettingAccordion>
 
-		<SettingAccordion
-			title="Job Settings"
-			subtitle="Manage job concurrency"
-			isOpen={$page.url.searchParams.get('open') === 'job-settings'}
-		>
-			<JobSettings jobConfig={configs.job} />
-		</SettingAccordion>
+    <SettingAccordion
+      title="Job Settings"
+      subtitle="Manage job concurrency"
+      isOpen={$page.url.searchParams.get('open') === 'job-settings'}
+    >
+      <JobSettings jobConfig={configs.job} />
+    </SettingAccordion>
 
-		<SettingAccordion
-			title="Password Authentication"
-			subtitle="Manage login with password settings"
-		>
-			<PasswordLoginSettings passwordLoginConfig={configs.passwordLogin} />
-		</SettingAccordion>
+    <SettingAccordion title="Password Authentication" subtitle="Manage login with password settings">
+      <PasswordLoginSettings passwordLoginConfig={configs.passwordLogin} />
+    </SettingAccordion>
 
-		<SettingAccordion title="OAuth Authentication" subtitle="Manage the login with OAuth settings">
-			<OAuthSettings oauthConfig={configs.oauth} />
-		</SettingAccordion>
+    <SettingAccordion title="OAuth Authentication" subtitle="Manage the login with OAuth settings">
+      <OAuthSettings oauthConfig={configs.oauth} />
+    </SettingAccordion>
 
-		<SettingAccordion
-			title="Storage Template"
-			subtitle="Manage the folder structure and file name of the upload asset"
-			isOpen={$page.url.searchParams.get('open') === 'storage-template'}
-		>
-			<StorageTemplateSettings storageConfig={configs.storageTemplate} user={data.user} />
-		</SettingAccordion>
-	{/await}
+    <SettingAccordion
+      title="Storage Template"
+      subtitle="Manage the folder structure and file name of the upload asset"
+      isOpen={$page.url.searchParams.get('open') === 'storage-template'}
+    >
+      <StorageTemplateSettings storageConfig={configs.storageTemplate} user={data.user} />
+    </SettingAccordion>
+  {/await}
 </section>
diff --git a/web/src/routes/admin/user-management/+page.server.ts b/web/src/routes/admin/user-management/+page.server.ts
index 661ef6bcc..54fdc4311 100644
--- a/web/src/routes/admin/user-management/+page.server.ts
+++ b/web/src/routes/admin/user-management/+page.server.ts
@@ -1,23 +1,23 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { AppRoute } from '$lib/constants';
 
 export const load = (async ({ parent, locals: { api } }) => {
-	const { user } = await parent();
+  const { user } = await parent();
 
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	} else if (!user.isAdmin) {
-		throw redirect(302, AppRoute.PHOTOS);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  } else if (!user.isAdmin) {
+    throw redirect(302, AppRoute.PHOTOS);
+  }
 
-	const { data: allUsers } = await api.userApi.getAllUsers({ isAll: false });
+  const { data: allUsers } = await api.userApi.getAllUsers({ isAll: false });
 
-	return {
-		user,
-		allUsers,
-		meta: {
-			title: 'User Management'
-		}
-	};
+  return {
+    user,
+    allUsers,
+    meta: {
+      title: 'User Management',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte
index aae793d47..aa9f964d6 100644
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@@ -1,299 +1,295 @@
 <script lang="ts">
-	import { api, UserResponseDto } from '@api';
+  import { api, UserResponseDto } from '@api';
 
-	import { onMount } from 'svelte';
-	import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
-	import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
-	import DeleteRestore from 'svelte-material-icons/DeleteRestore.svelte';
-	import Check from 'svelte-material-icons/Check.svelte';
-	import Close from 'svelte-material-icons/Close.svelte';
-	import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-	import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
-	import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
-	import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialoge.svelte';
-	import RestoreDialogue from '$lib/components/admin-page/restore-dialoge.svelte';
-	import { page } from '$app/stores';
-	import { locale } from '$lib/stores/preferences.store';
-	import Button from '$lib/components/elements/buttons/button.svelte';
-	import type { PageData } from './$types';
+  import { onMount } from 'svelte';
+  import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
+  import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
+  import DeleteRestore from 'svelte-material-icons/DeleteRestore.svelte';
+  import Check from 'svelte-material-icons/Check.svelte';
+  import Close from 'svelte-material-icons/Close.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
+  import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
+  import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialoge.svelte';
+  import RestoreDialogue from '$lib/components/admin-page/restore-dialoge.svelte';
+  import { page } from '$app/stores';
+  import { locale } from '$lib/stores/preferences.store';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	let allUsers: UserResponseDto[] = [];
-	let shouldShowEditUserForm = false;
-	let shouldShowCreateUserForm = false;
-	let shouldShowInfoPanel = false;
-	let shouldShowDeleteConfirmDialog = false;
-	let shouldShowRestoreDialog = false;
-	let selectedUser: UserResponseDto;
+  let allUsers: UserResponseDto[] = [];
+  let shouldShowEditUserForm = false;
+  let shouldShowCreateUserForm = false;
+  let shouldShowInfoPanel = false;
+  let shouldShowDeleteConfirmDialog = false;
+  let shouldShowRestoreDialog = false;
+  let selectedUser: UserResponseDto;
 
-	onMount(() => {
-		allUsers = $page.data.allUsers;
-	});
+  onMount(() => {
+    allUsers = $page.data.allUsers;
+  });
 
-	const isDeleted = (user: UserResponseDto): boolean => {
-		return user.deletedAt != null;
-	};
+  const isDeleted = (user: UserResponseDto): boolean => {
+    return user.deletedAt != null;
+  };
 
-	const deleteDateFormat: Intl.DateTimeFormatOptions = {
-		month: 'long',
-		day: 'numeric',
-		year: 'numeric'
-	};
+  const deleteDateFormat: Intl.DateTimeFormatOptions = {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  };
 
-	const getDeleteDate = (user: UserResponseDto): string => {
-		let deletedAt = new Date(user.deletedAt ? user.deletedAt : Date.now());
-		deletedAt.setDate(deletedAt.getDate() + 7);
-		return deletedAt.toLocaleString($locale, deleteDateFormat);
-	};
+  const getDeleteDate = (user: UserResponseDto): string => {
+    let deletedAt = new Date(user.deletedAt ? user.deletedAt : Date.now());
+    deletedAt.setDate(deletedAt.getDate() + 7);
+    return deletedAt.toLocaleString($locale, deleteDateFormat);
+  };
 
-	const onUserCreated = async () => {
-		const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-		allUsers = getAllUsersRes.data;
-		shouldShowCreateUserForm = false;
-	};
+  const onUserCreated = async () => {
+    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
+    allUsers = getAllUsersRes.data;
+    shouldShowCreateUserForm = false;
+  };
 
-	const editUserHandler = async (user: UserResponseDto) => {
-		selectedUser = user;
-		shouldShowEditUserForm = true;
-	};
+  const editUserHandler = async (user: UserResponseDto) => {
+    selectedUser = user;
+    shouldShowEditUserForm = true;
+  };
 
-	const onEditUserSuccess = async () => {
-		const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-		allUsers = getAllUsersRes.data;
-		shouldShowEditUserForm = false;
-	};
+  const onEditUserSuccess = async () => {
+    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
+    allUsers = getAllUsersRes.data;
+    shouldShowEditUserForm = false;
+  };
 
-	const onEditPasswordSuccess = async () => {
-		const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-		allUsers = getAllUsersRes.data;
-		shouldShowEditUserForm = false;
-		shouldShowInfoPanel = true;
-	};
+  const onEditPasswordSuccess = async () => {
+    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
+    allUsers = getAllUsersRes.data;
+    shouldShowEditUserForm = false;
+    shouldShowInfoPanel = true;
+  };
 
-	const deleteUserHandler = async (user: UserResponseDto) => {
-		selectedUser = user;
-		shouldShowDeleteConfirmDialog = true;
-	};
+  const deleteUserHandler = async (user: UserResponseDto) => {
+    selectedUser = user;
+    shouldShowDeleteConfirmDialog = true;
+  };
 
-	const onUserDeleteSuccess = async () => {
-		const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-		allUsers = getAllUsersRes.data;
-		shouldShowDeleteConfirmDialog = false;
-	};
+  const onUserDeleteSuccess = async () => {
+    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
+    allUsers = getAllUsersRes.data;
+    shouldShowDeleteConfirmDialog = false;
+  };
 
-	const onUserDeleteFail = async () => {
-		const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-		allUsers = getAllUsersRes.data;
-		shouldShowDeleteConfirmDialog = false;
-	};
+  const onUserDeleteFail = async () => {
+    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
+    allUsers = getAllUsersRes.data;
+    shouldShowDeleteConfirmDialog = false;
+  };
 
-	const restoreUserHandler = async (user: UserResponseDto) => {
-		selectedUser = user;
-		shouldShowRestoreDialog = true;
-	};
+  const restoreUserHandler = async (user: UserResponseDto) => {
+    selectedUser = user;
+    shouldShowRestoreDialog = true;
+  };
 
-	const onUserRestoreSuccess = async () => {
-		const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-		allUsers = getAllUsersRes.data;
-		shouldShowRestoreDialog = false;
-	};
+  const onUserRestoreSuccess = async () => {
+    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
+    allUsers = getAllUsersRes.data;
+    shouldShowRestoreDialog = false;
+  };
 
-	const onUserRestoreFail = async () => {
-		// show fail dialog
-		const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
-		allUsers = getAllUsersRes.data;
-		shouldShowRestoreDialog = false;
-	};
+  const onUserRestoreFail = async () => {
+    // show fail dialog
+    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
+    allUsers = getAllUsersRes.data;
+    shouldShowRestoreDialog = false;
+  };
 </script>
 
 <section>
-	{#if shouldShowCreateUserForm}
-		<FullScreenModal on:clickOutside={() => (shouldShowCreateUserForm = false)}>
-			<CreateUserForm on:user-created={onUserCreated} />
-		</FullScreenModal>
-	{/if}
+  {#if shouldShowCreateUserForm}
+    <FullScreenModal on:clickOutside={() => (shouldShowCreateUserForm = false)}>
+      <CreateUserForm on:user-created={onUserCreated} />
+    </FullScreenModal>
+  {/if}
 
-	{#if shouldShowEditUserForm}
-		<FullScreenModal on:clickOutside={() => (shouldShowEditUserForm = false)}>
-			<EditUserForm
-				user={selectedUser}
-				canResetPassword={selectedUser?.id !== data.user.id}
-				on:edit-success={onEditUserSuccess}
-				on:reset-password-success={onEditPasswordSuccess}
-			/>
-		</FullScreenModal>
-	{/if}
+  {#if shouldShowEditUserForm}
+    <FullScreenModal on:clickOutside={() => (shouldShowEditUserForm = false)}>
+      <EditUserForm
+        user={selectedUser}
+        canResetPassword={selectedUser?.id !== data.user.id}
+        on:edit-success={onEditUserSuccess}
+        on:reset-password-success={onEditPasswordSuccess}
+      />
+    </FullScreenModal>
+  {/if}
 
-	{#if shouldShowDeleteConfirmDialog}
-		<DeleteConfirmDialog
-			user={selectedUser}
-			on:user-delete-success={onUserDeleteSuccess}
-			on:user-delete-fail={onUserDeleteFail}
-			on:cancel={() => (shouldShowDeleteConfirmDialog = false)}
-		/>
-	{/if}
+  {#if shouldShowDeleteConfirmDialog}
+    <DeleteConfirmDialog
+      user={selectedUser}
+      on:user-delete-success={onUserDeleteSuccess}
+      on:user-delete-fail={onUserDeleteFail}
+      on:cancel={() => (shouldShowDeleteConfirmDialog = false)}
+    />
+  {/if}
 
-	{#if shouldShowRestoreDialog}
-		<RestoreDialogue
-			user={selectedUser}
-			on:user-restore-success={onUserRestoreSuccess}
-			on:user-restore-fail={onUserRestoreFail}
-			on:cancel={() => (shouldShowRestoreDialog = false)}
-		/>
-	{/if}
+  {#if shouldShowRestoreDialog}
+    <RestoreDialogue
+      user={selectedUser}
+      on:user-restore-success={onUserRestoreSuccess}
+      on:user-restore-fail={onUserRestoreFail}
+      on:cancel={() => (shouldShowRestoreDialog = false)}
+    />
+  {/if}
 
-	{#if shouldShowInfoPanel}
-		<FullScreenModal on:clickOutside={() => (shouldShowInfoPanel = false)}>
-			<div class="border bg-white shadow-sm w-[500px] max-w-[95vw] rounded-3xl p-8 text-sm">
-				<h1 class="font-medium text-immich-primary text-lg mb-4">Password reset success</h1>
+  {#if shouldShowInfoPanel}
+    <FullScreenModal on:clickOutside={() => (shouldShowInfoPanel = false)}>
+      <div class="border bg-white shadow-sm w-[500px] max-w-[95vw] rounded-3xl p-8 text-sm">
+        <h1 class="font-medium text-immich-primary text-lg mb-4">Password reset success</h1>
 
-				<p>
-					The user's password has been reset to the default <code
-						class="font-bold bg-gray-200 px-2 py-1 rounded-md text-immich-primary">password</code
-					>
-					<br />
-					Please inform the user, and they will need to change the password at the next log-on.
-				</p>
+        <p>
+          The user's password has been reset to the default <code
+            class="font-bold bg-gray-200 px-2 py-1 rounded-md text-immich-primary">password</code
+          >
+          <br />
+          Please inform the user, and they will need to change the password at the next log-on.
+        </p>
 
-				<div class="flex w-full mt-6">
-					<Button fullwidth on:click={() => (shouldShowInfoPanel = false)}>Done</Button>
-				</div>
-			</div>
-		</FullScreenModal>
-	{/if}
+        <div class="flex w-full mt-6">
+          <Button fullwidth on:click={() => (shouldShowInfoPanel = false)}>Done</Button>
+        </div>
+      </div>
+    </FullScreenModal>
+  {/if}
 
-	<table class="text-left w-full my-5 sm:block hidden">
-		<thead
-			class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
-		>
-			<tr class="flex w-full place-items-center">
-				<th class="text-center w-1/4 font-medium text-sm">Email</th>
-				<th class="text-center w-1/4 font-medium text-sm">First name</th>
-				<th class="text-center w-1/4 font-medium text-sm">Last name</th>
-				<th class="text-center w-1/4 font-medium text-sm">Can import</th>
-				<th class="text-center w-1/4 font-medium text-sm">Action</th>
-			</tr>
-		</thead>
-		<tbody
-			class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray"
-		>
-			{#if allUsers}
-				{#each allUsers as user, i}
-					<tr
-						class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
-							isDeleted(user)
-								? 'bg-red-300 dark:bg-red-900'
-								: i % 2 == 0
-								? 'bg-immich-gray dark:bg-immich-dark-gray/75'
-								: 'bg-immich-bg dark:bg-immich-dark-gray/50'
-						}`}
-					>
-						<td class="text-sm px-4 w-1/4 text-ellipsis">{user.email}</td>
-						<td class="text-sm px-4 w-1/4 text-ellipsis">{user.firstName}</td>
-						<td class="text-sm px-4 w-1/4 text-ellipsis">{user.lastName}</td>
-						<td class="text-sm px-4 w-1/4 text-ellipsis">
-							<div class="container flex flex-wrap mx-auto justify-center">
-								{#if user.externalPath}
-									<Check size="16" />
-								{:else}
-									<Close size="16" />
-								{/if}
-							</div>
-						</td>
-						<td class="text-sm px-4 w-1/4 text-ellipsis">
-							{#if !isDeleted(user)}
-								<button
-									on:click={() => editUserHandler(user)}
-									class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
-								>
-									<PencilOutline size="16" />
-								</button>
-								{#if user.id !== data.user.id}
-									<button
-										on:click={() => deleteUserHandler(user)}
-										class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
-									>
-										<TrashCanOutline size="16" />
-									</button>
-								{/if}
-							{/if}
-							{#if isDeleted(user)}
-								<button
-									on:click={() => restoreUserHandler(user)}
-									class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
-									title={`scheduled removal on ${getDeleteDate(user)}`}
-								>
-									<DeleteRestore size="16" />
-								</button>
-							{/if}
-						</td>
-					</tr>
-				{/each}
-			{/if}
-		</tbody>
-	</table>
+  <table class="text-left w-full my-5 sm:block hidden">
+    <thead
+      class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
+    >
+      <tr class="flex w-full place-items-center">
+        <th class="text-center w-1/4 font-medium text-sm">Email</th>
+        <th class="text-center w-1/4 font-medium text-sm">First name</th>
+        <th class="text-center w-1/4 font-medium text-sm">Last name</th>
+        <th class="text-center w-1/4 font-medium text-sm">Can import</th>
+        <th class="text-center w-1/4 font-medium text-sm">Action</th>
+      </tr>
+    </thead>
+    <tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray">
+      {#if allUsers}
+        {#each allUsers as user, i}
+          <tr
+            class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
+              isDeleted(user)
+                ? 'bg-red-300 dark:bg-red-900'
+                : i % 2 == 0
+                ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+                : 'bg-immich-bg dark:bg-immich-dark-gray/50'
+            }`}
+          >
+            <td class="text-sm px-4 w-1/4 text-ellipsis">{user.email}</td>
+            <td class="text-sm px-4 w-1/4 text-ellipsis">{user.firstName}</td>
+            <td class="text-sm px-4 w-1/4 text-ellipsis">{user.lastName}</td>
+            <td class="text-sm px-4 w-1/4 text-ellipsis">
+              <div class="container flex flex-wrap mx-auto justify-center">
+                {#if user.externalPath}
+                  <Check size="16" />
+                {:else}
+                  <Close size="16" />
+                {/if}
+              </div>
+            </td>
+            <td class="text-sm px-4 w-1/4 text-ellipsis">
+              {#if !isDeleted(user)}
+                <button
+                  on:click={() => editUserHandler(user)}
+                  class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
+                >
+                  <PencilOutline size="16" />
+                </button>
+                {#if user.id !== data.user.id}
+                  <button
+                    on:click={() => deleteUserHandler(user)}
+                    class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
+                  >
+                    <TrashCanOutline size="16" />
+                  </button>
+                {/if}
+              {/if}
+              {#if isDeleted(user)}
+                <button
+                  on:click={() => restoreUserHandler(user)}
+                  class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
+                  title={`scheduled removal on ${getDeleteDate(user)}`}
+                >
+                  <DeleteRestore size="16" />
+                </button>
+              {/if}
+            </td>
+          </tr>
+        {/each}
+      {/if}
+    </tbody>
+  </table>
 
-	<table class="text-left w-full my-5 block sm:hidden">
-		<thead
-			class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
-		>
-			<tr class="flex w-full place-items-center">
-				<th class="text-center w-1/2 font-medium text-sm flex justify-around">
-					<span>Name</span>
-					<span>Email</span>
-				</th>
-				<th class="text-center w-1/2 font-medium text-sm">Action</th>
-			</tr>
-		</thead>
-		<tbody
-			class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray"
-		>
-			{#if allUsers}
-				{#each allUsers as user, i}
-					<tr
-						class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
-							isDeleted(user)
-								? 'bg-red-300 dark:bg-red-900'
-								: i % 2 == 0
-								? 'bg-immich-gray dark:bg-immich-dark-gray/75'
-								: 'bg-immich-bg dark:bg-immich-dark-gray/50'
-						}`}
-					>
-						<td class="text-sm px-4 w-2/3 text-ellipsis">
-							<span>{user.firstName} {user.lastName}</span>
-							<span>{user.email}</span>
-						</td>
-						<td class="text-sm px-4 w-1/3 text-ellipsis">
-							{#if !isDeleted(user)}
-								<button
-									on:click={() => editUserHandler(user)}
-									class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 max-sm:mb-1 transition-all duration-150 hover:bg-immich-primary/75"
-								>
-									<PencilOutline size="16" />
-								</button>
-								<button
-									on:click={() => deleteUserHandler(user)}
-									class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 transition-all duration-150 hover:bg-immich-primary/75"
-								>
-									<TrashCanOutline size="16" />
-								</button>
-							{/if}
-							{#if isDeleted(user)}
-								<button
-									on:click={() => restoreUserHandler(user)}
-									class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 transition-all duration-150 hover:bg-immich-primary/75"
-									title={`scheduled removal on ${getDeleteDate(user)}`}
-								>
-									<DeleteRestore size="16" />
-								</button>
-							{/if}
-						</td>
-					</tr>
-				{/each}
-			{/if}
-		</tbody>
-	</table>
+  <table class="text-left w-full my-5 block sm:hidden">
+    <thead
+      class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
+    >
+      <tr class="flex w-full place-items-center">
+        <th class="text-center w-1/2 font-medium text-sm flex justify-around">
+          <span>Name</span>
+          <span>Email</span>
+        </th>
+        <th class="text-center w-1/2 font-medium text-sm">Action</th>
+      </tr>
+    </thead>
+    <tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray">
+      {#if allUsers}
+        {#each allUsers as user, i}
+          <tr
+            class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
+              isDeleted(user)
+                ? 'bg-red-300 dark:bg-red-900'
+                : i % 2 == 0
+                ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+                : 'bg-immich-bg dark:bg-immich-dark-gray/50'
+            }`}
+          >
+            <td class="text-sm px-4 w-2/3 text-ellipsis">
+              <span>{user.firstName} {user.lastName}</span>
+              <span>{user.email}</span>
+            </td>
+            <td class="text-sm px-4 w-1/3 text-ellipsis">
+              {#if !isDeleted(user)}
+                <button
+                  on:click={() => editUserHandler(user)}
+                  class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 max-sm:mb-1 transition-all duration-150 hover:bg-immich-primary/75"
+                >
+                  <PencilOutline size="16" />
+                </button>
+                <button
+                  on:click={() => deleteUserHandler(user)}
+                  class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 transition-all duration-150 hover:bg-immich-primary/75"
+                >
+                  <TrashCanOutline size="16" />
+                </button>
+              {/if}
+              {#if isDeleted(user)}
+                <button
+                  on:click={() => restoreUserHandler(user)}
+                  class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 transition-all duration-150 hover:bg-immich-primary/75"
+                  title={`scheduled removal on ${getDeleteDate(user)}`}
+                >
+                  <DeleteRestore size="16" />
+                </button>
+              {/if}
+            </td>
+          </tr>
+        {/each}
+      {/if}
+    </tbody>
+  </table>
 
-	<Button size="sm" on:click={() => (shouldShowCreateUserForm = true)}>Create user</Button>
+  <Button size="sm" on:click={() => (shouldShowCreateUserForm = true)}>Create user</Button>
 </section>
diff --git a/web/src/routes/auth/change-password/+page.server.ts b/web/src/routes/auth/change-password/+page.server.ts
index b7ee95ded..774f2f0b0 100644
--- a/web/src/routes/auth/change-password/+page.server.ts
+++ b/web/src/routes/auth/change-password/+page.server.ts
@@ -3,16 +3,16 @@ import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { user } }) => {
-	if (!user) {
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	} else if (!user.shouldChangePassword) {
-		throw redirect(302, AppRoute.PHOTOS);
-	}
+  if (!user) {
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  } else if (!user.shouldChangePassword) {
+    throw redirect(302, AppRoute.PHOTOS);
+  }
 
-	return {
-		user,
-		meta: {
-			title: 'Change Password'
-		}
-	};
+  return {
+    user,
+    meta: {
+      title: 'Change Password',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/auth/change-password/+page.svelte b/web/src/routes/auth/change-password/+page.svelte
index 993f8c68f..f515e1d44 100644
--- a/web/src/routes/auth/change-password/+page.svelte
+++ b/web/src/routes/auth/change-password/+page.svelte
@@ -1,28 +1,28 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import ChangePasswordForm from '$lib/components/forms/change-password-form.svelte';
-	import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
-	import { AppRoute } from '$lib/constants';
-	import type { PageData } from './$types';
+  import { goto } from '$app/navigation';
+  import ChangePasswordForm from '$lib/components/forms/change-password-form.svelte';
+  import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
+  import { AppRoute } from '$lib/constants';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
+  export let data: PageData;
 
-	const onSuccessHandler = async () => {
-		await fetch(AppRoute.AUTH_LOGOUT, { method: 'POST' });
+  const onSuccessHandler = async () => {
+    await fetch(AppRoute.AUTH_LOGOUT, { method: 'POST' });
 
-		goto(AppRoute.AUTH_LOGIN);
-	};
+    goto(AppRoute.AUTH_LOGIN);
+  };
 </script>
 
 <FullscreenContainer title={data.meta.title}>
-	<p slot="message">
-		Hi {data.user.firstName}
-		{data.user.lastName} ({data.user.email}),
-		<br />
-		<br />
-		This is either the first time you are signing into the system or a request has been made to change
-		your password. Please enter the new password below.
-	</p>
+  <p slot="message">
+    Hi {data.user.firstName}
+    {data.user.lastName} ({data.user.email}),
+    <br />
+    <br />
+    This is either the first time you are signing into the system or a request has been made to change your password. Please
+    enter the new password below.
+  </p>
 
-	<ChangePasswordForm user={data.user} on:success={onSuccessHandler} />
+  <ChangePasswordForm user={data.user} on:success={onSuccessHandler} />
 </FullscreenContainer>
diff --git a/web/src/routes/auth/login/+page.server.ts b/web/src/routes/auth/login/+page.server.ts
index 3d42639de..5e10dcd55 100644
--- a/web/src/routes/auth/login/+page.server.ts
+++ b/web/src/routes/auth/login/+page.server.ts
@@ -1,34 +1,34 @@
 import { AppRoute } from '$lib/constants';
-import { redirect } from '@sveltejs/kit';
 import type { OAuthConfigResponseDto } from '@api';
+import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ locals: { api } }) => {
-	const { data } = await api.userApi.getUserCount({ admin: true });
-	if (data.userCount === 0) {
-		// Admin not registered
-		throw redirect(302, AppRoute.AUTH_REGISTER);
-	}
+  const { data } = await api.userApi.getUserCount({ admin: true });
+  if (data.userCount === 0) {
+    // Admin not registered
+    throw redirect(302, AppRoute.AUTH_REGISTER);
+  }
 
-	let authConfig: OAuthConfigResponseDto = {
-		passwordLoginEnabled: true,
-		enabled: false
-	};
+  let authConfig: OAuthConfigResponseDto = {
+    passwordLoginEnabled: true,
+    enabled: false,
+  };
 
-	try {
-		// TODO: Figure out how to get correct redirect URI server-side.
-		const { data } = await api.oauthApi.generateConfig({ oAuthConfigDto: { redirectUri: '/' } });
-		data.url = undefined;
+  try {
+    // TODO: Figure out how to get correct redirect URI server-side.
+    const { data } = await api.oauthApi.generateConfig({ oAuthConfigDto: { redirectUri: '/' } });
+    data.url = undefined;
 
-		authConfig = data;
-	} catch (err) {
-		console.error('[ERROR] login/+page.server.ts:', err);
-	}
+    authConfig = data;
+  } catch (err) {
+    console.error('[ERROR] login/+page.server.ts:', err);
+  }
 
-	return {
-		authConfig,
-		meta: {
-			title: 'Login'
-		}
-	};
+  return {
+    authConfig,
+    meta: {
+      title: 'Login',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/auth/login/+page.svelte b/web/src/routes/auth/login/+page.svelte
index 50e4ea22d..e958864fb 100644
--- a/web/src/routes/auth/login/+page.svelte
+++ b/web/src/routes/auth/login/+page.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import LoginForm from '$lib/components/forms/login-form.svelte';
-	import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
-	import { AppRoute } from '$lib/constants';
-	import { loginPageMessage } from '$lib/constants';
-	import type { PageData } from './$types';
+  import { goto } from '$app/navigation';
+  import LoginForm from '$lib/components/forms/login-form.svelte';
+  import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { loginPageMessage } from '$lib/constants';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
+  export let data: PageData;
 </script>
 
 <FullscreenContainer title={data.meta.title} showMessage={!!loginPageMessage}>
-	<p slot="message">
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html loginPageMessage}
-	</p>
+  <p slot="message">
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    {@html loginPageMessage}
+  </p>
 
-	<LoginForm
-		authConfig={data.authConfig}
-		on:success={() => goto(AppRoute.PHOTOS, { invalidateAll: true })}
-		on:first-login={() => goto(AppRoute.AUTH_CHANGE_PASSWORD)}
-	/>
+  <LoginForm
+    authConfig={data.authConfig}
+    on:success={() => goto(AppRoute.PHOTOS, { invalidateAll: true })}
+    on:first-login={() => goto(AppRoute.AUTH_CHANGE_PASSWORD)}
+  />
 </FullscreenContainer>
diff --git a/web/src/routes/auth/logout/+server.ts b/web/src/routes/auth/logout/+server.ts
index a02b91538..dff2627b8 100644
--- a/web/src/routes/auth/logout/+server.ts
+++ b/web/src/routes/auth/logout/+server.ts
@@ -1,12 +1,12 @@
-import { json } from '@sveltejs/kit';
 import { api } from '@api';
 import type { RequestHandler } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
 
 export const POST = (async ({ cookies }) => {
-	api.removeAccessToken();
+  api.removeAccessToken();
 
-	cookies.delete('immich_auth_type', { path: '/' });
-	cookies.delete('immich_access_token', { path: '/' });
+  cookies.delete('immich_auth_type', { path: '/' });
+  cookies.delete('immich_access_token', { path: '/' });
 
-	return json({ ok: true });
+  return json({ ok: true });
 }) satisfies RequestHandler;
diff --git a/web/src/routes/auth/register/+page.server.ts b/web/src/routes/auth/register/+page.server.ts
index 3b564e3cd..85b4d9bc7 100644
--- a/web/src/routes/auth/register/+page.server.ts
+++ b/web/src/routes/auth/register/+page.server.ts
@@ -1,17 +1,17 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { AppRoute } from '$lib/constants';
 
 export const load = (async ({ locals: { api } }) => {
-	const { data } = await api.userApi.getUserCount({ admin: true });
-	if (data.userCount != 0) {
-		// Admin has been registered, redirect to login
-		throw redirect(302, AppRoute.AUTH_LOGIN);
-	}
+  const { data } = await api.userApi.getUserCount({ admin: true });
+  if (data.userCount != 0) {
+    // Admin has been registered, redirect to login
+    throw redirect(302, AppRoute.AUTH_LOGIN);
+  }
 
-	return {
-		meta: {
-			title: 'Admin Registration'
-		}
-	};
+  return {
+    meta: {
+      title: 'Admin Registration',
+    },
+  };
 }) satisfies PageServerLoad;
diff --git a/web/src/routes/auth/register/+page.svelte b/web/src/routes/auth/register/+page.svelte
index a711e2877..c5db69f04 100644
--- a/web/src/routes/auth/register/+page.svelte
+++ b/web/src/routes/auth/register/+page.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import AdminRegistrationForm from '$lib/components/forms/admin-registration-form.svelte';
-	import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
-	import type { PageData } from './$types';
+  import AdminRegistrationForm from '$lib/components/forms/admin-registration-form.svelte';
+  import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
+  import type { PageData } from './$types';
 
-	export let data: PageData;
+  export let data: PageData;
 </script>
 
 <FullscreenContainer title={data.meta.title}>
-	<p slot="message">
-		Since you are the first user on the system, you will be assigned as the Admin and are
-		responsible for administrative tasks, and additional users will be created by you.
-	</p>
+  <p slot="message">
+    Since you are the first user on the system, you will be assigned as the Admin and are responsible for administrative
+    tasks, and additional users will be created by you.
+  </p>
 
-	<AdminRegistrationForm />
+  <AdminRegistrationForm />
 </FullscreenContainer>
diff --git a/web/src/test-data/factories/album-factory.ts b/web/src/test-data/factories/album-factory.ts
index fc0861d21..1ea728444 100644
--- a/web/src/test-data/factories/album-factory.ts
+++ b/web/src/test-data/factories/album-factory.ts
@@ -4,15 +4,15 @@ import { Sync } from 'factory.ts';
 import { userFactory } from './user-factory';
 
 export const albumFactory = Sync.makeFactory<AlbumResponseDto>({
-	albumName: Sync.each(() => faker.commerce.product()),
-	albumThumbnailAssetId: null,
-	assetCount: Sync.each((i) => i % 5),
-	assets: [],
-	createdAt: Sync.each(() => faker.date.past().toISOString()),
-	updatedAt: Sync.each(() => faker.date.past().toISOString()),
-	id: Sync.each(() => faker.datatype.uuid()),
-	ownerId: Sync.each(() => faker.datatype.uuid()),
-	owner: userFactory.build(),
-	shared: false,
-	sharedUsers: []
+  albumName: Sync.each(() => faker.commerce.product()),
+  albumThumbnailAssetId: null,
+  assetCount: Sync.each((i) => i % 5),
+  assets: [],
+  createdAt: Sync.each(() => faker.date.past().toISOString()),
+  updatedAt: Sync.each(() => faker.date.past().toISOString()),
+  id: Sync.each(() => faker.datatype.uuid()),
+  ownerId: Sync.each(() => faker.datatype.uuid()),
+  owner: userFactory.build(),
+  shared: false,
+  sharedUsers: [],
 });
diff --git a/web/src/test-data/factories/user-factory.ts b/web/src/test-data/factories/user-factory.ts
index 79380b061..ebf280159 100644
--- a/web/src/test-data/factories/user-factory.ts
+++ b/web/src/test-data/factories/user-factory.ts
@@ -3,17 +3,17 @@ import { faker } from '@faker-js/faker';
 import { Sync } from 'factory.ts';
 
 export const userFactory = Sync.makeFactory<UserResponseDto>({
-	id: Sync.each(() => faker.datatype.uuid()),
-	email: Sync.each(() => faker.internet.email()),
-	firstName: Sync.each(() => faker.name.firstName()),
-	lastName: Sync.each(() => faker.name.lastName()),
-	storageLabel: Sync.each(() => faker.random.alphaNumeric()),
-	externalPath: Sync.each(() => faker.random.alphaNumeric()),
-	profileImagePath: '',
-	shouldChangePassword: Sync.each(() => faker.datatype.boolean()),
-	isAdmin: true,
-	createdAt: Sync.each(() => faker.date.past().toISOString()),
-	deletedAt: null,
-	updatedAt: Sync.each(() => faker.date.past().toISOString()),
-	oauthId: ''
+  id: Sync.each(() => faker.datatype.uuid()),
+  email: Sync.each(() => faker.internet.email()),
+  firstName: Sync.each(() => faker.name.firstName()),
+  lastName: Sync.each(() => faker.name.lastName()),
+  storageLabel: Sync.each(() => faker.random.alphaNumeric()),
+  externalPath: Sync.each(() => faker.random.alphaNumeric()),
+  profileImagePath: '',
+  shouldChangePassword: Sync.each(() => faker.datatype.boolean()),
+  isAdmin: true,
+  createdAt: Sync.each(() => faker.date.past().toISOString()),
+  deletedAt: null,
+  updatedAt: Sync.each(() => faker.date.past().toISOString()),
+  oauthId: '',
 });
diff --git a/web/svelte.config.js b/web/svelte.config.js
index 283f01015..1bb1dfa13 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -1,13 +1,13 @@
-import preprocess from 'svelte-preprocess';
 import adapter from '@sveltejs/adapter-node';
+import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: preprocess(),
+  preprocess: preprocess(),
 
-	kit: {
-		adapter: adapter({ out: 'build' })
-	}
+  kit: {
+    adapter: adapter({ out: 'build' }),
+  },
 };
 
 export default config;
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index d1ed4c5f3..acb5bae30 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -1,29 +1,29 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
-	darkMode: 'class',
-	theme: {
-		extend: {
-			colors: {
-				// Light Theme
-				'immich-primary': '#4250af',
-				'immich-bg': 'white',
-				'immich-fg': 'black',
-				'immich-gray': '#F6F6F4',
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        // Light Theme
+        'immich-primary': '#4250af',
+        'immich-bg': 'white',
+        'immich-fg': 'black',
+        'immich-gray': '#F6F6F4',
 
-				// Dark Theme
-				'immich-dark-primary': '#adcbfa',
-				'immich-dark-bg': 'black',
-				'immich-dark-fg': '#e5e7eb',
-				'immich-dark-gray': '#212121'
-			},
-			fontFamily: {
-				'immich-title': ['Snowburst One', 'cursive']
-			},
-			spacing: {
-				18: '4.5rem'
-			}
-		}
-	},
-	plugins: []
+        // Dark Theme
+        'immich-dark-primary': '#adcbfa',
+        'immich-dark-bg': 'black',
+        'immich-dark-fg': '#e5e7eb',
+        'immich-dark-gray': '#212121',
+      },
+      fontFamily: {
+        'immich-title': ['Snowburst One', 'cursive'],
+      },
+      spacing: {
+        18: '4.5rem',
+      },
+    },
+  },
+  plugins: [],
 };
diff --git a/web/vite.config.js b/web/vite.config.js
index 474a4219d..cc520062a 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -3,26 +3,26 @@ import path from 'path';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-	resolve: {
-		alias: {
-			'xmlhttprequest-ssl': './node_modules/engine.io-client/lib/xmlhttprequest.js',
-			'@api': path.resolve('./src/api')
-		}
-	},
-	server: {
-		// connect to a remote backend during web-only development
-		proxy: {
-			'/api': {
-				target: process.env.PUBLIC_IMMICH_SERVER_URL,
-				secure: true,
-				changeOrigin: true,
-				logLevel: 'debug',
-				rewrite: (path) => path.replace(/^\/api/, ''),
-				ws: true
-			}
-		}
-	},
-	plugins: [sveltekit()]
+  resolve: {
+    alias: {
+      'xmlhttprequest-ssl': './node_modules/engine.io-client/lib/xmlhttprequest.js',
+      '@api': path.resolve('./src/api'),
+    },
+  },
+  server: {
+    // connect to a remote backend during web-only development
+    proxy: {
+      '/api': {
+        target: process.env.PUBLIC_IMMICH_SERVER_URL,
+        secure: true,
+        changeOrigin: true,
+        logLevel: 'debug',
+        rewrite: (path) => path.replace(/^\/api/, ''),
+        ws: true,
+      },
+    },
+  },
+  plugins: [sveltekit()],
 };
 
 export default config;

From d69fa3ceae05a63a6a6ec5054475550a5f06db9f Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Sat, 1 Jul 2023 14:27:34 -0400
Subject: [PATCH 29/53] refactor(server): guards, decorators, and utils (#3060)

---
 server/e2e/album.e2e-spec.ts                  |   2 +-
 .../domain/album/dto/album-add-users.dto.ts   |   2 +-
 .../src/domain/album/dto/album-create.dto.ts  |   2 +-
 .../src/domain/album/dto/album-update.dto.ts  |   2 +-
 server/src/domain/album/dto/get-albums.dto.ts |   3 +-
 server/src/domain/asset/dto/asset-ids.dto.ts  |   2 +-
 server/src/domain/asset/dto/download.dto.ts   |   2 +-
 server/src/domain/asset/dto/map-marker.dto.ts |   2 +-
 server/src/domain/domain.util.ts              |  35 ++++++
 server/src/domain/search/dto/search.dto.ts    |   2 +-
 .../src/domain/shared-link/shared-link.dto.ts |   2 +-
 server/src/domain/user/dto/create-user.dto.ts |   2 +-
 server/src/domain/user/dto/update-user.dto.ts |   2 +-
 .../immich/api-v1/album/album.controller.ts   |   7 +-
 .../immich/api-v1/album/album.service.spec.ts |   3 +-
 .../src/immich/api-v1/album/album.service.ts  |   3 +-
 .../immich/api-v1/album/dto/add-assets.dto.ts |   2 +-
 .../immich/api-v1/album/dto/add-users.dto.ts  |   2 +-
 .../api-v1/album/dto/remove-assets.dto.ts     |   2 +-
 .../immich/api-v1/asset/asset.controller.ts   |   5 +-
 .../api-v1/asset/dto/asset-search.dto.ts      |   2 +-
 .../api-v1/asset/dto/create-asset.dto.ts      |   2 +-
 .../asset/dto/get-asset-by-time-bucket.dto.ts |   2 +-
 .../dto/get-asset-count-by-time-bucket.dto.ts |   2 +-
 .../immich/api-v1/asset/dto/serve-file.dto.ts |   2 +-
 server/src/immich/app.guard.ts                | 118 ++++++++++++++++++
 server/src/immich/app.module.ts               |   6 +-
 server/src/immich/app.utils.ts                |  19 ++-
 .../immich/config/asset-upload.config.spec.ts |   2 +-
 .../src/immich/config/asset-upload.config.ts  |   6 +-
 .../profile-image-upload.config.spec.ts       |   2 +-
 .../config/profile-image-upload.config.ts     |   6 +-
 .../immich/controllers/album.controller.ts    |   5 +-
 .../immich/controllers/api-key.controller.ts  |   5 +-
 .../immich/controllers/asset.controller.ts    |   6 +-
 .../src/immich/controllers/auth.controller.ts |   5 +-
 .../src/immich/controllers/job.controller.ts  |   4 +-
 .../immich/controllers/oauth.controller.ts    |   5 +-
 .../immich/controllers/partner.controller.ts  |   7 +-
 .../immich/controllers/person.controller.ts   |   5 +-
 .../immich/controllers/search.controller.ts   |   5 +-
 .../controllers/server-info.controller.ts     |   4 +-
 .../controllers/shared-link.controller.ts     |   5 +-
 .../controllers/system-config.controller.ts   |   4 +-
 .../src/immich/controllers/tag.controller.ts  |   6 +-
 .../src/immich/controllers/user.controller.ts |   6 +-
 .../immich/decorators/auth-user.decorator.ts  |  25 ----
 .../decorators/authenticated.decorator.ts     |  46 -------
 .../decorators/use-validation.decorator.ts    |  12 --
 .../decorators/validate-uuid.decorator.ts     |  17 ---
 server/src/immich/middlewares/auth.guard.ts   |  46 -------
 .../src/immich/utils/path-form-data.util.ts   |   3 -
 server/src/immich/utils/transform.util.ts     |  18 ---
 server/test/test-utils.ts                     |   6 +-
 54 files changed, 243 insertions(+), 255 deletions(-)
 create mode 100644 server/src/immich/app.guard.ts
 delete mode 100644 server/src/immich/decorators/auth-user.decorator.ts
 delete mode 100644 server/src/immich/decorators/authenticated.decorator.ts
 delete mode 100644 server/src/immich/decorators/use-validation.decorator.ts
 delete mode 100644 server/src/immich/decorators/validate-uuid.decorator.ts
 delete mode 100644 server/src/immich/middlewares/auth.guard.ts
 delete mode 100644 server/src/immich/utils/path-form-data.util.ts
 delete mode 100644 server/src/immich/utils/transform.util.ts

diff --git a/server/e2e/album.e2e-spec.ts b/server/e2e/album.e2e-spec.ts
index c1a877e4c..bf0006d91 100644
--- a/server/e2e/album.e2e-spec.ts
+++ b/server/e2e/album.e2e-spec.ts
@@ -1,13 +1,13 @@
 import {
   AlbumResponseDto,
   AuthService,
+  AuthUserDto,
   CreateAlbumDto,
   SharedLinkCreateDto,
   SharedLinkResponseDto,
   UserService,
 } from '@app/domain';
 import { AppModule } from '@app/immich/app.module';
-import { AuthUserDto } from '@app/immich/decorators/auth-user.decorator';
 import { SharedLinkType } from '@app/infra/entities';
 import { INestApplication } from '@nestjs/common';
 import { Test, TestingModule } from '@nestjs/testing';
diff --git a/server/src/domain/album/dto/album-add-users.dto.ts b/server/src/domain/album/dto/album-add-users.dto.ts
index 39ecb7b50..f238b9a05 100644
--- a/server/src/domain/album/dto/album-add-users.dto.ts
+++ b/server/src/domain/album/dto/album-add-users.dto.ts
@@ -1,5 +1,5 @@
-import { ValidateUUID } from '@app/immich/decorators/validate-uuid.decorator';
 import { ArrayNotEmpty } from 'class-validator';
+import { ValidateUUID } from '../../domain.util';
 
 export class AddUsersDto {
   @ValidateUUID({ each: true })
diff --git a/server/src/domain/album/dto/album-create.dto.ts b/server/src/domain/album/dto/album-create.dto.ts
index 2edef3457..3d9968331 100644
--- a/server/src/domain/album/dto/album-create.dto.ts
+++ b/server/src/domain/album/dto/album-create.dto.ts
@@ -1,6 +1,6 @@
-import { ValidateUUID } from '@app/immich/decorators/validate-uuid.decorator';
 import { ApiProperty } from '@nestjs/swagger';
 import { IsNotEmpty, IsString } from 'class-validator';
+import { ValidateUUID } from '../../domain.util';
 
 export class CreateAlbumDto {
   @IsNotEmpty()
diff --git a/server/src/domain/album/dto/album-update.dto.ts b/server/src/domain/album/dto/album-update.dto.ts
index 9388eac67..9bbe16e3b 100644
--- a/server/src/domain/album/dto/album-update.dto.ts
+++ b/server/src/domain/album/dto/album-update.dto.ts
@@ -1,6 +1,6 @@
-import { ValidateUUID } from '@app/immich/decorators/validate-uuid.decorator';
 import { ApiProperty } from '@nestjs/swagger';
 import { IsOptional } from 'class-validator';
+import { ValidateUUID } from '../../domain.util';
 
 export class UpdateAlbumDto {
   @IsOptional()
diff --git a/server/src/domain/album/dto/get-albums.dto.ts b/server/src/domain/album/dto/get-albums.dto.ts
index 6a7647881..ebe2080bb 100644
--- a/server/src/domain/album/dto/get-albums.dto.ts
+++ b/server/src/domain/album/dto/get-albums.dto.ts
@@ -1,8 +1,7 @@
-import { ValidateUUID } from '@app/immich/decorators/validate-uuid.decorator';
-import { toBoolean } from '@app/immich/utils/transform.util';
 import { ApiProperty } from '@nestjs/swagger';
 import { Transform } from 'class-transformer';
 import { IsBoolean, IsOptional } from 'class-validator';
+import { toBoolean, ValidateUUID } from '../../domain.util';
 
 export class GetAlbumsDto {
   @IsOptional()
diff --git a/server/src/domain/asset/dto/asset-ids.dto.ts b/server/src/domain/asset/dto/asset-ids.dto.ts
index 5438e7a63..6d2c58528 100644
--- a/server/src/domain/asset/dto/asset-ids.dto.ts
+++ b/server/src/domain/asset/dto/asset-ids.dto.ts
@@ -1,4 +1,4 @@
-import { ValidateUUID } from '@app/immich/decorators/validate-uuid.decorator';
+import { ValidateUUID } from '../../domain.util';
 
 export class AssetIdsDto {
   @ValidateUUID({ each: true })
diff --git a/server/src/domain/asset/dto/download.dto.ts b/server/src/domain/asset/dto/download.dto.ts
index cb6b8f7dd..c2cf85685 100644
--- a/server/src/domain/asset/dto/download.dto.ts
+++ b/server/src/domain/asset/dto/download.dto.ts
@@ -1,6 +1,6 @@
-import { ValidateUUID } from '@app/immich/decorators/validate-uuid.decorator';
 import { ApiProperty } from '@nestjs/swagger';
 import { IsInt, IsOptional, IsPositive } from 'class-validator';
+import { ValidateUUID } from '../../domain.util';
 
 export class DownloadDto {
   @ValidateUUID({ each: true, optional: true })
diff --git a/server/src/domain/asset/dto/map-marker.dto.ts b/server/src/domain/asset/dto/map-marker.dto.ts
index a8e3b7924..682cb2436 100644
--- a/server/src/domain/asset/dto/map-marker.dto.ts
+++ b/server/src/domain/asset/dto/map-marker.dto.ts
@@ -1,7 +1,7 @@
-import { toBoolean } from '@app/immich/utils/transform.util';
 import { ApiProperty } from '@nestjs/swagger';
 import { Transform, Type } from 'class-transformer';
 import { IsBoolean, IsDate, IsOptional } from 'class-validator';
+import { toBoolean } from '../../domain.util';
 
 export class MapMarkerDto {
   @ApiProperty()
diff --git a/server/src/domain/domain.util.ts b/server/src/domain/domain.util.ts
index 96fac353e..c5a6c45b8 100644
--- a/server/src/domain/domain.util.ts
+++ b/server/src/domain/domain.util.ts
@@ -1,4 +1,39 @@
+import { applyDecorators } from '@nestjs/common';
+import { ApiProperty } from '@nestjs/swagger';
+import { IsArray, IsNotEmpty, IsOptional, IsString, IsUUID } from 'class-validator';
 import { basename, extname } from 'node:path';
+import sanitize from 'sanitize-filename';
+
+export type Options = {
+  optional?: boolean;
+  each?: boolean;
+};
+
+export function ValidateUUID({ optional, each }: Options = { optional: false, each: false }) {
+  return applyDecorators(
+    IsUUID('4', { each }),
+    ApiProperty({ format: 'uuid' }),
+    optional ? IsOptional() : IsNotEmpty(),
+    each ? IsArray() : IsString(),
+  );
+}
+
+interface IValue {
+  value?: string;
+}
+
+export const toBoolean = ({ value }: IValue) => {
+  if (value == 'true') {
+    return true;
+  } else if (value == 'false') {
+    return false;
+  }
+  return value;
+};
+
+export const toEmail = ({ value }: IValue) => value?.toLowerCase();
+
+export const toSanitized = ({ value }: IValue) => sanitize((value || '').replace(/\./g, ''));
 
 export function getFileNameWithoutExtension(path: string): string {
   return basename(path, extname(path));
diff --git a/server/src/domain/search/dto/search.dto.ts b/server/src/domain/search/dto/search.dto.ts
index 5a11c68de..27eeb5272 100644
--- a/server/src/domain/search/dto/search.dto.ts
+++ b/server/src/domain/search/dto/search.dto.ts
@@ -1,7 +1,7 @@
-import { toBoolean } from '@app/immich/utils/transform.util';
 import { AssetType } from '@app/infra/entities';
 import { Transform } from 'class-transformer';
 import { IsArray, IsBoolean, IsEnum, IsNotEmpty, IsOptional, IsString } from 'class-validator';
+import { toBoolean } from '../../domain.util';
 
 export class SearchDto {
   @IsString()
diff --git a/server/src/domain/shared-link/shared-link.dto.ts b/server/src/domain/shared-link/shared-link.dto.ts
index 5aeef2967..982c1fbe0 100644
--- a/server/src/domain/shared-link/shared-link.dto.ts
+++ b/server/src/domain/shared-link/shared-link.dto.ts
@@ -2,7 +2,7 @@ import { SharedLinkType } from '@app/infra/entities';
 import { ApiProperty } from '@nestjs/swagger';
 import { Type } from 'class-transformer';
 import { IsBoolean, IsDate, IsEnum, IsOptional, IsString } from 'class-validator';
-import { ValidateUUID } from '../../immich/decorators/validate-uuid.decorator';
+import { ValidateUUID } from '../domain.util';
 
 export class SharedLinkCreateDto {
   @IsEnum(SharedLinkType)
diff --git a/server/src/domain/user/dto/create-user.dto.ts b/server/src/domain/user/dto/create-user.dto.ts
index 5951be831..afb5aec23 100644
--- a/server/src/domain/user/dto/create-user.dto.ts
+++ b/server/src/domain/user/dto/create-user.dto.ts
@@ -1,6 +1,6 @@
-import { toEmail, toSanitized } from '@app/immich/utils/transform.util';
 import { Transform } from 'class-transformer';
 import { IsEmail, IsNotEmpty, IsOptional, IsString } from 'class-validator';
+import { toEmail, toSanitized } from '../../domain.util';
 
 export class CreateUserDto {
   @IsEmail({ require_tld: false })
diff --git a/server/src/domain/user/dto/update-user.dto.ts b/server/src/domain/user/dto/update-user.dto.ts
index fca200ab2..7eb98f538 100644
--- a/server/src/domain/user/dto/update-user.dto.ts
+++ b/server/src/domain/user/dto/update-user.dto.ts
@@ -1,7 +1,7 @@
-import { toEmail, toSanitized } from '@app/immich/utils/transform.util';
 import { ApiProperty } from '@nestjs/swagger';
 import { Transform } from 'class-transformer';
 import { IsBoolean, IsEmail, IsNotEmpty, IsOptional, IsString, IsUUID } from 'class-validator';
+import { toEmail, toSanitized } from '../../domain.util';
 
 export class UpdateUserDto {
   @IsOptional()
diff --git a/server/src/immich/api-v1/album/album.controller.ts b/server/src/immich/api-v1/album/album.controller.ts
index 021cc04ce..ba6f195a2 100644
--- a/server/src/immich/api-v1/album/album.controller.ts
+++ b/server/src/immich/api-v1/album/album.controller.ts
@@ -1,10 +1,9 @@
-import { AlbumResponseDto } from '@app/domain';
+import { AlbumResponseDto, AuthUserDto } from '@app/domain';
 import { Body, Controller, Delete, Get, Param, Put } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
+import { Authenticated, AuthUser, SharedLinkRoute } from '../../app.guard';
+import { UseValidation } from '../../app.utils';
 import { UUIDParamDto } from '../../controllers/dto/uuid-param.dto';
-import { AuthUser, AuthUserDto } from '../../decorators/auth-user.decorator';
-import { Authenticated, SharedLinkRoute } from '../../decorators/authenticated.decorator';
-import { UseValidation } from '../../decorators/use-validation.decorator';
 import { AlbumService } from './album.service';
 import { AddAssetsDto } from './dto/add-assets.dto';
 import { RemoveAssetsDto } from './dto/remove-assets.dto';
diff --git a/server/src/immich/api-v1/album/album.service.spec.ts b/server/src/immich/api-v1/album/album.service.spec.ts
index 1215e6990..89275b968 100644
--- a/server/src/immich/api-v1/album/album.service.spec.ts
+++ b/server/src/immich/api-v1/album/album.service.spec.ts
@@ -1,8 +1,7 @@
-import { AlbumResponseDto, mapUser } from '@app/domain';
+import { AlbumResponseDto, AuthUserDto, mapUser } from '@app/domain';
 import { AlbumEntity, UserEntity } from '@app/infra/entities';
 import { ForbiddenException, NotFoundException } from '@nestjs/common';
 import { userEntityStub } from '@test';
-import { AuthUserDto } from '../../decorators/auth-user.decorator';
 import { IAlbumRepository } from './album-repository';
 import { AlbumService } from './album.service';
 import { AddAssetsResponseDto } from './response-dto/add-assets-response.dto';
diff --git a/server/src/immich/api-v1/album/album.service.ts b/server/src/immich/api-v1/album/album.service.ts
index 5f7fc834e..cb433bcbd 100644
--- a/server/src/immich/api-v1/album/album.service.ts
+++ b/server/src/immich/api-v1/album/album.service.ts
@@ -1,7 +1,6 @@
-import { AlbumResponseDto, mapAlbum } from '@app/domain';
+import { AlbumResponseDto, AuthUserDto, mapAlbum } from '@app/domain';
 import { AlbumEntity } from '@app/infra/entities';
 import { BadRequestException, ForbiddenException, Inject, Injectable, Logger, NotFoundException } from '@nestjs/common';
-import { AuthUserDto } from '../../decorators/auth-user.decorator';
 import { IAlbumRepository } from './album-repository';
 import { AddAssetsDto } from './dto/add-assets.dto';
 import { RemoveAssetsDto } from './dto/remove-assets.dto';
diff --git a/server/src/immich/api-v1/album/dto/add-assets.dto.ts b/server/src/immich/api-v1/album/dto/add-assets.dto.ts
index f5c13d677..9f66fab3d 100644
--- a/server/src/immich/api-v1/album/dto/add-assets.dto.ts
+++ b/server/src/immich/api-v1/album/dto/add-assets.dto.ts
@@ -1,4 +1,4 @@
-import { ValidateUUID } from '@app/immich/decorators/validate-uuid.decorator';
+import { ValidateUUID } from '@app/domain';
 
 export class AddAssetsDto {
   @ValidateUUID({ each: true })
diff --git a/server/src/immich/api-v1/album/dto/add-users.dto.ts b/server/src/immich/api-v1/album/dto/add-users.dto.ts
index 921dac7ef..3ff76a822 100644
--- a/server/src/immich/api-v1/album/dto/add-users.dto.ts
+++ b/server/src/immich/api-v1/album/dto/add-users.dto.ts
@@ -1,4 +1,4 @@
-import { ValidateUUID } from '@app/immich/decorators/validate-uuid.decorator';
+import { ValidateUUID } from '@app/domain';
 
 export class AddUsersDto {
   @ValidateUUID({ each: true })
diff --git a/server/src/immich/api-v1/album/dto/remove-assets.dto.ts b/server/src/immich/api-v1/album/dto/remove-assets.dto.ts
index 2782154bb..a663b0254 100644
--- a/server/src/immich/api-v1/album/dto/remove-assets.dto.ts
+++ b/server/src/immich/api-v1/album/dto/remove-assets.dto.ts
@@ -1,4 +1,4 @@
-import { ValidateUUID } from '@app/immich/decorators/validate-uuid.decorator';
+import { ValidateUUID } from '@app/domain';
 
 export class RemoveAssetsDto {
   @ValidateUUID({ each: true })
diff --git a/server/src/immich/api-v1/asset/asset.controller.ts b/server/src/immich/api-v1/asset/asset.controller.ts
index 53e323a0b..c2d3e6b39 100644
--- a/server/src/immich/api-v1/asset/asset.controller.ts
+++ b/server/src/immich/api-v1/asset/asset.controller.ts
@@ -1,4 +1,4 @@
-import { AssetResponseDto } from '@app/domain';
+import { AssetResponseDto, AuthUserDto } from '@app/domain';
 import {
   Body,
   Controller,
@@ -21,10 +21,9 @@ import {
 import { FileFieldsInterceptor } from '@nestjs/platform-express';
 import { ApiBody, ApiConsumes, ApiHeader, ApiOkResponse, ApiTags } from '@nestjs/swagger';
 import { Response as Res } from 'express';
+import { Authenticated, AuthUser, SharedLinkRoute } from '../../app.guard';
 import { assetUploadOption, ImmichFile } from '../../config/asset-upload.config';
 import { UUIDParamDto } from '../../controllers/dto/uuid-param.dto';
-import { AuthUser, AuthUserDto } from '../../decorators/auth-user.decorator';
-import { Authenticated, SharedLinkRoute } from '../../decorators/authenticated.decorator';
 import FileNotEmptyValidator from '../validation/file-not-empty-validator';
 import { AssetService } from './asset.service';
 import { AssetBulkUploadCheckDto } from './dto/asset-check.dto';
diff --git a/server/src/immich/api-v1/asset/dto/asset-search.dto.ts b/server/src/immich/api-v1/asset/dto/asset-search.dto.ts
index 8a908e746..a629c915c 100644
--- a/server/src/immich/api-v1/asset/dto/asset-search.dto.ts
+++ b/server/src/immich/api-v1/asset/dto/asset-search.dto.ts
@@ -1,7 +1,7 @@
+import { toBoolean } from '@app/domain';
 import { ApiProperty } from '@nestjs/swagger';
 import { Transform } from 'class-transformer';
 import { IsBoolean, IsNotEmpty, IsNumber, IsOptional, IsUUID } from 'class-validator';
-import { toBoolean } from '../../../utils/transform.util';
 
 export class AssetSearchDto {
   @IsOptional()
diff --git a/server/src/immich/api-v1/asset/dto/create-asset.dto.ts b/server/src/immich/api-v1/asset/dto/create-asset.dto.ts
index bf54d4ce3..76a24ee18 100644
--- a/server/src/immich/api-v1/asset/dto/create-asset.dto.ts
+++ b/server/src/immich/api-v1/asset/dto/create-asset.dto.ts
@@ -1,9 +1,9 @@
+import { toBoolean, toSanitized } from '@app/domain';
 import { AssetType } from '@app/infra/entities';
 import { ApiProperty } from '@nestjs/swagger';
 import { Transform } from 'class-transformer';
 import { IsBoolean, IsEnum, IsNotEmpty, IsOptional, IsString } from 'class-validator';
 import { ImmichFile } from '../../../config/asset-upload.config';
-import { toBoolean, toSanitized } from '../../../utils/transform.util';
 
 export class CreateAssetBase {
   @IsNotEmpty()
diff --git a/server/src/immich/api-v1/asset/dto/get-asset-by-time-bucket.dto.ts b/server/src/immich/api-v1/asset/dto/get-asset-by-time-bucket.dto.ts
index ad846751c..ddf2d2aa5 100644
--- a/server/src/immich/api-v1/asset/dto/get-asset-by-time-bucket.dto.ts
+++ b/server/src/immich/api-v1/asset/dto/get-asset-by-time-bucket.dto.ts
@@ -1,7 +1,7 @@
+import { toBoolean } from '@app/domain';
 import { ApiProperty } from '@nestjs/swagger';
 import { Transform } from 'class-transformer';
 import { IsBoolean, IsNotEmpty, IsOptional, IsUUID } from 'class-validator';
-import { toBoolean } from '../../../utils/transform.util';
 
 export class GetAssetByTimeBucketDto {
   @IsNotEmpty()
diff --git a/server/src/immich/api-v1/asset/dto/get-asset-count-by-time-bucket.dto.ts b/server/src/immich/api-v1/asset/dto/get-asset-count-by-time-bucket.dto.ts
index d4e6c3c45..f1f564a3b 100644
--- a/server/src/immich/api-v1/asset/dto/get-asset-count-by-time-bucket.dto.ts
+++ b/server/src/immich/api-v1/asset/dto/get-asset-count-by-time-bucket.dto.ts
@@ -1,7 +1,7 @@
+import { toBoolean } from '@app/domain';
 import { ApiProperty } from '@nestjs/swagger';
 import { Transform } from 'class-transformer';
 import { IsBoolean, IsNotEmpty, IsOptional, IsUUID } from 'class-validator';
-import { toBoolean } from '../../../utils/transform.util';
 
 export enum TimeGroupEnum {
   Day = 'day',
diff --git a/server/src/immich/api-v1/asset/dto/serve-file.dto.ts b/server/src/immich/api-v1/asset/dto/serve-file.dto.ts
index a4c01b07c..45ab4f2b4 100644
--- a/server/src/immich/api-v1/asset/dto/serve-file.dto.ts
+++ b/server/src/immich/api-v1/asset/dto/serve-file.dto.ts
@@ -1,7 +1,7 @@
+import { toBoolean } from '@app/domain';
 import { ApiProperty } from '@nestjs/swagger';
 import { Transform } from 'class-transformer';
 import { IsBoolean, IsOptional } from 'class-validator';
-import { toBoolean } from '../../../utils/transform.util';
 
 export class ServeFileDto {
   @IsOptional()
diff --git a/server/src/immich/app.guard.ts b/server/src/immich/app.guard.ts
new file mode 100644
index 000000000..f104fe7bd
--- /dev/null
+++ b/server/src/immich/app.guard.ts
@@ -0,0 +1,118 @@
+import { AuthService, AuthUserDto, IMMICH_API_KEY_NAME, LoginDetails } from '@app/domain';
+import {
+  applyDecorators,
+  CanActivate,
+  createParamDecorator,
+  ExecutionContext,
+  Injectable,
+  Logger,
+  SetMetadata,
+} from '@nestjs/common';
+import { Reflector } from '@nestjs/core';
+import { ApiBearerAuth, ApiCookieAuth, ApiQuery, ApiSecurity } from '@nestjs/swagger';
+import { Request } from 'express';
+import { UAParser } from 'ua-parser-js';
+
+export enum Metadata {
+  AUTH_ROUTE = 'auth_route',
+  ADMIN_ROUTE = 'admin_route',
+  SHARED_ROUTE = 'shared_route',
+  PUBLIC_SECURITY = 'public_security',
+}
+
+const adminDecorator = SetMetadata(Metadata.ADMIN_ROUTE, true);
+
+const sharedLinkDecorators = [
+  SetMetadata(Metadata.SHARED_ROUTE, true),
+  ApiQuery({ name: 'key', type: String, required: false }),
+];
+
+export interface AuthenticatedOptions {
+  admin?: boolean;
+  isShared?: boolean;
+}
+
+export const Authenticated = (options: AuthenticatedOptions = {}) => {
+  const decorators: MethodDecorator[] = [
+    ApiBearerAuth(),
+    ApiCookieAuth(),
+    ApiSecurity(IMMICH_API_KEY_NAME),
+    SetMetadata(Metadata.AUTH_ROUTE, true),
+  ];
+
+  if (options.admin) {
+    decorators.push(adminDecorator);
+  }
+
+  if (options.isShared) {
+    decorators.push(...sharedLinkDecorators);
+  }
+
+  return applyDecorators(...decorators);
+};
+
+export const PublicRoute = () =>
+  applyDecorators(SetMetadata(Metadata.AUTH_ROUTE, false), ApiSecurity(Metadata.PUBLIC_SECURITY));
+export const SharedLinkRoute = () => applyDecorators(...sharedLinkDecorators);
+export const AdminRoute = () => adminDecorator;
+
+export const AuthUser = createParamDecorator((data, ctx: ExecutionContext): AuthUserDto => {
+  return ctx.switchToHttp().getRequest<{ user: AuthUserDto }>().user;
+});
+
+export const GetLoginDetails = createParamDecorator((data, ctx: ExecutionContext): LoginDetails => {
+  const req = ctx.switchToHttp().getRequest();
+  const userAgent = UAParser(req.headers['user-agent']);
+
+  return {
+    clientIp: req.clientIp,
+    isSecure: req.secure,
+    deviceType: userAgent.browser.name || userAgent.device.type || req.headers.devicemodel || '',
+    deviceOS: userAgent.os.name || req.headers.devicetype || '',
+  };
+});
+
+export interface AuthRequest extends Request {
+  user?: AuthUserDto;
+}
+
+@Injectable()
+export class AppGuard implements CanActivate {
+  private logger = new Logger(AppGuard.name);
+
+  constructor(private reflector: Reflector, private authService: AuthService) {}
+
+  async canActivate(context: ExecutionContext): Promise<boolean> {
+    const targets = [context.getHandler(), context.getClass()];
+
+    const isAuthRoute = this.reflector.getAllAndOverride(Metadata.AUTH_ROUTE, targets);
+    const isAdminRoute = this.reflector.getAllAndOverride(Metadata.ADMIN_ROUTE, targets);
+    const isSharedRoute = this.reflector.getAllAndOverride(Metadata.SHARED_ROUTE, targets);
+
+    if (!isAuthRoute) {
+      return true;
+    }
+
+    const req = context.switchToHttp().getRequest<AuthRequest>();
+
+    const authDto = await this.authService.validate(req.headers, req.query as Record<string, string>);
+    if (!authDto) {
+      this.logger.warn(`Denied access to authenticated route: ${req.path}`);
+      return false;
+    }
+
+    if (authDto.isPublicUser && !isSharedRoute) {
+      this.logger.warn(`Denied access to non-shared route: ${req.path}`);
+      return false;
+    }
+
+    if (isAdminRoute && !authDto.isAdmin) {
+      this.logger.warn(`Denied access to admin only route: ${req.path}`);
+      return false;
+    }
+
+    req.user = authDto;
+
+    return true;
+  }
+}
diff --git a/server/src/immich/app.module.ts b/server/src/immich/app.module.ts
index f38f0f4d2..10f30a6b2 100644
--- a/server/src/immich/app.module.ts
+++ b/server/src/immich/app.module.ts
@@ -5,6 +5,7 @@ import { APP_GUARD } from '@nestjs/core';
 import { ScheduleModule } from '@nestjs/schedule';
 import { AlbumModule } from './api-v1/album/album.module';
 import { AssetModule } from './api-v1/asset/asset.module';
+import { AppGuard } from './app.guard';
 import { AppService } from './app.service';
 import {
   AlbumController,
@@ -23,7 +24,6 @@ import {
   TagController,
   UserController,
 } from './controllers';
-import { AuthGuard } from './middlewares/auth.guard';
 
 @Module({
   imports: [
@@ -52,8 +52,8 @@ import { AuthGuard } from './middlewares/auth.guard';
   ],
   providers: [
     //
-    { provide: APP_GUARD, useExisting: AuthGuard },
-    AuthGuard,
+    { provide: APP_GUARD, useExisting: AppGuard },
+    AppGuard,
     AppService,
   ],
 })
diff --git a/server/src/immich/app.utils.ts b/server/src/immich/app.utils.ts
index 8355964a8..d2d1c2456 100644
--- a/server/src/immich/app.utils.ts
+++ b/server/src/immich/app.utils.ts
@@ -15,12 +15,29 @@ import {
 } from '@nestjs/swagger';
 import { writeFileSync } from 'fs';
 import path from 'path';
-import { Metadata } from './decorators/authenticated.decorator';
+
+import { applyDecorators, UsePipes, ValidationPipe } from '@nestjs/common';
+import { Metadata } from './app.guard';
+
+export function UseValidation() {
+  return applyDecorators(
+    UsePipes(
+      new ValidationPipe({
+        transform: true,
+        whitelist: true,
+      }),
+    ),
+  );
+}
 
 export const asStreamableFile = ({ stream, type, length }: ImmichReadStream) => {
   return new StreamableFile(stream, { type, length });
 };
 
+export function patchFormData(latin1: string) {
+  return Buffer.from(latin1, 'latin1').toString('utf8');
+}
+
 function sortKeys<T extends object>(obj: T): T {
   if (!obj) {
     return obj;
diff --git a/server/src/immich/config/asset-upload.config.spec.ts b/server/src/immich/config/asset-upload.config.spec.ts
index 0eb9a31e4..24e7fcb2e 100644
--- a/server/src/immich/config/asset-upload.config.spec.ts
+++ b/server/src/immich/config/asset-upload.config.spec.ts
@@ -1,6 +1,6 @@
 import { Request } from 'express';
 import * as fs from 'fs';
-import { AuthRequest } from '../decorators/auth-user.decorator';
+import { AuthRequest } from '../app.guard';
 import { multerUtils } from './asset-upload.config';
 
 const { fileFilter, destination, filename } = multerUtils;
diff --git a/server/src/immich/config/asset-upload.config.ts b/server/src/immich/config/asset-upload.config.ts
index 714aca0d3..9f934d934 100644
--- a/server/src/immich/config/asset-upload.config.ts
+++ b/server/src/immich/config/asset-upload.config.ts
@@ -1,4 +1,4 @@
-import { isSidecarFileType, isSupportedFileType } from '@app/domain';
+import { AuthUserDto, isSidecarFileType, isSupportedFileType } from '@app/domain';
 import { StorageCore, StorageFolder } from '@app/domain/storage';
 import { BadRequestException, Logger, UnauthorizedException } from '@nestjs/common';
 import { MulterOptions } from '@nestjs/platform-express/multer/interfaces/multer-options.interface';
@@ -7,8 +7,8 @@ import { existsSync, mkdirSync } from 'fs';
 import { diskStorage, StorageEngine } from 'multer';
 import { extname } from 'path';
 import sanitize from 'sanitize-filename';
-import { AuthRequest, AuthUserDto } from '../decorators/auth-user.decorator';
-import { patchFormData } from '../utils/path-form-data.util';
+import { AuthRequest } from '../app.guard';
+import { patchFormData } from '../app.utils';
 
 export interface ImmichFile extends Express.Multer.File {
   /** sha1 hash of file */
diff --git a/server/src/immich/config/profile-image-upload.config.spec.ts b/server/src/immich/config/profile-image-upload.config.spec.ts
index 4d2a70653..06ac6814c 100644
--- a/server/src/immich/config/profile-image-upload.config.spec.ts
+++ b/server/src/immich/config/profile-image-upload.config.spec.ts
@@ -1,6 +1,6 @@
 import { Request } from 'express';
 import * as fs from 'fs';
-import { AuthRequest } from '../decorators/auth-user.decorator';
+import { AuthRequest } from '../app.guard';
 import { multerUtils } from './profile-image-upload.config';
 
 const { fileFilter, destination, filename } = multerUtils;
diff --git a/server/src/immich/config/profile-image-upload.config.ts b/server/src/immich/config/profile-image-upload.config.ts
index fc584a8d7..d56ed1170 100644
--- a/server/src/immich/config/profile-image-upload.config.ts
+++ b/server/src/immich/config/profile-image-upload.config.ts
@@ -1,12 +1,12 @@
-import { StorageCore, StorageFolder } from '@app/domain/storage';
+import { AuthUserDto, StorageCore, StorageFolder } from '@app/domain';
 import { BadRequestException, UnauthorizedException } from '@nestjs/common';
 import { MulterOptions } from '@nestjs/platform-express/multer/interfaces/multer-options.interface';
 import { existsSync, mkdirSync } from 'fs';
 import { diskStorage } from 'multer';
 import { extname } from 'path';
 import sanitize from 'sanitize-filename';
-import { AuthRequest, AuthUserDto } from '../decorators/auth-user.decorator';
-import { patchFormData } from '../utils/path-form-data.util';
+import { AuthRequest } from '../app.guard';
+import { patchFormData } from '../app.utils';
 
 export const profileImageUploadOption: MulterOptions = {
   fileFilter,
diff --git a/server/src/immich/controllers/album.controller.ts b/server/src/immich/controllers/album.controller.ts
index 37c975263..6da64dd1e 100644
--- a/server/src/immich/controllers/album.controller.ts
+++ b/server/src/immich/controllers/album.controller.ts
@@ -10,9 +10,8 @@ import { GetAlbumsDto } from '@app/domain/album/dto/get-albums.dto';
 import { Body, Controller, Delete, Get, Param, Patch, Post, Put, Query } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
 import { ParseMeUUIDPipe } from '../api-v1/validation/parse-me-uuid-pipe';
-import { AuthUser } from '../decorators/auth-user.decorator';
-import { Authenticated } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated, AuthUser } from '../app.guard';
+import { UseValidation } from '../app.utils';
 import { UUIDParamDto } from './dto/uuid-param.dto';
 
 @ApiTags('Album')
diff --git a/server/src/immich/controllers/api-key.controller.ts b/server/src/immich/controllers/api-key.controller.ts
index 8597d0f7b..b5814769e 100644
--- a/server/src/immich/controllers/api-key.controller.ts
+++ b/server/src/immich/controllers/api-key.controller.ts
@@ -8,9 +8,8 @@ import {
 } from '@app/domain';
 import { Body, Controller, Delete, Get, Param, Post, Put } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
-import { AuthUser } from '../decorators/auth-user.decorator';
-import { Authenticated } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated, AuthUser } from '../app.guard';
+import { UseValidation } from '../app.utils';
 import { UUIDParamDto } from './dto/uuid-param.dto';
 
 @ApiTags('API Key')
diff --git a/server/src/immich/controllers/asset.controller.ts b/server/src/immich/controllers/asset.controller.ts
index dfea0d5a7..28e23c98e 100644
--- a/server/src/immich/controllers/asset.controller.ts
+++ b/server/src/immich/controllers/asset.controller.ts
@@ -11,10 +11,8 @@ import { MapMarkerDto } from '@app/domain/asset/dto/map-marker.dto';
 import { MemoryLaneResponseDto } from '@app/domain/asset/response-dto/memory-lane-response.dto';
 import { Body, Controller, Get, HttpCode, HttpStatus, Param, Post, Query, StreamableFile } from '@nestjs/common';
 import { ApiOkResponse, ApiTags } from '@nestjs/swagger';
-import { asStreamableFile } from '../app.utils';
-import { AuthUser } from '../decorators/auth-user.decorator';
-import { Authenticated, SharedLinkRoute } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated, AuthUser, SharedLinkRoute } from '../app.guard';
+import { asStreamableFile, UseValidation } from '../app.utils';
 import { UUIDParamDto } from './dto/uuid-param.dto';
 
 @ApiTags('Asset')
diff --git a/server/src/immich/controllers/auth.controller.ts b/server/src/immich/controllers/auth.controller.ts
index cd0e23739..f69579012 100644
--- a/server/src/immich/controllers/auth.controller.ts
+++ b/server/src/immich/controllers/auth.controller.ts
@@ -18,9 +18,8 @@ import {
 import { Body, Controller, Delete, Get, Param, Post, Req, Res } from '@nestjs/common';
 import { ApiBadRequestResponse, ApiTags } from '@nestjs/swagger';
 import { Request, Response } from 'express';
-import { AuthUser, GetLoginDetails } from '../decorators/auth-user.decorator';
-import { Authenticated, PublicRoute } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated, AuthUser, GetLoginDetails, PublicRoute } from '../app.guard';
+import { UseValidation } from '../app.utils';
 import { UUIDParamDto } from './dto/uuid-param.dto';
 
 @ApiTags('Authentication')
diff --git a/server/src/immich/controllers/job.controller.ts b/server/src/immich/controllers/job.controller.ts
index b4e3ebed3..243b7537d 100644
--- a/server/src/immich/controllers/job.controller.ts
+++ b/server/src/immich/controllers/job.controller.ts
@@ -1,8 +1,8 @@
 import { AllJobStatusResponseDto, JobCommandDto, JobIdParamDto, JobService, JobStatusDto } from '@app/domain';
 import { Body, Controller, Get, Param, Put } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
-import { Authenticated } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated } from '../app.guard';
+import { UseValidation } from '../app.utils';
 
 @ApiTags('Job')
 @Controller('jobs')
diff --git a/server/src/immich/controllers/oauth.controller.ts b/server/src/immich/controllers/oauth.controller.ts
index cb2440a09..8ec739268 100644
--- a/server/src/immich/controllers/oauth.controller.ts
+++ b/server/src/immich/controllers/oauth.controller.ts
@@ -11,9 +11,8 @@ import {
 import { Body, Controller, Get, HttpStatus, Post, Redirect, Req, Res } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
 import { Request, Response } from 'express';
-import { AuthUser, GetLoginDetails } from '../decorators/auth-user.decorator';
-import { Authenticated, PublicRoute } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated, AuthUser, GetLoginDetails, PublicRoute } from '../app.guard';
+import { UseValidation } from '../app.utils';
 
 @ApiTags('OAuth')
 @Controller('oauth')
diff --git a/server/src/immich/controllers/partner.controller.ts b/server/src/immich/controllers/partner.controller.ts
index 06fa506b9..21fa0deba 100644
--- a/server/src/immich/controllers/partner.controller.ts
+++ b/server/src/immich/controllers/partner.controller.ts
@@ -1,9 +1,8 @@
-import { PartnerDirection, PartnerService, UserResponseDto } from '@app/domain';
+import { AuthUserDto, PartnerDirection, PartnerService, UserResponseDto } from '@app/domain';
 import { Controller, Delete, Get, Param, Post, Query } from '@nestjs/common';
 import { ApiQuery, ApiTags } from '@nestjs/swagger';
-import { AuthUser, AuthUserDto } from '../decorators/auth-user.decorator';
-import { Authenticated } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated, AuthUser } from '../app.guard';
+import { UseValidation } from '../app.utils';
 import { UUIDParamDto } from './dto/uuid-param.dto';
 
 @ApiTags('Partner')
diff --git a/server/src/immich/controllers/person.controller.ts b/server/src/immich/controllers/person.controller.ts
index 26cd2e62c..575230459 100644
--- a/server/src/immich/controllers/person.controller.ts
+++ b/server/src/immich/controllers/person.controller.ts
@@ -8,9 +8,8 @@ import {
 } from '@app/domain';
 import { Body, Controller, Get, Param, Put, StreamableFile } from '@nestjs/common';
 import { ApiOkResponse, ApiTags } from '@nestjs/swagger';
-import { AuthUser } from '../decorators/auth-user.decorator';
-import { Authenticated } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated, AuthUser } from '../app.guard';
+import { UseValidation } from '../app.utils';
 import { UUIDParamDto } from './dto/uuid-param.dto';
 
 function asStreamableFile({ stream, type, length }: ImmichReadStream) {
diff --git a/server/src/immich/controllers/search.controller.ts b/server/src/immich/controllers/search.controller.ts
index 4c6062131..bbc10d9bb 100644
--- a/server/src/immich/controllers/search.controller.ts
+++ b/server/src/immich/controllers/search.controller.ts
@@ -8,9 +8,8 @@ import {
 } from '@app/domain';
 import { Controller, Get, Query } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
-import { AuthUser } from '../decorators/auth-user.decorator';
-import { Authenticated } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated, AuthUser } from '../app.guard';
+import { UseValidation } from '../app.utils';
 
 @ApiTags('Search')
 @Controller('search')
diff --git a/server/src/immich/controllers/server-info.controller.ts b/server/src/immich/controllers/server-info.controller.ts
index 7819e2bd3..e98485cbe 100644
--- a/server/src/immich/controllers/server-info.controller.ts
+++ b/server/src/immich/controllers/server-info.controller.ts
@@ -7,8 +7,8 @@ import {
 } from '@app/domain';
 import { Controller, Get } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
-import { AdminRoute, Authenticated, PublicRoute } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { AdminRoute, Authenticated, PublicRoute } from '../app.guard';
+import { UseValidation } from '../app.utils';
 
 @ApiTags('Server Info')
 @Controller('server-info')
diff --git a/server/src/immich/controllers/shared-link.controller.ts b/server/src/immich/controllers/shared-link.controller.ts
index aa0e53397..68a4a1b78 100644
--- a/server/src/immich/controllers/shared-link.controller.ts
+++ b/server/src/immich/controllers/shared-link.controller.ts
@@ -9,9 +9,8 @@ import {
 } from '@app/domain';
 import { Body, Controller, Delete, Get, Param, Patch, Post, Put } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
-import { AuthUser } from '../decorators/auth-user.decorator';
-import { Authenticated, SharedLinkRoute } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated, AuthUser, SharedLinkRoute } from '../app.guard';
+import { UseValidation } from '../app.utils';
 import { UUIDParamDto } from './dto/uuid-param.dto';
 
 @ApiTags('Shared Link')
diff --git a/server/src/immich/controllers/system-config.controller.ts b/server/src/immich/controllers/system-config.controller.ts
index fb7e38b36..646c9a629 100644
--- a/server/src/immich/controllers/system-config.controller.ts
+++ b/server/src/immich/controllers/system-config.controller.ts
@@ -1,8 +1,8 @@
 import { SystemConfigDto, SystemConfigService, SystemConfigTemplateStorageOptionDto } from '@app/domain';
 import { Body, Controller, Get, Put } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
-import { Authenticated } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated } from '../app.guard';
+import { UseValidation } from '../app.utils';
 
 @ApiTags('System Config')
 @Controller('system-config')
diff --git a/server/src/immich/controllers/tag.controller.ts b/server/src/immich/controllers/tag.controller.ts
index 7d23e2bf7..d949a4274 100644
--- a/server/src/immich/controllers/tag.controller.ts
+++ b/server/src/immich/controllers/tag.controller.ts
@@ -2,6 +2,7 @@ import {
   AssetIdsDto,
   AssetIdsResponseDto,
   AssetResponseDto,
+  AuthUserDto,
   CreateTagDto,
   TagResponseDto,
   TagService,
@@ -9,9 +10,8 @@ import {
 } from '@app/domain';
 import { Body, Controller, Delete, Get, Param, Patch, Post, Put } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
-import { AuthUser, AuthUserDto } from '../decorators/auth-user.decorator';
-import { Authenticated } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
+import { Authenticated, AuthUser } from '../app.guard';
+import { UseValidation } from '../app.utils';
 import { UUIDParamDto } from './dto/uuid-param.dto';
 
 @ApiTags('Tag')
diff --git a/server/src/immich/controllers/user.controller.ts b/server/src/immich/controllers/user.controller.ts
index 1a4b3faf1..52b00898e 100644
--- a/server/src/immich/controllers/user.controller.ts
+++ b/server/src/immich/controllers/user.controller.ts
@@ -1,4 +1,5 @@
 import {
+  AuthUserDto,
   CreateProfileImageDto,
   CreateProfileImageResponseDto,
   CreateUserDto,
@@ -27,10 +28,9 @@ import {
 import { FileInterceptor } from '@nestjs/platform-express';
 import { ApiBody, ApiConsumes, ApiTags } from '@nestjs/swagger';
 import { Response as Res } from 'express';
+import { AdminRoute, Authenticated, AuthUser, PublicRoute } from '../app.guard';
+import { UseValidation } from '../app.utils';
 import { profileImageUploadOption } from '../config/profile-image-upload.config';
-import { AuthUser, AuthUserDto } from '../decorators/auth-user.decorator';
-import { AdminRoute, Authenticated, PublicRoute } from '../decorators/authenticated.decorator';
-import { UseValidation } from '../decorators/use-validation.decorator';
 
 @ApiTags('User')
 @Controller('user')
diff --git a/server/src/immich/decorators/auth-user.decorator.ts b/server/src/immich/decorators/auth-user.decorator.ts
deleted file mode 100644
index adda34dd5..000000000
--- a/server/src/immich/decorators/auth-user.decorator.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export { AuthUserDto } from '@app/domain';
-import { AuthUserDto, LoginDetails } from '@app/domain';
-import { createParamDecorator, ExecutionContext } from '@nestjs/common';
-import { Request } from 'express';
-import { UAParser } from 'ua-parser-js';
-
-export interface AuthRequest extends Request {
-  user?: AuthUserDto;
-}
-
-export const AuthUser = createParamDecorator((data, ctx: ExecutionContext): AuthUserDto => {
-  return ctx.switchToHttp().getRequest<{ user: AuthUserDto }>().user;
-});
-
-export const GetLoginDetails = createParamDecorator((data, ctx: ExecutionContext): LoginDetails => {
-  const req = ctx.switchToHttp().getRequest();
-  const userAgent = UAParser(req.headers['user-agent']);
-
-  return {
-    clientIp: req.clientIp,
-    isSecure: req.secure,
-    deviceType: userAgent.browser.name || userAgent.device.type || req.headers.devicemodel || '',
-    deviceOS: userAgent.os.name || req.headers.devicetype || '',
-  };
-});
diff --git a/server/src/immich/decorators/authenticated.decorator.ts b/server/src/immich/decorators/authenticated.decorator.ts
deleted file mode 100644
index 68a01787c..000000000
--- a/server/src/immich/decorators/authenticated.decorator.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { IMMICH_API_KEY_NAME } from '@app/domain';
-import { applyDecorators, SetMetadata } from '@nestjs/common';
-import { ApiBearerAuth, ApiCookieAuth, ApiQuery, ApiSecurity } from '@nestjs/swagger';
-
-interface AuthenticatedOptions {
-  admin?: boolean;
-  isShared?: boolean;
-}
-
-export enum Metadata {
-  AUTH_ROUTE = 'auth_route',
-  ADMIN_ROUTE = 'admin_route',
-  SHARED_ROUTE = 'shared_route',
-  PUBLIC_SECURITY = 'public_security',
-}
-
-const adminDecorator = SetMetadata(Metadata.ADMIN_ROUTE, true);
-
-const sharedLinkDecorators = [
-  SetMetadata(Metadata.SHARED_ROUTE, true),
-  ApiQuery({ name: 'key', type: String, required: false }),
-];
-
-export const Authenticated = (options: AuthenticatedOptions = {}) => {
-  const decorators: MethodDecorator[] = [
-    ApiBearerAuth(),
-    ApiCookieAuth(),
-    ApiSecurity(IMMICH_API_KEY_NAME),
-    SetMetadata(Metadata.AUTH_ROUTE, true),
-  ];
-
-  if (options.admin) {
-    decorators.push(adminDecorator);
-  }
-
-  if (options.isShared) {
-    decorators.push(...sharedLinkDecorators);
-  }
-
-  return applyDecorators(...decorators);
-};
-
-export const PublicRoute = () =>
-  applyDecorators(SetMetadata(Metadata.AUTH_ROUTE, false), ApiSecurity(Metadata.PUBLIC_SECURITY));
-export const SharedLinkRoute = () => applyDecorators(...sharedLinkDecorators);
-export const AdminRoute = () => adminDecorator;
diff --git a/server/src/immich/decorators/use-validation.decorator.ts b/server/src/immich/decorators/use-validation.decorator.ts
deleted file mode 100644
index a9b40ea40..000000000
--- a/server/src/immich/decorators/use-validation.decorator.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { applyDecorators, UsePipes, ValidationPipe } from '@nestjs/common';
-
-export function UseValidation() {
-  return applyDecorators(
-    UsePipes(
-      new ValidationPipe({
-        transform: true,
-        whitelist: true,
-      }),
-    ),
-  );
-}
diff --git a/server/src/immich/decorators/validate-uuid.decorator.ts b/server/src/immich/decorators/validate-uuid.decorator.ts
deleted file mode 100644
index 16a2e1ad0..000000000
--- a/server/src/immich/decorators/validate-uuid.decorator.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { applyDecorators } from '@nestjs/common';
-import { ApiProperty } from '@nestjs/swagger';
-import { IsArray, IsNotEmpty, IsOptional, IsString, IsUUID } from 'class-validator';
-
-export type Options = {
-  optional?: boolean;
-  each?: boolean;
-};
-
-export function ValidateUUID({ optional, each }: Options = { optional: false, each: false }) {
-  return applyDecorators(
-    IsUUID('4', { each }),
-    ApiProperty({ format: 'uuid' }),
-    optional ? IsOptional() : IsNotEmpty(),
-    each ? IsArray() : IsString(),
-  );
-}
diff --git a/server/src/immich/middlewares/auth.guard.ts b/server/src/immich/middlewares/auth.guard.ts
deleted file mode 100644
index 7d3204ed4..000000000
--- a/server/src/immich/middlewares/auth.guard.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { AuthService } from '@app/domain';
-import { CanActivate, ExecutionContext, Injectable, Logger } from '@nestjs/common';
-import { Reflector } from '@nestjs/core';
-import { AuthRequest } from '../decorators/auth-user.decorator';
-import { Metadata } from '../decorators/authenticated.decorator';
-
-@Injectable()
-export class AuthGuard implements CanActivate {
-  private logger = new Logger(AuthGuard.name);
-
-  constructor(private reflector: Reflector, private authService: AuthService) {}
-
-  async canActivate(context: ExecutionContext): Promise<boolean> {
-    const targets = [context.getHandler(), context.getClass()];
-
-    const isAuthRoute = this.reflector.getAllAndOverride(Metadata.AUTH_ROUTE, targets);
-    const isAdminRoute = this.reflector.getAllAndOverride(Metadata.ADMIN_ROUTE, targets);
-    const isSharedRoute = this.reflector.getAllAndOverride(Metadata.SHARED_ROUTE, targets);
-
-    if (!isAuthRoute) {
-      return true;
-    }
-
-    const req = context.switchToHttp().getRequest<AuthRequest>();
-
-    const authDto = await this.authService.validate(req.headers, req.query as Record<string, string>);
-    if (!authDto) {
-      this.logger.warn(`Denied access to authenticated route: ${req.path}`);
-      return false;
-    }
-
-    if (authDto.isPublicUser && !isSharedRoute) {
-      this.logger.warn(`Denied access to non-shared route: ${req.path}`);
-      return false;
-    }
-
-    if (isAdminRoute && !authDto.isAdmin) {
-      this.logger.warn(`Denied access to admin only route: ${req.path}`);
-      return false;
-    }
-
-    req.user = authDto;
-
-    return true;
-  }
-}
diff --git a/server/src/immich/utils/path-form-data.util.ts b/server/src/immich/utils/path-form-data.util.ts
deleted file mode 100644
index 4ab7d56c5..000000000
--- a/server/src/immich/utils/path-form-data.util.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function patchFormData(latin1: string) {
-  return Buffer.from(latin1, 'latin1').toString('utf8');
-}
diff --git a/server/src/immich/utils/transform.util.ts b/server/src/immich/utils/transform.util.ts
deleted file mode 100644
index b03ce6a2d..000000000
--- a/server/src/immich/utils/transform.util.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import sanitize from 'sanitize-filename';
-
-interface IValue {
-  value?: string;
-}
-
-export const toBoolean = ({ value }: IValue) => {
-  if (value == 'true') {
-    return true;
-  } else if (value == 'false') {
-    return false;
-  }
-  return value;
-};
-
-export const toEmail = ({ value }: IValue) => value?.toLowerCase();
-
-export const toSanitized = ({ value }: IValue) => sanitize((value || '').replace(/\./g, ''));
diff --git a/server/test/test-utils.ts b/server/test/test-utils.ts
index 5736a2077..58492a011 100644
--- a/server/test/test-utils.ts
+++ b/server/test/test-utils.ts
@@ -1,5 +1,5 @@
-import { AuthUserDto } from '@app/immich/decorators/auth-user.decorator';
-import { AuthGuard } from '@app/immich/middlewares/auth.guard';
+import { AuthUserDto } from '@app/domain';
+import { AppGuard } from '@app/immich/app.guard';
 import { CanActivate, ExecutionContext } from '@nestjs/common';
 import { TestingModuleBuilder } from '@nestjs/testing';
 import { DataSource } from 'typeorm';
@@ -34,5 +34,5 @@ export function authCustom(builder: TestingModuleBuilder, callback: CustomAuthCa
       return true;
     },
   };
-  return builder.overrideProvider(AuthGuard).useValue(canActivate);
+  return builder.overrideProvider(AppGuard).useValue(canActivate);
 }

From 604b10778c39c66644b4c939bda7202d3635bcf8 Mon Sep 17 00:00:00 2001
From: Friso Smit <fw.smit01@gmail.com>
Date: Sat, 1 Jul 2023 20:30:19 +0200
Subject: [PATCH 30/53] Add more detail to reverse proxy docs (#2841)

* Add more detail to reverse proxy docs

Document fix for issue #2564

* Add port to the proxy_pass example
---
 docs/docs/administration/reverse-proxy.md | 29 ++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/docs/docs/administration/reverse-proxy.md b/docs/docs/administration/reverse-proxy.md
index dfb4f8d6b..8c95b0e7a 100644
--- a/docs/docs/administration/reverse-proxy.md
+++ b/docs/docs/administration/reverse-proxy.md
@@ -15,7 +15,34 @@ While the reverse proxy provided by Immich works well for basic deployments, som
 
 ## Adding a Custom Reverse Proxy
 
-Users can deploy a custom reverse proxy that forwards requests to Immich's reverse proxy. This way, the new reverse proxy can handle TLS termination, load balancing, or other advanced features, while still delegating routing decisions to Immich's reverse proxy. All reverse proxies between Immich and the user must forward all headers and set the `Host`, `X-Forwarded-Host`, `X-Forwarded-Proto` and `X-Forwarded-For` headers to their appropriate values. By following these practices, you ensure that all custom reverse proxies are fully compatible with Immich.
+Users can deploy a custom reverse proxy that forwards requests to Immich's reverse proxy. This way, the new reverse proxy can handle TLS termination, load balancing, or other advanced features, while still delegating routing decisions to Immich's reverse proxy. All reverse proxies between Immich and the user must forward all headers and set the `Host`, `X-Forwarded-Host`, `X-Forwarded-Proto` and `X-Forwarded-For` headers to their appropriate values. Additionally, your reverse proxy should allow for big enough uploads. By following these practices, you ensure that all custom reverse proxies are fully compatible with Immich.
+
+### Nginx example config
+
+Below is an example config for nginx:
+
+```nginx
+server {
+    server_name <snip>
+
+    # https://github.com/immich-app/immich/blob/main/nginx/templates/default.conf.template#L28
+    client_max_body_size 50000M;
+
+    location / {
+        proxy_pass http://<snip>/2283;
+        proxy_set_header Host              $http_host;
+        proxy_set_header X-Real-IP         $remote_addr;
+        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # http://nginx.org/en/docs/http/websocket.html
+        proxy_http_version 1.1;
+        proxy_set_header   Upgrade    $http_upgrade;
+        proxy_set_header   Connection "upgrade";
+        proxy_redirect off;
+    }
+}
+```
 
 ## Replacing the Default Reverse Proxy
 

From 55e7893badd584f2259f170fc980241f32f332fc Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Sat, 1 Jul 2023 13:30:59 -0500
Subject: [PATCH 31/53] docs: type

---
 docs/docs/administration/reverse-proxy.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docs/administration/reverse-proxy.md b/docs/docs/administration/reverse-proxy.md
index 8c95b0e7a..0b075f0fb 100644
--- a/docs/docs/administration/reverse-proxy.md
+++ b/docs/docs/administration/reverse-proxy.md
@@ -29,7 +29,7 @@ server {
     client_max_body_size 50000M;
 
     location / {
-        proxy_pass http://<snip>/2283;
+        proxy_pass http://<snip>:2283;
         proxy_set_header Host              $http_host;
         proxy_set_header X-Real-IP         $remote_addr;
         proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;

From d9e084706f3b7d2f7f38d945b98e6376b2778e95 Mon Sep 17 00:00:00 2001
From: Dhrumil Shah <ddshd@users.noreply.github.com>
Date: Sat, 1 Jul 2023 14:33:04 -0400
Subject: [PATCH 32/53] chore(docs): clarifications to `--import` flag on CLI
 docs (#2996)

* Clarifications to `--import` flag on CLI docs

* WIP: Fixed heading, added some more info

* PR: fixing format issues
---
 docs/docs/features/bulk-upload.md | 93 ++++++++++++++++++++++++++-----
 1 file changed, 78 insertions(+), 15 deletions(-)

diff --git a/docs/docs/features/bulk-upload.md b/docs/docs/features/bulk-upload.md
index eaba3df6a..b2821e390 100644
--- a/docs/docs/features/bulk-upload.md
+++ b/docs/docs/features/bulk-upload.md
@@ -21,6 +21,19 @@ Pre-installed on the `immich-server` container and can be easily accessed throug
 immich
 ```
 
+### Options
+
+| Parameter        | Description                                                         |
+| ---------------- | ------------------------------------------------------------------- |
+| --yes / -y       | Assume yes on all interactive prompts                               |
+| --recursive / -r | Include subfolders                                                  |
+| --delete / -da   | Delete local assets after upload                                    |
+| --key / -k       | User's API key                                                      |
+| --server / -s    | Immich's server address                                             |
+| --threads / -t   | Number of threads to use (Default 5)                                |
+| --album/ -al     | Create albums for assets based on the parent folder or a given name |
+| --import/ -i     | Import gallery (assets are not uploaded)                            |
+
 ## Quick Start
 
 Specify user's credential, Immich's server address and port and the directory you would like to upload videos/photos from.
@@ -35,27 +48,16 @@ By default, subfolders are not included. To upload a directory including subfold
 immich upload --key HFEJ38DNSDUEG --server http://192.168.1.216:2283/api --recursive directory/
 ```
 
----
-
-### Options
-
-| Parameter        | Description                                                         |
-| ---------------- | ------------------------------------------------------------------- |
-| --yes / -y       | Assume yes on all interactive prompts                               |
-| --recursive / -r | Include subfolders                                                  |
-| --delete / -da   | Delete local assets after upload                                    |
-| --key / -k       | User's API key                                                      |
-| --server / -s    | Immich's server address                                             |
-| --threads / -t   | Number of threads to use (Default 5)                                |
-| --album/ -al     | Create albums for assets based on the parent folder or a given name |
-| --import/ -i     | Import gallery                                                      |
-
 ### Obtain the API Key
 
 The API key can be obtained in the user setting panel on the web interface.
 
 ![Obtain Api Key](./img/obtain-api-key.png)
 
+---
+
+## Uploading exiting libraries
+
 ### Run via Docker
 
 You can run the CLI inside of a docker container to avoid needing to install anything.
@@ -108,3 +110,64 @@ npm run build
 ```bash title="Run the command"
 node bin/index.js upload --key HFEJ38DNSDUEG --server http://192.168.1.216:2283/api --recursive your/asset/directory
 ```
+
+---
+
+## Importing existing libraries
+
+If you do not wish to upload files into the server, existing files can be imported into the immich gallery through the use of the `--import` flag.
+
+```
+immich upload --key HFEJ38DNSDUEG --server http://192.168.1.216:2283/api --recursive directory/ --import
+```
+
+```
+immich upload --key HFEJ38DNSDUEG --server http://192.168.1.216:2283/api file1.jpg file2.jpg --import
+```
+
+The `immich-server` and `immich-microservices` containers must be able to access the files, or directories at the path referenced in the command. The directories referenced must be set under a user's `External Path` setting. More detailed instructions can be found [here](/docs/features/read-only-gallery).
+
+:::tip Matching volume references
+The import command is most easily run on the machine running the immich service, as the path to the files on the machine running the command and the server much match identically.
+
+If you are running immich within docker, the volume pointing to your existing library should be identical with your host machine.
+
+```diff title="docker-compose.yml"
+  immich-server:
+    container_name: immich_server
+    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
+    command: [ "start.sh", "immich" ]
+    volumes:
+      - ${UPLOAD_LOCATION}:/usr/src/app/upload
++     - /path/to/media:/path/to/media
+    env_file:
+      - .env
+    depends_on:
+      - redis
+      - database
+      - typesense
+    restart: always
+
+  immich-microservices:
+    container_name: immich_microservices
+    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
+    command: [ "start.sh", "microservices" ]
+    volumes:
+      - ${UPLOAD_LOCATION}:/usr/src/app/upload
++     - /path/to/media:/path/to/media
+    env_file:
+      - .env
+    depends_on:
+      - redis
+      - database
+      - typesense
+    restart: always
+```
+
+The proper command for above would be as shown below. You should have access to `/path/to/media` exactly on the environment the CLI command is being run on
+
+```
+immich upload --key HFEJ38DNSDUEG --server http://192.168.1.216:2283/api --recursive /path/to/media --import
+```
+
+:::

From 1df068bac95cd024c1cc2d04c1ade11ddca3b9cd Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Sun, 2 Jul 2023 15:28:53 -0500
Subject: [PATCH 33/53] chore(server): add limit to people return (#3069)

---
 server/src/infra/repositories/person.repository.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/server/src/infra/repositories/person.repository.ts b/server/src/infra/repositories/person.repository.ts
index 3455109bc..8294e0d27 100644
--- a/server/src/infra/repositories/person.repository.ts
+++ b/server/src/infra/repositories/person.repository.ts
@@ -28,6 +28,7 @@ export class PersonRepository implements IPersonRepository {
       .orderBy('COUNT(face.assetId)', 'DESC')
       .having('COUNT(face.assetId) >= :faces', { faces: options?.minimumFaceCount || 1 })
       .groupBy('person.id')
+      .limit(500)
       .getMany();
   }
 

From 7947f4db4c4334d90d7ba8cd44010b7288507d69 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Sun, 2 Jul 2023 17:46:20 -0500
Subject: [PATCH 34/53] feat(web/server): Face thumbnail selection (#3081)

* add migration

* verify running migration populate new value

* implemented service

* generate api

* FE works

* FR Works

* fix test

* fix test fixture

* fix test

* fix test

* consolidate api

* fix test

* added test

* pr feedback

* refactor

* click ont humbnail to show feature selection as well
---
 mobile/openapi/doc/PersonUpdateDto.md         |  3 +-
 .../openapi/lib/model/person_update_dto.dart  | 42 ++++++++--
 .../openapi/test/person_update_dto_test.dart  |  7 ++
 server/immich-openapi-specs.json              | 12 +--
 .../facial-recognition.service.spec.ts        | 12 +++
 .../facial-recognition.services.ts            | 11 ++-
 server/src/domain/person/person.dto.ts        | 16 +++-
 server/src/domain/person/person.repository.ts |  6 +-
 .../src/domain/person/person.service.spec.ts  | 31 ++++++++
 server/src/domain/person/person.service.ts    | 45 ++++++++++-
 .../src/infra/entities/asset-face.entity.ts   | 18 +++++
 .../1688241394489-AddDetectFaceResultInfo.ts  | 23 ++++++
 .../infra/repositories/person.repository.ts   |  6 +-
 server/test/fixtures.ts                       | 16 ++++
 .../repositories/person.repository.mock.ts    |  2 +
 web/src/api/open-api/api.ts                   | 10 ++-
 .../faces-page/face-thumbnail-selector.svelte | 36 +++++++++
 .../asset-selection-viewer.svelte             | 44 +++++++++++
 .../gallery-viewer/gallery-viewer.svelte      | 15 +---
 web/src/lib/utils/thumbnail-util.ts           | 19 +++++
 .../(user)/people/[personId]/+page.svelte     | 79 ++++++++++++++-----
 21 files changed, 395 insertions(+), 58 deletions(-)
 create mode 100644 server/src/infra/migrations/1688241394489-AddDetectFaceResultInfo.ts
 create mode 100644 web/src/lib/components/faces-page/face-thumbnail-selector.svelte
 create mode 100644 web/src/lib/components/shared-components/gallery-viewer/asset-selection-viewer.svelte
 create mode 100644 web/src/lib/utils/thumbnail-util.ts

diff --git a/mobile/openapi/doc/PersonUpdateDto.md b/mobile/openapi/doc/PersonUpdateDto.md
index 30451b8c5..7496b2af6 100644
--- a/mobile/openapi/doc/PersonUpdateDto.md
+++ b/mobile/openapi/doc/PersonUpdateDto.md
@@ -8,7 +8,8 @@ import 'package:openapi/api.dart';
 ## Properties
 Name | Type | Description | Notes
 ------------ | ------------- | ------------- | -------------
-**name** | **String** |  | 
+**name** | **String** | Person name. | [optional] 
+**featureFaceAssetId** | **String** | Asset is used to get the feature face thumbnail. | [optional] 
 
 [[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)
 
diff --git a/mobile/openapi/lib/model/person_update_dto.dart b/mobile/openapi/lib/model/person_update_dto.dart
index 488b9abd5..3d15c7156 100644
--- a/mobile/openapi/lib/model/person_update_dto.dart
+++ b/mobile/openapi/lib/model/person_update_dto.dart
@@ -13,26 +13,54 @@ part of openapi.api;
 class PersonUpdateDto {
   /// Returns a new [PersonUpdateDto] instance.
   PersonUpdateDto({
-    required this.name,
+    this.name,
+    this.featureFaceAssetId,
   });
 
-  String name;
+  /// Person name.
+  ///
+  /// Please note: This property should have been non-nullable! Since the specification file
+  /// does not include a default value (using the "default:" property), however, the generated
+  /// source code must fall back to having a nullable type.
+  /// Consider adding a "default:" property in the specification file to hide this note.
+  ///
+  String? name;
+
+  /// Asset is used to get the feature face thumbnail.
+  ///
+  /// Please note: This property should have been non-nullable! Since the specification file
+  /// does not include a default value (using the "default:" property), however, the generated
+  /// source code must fall back to having a nullable type.
+  /// Consider adding a "default:" property in the specification file to hide this note.
+  ///
+  String? featureFaceAssetId;
 
   @override
   bool operator ==(Object other) => identical(this, other) || other is PersonUpdateDto &&
-     other.name == name;
+     other.name == name &&
+     other.featureFaceAssetId == featureFaceAssetId;
 
   @override
   int get hashCode =>
     // ignore: unnecessary_parenthesis
-    (name.hashCode);
+    (name == null ? 0 : name!.hashCode) +
+    (featureFaceAssetId == null ? 0 : featureFaceAssetId!.hashCode);
 
   @override
-  String toString() => 'PersonUpdateDto[name=$name]';
+  String toString() => 'PersonUpdateDto[name=$name, featureFaceAssetId=$featureFaceAssetId]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
+    if (this.name != null) {
       json[r'name'] = this.name;
+    } else {
+    //  json[r'name'] = null;
+    }
+    if (this.featureFaceAssetId != null) {
+      json[r'featureFaceAssetId'] = this.featureFaceAssetId;
+    } else {
+    //  json[r'featureFaceAssetId'] = null;
+    }
     return json;
   }
 
@@ -44,7 +72,8 @@ class PersonUpdateDto {
       final json = value.cast<String, dynamic>();
 
       return PersonUpdateDto(
-        name: mapValueOfType<String>(json, r'name')!,
+        name: mapValueOfType<String>(json, r'name'),
+        featureFaceAssetId: mapValueOfType<String>(json, r'featureFaceAssetId'),
       );
     }
     return null;
@@ -92,7 +121,6 @@ class PersonUpdateDto {
 
   /// The list of required keys that must be present in a JSON.
   static const requiredKeys = <String>{
-    'name',
   };
 }
 
diff --git a/mobile/openapi/test/person_update_dto_test.dart b/mobile/openapi/test/person_update_dto_test.dart
index 6e09d8602..be3b8fb74 100644
--- a/mobile/openapi/test/person_update_dto_test.dart
+++ b/mobile/openapi/test/person_update_dto_test.dart
@@ -16,11 +16,18 @@ void main() {
   // final instance = PersonUpdateDto();
 
   group('test PersonUpdateDto', () {
+    // Person name.
     // String name
     test('to test the property `name`', () async {
       // TODO
     });
 
+    // Asset is used to get the feature face thumbnail.
+    // String featureFaceAssetId
+    test('to test the property `featureFaceAssetId`', () async {
+      // TODO
+    });
+
 
   });
 
diff --git a/server/immich-openapi-specs.json b/server/immich-openapi-specs.json
index 7717e0ab1..fec62de63 100644
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@@ -5816,12 +5816,14 @@
         "type": "object",
         "properties": {
           "name": {
-            "type": "string"
+            "type": "string",
+            "description": "Person name."
+          },
+          "featureFaceAssetId": {
+            "type": "string",
+            "description": "Asset is used to get the feature face thumbnail."
           }
-        },
-        "required": [
-          "name"
-        ]
+        }
       },
       "QueueStatusDto": {
         "type": "object",
diff --git a/server/src/domain/facial-recognition/facial-recognition.service.spec.ts b/server/src/domain/facial-recognition/facial-recognition.service.spec.ts
index 87418b2c2..2d4de5637 100644
--- a/server/src/domain/facial-recognition/facial-recognition.service.spec.ts
+++ b/server/src/domain/facial-recognition/facial-recognition.service.spec.ts
@@ -191,6 +191,12 @@ describe(FacialRecognitionService.name, () => {
         personId: 'person-1',
         assetId: 'asset-id',
         embedding: [1, 2, 3, 4],
+        boundingBoxX1: 100,
+        boundingBoxY1: 100,
+        boundingBoxX2: 200,
+        boundingBoxY2: 200,
+        imageHeight: 500,
+        imageWidth: 400,
       });
     });
 
@@ -207,6 +213,12 @@ describe(FacialRecognitionService.name, () => {
         personId: 'person-1',
         assetId: 'asset-id',
         embedding: [1, 2, 3, 4],
+        boundingBoxX1: 100,
+        boundingBoxY1: 100,
+        boundingBoxX2: 200,
+        boundingBoxY2: 200,
+        imageHeight: 500,
+        imageWidth: 400,
       });
       expect(jobMock.queue.mock.calls).toEqual([
         [
diff --git a/server/src/domain/facial-recognition/facial-recognition.services.ts b/server/src/domain/facial-recognition/facial-recognition.services.ts
index a8559c6bc..69bcec2bd 100644
--- a/server/src/domain/facial-recognition/facial-recognition.services.ts
+++ b/server/src/domain/facial-recognition/facial-recognition.services.ts
@@ -83,7 +83,16 @@ export class FacialRecognitionService {
 
       const faceId: AssetFaceId = { assetId: asset.id, personId };
 
-      await this.faceRepository.create({ ...faceId, embedding });
+      await this.faceRepository.create({
+        ...faceId,
+        embedding,
+        imageHeight: rest.imageHeight,
+        imageWidth: rest.imageWidth,
+        boundingBoxX1: rest.boundingBox.x1,
+        boundingBoxX2: rest.boundingBox.x2,
+        boundingBoxY1: rest.boundingBox.y1,
+        boundingBoxY2: rest.boundingBox.y2,
+      });
       await this.jobRepository.queue({ name: JobName.SEARCH_INDEX_FACE, data: faceId });
     }
 
diff --git a/server/src/domain/person/person.dto.ts b/server/src/domain/person/person.dto.ts
index 19185dc93..1790697e4 100644
--- a/server/src/domain/person/person.dto.ts
+++ b/server/src/domain/person/person.dto.ts
@@ -1,10 +1,20 @@
 import { AssetFaceEntity, PersonEntity } from '@app/infra/entities';
-import { IsNotEmpty, IsString } from 'class-validator';
+import { IsOptional, IsString } from 'class-validator';
 
 export class PersonUpdateDto {
-  @IsNotEmpty()
+  /**
+   * Person name.
+   */
+  @IsOptional()
   @IsString()
-  name!: string;
+  name?: string;
+
+  /**
+   * Asset is used to get the feature face thumbnail.
+   */
+  @IsOptional()
+  @IsString()
+  featureFaceAssetId?: string;
 }
 
 export class PersonResponseDto {
diff --git a/server/src/domain/person/person.repository.ts b/server/src/domain/person/person.repository.ts
index a9ae9dcbe..0f05e3d98 100644
--- a/server/src/domain/person/person.repository.ts
+++ b/server/src/domain/person/person.repository.ts
@@ -1,5 +1,5 @@
-import { AssetEntity, PersonEntity } from '@app/infra/entities';
-
+import { AssetFaceId } from '@app/domain';
+import { AssetEntity, AssetFaceEntity, PersonEntity } from '@app/infra/entities';
 export const IPersonRepository = 'IPersonRepository';
 
 export interface PersonSearchOptions {
@@ -16,4 +16,6 @@ export interface IPersonRepository {
   update(entity: Partial<PersonEntity>): Promise<PersonEntity>;
   delete(entity: PersonEntity): Promise<PersonEntity | null>;
   deleteAll(): Promise<number>;
+
+  getFaceById(payload: AssetFaceId): Promise<AssetFaceEntity | null>;
 }
diff --git a/server/src/domain/person/person.service.spec.ts b/server/src/domain/person/person.service.spec.ts
index 6d46b3a97..3d786f9e2 100644
--- a/server/src/domain/person/person.service.spec.ts
+++ b/server/src/domain/person/person.service.spec.ts
@@ -2,6 +2,7 @@ import { BadRequestException, NotFoundException } from '@nestjs/common';
 import {
   assetEntityStub,
   authStub,
+  faceStub,
   newJobRepositoryMock,
   newPersonRepositoryMock,
   newStorageRepositoryMock,
@@ -108,6 +109,36 @@ describe(PersonService.name, () => {
         data: { ids: [assetEntityStub.image.id] },
       });
     });
+
+    it("should update a person's thumbnailPath", async () => {
+      personMock.getById.mockResolvedValue(personStub.withName);
+      personMock.getFaceById.mockResolvedValue(faceStub.face1);
+
+      await expect(
+        sut.update(authStub.admin, 'person-1', { featureFaceAssetId: faceStub.face1.assetId }),
+      ).resolves.toEqual(responseDto);
+
+      expect(personMock.getById).toHaveBeenCalledWith('admin_id', 'person-1');
+      expect(personMock.getFaceById).toHaveBeenCalledWith({
+        assetId: faceStub.face1.assetId,
+        personId: 'person-1',
+      });
+      expect(jobMock.queue).toHaveBeenCalledWith({
+        name: JobName.GENERATE_FACE_THUMBNAIL,
+        data: {
+          assetId: faceStub.face1.assetId,
+          personId: 'person-1',
+          boundingBox: {
+            x1: faceStub.face1.boundingBoxX1,
+            x2: faceStub.face1.boundingBoxX2,
+            y1: faceStub.face1.boundingBoxY1,
+            y2: faceStub.face1.boundingBoxY2,
+          },
+          imageHeight: faceStub.face1.imageHeight,
+          imageWidth: faceStub.face1.imageWidth,
+        },
+      });
+    });
   });
 
   describe('handlePersonCleanup', () => {
diff --git a/server/src/domain/person/person.service.ts b/server/src/domain/person/person.service.ts
index 48075bee8..ed443f765 100644
--- a/server/src/domain/person/person.service.ts
+++ b/server/src/domain/person/person.service.ts
@@ -1,3 +1,4 @@
+import { PersonEntity } from '@app/infra/entities';
 import { BadRequestException, Inject, Injectable, Logger, NotFoundException } from '@nestjs/common';
 import { AssetResponseDto, mapAsset } from '../asset';
 import { AuthUserDto } from '../auth';
@@ -52,18 +53,54 @@ export class PersonService {
   }
 
   async update(authUser: AuthUserDto, personId: string, dto: PersonUpdateDto): Promise<PersonResponseDto> {
-    const exists = await this.repository.getById(authUser.id, personId);
-    if (!exists) {
+    let person = await this.repository.getById(authUser.id, personId);
+    if (!person) {
       throw new BadRequestException();
     }
 
-    const person = await this.repository.update({ id: personId, name: dto.name });
+    if (dto.name) {
+      person = await this.updateName(authUser, personId, dto.name);
+    }
+
+    if (dto.featureFaceAssetId) {
+      await this.updateFaceThumbnail(personId, dto.featureFaceAssetId);
+    }
+
+    return mapPerson(person);
+  }
+
+  private async updateName(authUser: AuthUserDto, personId: string, name: string): Promise<PersonEntity> {
+    const person = await this.repository.update({ id: personId, name });
 
     const relatedAsset = await this.getAssets(authUser, personId);
     const assetIds = relatedAsset.map((asset) => asset.id);
     await this.jobRepository.queue({ name: JobName.SEARCH_INDEX_ASSET, data: { ids: assetIds } });
 
-    return mapPerson(person);
+    return person;
+  }
+
+  private async updateFaceThumbnail(personId: string, assetId: string): Promise<void> {
+    const face = await this.repository.getFaceById({ assetId, personId });
+
+    if (!face) {
+      throw new BadRequestException();
+    }
+
+    return await this.jobRepository.queue({
+      name: JobName.GENERATE_FACE_THUMBNAIL,
+      data: {
+        assetId: assetId,
+        personId,
+        boundingBox: {
+          x1: face.boundingBoxX1,
+          x2: face.boundingBoxX2,
+          y1: face.boundingBoxY1,
+          y2: face.boundingBoxY2,
+        },
+        imageHeight: face.imageHeight,
+        imageWidth: face.imageWidth,
+      },
+    });
   }
 
   async handlePersonCleanup() {
diff --git a/server/src/infra/entities/asset-face.entity.ts b/server/src/infra/entities/asset-face.entity.ts
index 96aa17a2c..cf59bc0c6 100644
--- a/server/src/infra/entities/asset-face.entity.ts
+++ b/server/src/infra/entities/asset-face.entity.ts
@@ -17,6 +17,24 @@ export class AssetFaceEntity {
   })
   embedding!: number[] | null;
 
+  @Column({ default: 0, type: 'int' })
+  imageWidth!: number;
+
+  @Column({ default: 0, type: 'int' })
+  imageHeight!: number;
+
+  @Column({ default: 0, type: 'int' })
+  boundingBoxX1!: number;
+
+  @Column({ default: 0, type: 'int' })
+  boundingBoxY1!: number;
+
+  @Column({ default: 0, type: 'int' })
+  boundingBoxX2!: number;
+
+  @Column({ default: 0, type: 'int' })
+  boundingBoxY2!: number;
+
   @ManyToOne(() => AssetEntity, (asset) => asset.faces, { onDelete: 'CASCADE', onUpdate: 'CASCADE' })
   asset!: AssetEntity;
 
diff --git a/server/src/infra/migrations/1688241394489-AddDetectFaceResultInfo.ts b/server/src/infra/migrations/1688241394489-AddDetectFaceResultInfo.ts
new file mode 100644
index 000000000..b026685bf
--- /dev/null
+++ b/server/src/infra/migrations/1688241394489-AddDetectFaceResultInfo.ts
@@ -0,0 +1,23 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddDetectFaceResultInfo1688241394489 implements MigrationInterface {
+  name = 'AddDetectFaceResultInfo1688241394489';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "asset_faces" ADD "imageWidth" integer NOT NULL DEFAULT '0'`);
+    await queryRunner.query(`ALTER TABLE "asset_faces" ADD "imageHeight" integer NOT NULL DEFAULT '0'`);
+    await queryRunner.query(`ALTER TABLE "asset_faces" ADD "boundingBoxX1" integer NOT NULL DEFAULT '0'`);
+    await queryRunner.query(`ALTER TABLE "asset_faces" ADD "boundingBoxY1" integer NOT NULL DEFAULT '0'`);
+    await queryRunner.query(`ALTER TABLE "asset_faces" ADD "boundingBoxX2" integer NOT NULL DEFAULT '0'`);
+    await queryRunner.query(`ALTER TABLE "asset_faces" ADD "boundingBoxY2" integer NOT NULL DEFAULT '0'`);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "asset_faces" DROP COLUMN "boundingBoxY2"`);
+    await queryRunner.query(`ALTER TABLE "asset_faces" DROP COLUMN "boundingBoxX2"`);
+    await queryRunner.query(`ALTER TABLE "asset_faces" DROP COLUMN "boundingBoxY1"`);
+    await queryRunner.query(`ALTER TABLE "asset_faces" DROP COLUMN "boundingBoxX1"`);
+    await queryRunner.query(`ALTER TABLE "asset_faces" DROP COLUMN "imageHeight"`);
+    await queryRunner.query(`ALTER TABLE "asset_faces" DROP COLUMN "imageWidth"`);
+  }
+}
diff --git a/server/src/infra/repositories/person.repository.ts b/server/src/infra/repositories/person.repository.ts
index 8294e0d27..c4a04acab 100644
--- a/server/src/infra/repositories/person.repository.ts
+++ b/server/src/infra/repositories/person.repository.ts
@@ -1,4 +1,4 @@
-import { IPersonRepository, PersonSearchOptions } from '@app/domain';
+import { AssetFaceId, IPersonRepository, PersonSearchOptions } from '@app/domain';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
 import { AssetEntity, AssetFaceEntity, PersonEntity } from '../entities';
@@ -77,4 +77,8 @@ export class PersonRepository implements IPersonRepository {
     const { id } = await this.personRepository.save(entity);
     return this.personRepository.findOneByOrFail({ id });
   }
+
+  async getFaceById({ personId, assetId }: AssetFaceId): Promise<AssetFaceEntity | null> {
+    return this.assetFaceRepository.findOneBy({ assetId, personId });
+  }
 }
diff --git a/server/test/fixtures.ts b/server/test/fixtures.ts
index f8dc7a758..f1adb8a76 100644
--- a/server/test/fixtures.ts
+++ b/server/test/fixtures.ts
@@ -1157,6 +1157,16 @@ export const personStub = {
     thumbnailPath: '',
     faces: [],
   }),
+  newThumbnail: Object.freeze<PersonEntity>({
+    id: 'person-1',
+    createdAt: new Date('2021-01-01'),
+    updatedAt: new Date('2021-01-01'),
+    ownerId: userEntityStub.admin.id,
+    owner: userEntityStub.admin,
+    name: '',
+    thumbnailPath: '/new/path/to/thumbnail',
+    faces: [],
+  }),
 };
 
 export const partnerStub = {
@@ -1185,6 +1195,12 @@ export const faceStub = {
     personId: personStub.withName.id,
     person: personStub.withName,
     embedding: [1, 2, 3, 4],
+    boundingBoxX1: 0,
+    boundingBoxY1: 0,
+    boundingBoxX2: 1,
+    boundingBoxY2: 1,
+    imageHeight: 1024,
+    imageWidth: 1024,
   }),
 };
 
diff --git a/server/test/repositories/person.repository.mock.ts b/server/test/repositories/person.repository.mock.ts
index 0d0219577..68cd833ed 100644
--- a/server/test/repositories/person.repository.mock.ts
+++ b/server/test/repositories/person.repository.mock.ts
@@ -11,5 +11,7 @@ export const newPersonRepositoryMock = (): jest.Mocked<IPersonRepository> => {
     update: jest.fn(),
     deleteAll: jest.fn(),
     delete: jest.fn(),
+
+    getFaceById: jest.fn(),
   };
 };
diff --git a/web/src/api/open-api/api.ts b/web/src/api/open-api/api.ts
index 1393f5c20..9cacbed26 100644
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -1772,11 +1772,17 @@ export interface PersonResponseDto {
  */
 export interface PersonUpdateDto {
     /**
-     * 
+     * Person name.
      * @type {string}
      * @memberof PersonUpdateDto
      */
-    'name': string;
+    'name'?: string;
+    /**
+     * Asset is used to get the feature face thumbnail.
+     * @type {string}
+     * @memberof PersonUpdateDto
+     */
+    'featureFaceAssetId'?: string;
 }
 /**
  * 
diff --git a/web/src/lib/components/faces-page/face-thumbnail-selector.svelte b/web/src/lib/components/faces-page/face-thumbnail-selector.svelte
new file mode 100644
index 000000000..5d75c21b7
--- /dev/null
+++ b/web/src/lib/components/faces-page/face-thumbnail-selector.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { AssetResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';
+  import AssetSelectionViewer from '../shared-components/gallery-viewer/asset-selection-viewer.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let assets: AssetResponseDto[];
+
+  let selectedAsset: AssetResponseDto | undefined = undefined;
+
+  const handleSelectedAsset = async (event: CustomEvent) => {
+    const { asset }: { asset: AssetResponseDto } = event.detail;
+    selectedAsset = asset;
+    onClose();
+  };
+
+  const onClose = () => {
+    dispatch('go-back', { selectedAsset });
+  };
+</script>
+
+<section
+  transition:fly={{ y: 500, duration: 100, easing: quintOut }}
+  class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
+>
+  <ControlAppBar on:close-button-click={onClose}>
+    <svelte:fragment slot="leading">Select feature photo</svelte:fragment>
+  </ControlAppBar>
+  <section class="pt-[100px] pl-[70px] bg-immich-bg dark:bg-immich-dark-bg">
+    <AssetSelectionViewer {assets} on:select={handleSelectedAsset} />
+  </section>
+</section>
diff --git a/web/src/lib/components/shared-components/gallery-viewer/asset-selection-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/asset-selection-viewer.svelte
new file mode 100644
index 000000000..070d56bfb
--- /dev/null
+++ b/web/src/lib/components/shared-components/gallery-viewer/asset-selection-viewer.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import { getThumbnailSize } from '$lib/utils/thumbnail-util';
+  import { AssetResponseDto, ThumbnailFormat } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import { flip } from 'svelte/animate';
+
+  export let assets: AssetResponseDto[];
+  export let selectedAssets: Set<AssetResponseDto> = new Set();
+
+  let viewWidth: number;
+  $: thumbnailSize = getThumbnailSize(assets.length, viewWidth);
+
+  let dispatch = createEventDispatcher();
+
+  const selectAssetHandler = (event: CustomEvent) => {
+    const { asset }: { asset: AssetResponseDto } = event.detail;
+    let temp = new Set(selectedAssets);
+    if (selectedAssets.has(asset)) {
+      temp.delete(asset);
+    } else {
+      temp.add(asset);
+    }
+
+    selectedAssets = temp;
+    dispatch('select', { asset, selectedAssets });
+  };
+</script>
+
+{#if assets.length > 0}
+  <div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
+    {#each assets as asset (asset.id)}
+      <div animate:flip={{ duration: 500 }}>
+        <Thumbnail
+          {asset}
+          {thumbnailSize}
+          format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
+          on:click={selectAssetHandler}
+          selected={selectedAssets.has(asset)}
+        />
+      </div>
+    {/each}
+  </div>
+{/if}
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index 2f2737d15..6281583b9 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -10,6 +10,7 @@
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
   import { flip } from 'svelte/animate';
   import { archivedAsset } from '$lib/stores/archived-asset.store';
+  import { getThumbnailSize } from '$lib/utils/thumbnail-util';
 
   export let assets: AssetResponseDto[];
   export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@@ -24,22 +25,10 @@
   let currentViewAssetIndex = 0;
 
   let viewWidth: number;
-  let thumbnailSize = 300;
+  $: thumbnailSize = getThumbnailSize(assets.length, viewWidth);
 
   $: isMultiSelectionMode = selectedAssets.size > 0;
 
-  $: {
-    if (assets.length < 6) {
-      thumbnailSize = Math.min(320, Math.floor(viewWidth / assets.length - assets.length));
-    } else {
-      if (viewWidth > 600) thumbnailSize = Math.floor(viewWidth / 7 - 7);
-      else if (viewWidth > 400) thumbnailSize = Math.floor(viewWidth / 4 - 6);
-      else if (viewWidth > 300) thumbnailSize = Math.floor(viewWidth / 2 - 6);
-      else if (viewWidth > 200) thumbnailSize = Math.floor(viewWidth / 2 - 6);
-      else if (viewWidth > 100) thumbnailSize = Math.floor(viewWidth / 1 - 6);
-    }
-  }
-
   const viewAssetHandler = (event: CustomEvent) => {
     const { asset }: { asset: AssetResponseDto } = event.detail;
 
diff --git a/web/src/lib/utils/thumbnail-util.ts b/web/src/lib/utils/thumbnail-util.ts
new file mode 100644
index 000000000..07c99ddb4
--- /dev/null
+++ b/web/src/lib/utils/thumbnail-util.ts
@@ -0,0 +1,19 @@
+/**
+ * Calculate thumbnail size based on number of assets and viewport width
+ * @param assetCount Number of assets in the view
+ * @param viewWidth viewport width
+ * @returns thumbnail size
+ */
+export function getThumbnailSize(assetCount: number, viewWidth: number): number {
+  if (assetCount < 6) {
+    return Math.min(320, Math.floor(viewWidth / assetCount - assetCount));
+  } else {
+    if (viewWidth > 600) return viewWidth / 7 - 7;
+    else if (viewWidth > 400) return viewWidth / 4 - 6;
+    else if (viewWidth > 300) return viewWidth / 2 - 6;
+    else if (viewWidth > 200) return viewWidth / 2 - 6;
+    else if (viewWidth > 100) return viewWidth / 1 - 6;
+  }
+
+  return 300;
+}
diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index 53523e4b8..47f399915 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -22,10 +22,17 @@
   import type { PageData } from './$types';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import FaceThumbnailSelector from '$lib/components/faces-page/face-thumbnail-selector.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
 
   export let data: PageData;
 
-  let isEditName = false;
+  let isEditingName = false;
+  let isSelectingFace = false;
   let previousRoute: string = AppRoute.EXPLORE;
   let selectedAssets: Set<AssetResponseDto> = new Set();
   $: isMultiSelectionMode = selectedAssets.size > 0;
@@ -41,7 +48,7 @@
 
   const handleNameChange = async (name: string) => {
     try {
-      isEditName = false;
+      isEditingName = false;
       data.person.name = name;
       await api.personApi.updatePerson({ id: data.person.id, personUpdateDto: { name } });
     } catch (error) {
@@ -55,6 +62,25 @@
   const handleSelectAll = () => {
     selectedAssets = new Set(data.assets);
   };
+
+  const handleSelectFeaturePhoto = async (event: CustomEvent) => {
+    isSelectingFace = false;
+
+    const { selectedAsset }: { selectedAsset: AssetResponseDto | undefined } = event.detail;
+
+    if (selectedAsset) {
+      await api.personApi.updatePerson({
+        id: data.person.id,
+        personUpdateDto: { featureFaceAssetId: selectedAsset.id },
+      });
+
+      // TODO: Replace by Websocket in the future
+      notificationController.show({
+        message: 'Feature photo updated, refresh page to see changes',
+        type: NotificationType.Info,
+      });
+    }
+  };
 </script>
 
 {#if isMultiSelectionMode}
@@ -73,30 +99,39 @@
     </AssetSelectContextMenu>
   </AssetSelectControlBar>
 {:else}
-  <ControlAppBar showBackButton backIcon={ArrowLeft} on:close-button-click={() => goto(previousRoute)} />
+  <ControlAppBar showBackButton backIcon={ArrowLeft} on:close-button-click={() => goto(previousRoute)}>
+    <svelte:fragment slot="trailing">
+      <AssetSelectContextMenu icon={DotsVertical} title="Menu">
+        <MenuOption text="Change feature photo" on:click={() => (isSelectingFace = true)} />
+      </AssetSelectContextMenu>
+    </svelte:fragment>
+  </ControlAppBar>
 {/if}
 
 <!-- Face information block -->
 <section class="pt-24 px-4 sm:px-6 flex place-items-center">
-  {#if isEditName}
+  {#if isEditingName}
     <EditNameInput
       person={data.person}
       on:change={(event) => handleNameChange(event.detail)}
-      on:cancel={() => (isEditName = false)}
+      on:cancel={() => (isEditingName = false)}
     />
   {:else}
-    <ImageThumbnail
-      circle
-      shadow
-      url={api.getPeopleThumbnailUrl(data.person.id)}
-      altText={data.person.name}
-      widthStyle="3.375rem"
-      heightStyle="3.375rem"
-    />
+    <button on:click={() => (isSelectingFace = true)}>
+      <ImageThumbnail
+        circle
+        shadow
+        url={api.getPeopleThumbnailUrl(data.person.id)}
+        altText={data.person.name}
+        widthStyle="3.375rem"
+        heightStyle="3.375rem"
+      />
+    </button>
+
     <button
       title="Edit name"
       class="px-4 text-immich-primary dark:text-immich-dark-primary"
-      on:click={() => (isEditName = true)}
+      on:click={() => (isEditingName = true)}
     >
       {#if data.person.name}
         <p class="font-medium py-2">{data.person.name}</p>
@@ -109,10 +144,16 @@
 </section>
 
 <!-- Gallery Block -->
-<section class="relative pt-8 sm:px-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
-  <section class="overflow-y-auto relative immich-scrollbar">
-    <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
-      <GalleryViewer assets={data.assets} viewFrom="search-page" showArchiveIcon={true} bind:selectedAssets />
+{#if !isSelectingFace}
+  <section class="relative pt-8 sm:px-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
+    <section class="overflow-y-auto relative immich-scrollbar">
+      <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
+        <GalleryViewer assets={data.assets} viewFrom="search-page" showArchiveIcon={true} bind:selectedAssets />
+      </section>
     </section>
   </section>
-</section>
+{/if}
+
+{#if isSelectingFace}
+  <FaceThumbnailSelector assets={data.assets} on:go-back={handleSelectFeaturePhoto} />
+{/if}

From 1a0a3aa2c1d749cbf8597ccf850e659de8c16510 Mon Sep 17 00:00:00 2001
From: Thomas <9749173+uhthomas@users.noreply.github.com>
Date: Mon, 3 Jul 2023 03:02:38 +0100
Subject: [PATCH 35/53] fix(web): use natural asset order for navigation
 (#3092)

---
 web/src/lib/stores/asset-interaction.store.ts | 40 +++++++------------
 1 file changed, 14 insertions(+), 26 deletions(-)

diff --git a/web/src/lib/stores/asset-interaction.store.ts b/web/src/lib/stores/asset-interaction.store.ts
index a49f7f4bc..cff05b2b5 100644
--- a/web/src/lib/stores/asset-interaction.store.ts
+++ b/web/src/lib/stores/asset-interaction.store.ts
@@ -1,6 +1,5 @@
 import { AssetGridState, BucketPosition } from '$lib/models/asset-grid-state';
 import { api, AssetResponseDto } from '@api';
-import { sortBy } from 'lodash-es';
 import { derived, writable } from 'svelte/store';
 import { assetGridState, assetStore } from './assets.store';
 
@@ -20,8 +19,6 @@ function createAssetInteractionStore() {
   let _selectedAssets: Set<AssetResponseDto>;
   let _selectedGroup: Set<string>;
   let _assetsInAlbums: AssetResponseDto[];
-  let savedAssetLength = 0;
-  let assetSortedByDate: AssetResponseDto[] = [];
 
   // Subscriber
   assetGridState.subscribe((state) => {
@@ -64,40 +61,31 @@ function createAssetInteractionStore() {
   };
 
   const navigateAsset = async (direction: 'next' | 'previous') => {
-    // Flatten and sort the asset by date if there are new assets
-    if (assetSortedByDate.length === 0 || savedAssetLength !== _assetGridState.assets.length) {
-      assetSortedByDate = sortBy(_assetGridState.assets, (a) => a.fileCreatedAt);
-      savedAssetLength = _assetGridState.assets.length;
-    }
+    let index = _assetGridState.assets.findIndex(({ id }) => id === _viewingAssetStoreState.id);
 
-    // Find the index of the current asset
-    const currentIndex = assetSortedByDate.findIndex((a) => a.id === _viewingAssetStoreState.id);
+    index = direction === 'next' ? index + 1 : index - 1;
 
-    // Get the next or previous asset
-    const nextIndex = direction === 'previous' ? currentIndex + 1 : currentIndex - 1;
-
-    // Run out of asset, this might be because there is no asset in the next bucket.
-    if (nextIndex == -1) {
-      let nextBucket = '';
-      // Find next bucket that doesn't have all assets loaded
+    const needMoreAbove = index < 0;
+    const needMoreBelow = index >= _assetGridState.assets.length;
 
+    // Try to load more assets if we're at the end.
+    if (needMoreAbove || needMoreBelow) {
       for (const bucket of _assetGridState.buckets) {
         if (bucket.assets.length === 0) {
-          nextBucket = bucket.bucketDate;
+          await assetStore.getAssetsByBucket(
+            bucket.bucketDate,
+            needMoreAbove ? BucketPosition.Above : BucketPosition.Below,
+          );
+          navigateAsset(direction);
           break;
         }
       }
-
-      if (nextBucket !== '') {
-        await assetStore.getAssetsByBucket(nextBucket, BucketPosition.Below);
-        navigateAsset(direction);
-      }
       return;
     }
 
-    const nextAsset = assetSortedByDate[nextIndex];
-    if (nextAsset) {
-      setViewingAsset(nextAsset);
+    const asset = _assetGridState.assets[index];
+    if (asset) {
+      setViewingAsset(asset);
     }
   };
 

From 2099b04057a161ec44b557abac17763b4e696657 Mon Sep 17 00:00:00 2001
From: Mert <101130780+mertalev@users.noreply.github.com>
Date: Sun, 2 Jul 2023 22:37:12 -0400
Subject: [PATCH 36/53] fix(server): Premature stream close error when viewing
 videos in web (#3093)

* suppress 'ERR_STREAM_PREMATURE_CLOSE'

* refactor stream range logic
---
 .../src/immich/api-v1/asset/asset.service.ts  | 113 ++++++++----------
 1 file changed, 53 insertions(+), 60 deletions(-)

diff --git a/server/src/immich/api-v1/asset/asset.service.ts b/server/src/immich/api-v1/asset/asset.service.ts
index 9a275c66d..0a1ee8e0e 100644
--- a/server/src/immich/api-v1/asset/asset.service.ts
+++ b/server/src/immich/api-v1/asset/asset.service.ts
@@ -21,16 +21,15 @@ import {
   InternalServerErrorException,
   Logger,
   NotFoundException,
-  StreamableFile,
 } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Response as Res } from 'express';
-import { constants, createReadStream, stat } from 'fs';
+import { constants, createReadStream } from 'fs';
 import fs from 'fs/promises';
 import mime from 'mime-types';
 import path from 'path';
+import { pipeline } from 'stream/promises';
 import { QueryFailedError, Repository } from 'typeorm';
-import { promisify } from 'util';
 import { IAssetRepository } from './asset-repository';
 import { AssetCore } from './asset.core';
 import { AssetBulkUploadCheckDto } from './dto/asset-check.dto';
@@ -63,8 +62,6 @@ import { CuratedLocationsResponseDto } from './response-dto/curated-locations-re
 import { CuratedObjectsResponseDto } from './response-dto/curated-objects-response.dto';
 import { DeleteAssetResponseDto, DeleteAssetStatusEnum } from './response-dto/delete-asset-response.dto';
 
-const fileInfo = promisify(stat);
-
 interface ServableFile {
   filepath: string;
   contentType: string;
@@ -263,7 +260,7 @@ export class AssetService {
       return this.streamFile(thumbnailPath, res, headers);
     } catch (e) {
       res.header('Cache-Control', 'none');
-      Logger.error(`Cannot create read stream for asset ${asset.id}`, 'getAssetThumbnail');
+      this.logger.error(`Cannot create read stream for asset ${asset.id}`, 'getAssetThumbnail');
       throw new InternalServerErrorException(
         `Cannot read thumbnail file for asset ${asset.id} - contact your administrator`,
         { cause: e as Error },
@@ -294,7 +291,7 @@ export class AssetService {
         const { filepath, contentType } = this.getServePath(asset, query, allowOriginalFile);
         return this.streamFile(filepath, res, headers, contentType);
       } catch (e) {
-        Logger.error(`Cannot create read stream for asset ${asset.id} ${JSON.stringify(e)}`, 'serveFile[IMAGE]');
+        this.logger.error(`Cannot create read stream for asset ${asset.id} ${JSON.stringify(e)}`, 'serveFile[IMAGE]');
         throw new InternalServerErrorException(
           e,
           `Cannot read thumbnail file for asset ${asset.id} - contact your administrator`,
@@ -302,56 +299,8 @@ export class AssetService {
       }
     } else {
       try {
-        // Handle Video
-        let videoPath = asset.originalPath;
-        let mimeType = asset.mimeType;
-
-        await fs.access(videoPath, constants.R_OK);
-
-        if (asset.encodedVideoPath) {
-          videoPath = asset.encodedVideoPath == '' ? String(asset.originalPath) : String(asset.encodedVideoPath);
-          mimeType = asset.encodedVideoPath == '' ? asset.mimeType : 'video/mp4';
-        }
-
-        const { size } = await fileInfo(videoPath);
-        const range = headers.range;
-
-        if (range) {
-          /** Extracting Start and End value from Range Header */
-          const [startStr, endStr] = range.replace(/bytes=/, '').split('-');
-          let start = parseInt(startStr, 10);
-          let end = endStr ? parseInt(endStr, 10) : size - 1;
-
-          if (!isNaN(start) && isNaN(end)) {
-            start = start;
-            end = size - 1;
-          }
-          if (isNaN(start) && !isNaN(end)) {
-            start = size - end;
-            end = size - 1;
-          }
-
-          // Handle unavailable range request
-          if (start >= size || end >= size) {
-            console.error('Bad Request');
-            // Return the 416 Range Not Satisfiable.
-            res.status(416).set({ 'Content-Range': `bytes */${size}` });
-
-            throw new BadRequestException('Bad Request Range');
-          }
-
-          /** Sending Partial Content With HTTP Code 206 */
-          res.status(206).set({
-            'Content-Range': `bytes ${start}-${end}/${size}`,
-            'Accept-Ranges': 'bytes',
-            'Content-Length': end - start + 1,
-            'Content-Type': mimeType,
-          });
-
-          const videoStream = createReadStream(videoPath, { start, end });
-
-          return new StreamableFile(videoStream);
-        }
+        const videoPath = asset.encodedVideoPath ? asset.encodedVideoPath : asset.originalPath;
+        const mimeType = asset.encodedVideoPath ? 'video/mp4' : asset.mimeType;
 
         return this.streamFile(videoPath, res, headers, mimeType);
       } catch (e: Error | any) {
@@ -618,12 +567,16 @@ export class AssetService {
   }
 
   private async streamFile(filepath: string, res: Res, headers: Record<string, string>, contentType?: string | null) {
+    await fs.access(filepath, constants.R_OK);
+    const { size, mtimeNs } = await fs.stat(filepath, { bigint: true });
+
     if (contentType) {
       res.header('Content-Type', contentType);
     }
 
+    const range = this.setResRange(res, headers, Number(size));
+
     // etag
-    const { size, mtimeNs } = await fs.stat(filepath, { bigint: true });
     const etag = `W/"${size}-${mtimeNs}"`;
     res.setHeader('ETag', etag);
     if (etag === headers['if-none-match']) {
@@ -631,8 +584,48 @@ export class AssetService {
       return;
     }
 
-    await fs.access(filepath, constants.R_OK);
+    const stream = createReadStream(filepath, range);
+    return await pipeline(stream, res).catch((err) => {
+      if (err.code !== 'ERR_STREAM_PREMATURE_CLOSE') {
+        this.logger.error(err);
+      }
+    });
+  }
 
-    return new StreamableFile(createReadStream(filepath));
+  private setResRange(res: Res, headers: Record<string, string>, size: number) {
+    if (!headers.range) {
+      return {};
+    }
+
+    /** Extracting Start and End value from Range Header */
+    const [startStr, endStr] = headers.range.replace(/bytes=/, '').split('-');
+    let start = parseInt(startStr, 10);
+    let end = endStr ? parseInt(endStr, 10) : size - 1;
+
+    if (!isNaN(start) && isNaN(end)) {
+      start = start;
+      end = size - 1;
+    }
+
+    if (isNaN(start) && !isNaN(end)) {
+      start = size - end;
+      end = size - 1;
+    }
+
+    // Handle unavailable range request
+    if (start >= size || end >= size) {
+      console.error('Bad Request');
+      res.status(416).set({ 'Content-Range': `bytes */${size}` });
+
+      throw new BadRequestException('Bad Request Range');
+    }
+
+    res.status(206).set({
+      'Content-Range': `bytes ${start}-${end}/${size}`,
+      'Accept-Ranges': 'bytes',
+      'Content-Length': end - start + 1,
+    });
+
+    return { start, end };
   }
 }

From 8fd4edb20609a9d5d07c64e53a7c295e59d54793 Mon Sep 17 00:00:00 2001
From: Thomas <9749173+uhthomas@users.noreply.github.com>
Date: Mon, 3 Jul 2023 10:56:58 +0100
Subject: [PATCH 37/53] feat(web): select a range of assets (#3086)

The shift key can be held to select a range of assets.

Fixes: #2862
---
 .../assets/thumbnail/thumbnail.svelte         | 38 ++++++---
 .../photos-page/asset-date-group.svelte       | 38 +++++----
 .../components/photos-page/asset-grid.svelte  | 79 ++++++++++++++++++-
 web/src/lib/stores/asset-interaction.store.ts | 20 +++++
 web/src/lib/stores/assets.store.ts            | 11 ++-
 5 files changed, 154 insertions(+), 32 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index f0946cfd1..b49f5bacc 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -3,14 +3,15 @@
   import { timeToSeconds } from '$lib/utils/time-to-seconds';
   import { api, AssetResponseDto, AssetTypeEnum, ThumbnailFormat } from '@api';
   import { createEventDispatcher } from 'svelte';
+  import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
   import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
+  import Heart from 'svelte-material-icons/Heart.svelte';
+  import ImageBrokenVariant from 'svelte-material-icons/ImageBrokenVariant.svelte';
   import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
   import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
-  import Heart from 'svelte-material-icons/Heart.svelte';
-  import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
+  import { fade } from 'svelte/transition';
   import ImageThumbnail from './image-thumbnail.svelte';
   import VideoThumbnail from './video-thumbnail.svelte';
-  import ImageBrokenVariant from 'svelte-material-icons/ImageBrokenVariant.svelte';
 
   const dispatch = createEventDispatcher();
 
@@ -21,6 +22,7 @@
   export let thumbnailHeight: number | undefined = undefined;
   export let format: ThumbnailFormat = ThumbnailFormat.Webp;
   export let selected = false;
+  export let selectionCandidate = false;
   export let disabled = false;
   export let readonly = false;
   export let publicSharedKey: string | undefined = undefined;
@@ -30,7 +32,7 @@
 
   $: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
 
-  $: [width, height] = (() => {
+  $: [width, height] = ((): [number, number] => {
     if (thumbnailSize) {
       return [thumbnailSize, thumbnailSize];
     }
@@ -42,12 +44,19 @@
     return [235, 235];
   })();
 
-  const thumbnailClickedHandler = () => {
+  const thumbnailClickedHandler = (e: Event) => {
     if (!disabled) {
+      e.preventDefault();
       dispatch('click', { asset });
     }
   };
 
+  const thumbnailKeyDownHandler = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      thumbnailClickedHandler(e);
+    }
+  };
+
   const onIconClickedHandler = (e: MouseEvent) => {
     e.stopPropagation();
     if (!disabled) {
@@ -68,21 +77,23 @@
     on:mouseenter={() => (mouseOver = true)}
     on:mouseleave={() => (mouseOver = false)}
     on:click={thumbnailClickedHandler}
-    on:keydown={thumbnailClickedHandler}
+    on:keydown={thumbnailKeyDownHandler}
   >
     {#if intersecting}
       <div class="absolute w-full h-full z-20">
         <!-- Select asset button  -->
-        {#if !readonly}
+        {#if !readonly && (mouseOver || selected || selectionCandidate)}
           <button
             on:click={onIconClickedHandler}
-            class="absolute p-2 group-hover:block"
-            class:group-hover:block={!disabled}
-            class:hidden={!selected}
+            on:keydown|preventDefault
+            on:keyup|preventDefault
+            class="absolute p-2"
             class:cursor-not-allowed={disabled}
             role="checkbox"
             aria-checked={selected}
             {disabled}
+            in:fade={{ duration: 100 }}
+            out:fade={{ duration: 100 }}
           >
             {#if disabled}
               <CheckCircle size="24" class="text-zinc-800" />
@@ -153,6 +164,13 @@
           </div>
         {/if}
       </div>
+      {#if selectionCandidate}
+        <div
+          class="absolute w-full h-full top-0 bg-immich-primary opacity-40"
+          in:fade={{ duration: 100 }}
+          out:fade={{ duration: 100 }}
+        />
+      {/if}
     {/if}
   </div>
 </IntersectionObserver>
diff --git a/web/src/lib/components/photos-page/asset-date-group.svelte b/web/src/lib/components/photos-page/asset-date-group.svelte
index fc9eaf2a6..6298c19a0 100644
--- a/web/src/lib/components/photos-page/asset-date-group.svelte
+++ b/web/src/lib/components/photos-page/asset-date-group.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     assetInteractionStore,
+    assetSelectionCandidates,
     assetsInAlbumStoreState,
     isMultiSelectStoreState,
     selectedAssets,
@@ -8,15 +9,15 @@
   } from '$lib/stores/asset-interaction.store';
   import { assetStore } from '$lib/stores/assets.store';
   import { locale } from '$lib/stores/preferences.store';
+  import { getAssetRatio } from '$lib/utils/asset-utils';
   import type { AssetResponseDto } from '@api';
   import justifiedLayout from 'justified-layout';
   import lodash from 'lodash-es';
+  import { createEventDispatcher } from 'svelte';
   import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
   import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
   import { fly } from 'svelte/transition';
-  import { getAssetRatio } from '$lib/utils/asset-utils';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
-  import { createEventDispatcher } from 'svelte';
 
   export let assets: AssetResponseDto[];
   export let bucketDate: string;
@@ -130,18 +131,19 @@
     dateGroupTitle: string,
   ) => {
     if ($selectedAssets.has(asset)) {
+      for (const candidate of $assetSelectionCandidates || []) {
+        assetInteractionStore.removeAssetFromMultiselectGroup(candidate);
+      }
       assetInteractionStore.removeAssetFromMultiselectGroup(asset);
     } else {
+      for (const candidate of $assetSelectionCandidates || []) {
+        assetInteractionStore.addAssetToMultiselectGroup(candidate);
+      }
       assetInteractionStore.addAssetToMultiselectGroup(asset);
     }
 
     // Check if all assets are selected in a group to toggle the group selection's icon
-    let selectedAssetsInGroupCount = 0;
-    assetsInDateGroup.forEach((asset) => {
-      if ($selectedAssets.has(asset)) {
-        selectedAssetsInGroupCount++;
-      }
-    });
+    let selectedAssetsInGroupCount = assetsInDateGroup.filter((asset) => $selectedAssets.has(asset)).length;
 
     // if all assets are selected in a group, add the group to selected group
     if (selectedAssetsInGroupCount == assetsInDateGroup.length) {
@@ -151,9 +153,13 @@
     }
   };
 
-  const assetMouseEventHandler = (dateGroupTitle: string) => {
+  const assetMouseEventHandler = (dateGroupTitle: string, asset: AssetResponseDto | null) => {
     // Show multi select icon on hover on date group
     hoveredDateGroup = dateGroupTitle;
+
+    if ($isMultiSelectStoreState) {
+      dispatch('selectAssetCandidates', { asset });
+    }
   };
 </script>
 
@@ -171,9 +177,12 @@
       class="flex flex-col mt-5"
       on:mouseenter={() => {
         isMouseOverGroup = true;
-        assetMouseEventHandler(dateGroupTitle);
+        assetMouseEventHandler(dateGroupTitle, null);
+      }}
+      on:mouseleave={() => {
+        isMouseOverGroup = false;
+        assetMouseEventHandler(dateGroupTitle, null);
       }}
-      on:mouseleave={() => (isMouseOverGroup = false)}
     >
       <!-- Date group title -->
       <p
@@ -216,9 +225,10 @@
               {groupIndex}
               on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)}
               on:select={() => assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle)}
-              on:mouse-event={() => assetMouseEventHandler(dateGroupTitle)}
-              selected={$selectedAssets.has(asset) || $assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1}
-              disabled={$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1}
+              on:mouse-event={() => assetMouseEventHandler(dateGroupTitle, asset)}
+              selected={$selectedAssets.has(asset) || $assetsInAlbumStoreState.some(({ id }) => id === asset.id)}
+              selectionCandidate={$assetSelectionCandidates.has(asset)}
+              disabled={$assetsInAlbumStoreState.some(({ id }) => id === asset.id)}
               thumbnailWidth={box.width}
               thumbnailHeight={box.height}
             />
diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index 7e7b7979d..7a8053316 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
+  import { BucketPosition } from '$lib/models/asset-grid-state';
   import {
     assetInteractionStore,
+    isMultiSelectStoreState,
     isViewingAssetStoreState,
+    selectedAssets,
     viewingAssetStoreState,
   } from '$lib/stores/asset-interaction.store';
   import { assetGridState, assetStore, loadingBucketState } from '$lib/stores/assets.store';
   import type { UserResponseDto } from '@api';
-  import { AssetCountByTimeBucketResponseDto, AssetResponseDto, TimeGroupEnum, api } from '@api';
+  import { api, AssetCountByTimeBucketResponseDto, AssetResponseDto, TimeGroupEnum } from '@api';
   import { onDestroy, onMount } from 'svelte';
   import AssetViewer from '../asset-viewer/asset-viewer.svelte';
   import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
@@ -16,7 +19,6 @@
     OnScrollbarDragDetail,
   } from '../shared-components/scrollbar/scrollbar.svelte';
   import AssetDateGroup from './asset-date-group.svelte';
-  import { BucketPosition } from '$lib/models/asset-grid-state';
   import MemoryLane from './memory-lane.svelte';
 
   export let user: UserResponseDto | undefined = undefined;
@@ -111,8 +113,80 @@
     navigateToNextAsset();
     assetStore.removeAsset(asset.id);
   };
+
+  let lastAssetMouseEvent: AssetResponseDto | null = null;
+
+  $: if (!lastAssetMouseEvent) {
+    assetInteractionStore.clearAssetSelectionCandidates();
+  }
+
+  let shiftKeyIsDown = false;
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Shift') {
+      e.preventDefault();
+      shiftKeyIsDown = true;
+    }
+  };
+
+  const onKeyUp = (e: KeyboardEvent) => {
+    if (e.key === 'Shift') {
+      e.preventDefault();
+      shiftKeyIsDown = false;
+    }
+  };
+
+  $: if (!shiftKeyIsDown) {
+    assetInteractionStore.clearAssetSelectionCandidates();
+  }
+
+  $: if (shiftKeyIsDown && lastAssetMouseEvent) {
+    selectAssetCandidates(lastAssetMouseEvent);
+  }
+
+  const getLastSelectedAsset = () => {
+    let value;
+    for (value of $selectedAssets);
+    return value;
+  };
+
+  const handleSelectAssetCandidates = (e: CustomEvent) => {
+    const asset = e.detail.asset;
+    if (asset) {
+      selectAssetCandidates(asset);
+    }
+    lastAssetMouseEvent = asset;
+  };
+
+  const selectAssetCandidates = (asset: AssetResponseDto) => {
+    if (!shiftKeyIsDown) {
+      return;
+    }
+
+    const lastSelectedAsset = getLastSelectedAsset();
+    if (!lastSelectedAsset) {
+      return;
+    }
+
+    let start = $assetGridState.assets.indexOf(asset);
+    let end = $assetGridState.assets.indexOf(lastSelectedAsset);
+
+    if (start > end) {
+      [start, end] = [end, start];
+    }
+
+    assetInteractionStore.setAssetSelectionCandidates($assetGridState.assets.slice(start, end + 1));
+  };
+
+  const onSelectStart = (e: Event) => {
+    if ($isMultiSelectStoreState && shiftKeyIsDown) {
+      e.preventDefault();
+    }
+  };
 </script>
 
+<svelte:window on:keydown={onKeyDown} on:keyup={onKeyUp} on:selectstart={onSelectStart} />
+
 {#if bucketInfo && viewportHeight && $assetGridState.timelineHeight > viewportHeight}
   <Scrollbar
     scrollbarHeight={viewportHeight}
@@ -155,6 +229,7 @@
               <AssetDateGroup
                 {isAlbumSelectionMode}
                 on:shift={handleScrollTimeline}
+                on:selectAssetCandidates={handleSelectAssetCandidates}
                 assets={bucket.assets}
                 bucketDate={bucket.bucketDate}
                 bucketHeight={bucket.bucketHeight}
diff --git a/web/src/lib/stores/asset-interaction.store.ts b/web/src/lib/stores/asset-interaction.store.ts
index cff05b2b5..494b02395 100644
--- a/web/src/lib/stores/asset-interaction.store.ts
+++ b/web/src/lib/stores/asset-interaction.store.ts
@@ -12,6 +12,7 @@ export const assetsInAlbumStoreState = writable<AssetResponseDto[]>([]);
 export const selectedAssets = writable<Set<AssetResponseDto>>(new Set());
 export const selectedGroup = writable<Set<string>>(new Set());
 export const isMultiSelectStoreState = derived(selectedAssets, ($selectedAssets) => $selectedAssets.size > 0);
+export const assetSelectionCandidates = writable<Set<AssetResponseDto>>(new Set());
 
 function createAssetInteractionStore() {
   let _assetGridState = new AssetGridState();
@@ -19,6 +20,7 @@ function createAssetInteractionStore() {
   let _selectedAssets: Set<AssetResponseDto>;
   let _selectedGroup: Set<string>;
   let _assetsInAlbums: AssetResponseDto[];
+  let _assetSelectionCandidates: Set<AssetResponseDto>;
 
   // Subscriber
   assetGridState.subscribe((state) => {
@@ -41,6 +43,10 @@ function createAssetInteractionStore() {
     _assetsInAlbums = assets;
   });
 
+  assetSelectionCandidates.subscribe((assets) => {
+    _assetSelectionCandidates = assets;
+  });
+
   // Methods
 
   /**
@@ -117,14 +123,26 @@ function createAssetInteractionStore() {
     selectedGroup.set(_selectedGroup);
   };
 
+  const setAssetSelectionCandidates = (assets: AssetResponseDto[]) => {
+    _assetSelectionCandidates = new Set(assets);
+    assetSelectionCandidates.set(_assetSelectionCandidates);
+  };
+
+  const clearAssetSelectionCandidates = () => {
+    _assetSelectionCandidates.clear();
+    assetSelectionCandidates.set(_assetSelectionCandidates);
+  };
+
   const clearMultiselect = () => {
     _selectedAssets.clear();
     _selectedGroup.clear();
+    _assetSelectionCandidates.clear();
     _assetsInAlbums = [];
 
     selectedAssets.set(_selectedAssets);
     selectedGroup.set(_selectedGroup);
     assetsInAlbumStoreState.set(_assetsInAlbums);
+    assetSelectionCandidates.set(_assetSelectionCandidates);
   };
 
   return {
@@ -136,6 +154,8 @@ function createAssetInteractionStore() {
     removeAssetFromMultiselectGroup,
     addGroupToMultiselectGroup,
     removeGroupFromMultiselectGroup,
+    setAssetSelectionCandidates,
+    clearAssetSelectionCandidates,
     clearMultiselect,
   };
 }
diff --git a/web/src/lib/stores/assets.store.ts b/web/src/lib/stores/assets.store.ts
index 13475dba6..f3d142edd 100644
--- a/web/src/lib/stores/assets.store.ts
+++ b/web/src/lib/stores/assets.store.ts
@@ -1,6 +1,5 @@
 import { AssetGridState, BucketPosition } from '$lib/models/asset-grid-state';
 import { api, AssetCountByTimeBucketResponseDto } from '@api';
-import { flatMap, sumBy } from 'lodash-es';
 import { writable } from 'svelte/store';
 
 /**
@@ -60,7 +59,7 @@ function createAssetStore() {
 
     // Update timeline height based on calculated bucket height
     assetGridState.update((state) => {
-      state.timelineHeight = sumBy(state.buckets, (d) => d.bucketHeight);
+      state.timelineHeight = state.buckets.reduce((acc, b) => acc + b.bucketHeight, 0);
       return state;
     });
   };
@@ -101,7 +100,7 @@ function createAssetStore() {
         const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucket);
         state.buckets[bucketIndex].assets = assets;
         state.buckets[bucketIndex].position = position;
-        state.assets = flatMap(state.buckets, (b) => b.assets);
+        state.assets = state.buckets.flatMap((b) => b.assets);
         return state;
       });
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -123,7 +122,7 @@ function createAssetStore() {
       if (state.buckets[bucketIndex].assets.length === 0) {
         _removeBucket(state.buckets[bucketIndex].bucketDate);
       }
-      state.assets = flatMap(state.buckets, (b) => b.assets);
+      state.assets = state.buckets.flatMap((b) => b.assets);
       return state;
     });
   };
@@ -132,7 +131,7 @@ function createAssetStore() {
     assetGridState.update((state) => {
       const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucketDate);
       state.buckets.splice(bucketIndex, 1);
-      state.assets = flatMap(state.buckets, (b) => b.assets);
+      state.assets = state.buckets.flatMap((b) => b.assets);
       return state;
     });
   };
@@ -180,7 +179,7 @@ function createAssetStore() {
       const assetIndex = state.buckets[bucketIndex].assets.findIndex((a) => a.id === assetId);
       state.buckets[bucketIndex].assets[assetIndex].isFavorite = isFavorite;
 
-      state.assets = flatMap(state.buckets, (b) => b.assets);
+      state.assets = state.buckets.flatMap((b) => b.assets);
       return state;
     });
   };

From 8e18acff853c92e156da9fb1b688d9ad389583a3 Mon Sep 17 00:00:00 2001
From: Sergey Kondrikov <sergey.kondrikov@gmail.com>
Date: Mon, 3 Jul 2023 15:04:46 +0300
Subject: [PATCH 38/53] feat(web): enhance date group title (#3094)

Co-authored-by: Alex <alex.tran1502@gmail.com>
---
 .../photos-page/asset-date-group.svelte       | 42 +++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/photos-page/asset-date-group.svelte b/web/src/lib/components/photos-page/asset-date-group.svelte
index 6298c19a0..c7dc0b67a 100644
--- a/web/src/lib/components/photos-page/asset-date-group.svelte
+++ b/web/src/lib/components/photos-page/asset-date-group.svelte
@@ -9,7 +9,6 @@
   } from '$lib/stores/asset-interaction.store';
   import { assetStore } from '$lib/stores/assets.store';
   import { locale } from '$lib/stores/preferences.store';
-  import { getAssetRatio } from '$lib/utils/asset-utils';
   import type { AssetResponseDto } from '@api';
   import justifiedLayout from 'justified-layout';
   import lodash from 'lodash-es';
@@ -17,6 +16,8 @@
   import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
   import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
   import { fly } from 'svelte/transition';
+  import { DateTime, Interval } from 'luxon';
+  import { getAssetRatio } from '$lib/utils/asset-utils';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
 
   export let assets: AssetResponseDto[];
@@ -161,6 +162,41 @@
       dispatch('selectAssetCandidates', { asset });
     }
   };
+
+  const formatGroupTitle = (date: DateTime): string => {
+    const today = DateTime.now().startOf('day');
+
+    // Today
+    if (today.hasSame(date, 'day')) {
+      return 'Today';
+    }
+
+    // Yesterday
+    if (Interval.fromDateTimes(date, today).length('days') == 1) {
+      return 'Yesterday';
+    }
+
+    // Last week
+    if (Interval.fromDateTimes(date, today).length('weeks') < 1) {
+      return date.toLocaleString({ weekday: 'long' });
+    }
+
+    // This year
+    if (today.hasSame(date, 'year')) {
+      return date.toLocaleString({
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+      });
+    }
+
+    return date.toLocaleString({
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
 </script>
 
 <section
@@ -170,7 +206,7 @@
   bind:clientWidth={viewportWidth}
 >
   {#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
-    {@const dateGroupTitle = new Date(assetsInDateGroup[0].fileCreatedAt).toLocaleDateString($locale, groupDateFormat)}
+    {@const dateGroupTitle = formatGroupTitle(DateTime.fromISO(assetsInDateGroup[0].fileCreatedAt).startOf('day'))}
     <!-- Asset Group By Date -->
 
     <div
@@ -204,7 +240,7 @@
           </div>
         {/if}
 
-        <span class="truncate" title={dateGroupTitle}>
+        <span class="first-letter:capitalize truncate" title={dateGroupTitle}>
           {dateGroupTitle}
         </span>
       </p>

From 8a3ab5be3e2628a5c777876eab3dc23ac519f2e6 Mon Sep 17 00:00:00 2001
From: Alex The Bot <alex.tran1502@gmail.com>
Date: Tue, 4 Jul 2023 15:51:53 +0000
Subject: [PATCH 39/53] Version v1.66.0

---
 machine-learning/pyproject.toml       | 2 +-
 mobile/android/fastlane/Fastfile      | 4 ++--
 mobile/ios/fastlane/Fastfile          | 2 +-
 mobile/openapi/README.md              | 2 +-
 mobile/pubspec.yaml                   | 2 +-
 server/immich-openapi-specs.json      | 2 +-
 server/package-lock.json              | 4 ++--
 server/package.json                   | 2 +-
 web/src/api/open-api/api.ts           | 2 +-
 web/src/api/open-api/base.ts          | 2 +-
 web/src/api/open-api/common.ts        | 2 +-
 web/src/api/open-api/configuration.ts | 2 +-
 web/src/api/open-api/index.ts         | 2 +-
 13 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/machine-learning/pyproject.toml b/machine-learning/pyproject.toml
index c7df97a64..69040d15f 100644
--- a/machine-learning/pyproject.toml
+++ b/machine-learning/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "machine-learning"
-version = "1.65.0"
+version = "1.66.0"
 description = ""
 authors = ["Hau Tran <alex.tran1502@gmail.com>"]
 readme = "README.md"
diff --git a/mobile/android/fastlane/Fastfile b/mobile/android/fastlane/Fastfile
index f14525339..56368b1c7 100644
--- a/mobile/android/fastlane/Fastfile
+++ b/mobile/android/fastlane/Fastfile
@@ -35,8 +35,8 @@ platform :android do
       task: 'bundle', 
       build_type: 'Release',
       properties: {
-        "android.injected.version.code" => 88,
-        "android.injected.version.name" => "1.65.0",
+        "android.injected.version.code" => 89,
+        "android.injected.version.name" => "1.66.0",
       }
     )
     upload_to_play_store(skip_upload_apk: true, skip_upload_images: true, skip_upload_screenshots: true, aab: '../build/app/outputs/bundle/release/app-release.aab')
diff --git a/mobile/ios/fastlane/Fastfile b/mobile/ios/fastlane/Fastfile
index 815a2fef2..125dbb622 100644
--- a/mobile/ios/fastlane/Fastfile
+++ b/mobile/ios/fastlane/Fastfile
@@ -19,7 +19,7 @@ platform :ios do
   desc "iOS Beta"
   lane :beta do
     increment_version_number(
-      version_number: "1.65.0"
+      version_number: "1.66.0"
     )
     increment_build_number(
       build_number: latest_testflight_build_number + 1,
diff --git a/mobile/openapi/README.md b/mobile/openapi/README.md
index 606e4671f..d3c924996 100644
--- a/mobile/openapi/README.md
+++ b/mobile/openapi/README.md
@@ -3,7 +3,7 @@ Immich API
 
 This Dart package is automatically generated by the [OpenAPI Generator](https://openapi-generator.tech) project:
 
-- API version: 1.65.0
+- API version: 1.66.0
 - Build package: org.openapitools.codegen.languages.DartClientCodegen
 
 ## Requirements
diff --git a/mobile/pubspec.yaml b/mobile/pubspec.yaml
index bcceda3de..2223d2e40 100644
--- a/mobile/pubspec.yaml
+++ b/mobile/pubspec.yaml
@@ -2,7 +2,7 @@ name: immich_mobile
 description: Immich - selfhosted backup media file on mobile phone
 
 publish_to: "none"
-version: 1.65.0+88
+version: 1.66.0+89
 isar_version: &isar_version 3.1.0+1
 
 environment:
diff --git a/server/immich-openapi-specs.json b/server/immich-openapi-specs.json
index fec62de63..34f459842 100644
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@@ -4322,7 +4322,7 @@
   "info": {
     "title": "Immich",
     "description": "Immich API",
-    "version": "1.65.0",
+    "version": "1.66.0",
     "contact": {}
   },
   "tags": [],
diff --git a/server/package-lock.json b/server/package-lock.json
index 6a2ecaaf2..8b5cd7ec6 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "immich",
-  "version": "1.65.0",
+  "version": "1.66.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "immich",
-      "version": "1.65.0",
+      "version": "1.66.0",
       "license": "UNLICENSED",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
diff --git a/server/package.json b/server/package.json
index 513fbb77f..e6b2e4b60 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "immich",
-  "version": "1.65.0",
+  "version": "1.66.0",
   "description": "",
   "author": "",
   "private": true,
diff --git a/web/src/api/open-api/api.ts b/web/src/api/open-api/api.ts
index 9cacbed26..412b0c383 100644
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.65.0
+ * The version of the OpenAPI document: 1.66.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/base.ts b/web/src/api/open-api/base.ts
index 724f10503..f4c4fedd9 100644
--- a/web/src/api/open-api/base.ts
+++ b/web/src/api/open-api/base.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.65.0
+ * The version of the OpenAPI document: 1.66.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/common.ts b/web/src/api/open-api/common.ts
index e9e8c41f5..014c3a630 100644
--- a/web/src/api/open-api/common.ts
+++ b/web/src/api/open-api/common.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.65.0
+ * The version of the OpenAPI document: 1.66.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/configuration.ts b/web/src/api/open-api/configuration.ts
index 9dad93679..654269d78 100644
--- a/web/src/api/open-api/configuration.ts
+++ b/web/src/api/open-api/configuration.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.65.0
+ * The version of the OpenAPI document: 1.66.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/index.ts b/web/src/api/open-api/index.ts
index 7183d73c6..8b4ef181a 100644
--- a/web/src/api/open-api/index.ts
+++ b/web/src/api/open-api/index.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.65.0
+ * The version of the OpenAPI document: 1.66.0
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

From 4add6cb26e1b9df0f0e4fc1684192a6bb7740613 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Tue, 4 Jul 2023 21:48:21 -0500
Subject: [PATCH 40/53] fix(web): Thumbnail not disappear after performing
 actions on the timeline (#3116)

* fix(web): Thumbnail not dissapear after action

* actual cause

* actual cause
---
 web/src/lib/components/assets/thumbnail/thumbnail.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index b49f5bacc..24ec8d0cd 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -92,8 +92,6 @@
             role="checkbox"
             aria-checked={selected}
             {disabled}
-            in:fade={{ duration: 100 }}
-            out:fade={{ duration: 100 }}
           >
             {#if disabled}
               <CheckCircle size="24" class="text-zinc-800" />

From 0d30ceb2846d186db68e546d2e25413af6fafeba Mon Sep 17 00:00:00 2001
From: Alex The Bot <alex.tran1502@gmail.com>
Date: Wed, 5 Jul 2023 02:50:53 +0000
Subject: [PATCH 41/53] Version v1.66.1

---
 machine-learning/pyproject.toml       | 2 +-
 mobile/android/fastlane/Fastfile      | 2 +-
 mobile/ios/fastlane/Fastfile          | 2 +-
 mobile/openapi/README.md              | 2 +-
 mobile/pubspec.yaml                   | 2 +-
 server/immich-openapi-specs.json      | 2 +-
 server/package-lock.json              | 4 ++--
 server/package.json                   | 2 +-
 web/src/api/open-api/api.ts           | 2 +-
 web/src/api/open-api/base.ts          | 2 +-
 web/src/api/open-api/common.ts        | 2 +-
 web/src/api/open-api/configuration.ts | 2 +-
 web/src/api/open-api/index.ts         | 2 +-
 13 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/machine-learning/pyproject.toml b/machine-learning/pyproject.toml
index 69040d15f..ab321c8b5 100644
--- a/machine-learning/pyproject.toml
+++ b/machine-learning/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "machine-learning"
-version = "1.66.0"
+version = "1.66.1"
 description = ""
 authors = ["Hau Tran <alex.tran1502@gmail.com>"]
 readme = "README.md"
diff --git a/mobile/android/fastlane/Fastfile b/mobile/android/fastlane/Fastfile
index 56368b1c7..bd427e209 100644
--- a/mobile/android/fastlane/Fastfile
+++ b/mobile/android/fastlane/Fastfile
@@ -36,7 +36,7 @@ platform :android do
       build_type: 'Release',
       properties: {
         "android.injected.version.code" => 89,
-        "android.injected.version.name" => "1.66.0",
+        "android.injected.version.name" => "1.66.1",
       }
     )
     upload_to_play_store(skip_upload_apk: true, skip_upload_images: true, skip_upload_screenshots: true, aab: '../build/app/outputs/bundle/release/app-release.aab')
diff --git a/mobile/ios/fastlane/Fastfile b/mobile/ios/fastlane/Fastfile
index 125dbb622..51b66dd95 100644
--- a/mobile/ios/fastlane/Fastfile
+++ b/mobile/ios/fastlane/Fastfile
@@ -19,7 +19,7 @@ platform :ios do
   desc "iOS Beta"
   lane :beta do
     increment_version_number(
-      version_number: "1.66.0"
+      version_number: "1.66.1"
     )
     increment_build_number(
       build_number: latest_testflight_build_number + 1,
diff --git a/mobile/openapi/README.md b/mobile/openapi/README.md
index d3c924996..42ecf4177 100644
--- a/mobile/openapi/README.md
+++ b/mobile/openapi/README.md
@@ -3,7 +3,7 @@ Immich API
 
 This Dart package is automatically generated by the [OpenAPI Generator](https://openapi-generator.tech) project:
 
-- API version: 1.66.0
+- API version: 1.66.1
 - Build package: org.openapitools.codegen.languages.DartClientCodegen
 
 ## Requirements
diff --git a/mobile/pubspec.yaml b/mobile/pubspec.yaml
index 2223d2e40..45189a7c6 100644
--- a/mobile/pubspec.yaml
+++ b/mobile/pubspec.yaml
@@ -2,7 +2,7 @@ name: immich_mobile
 description: Immich - selfhosted backup media file on mobile phone
 
 publish_to: "none"
-version: 1.66.0+89
+version: 1.66.1+89
 isar_version: &isar_version 3.1.0+1
 
 environment:
diff --git a/server/immich-openapi-specs.json b/server/immich-openapi-specs.json
index 34f459842..caae449e2 100644
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@@ -4322,7 +4322,7 @@
   "info": {
     "title": "Immich",
     "description": "Immich API",
-    "version": "1.66.0",
+    "version": "1.66.1",
     "contact": {}
   },
   "tags": [],
diff --git a/server/package-lock.json b/server/package-lock.json
index 8b5cd7ec6..f16a76e15 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "immich",
-  "version": "1.66.0",
+  "version": "1.66.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "immich",
-      "version": "1.66.0",
+      "version": "1.66.1",
       "license": "UNLICENSED",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
diff --git a/server/package.json b/server/package.json
index e6b2e4b60..9a8bd5298 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "immich",
-  "version": "1.66.0",
+  "version": "1.66.1",
   "description": "",
   "author": "",
   "private": true,
diff --git a/web/src/api/open-api/api.ts b/web/src/api/open-api/api.ts
index 412b0c383..c1a8f7f22 100644
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.66.0
+ * The version of the OpenAPI document: 1.66.1
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/base.ts b/web/src/api/open-api/base.ts
index f4c4fedd9..3281535e5 100644
--- a/web/src/api/open-api/base.ts
+++ b/web/src/api/open-api/base.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.66.0
+ * The version of the OpenAPI document: 1.66.1
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/common.ts b/web/src/api/open-api/common.ts
index 014c3a630..c9fda5ed7 100644
--- a/web/src/api/open-api/common.ts
+++ b/web/src/api/open-api/common.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.66.0
+ * The version of the OpenAPI document: 1.66.1
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/configuration.ts b/web/src/api/open-api/configuration.ts
index 654269d78..1a74d526b 100644
--- a/web/src/api/open-api/configuration.ts
+++ b/web/src/api/open-api/configuration.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.66.0
+ * The version of the OpenAPI document: 1.66.1
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/web/src/api/open-api/index.ts b/web/src/api/open-api/index.ts
index 8b4ef181a..1243cc241 100644
--- a/web/src/api/open-api/index.ts
+++ b/web/src/api/open-api/index.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.66.0
+ * The version of the OpenAPI document: 1.66.1
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

From 71a2914f3ea49cbb26973ddf35f6d04ff217cc10 Mon Sep 17 00:00:00 2001
From: Mert <101130780+mertalev@users.noreply.github.com>
Date: Wed, 5 Jul 2023 01:36:16 -0400
Subject: [PATCH 42/53] fix(server): transcodes failing due to storage
 migration happening simultaneously (#3071)

---
 server/src/domain/job/job.service.spec.ts      | 18 +++++++++++++++++-
 server/src/domain/job/job.service.ts           |  7 +++++++
 server/src/domain/media/media.service.ts       |  2 +-
 server/src/immich/api-v1/asset/asset.core.ts   |  5 +----
 .../immich/api-v1/asset/asset.service.spec.ts  |  1 -
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/server/src/domain/job/job.service.spec.ts b/server/src/domain/job/job.service.spec.ts
index e9a8f641a..1b424678b 100644
--- a/server/src/domain/job/job.service.spec.ts
+++ b/server/src/domain/job/job.service.spec.ts
@@ -1,6 +1,7 @@
 import { SystemConfig } from '@app/infra/entities';
 import { BadRequestException } from '@nestjs/common';
 import {
+  assetEntityStub,
   asyncTick,
   newAssetRepositoryMock,
   newCommunicationRepositoryMock,
@@ -271,6 +272,17 @@ describe(JobService.name, () => {
           JobName.GENERATE_THUMBHASH_THUMBNAIL,
         ],
       },
+      {
+        item: { name: JobName.GENERATE_JPEG_THUMBNAIL, data: { id: 'asset-1', source: 'upload' } },
+        jobs: [
+          JobName.GENERATE_WEBP_THUMBNAIL,
+          JobName.CLASSIFY_IMAGE,
+          JobName.ENCODE_CLIP,
+          JobName.RECOGNIZE_FACES,
+          JobName.GENERATE_THUMBHASH_THUMBNAIL,
+          JobName.VIDEO_CONVERSION,
+        ],
+      },
       {
         item: { name: JobName.CLASSIFY_IMAGE, data: { id: 'asset-1' } },
         jobs: [JobName.SEARCH_INDEX_ASSET],
@@ -287,7 +299,11 @@ describe(JobService.name, () => {
 
     for (const { item, jobs } of tests) {
       it(`should queue ${jobs.length} jobs when a ${item.name} job finishes successfully`, async () => {
-        assetMock.getByIds.mockResolvedValue([]);
+        if (item.name === JobName.GENERATE_JPEG_THUMBNAIL && item.data.source === 'upload') {
+          assetMock.getByIds.mockResolvedValue([assetEntityStub.livePhotoMotionAsset]);
+        } else {
+          assetMock.getByIds.mockResolvedValue([]);
+        }
 
         await sut.registerHandlers(makeMockHandlers(true));
         await jobMock.addHandler.mock.calls[0][2](item);
diff --git a/server/src/domain/job/job.service.ts b/server/src/domain/job/job.service.ts
index 8bfdd6c6b..f0d3e54da 100644
--- a/server/src/domain/job/job.service.ts
+++ b/server/src/domain/job/job.service.ts
@@ -1,3 +1,4 @@
+import { AssetType } from '@app/infra/entities';
 import { BadRequestException, Inject, Injectable, Logger } from '@nestjs/common';
 import { IAssetRepository, mapAsset } from '../asset';
 import { CommunicationEvent, ICommunicationRepository } from '../communication';
@@ -163,9 +164,15 @@ export class JobService {
         await this.jobRepository.queue({ name: JobName.CLASSIFY_IMAGE, data: item.data });
         await this.jobRepository.queue({ name: JobName.ENCODE_CLIP, data: item.data });
         await this.jobRepository.queue({ name: JobName.RECOGNIZE_FACES, data: item.data });
+        if (item.data.source !== 'upload') {
+          break;
+        }
 
         const [asset] = await this.assetRepository.getByIds([item.data.id]);
         if (asset) {
+          if (asset.type === AssetType.VIDEO) {
+            await this.jobRepository.queue({ name: JobName.VIDEO_CONVERSION, data: item.data });
+          }
           this.communicationRepository.send(CommunicationEvent.UPLOAD_SUCCESS, asset.ownerId, mapAsset(asset));
         }
         break;
diff --git a/server/src/domain/media/media.service.ts b/server/src/domain/media/media.service.ts
index 7dedc6a05..91f25df87 100644
--- a/server/src/domain/media/media.service.ts
+++ b/server/src/domain/media/media.service.ts
@@ -128,7 +128,7 @@ export class MediaService {
 
   async handleVideoConversion({ id }: IEntityJob) {
     const [asset] = await this.assetRepository.getByIds([id]);
-    if (!asset) {
+    if (!asset || asset.type !== AssetType.VIDEO) {
       return false;
     }
 
diff --git a/server/src/immich/api-v1/asset/asset.core.ts b/server/src/immich/api-v1/asset/asset.core.ts
index b68f6234c..dd753b965 100644
--- a/server/src/immich/api-v1/asset/asset.core.ts
+++ b/server/src/immich/api-v1/asset/asset.core.ts
@@ -1,5 +1,5 @@
 import { AuthUserDto, IJobRepository, JobName } from '@app/domain';
-import { AssetEntity, AssetType, UserEntity } from '@app/infra/entities';
+import { AssetEntity, UserEntity } from '@app/infra/entities';
 import { parse } from 'node:path';
 import { IAssetRepository } from './asset-repository';
 import { CreateAssetDto, ImportAssetDto, UploadFile } from './dto/create-asset.dto';
@@ -46,9 +46,6 @@ export class AssetCore {
     });
 
     await this.jobRepository.queue({ name: JobName.METADATA_EXTRACTION, data: { id: asset.id, source: 'upload' } });
-    if (asset.type === AssetType.VIDEO) {
-      await this.jobRepository.queue({ name: JobName.VIDEO_CONVERSION, data: { id: asset.id } });
-    }
 
     return asset;
   }
diff --git a/server/src/immich/api-v1/asset/asset.service.spec.ts b/server/src/immich/api-v1/asset/asset.service.spec.ts
index de236ca5f..5017d5f36 100644
--- a/server/src/immich/api-v1/asset/asset.service.spec.ts
+++ b/server/src/immich/api-v1/asset/asset.service.spec.ts
@@ -228,7 +228,6 @@ describe('AssetService', () => {
             data: { id: assetEntityStub.livePhotoMotionAsset.id, source: 'upload' },
           },
         ],
-        [{ name: JobName.VIDEO_CONVERSION, data: { id: assetEntityStub.livePhotoMotionAsset.id } }],
         [{ name: JobName.METADATA_EXTRACTION, data: { id: assetEntityStub.livePhotoStillAsset.id, source: 'upload' } }],
       ]);
     });

From 814030be77fb13a2845ce640f3f4eb614053d650 Mon Sep 17 00:00:00 2001
From: Rohitt Vashishtha <aero31aero@gmail.com>
Date: Thu, 6 Jul 2023 01:53:23 +0530
Subject: [PATCH 43/53] fix(server): Set dev restart policy to unless-stopped.
 (#3123)

Previously, if you'd shut down the `make-dev` command and restart
the docker daemon (say, on a system reboot), there would be 3 immich
containers already running.
---
 docker/docker-compose.dev.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docker/docker-compose.dev.yml b/docker/docker-compose.dev.yml
index 674047cc1..3ab6dc5b0 100644
--- a/docker/docker-compose.dev.yml
+++ b/docker/docker-compose.dev.yml
@@ -43,7 +43,7 @@ services:
       - NODE_ENV=development
     depends_on:
       - database
-    restart: always
+    restart: unless-stopped
 
   immich-microservices:
     container_name: immich_microservices
@@ -88,7 +88,7 @@ services:
     volumes:
       - ../web:/usr/src/app
       - /usr/src/app/node_modules
-    restart: always
+    restart: unless-stopped
     depends_on:
       - immich-server
 
@@ -137,7 +137,7 @@ services:
     depends_on:
       - immich-server
       - immich-web
-    restart: always
+    restart: unless-stopped
 
 volumes:
   pgdata:

From 37edef834e5ed7c74851cb0818c9238be415c7db Mon Sep 17 00:00:00 2001
From: Sergey Kondrikov <sergey.kondrikov@gmail.com>
Date: Wed, 5 Jul 2023 23:24:23 +0300
Subject: [PATCH 44/53] fix(web): previous/next asset navigation (#3107)

* fix(web): previous/next asset navigation

* Apply suggestions from code review

Co-authored-by: Thomas <9749173+uhthomas@users.noreply.github.com>

* Call setViewingAsset once

* Make code more readable

* Avoid recursive call

* Simplify return statement

* Set position of the bucket to Unknown

---------

Co-authored-by: Thomas <9749173+uhthomas@users.noreply.github.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 web/src/lib/models/asset-grid-state.ts        |  5 ++
 web/src/lib/stores/asset-interaction.store.ts | 72 +++++++++++++------
 web/src/lib/stores/assets.store.ts            | 14 ++++
 3 files changed, 71 insertions(+), 20 deletions(-)

diff --git a/web/src/lib/models/asset-grid-state.ts b/web/src/lib/models/asset-grid-state.ts
index fcf5da767..35a3b2a5a 100644
--- a/web/src/lib/models/asset-grid-state.ts
+++ b/web/src/lib/models/asset-grid-state.ts
@@ -46,6 +46,11 @@ export class AssetGridState {
    */
   assets: AssetResponseDto[] = [];
 
+  /**
+   * Total assets that have been loaded along with additional data
+   */
+  loadedAssets: Record<string, number> = {};
+
   /**
    * User that owns assets
    */
diff --git a/web/src/lib/stores/asset-interaction.store.ts b/web/src/lib/stores/asset-interaction.store.ts
index 494b02395..0c8738c25 100644
--- a/web/src/lib/stores/asset-interaction.store.ts
+++ b/web/src/lib/stores/asset-interaction.store.ts
@@ -66,30 +66,62 @@ function createAssetInteractionStore() {
     isViewingAssetStoreState.set(isViewing);
   };
 
+  const getNextAsset = async (currentBucketIndex: number, assetId: string): Promise<AssetResponseDto | null> => {
+    const currentBucket = _assetGridState.buckets[currentBucketIndex];
+    const assetIndex = currentBucket.assets.findIndex(({ id }) => id == assetId);
+    if (assetIndex === -1) {
+      return null;
+    }
+
+    if (assetIndex + 1 < currentBucket.assets.length) {
+      return currentBucket.assets[assetIndex + 1];
+    }
+
+    const nextBucketIndex = currentBucketIndex + 1;
+    if (nextBucketIndex >= _assetGridState.buckets.length) {
+      return null;
+    }
+
+    const nextBucket = _assetGridState.buckets[nextBucketIndex];
+    await assetStore.getAssetsByBucket(nextBucket.bucketDate, BucketPosition.Unknown);
+
+    return nextBucket.assets[0] ?? null;
+  };
+
+  const getPrevAsset = async (currentBucketIndex: number, assetId: string): Promise<AssetResponseDto | null> => {
+    const currentBucket = _assetGridState.buckets[currentBucketIndex];
+    const assetIndex = currentBucket.assets.findIndex(({ id }) => id == assetId);
+    if (assetIndex === -1) {
+      return null;
+    }
+
+    if (assetIndex > 0) {
+      return currentBucket.assets[assetIndex - 1];
+    }
+
+    const prevBucketIndex = currentBucketIndex - 1;
+    if (prevBucketIndex < 0) {
+      return null;
+    }
+
+    const prevBucket = _assetGridState.buckets[prevBucketIndex];
+    await assetStore.getAssetsByBucket(prevBucket.bucketDate, BucketPosition.Unknown);
+
+    return prevBucket.assets[prevBucket.assets.length - 1] ?? null;
+  };
+
   const navigateAsset = async (direction: 'next' | 'previous') => {
-    let index = _assetGridState.assets.findIndex(({ id }) => id === _viewingAssetStoreState.id);
-
-    index = direction === 'next' ? index + 1 : index - 1;
-
-    const needMoreAbove = index < 0;
-    const needMoreBelow = index >= _assetGridState.assets.length;
-
-    // Try to load more assets if we're at the end.
-    if (needMoreAbove || needMoreBelow) {
-      for (const bucket of _assetGridState.buckets) {
-        if (bucket.assets.length === 0) {
-          await assetStore.getAssetsByBucket(
-            bucket.bucketDate,
-            needMoreAbove ? BucketPosition.Above : BucketPosition.Below,
-          );
-          navigateAsset(direction);
-          break;
-        }
-      }
+    const currentAssetId = _viewingAssetStoreState.id;
+    const currentBucketIndex = _assetGridState.loadedAssets[currentAssetId];
+    if (currentBucketIndex < 0 || currentBucketIndex >= _assetGridState.buckets.length) {
       return;
     }
 
-    const asset = _assetGridState.assets[index];
+    const asset =
+      direction === 'next'
+        ? await getNextAsset(currentBucketIndex, currentAssetId)
+        : await getPrevAsset(currentBucketIndex, currentAssetId);
+
     if (asset) {
       setViewingAsset(asset);
     }
diff --git a/web/src/lib/stores/assets.store.ts b/web/src/lib/stores/assets.store.ts
index f3d142edd..477275301 100644
--- a/web/src/lib/stores/assets.store.ts
+++ b/web/src/lib/stores/assets.store.ts
@@ -30,6 +30,15 @@ function createAssetStore() {
     return height;
   };
 
+  const refreshLoadedAssets = (state: AssetGridState): void => {
+    state.loadedAssets = {};
+    state.buckets.forEach((bucket, bucketIndex) =>
+      bucket.assets.map((asset) => {
+        state.loadedAssets[asset.id] = bucketIndex;
+      }),
+    );
+  };
+
   /**
    * Set initial state
    * @param viewportHeight
@@ -54,6 +63,7 @@ function createAssetStore() {
         position: BucketPosition.Unknown,
       })),
       assets: [],
+      loadedAssets: {},
       userId,
     });
 
@@ -101,6 +111,7 @@ function createAssetStore() {
         state.buckets[bucketIndex].assets = assets;
         state.buckets[bucketIndex].position = position;
         state.assets = state.buckets.flatMap((b) => b.assets);
+        refreshLoadedAssets(state);
         return state;
       });
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -123,6 +134,7 @@ function createAssetStore() {
         _removeBucket(state.buckets[bucketIndex].bucketDate);
       }
       state.assets = state.buckets.flatMap((b) => b.assets);
+      refreshLoadedAssets(state);
       return state;
     });
   };
@@ -132,6 +144,7 @@ function createAssetStore() {
       const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucketDate);
       state.buckets.splice(bucketIndex, 1);
       state.assets = state.buckets.flatMap((b) => b.assets);
+      refreshLoadedAssets(state);
       return state;
     });
   };
@@ -180,6 +193,7 @@ function createAssetStore() {
       state.buckets[bucketIndex].assets[assetIndex].isFavorite = isFavorite;
 
       state.assets = state.buckets.flatMap((b) => b.assets);
+      refreshLoadedAssets(state);
       return state;
     });
   };

From 6f4449d5e99daeaadf261f96e2016c86dc5652de Mon Sep 17 00:00:00 2001
From: Jonathan Jogenfors <jonathan@jogenfors.se>
Date: Thu, 6 Jul 2023 16:37:47 +0200
Subject: [PATCH 45/53] feat(cli) Add new CLI (#3066)

* Add new cli

* Remove old readme

* Add documentation to readme file

* Add github workflow tests for cli

* Fix typo in docs

* Add usage info to readme

* Add package-lock.json

* Fix tsconfig

* Cleanup

* Fix lint

* Cleanup package.json

* Fix accidental server change

* Remove rootdir from cli

* Remove tsbuildinfo

* Add prettierignore

* Make CLI use internal openapi specs

* Add ignore and dry-run features

* Sort paths alphabetically

* Don't remove substring

* Remove shorthand for delete

* Remove unused import

* Remove chokidar

* Set correct openapi cli generator script

* Add progress bar

* Rename target to asset

* Add deletion progress bar

* Ignore require statement

* Use read streams instead of readfile

* Fix github feedback

* Fix upload requires

* More github comments

* Cleanup messages

* Cleaner pattern concats

* Github comments

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .github/workflows/test.yml                    |    26 +
 cli/.editorconfig                             |    20 +
 cli/.eslintignore                             |     1 +
 cli/.eslintrc.js                              |    23 +
 cli/.gitignore                                |    13 +
 cli/.prettierignore                           |    18 +
 cli/.prettierrc                               |     6 +
 cli/README.md                                 |    46 +
 cli/asdf                                      |     0
 cli/jest.config.ts                            |     8 +
 cli/package-lock.json                         |  6261 ++++++++
 cli/package.json                              |    49 +
 cli/src/__mocks__/axios.ts                    |     3 +
 cli/src/api/client.ts                         |    50 +
 cli/src/api/open-api/.gitignore               |     4 +
 cli/src/api/open-api/.npmignore               |     1 +
 .../api/open-api/.openapi-generator-ignore    |    23 +
 cli/src/api/open-api/.openapi-generator/FILES |     9 +
 .../api/open-api/.openapi-generator/VERSION   |     1 +
 cli/src/api/open-api/api.ts                   | 12508 ++++++++++++++++
 cli/src/api/open-api/base.ts                  |    72 +
 cli/src/api/open-api/common.ts                |   150 +
 cli/src/api/open-api/configuration.ts         |   101 +
 cli/src/api/open-api/git_push.sh              |    57 +
 cli/src/api/open-api/index.ts                 |    18 +
 cli/src/cli/base-command.ts                   |    38 +
 cli/src/commands/login/key.ts                 |     9 +
 cli/src/commands/logout.ts                    |    13 +
 cli/src/commands/server-info.ts               |    15 +
 cli/src/commands/upload.ts                    |   176 +
 cli/src/cores/api-configuration.ts            |     9 +
 cli/src/cores/constants.ts                    |    58 +
 cli/src/cores/dto/crawl-options-dto.ts        |     6 +
 cli/src/cores/dto/upload-options-dto.ts       |     8 +
 cli/src/cores/errors/login-error.ts           |    11 +
 cli/src/cores/index.ts                        |     2 +
 cli/src/cores/models/crawled-asset.ts         |    71 +
 cli/src/cores/models/index.ts                 |     1 +
 cli/src/index.ts                              |    61 +
 cli/src/services/crawl.service.spec.ts        |   235 +
 cli/src/services/crawl.service.ts             |    47 +
 cli/src/services/index.ts                     |     2 +
 cli/src/services/session.service.spec.ts      |    95 +
 cli/src/services/session.service.ts           |    81 +
 cli/src/services/upload.service.spec.ts       |    36 +
 cli/src/services/upload.service.ts            |    65 +
 cli/test/tsconfig.json                        |     7 +
 cli/testSetup.js                              |     3 +
 cli/tsconfig.json                             |    25 +
 server/bin/generate-open-api.sh               |    12 +
 .../templates/cli/apiInner.mustache           |   391 +
 .../templates/cli/apiInner.mustache.orig      |   390 +
 .../templates/cli/apiInner.mustache.patch     |    14 +
 53 files changed, 21349 insertions(+)
 create mode 100644 cli/.editorconfig
 create mode 100644 cli/.eslintignore
 create mode 100644 cli/.eslintrc.js
 create mode 100644 cli/.gitignore
 create mode 100644 cli/.prettierignore
 create mode 100644 cli/.prettierrc
 create mode 100644 cli/README.md
 create mode 100644 cli/asdf
 create mode 100644 cli/jest.config.ts
 create mode 100644 cli/package-lock.json
 create mode 100644 cli/package.json
 create mode 100644 cli/src/__mocks__/axios.ts
 create mode 100644 cli/src/api/client.ts
 create mode 100644 cli/src/api/open-api/.gitignore
 create mode 100644 cli/src/api/open-api/.npmignore
 create mode 100644 cli/src/api/open-api/.openapi-generator-ignore
 create mode 100644 cli/src/api/open-api/.openapi-generator/FILES
 create mode 100644 cli/src/api/open-api/.openapi-generator/VERSION
 create mode 100644 cli/src/api/open-api/api.ts
 create mode 100644 cli/src/api/open-api/base.ts
 create mode 100644 cli/src/api/open-api/common.ts
 create mode 100644 cli/src/api/open-api/configuration.ts
 create mode 100644 cli/src/api/open-api/git_push.sh
 create mode 100644 cli/src/api/open-api/index.ts
 create mode 100644 cli/src/cli/base-command.ts
 create mode 100644 cli/src/commands/login/key.ts
 create mode 100644 cli/src/commands/logout.ts
 create mode 100644 cli/src/commands/server-info.ts
 create mode 100644 cli/src/commands/upload.ts
 create mode 100644 cli/src/cores/api-configuration.ts
 create mode 100644 cli/src/cores/constants.ts
 create mode 100644 cli/src/cores/dto/crawl-options-dto.ts
 create mode 100644 cli/src/cores/dto/upload-options-dto.ts
 create mode 100644 cli/src/cores/errors/login-error.ts
 create mode 100644 cli/src/cores/index.ts
 create mode 100644 cli/src/cores/models/crawled-asset.ts
 create mode 100644 cli/src/cores/models/index.ts
 create mode 100644 cli/src/index.ts
 create mode 100644 cli/src/services/crawl.service.spec.ts
 create mode 100644 cli/src/services/crawl.service.ts
 create mode 100644 cli/src/services/index.ts
 create mode 100644 cli/src/services/session.service.spec.ts
 create mode 100644 cli/src/services/session.service.ts
 create mode 100644 cli/src/services/upload.service.spec.ts
 create mode 100644 cli/src/services/upload.service.ts
 create mode 100644 cli/test/tsconfig.json
 create mode 100644 cli/testSetup.js
 create mode 100644 cli/tsconfig.json
 create mode 100644 server/openapi-generator/templates/cli/apiInner.mustache
 create mode 100644 server/openapi-generator/templates/cli/apiInner.mustache.orig
 create mode 100644 server/openapi-generator/templates/cli/apiInner.mustache.patch

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 5bb70230e..b225589f2 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -73,6 +73,32 @@ jobs:
         run: npm run test:cov
         if: ${{ !cancelled() }}
 
+  cli-unit-tests:
+    name: Run cli test suites
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./cli
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Run npm install
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+        if: ${{ !cancelled() }}
+
+      - name: Run formatter
+        run: npm run format
+        if: ${{ !cancelled() }}
+
+      - name: Run unit tests & coverage
+        run: npm run test:cov
+        if: ${{ !cancelled() }}
+
   web-unit-tests:
     name: Run web unit test suites and checks
     runs-on: ubuntu-latest
diff --git a/cli/.editorconfig b/cli/.editorconfig
new file mode 100644
index 000000000..eaf1b2fe4
--- /dev/null
+++ b/cli/.editorconfig
@@ -0,0 +1,20 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+charset = utf-8
+trim_trailing_whitespace = true
+
+[*.{ts,js}]
+quote_type = single
+
+[*.{md,mdx}]
+max_line_length = off
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+quote_type = double
\ No newline at end of file
diff --git a/cli/.eslintignore b/cli/.eslintignore
new file mode 100644
index 000000000..9b1c8b133
--- /dev/null
+++ b/cli/.eslintignore
@@ -0,0 +1 @@
+/dist
diff --git a/cli/.eslintrc.js b/cli/.eslintrc.js
new file mode 100644
index 000000000..4bb78b8c6
--- /dev/null
+++ b/cli/.eslintrc.js
@@ -0,0 +1,23 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ['@typescript-eslint/eslint-plugin'],
+  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+  root: true,
+  env: {
+    node: true,
+    jest: true,
+  },
+  ignorePatterns: ['.eslintrc.js'],
+  rules: {
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'prettier/prettier': 0,
+  },
+};
diff --git a/cli/.gitignore b/cli/.gitignore
new file mode 100644
index 000000000..f1265e47f
--- /dev/null
+++ b/cli/.gitignore
@@ -0,0 +1,13 @@
+*-debug.log
+*-error.log
+/.nyc_output
+/dist
+/lib
+/tmp
+/yarn.lock
+node_modules
+oclif.manifest.json
+
+.vscode
+.idea
+/coverage/
\ No newline at end of file
diff --git a/cli/.prettierignore b/cli/.prettierignore
new file mode 100644
index 000000000..eff870146
--- /dev/null
+++ b/cli/.prettierignore
@@ -0,0 +1,18 @@
+.DS_Store
+node_modules
+/build
+/package
+.env
+.env.*
+!.env.example
+src/api/open-api
+*.md
+*.json
+coverage
+dist
+**/migrations/**
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
diff --git a/cli/.prettierrc b/cli/.prettierrc
new file mode 100644
index 000000000..7cebf3813
--- /dev/null
+++ b/cli/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "semi": true
+}
diff --git a/cli/README.md b/cli/README.md
new file mode 100644
index 000000000..a11ade33b
--- /dev/null
+++ b/cli/README.md
@@ -0,0 +1,46 @@
+A command-line interface for interfacing with Immich
+
+# Getting started
+
+    $ ts-node cli/src
+
+To start using the CLI, you need to login with an API key first:
+
+    $ ts-node cli/src login-key https://your-immich-instance/api your-api-key
+
+NOTE: This will store your api key under ~/.config/immich/auth.yml
+
+Next, you can run commands:
+
+    $ ts-node cli/src server-info
+
+When you're done, log out to remove the credentials from your filesystem
+
+    $ ts-node cli/src logout
+
+# Usage
+
+```
+Usage: immich [options] [command]
+
+Immich command line interface
+
+Options:
+  -h, --help                        display help for command
+
+Commands:
+  upload [options] [paths...]       Upload assets
+  import [options] [paths...]       Import existing assets
+  server-info                       Display server information
+  login-key [instanceUrl] [apiKey]  Login using an API key
+  help [command]                    display help for command
+```
+
+# Todo
+
+- Sidecar should check both .jpg.xmp and .xmp
+- Sidecar check could be case-insensitive
+
+# Known issues
+
+- Upload can't use sdk due to multiple issues
diff --git a/cli/asdf b/cli/asdf
new file mode 100644
index 000000000..e69de29bb
diff --git a/cli/jest.config.ts b/cli/jest.config.ts
new file mode 100644
index 000000000..ea9b76d94
--- /dev/null
+++ b/cli/jest.config.ts
@@ -0,0 +1,8 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  preset: 'ts-jest',
+  setupFilesAfterEnv: ['jest-extended/all'],
+};
+
+export default config;
diff --git a/cli/package-lock.json b/cli/package-lock.json
new file mode 100644
index 000000000..f7b8f37af
--- /dev/null
+++ b/cli/package-lock.json
@@ -0,0 +1,6261 @@
+{
+  "name": "immich-cli",
+  "version": "0.30.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "immich-cli",
+      "dependencies": {
+        "axios": "^1.4.0",
+        "form-data": "^4.0.0",
+        "mime-types": "^2.1.35",
+        "systeminformation": "^5.18.4"
+      },
+      "devDependencies": {
+        "@types/byte-size": "^8.1.0",
+        "@types/chai": "^4.3.5",
+        "@types/cli-progress": "^3.11.0",
+        "@types/jest": "^29.5.2",
+        "@types/js-yaml": "^4.0.5",
+        "@types/mime-types": "^2.1.1",
+        "@types/mock-fs": "^4.13.1",
+        "@types/node": "^20.3.1",
+        "@typescript-eslint/eslint-plugin": "^5.60.1",
+        "byte-size": "^8.1.1",
+        "chai": "^4.3.7",
+        "cli-progress": "^3.12.0",
+        "commander": "^11.0.0",
+        "eslint": "^8.43.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-jest": "^27.2.2",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-unicorn": "^47.0.0",
+        "glob": "^10.3.1",
+        "jest": "^29.5.0",
+        "jest-extended": "^4.0.0",
+        "jest-message-util": "^29.5.0",
+        "jest-mock-axios": "^4.7.2",
+        "jest-when": "^3.5.2",
+        "mock-fs": "^5.2.0",
+        "picomatch": "^2.3.1",
+        "ts-jest": "^29.1.0",
+        "ts-node": "^10.9.1",
+        "tslib": "^2.5.3",
+        "typescript": "^4.9.4",
+        "yaml": "^2.3.1"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
+      "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/highlight": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.5.tgz",
+      "integrity": "sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.5.tgz",
+      "integrity": "sha512-SBuTAjg91A3eKOvD+bPEz3LlhHZRNu1nFOVts9lzDJTXshHTjII0BAtDS3Y2DAkdZdDKWVZGVwkDfc4Clxn1dg==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.22.5",
+        "@babel/generator": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.5",
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helpers": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.5",
+        "@babel/types": "^7.22.5",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.2",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz",
+      "integrity": "sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz",
+      "integrity": "sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
+        "browserslist": "^4.21.3",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+      "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+      "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+      "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.5.tgz",
+      "integrity": "sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-simple-access": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5",
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz",
+      "integrity": "sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
+      "integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.5.tgz",
+      "integrity": "sha512-pSXRmfE1vzcUIDFQcSGA5Mr+GxBV9oiRKDuDxXvWQQBCh8HoIjs/2DlDB7H8smac1IVrB9/xdXj2N3Wol9Cr+Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
+      "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.22.5",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
+      "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==",
+      "dev": true,
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-bigint": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
+      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz",
+      "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.22.5.tgz",
+      "integrity": "sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz",
+      "integrity": "sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.22.5",
+        "@babel/generator": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+      "dev": true
+    },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
+      "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz",
+      "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.5.2",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.43.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.43.0.tgz",
+      "integrity": "sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
+      "integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/console": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-29.5.0.tgz",
+      "integrity": "sha512-NEpkObxPwyw/XxZVLPmAGKE89IQRp4puc6IQRPru6JKd1M3fW9v1xM1AnzIJE65hbCkzQAdnL8P47e9hzhiYLQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^29.5.0",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "jest-message-util": "^29.5.0",
+        "jest-util": "^29.5.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/core": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-29.5.0.tgz",
+      "integrity": "sha512-28UzQc7ulUrOQw1IsN/kv1QES3q2kkbl/wGslyhAclqZ/8cMdB5M68BffkIdSJgKBUt50d3hbwJ92XESlE7LiQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/console": "^29.5.0",
+        "@jest/reporters": "^29.5.0",
+        "@jest/test-result": "^29.5.0",
+        "@jest/transform": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "jest-changed-files": "^29.5.0",
+        "jest-config": "^29.5.0",
+        "jest-haste-map": "^29.5.0",
+        "jest-message-util": "^29.5.0",
+        "jest-regex-util": "^29.4.3",
+        "jest-resolve": "^29.5.0",
+        "jest-resolve-dependencies": "^29.5.0",
+        "jest-runner": "^29.5.0",
+        "jest-runtime": "^29.5.0",
+        "jest-snapshot": "^29.5.0",
+        "jest-util": "^29.5.0",
+        "jest-validate": "^29.5.0",
+        "jest-watcher": "^29.5.0",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^29.5.0",
+        "slash": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/environment": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.5.0.tgz",
+      "integrity": "sha512-5FXw2+wD29YU1d4I2htpRX7jYnAyTRjP2CsXQdo9SAM8g3ifxWPSV0HnClSn71xwctr0U3oZIIH+dtbfmnbXVQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/fake-timers": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "@types/node": "*",
+        "jest-mock": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/expect": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-29.5.0.tgz",
+      "integrity": "sha512-PueDR2HGihN3ciUNGr4uelropW7rqUfTiOn+8u0leg/42UhblPxHkfoh0Ruu3I9Y1962P3u2DY4+h7GVTSVU6g==",
+      "dev": true,
+      "dependencies": {
+        "expect": "^29.5.0",
+        "jest-snapshot": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/expect-utils": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.5.0.tgz",
+      "integrity": "sha512-fmKzsidoXQT2KwnrwE0SQq3uj8Z763vzR8LnLBwC2qYWEFpjX8daRsk6rHUM1QvNlEW/UJXNXm59ztmJJWs2Mg==",
+      "dev": true,
+      "dependencies": {
+        "jest-get-type": "^29.4.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/fake-timers": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.5.0.tgz",
+      "integrity": "sha512-9ARvuAAQcBwDAqOnglWq2zwNIRUDtk/SCkp/ToGEhFv5r86K21l+VEs0qNTaXtyiY0lEePl3kylijSYJQqdbDg==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^29.5.0",
+        "@sinonjs/fake-timers": "^10.0.2",
+        "@types/node": "*",
+        "jest-message-util": "^29.5.0",
+        "jest-mock": "^29.5.0",
+        "jest-util": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/globals": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-29.5.0.tgz",
+      "integrity": "sha512-S02y0qMWGihdzNbUiqSAiKSpSozSuHX5UYc7QbnHP+D9Lyw8DgGGCinrN9uSuHPeKgSSzvPom2q1nAtBvUsvPQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/environment": "^29.5.0",
+        "@jest/expect": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "jest-mock": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/reporters": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-29.5.0.tgz",
+      "integrity": "sha512-D05STXqj/M8bP9hQNSICtPqz97u7ffGzZu+9XLucXhkOFBqKcXe04JLZOgIekOxdb73MAoBUFnqvf7MCpKk5OA==",
+      "dev": true,
+      "dependencies": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "^29.5.0",
+        "@jest/test-result": "^29.5.0",
+        "@jest/transform": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "@jridgewell/trace-mapping": "^0.3.15",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.9",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^5.1.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.1.3",
+        "jest-message-util": "^29.5.0",
+        "jest-util": "^29.5.0",
+        "jest-worker": "^29.5.0",
+        "slash": "^3.0.0",
+        "string-length": "^4.0.1",
+        "strip-ansi": "^6.0.0",
+        "v8-to-istanbul": "^9.0.1"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@jest/schemas": {
+      "version": "29.4.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.4.3.tgz",
+      "integrity": "sha512-VLYKXQmtmuEz6IxJsrZwzG9NvtkQsWNnWMsKxqWNu3+CnfzJQhp0WDDKWLVV9hLKr0l3SLLFRqcYHjhtyuDVxg==",
+      "dev": true,
+      "dependencies": {
+        "@sinclair/typebox": "^0.25.16"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/source-map": {
+      "version": "29.4.3",
+      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-29.4.3.tgz",
+      "integrity": "sha512-qyt/mb6rLyd9j1jUts4EQncvS6Yy3PM9HghnNv86QBlV+zdL2inCdK1tuVlL+J+lpiw2BI67qXOrX3UurBqQ1w==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.15",
+        "callsites": "^3.0.0",
+        "graceful-fs": "^4.2.9"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/test-result": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-29.5.0.tgz",
+      "integrity": "sha512-fGl4rfitnbfLsrfx1uUpDEESS7zM8JdgZgOCQuxQvL1Sn/I6ijeAVQWGfXI9zb1i9Mzo495cIpVZhA0yr60PkQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/console": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "collect-v8-coverage": "^1.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/test-sequencer": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-29.5.0.tgz",
+      "integrity": "sha512-yPafQEcKjkSfDXyvtgiV4pevSeyuA6MQr6ZIdVkWJly9vkqjnFfcfhRQqpD5whjoU8EORki752xQmjaqoFjzMQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/test-result": "^29.5.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^29.5.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/transform": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.5.0.tgz",
+      "integrity": "sha512-8vbeZWqLJOvHaDfeMuoHITGKSz5qWc9u04lnWrQE3VyuSw604PzQM824ZeX9XSjUCeDiE3GuxZe5UKa8J61NQw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.11.6",
+        "@jest/types": "^29.5.0",
+        "@jridgewell/trace-mapping": "^0.3.15",
+        "babel-plugin-istanbul": "^6.1.1",
+        "chalk": "^4.0.0",
+        "convert-source-map": "^2.0.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^29.5.0",
+        "jest-regex-util": "^29.4.3",
+        "jest-util": "^29.5.0",
+        "micromatch": "^4.0.4",
+        "pirates": "^4.0.4",
+        "slash": "^3.0.0",
+        "write-file-atomic": "^4.0.2"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/transform/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true
+    },
+    "node_modules/@jest/types": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.5.0.tgz",
+      "integrity": "sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.4.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.8",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.18",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
+      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
+    "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.25.24",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.24.tgz",
+      "integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==",
+      "dev": true
+    },
+    "node_modules/@sinonjs/commons": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.0.tgz",
+      "integrity": "sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/fake-timers": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz",
+      "integrity": "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==",
+      "dev": true,
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.0"
+      }
+    },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "dev": true
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz",
+      "integrity": "sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
+      "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
+      "integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.1.tgz",
+      "integrity": "sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "node_modules/@types/byte-size": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@types/byte-size/-/byte-size-8.1.0.tgz",
+      "integrity": "sha512-LCIlZh8vyx+I2fgRycE1D34c33QDppYY6quBYYoaOpQ1nGhJ/avSP2VlrAefVotjJxgSk6WkKo0rTcCJwGG7vA==",
+      "dev": true
+    },
+    "node_modules/@types/chai": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz",
+      "integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==",
+      "dev": true
+    },
+    "node_modules/@types/cli-progress": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@types/cli-progress/-/cli-progress-3.11.0.tgz",
+      "integrity": "sha512-XhXhBv1R/q2ahF3BM7qT5HLzJNlIL0wbcGyZVjqOTqAybAnsLisd7gy1UCyIqpL+5Iv6XhlSyzjLCnI2sIdbCg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/graceful-fs": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
+      "integrity": "sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
+      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
+      "dev": true
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
+      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "node_modules/@types/jest": {
+      "version": "29.5.2",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.2.tgz",
+      "integrity": "sha512-mSoZVJF5YzGVCk+FsDxzDuH7s+SCkzrgKZzf0Z0T2WudhBUPoF6ktoTPC4R0ZoCPCV5xUvuU6ias5NvxcBcMMg==",
+      "dev": true,
+      "dependencies": {
+        "expect": "^29.0.0",
+        "pretty-format": "^29.0.0"
+      }
+    },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
+      "integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==",
+      "dev": true
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
+      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
+      "dev": true
+    },
+    "node_modules/@types/mime-types": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
+      "dev": true
+    },
+    "node_modules/@types/mock-fs": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@types/mock-fs/-/mock-fs-4.13.1.tgz",
+      "integrity": "sha512-m6nFAJ3lBSnqbvDZioawRvpLXSaPyn52Srf7OfzjubYbYX8MTUdIgDxQl0wEapm4m/pNYSd9TXocpQ0TvZFlYA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.3.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
+      "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
+      "dev": true
+    },
+    "node_modules/@types/normalize-package-data": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
+      "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
+      "dev": true
+    },
+    "node_modules/@types/prettier": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
+      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==",
+      "dev": true
+    },
+    "node_modules/@types/semver": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz",
+      "integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==",
+      "dev": true
+    },
+    "node_modules/@types/stack-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
+      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
+      "dev": true
+    },
+    "node_modules/@types/yargs": {
+      "version": "17.0.24",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
+      "integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==",
+      "dev": true,
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
+      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
+      "dev": true
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.1.tgz",
+      "integrity": "sha512-KSWsVvsJsLJv3c4e73y/Bzt7OpqMCADUO846bHcuWYSYM19bldbAeDv7dYyV0jwkbMfJ2XdlzwjhXtuD7OY6bw==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.4.0",
+        "@typescript-eslint/scope-manager": "5.60.1",
+        "@typescript-eslint/type-utils": "5.60.1",
+        "@typescript-eslint/utils": "5.60.1",
+        "debug": "^4.3.4",
+        "grapheme-splitter": "^1.0.4",
+        "ignore": "^5.2.0",
+        "natural-compare-lite": "^1.4.0",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.60.1.tgz",
+      "integrity": "sha512-Dn/LnN7fEoRD+KspEOV0xDMynEmR3iSHdgNsarlXNLGGtcUok8L4N71dxUgt3YvlO8si7E+BJ5Fe3wb5yUw7DQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.60.1",
+        "@typescript-eslint/visitor-keys": "5.60.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/types": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.60.1.tgz",
+      "integrity": "sha512-zDcDx5fccU8BA0IDZc71bAtYIcG9PowaOwaD8rjYbqwK7dpe/UMQl3inJ4UtUK42nOCT41jTSCwg76E62JpMcg==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.1.tgz",
+      "integrity": "sha512-xEYIxKcultP6E/RMKqube11pGjXH1DCo60mQoWhVYyKfLkwbIVVjYxmOenNMxILx0TjCujPTjjnTIVzm09TXIw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.60.1",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.60.1.tgz",
+      "integrity": "sha512-pHWlc3alg2oSMGwsU/Is8hbm3XFbcrb6P5wIxcQW9NsYBfnrubl/GhVVD/Jm/t8HXhA2WncoIRfBtnCgRGV96Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "5.60.1",
+        "@typescript-eslint/types": "5.60.1",
+        "@typescript-eslint/typescript-estree": "5.60.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.60.1.tgz",
+      "integrity": "sha512-Dn/LnN7fEoRD+KspEOV0xDMynEmR3iSHdgNsarlXNLGGtcUok8L4N71dxUgt3YvlO8si7E+BJ5Fe3wb5yUw7DQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.60.1",
+        "@typescript-eslint/visitor-keys": "5.60.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.60.1.tgz",
+      "integrity": "sha512-zDcDx5fccU8BA0IDZc71bAtYIcG9PowaOwaD8rjYbqwK7dpe/UMQl3inJ4UtUK42nOCT41jTSCwg76E62JpMcg==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.1.tgz",
+      "integrity": "sha512-hkX70J9+2M2ZT6fhti5Q2FoU9zb+GeZK2SLP1WZlvUDqdMbEKhexZODD1WodNRyO8eS+4nScvT0dts8IdaBzfw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.60.1",
+        "@typescript-eslint/visitor-keys": "5.60.1",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.1.tgz",
+      "integrity": "sha512-xEYIxKcultP6E/RMKqube11pGjXH1DCo60mQoWhVYyKfLkwbIVVjYxmOenNMxILx0TjCujPTjjnTIVzm09TXIw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.60.1",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.60.1.tgz",
+      "integrity": "sha512-vN6UztYqIu05nu7JqwQGzQKUJctzs3/Hg7E2Yx8rz9J+4LgtIDFWjjl1gm3pycH0P3mHAcEUBd23LVgfrsTR8A==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "5.60.1",
+        "@typescript-eslint/utils": "5.60.1",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.60.1.tgz",
+      "integrity": "sha512-zDcDx5fccU8BA0IDZc71bAtYIcG9PowaOwaD8rjYbqwK7dpe/UMQl3inJ4UtUK42nOCT41jTSCwg76E62JpMcg==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.1.tgz",
+      "integrity": "sha512-hkX70J9+2M2ZT6fhti5Q2FoU9zb+GeZK2SLP1WZlvUDqdMbEKhexZODD1WodNRyO8eS+4nScvT0dts8IdaBzfw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.60.1",
+        "@typescript-eslint/visitor-keys": "5.60.1",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.1.tgz",
+      "integrity": "sha512-xEYIxKcultP6E/RMKqube11pGjXH1DCo60mQoWhVYyKfLkwbIVVjYxmOenNMxILx0TjCujPTjjnTIVzm09TXIw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.60.1",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.60.1.tgz",
+      "integrity": "sha512-tiJ7FFdFQOWssFa3gqb94Ilexyw0JVxj6vBzaSpfN/8IhoKkDuSAenUKvsSHw2A/TMpJb26izIszTXaqygkvpQ==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@types/json-schema": "^7.0.9",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.60.1",
+        "@typescript-eslint/types": "5.60.1",
+        "@typescript-eslint/typescript-estree": "5.60.1",
+        "eslint-scope": "^5.1.1",
+        "semver": "^7.3.7"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.60.1.tgz",
+      "integrity": "sha512-Dn/LnN7fEoRD+KspEOV0xDMynEmR3iSHdgNsarlXNLGGtcUok8L4N71dxUgt3YvlO8si7E+BJ5Fe3wb5yUw7DQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.60.1",
+        "@typescript-eslint/visitor-keys": "5.60.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/types": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.60.1.tgz",
+      "integrity": "sha512-zDcDx5fccU8BA0IDZc71bAtYIcG9PowaOwaD8rjYbqwK7dpe/UMQl3inJ4UtUK42nOCT41jTSCwg76E62JpMcg==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.1.tgz",
+      "integrity": "sha512-hkX70J9+2M2ZT6fhti5Q2FoU9zb+GeZK2SLP1WZlvUDqdMbEKhexZODD1WodNRyO8eS+4nScvT0dts8IdaBzfw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.60.1",
+        "@typescript-eslint/visitor-keys": "5.60.1",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.60.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.1.tgz",
+      "integrity": "sha512-xEYIxKcultP6E/RMKqube11pGjXH1DCo60mQoWhVYyKfLkwbIVVjYxmOenNMxILx0TjCujPTjjnTIVzm09TXIw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.60.1",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz",
+      "integrity": "sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true
+    },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/babel-jest": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.5.0.tgz",
+      "integrity": "sha512-mA4eCDh5mSo2EcA9xQjVTpmbbNk32Zb3Q3QFQsNhaK56Q+yoXowzFodLux30HRgyOho5rsQ6B0P9QpMkvvnJ0Q==",
+      "dev": true,
+      "dependencies": {
+        "@jest/transform": "^29.5.0",
+        "@types/babel__core": "^7.1.14",
+        "babel-plugin-istanbul": "^6.1.1",
+        "babel-preset-jest": "^29.5.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.8.0"
+      }
+    },
+    "node_modules/babel-plugin-istanbul": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
+      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-instrument": "^5.0.4",
+        "test-exclude": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/babel-plugin-jest-hoist": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.5.0.tgz",
+      "integrity": "sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.3.3",
+        "@babel/types": "^7.3.3",
+        "@types/babel__core": "^7.1.14",
+        "@types/babel__traverse": "^7.0.6"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/babel-preset-current-node-syntax": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
+      "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.8.3",
+        "@babel/plugin-syntax-import-meta": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.8.3",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-top-level-await": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/babel-preset-jest": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.5.0.tgz",
+      "integrity": "sha512-JOMloxOqdiBSxMAzjRaH023/vvcaSaec49zvg+2LmNsktC7ei39LTJGw02J+9uUtTZUq6xbLyJ4dxe9sSmIuAg==",
+      "dev": true,
+      "dependencies": {
+        "babel-plugin-jest-hoist": "^29.5.0",
+        "babel-preset-current-node-syntax": "^1.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.21.9",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz",
+      "integrity": "sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001503",
+        "electron-to-chromium": "^1.4.431",
+        "node-releases": "^2.0.12",
+        "update-browserslist-db": "^1.0.11"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/bs-logger": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz",
+      "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==",
+      "dev": true,
+      "dependencies": {
+        "fast-json-stable-stringify": "2.x"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/bser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
+      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+      "dev": true,
+      "dependencies": {
+        "node-int64": "^0.4.0"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
+    "node_modules/builtin-modules": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
+      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/byte-size": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/byte-size/-/byte-size-8.1.1.tgz",
+      "integrity": "sha512-tUkzZWK0M/qdoLEqikxBWe4kumyuwjl3HO6zHTr4yEI23EojPtLYXdG1+AQY7MN0cGyNDvEaJ8wiYQm6P2bPxg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001508",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001508.tgz",
+      "integrity": "sha512-sdQZOJdmt3GJs1UMNpCCCyeuS2IEGLXnHyAo9yIO5JJDjbjoVRij4M1qep6P6gFpptD1PqIYgzM+gwJbOi92mw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "node_modules/chai": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
+      "integrity": "sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==",
+      "dev": true,
+      "dependencies": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.2",
+        "deep-eql": "^4.1.2",
+        "get-func-name": "^2.0.0",
+        "loupe": "^2.3.1",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.0.5"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
+      "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
+      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cjs-module-lexer": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
+      "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==",
+      "dev": true
+    },
+    "node_modules/clean-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clean-regexp/-/clean-regexp-1.0.0.tgz",
+      "integrity": "sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/clean-regexp/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/cli-progress": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz",
+      "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.3"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
+      "dev": true,
+      "engines": {
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/collect-v8-coverage": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
+      "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==",
+      "dev": true
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.0.0.tgz",
+      "integrity": "sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "dev": true
+    },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
+      "dev": true
+    },
+    "node_modules/deep-eql": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
+      "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-newline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/diff-sequences": {
+      "version": "29.4.3",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.4.3.tgz",
+      "integrity": "sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==",
+      "dev": true,
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.440",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz",
+      "integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw==",
+      "dev": true
+    },
+    "node_modules/emittery": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
+      "integrity": "sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.43.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.43.0.tgz",
+      "integrity": "sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.4.0",
+        "@eslint/eslintrc": "^2.0.3",
+        "@eslint/js": "8.43.0",
+        "@humanwhocodes/config-array": "^0.11.10",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.0",
+        "eslint-visitor-keys": "^3.4.1",
+        "espree": "^9.5.2",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
+      "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-jest": {
+      "version": "27.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.2.2.tgz",
+      "integrity": "sha512-euzbp06F934Z7UDl5ZUaRPLAc9MKjh0rMPERrHT7UhlCEwgb25kBj37TvMgWeHZVkR5I9CayswrpoaqZU1RImw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/utils": "^5.10.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^5.0.0",
+        "eslint": "^7.0.0 || ^8.0.0",
+        "jest": "*"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/eslint-plugin": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
+      "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.28.0",
+        "prettier": ">=2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-unicorn": {
+      "version": "47.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-47.0.0.tgz",
+      "integrity": "sha512-ivB3bKk7fDIeWOUmmMm9o3Ax9zbMz1Bsza/R2qm46ufw4T6VBFBaJIR1uN3pCKSmSXm8/9Nri8V+iUut1NhQGA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "ci-info": "^3.8.0",
+        "clean-regexp": "^1.0.0",
+        "esquery": "^1.5.0",
+        "indent-string": "^4.0.0",
+        "is-builtin-module": "^3.2.1",
+        "jsesc": "^3.0.2",
+        "lodash": "^4.17.21",
+        "pluralize": "^8.0.0",
+        "read-pkg-up": "^7.0.1",
+        "regexp-tree": "^0.1.24",
+        "regjsparser": "^0.10.0",
+        "safe-regex": "^2.1.1",
+        "semver": "^7.3.8",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/eslint-plugin-unicorn?sponsor=1"
+      },
+      "peerDependencies": {
+        "eslint": ">=8.38.0"
+      }
+    },
+    "node_modules/eslint-plugin-unicorn/node_modules/jsesc": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
+      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.5.2",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
+      "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
+      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/expect": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-29.5.0.tgz",
+      "integrity": "sha512-yM7xqUrCO2JdpFo4XpM82t+PJBFybdqoQuJLDGeDX2ij8NZzqRHyu3Hp188/JX7SWqud+7t4MUdvcgGBICMHZg==",
+      "dev": true,
+      "dependencies": {
+        "@jest/expect-utils": "^29.5.0",
+        "jest-get-type": "^29.4.3",
+        "jest-matcher-utils": "^29.5.0",
+        "jest-message-util": "^29.5.0",
+        "jest-util": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "node_modules/fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fb-watchman": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
+      "dev": true,
+      "dependencies": {
+        "bser": "2.1.1"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
+      "dev": true
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.0.2.tgz",
+      "integrity": "sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-func-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
+      "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/get-package-type": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.1.tgz",
+      "integrity": "sha512-9BKYcEeIs7QwlCYs+Y3GBvqAMISufUS0i2ELd11zpZjxI5V9iyRj0HgzB5/cLf2NY4vcYBTYzJ7GIui7j/4DOw==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.0.3",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2",
+        "path-scurry": "^1.10.0"
+      },
+      "bin": {
+        "glob": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.2.tgz",
+      "integrity": "sha512-PZOT9g5v2ojiTL7r1xF6plNHLtOeTpSlDI007As2NlA2aYBMfVom17yqa6QzhmDP8QOhn7LjHTg7DFCVSSa6yg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.20.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globals/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
+    },
+    "node_modules/grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+      "dev": true
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-local": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
+      "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
+      "dev": true,
+      "dependencies": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "bin": {
+        "import-local-fixture": "fixtures/cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
+    "node_modules/is-builtin-module": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
+      "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
+      "dev": true,
+      "dependencies": {
+        "builtin-modules": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
+      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
+      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.12.3",
+        "@babel/parser": "^7.14.7",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.2.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
+      "dev": true,
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^3.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz",
+      "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==",
+      "dev": true,
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.2.1.tgz",
+      "integrity": "sha512-MXbxovZ/Pm42f6cDIDkl3xpwv1AGwObKwfmjs2nQePiy85tP3fatofl3FC1aBsOtP/6fq5SbtgHwWcMsLP+bDw==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jest": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-29.5.0.tgz",
+      "integrity": "sha512-juMg3he2uru1QoXX078zTa7pO85QyB9xajZc6bU+d9yEGwrKX6+vGmJQ3UdVZsvTEUARIdObzH68QItim6OSSQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/core": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "import-local": "^3.0.2",
+        "jest-cli": "^29.5.0"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-changed-files": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.5.0.tgz",
+      "integrity": "sha512-IFG34IUMUaNBIxjQXF/iu7g6EcdMrGRRxaUSw92I/2g2YC6vCdTltl4nHvt7Ci5nSJwXIkCu8Ka1DKF+X7Z1Ag==",
+      "dev": true,
+      "dependencies": {
+        "execa": "^5.0.0",
+        "p-limit": "^3.1.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-circus": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-29.5.0.tgz",
+      "integrity": "sha512-gq/ongqeQKAplVxqJmbeUOJJKkW3dDNPY8PjhJ5G0lBRvu0e3EWGxGy5cI4LAGA7gV2UHCtWBI4EMXK8c9nQKA==",
+      "dev": true,
+      "dependencies": {
+        "@jest/environment": "^29.5.0",
+        "@jest/expect": "^29.5.0",
+        "@jest/test-result": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "dedent": "^0.7.0",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^29.5.0",
+        "jest-matcher-utils": "^29.5.0",
+        "jest-message-util": "^29.5.0",
+        "jest-runtime": "^29.5.0",
+        "jest-snapshot": "^29.5.0",
+        "jest-util": "^29.5.0",
+        "p-limit": "^3.1.0",
+        "pretty-format": "^29.5.0",
+        "pure-rand": "^6.0.0",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-cli": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-29.5.0.tgz",
+      "integrity": "sha512-L1KcP1l4HtfwdxXNFCL5bmUbLQiKrakMUriBEcc1Vfz6gx31ORKdreuWvmQVBit+1ss9NNR3yxjwfwzZNdQXJw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/core": "^29.5.0",
+        "@jest/test-result": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "chalk": "^4.0.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "import-local": "^3.0.2",
+        "jest-config": "^29.5.0",
+        "jest-util": "^29.5.0",
+        "jest-validate": "^29.5.0",
+        "prompts": "^2.0.1",
+        "yargs": "^17.3.1"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-config": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-29.5.0.tgz",
+      "integrity": "sha512-kvDUKBnNJPNBmFFOhDbm59iu1Fii1Q6SxyhXfvylq3UTHbg6o7j/g8k2dZyXWLvfdKB1vAPxNZnMgtKJcmu3kA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.11.6",
+        "@jest/test-sequencer": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "babel-jest": "^29.5.0",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "deepmerge": "^4.2.2",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.9",
+        "jest-circus": "^29.5.0",
+        "jest-environment-node": "^29.5.0",
+        "jest-get-type": "^29.4.3",
+        "jest-regex-util": "^29.4.3",
+        "jest-resolve": "^29.5.0",
+        "jest-runner": "^29.5.0",
+        "jest-util": "^29.5.0",
+        "jest-validate": "^29.5.0",
+        "micromatch": "^4.0.4",
+        "parse-json": "^5.2.0",
+        "pretty-format": "^29.5.0",
+        "slash": "^3.0.0",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@types/node": "*",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-config/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/jest-config/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-diff": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.5.0.tgz",
+      "integrity": "sha512-LtxijLLZBduXnHSniy0WMdaHjmQnt3g5sa16W4p0HqukYTTsyTW3GD1q41TyGl5YFXj/5B2U6dlh5FM1LIMgxw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^29.4.3",
+        "jest-get-type": "^29.4.3",
+        "pretty-format": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-docblock": {
+      "version": "29.4.3",
+      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-29.4.3.tgz",
+      "integrity": "sha512-fzdTftThczeSD9nZ3fzA/4KkHtnmllawWrXO69vtI+L9WjEIuXWs4AmyME7lN5hU7dB0sHhuPfcKofRsUb/2Fg==",
+      "dev": true,
+      "dependencies": {
+        "detect-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-each": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-29.5.0.tgz",
+      "integrity": "sha512-HM5kIJ1BTnVt+DQZ2ALp3rzXEl+g726csObrW/jpEGl+CDSSQpOJJX2KE/vEg8cxcMXdyEPu6U4QX5eruQv5hA==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^29.5.0",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^29.4.3",
+        "jest-util": "^29.5.0",
+        "pretty-format": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-environment-node": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.5.0.tgz",
+      "integrity": "sha512-ExxuIK/+yQ+6PRGaHkKewYtg6hto2uGCgvKdb2nfJfKXgZ17DfXjvbZ+jA1Qt9A8EQSfPnt5FKIfnOO3u1h9qw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/environment": "^29.5.0",
+        "@jest/fake-timers": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "@types/node": "*",
+        "jest-mock": "^29.5.0",
+        "jest-util": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-extended": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jest-extended/-/jest-extended-4.0.0.tgz",
+      "integrity": "sha512-GMhMFdrwhYPB0y+cmI/5esz+F/Xc0OIzKbnr8SaiZ74YcWamxf7sVT78YlA15+JIQMTlpHBEgcxheyRBdHFqPA==",
+      "dev": true,
+      "dependencies": {
+        "jest-diff": "^29.0.0",
+        "jest-get-type": "^29.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "jest": ">=27.2.5"
+      },
+      "peerDependenciesMeta": {
+        "jest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-get-type": {
+      "version": "29.4.3",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.4.3.tgz",
+      "integrity": "sha512-J5Xez4nRRMjk8emnTpWrlkyb9pfRQQanDrvWHhsR1+VUfbwxi30eVcZFlcdGInRibU4G5LwHXpI7IRHU0CY+gg==",
+      "dev": true,
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-haste-map": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.5.0.tgz",
+      "integrity": "sha512-IspOPnnBro8YfVYSw6yDRKh/TiCdRngjxeacCps1cQ9cgVN6+10JUcuJ1EabrgYLOATsIAigxA0rLR9x/YlrSA==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^29.5.0",
+        "@types/graceful-fs": "^4.1.3",
+        "@types/node": "*",
+        "anymatch": "^3.0.3",
+        "fb-watchman": "^2.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-regex-util": "^29.4.3",
+        "jest-util": "^29.5.0",
+        "jest-worker": "^29.5.0",
+        "micromatch": "^4.0.4",
+        "walker": "^1.0.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "^2.3.2"
+      }
+    },
+    "node_modules/jest-leak-detector": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.5.0.tgz",
+      "integrity": "sha512-u9YdeeVnghBUtpN5mVxjID7KbkKE1QU4f6uUwuxiY0vYRi9BUCLKlPEZfDGR67ofdFmDz9oPAy2G92Ujrntmow==",
+      "dev": true,
+      "dependencies": {
+        "jest-get-type": "^29.4.3",
+        "pretty-format": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.5.0.tgz",
+      "integrity": "sha512-lecRtgm/rjIK0CQ7LPQwzCs2VwW6WAahA55YBuI+xqmhm7LAaxokSB8C97yJeYyT+HvQkH741StzpU41wohhWw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^29.5.0",
+        "jest-get-type": "^29.4.3",
+        "pretty-format": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-message-util": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.5.0.tgz",
+      "integrity": "sha512-Kijeg9Dag6CKtIDA7O21zNTACqD5MD/8HfIV8pdD94vFyFuer52SigdC3IQMhab3vACxXMiFk+yMHNdbqtyTGA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.12.13",
+        "@jest/types": "^29.5.0",
+        "@types/stack-utils": "^2.0.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^29.5.0",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-mock": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.5.0.tgz",
+      "integrity": "sha512-GqOzvdWDE4fAV2bWQLQCkujxYWL7RxjCnj71b5VhDAGOevB3qj3Ovg26A5NI84ZpODxyzaozXLOh2NCgkbvyaw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^29.5.0",
+        "@types/node": "*",
+        "jest-util": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-mock-axios": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/jest-mock-axios/-/jest-mock-axios-4.7.2.tgz",
+      "integrity": "sha512-8xrkCuEsscOLSw4Noi40Pq5tQMlKg3tbDZ0XNkf3Mv0Yq+z6+qS2tToimNs/3RIsEzoPXHTf2+mcySaNaYXIyw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/globals": "^29.5.0",
+        "jest": "~29.5.0",
+        "synchronous-promise": "^2.0.17"
+      }
+    },
+    "node_modules/jest-pnp-resolver": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
+      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "jest-resolve": "*"
+      },
+      "peerDependenciesMeta": {
+        "jest-resolve": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-regex-util": {
+      "version": "29.4.3",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.4.3.tgz",
+      "integrity": "sha512-O4FglZaMmWXbGHSQInfXewIsd1LMn9p3ZXB/6r4FOkyhX2/iP/soMG98jGvk/A3HAN78+5VWcBGO0BJAPRh4kg==",
+      "dev": true,
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-resolve": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-29.5.0.tgz",
+      "integrity": "sha512-1TzxJ37FQq7J10jPtQjcc+MkCkE3GBpBecsSUWJ0qZNJpmg6m0D9/7II03yJulm3H/fvVjgqLh/k2eYg+ui52w==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^29.5.0",
+        "jest-pnp-resolver": "^1.2.2",
+        "jest-util": "^29.5.0",
+        "jest-validate": "^29.5.0",
+        "resolve": "^1.20.0",
+        "resolve.exports": "^2.0.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-resolve-dependencies": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-29.5.0.tgz",
+      "integrity": "sha512-sjV3GFr0hDJMBpYeUuGduP+YeCRbd7S/ck6IvL3kQ9cpySYKqcqhdLLC2rFwrcL7tz5vYibomBrsFYWkIGGjOg==",
+      "dev": true,
+      "dependencies": {
+        "jest-regex-util": "^29.4.3",
+        "jest-snapshot": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-runner": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-29.5.0.tgz",
+      "integrity": "sha512-m7b6ypERhFghJsslMLhydaXBiLf7+jXy8FwGRHO3BGV1mcQpPbwiqiKUR2zU2NJuNeMenJmlFZCsIqzJCTeGLQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/console": "^29.5.0",
+        "@jest/environment": "^29.5.0",
+        "@jest/test-result": "^29.5.0",
+        "@jest/transform": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "emittery": "^0.13.1",
+        "graceful-fs": "^4.2.9",
+        "jest-docblock": "^29.4.3",
+        "jest-environment-node": "^29.5.0",
+        "jest-haste-map": "^29.5.0",
+        "jest-leak-detector": "^29.5.0",
+        "jest-message-util": "^29.5.0",
+        "jest-resolve": "^29.5.0",
+        "jest-runtime": "^29.5.0",
+        "jest-util": "^29.5.0",
+        "jest-watcher": "^29.5.0",
+        "jest-worker": "^29.5.0",
+        "p-limit": "^3.1.0",
+        "source-map-support": "0.5.13"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-runtime": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-29.5.0.tgz",
+      "integrity": "sha512-1Hr6Hh7bAgXQP+pln3homOiEZtCDZFqwmle7Ew2j8OlbkIu6uE3Y/etJQG8MLQs3Zy90xrp2C0BRrtPHG4zryw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/environment": "^29.5.0",
+        "@jest/fake-timers": "^29.5.0",
+        "@jest/globals": "^29.5.0",
+        "@jest/source-map": "^29.4.3",
+        "@jest/test-result": "^29.5.0",
+        "@jest/transform": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "cjs-module-lexer": "^1.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^29.5.0",
+        "jest-message-util": "^29.5.0",
+        "jest-mock": "^29.5.0",
+        "jest-regex-util": "^29.4.3",
+        "jest-resolve": "^29.5.0",
+        "jest-snapshot": "^29.5.0",
+        "jest-util": "^29.5.0",
+        "slash": "^3.0.0",
+        "strip-bom": "^4.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-runtime/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/jest-snapshot": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-29.5.0.tgz",
+      "integrity": "sha512-x7Wolra5V0tt3wRs3/ts3S6ciSQVypgGQlJpz2rsdQYoUKxMxPNaoHMGJN6qAuPJqS+2iQ1ZUn5kl7HCyls84g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.11.6",
+        "@babel/generator": "^7.7.2",
+        "@babel/plugin-syntax-jsx": "^7.7.2",
+        "@babel/plugin-syntax-typescript": "^7.7.2",
+        "@babel/traverse": "^7.7.2",
+        "@babel/types": "^7.3.3",
+        "@jest/expect-utils": "^29.5.0",
+        "@jest/transform": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "@types/babel__traverse": "^7.0.6",
+        "@types/prettier": "^2.1.5",
+        "babel-preset-current-node-syntax": "^1.0.0",
+        "chalk": "^4.0.0",
+        "expect": "^29.5.0",
+        "graceful-fs": "^4.2.9",
+        "jest-diff": "^29.5.0",
+        "jest-get-type": "^29.4.3",
+        "jest-matcher-utils": "^29.5.0",
+        "jest-message-util": "^29.5.0",
+        "jest-util": "^29.5.0",
+        "natural-compare": "^1.4.0",
+        "pretty-format": "^29.5.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-util": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz",
+      "integrity": "sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^29.5.0",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-validate": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-29.5.0.tgz",
+      "integrity": "sha512-pC26etNIi+y3HV8A+tUGr/lph9B18GnzSRAkPaaZJIE1eFdiYm6/CewuiJQ8/RlfHd1u/8Ioi8/sJ+CmbA+zAQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^29.5.0",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^29.4.3",
+        "leven": "^3.1.0",
+        "pretty-format": "^29.5.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-validate/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watcher": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-29.5.0.tgz",
+      "integrity": "sha512-KmTojKcapuqYrKDpRwfqcQ3zjMlwu27SYext9pt4GlF5FUgB+7XE1mcCnSm6a4uUpFyQIkb6ZhzZvHl+jiBCiA==",
+      "dev": true,
+      "dependencies": {
+        "@jest/test-result": "^29.5.0",
+        "@jest/types": "^29.5.0",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "emittery": "^0.13.1",
+        "jest-util": "^29.5.0",
+        "string-length": "^4.0.1"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-when": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/jest-when/-/jest-when-3.5.2.tgz",
+      "integrity": "sha512-4rDvnhaWh08RcPsoEVXgxRnUIE9wVIbZtGqZ5x2Wm9Ziz9aQs89PipQFmOK0ycbEhVAgiV3MUeTXp3Ar4s2FcQ==",
+      "dev": true,
+      "peerDependencies": {
+        "jest": ">= 25"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.5.0.tgz",
+      "integrity": "sha512-NcrQnevGoSp4b5kg+akIpthoAFHxPBcb5P6mYPY0fUNT+sSvmtu6jlkEle3anczUKIKEbMxFimk9oTP/tpIPgA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "jest-util": "^29.5.0",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/loupe": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",
+      "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.0"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true
+    },
+    "node_modules/makeerror": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
+      "dev": true,
+      "dependencies": {
+        "tmpl": "1.0.5"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-6.0.2.tgz",
+      "integrity": "sha512-MzWSV5nYVT7mVyWCwn2o7JH13w2TBRmmSqSRCKzTw+lmft9X4z+3wjvs06Tzijo5z4W/kahUCDpRXTF+ZrmF/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mock-fs": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/mock-fs/-/mock-fs-5.2.0.tgz",
+      "integrity": "sha512-2dF2R6YMSZbpip1V1WHKGLNjr/k48uQClqMVb5H3MOvwc9qhYis3/IWbj02qIg/Y8MDXKFF4c5v0rxx2o6xTZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
+    "node_modules/natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
+      "dev": true
+    },
+    "node_modules/node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
+      "dev": true
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz",
+      "integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==",
+      "dev": true
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/optionator/node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/path-scurry": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.0.tgz",
+      "integrity": "sha512-tZFEaRQbMLjwrsmidsGJ6wDMv0iazJWk6SfIKnY4Xru8auXgmJkOBa5DUbYFcFD2Rzk2+KDlIiF0GVXNCbgC7g==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^9.1.1 || ^10.0.0",
+        "minipass": "^5.0.0 || ^6.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.0.tgz",
+      "integrity": "sha512-svTf/fzsKHffP42sujkO/Rjs37BCIsQVRCeNYIm9WN8rgT7ffoUnRtZCqU+6BqcSBdv8gwJeTz8knJpgACeQMw==",
+      "dev": true,
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "29.5.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz",
+      "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.4.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dev": true,
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
+    "node_modules/punycode": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pure-rand": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.0.2.tgz",
+      "integrity": "sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/dubzzz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fast-check"
+        }
+      ]
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
+    },
+    "node_modules/read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
+      "dependencies": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg-up": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^4.1.0",
+        "read-pkg": "^5.2.0",
+        "type-fest": "^0.8.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg/node_modules/hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true
+    },
+    "node_modules/read-pkg/node_modules/normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "node_modules/read-pkg/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/read-pkg/node_modules/type-fest": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/regexp-tree": {
+      "version": "0.1.27",
+      "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.27.tgz",
+      "integrity": "sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==",
+      "dev": true,
+      "bin": {
+        "regexp-tree": "bin/regexp-tree"
+      }
+    },
+    "node_modules/regjsparser": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.10.0.tgz",
+      "integrity": "sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==",
+      "dev": true,
+      "dependencies": {
+        "jsesc": "~0.5.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.11.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-cwd/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve.exports": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.2.tgz",
+      "integrity": "sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-2.1.1.tgz",
+      "integrity": "sha512-rx+x8AMzKb5Q5lQ95Zoi6ZbJqwCLkqi3XuJXp5P3rT8OEc6sZCJG5AE5dU3lsgRr/F4Bs31jSlVN+j5KrsGu9A==",
+      "dev": true,
+      "dependencies": {
+        "regexp-tree": "~0.1.1"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
+      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.13",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz",
+      "integrity": "sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==",
+      "dev": true
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "dev": true
+    },
+    "node_modules/stack-utils": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
+      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/stack-utils/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-length": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+      "dev": true,
+      "dependencies": {
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/synchronous-promise": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz",
+      "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
+      "dev": true
+    },
+    "node_modules/systeminformation": {
+      "version": "5.18.6",
+      "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.18.6.tgz",
+      "integrity": "sha512-pLXv6kjJZ1xUcVs9SrCqbQ9y0x1rgRWxBUc8/KxpOp9IRxFGFfzVK5efsxBn/KdYog4C9rPcKk+kHNIL2SB/8Q==",
+      "os": [
+        "darwin",
+        "linux",
+        "win32",
+        "freebsd",
+        "openbsd",
+        "netbsd",
+        "sunos",
+        "android"
+      ],
+      "bin": {
+        "systeminformation": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "Buy me a coffee",
+        "url": "https://www.buymeacoffee.com/systeminfo"
+      }
+    },
+    "node_modules/test-exclude": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "dev": true,
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/test-exclude/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
+    "node_modules/tmpl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
+      "dev": true
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-jest": {
+      "version": "29.1.0",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.0.tgz",
+      "integrity": "sha512-ZhNr7Z4PcYa+JjMl62ir+zPiNJfXJN6E8hSLnaUKhOgqcn8vb3e537cpkd0FuAfRK3sR1LSqM1MOhliXNgOFPA==",
+      "dev": true,
+      "dependencies": {
+        "bs-logger": "0.x",
+        "fast-json-stable-stringify": "2.x",
+        "jest-util": "^29.0.0",
+        "json5": "^2.2.3",
+        "lodash.memoize": "4.x",
+        "make-error": "1.x",
+        "semver": "7.x",
+        "yargs-parser": "^21.0.1"
+      },
+      "bin": {
+        "ts-jest": "cli.js"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0-beta.0 <8",
+        "@jest/types": "^29.0.0",
+        "babel-jest": "^29.0.0",
+        "jest": "^29.0.0",
+        "typescript": ">=4.3 <6"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@jest/types": {
+          "optional": true
+        },
+        "babel-jest": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-jest/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ts-node": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "dev": true,
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-node/node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==",
+      "dev": true
+    },
+    "node_modules/tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^1.8.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+      }
+    },
+    "node_modules/tsutils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "dev": true
+    },
+    "node_modules/v8-to-istanbul": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.1.0.tgz",
+      "integrity": "sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.12",
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^1.6.0"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/walker": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
+      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
+      "dev": true,
+      "dependencies": {
+        "makeerror": "1.0.12"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "node_modules/write-file-atomic": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
+      "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
+      "dev": true,
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^3.0.7"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true
+    },
+    "node_modules/yaml": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/cli/package.json b/cli/package.json
new file mode 100644
index 000000000..cb07e71b0
--- /dev/null
+++ b/cli/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "immich-cli",
+  "dependencies": {
+    "axios": "^1.4.0",
+    "form-data": "^4.0.0",
+    "mime-types": "^2.1.35",
+    "systeminformation": "^5.18.4"
+  },
+  "devDependencies": {
+    "@types/byte-size": "^8.1.0",
+    "@types/chai": "^4.3.5",
+    "@types/cli-progress": "^3.11.0",
+    "@types/jest": "^29.5.2",
+    "@types/js-yaml": "^4.0.5",
+    "@types/mime-types": "^2.1.1",
+    "@types/mock-fs": "^4.13.1",
+    "@types/node": "^20.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "byte-size": "^8.1.1",
+    "chai": "^4.3.7",
+    "cli-progress": "^3.12.0",
+    "commander": "^11.0.0",
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jest": "^27.2.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-unicorn": "^47.0.0",
+    "glob": "^10.3.1",
+    "jest": "^29.5.0",
+    "jest-extended": "^4.0.0",
+    "jest-message-util": "^29.5.0",
+    "jest-mock-axios": "^4.7.2",
+    "jest-when": "^3.5.2",
+    "mock-fs": "^5.2.0",
+    "picomatch": "^2.3.1",
+    "ts-jest": "^29.1.0",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.5.3",
+    "typescript": "^4.9.4",
+    "yaml": "^2.3.1"
+  },
+  "scripts": {
+    "lint": "eslint \"src/**/*.ts\" --max-warnings 0",
+    "prepack": "yarn build ",
+    "test": "jest",
+    "test:cov": "jest --coverage",
+    "format": "prettier --check ."
+  }
+}
diff --git a/cli/src/__mocks__/axios.ts b/cli/src/__mocks__/axios.ts
new file mode 100644
index 000000000..e447986d8
--- /dev/null
+++ b/cli/src/__mocks__/axios.ts
@@ -0,0 +1,3 @@
+// ./__mocks__/axios.js
+import mockAxios from 'jest-mock-axios';
+export default mockAxios;
diff --git a/cli/src/api/client.ts b/cli/src/api/client.ts
new file mode 100644
index 000000000..713a6ee57
--- /dev/null
+++ b/cli/src/api/client.ts
@@ -0,0 +1,50 @@
+import {
+  AlbumApi,
+  APIKeyApi,
+  AssetApi,
+  AuthenticationApi,
+  Configuration,
+  JobApi,
+  OAuthApi,
+  ServerInfoApi,
+  SystemConfigApi,
+  UserApi,
+} from './open-api';
+import { ApiConfiguration } from '../cores/api-configuration';
+
+export class ImmichApi {
+  public userApi: UserApi;
+  public albumApi: AlbumApi;
+  public assetApi: AssetApi;
+  public authenticationApi: AuthenticationApi;
+  public oauthApi: OAuthApi;
+  public serverInfoApi: ServerInfoApi;
+  public jobApi: JobApi;
+  public keyApi: APIKeyApi;
+  public systemConfigApi: SystemConfigApi;
+
+  private readonly config;
+  public readonly apiConfiguration: ApiConfiguration;
+
+  constructor(instanceUrl: string, apiKey: string) {
+    this.apiConfiguration = new ApiConfiguration(instanceUrl, apiKey);
+    this.config = new Configuration({
+      basePath: instanceUrl,
+      baseOptions: {
+        headers: {
+          'x-api-key': apiKey,
+        },
+      },
+    });
+
+    this.userApi = new UserApi(this.config);
+    this.albumApi = new AlbumApi(this.config);
+    this.assetApi = new AssetApi(this.config);
+    this.authenticationApi = new AuthenticationApi(this.config);
+    this.oauthApi = new OAuthApi(this.config);
+    this.serverInfoApi = new ServerInfoApi(this.config);
+    this.jobApi = new JobApi(this.config);
+    this.keyApi = new APIKeyApi(this.config);
+    this.systemConfigApi = new SystemConfigApi(this.config);
+  }
+}
diff --git a/cli/src/api/open-api/.gitignore b/cli/src/api/open-api/.gitignore
new file mode 100644
index 000000000..149b57654
--- /dev/null
+++ b/cli/src/api/open-api/.gitignore
@@ -0,0 +1,4 @@
+wwwroot/*.js
+node_modules
+typings
+dist
diff --git a/cli/src/api/open-api/.npmignore b/cli/src/api/open-api/.npmignore
new file mode 100644
index 000000000..999d88df6
--- /dev/null
+++ b/cli/src/api/open-api/.npmignore
@@ -0,0 +1 @@
+# empty npmignore to ensure all required files (e.g., in the dist folder) are published by npm
\ No newline at end of file
diff --git a/cli/src/api/open-api/.openapi-generator-ignore b/cli/src/api/open-api/.openapi-generator-ignore
new file mode 100644
index 000000000..7484ee590
--- /dev/null
+++ b/cli/src/api/open-api/.openapi-generator-ignore
@@ -0,0 +1,23 @@
+# OpenAPI Generator Ignore
+# Generated by openapi-generator https://github.com/openapitools/openapi-generator
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell OpenAPI Generator to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md
diff --git a/cli/src/api/open-api/.openapi-generator/FILES b/cli/src/api/open-api/.openapi-generator/FILES
new file mode 100644
index 000000000..16b445eee
--- /dev/null
+++ b/cli/src/api/open-api/.openapi-generator/FILES
@@ -0,0 +1,9 @@
+.gitignore
+.npmignore
+.openapi-generator-ignore
+api.ts
+base.ts
+common.ts
+configuration.ts
+git_push.sh
+index.ts
diff --git a/cli/src/api/open-api/.openapi-generator/VERSION b/cli/src/api/open-api/.openapi-generator/VERSION
new file mode 100644
index 000000000..4be2c727a
--- /dev/null
+++ b/cli/src/api/open-api/.openapi-generator/VERSION
@@ -0,0 +1 @@
+6.5.0
\ No newline at end of file
diff --git a/cli/src/api/open-api/api.ts b/cli/src/api/open-api/api.ts
new file mode 100644
index 000000000..246d633c9
--- /dev/null
+++ b/cli/src/api/open-api/api.ts
@@ -0,0 +1,12508 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Immich
+ * Immich API
+ *
+ * The version of the OpenAPI document: 1.65.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+import type { Configuration } from './configuration';
+import type { AxiosPromise, AxiosInstance, AxiosRequestConfig } from 'axios';
+import globalAxios from 'axios';
+// Some imports not used depending on template conditions
+// @ts-ignore
+import { DUMMY_BASE_URL, assertParamExists, setApiKeyToObject, setBasicAuthToObject, setBearerAuthToObject, setOAuthToObject, setSearchParams, serializeDataIfNeeded, toPathString, createRequestFunction } from './common';
+import type { RequestArgs } from './base';
+// @ts-ignore
+import { BASE_PATH, COLLECTION_FORMATS, BaseAPI, RequiredError } from './base';
+
+/**
+ * 
+ * @export
+ * @interface APIKeyCreateDto
+ */
+export interface APIKeyCreateDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyCreateDto
+     */
+    'name'?: string;
+}
+/**
+ * 
+ * @export
+ * @interface APIKeyCreateResponseDto
+ */
+export interface APIKeyCreateResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyCreateResponseDto
+     */
+    'secret': string;
+    /**
+     * 
+     * @type {APIKeyResponseDto}
+     * @memberof APIKeyCreateResponseDto
+     */
+    'apiKey': APIKeyResponseDto;
+}
+/**
+ * 
+ * @export
+ * @interface APIKeyResponseDto
+ */
+export interface APIKeyResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyResponseDto
+     */
+    'name': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyResponseDto
+     */
+    'createdAt': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyResponseDto
+     */
+    'updatedAt': string;
+}
+/**
+ * 
+ * @export
+ * @interface APIKeyUpdateDto
+ */
+export interface APIKeyUpdateDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyUpdateDto
+     */
+    'name': string;
+}
+/**
+ * 
+ * @export
+ * @interface AddAssetsDto
+ */
+export interface AddAssetsDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof AddAssetsDto
+     */
+    'assetIds': Array<string>;
+}
+/**
+ * 
+ * @export
+ * @interface AddAssetsResponseDto
+ */
+export interface AddAssetsResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof AddAssetsResponseDto
+     */
+    'successfullyAdded': number;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof AddAssetsResponseDto
+     */
+    'alreadyInAlbum': Array<string>;
+    /**
+     * 
+     * @type {AlbumResponseDto}
+     * @memberof AddAssetsResponseDto
+     */
+    'album'?: AlbumResponseDto;
+}
+/**
+ * 
+ * @export
+ * @interface AddUsersDto
+ */
+export interface AddUsersDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof AddUsersDto
+     */
+    'sharedUserIds': Array<string>;
+}
+/**
+ * 
+ * @export
+ * @interface AdminSignupResponseDto
+ */
+export interface AdminSignupResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof AdminSignupResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AdminSignupResponseDto
+     */
+    'email': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AdminSignupResponseDto
+     */
+    'firstName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AdminSignupResponseDto
+     */
+    'lastName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AdminSignupResponseDto
+     */
+    'createdAt': string;
+}
+/**
+ * 
+ * @export
+ * @interface AlbumCountResponseDto
+ */
+export interface AlbumCountResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof AlbumCountResponseDto
+     */
+    'owned': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof AlbumCountResponseDto
+     */
+    'shared': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof AlbumCountResponseDto
+     */
+    'notShared': number;
+}
+/**
+ * 
+ * @export
+ * @interface AlbumResponseDto
+ */
+export interface AlbumResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof AlbumResponseDto
+     */
+    'assetCount': number;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'ownerId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'albumName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'createdAt': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'updatedAt': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'albumThumbnailAssetId': string | null;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AlbumResponseDto
+     */
+    'shared': boolean;
+    /**
+     * 
+     * @type {Array<UserResponseDto>}
+     * @memberof AlbumResponseDto
+     */
+    'sharedUsers': Array<UserResponseDto>;
+    /**
+     * 
+     * @type {Array<AssetResponseDto>}
+     * @memberof AlbumResponseDto
+     */
+    'assets': Array<AssetResponseDto>;
+    /**
+     * 
+     * @type {UserResponseDto}
+     * @memberof AlbumResponseDto
+     */
+    'owner': UserResponseDto;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'lastModifiedAssetTimestamp'?: string;
+}
+/**
+ * 
+ * @export
+ * @interface AllJobStatusResponseDto
+ */
+export interface AllJobStatusResponseDto {
+    /**
+     * 
+     * @type {JobStatusDto}
+     * @memberof AllJobStatusResponseDto
+     */
+    'thumbnailGeneration': JobStatusDto;
+    /**
+     * 
+     * @type {JobStatusDto}
+     * @memberof AllJobStatusResponseDto
+     */
+    'metadataExtraction': JobStatusDto;
+    /**
+     * 
+     * @type {JobStatusDto}
+     * @memberof AllJobStatusResponseDto
+     */
+    'videoConversion': JobStatusDto;
+    /**
+     * 
+     * @type {JobStatusDto}
+     * @memberof AllJobStatusResponseDto
+     */
+    'objectTagging': JobStatusDto;
+    /**
+     * 
+     * @type {JobStatusDto}
+     * @memberof AllJobStatusResponseDto
+     */
+    'clipEncoding': JobStatusDto;
+    /**
+     * 
+     * @type {JobStatusDto}
+     * @memberof AllJobStatusResponseDto
+     */
+    'storageTemplateMigration': JobStatusDto;
+    /**
+     * 
+     * @type {JobStatusDto}
+     * @memberof AllJobStatusResponseDto
+     */
+    'backgroundTask': JobStatusDto;
+    /**
+     * 
+     * @type {JobStatusDto}
+     * @memberof AllJobStatusResponseDto
+     */
+    'search': JobStatusDto;
+    /**
+     * 
+     * @type {JobStatusDto}
+     * @memberof AllJobStatusResponseDto
+     */
+    'recognizeFaces': JobStatusDto;
+    /**
+     * 
+     * @type {JobStatusDto}
+     * @memberof AllJobStatusResponseDto
+     */
+    'sidecar': JobStatusDto;
+}
+/**
+ * 
+ * @export
+ * @interface AssetBulkUploadCheckDto
+ */
+export interface AssetBulkUploadCheckDto {
+    /**
+     * 
+     * @type {Array<AssetBulkUploadCheckItem>}
+     * @memberof AssetBulkUploadCheckDto
+     */
+    'assets': Array<AssetBulkUploadCheckItem>;
+}
+/**
+ * 
+ * @export
+ * @interface AssetBulkUploadCheckItem
+ */
+export interface AssetBulkUploadCheckItem {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetBulkUploadCheckItem
+     */
+    'id': string;
+    /**
+     * base64 or hex encoded sha1 hash
+     * @type {string}
+     * @memberof AssetBulkUploadCheckItem
+     */
+    'checksum': string;
+}
+/**
+ * 
+ * @export
+ * @interface AssetBulkUploadCheckResponseDto
+ */
+export interface AssetBulkUploadCheckResponseDto {
+    /**
+     * 
+     * @type {Array<AssetBulkUploadCheckResult>}
+     * @memberof AssetBulkUploadCheckResponseDto
+     */
+    'results': Array<AssetBulkUploadCheckResult>;
+}
+/**
+ * 
+ * @export
+ * @interface AssetBulkUploadCheckResult
+ */
+export interface AssetBulkUploadCheckResult {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetBulkUploadCheckResult
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetBulkUploadCheckResult
+     */
+    'action': AssetBulkUploadCheckResultActionEnum;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetBulkUploadCheckResult
+     */
+    'reason'?: AssetBulkUploadCheckResultReasonEnum;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetBulkUploadCheckResult
+     */
+    'assetId'?: string;
+}
+
+export const AssetBulkUploadCheckResultActionEnum = {
+    Accept: 'accept',
+    Reject: 'reject'
+} as const;
+
+export type AssetBulkUploadCheckResultActionEnum = typeof AssetBulkUploadCheckResultActionEnum[keyof typeof AssetBulkUploadCheckResultActionEnum];
+export const AssetBulkUploadCheckResultReasonEnum = {
+    Duplicate: 'duplicate',
+    UnsupportedFormat: 'unsupported-format'
+} as const;
+
+export type AssetBulkUploadCheckResultReasonEnum = typeof AssetBulkUploadCheckResultReasonEnum[keyof typeof AssetBulkUploadCheckResultReasonEnum];
+
+/**
+ * 
+ * @export
+ * @interface AssetCountByTimeBucket
+ */
+export interface AssetCountByTimeBucket {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetCountByTimeBucket
+     */
+    'timeBucket': string;
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetCountByTimeBucket
+     */
+    'count': number;
+}
+/**
+ * 
+ * @export
+ * @interface AssetCountByTimeBucketResponseDto
+ */
+export interface AssetCountByTimeBucketResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetCountByTimeBucketResponseDto
+     */
+    'totalCount': number;
+    /**
+     * 
+     * @type {Array<AssetCountByTimeBucket>}
+     * @memberof AssetCountByTimeBucketResponseDto
+     */
+    'buckets': Array<AssetCountByTimeBucket>;
+}
+/**
+ * 
+ * @export
+ * @interface AssetCountByUserIdResponseDto
+ */
+export interface AssetCountByUserIdResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetCountByUserIdResponseDto
+     */
+    'audio': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetCountByUserIdResponseDto
+     */
+    'photos': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetCountByUserIdResponseDto
+     */
+    'videos': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetCountByUserIdResponseDto
+     */
+    'other': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetCountByUserIdResponseDto
+     */
+    'total': number;
+}
+/**
+ * 
+ * @export
+ * @interface AssetFileUploadResponseDto
+ */
+export interface AssetFileUploadResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetFileUploadResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetFileUploadResponseDto
+     */
+    'duplicate': boolean;
+}
+/**
+ * 
+ * @export
+ * @interface AssetIdsDto
+ */
+export interface AssetIdsDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof AssetIdsDto
+     */
+    'assetIds': Array<string>;
+}
+/**
+ * 
+ * @export
+ * @interface AssetIdsResponseDto
+ */
+export interface AssetIdsResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetIdsResponseDto
+     */
+    'assetId': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetIdsResponseDto
+     */
+    'success': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetIdsResponseDto
+     */
+    'error'?: AssetIdsResponseDtoErrorEnum;
+}
+
+export const AssetIdsResponseDtoErrorEnum = {
+    Duplicate: 'duplicate',
+    NoPermission: 'no_permission',
+    NotFound: 'not_found'
+} as const;
+
+export type AssetIdsResponseDtoErrorEnum = typeof AssetIdsResponseDtoErrorEnum[keyof typeof AssetIdsResponseDtoErrorEnum];
+
+/**
+ * 
+ * @export
+ * @interface AssetResponseDto
+ */
+export interface AssetResponseDto {
+    /**
+     * 
+     * @type {AssetTypeEnum}
+     * @memberof AssetResponseDto
+     */
+    'type': AssetTypeEnum;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'deviceAssetId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'ownerId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'deviceId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'originalPath': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'originalFileName': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetResponseDto
+     */
+    'resized': boolean;
+    /**
+     * base64 encoded thumbhash
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'thumbhash': string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'fileCreatedAt': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'fileModifiedAt': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'updatedAt': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetResponseDto
+     */
+    'isFavorite': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetResponseDto
+     */
+    'isArchived': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'mimeType': string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'duration': string;
+    /**
+     * 
+     * @type {ExifResponseDto}
+     * @memberof AssetResponseDto
+     */
+    'exifInfo'?: ExifResponseDto;
+    /**
+     * 
+     * @type {SmartInfoResponseDto}
+     * @memberof AssetResponseDto
+     */
+    'smartInfo'?: SmartInfoResponseDto;
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'livePhotoVideoId'?: string | null;
+    /**
+     * 
+     * @type {Array<TagResponseDto>}
+     * @memberof AssetResponseDto
+     */
+    'tags'?: Array<TagResponseDto>;
+    /**
+     * 
+     * @type {Array<PersonResponseDto>}
+     * @memberof AssetResponseDto
+     */
+    'people'?: Array<PersonResponseDto>;
+    /**
+     * base64 encoded sha1 hash
+     * @type {string}
+     * @memberof AssetResponseDto
+     */
+    'checksum': string;
+}
+
+
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const AssetTypeEnum = {
+    Image: 'IMAGE',
+    Video: 'VIDEO',
+    Audio: 'AUDIO',
+    Other: 'OTHER'
+} as const;
+
+export type AssetTypeEnum = typeof AssetTypeEnum[keyof typeof AssetTypeEnum];
+
+
+/**
+ * 
+ * @export
+ * @interface AuthDeviceResponseDto
+ */
+export interface AuthDeviceResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof AuthDeviceResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AuthDeviceResponseDto
+     */
+    'createdAt': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AuthDeviceResponseDto
+     */
+    'updatedAt': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AuthDeviceResponseDto
+     */
+    'current': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof AuthDeviceResponseDto
+     */
+    'deviceType': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AuthDeviceResponseDto
+     */
+    'deviceOS': string;
+}
+/**
+ * 
+ * @export
+ * @interface ChangePasswordDto
+ */
+export interface ChangePasswordDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof ChangePasswordDto
+     */
+    'password': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ChangePasswordDto
+     */
+    'newPassword': string;
+}
+/**
+ * 
+ * @export
+ * @interface CheckDuplicateAssetDto
+ */
+export interface CheckDuplicateAssetDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof CheckDuplicateAssetDto
+     */
+    'deviceAssetId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CheckDuplicateAssetDto
+     */
+    'deviceId': string;
+}
+/**
+ * 
+ * @export
+ * @interface CheckDuplicateAssetResponseDto
+ */
+export interface CheckDuplicateAssetResponseDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof CheckDuplicateAssetResponseDto
+     */
+    'isExist': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof CheckDuplicateAssetResponseDto
+     */
+    'id'?: string;
+}
+/**
+ * 
+ * @export
+ * @interface CheckExistingAssetsDto
+ */
+export interface CheckExistingAssetsDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof CheckExistingAssetsDto
+     */
+    'deviceAssetIds': Array<string>;
+    /**
+     * 
+     * @type {string}
+     * @memberof CheckExistingAssetsDto
+     */
+    'deviceId': string;
+}
+/**
+ * 
+ * @export
+ * @interface CheckExistingAssetsResponseDto
+ */
+export interface CheckExistingAssetsResponseDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof CheckExistingAssetsResponseDto
+     */
+    'existingIds': Array<string>;
+}
+/**
+ * 
+ * @export
+ * @interface CreateAlbumDto
+ */
+export interface CreateAlbumDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof CreateAlbumDto
+     */
+    'albumName': string;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof CreateAlbumDto
+     */
+    'sharedWithUserIds'?: Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof CreateAlbumDto
+     */
+    'assetIds'?: Array<string>;
+}
+/**
+ * 
+ * @export
+ * @interface CreateProfileImageResponseDto
+ */
+export interface CreateProfileImageResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof CreateProfileImageResponseDto
+     */
+    'userId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CreateProfileImageResponseDto
+     */
+    'profileImagePath': string;
+}
+/**
+ * 
+ * @export
+ * @interface CreateTagDto
+ */
+export interface CreateTagDto {
+    /**
+     * 
+     * @type {TagTypeEnum}
+     * @memberof CreateTagDto
+     */
+    'type': TagTypeEnum;
+    /**
+     * 
+     * @type {string}
+     * @memberof CreateTagDto
+     */
+    'name': string;
+}
+
+
+/**
+ * 
+ * @export
+ * @interface CreateUserDto
+ */
+export interface CreateUserDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof CreateUserDto
+     */
+    'email': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CreateUserDto
+     */
+    'password': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CreateUserDto
+     */
+    'firstName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CreateUserDto
+     */
+    'lastName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CreateUserDto
+     */
+    'storageLabel'?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof CreateUserDto
+     */
+    'externalPath'?: string | null;
+}
+/**
+ * 
+ * @export
+ * @interface CuratedLocationsResponseDto
+ */
+export interface CuratedLocationsResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof CuratedLocationsResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CuratedLocationsResponseDto
+     */
+    'city': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CuratedLocationsResponseDto
+     */
+    'resizePath': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CuratedLocationsResponseDto
+     */
+    'deviceAssetId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CuratedLocationsResponseDto
+     */
+    'deviceId': string;
+}
+/**
+ * 
+ * @export
+ * @interface CuratedObjectsResponseDto
+ */
+export interface CuratedObjectsResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof CuratedObjectsResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CuratedObjectsResponseDto
+     */
+    'object': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CuratedObjectsResponseDto
+     */
+    'resizePath': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CuratedObjectsResponseDto
+     */
+    'deviceAssetId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof CuratedObjectsResponseDto
+     */
+    'deviceId': string;
+}
+/**
+ * 
+ * @export
+ * @interface DeleteAssetDto
+ */
+export interface DeleteAssetDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof DeleteAssetDto
+     */
+    'ids': Array<string>;
+}
+/**
+ * 
+ * @export
+ * @interface DeleteAssetResponseDto
+ */
+export interface DeleteAssetResponseDto {
+    /**
+     * 
+     * @type {DeleteAssetStatus}
+     * @memberof DeleteAssetResponseDto
+     */
+    'status': DeleteAssetStatus;
+    /**
+     * 
+     * @type {string}
+     * @memberof DeleteAssetResponseDto
+     */
+    'id': string;
+}
+
+
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const DeleteAssetStatus = {
+    Success: 'SUCCESS',
+    Failed: 'FAILED'
+} as const;
+
+export type DeleteAssetStatus = typeof DeleteAssetStatus[keyof typeof DeleteAssetStatus];
+
+
+/**
+ * 
+ * @export
+ * @interface DownloadArchiveInfo
+ */
+export interface DownloadArchiveInfo {
+    /**
+     * 
+     * @type {number}
+     * @memberof DownloadArchiveInfo
+     */
+    'size': number;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof DownloadArchiveInfo
+     */
+    'assetIds': Array<string>;
+}
+/**
+ * 
+ * @export
+ * @interface DownloadResponseDto
+ */
+export interface DownloadResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof DownloadResponseDto
+     */
+    'totalSize': number;
+    /**
+     * 
+     * @type {Array<DownloadArchiveInfo>}
+     * @memberof DownloadResponseDto
+     */
+    'archives': Array<DownloadArchiveInfo>;
+}
+/**
+ * 
+ * @export
+ * @interface ExifResponseDto
+ */
+export interface ExifResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof ExifResponseDto
+     */
+    'fileSizeInByte'?: number | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'make'?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'model'?: string | null;
+    /**
+     * 
+     * @type {number}
+     * @memberof ExifResponseDto
+     */
+    'exifImageWidth'?: number | null;
+    /**
+     * 
+     * @type {number}
+     * @memberof ExifResponseDto
+     */
+    'exifImageHeight'?: number | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'orientation'?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'dateTimeOriginal'?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'modifyDate'?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'timeZone'?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'lensModel'?: string | null;
+    /**
+     * 
+     * @type {number}
+     * @memberof ExifResponseDto
+     */
+    'fNumber'?: number | null;
+    /**
+     * 
+     * @type {number}
+     * @memberof ExifResponseDto
+     */
+    'focalLength'?: number | null;
+    /**
+     * 
+     * @type {number}
+     * @memberof ExifResponseDto
+     */
+    'iso'?: number | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'exposureTime'?: string | null;
+    /**
+     * 
+     * @type {number}
+     * @memberof ExifResponseDto
+     */
+    'latitude'?: number | null;
+    /**
+     * 
+     * @type {number}
+     * @memberof ExifResponseDto
+     */
+    'longitude'?: number | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'city'?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'state'?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'country'?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExifResponseDto
+     */
+    'description'?: string | null;
+}
+/**
+ * 
+ * @export
+ * @interface GetAssetByTimeBucketDto
+ */
+export interface GetAssetByTimeBucketDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof GetAssetByTimeBucketDto
+     */
+    'timeBucket': Array<string>;
+    /**
+     * 
+     * @type {string}
+     * @memberof GetAssetByTimeBucketDto
+     */
+    'userId'?: string;
+    /**
+     * Include assets without thumbnails
+     * @type {boolean}
+     * @memberof GetAssetByTimeBucketDto
+     */
+    'withoutThumbs'?: boolean;
+}
+/**
+ * 
+ * @export
+ * @interface GetAssetCountByTimeBucketDto
+ */
+export interface GetAssetCountByTimeBucketDto {
+    /**
+     * 
+     * @type {TimeGroupEnum}
+     * @memberof GetAssetCountByTimeBucketDto
+     */
+    'timeGroup': TimeGroupEnum;
+    /**
+     * 
+     * @type {string}
+     * @memberof GetAssetCountByTimeBucketDto
+     */
+    'userId'?: string;
+    /**
+     * Include assets without thumbnails
+     * @type {boolean}
+     * @memberof GetAssetCountByTimeBucketDto
+     */
+    'withoutThumbs'?: boolean;
+}
+
+
+/**
+ * 
+ * @export
+ * @interface ImportAssetDto
+ */
+export interface ImportAssetDto {
+    /**
+     * 
+     * @type {AssetTypeEnum}
+     * @memberof ImportAssetDto
+     */
+    'assetType': AssetTypeEnum;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof ImportAssetDto
+     */
+    'isReadOnly'?: boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof ImportAssetDto
+     */
+    'assetPath': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ImportAssetDto
+     */
+    'sidecarPath'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ImportAssetDto
+     */
+    'deviceAssetId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ImportAssetDto
+     */
+    'deviceId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ImportAssetDto
+     */
+    'fileCreatedAt': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ImportAssetDto
+     */
+    'fileModifiedAt': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof ImportAssetDto
+     */
+    'isFavorite': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof ImportAssetDto
+     */
+    'isArchived'?: boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof ImportAssetDto
+     */
+    'isVisible'?: boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof ImportAssetDto
+     */
+    'duration'?: string;
+}
+
+
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const JobCommand = {
+    Start: 'start',
+    Pause: 'pause',
+    Resume: 'resume',
+    Empty: 'empty'
+} as const;
+
+export type JobCommand = typeof JobCommand[keyof typeof JobCommand];
+
+
+/**
+ * 
+ * @export
+ * @interface JobCommandDto
+ */
+export interface JobCommandDto {
+    /**
+     * 
+     * @type {JobCommand}
+     * @memberof JobCommandDto
+     */
+    'command': JobCommand;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof JobCommandDto
+     */
+    'force': boolean;
+}
+
+
+/**
+ * 
+ * @export
+ * @interface JobCountsDto
+ */
+export interface JobCountsDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof JobCountsDto
+     */
+    'active': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof JobCountsDto
+     */
+    'completed': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof JobCountsDto
+     */
+    'failed': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof JobCountsDto
+     */
+    'delayed': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof JobCountsDto
+     */
+    'waiting': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof JobCountsDto
+     */
+    'paused': number;
+}
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const JobName = {
+    ThumbnailGeneration: 'thumbnailGeneration',
+    MetadataExtraction: 'metadataExtraction',
+    VideoConversion: 'videoConversion',
+    ObjectTagging: 'objectTagging',
+    RecognizeFaces: 'recognizeFaces',
+    ClipEncoding: 'clipEncoding',
+    BackgroundTask: 'backgroundTask',
+    StorageTemplateMigration: 'storageTemplateMigration',
+    Search: 'search',
+    Sidecar: 'sidecar'
+} as const;
+
+export type JobName = typeof JobName[keyof typeof JobName];
+
+
+/**
+ * 
+ * @export
+ * @interface JobSettingsDto
+ */
+export interface JobSettingsDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof JobSettingsDto
+     */
+    'concurrency': number;
+}
+/**
+ * 
+ * @export
+ * @interface JobStatusDto
+ */
+export interface JobStatusDto {
+    /**
+     * 
+     * @type {JobCountsDto}
+     * @memberof JobStatusDto
+     */
+    'jobCounts': JobCountsDto;
+    /**
+     * 
+     * @type {QueueStatusDto}
+     * @memberof JobStatusDto
+     */
+    'queueStatus': QueueStatusDto;
+}
+/**
+ * 
+ * @export
+ * @interface LoginCredentialDto
+ */
+export interface LoginCredentialDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof LoginCredentialDto
+     */
+    'email': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof LoginCredentialDto
+     */
+    'password': string;
+}
+/**
+ * 
+ * @export
+ * @interface LoginResponseDto
+ */
+export interface LoginResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof LoginResponseDto
+     */
+    'accessToken': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof LoginResponseDto
+     */
+    'userId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof LoginResponseDto
+     */
+    'userEmail': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof LoginResponseDto
+     */
+    'firstName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof LoginResponseDto
+     */
+    'lastName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof LoginResponseDto
+     */
+    'profileImagePath': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof LoginResponseDto
+     */
+    'isAdmin': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof LoginResponseDto
+     */
+    'shouldChangePassword': boolean;
+}
+/**
+ * 
+ * @export
+ * @interface LogoutResponseDto
+ */
+export interface LogoutResponseDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof LogoutResponseDto
+     */
+    'successful': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof LogoutResponseDto
+     */
+    'redirectUri': string;
+}
+/**
+ * 
+ * @export
+ * @interface MapMarkerResponseDto
+ */
+export interface MapMarkerResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof MapMarkerResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {number}
+     * @memberof MapMarkerResponseDto
+     */
+    'lat': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof MapMarkerResponseDto
+     */
+    'lon': number;
+}
+/**
+ * 
+ * @export
+ * @interface MemoryLaneResponseDto
+ */
+export interface MemoryLaneResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof MemoryLaneResponseDto
+     */
+    'title': string;
+    /**
+     * 
+     * @type {Array<AssetResponseDto>}
+     * @memberof MemoryLaneResponseDto
+     */
+    'assets': Array<AssetResponseDto>;
+}
+/**
+ * 
+ * @export
+ * @interface OAuthCallbackDto
+ */
+export interface OAuthCallbackDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof OAuthCallbackDto
+     */
+    'url': string;
+}
+/**
+ * 
+ * @export
+ * @interface OAuthConfigDto
+ */
+export interface OAuthConfigDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof OAuthConfigDto
+     */
+    'redirectUri': string;
+}
+/**
+ * 
+ * @export
+ * @interface OAuthConfigResponseDto
+ */
+export interface OAuthConfigResponseDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof OAuthConfigResponseDto
+     */
+    'enabled': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof OAuthConfigResponseDto
+     */
+    'passwordLoginEnabled': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof OAuthConfigResponseDto
+     */
+    'url'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof OAuthConfigResponseDto
+     */
+    'buttonText'?: string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof OAuthConfigResponseDto
+     */
+    'autoLaunch'?: boolean;
+}
+/**
+ * 
+ * @export
+ * @interface PersonResponseDto
+ */
+export interface PersonResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof PersonResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof PersonResponseDto
+     */
+    'name': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof PersonResponseDto
+     */
+    'thumbnailPath': string;
+}
+/**
+ * 
+ * @export
+ * @interface PersonUpdateDto
+ */
+export interface PersonUpdateDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof PersonUpdateDto
+     */
+    'name': string;
+}
+/**
+ * 
+ * @export
+ * @interface QueueStatusDto
+ */
+export interface QueueStatusDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof QueueStatusDto
+     */
+    'isActive': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof QueueStatusDto
+     */
+    'isPaused': boolean;
+}
+/**
+ * 
+ * @export
+ * @interface RemoveAssetsDto
+ */
+export interface RemoveAssetsDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof RemoveAssetsDto
+     */
+    'assetIds': Array<string>;
+}
+/**
+ * 
+ * @export
+ * @interface SearchAlbumResponseDto
+ */
+export interface SearchAlbumResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof SearchAlbumResponseDto
+     */
+    'total': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof SearchAlbumResponseDto
+     */
+    'count': number;
+    /**
+     * 
+     * @type {Array<AlbumResponseDto>}
+     * @memberof SearchAlbumResponseDto
+     */
+    'items': Array<AlbumResponseDto>;
+    /**
+     * 
+     * @type {Array<SearchFacetResponseDto>}
+     * @memberof SearchAlbumResponseDto
+     */
+    'facets': Array<SearchFacetResponseDto>;
+}
+/**
+ * 
+ * @export
+ * @interface SearchAssetDto
+ */
+export interface SearchAssetDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchAssetDto
+     */
+    'searchTerm': string;
+}
+/**
+ * 
+ * @export
+ * @interface SearchAssetResponseDto
+ */
+export interface SearchAssetResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof SearchAssetResponseDto
+     */
+    'total': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof SearchAssetResponseDto
+     */
+    'count': number;
+    /**
+     * 
+     * @type {Array<AssetResponseDto>}
+     * @memberof SearchAssetResponseDto
+     */
+    'items': Array<AssetResponseDto>;
+    /**
+     * 
+     * @type {Array<SearchFacetResponseDto>}
+     * @memberof SearchAssetResponseDto
+     */
+    'facets': Array<SearchFacetResponseDto>;
+}
+/**
+ * 
+ * @export
+ * @interface SearchConfigResponseDto
+ */
+export interface SearchConfigResponseDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SearchConfigResponseDto
+     */
+    'enabled': boolean;
+}
+/**
+ * 
+ * @export
+ * @interface SearchExploreItem
+ */
+export interface SearchExploreItem {
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchExploreItem
+     */
+    'value': string;
+    /**
+     * 
+     * @type {AssetResponseDto}
+     * @memberof SearchExploreItem
+     */
+    'data': AssetResponseDto;
+}
+/**
+ * 
+ * @export
+ * @interface SearchExploreResponseDto
+ */
+export interface SearchExploreResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchExploreResponseDto
+     */
+    'fieldName': string;
+    /**
+     * 
+     * @type {Array<SearchExploreItem>}
+     * @memberof SearchExploreResponseDto
+     */
+    'items': Array<SearchExploreItem>;
+}
+/**
+ * 
+ * @export
+ * @interface SearchFacetCountResponseDto
+ */
+export interface SearchFacetCountResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof SearchFacetCountResponseDto
+     */
+    'count': number;
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchFacetCountResponseDto
+     */
+    'value': string;
+}
+/**
+ * 
+ * @export
+ * @interface SearchFacetResponseDto
+ */
+export interface SearchFacetResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchFacetResponseDto
+     */
+    'fieldName': string;
+    /**
+     * 
+     * @type {Array<SearchFacetCountResponseDto>}
+     * @memberof SearchFacetResponseDto
+     */
+    'counts': Array<SearchFacetCountResponseDto>;
+}
+/**
+ * 
+ * @export
+ * @interface SearchResponseDto
+ */
+export interface SearchResponseDto {
+    /**
+     * 
+     * @type {SearchAlbumResponseDto}
+     * @memberof SearchResponseDto
+     */
+    'albums': SearchAlbumResponseDto;
+    /**
+     * 
+     * @type {SearchAssetResponseDto}
+     * @memberof SearchResponseDto
+     */
+    'assets': SearchAssetResponseDto;
+}
+/**
+ * 
+ * @export
+ * @interface ServerInfoResponseDto
+ */
+export interface ServerInfoResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerInfoResponseDto
+     */
+    'diskSizeRaw': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerInfoResponseDto
+     */
+    'diskUseRaw': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerInfoResponseDto
+     */
+    'diskAvailableRaw': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerInfoResponseDto
+     */
+    'diskUsagePercentage': number;
+    /**
+     * 
+     * @type {string}
+     * @memberof ServerInfoResponseDto
+     */
+    'diskSize': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ServerInfoResponseDto
+     */
+    'diskUse': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ServerInfoResponseDto
+     */
+    'diskAvailable': string;
+}
+/**
+ * 
+ * @export
+ * @interface ServerPingResponse
+ */
+export interface ServerPingResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof ServerPingResponse
+     */
+    'res': string;
+}
+/**
+ * 
+ * @export
+ * @interface ServerStatsResponseDto
+ */
+export interface ServerStatsResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerStatsResponseDto
+     */
+    'photos': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerStatsResponseDto
+     */
+    'videos': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerStatsResponseDto
+     */
+    'usage': number;
+    /**
+     * 
+     * @type {Array<UsageByUserDto>}
+     * @memberof ServerStatsResponseDto
+     */
+    'usageByUser': Array<UsageByUserDto>;
+}
+/**
+ * 
+ * @export
+ * @interface ServerVersionReponseDto
+ */
+export interface ServerVersionReponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerVersionReponseDto
+     */
+    'major': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerVersionReponseDto
+     */
+    'minor': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerVersionReponseDto
+     */
+    'patch': number;
+}
+/**
+ * 
+ * @export
+ * @interface SharedLinkCreateDto
+ */
+export interface SharedLinkCreateDto {
+    /**
+     * 
+     * @type {SharedLinkType}
+     * @memberof SharedLinkCreateDto
+     */
+    'type': SharedLinkType;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SharedLinkCreateDto
+     */
+    'assetIds'?: Array<string>;
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkCreateDto
+     */
+    'albumId'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkCreateDto
+     */
+    'description'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkCreateDto
+     */
+    'expiresAt'?: string | null;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SharedLinkCreateDto
+     */
+    'allowUpload'?: boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SharedLinkCreateDto
+     */
+    'allowDownload'?: boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SharedLinkCreateDto
+     */
+    'showExif'?: boolean;
+}
+
+
+/**
+ * 
+ * @export
+ * @interface SharedLinkEditDto
+ */
+export interface SharedLinkEditDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkEditDto
+     */
+    'description'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkEditDto
+     */
+    'expiresAt'?: string | null;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SharedLinkEditDto
+     */
+    'allowUpload'?: boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SharedLinkEditDto
+     */
+    'allowDownload'?: boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SharedLinkEditDto
+     */
+    'showExif'?: boolean;
+}
+/**
+ * 
+ * @export
+ * @interface SharedLinkResponseDto
+ */
+export interface SharedLinkResponseDto {
+    /**
+     * 
+     * @type {SharedLinkType}
+     * @memberof SharedLinkResponseDto
+     */
+    'type': SharedLinkType;
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkResponseDto
+     */
+    'description': string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkResponseDto
+     */
+    'userId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkResponseDto
+     */
+    'key': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkResponseDto
+     */
+    'createdAt': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkResponseDto
+     */
+    'expiresAt': string | null;
+    /**
+     * 
+     * @type {Array<AssetResponseDto>}
+     * @memberof SharedLinkResponseDto
+     */
+    'assets': Array<AssetResponseDto>;
+    /**
+     * 
+     * @type {AlbumResponseDto}
+     * @memberof SharedLinkResponseDto
+     */
+    'album'?: AlbumResponseDto;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SharedLinkResponseDto
+     */
+    'allowUpload': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SharedLinkResponseDto
+     */
+    'allowDownload': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SharedLinkResponseDto
+     */
+    'showExif': boolean;
+}
+
+
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const SharedLinkType = {
+    Album: 'ALBUM',
+    Individual: 'INDIVIDUAL'
+} as const;
+
+export type SharedLinkType = typeof SharedLinkType[keyof typeof SharedLinkType];
+
+
+/**
+ * 
+ * @export
+ * @interface SignUpDto
+ */
+export interface SignUpDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof SignUpDto
+     */
+    'email': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SignUpDto
+     */
+    'password': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SignUpDto
+     */
+    'firstName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SignUpDto
+     */
+    'lastName': string;
+}
+/**
+ * 
+ * @export
+ * @interface SmartInfoResponseDto
+ */
+export interface SmartInfoResponseDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SmartInfoResponseDto
+     */
+    'tags'?: Array<string> | null;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SmartInfoResponseDto
+     */
+    'objects'?: Array<string> | null;
+}
+/**
+ * 
+ * @export
+ * @interface SystemConfigDto
+ */
+export interface SystemConfigDto {
+    /**
+     * 
+     * @type {SystemConfigFFmpegDto}
+     * @memberof SystemConfigDto
+     */
+    'ffmpeg': SystemConfigFFmpegDto;
+    /**
+     * 
+     * @type {SystemConfigOAuthDto}
+     * @memberof SystemConfigDto
+     */
+    'oauth': SystemConfigOAuthDto;
+    /**
+     * 
+     * @type {SystemConfigPasswordLoginDto}
+     * @memberof SystemConfigDto
+     */
+    'passwordLogin': SystemConfigPasswordLoginDto;
+    /**
+     * 
+     * @type {SystemConfigStorageTemplateDto}
+     * @memberof SystemConfigDto
+     */
+    'storageTemplate': SystemConfigStorageTemplateDto;
+    /**
+     * 
+     * @type {SystemConfigJobDto}
+     * @memberof SystemConfigDto
+     */
+    'job': SystemConfigJobDto;
+}
+/**
+ * 
+ * @export
+ * @interface SystemConfigFFmpegDto
+ */
+export interface SystemConfigFFmpegDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof SystemConfigFFmpegDto
+     */
+    'crf': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof SystemConfigFFmpegDto
+     */
+    'threads': number;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigFFmpegDto
+     */
+    'preset': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigFFmpegDto
+     */
+    'targetVideoCodec': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigFFmpegDto
+     */
+    'targetAudioCodec': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigFFmpegDto
+     */
+    'targetResolution': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigFFmpegDto
+     */
+    'maxBitrate': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SystemConfigFFmpegDto
+     */
+    'twoPass': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigFFmpegDto
+     */
+    'transcode': SystemConfigFFmpegDtoTranscodeEnum;
+}
+
+export const SystemConfigFFmpegDtoTranscodeEnum = {
+    All: 'all',
+    Optimal: 'optimal',
+    Required: 'required',
+    Disabled: 'disabled'
+} as const;
+
+export type SystemConfigFFmpegDtoTranscodeEnum = typeof SystemConfigFFmpegDtoTranscodeEnum[keyof typeof SystemConfigFFmpegDtoTranscodeEnum];
+
+/**
+ * 
+ * @export
+ * @interface SystemConfigJobDto
+ */
+export interface SystemConfigJobDto {
+    /**
+     * 
+     * @type {JobSettingsDto}
+     * @memberof SystemConfigJobDto
+     */
+    'thumbnailGeneration': JobSettingsDto;
+    /**
+     * 
+     * @type {JobSettingsDto}
+     * @memberof SystemConfigJobDto
+     */
+    'metadataExtraction': JobSettingsDto;
+    /**
+     * 
+     * @type {JobSettingsDto}
+     * @memberof SystemConfigJobDto
+     */
+    'videoConversion': JobSettingsDto;
+    /**
+     * 
+     * @type {JobSettingsDto}
+     * @memberof SystemConfigJobDto
+     */
+    'objectTagging': JobSettingsDto;
+    /**
+     * 
+     * @type {JobSettingsDto}
+     * @memberof SystemConfigJobDto
+     */
+    'clipEncoding': JobSettingsDto;
+    /**
+     * 
+     * @type {JobSettingsDto}
+     * @memberof SystemConfigJobDto
+     */
+    'storageTemplateMigration': JobSettingsDto;
+    /**
+     * 
+     * @type {JobSettingsDto}
+     * @memberof SystemConfigJobDto
+     */
+    'backgroundTask': JobSettingsDto;
+    /**
+     * 
+     * @type {JobSettingsDto}
+     * @memberof SystemConfigJobDto
+     */
+    'search': JobSettingsDto;
+    /**
+     * 
+     * @type {JobSettingsDto}
+     * @memberof SystemConfigJobDto
+     */
+    'recognizeFaces': JobSettingsDto;
+    /**
+     * 
+     * @type {JobSettingsDto}
+     * @memberof SystemConfigJobDto
+     */
+    'sidecar': JobSettingsDto;
+}
+/**
+ * 
+ * @export
+ * @interface SystemConfigOAuthDto
+ */
+export interface SystemConfigOAuthDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SystemConfigOAuthDto
+     */
+    'enabled': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigOAuthDto
+     */
+    'issuerUrl': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigOAuthDto
+     */
+    'clientId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigOAuthDto
+     */
+    'clientSecret': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigOAuthDto
+     */
+    'scope': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigOAuthDto
+     */
+    'buttonText': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SystemConfigOAuthDto
+     */
+    'autoRegister': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SystemConfigOAuthDto
+     */
+    'autoLaunch': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SystemConfigOAuthDto
+     */
+    'mobileOverrideEnabled': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigOAuthDto
+     */
+    'mobileRedirectUri': string;
+}
+/**
+ * 
+ * @export
+ * @interface SystemConfigPasswordLoginDto
+ */
+export interface SystemConfigPasswordLoginDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SystemConfigPasswordLoginDto
+     */
+    'enabled': boolean;
+}
+/**
+ * 
+ * @export
+ * @interface SystemConfigStorageTemplateDto
+ */
+export interface SystemConfigStorageTemplateDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigStorageTemplateDto
+     */
+    'template': string;
+}
+/**
+ * 
+ * @export
+ * @interface SystemConfigTemplateStorageOptionDto
+ */
+export interface SystemConfigTemplateStorageOptionDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SystemConfigTemplateStorageOptionDto
+     */
+    'yearOptions': Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SystemConfigTemplateStorageOptionDto
+     */
+    'monthOptions': Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SystemConfigTemplateStorageOptionDto
+     */
+    'dayOptions': Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SystemConfigTemplateStorageOptionDto
+     */
+    'hourOptions': Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SystemConfigTemplateStorageOptionDto
+     */
+    'minuteOptions': Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SystemConfigTemplateStorageOptionDto
+     */
+    'secondOptions': Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SystemConfigTemplateStorageOptionDto
+     */
+    'presetOptions': Array<string>;
+}
+/**
+ * 
+ * @export
+ * @interface TagResponseDto
+ */
+export interface TagResponseDto {
+    /**
+     * 
+     * @type {TagTypeEnum}
+     * @memberof TagResponseDto
+     */
+    'type': TagTypeEnum;
+    /**
+     * 
+     * @type {string}
+     * @memberof TagResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof TagResponseDto
+     */
+    'name': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof TagResponseDto
+     */
+    'userId': string;
+}
+
+
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const TagTypeEnum = {
+    Object: 'OBJECT',
+    Face: 'FACE',
+    Custom: 'CUSTOM'
+} as const;
+
+export type TagTypeEnum = typeof TagTypeEnum[keyof typeof TagTypeEnum];
+
+
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const ThumbnailFormat = {
+    Jpeg: 'JPEG',
+    Webp: 'WEBP'
+} as const;
+
+export type ThumbnailFormat = typeof ThumbnailFormat[keyof typeof ThumbnailFormat];
+
+
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const TimeGroupEnum = {
+    Day: 'day',
+    Month: 'month'
+} as const;
+
+export type TimeGroupEnum = typeof TimeGroupEnum[keyof typeof TimeGroupEnum];
+
+
+/**
+ * 
+ * @export
+ * @interface UpdateAlbumDto
+ */
+export interface UpdateAlbumDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateAlbumDto
+     */
+    'albumName'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateAlbumDto
+     */
+    'albumThumbnailAssetId'?: string;
+}
+/**
+ * 
+ * @export
+ * @interface UpdateAssetDto
+ */
+export interface UpdateAssetDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof UpdateAssetDto
+     */
+    'tagIds'?: Array<string>;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof UpdateAssetDto
+     */
+    'isFavorite'?: boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof UpdateAssetDto
+     */
+    'isArchived'?: boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateAssetDto
+     */
+    'description'?: string;
+}
+/**
+ * 
+ * @export
+ * @interface UpdateTagDto
+ */
+export interface UpdateTagDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateTagDto
+     */
+    'name'?: string;
+}
+/**
+ * 
+ * @export
+ * @interface UpdateUserDto
+ */
+export interface UpdateUserDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateUserDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateUserDto
+     */
+    'email'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateUserDto
+     */
+    'password'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateUserDto
+     */
+    'firstName'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateUserDto
+     */
+    'lastName'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateUserDto
+     */
+    'storageLabel'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UpdateUserDto
+     */
+    'externalPath'?: string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof UpdateUserDto
+     */
+    'isAdmin'?: boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof UpdateUserDto
+     */
+    'shouldChangePassword'?: boolean;
+}
+/**
+ * 
+ * @export
+ * @interface UsageByUserDto
+ */
+export interface UsageByUserDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof UsageByUserDto
+     */
+    'userId': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UsageByUserDto
+     */
+    'userFirstName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UsageByUserDto
+     */
+    'userLastName': string;
+    /**
+     * 
+     * @type {number}
+     * @memberof UsageByUserDto
+     */
+    'photos': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof UsageByUserDto
+     */
+    'videos': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof UsageByUserDto
+     */
+    'usage': number;
+}
+/**
+ * 
+ * @export
+ * @interface UserCountResponseDto
+ */
+export interface UserCountResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof UserCountResponseDto
+     */
+    'userCount': number;
+}
+/**
+ * 
+ * @export
+ * @interface UserResponseDto
+ */
+export interface UserResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof UserResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserResponseDto
+     */
+    'email': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserResponseDto
+     */
+    'firstName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserResponseDto
+     */
+    'lastName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserResponseDto
+     */
+    'storageLabel': string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserResponseDto
+     */
+    'externalPath': string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserResponseDto
+     */
+    'profileImagePath': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof UserResponseDto
+     */
+    'shouldChangePassword': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof UserResponseDto
+     */
+    'isAdmin': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserResponseDto
+     */
+    'createdAt': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserResponseDto
+     */
+    'deletedAt': string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserResponseDto
+     */
+    'updatedAt': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserResponseDto
+     */
+    'oauthId': string;
+}
+/**
+ * 
+ * @export
+ * @interface ValidateAccessTokenResponseDto
+ */
+export interface ValidateAccessTokenResponseDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof ValidateAccessTokenResponseDto
+     */
+    'authStatus': boolean;
+}
+
+/**
+ * APIKeyApi - axios parameter creator
+ * @export
+ */
+export const APIKeyApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {APIKeyCreateDto} aPIKeyCreateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createKey: async (aPIKeyCreateDto: APIKeyCreateDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'aPIKeyCreateDto' is not null or undefined
+            assertParamExists('createKey', 'aPIKeyCreateDto', aPIKeyCreateDto)
+            const localVarPath = `/api-key`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(aPIKeyCreateDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteKey: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('deleteKey', 'id', id)
+            const localVarPath = `/api-key/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getKey: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('getKey', 'id', id)
+            const localVarPath = `/api-key/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getKeys: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/api-key`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {APIKeyUpdateDto} aPIKeyUpdateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateKey: async (id: string, aPIKeyUpdateDto: APIKeyUpdateDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('updateKey', 'id', id)
+            // verify required parameter 'aPIKeyUpdateDto' is not null or undefined
+            assertParamExists('updateKey', 'aPIKeyUpdateDto', aPIKeyUpdateDto)
+            const localVarPath = `/api-key/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(aPIKeyUpdateDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * APIKeyApi - functional programming interface
+ * @export
+ */
+export const APIKeyApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = APIKeyApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {APIKeyCreateDto} aPIKeyCreateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createKey(aPIKeyCreateDto: APIKeyCreateDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<APIKeyCreateResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.createKey(aPIKeyCreateDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async deleteKey(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.deleteKey(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getKey(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<APIKeyResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getKey(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getKeys(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<APIKeyResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getKeys(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {APIKeyUpdateDto} aPIKeyUpdateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateKey(id: string, aPIKeyUpdateDto: APIKeyUpdateDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<APIKeyResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateKey(id, aPIKeyUpdateDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * APIKeyApi - factory interface
+ * @export
+ */
+export const APIKeyApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = APIKeyApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {APIKeyApiCreateKeyRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createKey(requestParameters: APIKeyApiCreateKeyRequest, options?: AxiosRequestConfig): AxiosPromise<APIKeyCreateResponseDto> {
+            return localVarFp.createKey(requestParameters.aPIKeyCreateDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {APIKeyApiDeleteKeyRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteKey(requestParameters: APIKeyApiDeleteKeyRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.deleteKey(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {APIKeyApiGetKeyRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getKey(requestParameters: APIKeyApiGetKeyRequest, options?: AxiosRequestConfig): AxiosPromise<APIKeyResponseDto> {
+            return localVarFp.getKey(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getKeys(options?: AxiosRequestConfig): AxiosPromise<Array<APIKeyResponseDto>> {
+            return localVarFp.getKeys(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {APIKeyApiUpdateKeyRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateKey(requestParameters: APIKeyApiUpdateKeyRequest, options?: AxiosRequestConfig): AxiosPromise<APIKeyResponseDto> {
+            return localVarFp.updateKey(requestParameters.id, requestParameters.aPIKeyUpdateDto, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for createKey operation in APIKeyApi.
+ * @export
+ * @interface APIKeyApiCreateKeyRequest
+ */
+export interface APIKeyApiCreateKeyRequest {
+    /**
+     * 
+     * @type {APIKeyCreateDto}
+     * @memberof APIKeyApiCreateKey
+     */
+    readonly aPIKeyCreateDto: APIKeyCreateDto
+}
+
+/**
+ * Request parameters for deleteKey operation in APIKeyApi.
+ * @export
+ * @interface APIKeyApiDeleteKeyRequest
+ */
+export interface APIKeyApiDeleteKeyRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyApiDeleteKey
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for getKey operation in APIKeyApi.
+ * @export
+ * @interface APIKeyApiGetKeyRequest
+ */
+export interface APIKeyApiGetKeyRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyApiGetKey
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for updateKey operation in APIKeyApi.
+ * @export
+ * @interface APIKeyApiUpdateKeyRequest
+ */
+export interface APIKeyApiUpdateKeyRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof APIKeyApiUpdateKey
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {APIKeyUpdateDto}
+     * @memberof APIKeyApiUpdateKey
+     */
+    readonly aPIKeyUpdateDto: APIKeyUpdateDto
+}
+
+/**
+ * APIKeyApi - object-oriented interface
+ * @export
+ * @class APIKeyApi
+ * @extends {BaseAPI}
+ */
+export class APIKeyApi extends BaseAPI {
+    /**
+     * 
+     * @param {APIKeyApiCreateKeyRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof APIKeyApi
+     */
+    public createKey(requestParameters: APIKeyApiCreateKeyRequest, options?: AxiosRequestConfig) {
+        return APIKeyApiFp(this.configuration).createKey(requestParameters.aPIKeyCreateDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {APIKeyApiDeleteKeyRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof APIKeyApi
+     */
+    public deleteKey(requestParameters: APIKeyApiDeleteKeyRequest, options?: AxiosRequestConfig) {
+        return APIKeyApiFp(this.configuration).deleteKey(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {APIKeyApiGetKeyRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof APIKeyApi
+     */
+    public getKey(requestParameters: APIKeyApiGetKeyRequest, options?: AxiosRequestConfig) {
+        return APIKeyApiFp(this.configuration).getKey(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof APIKeyApi
+     */
+    public getKeys(options?: AxiosRequestConfig) {
+        return APIKeyApiFp(this.configuration).getKeys(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {APIKeyApiUpdateKeyRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof APIKeyApi
+     */
+    public updateKey(requestParameters: APIKeyApiUpdateKeyRequest, options?: AxiosRequestConfig) {
+        return APIKeyApiFp(this.configuration).updateKey(requestParameters.id, requestParameters.aPIKeyUpdateDto, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * AlbumApi - axios parameter creator
+ * @export
+ */
+export const AlbumApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {string} id 
+         * @param {AddAssetsDto} addAssetsDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        addAssetsToAlbum: async (id: string, addAssetsDto: AddAssetsDto, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('addAssetsToAlbum', 'id', id)
+            // verify required parameter 'addAssetsDto' is not null or undefined
+            assertParamExists('addAssetsToAlbum', 'addAssetsDto', addAssetsDto)
+            const localVarPath = `/album/{id}/assets`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(addAssetsDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {AddUsersDto} addUsersDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        addUsersToAlbum: async (id: string, addUsersDto: AddUsersDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('addUsersToAlbum', 'id', id)
+            // verify required parameter 'addUsersDto' is not null or undefined
+            assertParamExists('addUsersToAlbum', 'addUsersDto', addUsersDto)
+            const localVarPath = `/album/{id}/users`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(addUsersDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {CreateAlbumDto} createAlbumDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createAlbum: async (createAlbumDto: CreateAlbumDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'createAlbumDto' is not null or undefined
+            assertParamExists('createAlbum', 'createAlbumDto', createAlbumDto)
+            const localVarPath = `/album`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(createAlbumDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteAlbum: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('deleteAlbum', 'id', id)
+            const localVarPath = `/album/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAlbumCount: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/album/count`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAlbumInfo: async (id: string, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('getAlbumInfo', 'id', id)
+            const localVarPath = `/album/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {boolean} [shared] 
+         * @param {string} [assetId] Only returns albums that contain the asset Ignores the shared parameter undefined: get all albums
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllAlbums: async (shared?: boolean, assetId?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/album`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (shared !== undefined) {
+                localVarQueryParameter['shared'] = shared;
+            }
+
+            if (assetId !== undefined) {
+                localVarQueryParameter['assetId'] = assetId;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {RemoveAssetsDto} removeAssetsDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        removeAssetFromAlbum: async (id: string, removeAssetsDto: RemoveAssetsDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('removeAssetFromAlbum', 'id', id)
+            // verify required parameter 'removeAssetsDto' is not null or undefined
+            assertParamExists('removeAssetFromAlbum', 'removeAssetsDto', removeAssetsDto)
+            const localVarPath = `/album/{id}/assets`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(removeAssetsDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {string} userId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        removeUserFromAlbum: async (id: string, userId: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('removeUserFromAlbum', 'id', id)
+            // verify required parameter 'userId' is not null or undefined
+            assertParamExists('removeUserFromAlbum', 'userId', userId)
+            const localVarPath = `/album/{id}/user/{userId}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)))
+                .replace(`{${"userId"}}`, encodeURIComponent(String(userId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {UpdateAlbumDto} updateAlbumDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateAlbumInfo: async (id: string, updateAlbumDto: UpdateAlbumDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('updateAlbumInfo', 'id', id)
+            // verify required parameter 'updateAlbumDto' is not null or undefined
+            assertParamExists('updateAlbumInfo', 'updateAlbumDto', updateAlbumDto)
+            const localVarPath = `/album/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PATCH', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(updateAlbumDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * AlbumApi - functional programming interface
+ * @export
+ */
+export const AlbumApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = AlbumApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {string} id 
+         * @param {AddAssetsDto} addAssetsDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async addAssetsToAlbum(id: string, addAssetsDto: AddAssetsDto, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AddAssetsResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.addAssetsToAlbum(id, addAssetsDto, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {AddUsersDto} addUsersDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async addUsersToAlbum(id: string, addUsersDto: AddUsersDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AlbumResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.addUsersToAlbum(id, addUsersDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {CreateAlbumDto} createAlbumDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createAlbum(createAlbumDto: CreateAlbumDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AlbumResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.createAlbum(createAlbumDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async deleteAlbum(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.deleteAlbum(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAlbumCount(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AlbumCountResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAlbumCount(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAlbumInfo(id: string, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AlbumResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAlbumInfo(id, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {boolean} [shared] 
+         * @param {string} [assetId] Only returns albums that contain the asset Ignores the shared parameter undefined: get all albums
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAllAlbums(shared?: boolean, assetId?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AlbumResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAllAlbums(shared, assetId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {RemoveAssetsDto} removeAssetsDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async removeAssetFromAlbum(id: string, removeAssetsDto: RemoveAssetsDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AlbumResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.removeAssetFromAlbum(id, removeAssetsDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {string} userId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async removeUserFromAlbum(id: string, userId: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.removeUserFromAlbum(id, userId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {UpdateAlbumDto} updateAlbumDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateAlbumInfo(id: string, updateAlbumDto: UpdateAlbumDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AlbumResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateAlbumInfo(id, updateAlbumDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * AlbumApi - factory interface
+ * @export
+ */
+export const AlbumApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = AlbumApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {AlbumApiAddAssetsToAlbumRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        addAssetsToAlbum(requestParameters: AlbumApiAddAssetsToAlbumRequest, options?: AxiosRequestConfig): AxiosPromise<AddAssetsResponseDto> {
+            return localVarFp.addAssetsToAlbum(requestParameters.id, requestParameters.addAssetsDto, requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AlbumApiAddUsersToAlbumRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        addUsersToAlbum(requestParameters: AlbumApiAddUsersToAlbumRequest, options?: AxiosRequestConfig): AxiosPromise<AlbumResponseDto> {
+            return localVarFp.addUsersToAlbum(requestParameters.id, requestParameters.addUsersDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AlbumApiCreateAlbumRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createAlbum(requestParameters: AlbumApiCreateAlbumRequest, options?: AxiosRequestConfig): AxiosPromise<AlbumResponseDto> {
+            return localVarFp.createAlbum(requestParameters.createAlbumDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AlbumApiDeleteAlbumRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteAlbum(requestParameters: AlbumApiDeleteAlbumRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.deleteAlbum(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAlbumCount(options?: AxiosRequestConfig): AxiosPromise<AlbumCountResponseDto> {
+            return localVarFp.getAlbumCount(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AlbumApiGetAlbumInfoRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAlbumInfo(requestParameters: AlbumApiGetAlbumInfoRequest, options?: AxiosRequestConfig): AxiosPromise<AlbumResponseDto> {
+            return localVarFp.getAlbumInfo(requestParameters.id, requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AlbumApiGetAllAlbumsRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllAlbums(requestParameters: AlbumApiGetAllAlbumsRequest = {}, options?: AxiosRequestConfig): AxiosPromise<Array<AlbumResponseDto>> {
+            return localVarFp.getAllAlbums(requestParameters.shared, requestParameters.assetId, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AlbumApiRemoveAssetFromAlbumRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        removeAssetFromAlbum(requestParameters: AlbumApiRemoveAssetFromAlbumRequest, options?: AxiosRequestConfig): AxiosPromise<AlbumResponseDto> {
+            return localVarFp.removeAssetFromAlbum(requestParameters.id, requestParameters.removeAssetsDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AlbumApiRemoveUserFromAlbumRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        removeUserFromAlbum(requestParameters: AlbumApiRemoveUserFromAlbumRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.removeUserFromAlbum(requestParameters.id, requestParameters.userId, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AlbumApiUpdateAlbumInfoRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateAlbumInfo(requestParameters: AlbumApiUpdateAlbumInfoRequest, options?: AxiosRequestConfig): AxiosPromise<AlbumResponseDto> {
+            return localVarFp.updateAlbumInfo(requestParameters.id, requestParameters.updateAlbumDto, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for addAssetsToAlbum operation in AlbumApi.
+ * @export
+ * @interface AlbumApiAddAssetsToAlbumRequest
+ */
+export interface AlbumApiAddAssetsToAlbumRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumApiAddAssetsToAlbum
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {AddAssetsDto}
+     * @memberof AlbumApiAddAssetsToAlbum
+     */
+    readonly addAssetsDto: AddAssetsDto
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumApiAddAssetsToAlbum
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for addUsersToAlbum operation in AlbumApi.
+ * @export
+ * @interface AlbumApiAddUsersToAlbumRequest
+ */
+export interface AlbumApiAddUsersToAlbumRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumApiAddUsersToAlbum
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {AddUsersDto}
+     * @memberof AlbumApiAddUsersToAlbum
+     */
+    readonly addUsersDto: AddUsersDto
+}
+
+/**
+ * Request parameters for createAlbum operation in AlbumApi.
+ * @export
+ * @interface AlbumApiCreateAlbumRequest
+ */
+export interface AlbumApiCreateAlbumRequest {
+    /**
+     * 
+     * @type {CreateAlbumDto}
+     * @memberof AlbumApiCreateAlbum
+     */
+    readonly createAlbumDto: CreateAlbumDto
+}
+
+/**
+ * Request parameters for deleteAlbum operation in AlbumApi.
+ * @export
+ * @interface AlbumApiDeleteAlbumRequest
+ */
+export interface AlbumApiDeleteAlbumRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumApiDeleteAlbum
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for getAlbumInfo operation in AlbumApi.
+ * @export
+ * @interface AlbumApiGetAlbumInfoRequest
+ */
+export interface AlbumApiGetAlbumInfoRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumApiGetAlbumInfo
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumApiGetAlbumInfo
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for getAllAlbums operation in AlbumApi.
+ * @export
+ * @interface AlbumApiGetAllAlbumsRequest
+ */
+export interface AlbumApiGetAllAlbumsRequest {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AlbumApiGetAllAlbums
+     */
+    readonly shared?: boolean
+
+    /**
+     * Only returns albums that contain the asset Ignores the shared parameter undefined: get all albums
+     * @type {string}
+     * @memberof AlbumApiGetAllAlbums
+     */
+    readonly assetId?: string
+}
+
+/**
+ * Request parameters for removeAssetFromAlbum operation in AlbumApi.
+ * @export
+ * @interface AlbumApiRemoveAssetFromAlbumRequest
+ */
+export interface AlbumApiRemoveAssetFromAlbumRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumApiRemoveAssetFromAlbum
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {RemoveAssetsDto}
+     * @memberof AlbumApiRemoveAssetFromAlbum
+     */
+    readonly removeAssetsDto: RemoveAssetsDto
+}
+
+/**
+ * Request parameters for removeUserFromAlbum operation in AlbumApi.
+ * @export
+ * @interface AlbumApiRemoveUserFromAlbumRequest
+ */
+export interface AlbumApiRemoveUserFromAlbumRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumApiRemoveUserFromAlbum
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumApiRemoveUserFromAlbum
+     */
+    readonly userId: string
+}
+
+/**
+ * Request parameters for updateAlbumInfo operation in AlbumApi.
+ * @export
+ * @interface AlbumApiUpdateAlbumInfoRequest
+ */
+export interface AlbumApiUpdateAlbumInfoRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumApiUpdateAlbumInfo
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {UpdateAlbumDto}
+     * @memberof AlbumApiUpdateAlbumInfo
+     */
+    readonly updateAlbumDto: UpdateAlbumDto
+}
+
+/**
+ * AlbumApi - object-oriented interface
+ * @export
+ * @class AlbumApi
+ * @extends {BaseAPI}
+ */
+export class AlbumApi extends BaseAPI {
+    /**
+     * 
+     * @param {AlbumApiAddAssetsToAlbumRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AlbumApi
+     */
+    public addAssetsToAlbum(requestParameters: AlbumApiAddAssetsToAlbumRequest, options?: AxiosRequestConfig) {
+        return AlbumApiFp(this.configuration).addAssetsToAlbum(requestParameters.id, requestParameters.addAssetsDto, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AlbumApiAddUsersToAlbumRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AlbumApi
+     */
+    public addUsersToAlbum(requestParameters: AlbumApiAddUsersToAlbumRequest, options?: AxiosRequestConfig) {
+        return AlbumApiFp(this.configuration).addUsersToAlbum(requestParameters.id, requestParameters.addUsersDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AlbumApiCreateAlbumRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AlbumApi
+     */
+    public createAlbum(requestParameters: AlbumApiCreateAlbumRequest, options?: AxiosRequestConfig) {
+        return AlbumApiFp(this.configuration).createAlbum(requestParameters.createAlbumDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AlbumApiDeleteAlbumRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AlbumApi
+     */
+    public deleteAlbum(requestParameters: AlbumApiDeleteAlbumRequest, options?: AxiosRequestConfig) {
+        return AlbumApiFp(this.configuration).deleteAlbum(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AlbumApi
+     */
+    public getAlbumCount(options?: AxiosRequestConfig) {
+        return AlbumApiFp(this.configuration).getAlbumCount(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AlbumApiGetAlbumInfoRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AlbumApi
+     */
+    public getAlbumInfo(requestParameters: AlbumApiGetAlbumInfoRequest, options?: AxiosRequestConfig) {
+        return AlbumApiFp(this.configuration).getAlbumInfo(requestParameters.id, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AlbumApiGetAllAlbumsRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AlbumApi
+     */
+    public getAllAlbums(requestParameters: AlbumApiGetAllAlbumsRequest = {}, options?: AxiosRequestConfig) {
+        return AlbumApiFp(this.configuration).getAllAlbums(requestParameters.shared, requestParameters.assetId, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AlbumApiRemoveAssetFromAlbumRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AlbumApi
+     */
+    public removeAssetFromAlbum(requestParameters: AlbumApiRemoveAssetFromAlbumRequest, options?: AxiosRequestConfig) {
+        return AlbumApiFp(this.configuration).removeAssetFromAlbum(requestParameters.id, requestParameters.removeAssetsDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AlbumApiRemoveUserFromAlbumRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AlbumApi
+     */
+    public removeUserFromAlbum(requestParameters: AlbumApiRemoveUserFromAlbumRequest, options?: AxiosRequestConfig) {
+        return AlbumApiFp(this.configuration).removeUserFromAlbum(requestParameters.id, requestParameters.userId, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AlbumApiUpdateAlbumInfoRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AlbumApi
+     */
+    public updateAlbumInfo(requestParameters: AlbumApiUpdateAlbumInfoRequest, options?: AxiosRequestConfig) {
+        return AlbumApiFp(this.configuration).updateAlbumInfo(requestParameters.id, requestParameters.updateAlbumDto, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * AssetApi - axios parameter creator
+ * @export
+ */
+export const AssetApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * Checks if assets exist by checksums
+         * @param {AssetBulkUploadCheckDto} assetBulkUploadCheckDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        bulkUploadCheck: async (assetBulkUploadCheckDto: AssetBulkUploadCheckDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'assetBulkUploadCheckDto' is not null or undefined
+            assertParamExists('bulkUploadCheck', 'assetBulkUploadCheckDto', assetBulkUploadCheckDto)
+            const localVarPath = `/asset/bulk-upload-check`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(assetBulkUploadCheckDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * Check duplicated asset before uploading - for Web upload used
+         * @param {CheckDuplicateAssetDto} checkDuplicateAssetDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        checkDuplicateAsset: async (checkDuplicateAssetDto: CheckDuplicateAssetDto, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'checkDuplicateAssetDto' is not null or undefined
+            assertParamExists('checkDuplicateAsset', 'checkDuplicateAssetDto', checkDuplicateAssetDto)
+            const localVarPath = `/asset/check`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(checkDuplicateAssetDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * Checks if multiple assets exist on the server and returns all existing - used by background backup
+         * @param {CheckExistingAssetsDto} checkExistingAssetsDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        checkExistingAssets: async (checkExistingAssetsDto: CheckExistingAssetsDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'checkExistingAssetsDto' is not null or undefined
+            assertParamExists('checkExistingAssets', 'checkExistingAssetsDto', checkExistingAssetsDto)
+            const localVarPath = `/asset/exist`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(checkExistingAssetsDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {DeleteAssetDto} deleteAssetDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteAsset: async (deleteAssetDto: DeleteAssetDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'deleteAssetDto' is not null or undefined
+            assertParamExists('deleteAsset', 'deleteAssetDto', deleteAssetDto)
+            const localVarPath = `/asset`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(deleteAssetDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        downloadArchive: async (assetIdsDto: AssetIdsDto, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'assetIdsDto' is not null or undefined
+            assertParamExists('downloadArchive', 'assetIdsDto', assetIdsDto)
+            const localVarPath = `/asset/download`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(assetIdsDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        downloadFile: async (id: string, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('downloadFile', 'id', id)
+            const localVarPath = `/asset/download/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * Get all AssetEntity belong to the user
+         * @param {string} [userId] 
+         * @param {boolean} [isFavorite] 
+         * @param {boolean} [isArchived] 
+         * @param {boolean} [withoutThumbs] Include assets without thumbnails
+         * @param {number} [skip] 
+         * @param {string} [ifNoneMatch] ETag of data already cached on the client
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllAssets: async (userId?: string, isFavorite?: boolean, isArchived?: boolean, withoutThumbs?: boolean, skip?: number, ifNoneMatch?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/asset`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (userId !== undefined) {
+                localVarQueryParameter['userId'] = userId;
+            }
+
+            if (isFavorite !== undefined) {
+                localVarQueryParameter['isFavorite'] = isFavorite;
+            }
+
+            if (isArchived !== undefined) {
+                localVarQueryParameter['isArchived'] = isArchived;
+            }
+
+            if (withoutThumbs !== undefined) {
+                localVarQueryParameter['withoutThumbs'] = withoutThumbs;
+            }
+
+            if (skip !== undefined) {
+                localVarQueryParameter['skip'] = skip;
+            }
+
+            if (ifNoneMatch != null) {
+                localVarHeaderParameter['if-none-match'] = String(ifNoneMatch);
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getArchivedAssetCountByUserId: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/asset/stat/archive`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * Get a single asset\'s information
+         * @param {string} id 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetById: async (id: string, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('getAssetById', 'id', id)
+            const localVarPath = `/asset/assetById/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {GetAssetByTimeBucketDto} getAssetByTimeBucketDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetByTimeBucket: async (getAssetByTimeBucketDto: GetAssetByTimeBucketDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'getAssetByTimeBucketDto' is not null or undefined
+            assertParamExists('getAssetByTimeBucket', 'getAssetByTimeBucketDto', getAssetByTimeBucketDto)
+            const localVarPath = `/asset/time-bucket`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(getAssetByTimeBucketDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {GetAssetCountByTimeBucketDto} getAssetCountByTimeBucketDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetCountByTimeBucket: async (getAssetCountByTimeBucketDto: GetAssetCountByTimeBucketDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'getAssetCountByTimeBucketDto' is not null or undefined
+            assertParamExists('getAssetCountByTimeBucket', 'getAssetCountByTimeBucketDto', getAssetCountByTimeBucketDto)
+            const localVarPath = `/asset/count-by-time-bucket`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(getAssetCountByTimeBucketDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetCountByUserId: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/asset/count-by-user-id`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetSearchTerms: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/asset/search-terms`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {ThumbnailFormat} [format] 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetThumbnail: async (id: string, format?: ThumbnailFormat, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('getAssetThumbnail', 'id', id)
+            const localVarPath = `/asset/thumbnail/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (format !== undefined) {
+                localVarQueryParameter['format'] = format;
+            }
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getCuratedLocations: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/asset/curated-locations`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getCuratedObjects: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/asset/curated-objects`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {Array<string>} [assetIds] 
+         * @param {string} [albumId] 
+         * @param {string} [userId] 
+         * @param {number} [archiveSize] 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getDownloadInfo: async (assetIds?: Array<string>, albumId?: string, userId?: string, archiveSize?: number, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/asset/download`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (assetIds) {
+                localVarQueryParameter['assetIds'] = assetIds;
+            }
+
+            if (albumId !== undefined) {
+                localVarQueryParameter['albumId'] = albumId;
+            }
+
+            if (userId !== undefined) {
+                localVarQueryParameter['userId'] = userId;
+            }
+
+            if (archiveSize !== undefined) {
+                localVarQueryParameter['archiveSize'] = archiveSize;
+            }
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {boolean} [isFavorite] 
+         * @param {string} [fileCreatedAfter] 
+         * @param {string} [fileCreatedBefore] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getMapMarkers: async (isFavorite?: boolean, fileCreatedAfter?: string, fileCreatedBefore?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/asset/map-marker`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (isFavorite !== undefined) {
+                localVarQueryParameter['isFavorite'] = isFavorite;
+            }
+
+            if (fileCreatedAfter !== undefined) {
+                localVarQueryParameter['fileCreatedAfter'] = (fileCreatedAfter as any instanceof Date) ?
+                    (fileCreatedAfter as any).toISOString() :
+                    fileCreatedAfter;
+            }
+
+            if (fileCreatedBefore !== undefined) {
+                localVarQueryParameter['fileCreatedBefore'] = (fileCreatedBefore as any instanceof Date) ?
+                    (fileCreatedBefore as any).toISOString() :
+                    fileCreatedBefore;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} timestamp Get pictures for +24 hours from this time going back x years
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getMemoryLane: async (timestamp: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'timestamp' is not null or undefined
+            assertParamExists('getMemoryLane', 'timestamp', timestamp)
+            const localVarPath = `/asset/memory-lane`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (timestamp !== undefined) {
+                localVarQueryParameter['timestamp'] = (timestamp as any instanceof Date) ?
+                    (timestamp as any).toISOString() :
+                    timestamp;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * Get all asset of a device that are in the database, ID only.
+         * @param {string} deviceId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getUserAssetsByDeviceId: async (deviceId: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'deviceId' is not null or undefined
+            assertParamExists('getUserAssetsByDeviceId', 'deviceId', deviceId)
+            const localVarPath = `/asset/{deviceId}`
+                .replace(`{${"deviceId"}}`, encodeURIComponent(String(deviceId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {ImportAssetDto} importAssetDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        importFile: async (importAssetDto: ImportAssetDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'importAssetDto' is not null or undefined
+            assertParamExists('importFile', 'importAssetDto', importAssetDto)
+            const localVarPath = `/asset/import`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(importAssetDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {SearchAssetDto} searchAssetDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        searchAsset: async (searchAssetDto: SearchAssetDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'searchAssetDto' is not null or undefined
+            assertParamExists('searchAsset', 'searchAssetDto', searchAssetDto)
+            const localVarPath = `/asset/search`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(searchAssetDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {boolean} [isThumb] 
+         * @param {boolean} [isWeb] 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        serveFile: async (id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('serveFile', 'id', id)
+            const localVarPath = `/asset/file/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (isThumb !== undefined) {
+                localVarQueryParameter['isThumb'] = isThumb;
+            }
+
+            if (isWeb !== undefined) {
+                localVarQueryParameter['isWeb'] = isWeb;
+            }
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * Update an asset
+         * @param {string} id 
+         * @param {UpdateAssetDto} updateAssetDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateAsset: async (id: string, updateAssetDto: UpdateAssetDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('updateAsset', 'id', id)
+            // verify required parameter 'updateAssetDto' is not null or undefined
+            assertParamExists('updateAsset', 'updateAssetDto', updateAssetDto)
+            const localVarPath = `/asset/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(updateAssetDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {AssetTypeEnum} assetType 
+         * @param {File} assetData 
+         * @param {string} fileExtension 
+         * @param {string} deviceAssetId 
+         * @param {string} deviceId 
+         * @param {string} fileCreatedAt 
+         * @param {string} fileModifiedAt 
+         * @param {boolean} isFavorite 
+         * @param {string} [key] 
+         * @param {File} [livePhotoData] 
+         * @param {File} [sidecarData] 
+         * @param {boolean} [isReadOnly] 
+         * @param {boolean} [isArchived] 
+         * @param {boolean} [isVisible] 
+         * @param {string} [duration] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        uploadFile: async (assetType: AssetTypeEnum, assetData: File, fileExtension: string, deviceAssetId: string, deviceId: string, fileCreatedAt: string, fileModifiedAt: string, isFavorite: boolean, key?: string, livePhotoData?: File, sidecarData?: File, isReadOnly?: boolean, isArchived?: boolean, isVisible?: boolean, duration?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'assetType' is not null or undefined
+            assertParamExists('uploadFile', 'assetType', assetType)
+            // verify required parameter 'assetData' is not null or undefined
+            assertParamExists('uploadFile', 'assetData', assetData)
+            // verify required parameter 'fileExtension' is not null or undefined
+            assertParamExists('uploadFile', 'fileExtension', fileExtension)
+            // verify required parameter 'deviceAssetId' is not null or undefined
+            assertParamExists('uploadFile', 'deviceAssetId', deviceAssetId)
+            // verify required parameter 'deviceId' is not null or undefined
+            assertParamExists('uploadFile', 'deviceId', deviceId)
+            // verify required parameter 'fileCreatedAt' is not null or undefined
+            assertParamExists('uploadFile', 'fileCreatedAt', fileCreatedAt)
+            // verify required parameter 'fileModifiedAt' is not null or undefined
+            assertParamExists('uploadFile', 'fileModifiedAt', fileModifiedAt)
+            // verify required parameter 'isFavorite' is not null or undefined
+            assertParamExists('uploadFile', 'isFavorite', isFavorite)
+            const localVarPath = `/asset/upload`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+            const localVarFormParams = new ((configuration && configuration.formDataCtor) || FormData)();
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+            if (assetType !== undefined) { 
+                localVarFormParams.append('assetType', new Blob([JSON.stringify(assetType)], { type: "application/json", }));
+            }
+    
+            if (assetData !== undefined) { 
+                localVarFormParams.append('assetData', assetData as any);
+            }
+    
+            if (livePhotoData !== undefined) { 
+                localVarFormParams.append('livePhotoData', livePhotoData as any);
+            }
+    
+            if (sidecarData !== undefined) { 
+                localVarFormParams.append('sidecarData', sidecarData as any);
+            }
+    
+            if (isReadOnly !== undefined) { 
+                localVarFormParams.append('isReadOnly', isReadOnly as any);
+            }
+    
+            if (fileExtension !== undefined) { 
+                localVarFormParams.append('fileExtension', fileExtension as any);
+            }
+    
+            if (deviceAssetId !== undefined) { 
+                localVarFormParams.append('deviceAssetId', deviceAssetId as any);
+            }
+    
+            if (deviceId !== undefined) { 
+                localVarFormParams.append('deviceId', deviceId as any);
+            }
+    
+            if (fileCreatedAt !== undefined) { 
+                localVarFormParams.append('fileCreatedAt', fileCreatedAt as any);
+            }
+    
+            if (fileModifiedAt !== undefined) { 
+                localVarFormParams.append('fileModifiedAt', fileModifiedAt as any);
+            }
+    
+            if (isFavorite !== undefined) { 
+                localVarFormParams.append('isFavorite', isFavorite as any);
+            }
+    
+            if (isArchived !== undefined) { 
+                localVarFormParams.append('isArchived', isArchived as any);
+            }
+    
+            if (isVisible !== undefined) { 
+                localVarFormParams.append('isVisible', isVisible as any);
+            }
+    
+            if (duration !== undefined) { 
+                localVarFormParams.append('duration', duration as any);
+            }
+    
+    
+            localVarHeaderParameter['Content-Type'] = 'multipart/form-data';
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = localVarFormParams;
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * AssetApi - functional programming interface
+ * @export
+ */
+export const AssetApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = AssetApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * Checks if assets exist by checksums
+         * @param {AssetBulkUploadCheckDto} assetBulkUploadCheckDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async bulkUploadCheck(assetBulkUploadCheckDto: AssetBulkUploadCheckDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetBulkUploadCheckResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.bulkUploadCheck(assetBulkUploadCheckDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * Check duplicated asset before uploading - for Web upload used
+         * @param {CheckDuplicateAssetDto} checkDuplicateAssetDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async checkDuplicateAsset(checkDuplicateAssetDto: CheckDuplicateAssetDto, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<CheckDuplicateAssetResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.checkDuplicateAsset(checkDuplicateAssetDto, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * Checks if multiple assets exist on the server and returns all existing - used by background backup
+         * @param {CheckExistingAssetsDto} checkExistingAssetsDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async checkExistingAssets(checkExistingAssetsDto: CheckExistingAssetsDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<CheckExistingAssetsResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.checkExistingAssets(checkExistingAssetsDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {DeleteAssetDto} deleteAssetDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async deleteAsset(deleteAssetDto: DeleteAssetDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<DeleteAssetResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.deleteAsset(deleteAssetDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async downloadArchive(assetIdsDto: AssetIdsDto, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.downloadArchive(assetIdsDto, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async downloadFile(id: string, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.downloadFile(id, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * Get all AssetEntity belong to the user
+         * @param {string} [userId] 
+         * @param {boolean} [isFavorite] 
+         * @param {boolean} [isArchived] 
+         * @param {boolean} [withoutThumbs] Include assets without thumbnails
+         * @param {number} [skip] 
+         * @param {string} [ifNoneMatch] ETag of data already cached on the client
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAllAssets(userId?: string, isFavorite?: boolean, isArchived?: boolean, withoutThumbs?: boolean, skip?: number, ifNoneMatch?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAllAssets(userId, isFavorite, isArchived, withoutThumbs, skip, ifNoneMatch, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getArchivedAssetCountByUserId(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetCountByUserIdResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getArchivedAssetCountByUserId(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * Get a single asset\'s information
+         * @param {string} id 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAssetById(id: string, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetById(id, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {GetAssetByTimeBucketDto} getAssetByTimeBucketDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAssetByTimeBucket(getAssetByTimeBucketDto: GetAssetByTimeBucketDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetByTimeBucket(getAssetByTimeBucketDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {GetAssetCountByTimeBucketDto} getAssetCountByTimeBucketDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAssetCountByTimeBucket(getAssetCountByTimeBucketDto: GetAssetCountByTimeBucketDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetCountByTimeBucketResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetCountByTimeBucket(getAssetCountByTimeBucketDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAssetCountByUserId(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetCountByUserIdResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetCountByUserId(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAssetSearchTerms(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<string>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetSearchTerms(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {ThumbnailFormat} [format] 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetThumbnail(id, format, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getCuratedLocations(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<CuratedLocationsResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getCuratedLocations(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getCuratedObjects(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<CuratedObjectsResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getCuratedObjects(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {Array<string>} [assetIds] 
+         * @param {string} [albumId] 
+         * @param {string} [userId] 
+         * @param {number} [archiveSize] 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getDownloadInfo(assetIds?: Array<string>, albumId?: string, userId?: string, archiveSize?: number, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<DownloadResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getDownloadInfo(assetIds, albumId, userId, archiveSize, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {boolean} [isFavorite] 
+         * @param {string} [fileCreatedAfter] 
+         * @param {string} [fileCreatedBefore] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getMapMarkers(isFavorite?: boolean, fileCreatedAfter?: string, fileCreatedBefore?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<MapMarkerResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getMapMarkers(isFavorite, fileCreatedAfter, fileCreatedBefore, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} timestamp Get pictures for +24 hours from this time going back x years
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getMemoryLane(timestamp: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<MemoryLaneResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getMemoryLane(timestamp, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * Get all asset of a device that are in the database, ID only.
+         * @param {string} deviceId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getUserAssetsByDeviceId(deviceId: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<string>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getUserAssetsByDeviceId(deviceId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {ImportAssetDto} importAssetDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async importFile(importAssetDto: ImportAssetDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetFileUploadResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.importFile(importAssetDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {SearchAssetDto} searchAssetDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async searchAsset(searchAssetDto: SearchAssetDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.searchAsset(searchAssetDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {boolean} [isThumb] 
+         * @param {boolean} [isWeb] 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.serveFile(id, isThumb, isWeb, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * Update an asset
+         * @param {string} id 
+         * @param {UpdateAssetDto} updateAssetDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateAsset(id: string, updateAssetDto: UpdateAssetDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateAsset(id, updateAssetDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {AssetTypeEnum} assetType 
+         * @param {File} assetData 
+         * @param {string} fileExtension 
+         * @param {string} deviceAssetId 
+         * @param {string} deviceId 
+         * @param {string} fileCreatedAt 
+         * @param {string} fileModifiedAt 
+         * @param {boolean} isFavorite 
+         * @param {string} [key] 
+         * @param {File} [livePhotoData] 
+         * @param {File} [sidecarData] 
+         * @param {boolean} [isReadOnly] 
+         * @param {boolean} [isArchived] 
+         * @param {boolean} [isVisible] 
+         * @param {string} [duration] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async uploadFile(assetType: AssetTypeEnum, assetData: File, fileExtension: string, deviceAssetId: string, deviceId: string, fileCreatedAt: string, fileModifiedAt: string, isFavorite: boolean, key?: string, livePhotoData?: File, sidecarData?: File, isReadOnly?: boolean, isArchived?: boolean, isVisible?: boolean, duration?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetFileUploadResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.uploadFile(assetType, assetData, fileExtension, deviceAssetId, deviceId, fileCreatedAt, fileModifiedAt, isFavorite, key, livePhotoData, sidecarData, isReadOnly, isArchived, isVisible, duration, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * AssetApi - factory interface
+ * @export
+ */
+export const AssetApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = AssetApiFp(configuration)
+    return {
+        /**
+         * Checks if assets exist by checksums
+         * @param {AssetApiBulkUploadCheckRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        bulkUploadCheck(requestParameters: AssetApiBulkUploadCheckRequest, options?: AxiosRequestConfig): AxiosPromise<AssetBulkUploadCheckResponseDto> {
+            return localVarFp.bulkUploadCheck(requestParameters.assetBulkUploadCheckDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * Check duplicated asset before uploading - for Web upload used
+         * @param {AssetApiCheckDuplicateAssetRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        checkDuplicateAsset(requestParameters: AssetApiCheckDuplicateAssetRequest, options?: AxiosRequestConfig): AxiosPromise<CheckDuplicateAssetResponseDto> {
+            return localVarFp.checkDuplicateAsset(requestParameters.checkDuplicateAssetDto, requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * Checks if multiple assets exist on the server and returns all existing - used by background backup
+         * @param {AssetApiCheckExistingAssetsRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        checkExistingAssets(requestParameters: AssetApiCheckExistingAssetsRequest, options?: AxiosRequestConfig): AxiosPromise<CheckExistingAssetsResponseDto> {
+            return localVarFp.checkExistingAssets(requestParameters.checkExistingAssetsDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiDeleteAssetRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteAsset(requestParameters: AssetApiDeleteAssetRequest, options?: AxiosRequestConfig): AxiosPromise<Array<DeleteAssetResponseDto>> {
+            return localVarFp.deleteAsset(requestParameters.deleteAssetDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiDownloadArchiveRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        downloadArchive(requestParameters: AssetApiDownloadArchiveRequest, options?: AxiosRequestConfig): AxiosPromise<File> {
+            return localVarFp.downloadArchive(requestParameters.assetIdsDto, requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiDownloadFileRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        downloadFile(requestParameters: AssetApiDownloadFileRequest, options?: AxiosRequestConfig): AxiosPromise<File> {
+            return localVarFp.downloadFile(requestParameters.id, requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * Get all AssetEntity belong to the user
+         * @param {AssetApiGetAllAssetsRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllAssets(requestParameters: AssetApiGetAllAssetsRequest = {}, options?: AxiosRequestConfig): AxiosPromise<Array<AssetResponseDto>> {
+            return localVarFp.getAllAssets(requestParameters.userId, requestParameters.isFavorite, requestParameters.isArchived, requestParameters.withoutThumbs, requestParameters.skip, requestParameters.ifNoneMatch, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getArchivedAssetCountByUserId(options?: AxiosRequestConfig): AxiosPromise<AssetCountByUserIdResponseDto> {
+            return localVarFp.getArchivedAssetCountByUserId(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * Get a single asset\'s information
+         * @param {AssetApiGetAssetByIdRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetById(requestParameters: AssetApiGetAssetByIdRequest, options?: AxiosRequestConfig): AxiosPromise<AssetResponseDto> {
+            return localVarFp.getAssetById(requestParameters.id, requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiGetAssetByTimeBucketRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetByTimeBucket(requestParameters: AssetApiGetAssetByTimeBucketRequest, options?: AxiosRequestConfig): AxiosPromise<Array<AssetResponseDto>> {
+            return localVarFp.getAssetByTimeBucket(requestParameters.getAssetByTimeBucketDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiGetAssetCountByTimeBucketRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetCountByTimeBucket(requestParameters: AssetApiGetAssetCountByTimeBucketRequest, options?: AxiosRequestConfig): AxiosPromise<AssetCountByTimeBucketResponseDto> {
+            return localVarFp.getAssetCountByTimeBucket(requestParameters.getAssetCountByTimeBucketDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetCountByUserId(options?: AxiosRequestConfig): AxiosPromise<AssetCountByUserIdResponseDto> {
+            return localVarFp.getAssetCountByUserId(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetSearchTerms(options?: AxiosRequestConfig): AxiosPromise<Array<string>> {
+            return localVarFp.getAssetSearchTerms(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiGetAssetThumbnailRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAssetThumbnail(requestParameters: AssetApiGetAssetThumbnailRequest, options?: AxiosRequestConfig): AxiosPromise<File> {
+            return localVarFp.getAssetThumbnail(requestParameters.id, requestParameters.format, requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getCuratedLocations(options?: AxiosRequestConfig): AxiosPromise<Array<CuratedLocationsResponseDto>> {
+            return localVarFp.getCuratedLocations(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getCuratedObjects(options?: AxiosRequestConfig): AxiosPromise<Array<CuratedObjectsResponseDto>> {
+            return localVarFp.getCuratedObjects(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiGetDownloadInfoRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getDownloadInfo(requestParameters: AssetApiGetDownloadInfoRequest = {}, options?: AxiosRequestConfig): AxiosPromise<DownloadResponseDto> {
+            return localVarFp.getDownloadInfo(requestParameters.assetIds, requestParameters.albumId, requestParameters.userId, requestParameters.archiveSize, requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiGetMapMarkersRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getMapMarkers(requestParameters: AssetApiGetMapMarkersRequest = {}, options?: AxiosRequestConfig): AxiosPromise<Array<MapMarkerResponseDto>> {
+            return localVarFp.getMapMarkers(requestParameters.isFavorite, requestParameters.fileCreatedAfter, requestParameters.fileCreatedBefore, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiGetMemoryLaneRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getMemoryLane(requestParameters: AssetApiGetMemoryLaneRequest, options?: AxiosRequestConfig): AxiosPromise<Array<MemoryLaneResponseDto>> {
+            return localVarFp.getMemoryLane(requestParameters.timestamp, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * Get all asset of a device that are in the database, ID only.
+         * @param {AssetApiGetUserAssetsByDeviceIdRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getUserAssetsByDeviceId(requestParameters: AssetApiGetUserAssetsByDeviceIdRequest, options?: AxiosRequestConfig): AxiosPromise<Array<string>> {
+            return localVarFp.getUserAssetsByDeviceId(requestParameters.deviceId, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiImportFileRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        importFile(requestParameters: AssetApiImportFileRequest, options?: AxiosRequestConfig): AxiosPromise<AssetFileUploadResponseDto> {
+            return localVarFp.importFile(requestParameters.importAssetDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiSearchAssetRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        searchAsset(requestParameters: AssetApiSearchAssetRequest, options?: AxiosRequestConfig): AxiosPromise<Array<AssetResponseDto>> {
+            return localVarFp.searchAsset(requestParameters.searchAssetDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiServeFileRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        serveFile(requestParameters: AssetApiServeFileRequest, options?: AxiosRequestConfig): AxiosPromise<File> {
+            return localVarFp.serveFile(requestParameters.id, requestParameters.isThumb, requestParameters.isWeb, requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * Update an asset
+         * @param {AssetApiUpdateAssetRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateAsset(requestParameters: AssetApiUpdateAssetRequest, options?: AxiosRequestConfig): AxiosPromise<AssetResponseDto> {
+            return localVarFp.updateAsset(requestParameters.id, requestParameters.updateAssetDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AssetApiUploadFileRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        uploadFile(requestParameters: AssetApiUploadFileRequest, options?: AxiosRequestConfig): AxiosPromise<AssetFileUploadResponseDto> {
+            return localVarFp.uploadFile(requestParameters.assetType, requestParameters.assetData, requestParameters.fileExtension, requestParameters.deviceAssetId, requestParameters.deviceId, requestParameters.fileCreatedAt, requestParameters.fileModifiedAt, requestParameters.isFavorite, requestParameters.key, requestParameters.livePhotoData, requestParameters.sidecarData, requestParameters.isReadOnly, requestParameters.isArchived, requestParameters.isVisible, requestParameters.duration, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for bulkUploadCheck operation in AssetApi.
+ * @export
+ * @interface AssetApiBulkUploadCheckRequest
+ */
+export interface AssetApiBulkUploadCheckRequest {
+    /**
+     * 
+     * @type {AssetBulkUploadCheckDto}
+     * @memberof AssetApiBulkUploadCheck
+     */
+    readonly assetBulkUploadCheckDto: AssetBulkUploadCheckDto
+}
+
+/**
+ * Request parameters for checkDuplicateAsset operation in AssetApi.
+ * @export
+ * @interface AssetApiCheckDuplicateAssetRequest
+ */
+export interface AssetApiCheckDuplicateAssetRequest {
+    /**
+     * 
+     * @type {CheckDuplicateAssetDto}
+     * @memberof AssetApiCheckDuplicateAsset
+     */
+    readonly checkDuplicateAssetDto: CheckDuplicateAssetDto
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiCheckDuplicateAsset
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for checkExistingAssets operation in AssetApi.
+ * @export
+ * @interface AssetApiCheckExistingAssetsRequest
+ */
+export interface AssetApiCheckExistingAssetsRequest {
+    /**
+     * 
+     * @type {CheckExistingAssetsDto}
+     * @memberof AssetApiCheckExistingAssets
+     */
+    readonly checkExistingAssetsDto: CheckExistingAssetsDto
+}
+
+/**
+ * Request parameters for deleteAsset operation in AssetApi.
+ * @export
+ * @interface AssetApiDeleteAssetRequest
+ */
+export interface AssetApiDeleteAssetRequest {
+    /**
+     * 
+     * @type {DeleteAssetDto}
+     * @memberof AssetApiDeleteAsset
+     */
+    readonly deleteAssetDto: DeleteAssetDto
+}
+
+/**
+ * Request parameters for downloadArchive operation in AssetApi.
+ * @export
+ * @interface AssetApiDownloadArchiveRequest
+ */
+export interface AssetApiDownloadArchiveRequest {
+    /**
+     * 
+     * @type {AssetIdsDto}
+     * @memberof AssetApiDownloadArchive
+     */
+    readonly assetIdsDto: AssetIdsDto
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiDownloadArchive
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for downloadFile operation in AssetApi.
+ * @export
+ * @interface AssetApiDownloadFileRequest
+ */
+export interface AssetApiDownloadFileRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiDownloadFile
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiDownloadFile
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for getAllAssets operation in AssetApi.
+ * @export
+ * @interface AssetApiGetAllAssetsRequest
+ */
+export interface AssetApiGetAllAssetsRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetAllAssets
+     */
+    readonly userId?: string
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetApiGetAllAssets
+     */
+    readonly isFavorite?: boolean
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetApiGetAllAssets
+     */
+    readonly isArchived?: boolean
+
+    /**
+     * Include assets without thumbnails
+     * @type {boolean}
+     * @memberof AssetApiGetAllAssets
+     */
+    readonly withoutThumbs?: boolean
+
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetApiGetAllAssets
+     */
+    readonly skip?: number
+
+    /**
+     * ETag of data already cached on the client
+     * @type {string}
+     * @memberof AssetApiGetAllAssets
+     */
+    readonly ifNoneMatch?: string
+}
+
+/**
+ * Request parameters for getAssetById operation in AssetApi.
+ * @export
+ * @interface AssetApiGetAssetByIdRequest
+ */
+export interface AssetApiGetAssetByIdRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetAssetById
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetAssetById
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for getAssetByTimeBucket operation in AssetApi.
+ * @export
+ * @interface AssetApiGetAssetByTimeBucketRequest
+ */
+export interface AssetApiGetAssetByTimeBucketRequest {
+    /**
+     * 
+     * @type {GetAssetByTimeBucketDto}
+     * @memberof AssetApiGetAssetByTimeBucket
+     */
+    readonly getAssetByTimeBucketDto: GetAssetByTimeBucketDto
+}
+
+/**
+ * Request parameters for getAssetCountByTimeBucket operation in AssetApi.
+ * @export
+ * @interface AssetApiGetAssetCountByTimeBucketRequest
+ */
+export interface AssetApiGetAssetCountByTimeBucketRequest {
+    /**
+     * 
+     * @type {GetAssetCountByTimeBucketDto}
+     * @memberof AssetApiGetAssetCountByTimeBucket
+     */
+    readonly getAssetCountByTimeBucketDto: GetAssetCountByTimeBucketDto
+}
+
+/**
+ * Request parameters for getAssetThumbnail operation in AssetApi.
+ * @export
+ * @interface AssetApiGetAssetThumbnailRequest
+ */
+export interface AssetApiGetAssetThumbnailRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetAssetThumbnail
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {ThumbnailFormat}
+     * @memberof AssetApiGetAssetThumbnail
+     */
+    readonly format?: ThumbnailFormat
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetAssetThumbnail
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for getDownloadInfo operation in AssetApi.
+ * @export
+ * @interface AssetApiGetDownloadInfoRequest
+ */
+export interface AssetApiGetDownloadInfoRequest {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof AssetApiGetDownloadInfo
+     */
+    readonly assetIds?: Array<string>
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetDownloadInfo
+     */
+    readonly albumId?: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetDownloadInfo
+     */
+    readonly userId?: string
+
+    /**
+     * 
+     * @type {number}
+     * @memberof AssetApiGetDownloadInfo
+     */
+    readonly archiveSize?: number
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetDownloadInfo
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for getMapMarkers operation in AssetApi.
+ * @export
+ * @interface AssetApiGetMapMarkersRequest
+ */
+export interface AssetApiGetMapMarkersRequest {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetApiGetMapMarkers
+     */
+    readonly isFavorite?: boolean
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetMapMarkers
+     */
+    readonly fileCreatedAfter?: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetMapMarkers
+     */
+    readonly fileCreatedBefore?: string
+}
+
+/**
+ * Request parameters for getMemoryLane operation in AssetApi.
+ * @export
+ * @interface AssetApiGetMemoryLaneRequest
+ */
+export interface AssetApiGetMemoryLaneRequest {
+    /**
+     * Get pictures for +24 hours from this time going back x years
+     * @type {string}
+     * @memberof AssetApiGetMemoryLane
+     */
+    readonly timestamp: string
+}
+
+/**
+ * Request parameters for getUserAssetsByDeviceId operation in AssetApi.
+ * @export
+ * @interface AssetApiGetUserAssetsByDeviceIdRequest
+ */
+export interface AssetApiGetUserAssetsByDeviceIdRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiGetUserAssetsByDeviceId
+     */
+    readonly deviceId: string
+}
+
+/**
+ * Request parameters for importFile operation in AssetApi.
+ * @export
+ * @interface AssetApiImportFileRequest
+ */
+export interface AssetApiImportFileRequest {
+    /**
+     * 
+     * @type {ImportAssetDto}
+     * @memberof AssetApiImportFile
+     */
+    readonly importAssetDto: ImportAssetDto
+}
+
+/**
+ * Request parameters for searchAsset operation in AssetApi.
+ * @export
+ * @interface AssetApiSearchAssetRequest
+ */
+export interface AssetApiSearchAssetRequest {
+    /**
+     * 
+     * @type {SearchAssetDto}
+     * @memberof AssetApiSearchAsset
+     */
+    readonly searchAssetDto: SearchAssetDto
+}
+
+/**
+ * Request parameters for serveFile operation in AssetApi.
+ * @export
+ * @interface AssetApiServeFileRequest
+ */
+export interface AssetApiServeFileRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiServeFile
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetApiServeFile
+     */
+    readonly isThumb?: boolean
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetApiServeFile
+     */
+    readonly isWeb?: boolean
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiServeFile
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for updateAsset operation in AssetApi.
+ * @export
+ * @interface AssetApiUpdateAssetRequest
+ */
+export interface AssetApiUpdateAssetRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiUpdateAsset
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {UpdateAssetDto}
+     * @memberof AssetApiUpdateAsset
+     */
+    readonly updateAssetDto: UpdateAssetDto
+}
+
+/**
+ * Request parameters for uploadFile operation in AssetApi.
+ * @export
+ * @interface AssetApiUploadFileRequest
+ */
+export interface AssetApiUploadFileRequest {
+    /**
+     * 
+     * @type {AssetTypeEnum}
+     * @memberof AssetApiUploadFile
+     */
+    readonly assetType: AssetTypeEnum
+
+    /**
+     * 
+     * @type {File}
+     * @memberof AssetApiUploadFile
+     */
+    readonly assetData: File
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiUploadFile
+     */
+    readonly fileExtension: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiUploadFile
+     */
+    readonly deviceAssetId: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiUploadFile
+     */
+    readonly deviceId: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiUploadFile
+     */
+    readonly fileCreatedAt: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiUploadFile
+     */
+    readonly fileModifiedAt: string
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetApiUploadFile
+     */
+    readonly isFavorite: boolean
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiUploadFile
+     */
+    readonly key?: string
+
+    /**
+     * 
+     * @type {File}
+     * @memberof AssetApiUploadFile
+     */
+    readonly livePhotoData?: File
+
+    /**
+     * 
+     * @type {File}
+     * @memberof AssetApiUploadFile
+     */
+    readonly sidecarData?: File
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetApiUploadFile
+     */
+    readonly isReadOnly?: boolean
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetApiUploadFile
+     */
+    readonly isArchived?: boolean
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetApiUploadFile
+     */
+    readonly isVisible?: boolean
+
+    /**
+     * 
+     * @type {string}
+     * @memberof AssetApiUploadFile
+     */
+    readonly duration?: string
+}
+
+/**
+ * AssetApi - object-oriented interface
+ * @export
+ * @class AssetApi
+ * @extends {BaseAPI}
+ */
+export class AssetApi extends BaseAPI {
+    /**
+     * Checks if assets exist by checksums
+     * @param {AssetApiBulkUploadCheckRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public bulkUploadCheck(requestParameters: AssetApiBulkUploadCheckRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).bulkUploadCheck(requestParameters.assetBulkUploadCheckDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * Check duplicated asset before uploading - for Web upload used
+     * @param {AssetApiCheckDuplicateAssetRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public checkDuplicateAsset(requestParameters: AssetApiCheckDuplicateAssetRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).checkDuplicateAsset(requestParameters.checkDuplicateAssetDto, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * Checks if multiple assets exist on the server and returns all existing - used by background backup
+     * @param {AssetApiCheckExistingAssetsRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public checkExistingAssets(requestParameters: AssetApiCheckExistingAssetsRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).checkExistingAssets(requestParameters.checkExistingAssetsDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiDeleteAssetRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public deleteAsset(requestParameters: AssetApiDeleteAssetRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).deleteAsset(requestParameters.deleteAssetDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiDownloadArchiveRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public downloadArchive(requestParameters: AssetApiDownloadArchiveRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).downloadArchive(requestParameters.assetIdsDto, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiDownloadFileRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public downloadFile(requestParameters: AssetApiDownloadFileRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).downloadFile(requestParameters.id, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * Get all AssetEntity belong to the user
+     * @param {AssetApiGetAllAssetsRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getAllAssets(requestParameters: AssetApiGetAllAssetsRequest = {}, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getAllAssets(requestParameters.userId, requestParameters.isFavorite, requestParameters.isArchived, requestParameters.withoutThumbs, requestParameters.skip, requestParameters.ifNoneMatch, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getArchivedAssetCountByUserId(options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getArchivedAssetCountByUserId(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * Get a single asset\'s information
+     * @param {AssetApiGetAssetByIdRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getAssetById(requestParameters: AssetApiGetAssetByIdRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getAssetById(requestParameters.id, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiGetAssetByTimeBucketRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getAssetByTimeBucket(requestParameters: AssetApiGetAssetByTimeBucketRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getAssetByTimeBucket(requestParameters.getAssetByTimeBucketDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiGetAssetCountByTimeBucketRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getAssetCountByTimeBucket(requestParameters: AssetApiGetAssetCountByTimeBucketRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getAssetCountByTimeBucket(requestParameters.getAssetCountByTimeBucketDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getAssetCountByUserId(options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getAssetCountByUserId(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getAssetSearchTerms(options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getAssetSearchTerms(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiGetAssetThumbnailRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getAssetThumbnail(requestParameters: AssetApiGetAssetThumbnailRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getAssetThumbnail(requestParameters.id, requestParameters.format, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getCuratedLocations(options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getCuratedLocations(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getCuratedObjects(options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getCuratedObjects(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiGetDownloadInfoRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getDownloadInfo(requestParameters: AssetApiGetDownloadInfoRequest = {}, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getDownloadInfo(requestParameters.assetIds, requestParameters.albumId, requestParameters.userId, requestParameters.archiveSize, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiGetMapMarkersRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getMapMarkers(requestParameters: AssetApiGetMapMarkersRequest = {}, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getMapMarkers(requestParameters.isFavorite, requestParameters.fileCreatedAfter, requestParameters.fileCreatedBefore, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiGetMemoryLaneRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getMemoryLane(requestParameters: AssetApiGetMemoryLaneRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getMemoryLane(requestParameters.timestamp, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * Get all asset of a device that are in the database, ID only.
+     * @param {AssetApiGetUserAssetsByDeviceIdRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public getUserAssetsByDeviceId(requestParameters: AssetApiGetUserAssetsByDeviceIdRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).getUserAssetsByDeviceId(requestParameters.deviceId, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiImportFileRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public importFile(requestParameters: AssetApiImportFileRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).importFile(requestParameters.importAssetDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiSearchAssetRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public searchAsset(requestParameters: AssetApiSearchAssetRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).searchAsset(requestParameters.searchAssetDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiServeFileRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public serveFile(requestParameters: AssetApiServeFileRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).serveFile(requestParameters.id, requestParameters.isThumb, requestParameters.isWeb, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * Update an asset
+     * @param {AssetApiUpdateAssetRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public updateAsset(requestParameters: AssetApiUpdateAssetRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).updateAsset(requestParameters.id, requestParameters.updateAssetDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AssetApiUploadFileRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public uploadFile(requestParameters: AssetApiUploadFileRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).uploadFile(requestParameters.assetType, requestParameters.assetData, requestParameters.fileExtension, requestParameters.deviceAssetId, requestParameters.deviceId, requestParameters.fileCreatedAt, requestParameters.fileModifiedAt, requestParameters.isFavorite, requestParameters.key, requestParameters.livePhotoData, requestParameters.sidecarData, requestParameters.isReadOnly, requestParameters.isArchived, requestParameters.isVisible, requestParameters.duration, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * AuthenticationApi - axios parameter creator
+ * @export
+ */
+export const AuthenticationApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {SignUpDto} signUpDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        adminSignUp: async (signUpDto: SignUpDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'signUpDto' is not null or undefined
+            assertParamExists('adminSignUp', 'signUpDto', signUpDto)
+            const localVarPath = `/auth/admin-sign-up`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(signUpDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {ChangePasswordDto} changePasswordDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        changePassword: async (changePasswordDto: ChangePasswordDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'changePasswordDto' is not null or undefined
+            assertParamExists('changePassword', 'changePasswordDto', changePasswordDto)
+            const localVarPath = `/auth/change-password`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(changePasswordDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAuthDevices: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/auth/devices`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {LoginCredentialDto} loginCredentialDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        login: async (loginCredentialDto: LoginCredentialDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'loginCredentialDto' is not null or undefined
+            assertParamExists('login', 'loginCredentialDto', loginCredentialDto)
+            const localVarPath = `/auth/login`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(loginCredentialDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        logout: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/auth/logout`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        logoutAuthDevice: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('logoutAuthDevice', 'id', id)
+            const localVarPath = `/auth/devices/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        logoutAuthDevices: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/auth/devices`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        validateAccessToken: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/auth/validateToken`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * AuthenticationApi - functional programming interface
+ * @export
+ */
+export const AuthenticationApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = AuthenticationApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {SignUpDto} signUpDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async adminSignUp(signUpDto: SignUpDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AdminSignupResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.adminSignUp(signUpDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {ChangePasswordDto} changePasswordDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async changePassword(changePasswordDto: ChangePasswordDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<UserResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.changePassword(changePasswordDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAuthDevices(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AuthDeviceResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAuthDevices(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {LoginCredentialDto} loginCredentialDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async login(loginCredentialDto: LoginCredentialDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<LoginResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.login(loginCredentialDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async logout(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<LogoutResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.logout(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async logoutAuthDevice(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.logoutAuthDevice(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async logoutAuthDevices(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.logoutAuthDevices(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async validateAccessToken(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ValidateAccessTokenResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.validateAccessToken(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * AuthenticationApi - factory interface
+ * @export
+ */
+export const AuthenticationApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = AuthenticationApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {AuthenticationApiAdminSignUpRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        adminSignUp(requestParameters: AuthenticationApiAdminSignUpRequest, options?: AxiosRequestConfig): AxiosPromise<AdminSignupResponseDto> {
+            return localVarFp.adminSignUp(requestParameters.signUpDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AuthenticationApiChangePasswordRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        changePassword(requestParameters: AuthenticationApiChangePasswordRequest, options?: AxiosRequestConfig): AxiosPromise<UserResponseDto> {
+            return localVarFp.changePassword(requestParameters.changePasswordDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAuthDevices(options?: AxiosRequestConfig): AxiosPromise<Array<AuthDeviceResponseDto>> {
+            return localVarFp.getAuthDevices(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AuthenticationApiLoginRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        login(requestParameters: AuthenticationApiLoginRequest, options?: AxiosRequestConfig): AxiosPromise<LoginResponseDto> {
+            return localVarFp.login(requestParameters.loginCredentialDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        logout(options?: AxiosRequestConfig): AxiosPromise<LogoutResponseDto> {
+            return localVarFp.logout(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {AuthenticationApiLogoutAuthDeviceRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        logoutAuthDevice(requestParameters: AuthenticationApiLogoutAuthDeviceRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.logoutAuthDevice(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        logoutAuthDevices(options?: AxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.logoutAuthDevices(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        validateAccessToken(options?: AxiosRequestConfig): AxiosPromise<ValidateAccessTokenResponseDto> {
+            return localVarFp.validateAccessToken(options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for adminSignUp operation in AuthenticationApi.
+ * @export
+ * @interface AuthenticationApiAdminSignUpRequest
+ */
+export interface AuthenticationApiAdminSignUpRequest {
+    /**
+     * 
+     * @type {SignUpDto}
+     * @memberof AuthenticationApiAdminSignUp
+     */
+    readonly signUpDto: SignUpDto
+}
+
+/**
+ * Request parameters for changePassword operation in AuthenticationApi.
+ * @export
+ * @interface AuthenticationApiChangePasswordRequest
+ */
+export interface AuthenticationApiChangePasswordRequest {
+    /**
+     * 
+     * @type {ChangePasswordDto}
+     * @memberof AuthenticationApiChangePassword
+     */
+    readonly changePasswordDto: ChangePasswordDto
+}
+
+/**
+ * Request parameters for login operation in AuthenticationApi.
+ * @export
+ * @interface AuthenticationApiLoginRequest
+ */
+export interface AuthenticationApiLoginRequest {
+    /**
+     * 
+     * @type {LoginCredentialDto}
+     * @memberof AuthenticationApiLogin
+     */
+    readonly loginCredentialDto: LoginCredentialDto
+}
+
+/**
+ * Request parameters for logoutAuthDevice operation in AuthenticationApi.
+ * @export
+ * @interface AuthenticationApiLogoutAuthDeviceRequest
+ */
+export interface AuthenticationApiLogoutAuthDeviceRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof AuthenticationApiLogoutAuthDevice
+     */
+    readonly id: string
+}
+
+/**
+ * AuthenticationApi - object-oriented interface
+ * @export
+ * @class AuthenticationApi
+ * @extends {BaseAPI}
+ */
+export class AuthenticationApi extends BaseAPI {
+    /**
+     * 
+     * @param {AuthenticationApiAdminSignUpRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AuthenticationApi
+     */
+    public adminSignUp(requestParameters: AuthenticationApiAdminSignUpRequest, options?: AxiosRequestConfig) {
+        return AuthenticationApiFp(this.configuration).adminSignUp(requestParameters.signUpDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AuthenticationApiChangePasswordRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AuthenticationApi
+     */
+    public changePassword(requestParameters: AuthenticationApiChangePasswordRequest, options?: AxiosRequestConfig) {
+        return AuthenticationApiFp(this.configuration).changePassword(requestParameters.changePasswordDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AuthenticationApi
+     */
+    public getAuthDevices(options?: AxiosRequestConfig) {
+        return AuthenticationApiFp(this.configuration).getAuthDevices(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AuthenticationApiLoginRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AuthenticationApi
+     */
+    public login(requestParameters: AuthenticationApiLoginRequest, options?: AxiosRequestConfig) {
+        return AuthenticationApiFp(this.configuration).login(requestParameters.loginCredentialDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AuthenticationApi
+     */
+    public logout(options?: AxiosRequestConfig) {
+        return AuthenticationApiFp(this.configuration).logout(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {AuthenticationApiLogoutAuthDeviceRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AuthenticationApi
+     */
+    public logoutAuthDevice(requestParameters: AuthenticationApiLogoutAuthDeviceRequest, options?: AxiosRequestConfig) {
+        return AuthenticationApiFp(this.configuration).logoutAuthDevice(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AuthenticationApi
+     */
+    public logoutAuthDevices(options?: AxiosRequestConfig) {
+        return AuthenticationApiFp(this.configuration).logoutAuthDevices(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AuthenticationApi
+     */
+    public validateAccessToken(options?: AxiosRequestConfig) {
+        return AuthenticationApiFp(this.configuration).validateAccessToken(options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * JobApi - axios parameter creator
+ * @export
+ */
+export const JobApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllJobsStatus: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/jobs`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {JobName} id 
+         * @param {JobCommandDto} jobCommandDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        sendJobCommand: async (id: JobName, jobCommandDto: JobCommandDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('sendJobCommand', 'id', id)
+            // verify required parameter 'jobCommandDto' is not null or undefined
+            assertParamExists('sendJobCommand', 'jobCommandDto', jobCommandDto)
+            const localVarPath = `/jobs/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(jobCommandDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * JobApi - functional programming interface
+ * @export
+ */
+export const JobApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = JobApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAllJobsStatus(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AllJobStatusResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAllJobsStatus(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {JobName} id 
+         * @param {JobCommandDto} jobCommandDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async sendJobCommand(id: JobName, jobCommandDto: JobCommandDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<JobStatusDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.sendJobCommand(id, jobCommandDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * JobApi - factory interface
+ * @export
+ */
+export const JobApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = JobApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllJobsStatus(options?: AxiosRequestConfig): AxiosPromise<AllJobStatusResponseDto> {
+            return localVarFp.getAllJobsStatus(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {JobApiSendJobCommandRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        sendJobCommand(requestParameters: JobApiSendJobCommandRequest, options?: AxiosRequestConfig): AxiosPromise<JobStatusDto> {
+            return localVarFp.sendJobCommand(requestParameters.id, requestParameters.jobCommandDto, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for sendJobCommand operation in JobApi.
+ * @export
+ * @interface JobApiSendJobCommandRequest
+ */
+export interface JobApiSendJobCommandRequest {
+    /**
+     * 
+     * @type {JobName}
+     * @memberof JobApiSendJobCommand
+     */
+    readonly id: JobName
+
+    /**
+     * 
+     * @type {JobCommandDto}
+     * @memberof JobApiSendJobCommand
+     */
+    readonly jobCommandDto: JobCommandDto
+}
+
+/**
+ * JobApi - object-oriented interface
+ * @export
+ * @class JobApi
+ * @extends {BaseAPI}
+ */
+export class JobApi extends BaseAPI {
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof JobApi
+     */
+    public getAllJobsStatus(options?: AxiosRequestConfig) {
+        return JobApiFp(this.configuration).getAllJobsStatus(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {JobApiSendJobCommandRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof JobApi
+     */
+    public sendJobCommand(requestParameters: JobApiSendJobCommandRequest, options?: AxiosRequestConfig) {
+        return JobApiFp(this.configuration).sendJobCommand(requestParameters.id, requestParameters.jobCommandDto, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * OAuthApi - axios parameter creator
+ * @export
+ */
+export const OAuthApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {OAuthCallbackDto} oAuthCallbackDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        callback: async (oAuthCallbackDto: OAuthCallbackDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'oAuthCallbackDto' is not null or undefined
+            assertParamExists('callback', 'oAuthCallbackDto', oAuthCallbackDto)
+            const localVarPath = `/oauth/callback`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(oAuthCallbackDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {OAuthConfigDto} oAuthConfigDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        generateConfig: async (oAuthConfigDto: OAuthConfigDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'oAuthConfigDto' is not null or undefined
+            assertParamExists('generateConfig', 'oAuthConfigDto', oAuthConfigDto)
+            const localVarPath = `/oauth/config`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(oAuthConfigDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {OAuthCallbackDto} oAuthCallbackDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        link: async (oAuthCallbackDto: OAuthCallbackDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'oAuthCallbackDto' is not null or undefined
+            assertParamExists('link', 'oAuthCallbackDto', oAuthCallbackDto)
+            const localVarPath = `/oauth/link`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(oAuthCallbackDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        mobileRedirect: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/oauth/mobile-redirect`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        unlink: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/oauth/unlink`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * OAuthApi - functional programming interface
+ * @export
+ */
+export const OAuthApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = OAuthApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {OAuthCallbackDto} oAuthCallbackDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async callback(oAuthCallbackDto: OAuthCallbackDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<LoginResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.callback(oAuthCallbackDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {OAuthConfigDto} oAuthConfigDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async generateConfig(oAuthConfigDto: OAuthConfigDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<OAuthConfigResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.generateConfig(oAuthConfigDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {OAuthCallbackDto} oAuthCallbackDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async link(oAuthCallbackDto: OAuthCallbackDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<UserResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.link(oAuthCallbackDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async mobileRedirect(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.mobileRedirect(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async unlink(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<UserResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.unlink(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * OAuthApi - factory interface
+ * @export
+ */
+export const OAuthApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = OAuthApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {OAuthApiCallbackRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        callback(requestParameters: OAuthApiCallbackRequest, options?: AxiosRequestConfig): AxiosPromise<LoginResponseDto> {
+            return localVarFp.callback(requestParameters.oAuthCallbackDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {OAuthApiGenerateConfigRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        generateConfig(requestParameters: OAuthApiGenerateConfigRequest, options?: AxiosRequestConfig): AxiosPromise<OAuthConfigResponseDto> {
+            return localVarFp.generateConfig(requestParameters.oAuthConfigDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {OAuthApiLinkRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        link(requestParameters: OAuthApiLinkRequest, options?: AxiosRequestConfig): AxiosPromise<UserResponseDto> {
+            return localVarFp.link(requestParameters.oAuthCallbackDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        mobileRedirect(options?: AxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.mobileRedirect(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        unlink(options?: AxiosRequestConfig): AxiosPromise<UserResponseDto> {
+            return localVarFp.unlink(options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for callback operation in OAuthApi.
+ * @export
+ * @interface OAuthApiCallbackRequest
+ */
+export interface OAuthApiCallbackRequest {
+    /**
+     * 
+     * @type {OAuthCallbackDto}
+     * @memberof OAuthApiCallback
+     */
+    readonly oAuthCallbackDto: OAuthCallbackDto
+}
+
+/**
+ * Request parameters for generateConfig operation in OAuthApi.
+ * @export
+ * @interface OAuthApiGenerateConfigRequest
+ */
+export interface OAuthApiGenerateConfigRequest {
+    /**
+     * 
+     * @type {OAuthConfigDto}
+     * @memberof OAuthApiGenerateConfig
+     */
+    readonly oAuthConfigDto: OAuthConfigDto
+}
+
+/**
+ * Request parameters for link operation in OAuthApi.
+ * @export
+ * @interface OAuthApiLinkRequest
+ */
+export interface OAuthApiLinkRequest {
+    /**
+     * 
+     * @type {OAuthCallbackDto}
+     * @memberof OAuthApiLink
+     */
+    readonly oAuthCallbackDto: OAuthCallbackDto
+}
+
+/**
+ * OAuthApi - object-oriented interface
+ * @export
+ * @class OAuthApi
+ * @extends {BaseAPI}
+ */
+export class OAuthApi extends BaseAPI {
+    /**
+     * 
+     * @param {OAuthApiCallbackRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof OAuthApi
+     */
+    public callback(requestParameters: OAuthApiCallbackRequest, options?: AxiosRequestConfig) {
+        return OAuthApiFp(this.configuration).callback(requestParameters.oAuthCallbackDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {OAuthApiGenerateConfigRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof OAuthApi
+     */
+    public generateConfig(requestParameters: OAuthApiGenerateConfigRequest, options?: AxiosRequestConfig) {
+        return OAuthApiFp(this.configuration).generateConfig(requestParameters.oAuthConfigDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {OAuthApiLinkRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof OAuthApi
+     */
+    public link(requestParameters: OAuthApiLinkRequest, options?: AxiosRequestConfig) {
+        return OAuthApiFp(this.configuration).link(requestParameters.oAuthCallbackDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof OAuthApi
+     */
+    public mobileRedirect(options?: AxiosRequestConfig) {
+        return OAuthApiFp(this.configuration).mobileRedirect(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof OAuthApi
+     */
+    public unlink(options?: AxiosRequestConfig) {
+        return OAuthApiFp(this.configuration).unlink(options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * PartnerApi - axios parameter creator
+ * @export
+ */
+export const PartnerApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createPartner: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('createPartner', 'id', id)
+            const localVarPath = `/partner/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {'shared-by' | 'shared-with'} direction 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getPartners: async (direction: 'shared-by' | 'shared-with', options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'direction' is not null or undefined
+            assertParamExists('getPartners', 'direction', direction)
+            const localVarPath = `/partner`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (direction !== undefined) {
+                localVarQueryParameter['direction'] = direction;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        removePartner: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('removePartner', 'id', id)
+            const localVarPath = `/partner/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * PartnerApi - functional programming interface
+ * @export
+ */
+export const PartnerApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = PartnerApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createPartner(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<UserResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.createPartner(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {'shared-by' | 'shared-with'} direction 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getPartners(direction: 'shared-by' | 'shared-with', options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<UserResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getPartners(direction, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async removePartner(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.removePartner(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * PartnerApi - factory interface
+ * @export
+ */
+export const PartnerApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = PartnerApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {PartnerApiCreatePartnerRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createPartner(requestParameters: PartnerApiCreatePartnerRequest, options?: AxiosRequestConfig): AxiosPromise<UserResponseDto> {
+            return localVarFp.createPartner(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {PartnerApiGetPartnersRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getPartners(requestParameters: PartnerApiGetPartnersRequest, options?: AxiosRequestConfig): AxiosPromise<Array<UserResponseDto>> {
+            return localVarFp.getPartners(requestParameters.direction, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {PartnerApiRemovePartnerRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        removePartner(requestParameters: PartnerApiRemovePartnerRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.removePartner(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for createPartner operation in PartnerApi.
+ * @export
+ * @interface PartnerApiCreatePartnerRequest
+ */
+export interface PartnerApiCreatePartnerRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof PartnerApiCreatePartner
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for getPartners operation in PartnerApi.
+ * @export
+ * @interface PartnerApiGetPartnersRequest
+ */
+export interface PartnerApiGetPartnersRequest {
+    /**
+     * 
+     * @type {'shared-by' | 'shared-with'}
+     * @memberof PartnerApiGetPartners
+     */
+    readonly direction: 'shared-by' | 'shared-with'
+}
+
+/**
+ * Request parameters for removePartner operation in PartnerApi.
+ * @export
+ * @interface PartnerApiRemovePartnerRequest
+ */
+export interface PartnerApiRemovePartnerRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof PartnerApiRemovePartner
+     */
+    readonly id: string
+}
+
+/**
+ * PartnerApi - object-oriented interface
+ * @export
+ * @class PartnerApi
+ * @extends {BaseAPI}
+ */
+export class PartnerApi extends BaseAPI {
+    /**
+     * 
+     * @param {PartnerApiCreatePartnerRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof PartnerApi
+     */
+    public createPartner(requestParameters: PartnerApiCreatePartnerRequest, options?: AxiosRequestConfig) {
+        return PartnerApiFp(this.configuration).createPartner(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {PartnerApiGetPartnersRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof PartnerApi
+     */
+    public getPartners(requestParameters: PartnerApiGetPartnersRequest, options?: AxiosRequestConfig) {
+        return PartnerApiFp(this.configuration).getPartners(requestParameters.direction, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {PartnerApiRemovePartnerRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof PartnerApi
+     */
+    public removePartner(requestParameters: PartnerApiRemovePartnerRequest, options?: AxiosRequestConfig) {
+        return PartnerApiFp(this.configuration).removePartner(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * PersonApi - axios parameter creator
+ * @export
+ */
+export const PersonApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllPeople: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/person`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getPerson: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('getPerson', 'id', id)
+            const localVarPath = `/person/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getPersonAssets: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('getPersonAssets', 'id', id)
+            const localVarPath = `/person/{id}/assets`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getPersonThumbnail: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('getPersonThumbnail', 'id', id)
+            const localVarPath = `/person/{id}/thumbnail`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {PersonUpdateDto} personUpdateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updatePerson: async (id: string, personUpdateDto: PersonUpdateDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('updatePerson', 'id', id)
+            // verify required parameter 'personUpdateDto' is not null or undefined
+            assertParamExists('updatePerson', 'personUpdateDto', personUpdateDto)
+            const localVarPath = `/person/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(personUpdateDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * PersonApi - functional programming interface
+ * @export
+ */
+export const PersonApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = PersonApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAllPeople(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<PersonResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAllPeople(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getPerson(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<PersonResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getPerson(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getPersonAssets(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getPersonAssets(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getPersonThumbnail(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getPersonThumbnail(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {PersonUpdateDto} personUpdateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updatePerson(id: string, personUpdateDto: PersonUpdateDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<PersonResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updatePerson(id, personUpdateDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * PersonApi - factory interface
+ * @export
+ */
+export const PersonApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = PersonApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllPeople(options?: AxiosRequestConfig): AxiosPromise<Array<PersonResponseDto>> {
+            return localVarFp.getAllPeople(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {PersonApiGetPersonRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getPerson(requestParameters: PersonApiGetPersonRequest, options?: AxiosRequestConfig): AxiosPromise<PersonResponseDto> {
+            return localVarFp.getPerson(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {PersonApiGetPersonAssetsRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getPersonAssets(requestParameters: PersonApiGetPersonAssetsRequest, options?: AxiosRequestConfig): AxiosPromise<Array<AssetResponseDto>> {
+            return localVarFp.getPersonAssets(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {PersonApiGetPersonThumbnailRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getPersonThumbnail(requestParameters: PersonApiGetPersonThumbnailRequest, options?: AxiosRequestConfig): AxiosPromise<File> {
+            return localVarFp.getPersonThumbnail(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {PersonApiUpdatePersonRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updatePerson(requestParameters: PersonApiUpdatePersonRequest, options?: AxiosRequestConfig): AxiosPromise<PersonResponseDto> {
+            return localVarFp.updatePerson(requestParameters.id, requestParameters.personUpdateDto, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for getPerson operation in PersonApi.
+ * @export
+ * @interface PersonApiGetPersonRequest
+ */
+export interface PersonApiGetPersonRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof PersonApiGetPerson
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for getPersonAssets operation in PersonApi.
+ * @export
+ * @interface PersonApiGetPersonAssetsRequest
+ */
+export interface PersonApiGetPersonAssetsRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof PersonApiGetPersonAssets
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for getPersonThumbnail operation in PersonApi.
+ * @export
+ * @interface PersonApiGetPersonThumbnailRequest
+ */
+export interface PersonApiGetPersonThumbnailRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof PersonApiGetPersonThumbnail
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for updatePerson operation in PersonApi.
+ * @export
+ * @interface PersonApiUpdatePersonRequest
+ */
+export interface PersonApiUpdatePersonRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof PersonApiUpdatePerson
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {PersonUpdateDto}
+     * @memberof PersonApiUpdatePerson
+     */
+    readonly personUpdateDto: PersonUpdateDto
+}
+
+/**
+ * PersonApi - object-oriented interface
+ * @export
+ * @class PersonApi
+ * @extends {BaseAPI}
+ */
+export class PersonApi extends BaseAPI {
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof PersonApi
+     */
+    public getAllPeople(options?: AxiosRequestConfig) {
+        return PersonApiFp(this.configuration).getAllPeople(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {PersonApiGetPersonRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof PersonApi
+     */
+    public getPerson(requestParameters: PersonApiGetPersonRequest, options?: AxiosRequestConfig) {
+        return PersonApiFp(this.configuration).getPerson(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {PersonApiGetPersonAssetsRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof PersonApi
+     */
+    public getPersonAssets(requestParameters: PersonApiGetPersonAssetsRequest, options?: AxiosRequestConfig) {
+        return PersonApiFp(this.configuration).getPersonAssets(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {PersonApiGetPersonThumbnailRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof PersonApi
+     */
+    public getPersonThumbnail(requestParameters: PersonApiGetPersonThumbnailRequest, options?: AxiosRequestConfig) {
+        return PersonApiFp(this.configuration).getPersonThumbnail(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {PersonApiUpdatePersonRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof PersonApi
+     */
+    public updatePerson(requestParameters: PersonApiUpdatePersonRequest, options?: AxiosRequestConfig) {
+        return PersonApiFp(this.configuration).updatePerson(requestParameters.id, requestParameters.personUpdateDto, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * SearchApi - axios parameter creator
+ * @export
+ */
+export const SearchApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getExploreData: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/search/explore`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getSearchConfig: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/search/config`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} [q] 
+         * @param {string} [query] 
+         * @param {boolean} [clip] 
+         * @param {'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER'} [type] 
+         * @param {boolean} [isFavorite] 
+         * @param {boolean} [isArchived] 
+         * @param {string} [exifInfoCity] 
+         * @param {string} [exifInfoState] 
+         * @param {string} [exifInfoCountry] 
+         * @param {string} [exifInfoMake] 
+         * @param {string} [exifInfoModel] 
+         * @param {Array<string>} [smartInfoObjects] 
+         * @param {Array<string>} [smartInfoTags] 
+         * @param {boolean} [recent] 
+         * @param {boolean} [motion] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        search: async (q?: string, query?: string, clip?: boolean, type?: 'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER', isFavorite?: boolean, isArchived?: boolean, exifInfoCity?: string, exifInfoState?: string, exifInfoCountry?: string, exifInfoMake?: string, exifInfoModel?: string, smartInfoObjects?: Array<string>, smartInfoTags?: Array<string>, recent?: boolean, motion?: boolean, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/search`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (q !== undefined) {
+                localVarQueryParameter['q'] = q;
+            }
+
+            if (query !== undefined) {
+                localVarQueryParameter['query'] = query;
+            }
+
+            if (clip !== undefined) {
+                localVarQueryParameter['clip'] = clip;
+            }
+
+            if (type !== undefined) {
+                localVarQueryParameter['type'] = type;
+            }
+
+            if (isFavorite !== undefined) {
+                localVarQueryParameter['isFavorite'] = isFavorite;
+            }
+
+            if (isArchived !== undefined) {
+                localVarQueryParameter['isArchived'] = isArchived;
+            }
+
+            if (exifInfoCity !== undefined) {
+                localVarQueryParameter['exifInfo.city'] = exifInfoCity;
+            }
+
+            if (exifInfoState !== undefined) {
+                localVarQueryParameter['exifInfo.state'] = exifInfoState;
+            }
+
+            if (exifInfoCountry !== undefined) {
+                localVarQueryParameter['exifInfo.country'] = exifInfoCountry;
+            }
+
+            if (exifInfoMake !== undefined) {
+                localVarQueryParameter['exifInfo.make'] = exifInfoMake;
+            }
+
+            if (exifInfoModel !== undefined) {
+                localVarQueryParameter['exifInfo.model'] = exifInfoModel;
+            }
+
+            if (smartInfoObjects) {
+                localVarQueryParameter['smartInfo.objects'] = smartInfoObjects;
+            }
+
+            if (smartInfoTags) {
+                localVarQueryParameter['smartInfo.tags'] = smartInfoTags;
+            }
+
+            if (recent !== undefined) {
+                localVarQueryParameter['recent'] = recent;
+            }
+
+            if (motion !== undefined) {
+                localVarQueryParameter['motion'] = motion;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * SearchApi - functional programming interface
+ * @export
+ */
+export const SearchApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = SearchApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getExploreData(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<SearchExploreResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getExploreData(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getSearchConfig(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SearchConfigResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getSearchConfig(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} [q] 
+         * @param {string} [query] 
+         * @param {boolean} [clip] 
+         * @param {'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER'} [type] 
+         * @param {boolean} [isFavorite] 
+         * @param {boolean} [isArchived] 
+         * @param {string} [exifInfoCity] 
+         * @param {string} [exifInfoState] 
+         * @param {string} [exifInfoCountry] 
+         * @param {string} [exifInfoMake] 
+         * @param {string} [exifInfoModel] 
+         * @param {Array<string>} [smartInfoObjects] 
+         * @param {Array<string>} [smartInfoTags] 
+         * @param {boolean} [recent] 
+         * @param {boolean} [motion] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async search(q?: string, query?: string, clip?: boolean, type?: 'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER', isFavorite?: boolean, isArchived?: boolean, exifInfoCity?: string, exifInfoState?: string, exifInfoCountry?: string, exifInfoMake?: string, exifInfoModel?: string, smartInfoObjects?: Array<string>, smartInfoTags?: Array<string>, recent?: boolean, motion?: boolean, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SearchResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.search(q, query, clip, type, isFavorite, isArchived, exifInfoCity, exifInfoState, exifInfoCountry, exifInfoMake, exifInfoModel, smartInfoObjects, smartInfoTags, recent, motion, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * SearchApi - factory interface
+ * @export
+ */
+export const SearchApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = SearchApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getExploreData(options?: AxiosRequestConfig): AxiosPromise<Array<SearchExploreResponseDto>> {
+            return localVarFp.getExploreData(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getSearchConfig(options?: AxiosRequestConfig): AxiosPromise<SearchConfigResponseDto> {
+            return localVarFp.getSearchConfig(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {SearchApiSearchRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        search(requestParameters: SearchApiSearchRequest = {}, options?: AxiosRequestConfig): AxiosPromise<SearchResponseDto> {
+            return localVarFp.search(requestParameters.q, requestParameters.query, requestParameters.clip, requestParameters.type, requestParameters.isFavorite, requestParameters.isArchived, requestParameters.exifInfoCity, requestParameters.exifInfoState, requestParameters.exifInfoCountry, requestParameters.exifInfoMake, requestParameters.exifInfoModel, requestParameters.smartInfoObjects, requestParameters.smartInfoTags, requestParameters.recent, requestParameters.motion, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for search operation in SearchApi.
+ * @export
+ * @interface SearchApiSearchRequest
+ */
+export interface SearchApiSearchRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchApiSearch
+     */
+    readonly q?: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchApiSearch
+     */
+    readonly query?: string
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SearchApiSearch
+     */
+    readonly clip?: boolean
+
+    /**
+     * 
+     * @type {'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER'}
+     * @memberof SearchApiSearch
+     */
+    readonly type?: 'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER'
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SearchApiSearch
+     */
+    readonly isFavorite?: boolean
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SearchApiSearch
+     */
+    readonly isArchived?: boolean
+
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchApiSearch
+     */
+    readonly exifInfoCity?: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchApiSearch
+     */
+    readonly exifInfoState?: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchApiSearch
+     */
+    readonly exifInfoCountry?: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchApiSearch
+     */
+    readonly exifInfoMake?: string
+
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchApiSearch
+     */
+    readonly exifInfoModel?: string
+
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SearchApiSearch
+     */
+    readonly smartInfoObjects?: Array<string>
+
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SearchApiSearch
+     */
+    readonly smartInfoTags?: Array<string>
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SearchApiSearch
+     */
+    readonly recent?: boolean
+
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SearchApiSearch
+     */
+    readonly motion?: boolean
+}
+
+/**
+ * SearchApi - object-oriented interface
+ * @export
+ * @class SearchApi
+ * @extends {BaseAPI}
+ */
+export class SearchApi extends BaseAPI {
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SearchApi
+     */
+    public getExploreData(options?: AxiosRequestConfig) {
+        return SearchApiFp(this.configuration).getExploreData(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SearchApi
+     */
+    public getSearchConfig(options?: AxiosRequestConfig) {
+        return SearchApiFp(this.configuration).getSearchConfig(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {SearchApiSearchRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SearchApi
+     */
+    public search(requestParameters: SearchApiSearchRequest = {}, options?: AxiosRequestConfig) {
+        return SearchApiFp(this.configuration).search(requestParameters.q, requestParameters.query, requestParameters.clip, requestParameters.type, requestParameters.isFavorite, requestParameters.isArchived, requestParameters.exifInfoCity, requestParameters.exifInfoState, requestParameters.exifInfoCountry, requestParameters.exifInfoMake, requestParameters.exifInfoModel, requestParameters.smartInfoObjects, requestParameters.smartInfoTags, requestParameters.recent, requestParameters.motion, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * ServerInfoApi - axios parameter creator
+ * @export
+ */
+export const ServerInfoApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getServerInfo: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/server-info`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getServerVersion: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/server-info/version`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getStats: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/server-info/stats`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        pingServer: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/server-info/ping`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * ServerInfoApi - functional programming interface
+ * @export
+ */
+export const ServerInfoApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = ServerInfoApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getServerInfo(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ServerInfoResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getServerInfo(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getServerVersion(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ServerVersionReponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getServerVersion(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getStats(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ServerStatsResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getStats(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async pingServer(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ServerPingResponse>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.pingServer(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * ServerInfoApi - factory interface
+ * @export
+ */
+export const ServerInfoApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = ServerInfoApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getServerInfo(options?: AxiosRequestConfig): AxiosPromise<ServerInfoResponseDto> {
+            return localVarFp.getServerInfo(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getServerVersion(options?: AxiosRequestConfig): AxiosPromise<ServerVersionReponseDto> {
+            return localVarFp.getServerVersion(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getStats(options?: AxiosRequestConfig): AxiosPromise<ServerStatsResponseDto> {
+            return localVarFp.getStats(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        pingServer(options?: AxiosRequestConfig): AxiosPromise<ServerPingResponse> {
+            return localVarFp.pingServer(options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * ServerInfoApi - object-oriented interface
+ * @export
+ * @class ServerInfoApi
+ * @extends {BaseAPI}
+ */
+export class ServerInfoApi extends BaseAPI {
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof ServerInfoApi
+     */
+    public getServerInfo(options?: AxiosRequestConfig) {
+        return ServerInfoApiFp(this.configuration).getServerInfo(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof ServerInfoApi
+     */
+    public getServerVersion(options?: AxiosRequestConfig) {
+        return ServerInfoApiFp(this.configuration).getServerVersion(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof ServerInfoApi
+     */
+    public getStats(options?: AxiosRequestConfig) {
+        return ServerInfoApiFp(this.configuration).getStats(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof ServerInfoApi
+     */
+    public pingServer(options?: AxiosRequestConfig) {
+        return ServerInfoApiFp(this.configuration).pingServer(options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * SharedLinkApi - axios parameter creator
+ * @export
+ */
+export const SharedLinkApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {string} id 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        addSharedLinkAssets: async (id: string, assetIdsDto: AssetIdsDto, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('addSharedLinkAssets', 'id', id)
+            // verify required parameter 'assetIdsDto' is not null or undefined
+            assertParamExists('addSharedLinkAssets', 'assetIdsDto', assetIdsDto)
+            const localVarPath = `/shared-link/{id}/assets`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(assetIdsDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {SharedLinkCreateDto} sharedLinkCreateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createSharedLink: async (sharedLinkCreateDto: SharedLinkCreateDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'sharedLinkCreateDto' is not null or undefined
+            assertParamExists('createSharedLink', 'sharedLinkCreateDto', sharedLinkCreateDto)
+            const localVarPath = `/shared-link`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(sharedLinkCreateDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllSharedLinks: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/shared-link`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getMySharedLink: async (key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/shared-link/me`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getSharedLinkById: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('getSharedLinkById', 'id', id)
+            const localVarPath = `/shared-link/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        removeSharedLink: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('removeSharedLink', 'id', id)
+            const localVarPath = `/shared-link/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        removeSharedLinkAssets: async (id: string, assetIdsDto: AssetIdsDto, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('removeSharedLinkAssets', 'id', id)
+            // verify required parameter 'assetIdsDto' is not null or undefined
+            assertParamExists('removeSharedLinkAssets', 'assetIdsDto', assetIdsDto)
+            const localVarPath = `/shared-link/{id}/assets`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (key !== undefined) {
+                localVarQueryParameter['key'] = key;
+            }
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(assetIdsDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {SharedLinkEditDto} sharedLinkEditDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateSharedLink: async (id: string, sharedLinkEditDto: SharedLinkEditDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('updateSharedLink', 'id', id)
+            // verify required parameter 'sharedLinkEditDto' is not null or undefined
+            assertParamExists('updateSharedLink', 'sharedLinkEditDto', sharedLinkEditDto)
+            const localVarPath = `/shared-link/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PATCH', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(sharedLinkEditDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * SharedLinkApi - functional programming interface
+ * @export
+ */
+export const SharedLinkApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = SharedLinkApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {string} id 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async addSharedLinkAssets(id: string, assetIdsDto: AssetIdsDto, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetIdsResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.addSharedLinkAssets(id, assetIdsDto, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {SharedLinkCreateDto} sharedLinkCreateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createSharedLink(sharedLinkCreateDto: SharedLinkCreateDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SharedLinkResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.createSharedLink(sharedLinkCreateDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAllSharedLinks(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<SharedLinkResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAllSharedLinks(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getMySharedLink(key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SharedLinkResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getMySharedLink(key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getSharedLinkById(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SharedLinkResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getSharedLinkById(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async removeSharedLink(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.removeSharedLink(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {string} [key] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async removeSharedLinkAssets(id: string, assetIdsDto: AssetIdsDto, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetIdsResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.removeSharedLinkAssets(id, assetIdsDto, key, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {SharedLinkEditDto} sharedLinkEditDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateSharedLink(id: string, sharedLinkEditDto: SharedLinkEditDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SharedLinkResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateSharedLink(id, sharedLinkEditDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * SharedLinkApi - factory interface
+ * @export
+ */
+export const SharedLinkApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = SharedLinkApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {SharedLinkApiAddSharedLinkAssetsRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        addSharedLinkAssets(requestParameters: SharedLinkApiAddSharedLinkAssetsRequest, options?: AxiosRequestConfig): AxiosPromise<Array<AssetIdsResponseDto>> {
+            return localVarFp.addSharedLinkAssets(requestParameters.id, requestParameters.assetIdsDto, requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {SharedLinkApiCreateSharedLinkRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createSharedLink(requestParameters: SharedLinkApiCreateSharedLinkRequest, options?: AxiosRequestConfig): AxiosPromise<SharedLinkResponseDto> {
+            return localVarFp.createSharedLink(requestParameters.sharedLinkCreateDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllSharedLinks(options?: AxiosRequestConfig): AxiosPromise<Array<SharedLinkResponseDto>> {
+            return localVarFp.getAllSharedLinks(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {SharedLinkApiGetMySharedLinkRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getMySharedLink(requestParameters: SharedLinkApiGetMySharedLinkRequest = {}, options?: AxiosRequestConfig): AxiosPromise<SharedLinkResponseDto> {
+            return localVarFp.getMySharedLink(requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {SharedLinkApiGetSharedLinkByIdRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getSharedLinkById(requestParameters: SharedLinkApiGetSharedLinkByIdRequest, options?: AxiosRequestConfig): AxiosPromise<SharedLinkResponseDto> {
+            return localVarFp.getSharedLinkById(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {SharedLinkApiRemoveSharedLinkRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        removeSharedLink(requestParameters: SharedLinkApiRemoveSharedLinkRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.removeSharedLink(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {SharedLinkApiRemoveSharedLinkAssetsRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        removeSharedLinkAssets(requestParameters: SharedLinkApiRemoveSharedLinkAssetsRequest, options?: AxiosRequestConfig): AxiosPromise<Array<AssetIdsResponseDto>> {
+            return localVarFp.removeSharedLinkAssets(requestParameters.id, requestParameters.assetIdsDto, requestParameters.key, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {SharedLinkApiUpdateSharedLinkRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateSharedLink(requestParameters: SharedLinkApiUpdateSharedLinkRequest, options?: AxiosRequestConfig): AxiosPromise<SharedLinkResponseDto> {
+            return localVarFp.updateSharedLink(requestParameters.id, requestParameters.sharedLinkEditDto, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for addSharedLinkAssets operation in SharedLinkApi.
+ * @export
+ * @interface SharedLinkApiAddSharedLinkAssetsRequest
+ */
+export interface SharedLinkApiAddSharedLinkAssetsRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkApiAddSharedLinkAssets
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {AssetIdsDto}
+     * @memberof SharedLinkApiAddSharedLinkAssets
+     */
+    readonly assetIdsDto: AssetIdsDto
+
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkApiAddSharedLinkAssets
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for createSharedLink operation in SharedLinkApi.
+ * @export
+ * @interface SharedLinkApiCreateSharedLinkRequest
+ */
+export interface SharedLinkApiCreateSharedLinkRequest {
+    /**
+     * 
+     * @type {SharedLinkCreateDto}
+     * @memberof SharedLinkApiCreateSharedLink
+     */
+    readonly sharedLinkCreateDto: SharedLinkCreateDto
+}
+
+/**
+ * Request parameters for getMySharedLink operation in SharedLinkApi.
+ * @export
+ * @interface SharedLinkApiGetMySharedLinkRequest
+ */
+export interface SharedLinkApiGetMySharedLinkRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkApiGetMySharedLink
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for getSharedLinkById operation in SharedLinkApi.
+ * @export
+ * @interface SharedLinkApiGetSharedLinkByIdRequest
+ */
+export interface SharedLinkApiGetSharedLinkByIdRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkApiGetSharedLinkById
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for removeSharedLink operation in SharedLinkApi.
+ * @export
+ * @interface SharedLinkApiRemoveSharedLinkRequest
+ */
+export interface SharedLinkApiRemoveSharedLinkRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkApiRemoveSharedLink
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for removeSharedLinkAssets operation in SharedLinkApi.
+ * @export
+ * @interface SharedLinkApiRemoveSharedLinkAssetsRequest
+ */
+export interface SharedLinkApiRemoveSharedLinkAssetsRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkApiRemoveSharedLinkAssets
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {AssetIdsDto}
+     * @memberof SharedLinkApiRemoveSharedLinkAssets
+     */
+    readonly assetIdsDto: AssetIdsDto
+
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkApiRemoveSharedLinkAssets
+     */
+    readonly key?: string
+}
+
+/**
+ * Request parameters for updateSharedLink operation in SharedLinkApi.
+ * @export
+ * @interface SharedLinkApiUpdateSharedLinkRequest
+ */
+export interface SharedLinkApiUpdateSharedLinkRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof SharedLinkApiUpdateSharedLink
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {SharedLinkEditDto}
+     * @memberof SharedLinkApiUpdateSharedLink
+     */
+    readonly sharedLinkEditDto: SharedLinkEditDto
+}
+
+/**
+ * SharedLinkApi - object-oriented interface
+ * @export
+ * @class SharedLinkApi
+ * @extends {BaseAPI}
+ */
+export class SharedLinkApi extends BaseAPI {
+    /**
+     * 
+     * @param {SharedLinkApiAddSharedLinkAssetsRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SharedLinkApi
+     */
+    public addSharedLinkAssets(requestParameters: SharedLinkApiAddSharedLinkAssetsRequest, options?: AxiosRequestConfig) {
+        return SharedLinkApiFp(this.configuration).addSharedLinkAssets(requestParameters.id, requestParameters.assetIdsDto, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {SharedLinkApiCreateSharedLinkRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SharedLinkApi
+     */
+    public createSharedLink(requestParameters: SharedLinkApiCreateSharedLinkRequest, options?: AxiosRequestConfig) {
+        return SharedLinkApiFp(this.configuration).createSharedLink(requestParameters.sharedLinkCreateDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SharedLinkApi
+     */
+    public getAllSharedLinks(options?: AxiosRequestConfig) {
+        return SharedLinkApiFp(this.configuration).getAllSharedLinks(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {SharedLinkApiGetMySharedLinkRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SharedLinkApi
+     */
+    public getMySharedLink(requestParameters: SharedLinkApiGetMySharedLinkRequest = {}, options?: AxiosRequestConfig) {
+        return SharedLinkApiFp(this.configuration).getMySharedLink(requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {SharedLinkApiGetSharedLinkByIdRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SharedLinkApi
+     */
+    public getSharedLinkById(requestParameters: SharedLinkApiGetSharedLinkByIdRequest, options?: AxiosRequestConfig) {
+        return SharedLinkApiFp(this.configuration).getSharedLinkById(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {SharedLinkApiRemoveSharedLinkRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SharedLinkApi
+     */
+    public removeSharedLink(requestParameters: SharedLinkApiRemoveSharedLinkRequest, options?: AxiosRequestConfig) {
+        return SharedLinkApiFp(this.configuration).removeSharedLink(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {SharedLinkApiRemoveSharedLinkAssetsRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SharedLinkApi
+     */
+    public removeSharedLinkAssets(requestParameters: SharedLinkApiRemoveSharedLinkAssetsRequest, options?: AxiosRequestConfig) {
+        return SharedLinkApiFp(this.configuration).removeSharedLinkAssets(requestParameters.id, requestParameters.assetIdsDto, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {SharedLinkApiUpdateSharedLinkRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SharedLinkApi
+     */
+    public updateSharedLink(requestParameters: SharedLinkApiUpdateSharedLinkRequest, options?: AxiosRequestConfig) {
+        return SharedLinkApiFp(this.configuration).updateSharedLink(requestParameters.id, requestParameters.sharedLinkEditDto, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * SystemConfigApi - axios parameter creator
+ * @export
+ */
+export const SystemConfigApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getConfig: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/system-config`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getDefaults: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/system-config/defaults`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getStorageTemplateOptions: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/system-config/storage-template-options`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {SystemConfigDto} systemConfigDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateConfig: async (systemConfigDto: SystemConfigDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'systemConfigDto' is not null or undefined
+            assertParamExists('updateConfig', 'systemConfigDto', systemConfigDto)
+            const localVarPath = `/system-config`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(systemConfigDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * SystemConfigApi - functional programming interface
+ * @export
+ */
+export const SystemConfigApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = SystemConfigApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getConfig(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SystemConfigDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getConfig(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getDefaults(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SystemConfigDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getDefaults(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getStorageTemplateOptions(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SystemConfigTemplateStorageOptionDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getStorageTemplateOptions(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {SystemConfigDto} systemConfigDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateConfig(systemConfigDto: SystemConfigDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SystemConfigDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateConfig(systemConfigDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * SystemConfigApi - factory interface
+ * @export
+ */
+export const SystemConfigApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = SystemConfigApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getConfig(options?: AxiosRequestConfig): AxiosPromise<SystemConfigDto> {
+            return localVarFp.getConfig(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getDefaults(options?: AxiosRequestConfig): AxiosPromise<SystemConfigDto> {
+            return localVarFp.getDefaults(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getStorageTemplateOptions(options?: AxiosRequestConfig): AxiosPromise<SystemConfigTemplateStorageOptionDto> {
+            return localVarFp.getStorageTemplateOptions(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {SystemConfigApiUpdateConfigRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateConfig(requestParameters: SystemConfigApiUpdateConfigRequest, options?: AxiosRequestConfig): AxiosPromise<SystemConfigDto> {
+            return localVarFp.updateConfig(requestParameters.systemConfigDto, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for updateConfig operation in SystemConfigApi.
+ * @export
+ * @interface SystemConfigApiUpdateConfigRequest
+ */
+export interface SystemConfigApiUpdateConfigRequest {
+    /**
+     * 
+     * @type {SystemConfigDto}
+     * @memberof SystemConfigApiUpdateConfig
+     */
+    readonly systemConfigDto: SystemConfigDto
+}
+
+/**
+ * SystemConfigApi - object-oriented interface
+ * @export
+ * @class SystemConfigApi
+ * @extends {BaseAPI}
+ */
+export class SystemConfigApi extends BaseAPI {
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SystemConfigApi
+     */
+    public getConfig(options?: AxiosRequestConfig) {
+        return SystemConfigApiFp(this.configuration).getConfig(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SystemConfigApi
+     */
+    public getDefaults(options?: AxiosRequestConfig) {
+        return SystemConfigApiFp(this.configuration).getDefaults(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SystemConfigApi
+     */
+    public getStorageTemplateOptions(options?: AxiosRequestConfig) {
+        return SystemConfigApiFp(this.configuration).getStorageTemplateOptions(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {SystemConfigApiUpdateConfigRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SystemConfigApi
+     */
+    public updateConfig(requestParameters: SystemConfigApiUpdateConfigRequest, options?: AxiosRequestConfig) {
+        return SystemConfigApiFp(this.configuration).updateConfig(requestParameters.systemConfigDto, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * TagApi - axios parameter creator
+ * @export
+ */
+export const TagApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {CreateTagDto} createTagDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createTag: async (createTagDto: CreateTagDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'createTagDto' is not null or undefined
+            assertParamExists('createTag', 'createTagDto', createTagDto)
+            const localVarPath = `/tag`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(createTagDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteTag: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('deleteTag', 'id', id)
+            const localVarPath = `/tag/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllTags: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/tag`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getTagAssets: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('getTagAssets', 'id', id)
+            const localVarPath = `/tag/{id}/assets`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getTagById: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('getTagById', 'id', id)
+            const localVarPath = `/tag/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        tagAssets: async (id: string, assetIdsDto: AssetIdsDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('tagAssets', 'id', id)
+            // verify required parameter 'assetIdsDto' is not null or undefined
+            assertParamExists('tagAssets', 'assetIdsDto', assetIdsDto)
+            const localVarPath = `/tag/{id}/assets`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(assetIdsDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        untagAssets: async (id: string, assetIdsDto: AssetIdsDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('untagAssets', 'id', id)
+            // verify required parameter 'assetIdsDto' is not null or undefined
+            assertParamExists('untagAssets', 'assetIdsDto', assetIdsDto)
+            const localVarPath = `/tag/{id}/assets`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(assetIdsDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {UpdateTagDto} updateTagDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateTag: async (id: string, updateTagDto: UpdateTagDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('updateTag', 'id', id)
+            // verify required parameter 'updateTagDto' is not null or undefined
+            assertParamExists('updateTag', 'updateTagDto', updateTagDto)
+            const localVarPath = `/tag/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PATCH', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(updateTagDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * TagApi - functional programming interface
+ * @export
+ */
+export const TagApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = TagApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {CreateTagDto} createTagDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createTag(createTagDto: CreateTagDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<TagResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.createTag(createTagDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async deleteTag(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.deleteTag(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAllTags(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<TagResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAllTags(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getTagAssets(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getTagAssets(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getTagById(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<TagResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getTagById(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async tagAssets(id: string, assetIdsDto: AssetIdsDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetIdsResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.tagAssets(id, assetIdsDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {AssetIdsDto} assetIdsDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async untagAssets(id: string, assetIdsDto: AssetIdsDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetIdsResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.untagAssets(id, assetIdsDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {UpdateTagDto} updateTagDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateTag(id: string, updateTagDto: UpdateTagDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<TagResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateTag(id, updateTagDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * TagApi - factory interface
+ * @export
+ */
+export const TagApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = TagApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {TagApiCreateTagRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createTag(requestParameters: TagApiCreateTagRequest, options?: AxiosRequestConfig): AxiosPromise<TagResponseDto> {
+            return localVarFp.createTag(requestParameters.createTagDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {TagApiDeleteTagRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteTag(requestParameters: TagApiDeleteTagRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.deleteTag(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllTags(options?: AxiosRequestConfig): AxiosPromise<Array<TagResponseDto>> {
+            return localVarFp.getAllTags(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {TagApiGetTagAssetsRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getTagAssets(requestParameters: TagApiGetTagAssetsRequest, options?: AxiosRequestConfig): AxiosPromise<Array<AssetResponseDto>> {
+            return localVarFp.getTagAssets(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {TagApiGetTagByIdRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getTagById(requestParameters: TagApiGetTagByIdRequest, options?: AxiosRequestConfig): AxiosPromise<TagResponseDto> {
+            return localVarFp.getTagById(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {TagApiTagAssetsRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        tagAssets(requestParameters: TagApiTagAssetsRequest, options?: AxiosRequestConfig): AxiosPromise<Array<AssetIdsResponseDto>> {
+            return localVarFp.tagAssets(requestParameters.id, requestParameters.assetIdsDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {TagApiUntagAssetsRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        untagAssets(requestParameters: TagApiUntagAssetsRequest, options?: AxiosRequestConfig): AxiosPromise<Array<AssetIdsResponseDto>> {
+            return localVarFp.untagAssets(requestParameters.id, requestParameters.assetIdsDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {TagApiUpdateTagRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateTag(requestParameters: TagApiUpdateTagRequest, options?: AxiosRequestConfig): AxiosPromise<TagResponseDto> {
+            return localVarFp.updateTag(requestParameters.id, requestParameters.updateTagDto, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for createTag operation in TagApi.
+ * @export
+ * @interface TagApiCreateTagRequest
+ */
+export interface TagApiCreateTagRequest {
+    /**
+     * 
+     * @type {CreateTagDto}
+     * @memberof TagApiCreateTag
+     */
+    readonly createTagDto: CreateTagDto
+}
+
+/**
+ * Request parameters for deleteTag operation in TagApi.
+ * @export
+ * @interface TagApiDeleteTagRequest
+ */
+export interface TagApiDeleteTagRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof TagApiDeleteTag
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for getTagAssets operation in TagApi.
+ * @export
+ * @interface TagApiGetTagAssetsRequest
+ */
+export interface TagApiGetTagAssetsRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof TagApiGetTagAssets
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for getTagById operation in TagApi.
+ * @export
+ * @interface TagApiGetTagByIdRequest
+ */
+export interface TagApiGetTagByIdRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof TagApiGetTagById
+     */
+    readonly id: string
+}
+
+/**
+ * Request parameters for tagAssets operation in TagApi.
+ * @export
+ * @interface TagApiTagAssetsRequest
+ */
+export interface TagApiTagAssetsRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof TagApiTagAssets
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {AssetIdsDto}
+     * @memberof TagApiTagAssets
+     */
+    readonly assetIdsDto: AssetIdsDto
+}
+
+/**
+ * Request parameters for untagAssets operation in TagApi.
+ * @export
+ * @interface TagApiUntagAssetsRequest
+ */
+export interface TagApiUntagAssetsRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof TagApiUntagAssets
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {AssetIdsDto}
+     * @memberof TagApiUntagAssets
+     */
+    readonly assetIdsDto: AssetIdsDto
+}
+
+/**
+ * Request parameters for updateTag operation in TagApi.
+ * @export
+ * @interface TagApiUpdateTagRequest
+ */
+export interface TagApiUpdateTagRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof TagApiUpdateTag
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {UpdateTagDto}
+     * @memberof TagApiUpdateTag
+     */
+    readonly updateTagDto: UpdateTagDto
+}
+
+/**
+ * TagApi - object-oriented interface
+ * @export
+ * @class TagApi
+ * @extends {BaseAPI}
+ */
+export class TagApi extends BaseAPI {
+    /**
+     * 
+     * @param {TagApiCreateTagRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof TagApi
+     */
+    public createTag(requestParameters: TagApiCreateTagRequest, options?: AxiosRequestConfig) {
+        return TagApiFp(this.configuration).createTag(requestParameters.createTagDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {TagApiDeleteTagRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof TagApi
+     */
+    public deleteTag(requestParameters: TagApiDeleteTagRequest, options?: AxiosRequestConfig) {
+        return TagApiFp(this.configuration).deleteTag(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof TagApi
+     */
+    public getAllTags(options?: AxiosRequestConfig) {
+        return TagApiFp(this.configuration).getAllTags(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {TagApiGetTagAssetsRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof TagApi
+     */
+    public getTagAssets(requestParameters: TagApiGetTagAssetsRequest, options?: AxiosRequestConfig) {
+        return TagApiFp(this.configuration).getTagAssets(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {TagApiGetTagByIdRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof TagApi
+     */
+    public getTagById(requestParameters: TagApiGetTagByIdRequest, options?: AxiosRequestConfig) {
+        return TagApiFp(this.configuration).getTagById(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {TagApiTagAssetsRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof TagApi
+     */
+    public tagAssets(requestParameters: TagApiTagAssetsRequest, options?: AxiosRequestConfig) {
+        return TagApiFp(this.configuration).tagAssets(requestParameters.id, requestParameters.assetIdsDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {TagApiUntagAssetsRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof TagApi
+     */
+    public untagAssets(requestParameters: TagApiUntagAssetsRequest, options?: AxiosRequestConfig) {
+        return TagApiFp(this.configuration).untagAssets(requestParameters.id, requestParameters.assetIdsDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {TagApiUpdateTagRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof TagApi
+     */
+    public updateTag(requestParameters: TagApiUpdateTagRequest, options?: AxiosRequestConfig) {
+        return TagApiFp(this.configuration).updateTag(requestParameters.id, requestParameters.updateTagDto, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+/**
+ * UserApi - axios parameter creator
+ * @export
+ */
+export const UserApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {File} file 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createProfileImage: async (file: File, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'file' is not null or undefined
+            assertParamExists('createProfileImage', 'file', file)
+            const localVarPath = `/user/profile-image`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+            const localVarFormParams = new ((configuration && configuration.formDataCtor) || FormData)();
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+            if (file !== undefined) { 
+                localVarFormParams.append('file', file as any);
+            }
+    
+    
+            localVarHeaderParameter['Content-Type'] = 'multipart/form-data';
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = localVarFormParams;
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {CreateUserDto} createUserDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createUser: async (createUserDto: CreateUserDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'createUserDto' is not null or undefined
+            assertParamExists('createUser', 'createUserDto', createUserDto)
+            const localVarPath = `/user`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(createUserDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} userId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteUser: async (userId: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'userId' is not null or undefined
+            assertParamExists('deleteUser', 'userId', userId)
+            const localVarPath = `/user/{userId}`
+                .replace(`{${"userId"}}`, encodeURIComponent(String(userId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'DELETE', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {boolean} isAll 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllUsers: async (isAll: boolean, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'isAll' is not null or undefined
+            assertParamExists('getAllUsers', 'isAll', isAll)
+            const localVarPath = `/user`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (isAll !== undefined) {
+                localVarQueryParameter['isAll'] = isAll;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getMyUserInfo: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/user/me`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} userId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getProfileImage: async (userId: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'userId' is not null or undefined
+            assertParamExists('getProfileImage', 'userId', userId)
+            const localVarPath = `/user/profile-image/{userId}`
+                .replace(`{${"userId"}}`, encodeURIComponent(String(userId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} userId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getUserById: async (userId: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'userId' is not null or undefined
+            assertParamExists('getUserById', 'userId', userId)
+            const localVarPath = `/user/info/{userId}`
+                .replace(`{${"userId"}}`, encodeURIComponent(String(userId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {boolean} [admin] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getUserCount: async (admin?: boolean, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/user/count`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            if (admin !== undefined) {
+                localVarQueryParameter['admin'] = admin;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} userId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        restoreUser: async (userId: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'userId' is not null or undefined
+            assertParamExists('restoreUser', 'userId', userId)
+            const localVarPath = `/user/{userId}/restore`
+                .replace(`{${"userId"}}`, encodeURIComponent(String(userId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {UpdateUserDto} updateUserDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateUser: async (updateUserDto: UpdateUserDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'updateUserDto' is not null or undefined
+            assertParamExists('updateUser', 'updateUserDto', updateUserDto)
+            const localVarPath = `/user`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(updateUserDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * UserApi - functional programming interface
+ * @export
+ */
+export const UserApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = UserApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {File} file 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createProfileImage(file: File, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<CreateProfileImageResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.createProfileImage(file, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {CreateUserDto} createUserDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createUser(createUserDto: CreateUserDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<UserResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.createUser(createUserDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} userId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async deleteUser(userId: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<UserResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.deleteUser(userId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {boolean} isAll 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getAllUsers(isAll: boolean, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<UserResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAllUsers(isAll, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getMyUserInfo(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<UserResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getMyUserInfo(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} userId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getProfileImage(userId: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<object>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getProfileImage(userId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} userId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getUserById(userId: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<UserResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getUserById(userId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {boolean} [admin] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getUserCount(admin?: boolean, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<UserCountResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getUserCount(admin, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} userId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async restoreUser(userId: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<UserResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.restoreUser(userId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {UpdateUserDto} updateUserDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateUser(updateUserDto: UpdateUserDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<UserResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateUser(updateUserDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * UserApi - factory interface
+ * @export
+ */
+export const UserApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = UserApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {UserApiCreateProfileImageRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createProfileImage(requestParameters: UserApiCreateProfileImageRequest, options?: AxiosRequestConfig): AxiosPromise<CreateProfileImageResponseDto> {
+            return localVarFp.createProfileImage(requestParameters.file, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {UserApiCreateUserRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createUser(requestParameters: UserApiCreateUserRequest, options?: AxiosRequestConfig): AxiosPromise<UserResponseDto> {
+            return localVarFp.createUser(requestParameters.createUserDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {UserApiDeleteUserRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        deleteUser(requestParameters: UserApiDeleteUserRequest, options?: AxiosRequestConfig): AxiosPromise<UserResponseDto> {
+            return localVarFp.deleteUser(requestParameters.userId, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {UserApiGetAllUsersRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getAllUsers(requestParameters: UserApiGetAllUsersRequest, options?: AxiosRequestConfig): AxiosPromise<Array<UserResponseDto>> {
+            return localVarFp.getAllUsers(requestParameters.isAll, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getMyUserInfo(options?: AxiosRequestConfig): AxiosPromise<UserResponseDto> {
+            return localVarFp.getMyUserInfo(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {UserApiGetProfileImageRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getProfileImage(requestParameters: UserApiGetProfileImageRequest, options?: AxiosRequestConfig): AxiosPromise<object> {
+            return localVarFp.getProfileImage(requestParameters.userId, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {UserApiGetUserByIdRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getUserById(requestParameters: UserApiGetUserByIdRequest, options?: AxiosRequestConfig): AxiosPromise<UserResponseDto> {
+            return localVarFp.getUserById(requestParameters.userId, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {UserApiGetUserCountRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getUserCount(requestParameters: UserApiGetUserCountRequest = {}, options?: AxiosRequestConfig): AxiosPromise<UserCountResponseDto> {
+            return localVarFp.getUserCount(requestParameters.admin, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {UserApiRestoreUserRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        restoreUser(requestParameters: UserApiRestoreUserRequest, options?: AxiosRequestConfig): AxiosPromise<UserResponseDto> {
+            return localVarFp.restoreUser(requestParameters.userId, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {UserApiUpdateUserRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateUser(requestParameters: UserApiUpdateUserRequest, options?: AxiosRequestConfig): AxiosPromise<UserResponseDto> {
+            return localVarFp.updateUser(requestParameters.updateUserDto, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * Request parameters for createProfileImage operation in UserApi.
+ * @export
+ * @interface UserApiCreateProfileImageRequest
+ */
+export interface UserApiCreateProfileImageRequest {
+    /**
+     * 
+     * @type {File}
+     * @memberof UserApiCreateProfileImage
+     */
+    readonly file: File
+}
+
+/**
+ * Request parameters for createUser operation in UserApi.
+ * @export
+ * @interface UserApiCreateUserRequest
+ */
+export interface UserApiCreateUserRequest {
+    /**
+     * 
+     * @type {CreateUserDto}
+     * @memberof UserApiCreateUser
+     */
+    readonly createUserDto: CreateUserDto
+}
+
+/**
+ * Request parameters for deleteUser operation in UserApi.
+ * @export
+ * @interface UserApiDeleteUserRequest
+ */
+export interface UserApiDeleteUserRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof UserApiDeleteUser
+     */
+    readonly userId: string
+}
+
+/**
+ * Request parameters for getAllUsers operation in UserApi.
+ * @export
+ * @interface UserApiGetAllUsersRequest
+ */
+export interface UserApiGetAllUsersRequest {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof UserApiGetAllUsers
+     */
+    readonly isAll: boolean
+}
+
+/**
+ * Request parameters for getProfileImage operation in UserApi.
+ * @export
+ * @interface UserApiGetProfileImageRequest
+ */
+export interface UserApiGetProfileImageRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof UserApiGetProfileImage
+     */
+    readonly userId: string
+}
+
+/**
+ * Request parameters for getUserById operation in UserApi.
+ * @export
+ * @interface UserApiGetUserByIdRequest
+ */
+export interface UserApiGetUserByIdRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof UserApiGetUserById
+     */
+    readonly userId: string
+}
+
+/**
+ * Request parameters for getUserCount operation in UserApi.
+ * @export
+ * @interface UserApiGetUserCountRequest
+ */
+export interface UserApiGetUserCountRequest {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof UserApiGetUserCount
+     */
+    readonly admin?: boolean
+}
+
+/**
+ * Request parameters for restoreUser operation in UserApi.
+ * @export
+ * @interface UserApiRestoreUserRequest
+ */
+export interface UserApiRestoreUserRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof UserApiRestoreUser
+     */
+    readonly userId: string
+}
+
+/**
+ * Request parameters for updateUser operation in UserApi.
+ * @export
+ * @interface UserApiUpdateUserRequest
+ */
+export interface UserApiUpdateUserRequest {
+    /**
+     * 
+     * @type {UpdateUserDto}
+     * @memberof UserApiUpdateUser
+     */
+    readonly updateUserDto: UpdateUserDto
+}
+
+/**
+ * UserApi - object-oriented interface
+ * @export
+ * @class UserApi
+ * @extends {BaseAPI}
+ */
+export class UserApi extends BaseAPI {
+    /**
+     * 
+     * @param {UserApiCreateProfileImageRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof UserApi
+     */
+    public createProfileImage(requestParameters: UserApiCreateProfileImageRequest, options?: AxiosRequestConfig) {
+        return UserApiFp(this.configuration).createProfileImage(requestParameters.file, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {UserApiCreateUserRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof UserApi
+     */
+    public createUser(requestParameters: UserApiCreateUserRequest, options?: AxiosRequestConfig) {
+        return UserApiFp(this.configuration).createUser(requestParameters.createUserDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {UserApiDeleteUserRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof UserApi
+     */
+    public deleteUser(requestParameters: UserApiDeleteUserRequest, options?: AxiosRequestConfig) {
+        return UserApiFp(this.configuration).deleteUser(requestParameters.userId, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {UserApiGetAllUsersRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof UserApi
+     */
+    public getAllUsers(requestParameters: UserApiGetAllUsersRequest, options?: AxiosRequestConfig) {
+        return UserApiFp(this.configuration).getAllUsers(requestParameters.isAll, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof UserApi
+     */
+    public getMyUserInfo(options?: AxiosRequestConfig) {
+        return UserApiFp(this.configuration).getMyUserInfo(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {UserApiGetProfileImageRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof UserApi
+     */
+    public getProfileImage(requestParameters: UserApiGetProfileImageRequest, options?: AxiosRequestConfig) {
+        return UserApiFp(this.configuration).getProfileImage(requestParameters.userId, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {UserApiGetUserByIdRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof UserApi
+     */
+    public getUserById(requestParameters: UserApiGetUserByIdRequest, options?: AxiosRequestConfig) {
+        return UserApiFp(this.configuration).getUserById(requestParameters.userId, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {UserApiGetUserCountRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof UserApi
+     */
+    public getUserCount(requestParameters: UserApiGetUserCountRequest = {}, options?: AxiosRequestConfig) {
+        return UserApiFp(this.configuration).getUserCount(requestParameters.admin, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {UserApiRestoreUserRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof UserApi
+     */
+    public restoreUser(requestParameters: UserApiRestoreUserRequest, options?: AxiosRequestConfig) {
+        return UserApiFp(this.configuration).restoreUser(requestParameters.userId, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {UserApiUpdateUserRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof UserApi
+     */
+    public updateUser(requestParameters: UserApiUpdateUserRequest, options?: AxiosRequestConfig) {
+        return UserApiFp(this.configuration).updateUser(requestParameters.updateUserDto, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
diff --git a/cli/src/api/open-api/base.ts b/cli/src/api/open-api/base.ts
new file mode 100644
index 000000000..724f10503
--- /dev/null
+++ b/cli/src/api/open-api/base.ts
@@ -0,0 +1,72 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Immich
+ * Immich API
+ *
+ * The version of the OpenAPI document: 1.65.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+import type { Configuration } from './configuration';
+// Some imports not used depending on template conditions
+// @ts-ignore
+import type { AxiosPromise, AxiosInstance, AxiosRequestConfig } from 'axios';
+import globalAxios from 'axios';
+
+export const BASE_PATH = "/api".replace(/\/+$/, "");
+
+/**
+ *
+ * @export
+ */
+export const COLLECTION_FORMATS = {
+    csv: ",",
+    ssv: " ",
+    tsv: "\t",
+    pipes: "|",
+};
+
+/**
+ *
+ * @export
+ * @interface RequestArgs
+ */
+export interface RequestArgs {
+    url: string;
+    options: AxiosRequestConfig;
+}
+
+/**
+ *
+ * @export
+ * @class BaseAPI
+ */
+export class BaseAPI {
+    protected configuration: Configuration | undefined;
+
+    constructor(configuration?: Configuration, protected basePath: string = BASE_PATH, protected axios: AxiosInstance = globalAxios) {
+        if (configuration) {
+            this.configuration = configuration;
+            this.basePath = configuration.basePath || this.basePath;
+        }
+    }
+};
+
+/**
+ *
+ * @export
+ * @class RequiredError
+ * @extends {Error}
+ */
+export class RequiredError extends Error {
+    constructor(public field: string, msg?: string) {
+        super(msg);
+        this.name = "RequiredError"
+    }
+}
diff --git a/cli/src/api/open-api/common.ts b/cli/src/api/open-api/common.ts
new file mode 100644
index 000000000..e9e8c41f5
--- /dev/null
+++ b/cli/src/api/open-api/common.ts
@@ -0,0 +1,150 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Immich
+ * Immich API
+ *
+ * The version of the OpenAPI document: 1.65.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+import type { Configuration } from "./configuration";
+import type { RequestArgs } from "./base";
+import type { AxiosInstance, AxiosResponse } from 'axios';
+import { RequiredError } from "./base";
+
+/**
+ *
+ * @export
+ */
+export const DUMMY_BASE_URL = 'https://example.com'
+
+/**
+ *
+ * @throws {RequiredError}
+ * @export
+ */
+export const assertParamExists = function (functionName: string, paramName: string, paramValue: unknown) {
+    if (paramValue === null || paramValue === undefined) {
+        throw new RequiredError(paramName, `Required parameter ${paramName} was null or undefined when calling ${functionName}.`);
+    }
+}
+
+/**
+ *
+ * @export
+ */
+export const setApiKeyToObject = async function (object: any, keyParamName: string, configuration?: Configuration) {
+    if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue = typeof configuration.apiKey === 'function'
+            ? await configuration.apiKey(keyParamName)
+            : await configuration.apiKey;
+        object[keyParamName] = localVarApiKeyValue;
+    }
+}
+
+/**
+ *
+ * @export
+ */
+export const setBasicAuthToObject = function (object: any, configuration?: Configuration) {
+    if (configuration && (configuration.username || configuration.password)) {
+        object["auth"] = { username: configuration.username, password: configuration.password };
+    }
+}
+
+/**
+ *
+ * @export
+ */
+export const setBearerAuthToObject = async function (object: any, configuration?: Configuration) {
+    if (configuration && configuration.accessToken) {
+        const accessToken = typeof configuration.accessToken === 'function'
+            ? await configuration.accessToken()
+            : await configuration.accessToken;
+        object["Authorization"] = "Bearer " + accessToken;
+    }
+}
+
+/**
+ *
+ * @export
+ */
+export const setOAuthToObject = async function (object: any, name: string, scopes: string[], configuration?: Configuration) {
+    if (configuration && configuration.accessToken) {
+        const localVarAccessTokenValue = typeof configuration.accessToken === 'function'
+            ? await configuration.accessToken(name, scopes)
+            : await configuration.accessToken;
+        object["Authorization"] = "Bearer " + localVarAccessTokenValue;
+    }
+}
+
+function setFlattenedQueryParams(urlSearchParams: URLSearchParams, parameter: any, key: string = ""): void {
+    if (parameter == null) return;
+    if (typeof parameter === "object") {
+        if (Array.isArray(parameter)) {
+            (parameter as any[]).forEach(item => setFlattenedQueryParams(urlSearchParams, item, key));
+        } 
+        else {
+            Object.keys(parameter).forEach(currentKey => 
+                setFlattenedQueryParams(urlSearchParams, parameter[currentKey], `${key}${key !== '' ? '.' : ''}${currentKey}`)
+            );
+        }
+    } 
+    else {
+        if (urlSearchParams.has(key)) {
+            urlSearchParams.append(key, parameter);
+        } 
+        else {
+            urlSearchParams.set(key, parameter);
+        }
+    }
+}
+
+/**
+ *
+ * @export
+ */
+export const setSearchParams = function (url: URL, ...objects: any[]) {
+    const searchParams = new URLSearchParams(url.search);
+    setFlattenedQueryParams(searchParams, objects);
+    url.search = searchParams.toString();
+}
+
+/**
+ *
+ * @export
+ */
+export const serializeDataIfNeeded = function (value: any, requestOptions: any, configuration?: Configuration) {
+    const nonString = typeof value !== 'string';
+    const needsSerialization = nonString && configuration && configuration.isJsonMime
+        ? configuration.isJsonMime(requestOptions.headers['Content-Type'])
+        : nonString;
+    return needsSerialization
+        ? JSON.stringify(value !== undefined ? value : {})
+        : (value || "");
+}
+
+/**
+ *
+ * @export
+ */
+export const toPathString = function (url: URL) {
+    return url.pathname + url.search + url.hash
+}
+
+/**
+ *
+ * @export
+ */
+export const createRequestFunction = function (axiosArgs: RequestArgs, globalAxios: AxiosInstance, BASE_PATH: string, configuration?: Configuration) {
+    return <T = unknown, R = AxiosResponse<T>>(axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
+        const axiosRequestArgs = {...axiosArgs.options, url: (configuration?.basePath || basePath) + axiosArgs.url};
+        return axios.request<T, R>(axiosRequestArgs);
+    };
+}
diff --git a/cli/src/api/open-api/configuration.ts b/cli/src/api/open-api/configuration.ts
new file mode 100644
index 000000000..9dad93679
--- /dev/null
+++ b/cli/src/api/open-api/configuration.ts
@@ -0,0 +1,101 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Immich
+ * Immich API
+ *
+ * The version of the OpenAPI document: 1.65.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export interface ConfigurationParameters {
+    apiKey?: string | Promise<string> | ((name: string) => string) | ((name: string) => Promise<string>);
+    username?: string;
+    password?: string;
+    accessToken?: string | Promise<string> | ((name?: string, scopes?: string[]) => string) | ((name?: string, scopes?: string[]) => Promise<string>);
+    basePath?: string;
+    baseOptions?: any;
+    formDataCtor?: new () => any;
+}
+
+export class Configuration {
+    /**
+     * parameter for apiKey security
+     * @param name security name
+     * @memberof Configuration
+     */
+    apiKey?: string | Promise<string> | ((name: string) => string) | ((name: string) => Promise<string>);
+    /**
+     * parameter for basic security
+     *
+     * @type {string}
+     * @memberof Configuration
+     */
+    username?: string;
+    /**
+     * parameter for basic security
+     *
+     * @type {string}
+     * @memberof Configuration
+     */
+    password?: string;
+    /**
+     * parameter for oauth2 security
+     * @param name security name
+     * @param scopes oauth2 scope
+     * @memberof Configuration
+     */
+    accessToken?: string | Promise<string> | ((name?: string, scopes?: string[]) => string) | ((name?: string, scopes?: string[]) => Promise<string>);
+    /**
+     * override base path
+     *
+     * @type {string}
+     * @memberof Configuration
+     */
+    basePath?: string;
+    /**
+     * base options for axios calls
+     *
+     * @type {any}
+     * @memberof Configuration
+     */
+    baseOptions?: any;
+    /**
+     * The FormData constructor that will be used to create multipart form data
+     * requests. You can inject this here so that execution environments that
+     * do not support the FormData class can still run the generated client.
+     *
+     * @type {new () => FormData}
+     */
+    formDataCtor?: new () => any;
+
+    constructor(param: ConfigurationParameters = {}) {
+        this.apiKey = param.apiKey;
+        this.username = param.username;
+        this.password = param.password;
+        this.accessToken = param.accessToken;
+        this.basePath = param.basePath;
+        this.baseOptions = param.baseOptions;
+        this.formDataCtor = param.formDataCtor;
+    }
+
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    public isJsonMime(mime: string): boolean {
+        const jsonMime: RegExp = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
+        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
+    }
+}
diff --git a/cli/src/api/open-api/git_push.sh b/cli/src/api/open-api/git_push.sh
new file mode 100644
index 000000000..f53a75d4f
--- /dev/null
+++ b/cli/src/api/open-api/git_push.sh
@@ -0,0 +1,57 @@
+#!/bin/sh
+# ref: https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/
+#
+# Usage example: /bin/sh ./git_push.sh wing328 openapi-petstore-perl "minor update" "gitlab.com"
+
+git_user_id=$1
+git_repo_id=$2
+release_note=$3
+git_host=$4
+
+if [ "$git_host" = "" ]; then
+    git_host="github.com"
+    echo "[INFO] No command line input provided. Set \$git_host to $git_host"
+fi
+
+if [ "$git_user_id" = "" ]; then
+    git_user_id="GIT_USER_ID"
+    echo "[INFO] No command line input provided. Set \$git_user_id to $git_user_id"
+fi
+
+if [ "$git_repo_id" = "" ]; then
+    git_repo_id="GIT_REPO_ID"
+    echo "[INFO] No command line input provided. Set \$git_repo_id to $git_repo_id"
+fi
+
+if [ "$release_note" = "" ]; then
+    release_note="Minor update"
+    echo "[INFO] No command line input provided. Set \$release_note to $release_note"
+fi
+
+# Initialize the local directory as a Git repository
+git init
+
+# Adds the files in the local repository and stages them for commit.
+git add .
+
+# Commits the tracked changes and prepares them to be pushed to a remote repository.
+git commit -m "$release_note"
+
+# Sets the new remote
+git_remote=$(git remote)
+if [ "$git_remote" = "" ]; then # git remote not defined
+
+    if [ "$GIT_TOKEN" = "" ]; then
+        echo "[INFO] \$GIT_TOKEN (environment variable) is not set. Using the git credential in your environment."
+        git remote add origin https://${git_host}/${git_user_id}/${git_repo_id}.git
+    else
+        git remote add origin https://${git_user_id}:"${GIT_TOKEN}"@${git_host}/${git_user_id}/${git_repo_id}.git
+    fi
+
+fi
+
+git pull origin master
+
+# Pushes (Forces) the changes in the local repository up to the remote repository
+echo "Git pushing to https://${git_host}/${git_user_id}/${git_repo_id}.git"
+git push origin master 2>&1 | grep -v 'To https'
diff --git a/cli/src/api/open-api/index.ts b/cli/src/api/open-api/index.ts
new file mode 100644
index 000000000..7183d73c6
--- /dev/null
+++ b/cli/src/api/open-api/index.ts
@@ -0,0 +1,18 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Immich
+ * Immich API
+ *
+ * The version of the OpenAPI document: 1.65.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export * from "./api";
+export * from "./configuration";
+
diff --git a/cli/src/cli/base-command.ts b/cli/src/cli/base-command.ts
new file mode 100644
index 000000000..06247e29c
--- /dev/null
+++ b/cli/src/cli/base-command.ts
@@ -0,0 +1,38 @@
+import { ImmichApi } from '../api/client';
+import path from 'node:path';
+import { SessionService } from '../services/session.service';
+import { LoginError } from '../cores/errors/login-error';
+import { exit } from 'node:process';
+import os from 'os';
+import { ServerVersionReponseDto, UserResponseDto } from 'src/api/open-api';
+
+export abstract class BaseCommand {
+  protected sessionService!: SessionService;
+  protected immichApi!: ImmichApi;
+  protected deviceId!: string;
+  protected user!: UserResponseDto;
+  protected serverVersion!: ServerVersionReponseDto;
+
+  protected configDir;
+  protected authPath;
+
+  constructor() {
+    const userHomeDir = os.homedir();
+    this.configDir = path.join(userHomeDir, '.config/immich/');
+    this.sessionService = new SessionService(this.configDir);
+    this.authPath = path.join(this.configDir, 'auth.yml');
+  }
+
+  public async connect(): Promise<void> {
+    try {
+      this.immichApi = await this.sessionService.connect();
+    } catch (error) {
+      if (error instanceof LoginError) {
+        console.log(error.message);
+        exit(1);
+      } else {
+        throw error;
+      }
+    }
+  }
+}
diff --git a/cli/src/commands/login/key.ts b/cli/src/commands/login/key.ts
new file mode 100644
index 000000000..b348caa35
--- /dev/null
+++ b/cli/src/commands/login/key.ts
@@ -0,0 +1,9 @@
+import { BaseCommand } from '../../cli/base-command';
+
+export default class LoginKey extends BaseCommand {
+  public async run(instanceUrl: string, apiKey: string): Promise<void> {
+    console.log('Executing API key auth flow...');
+
+    await this.sessionService.keyLogin(instanceUrl, apiKey);
+  }
+}
diff --git a/cli/src/commands/logout.ts b/cli/src/commands/logout.ts
new file mode 100644
index 000000000..86f5151e0
--- /dev/null
+++ b/cli/src/commands/logout.ts
@@ -0,0 +1,13 @@
+import { BaseCommand } from '../cli/base-command';
+
+export default class Logout extends BaseCommand {
+  public static readonly description = 'Logout and remove persisted credentials';
+
+  public async run(): Promise<void> {
+    console.log('Executing logout flow...');
+
+    await this.sessionService.logout();
+
+    console.log('Successfully logged out');
+  }
+}
diff --git a/cli/src/commands/server-info.ts b/cli/src/commands/server-info.ts
new file mode 100644
index 000000000..5024604a1
--- /dev/null
+++ b/cli/src/commands/server-info.ts
@@ -0,0 +1,15 @@
+import { BaseCommand } from '../cli/base-command';
+
+export default class ServerInfo extends BaseCommand {
+  static description = 'Display server information';
+  static enableJsonFlag = true;
+
+  public async run() {
+    console.log('Getting server information');
+
+    await this.connect();
+    const { data: versionInfo } = await this.immichApi.serverInfoApi.getServerVersion();
+
+    console.log(versionInfo);
+  }
+}
diff --git a/cli/src/commands/upload.ts b/cli/src/commands/upload.ts
new file mode 100644
index 000000000..5ded203f9
--- /dev/null
+++ b/cli/src/commands/upload.ts
@@ -0,0 +1,176 @@
+import { BaseCommand } from '../cli/base-command';
+import { CrawledAsset } from '../cores/models/crawled-asset';
+import { CrawlService, UploadService } from '../services';
+import * as si from 'systeminformation';
+import FormData from 'form-data';
+import { UploadOptionsDto } from '../cores/dto/upload-options-dto';
+import { CrawlOptionsDto } from '../cores/dto/crawl-options-dto';
+
+import cliProgress from 'cli-progress';
+import byteSize from 'byte-size';
+
+export default class Upload extends BaseCommand {
+  private crawlService = new CrawlService();
+  private uploadService!: UploadService;
+  deviceId!: string;
+  uploadLength!: number;
+  dryRun = false;
+
+  public async run(paths: string[], options: UploadOptionsDto): Promise<void> {
+    await this.connect();
+
+    const uuid = await si.uuid();
+    this.deviceId = uuid.os || 'CLI';
+    this.uploadService = new UploadService(this.immichApi.apiConfiguration);
+
+    this.dryRun = options.dryRun;
+
+    const crawlOptions = new CrawlOptionsDto();
+    crawlOptions.pathsToCrawl = paths;
+    crawlOptions.recursive = options.recursive;
+    crawlOptions.excludePatterns = options.excludePatterns;
+
+    const crawledFiles: string[] = await this.crawlService.crawl(crawlOptions);
+
+    if (crawledFiles.length === 0) {
+      console.log('No assets found, exiting');
+      return;
+    }
+
+    const assetsToUpload = crawledFiles.map((path) => new CrawledAsset(path));
+
+    const uploadProgress = new cliProgress.SingleBar(
+      {
+        format: '{bar} | {percentage}% | ETA: {eta_formatted} | {value_formatted}/{total_formatted}: {filename}',
+      },
+      cliProgress.Presets.shades_classic,
+    );
+
+    let totalSize = 0;
+    let sizeSoFar = 0;
+
+    let totalSizeUploaded = 0;
+    let uploadCounter = 0;
+
+    for (const asset of assetsToUpload) {
+      // Compute total size first
+      await asset.process();
+      totalSize += asset.fileSize;
+    }
+
+    uploadProgress.start(totalSize, 0);
+    uploadProgress.update({ value_formatted: 0, total_formatted: byteSize(totalSize) });
+
+    for (const asset of assetsToUpload) {
+      uploadProgress.update({
+        filename: asset.path,
+      });
+
+      try {
+        if (options.import) {
+          const importData = {
+            assetPath: asset.path,
+            deviceAssetId: asset.deviceAssetId,
+            assetType: asset.assetType,
+            deviceId: this.deviceId,
+            fileCreatedAt: asset.fileCreatedAt,
+            fileModifiedAt: asset.fileModifiedAt,
+            isFavorite: false,
+          };
+
+          if (!this.dryRun) {
+            await this.uploadService.import(importData);
+          }
+        } else {
+          await this.uploadAsset(asset, options.skipHash);
+        }
+      } catch (error) {
+        uploadProgress.stop();
+        throw error;
+      }
+
+      sizeSoFar += asset.fileSize;
+      if (!asset.skipped) {
+        totalSizeUploaded += asset.fileSize;
+        uploadCounter++;
+      }
+
+      uploadProgress.update(sizeSoFar, { value_formatted: byteSize(sizeSoFar) });
+    }
+
+    uploadProgress.stop();
+
+    let messageStart;
+    if (this.dryRun) {
+      messageStart = 'Would have ';
+    } else {
+      messageStart = 'Successfully ';
+    }
+
+    if (options.import) {
+      console.log(`${messageStart} imported ${uploadCounter} assets (${byteSize(totalSizeUploaded)})`);
+    } else {
+      if (uploadCounter === 0) {
+        console.log('All assets were already uploaded, nothing to do.');
+      } else {
+        console.log(`${messageStart} uploaded ${uploadCounter} assets (${byteSize(totalSizeUploaded)})`);
+      }
+      if (options.delete) {
+        if (this.dryRun) {
+          console.log(`Would now have deleted assets, but skipped due to dry run`);
+        } else {
+          console.log('Deleting assets that have been uploaded...');
+          const deletionProgress = new cliProgress.SingleBar(cliProgress.Presets.shades_classic);
+          deletionProgress.start(crawledFiles.length, 0);
+
+          for (const asset of assetsToUpload) {
+            if (!this.dryRun) {
+              await asset.delete();
+            }
+            deletionProgress.increment();
+          }
+          deletionProgress.stop();
+          console.log('Deletion complete');
+        }
+      }
+    }
+  }
+
+  private async uploadAsset(asset: CrawledAsset, skipHash = false) {
+    await asset.readData();
+
+    let skipUpload = false;
+    if (!skipHash) {
+      const checksum = await asset.hash();
+
+      const checkResponse = await this.uploadService.checkIfAssetAlreadyExists(asset.path, checksum);
+      skipUpload = checkResponse.data.results[0].action === 'reject';
+    }
+
+    if (skipUpload) {
+      asset.skipped = true;
+    } else {
+      const uploadFormData = new FormData();
+
+      uploadFormData.append('deviceAssetId', asset.deviceAssetId);
+      uploadFormData.append('deviceId', this.deviceId);
+      uploadFormData.append('fileCreatedAt', asset.fileCreatedAt);
+      uploadFormData.append('fileModifiedAt', asset.fileModifiedAt);
+      uploadFormData.append('isFavorite', String(false));
+      uploadFormData.append('fileExtension', asset.fileExtension);
+      uploadFormData.append('assetType', asset.assetType);
+      uploadFormData.append('assetData', asset.assetData, { filename: asset.path });
+
+      if (asset.sidecarData) {
+        uploadFormData.append('sidecarData', asset.sidecarData, {
+          filename: asset.sidecarPath,
+          contentType: 'application/xml',
+        });
+      }
+
+      if (!this.dryRun) {
+        await this.uploadService.upload(uploadFormData);
+      }
+    }
+  }
+}
diff --git a/cli/src/cores/api-configuration.ts b/cli/src/cores/api-configuration.ts
new file mode 100644
index 000000000..5eeb166a6
--- /dev/null
+++ b/cli/src/cores/api-configuration.ts
@@ -0,0 +1,9 @@
+export class ApiConfiguration {
+  public readonly instanceUrl!: string;
+  public readonly apiKey!: string;
+
+  constructor(instanceUrl: string, apiKey: string) {
+    this.instanceUrl = instanceUrl;
+    this.apiKey = apiKey;
+  }
+}
diff --git a/cli/src/cores/constants.ts b/cli/src/cores/constants.ts
new file mode 100644
index 000000000..b4c6361a6
--- /dev/null
+++ b/cli/src/cores/constants.ts
@@ -0,0 +1,58 @@
+// Check asset-upload.config.spec.ts for complete list
+// TODO: we should get this list from the server via API in the future
+
+// Videos
+const videos = ['mp4', 'webm', 'mov', '3gp', 'avi', 'm2ts', 'mts', 'mpg', 'flv', 'mkv', 'wmv'];
+
+// Images
+const heic = ['heic', 'heif'];
+const jpeg = ['jpg', 'jpeg'];
+const png = ['png'];
+const gif = ['gif'];
+const tiff = ['tif', 'tiff'];
+const webp = ['webp'];
+const dng = ['dng'];
+const other = [
+  '3fr',
+  'ari',
+  'arw',
+  'avif',
+  'cap',
+  'cin',
+  'cr2',
+  'cr3',
+  'crw',
+  'dcr',
+  'nef',
+  'erf',
+  'fff',
+  'iiq',
+  'jxl',
+  'k25',
+  'kdc',
+  'mrw',
+  'orf',
+  'ori',
+  'pef',
+  'raf',
+  'raw',
+  'rwl',
+  'sr2',
+  'srf',
+  'srw',
+  'orf',
+  'ori',
+  'x3f',
+];
+
+export const ACCEPTED_FILE_EXTENSIONS = [
+  ...videos,
+  ...jpeg,
+  ...png,
+  ...heic,
+  ...gif,
+  ...tiff,
+  ...webp,
+  ...dng,
+  ...other,
+];
diff --git a/cli/src/cores/dto/crawl-options-dto.ts b/cli/src/cores/dto/crawl-options-dto.ts
new file mode 100644
index 000000000..f9435d390
--- /dev/null
+++ b/cli/src/cores/dto/crawl-options-dto.ts
@@ -0,0 +1,6 @@
+export class CrawlOptionsDto {
+  pathsToCrawl!: string[];
+  recursive = false;
+  includeHidden = false;
+  excludePatterns!: string[];
+}
diff --git a/cli/src/cores/dto/upload-options-dto.ts b/cli/src/cores/dto/upload-options-dto.ts
new file mode 100644
index 000000000..41d2cba66
--- /dev/null
+++ b/cli/src/cores/dto/upload-options-dto.ts
@@ -0,0 +1,8 @@
+export class UploadOptionsDto {
+  recursive = false;
+  excludePatterns!: string[];
+  dryRun = false;
+  skipHash = false;
+  delete = false;
+  import = false;
+}
diff --git a/cli/src/cores/errors/login-error.ts b/cli/src/cores/errors/login-error.ts
new file mode 100644
index 000000000..da60bca0c
--- /dev/null
+++ b/cli/src/cores/errors/login-error.ts
@@ -0,0 +1,11 @@
+export class LoginError extends Error {
+  constructor(message: string) {
+    super(message);
+
+    // assign the error class name in your custom error (as a shortcut)
+    this.name = this.constructor.name;
+
+    // capturing the stack trace keeps the reference to your error class
+    Error.captureStackTrace(this, this.constructor);
+  }
+}
diff --git a/cli/src/cores/index.ts b/cli/src/cores/index.ts
new file mode 100644
index 000000000..11d6a4170
--- /dev/null
+++ b/cli/src/cores/index.ts
@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './models';
diff --git a/cli/src/cores/models/crawled-asset.ts b/cli/src/cores/models/crawled-asset.ts
new file mode 100644
index 000000000..6e93327b6
--- /dev/null
+++ b/cli/src/cores/models/crawled-asset.ts
@@ -0,0 +1,71 @@
+import * as fs from 'fs';
+import * as mime from 'mime-types';
+import { basename } from 'node:path';
+import * as path from 'path';
+import crypto from 'crypto';
+import { AssetTypeEnum } from 'src/api/open-api';
+
+export class CrawledAsset {
+  public path: string;
+
+  public assetType?: AssetTypeEnum;
+  public assetData?: fs.ReadStream;
+  public deviceAssetId?: string;
+  public fileCreatedAt?: string;
+  public fileModifiedAt?: string;
+  public fileExtension?: string;
+  public sidecarData?: Buffer;
+  public sidecarPath?: string;
+  public fileSize!: number;
+  public skipped = false;
+
+  constructor(path: string) {
+    this.path = path;
+  }
+
+  async readData() {
+    this.assetData = fs.createReadStream(this.path);
+  }
+
+  async process() {
+    const stats = await fs.promises.stat(this.path);
+    this.deviceAssetId = `${basename(this.path)}-${stats.size}`.replace(/\s+/g, '');
+
+    // TODO: Determine file type from extension only
+    const mimeType = mime.lookup(this.path);
+    if (!mimeType) {
+      throw Error('Cannot determine mime type of asset: ' + this.path);
+    }
+    this.assetType = mimeType.split('/')[0].toUpperCase() as AssetTypeEnum;
+    this.fileCreatedAt = stats.ctime.toISOString();
+    this.fileModifiedAt = stats.mtime.toISOString();
+    this.fileExtension = path.extname(this.path);
+    this.fileSize = stats.size;
+
+    // TODO: doesn't xmp replace the file extension? Will need investigation
+    const sideCarPath = `${this.path}.xmp`;
+    try {
+      fs.accessSync(sideCarPath, fs.constants.R_OK);
+      this.sidecarData = await fs.promises.readFile(sideCarPath);
+      this.sidecarPath = sideCarPath;
+    } catch (error) {}
+  }
+
+  async delete(): Promise<void> {
+    return fs.promises.unlink(this.path);
+  }
+
+  public async hash(): Promise<string> {
+    const sha1 = (filePath: string) => {
+      const hash = crypto.createHash('sha1');
+      return new Promise<string>((resolve, reject) => {
+        const rs = fs.createReadStream(filePath);
+        rs.on('error', reject);
+        rs.on('data', (chunk) => hash.update(chunk));
+        rs.on('end', () => resolve(hash.digest('hex')));
+      });
+    };
+
+    return await sha1(this.path);
+  }
+}
diff --git a/cli/src/cores/models/index.ts b/cli/src/cores/models/index.ts
new file mode 100644
index 000000000..ae0990ceb
--- /dev/null
+++ b/cli/src/cores/models/index.ts
@@ -0,0 +1 @@
+export * from './crawled-asset';
diff --git a/cli/src/index.ts b/cli/src/index.ts
new file mode 100644
index 000000000..2ef9b56a3
--- /dev/null
+++ b/cli/src/index.ts
@@ -0,0 +1,61 @@
+import { program, Option } from 'commander';
+import Upload from './commands/upload';
+import ServerInfo from './commands/server-info';
+import LoginKey from './commands/login/key';
+
+program.name('immich').description('Immich command line interface');
+
+program
+  .command('upload')
+  .description('Upload assets')
+  .usage('[options] [paths...]')
+  .addOption(new Option('-r, --recursive', 'Recursive').env('IMMICH_RECURSIVE').default(false))
+  .addOption(new Option('-i, --ignore [paths...]', 'Paths to ignore').env('IMMICH_IGNORE_PATHS'))
+  .addOption(new Option('-h, --skip-hash', "Don't hash files before upload").env('IMMICH_SKIP_HASH').default(false))
+  .addOption(
+    new Option('-n, --dry-run', "Don't perform any actions, just show what will be done")
+      .env('IMMICH_DRY_RUN')
+      .default(false),
+  )
+  .addOption(new Option('--delete', 'Delete local assets after upload').env('IMMICH_DELETE_ASSETS'))
+  .argument('[paths...]', 'One or more paths to assets to be uploaded')
+  .action((paths, options) => {
+    options.excludePatterns = options.ignore;
+    new Upload().run(paths, options);
+  });
+
+program
+  .command('import')
+  .description('Import existing assets')
+  .usage('[options] [paths...]')
+  .addOption(new Option('-r, --recursive', 'Recursive').env('IMMICH_RECURSIVE').default(false))
+  .addOption(
+    new Option('-n, --dry-run', "Don't perform any actions, just show what will be done")
+      .env('IMMICH_DRY_RUN')
+      .default(false),
+  )
+  .addOption(new Option('-i, --ignore [paths...]', 'Paths to ignore').env('IMMICH_IGNORE_PATHS').default(false))
+  .argument('[paths...]', 'One or more paths to assets to be uploaded')
+  .action((paths, options) => {
+    options.import = true;
+    new Upload().run(paths, options);
+  });
+
+program
+  .command('server-info')
+  .description('Display server information')
+
+  .action(() => {
+    new ServerInfo().run();
+  });
+
+program
+  .command('login-key')
+  .description('Login using an API key')
+  .argument('[instanceUrl]')
+  .argument('[apiKey]')
+  .action((paths, options) => {
+    new LoginKey().run(paths, options);
+  });
+
+program.parse(process.argv);
diff --git a/cli/src/services/crawl.service.spec.ts b/cli/src/services/crawl.service.spec.ts
new file mode 100644
index 000000000..487b703e8
--- /dev/null
+++ b/cli/src/services/crawl.service.spec.ts
@@ -0,0 +1,235 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { CrawlService } from './crawl.service';
+import mockfs from 'mock-fs';
+import { toIncludeSameMembers } from 'jest-extended';
+import { CrawlOptionsDto } from '../cores/dto/crawl-options-dto';
+
+const matchers = require('jest-extended');
+expect.extend(matchers);
+
+const crawlService = new CrawlService();
+
+describe('CrawlService', () => {
+  beforeAll(() => {
+    // Write a dummy output before mock-fs to prevent some annoying errors
+    console.log();
+  });
+
+  it('should crawl a single directory', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+    });
+
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/'];
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers(['/photos/image.jpg']);
+  });
+
+  it('should crawl a single file', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+    });
+
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/image.jpg'];
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers(['/photos/image.jpg']);
+  });
+
+  it('should crawl a file and a directory', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+      '/images/photo.jpg': '',
+    });
+
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/image.jpg', '/images/'];
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers(['/photos/image.jpg', '/images/photo.jpg']);
+  });
+
+  it('should exclude by file extension', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+      '/photos/image.tif': '',
+    });
+
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/'];
+    options.excludePatterns = ['**/*.tif'];
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers(['/photos/image.jpg']);
+  });
+
+  it('should exclude by file extension without case sensitivity', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+      '/photos/image.tif': '',
+    });
+
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/'];
+    options.excludePatterns = ['**/*.TIF'];
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers(['/photos/image.jpg']);
+  });
+
+  it('should exclude by folder', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+      '/photos/raw/image.jpg': '',
+      '/photos/raw2/image.jpg': '',
+      '/photos/folder/raw/image.jpg': '',
+      '/photos/crawl/image.jpg': '',
+    });
+
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/'];
+    options.excludePatterns = ['**/raw/**'];
+    options.recursive = true;
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers(['/photos/image.jpg', '/photos/raw2/image.jpg', '/photos/crawl/image.jpg']);
+  });
+
+  it('should crawl multiple paths', async () => {
+    mockfs({
+      '/photos/image1.jpg': '',
+      '/images/image2.jpg': '',
+      '/albums/image3.jpg': '',
+    });
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/', '/images/', '/albums/'];
+    options.recursive = false;
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers(['/photos/image1.jpg', '/images/image2.jpg', '/albums/image3.jpg']);
+  });
+
+  it('should crawl a single path without trailing slash', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+    });
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos'];
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers(['/photos/image.jpg']);
+  });
+
+  it('should crawl a single path without recursion', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+      '/photos/subfolder/image1.jpg': '',
+      '/photos/subfolder/image2.jpg': '',
+      '/image1.jpg': '',
+    });
+
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/'];
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers(['/photos/image.jpg']);
+  });
+
+  it('should crawl a single path with recursion', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+      '/photos/subfolder/image1.jpg': '',
+      '/photos/subfolder/image2.jpg': '',
+      '/image1.jpg': '',
+    });
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/'];
+    options.recursive = true;
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers([
+      '/photos/image.jpg',
+      '/photos/subfolder/image1.jpg',
+      '/photos/subfolder/image2.jpg',
+    ]);
+  });
+
+  it('should filter file extensions', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+      '/photos/image.txt': '',
+      '/photos/1': '',
+    });
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/'];
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers(['/photos/image.jpg']);
+  });
+
+  it('should include photo and video extensions', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+      '/photos/image.jpeg': '',
+      '/photos/image.heic': '',
+      '/photos/image.heif': '',
+      '/photos/image.png': '',
+      '/photos/image.gif': '',
+      '/photos/image.tif': '',
+      '/photos/image.tiff': '',
+      '/photos/image.webp': '',
+      '/photos/image.dng': '',
+      '/photos/image.nef': '',
+      '/videos/video.mp4': '',
+      '/videos/video.mov': '',
+      '/videos/video.webm': '',
+    });
+
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/', '/videos/'];
+    const paths: string[] = await crawlService.crawl(options);
+
+    expect(paths).toIncludeSameMembers([
+      '/photos/image.jpg',
+      '/photos/image.jpeg',
+      '/photos/image.heic',
+      '/photos/image.heif',
+      '/photos/image.png',
+      '/photos/image.gif',
+      '/photos/image.tif',
+      '/photos/image.tiff',
+      '/photos/image.webp',
+      '/photos/image.dng',
+      '/photos/image.nef',
+      '/videos/video.mp4',
+      '/videos/video.mov',
+      '/videos/video.webm',
+    ]);
+  });
+
+  it('should check file extensions without case sensitivity', async () => {
+    mockfs({
+      '/photos/image.jpg': '',
+      '/photos/image.Jpg': '',
+      '/photos/image.jpG': '',
+      '/photos/image.JPG': '',
+      '/photos/image.jpEg': '',
+      '/photos/image.TIFF': '',
+      '/photos/image.tif': '',
+      '/photos/image.dng': '',
+      '/photos/image.NEF': '',
+    });
+
+    const options = new CrawlOptionsDto();
+    options.pathsToCrawl = ['/photos/'];
+    const paths: string[] = await crawlService.crawl(options);
+    expect(paths).toIncludeSameMembers([
+      '/photos/image.jpg',
+      '/photos/image.Jpg',
+      '/photos/image.jpG',
+      '/photos/image.JPG',
+      '/photos/image.jpEg',
+      '/photos/image.TIFF',
+      '/photos/image.tif',
+      '/photos/image.dng',
+      '/photos/image.NEF',
+    ]);
+  });
+
+  afterEach(() => {
+    mockfs.restore();
+  });
+});
diff --git a/cli/src/services/crawl.service.ts b/cli/src/services/crawl.service.ts
new file mode 100644
index 000000000..bb90a8d0a
--- /dev/null
+++ b/cli/src/services/crawl.service.ts
@@ -0,0 +1,47 @@
+import { CrawlOptionsDto } from 'src/cores/dto/crawl-options-dto';
+import { ACCEPTED_FILE_EXTENSIONS } from '../cores';
+import { glob } from 'glob';
+import * as fs from 'fs';
+
+export class CrawlService {
+  public async crawl(crawlOptions: CrawlOptionsDto): Promise<string[]> {
+    const pathsToCrawl: string[] = crawlOptions.pathsToCrawl;
+
+    const directories: string[] = [];
+    const crawledFiles: string[] = [];
+
+    for await (const currentPath of pathsToCrawl) {
+      const stats = await fs.promises.stat(currentPath);
+      if (stats.isFile() || stats.isSymbolicLink()) {
+        crawledFiles.push(currentPath);
+      } else {
+        directories.push(currentPath);
+      }
+    }
+
+    let searchPattern: string;
+    if (directories.length === 1) {
+      searchPattern = directories[0];
+    } else if (directories.length === 0) {
+      return crawledFiles;
+    } else {
+      searchPattern = '{' + directories.join(',') + '}';
+    }
+
+    if (crawlOptions.recursive) {
+      searchPattern = searchPattern + '/**/';
+    }
+
+    searchPattern = `${searchPattern}/*.{${ACCEPTED_FILE_EXTENSIONS.join(',')}}`;
+
+    const globbedFiles = await glob(searchPattern, {
+      nocase: true,
+      nodir: true,
+      ignore: crawlOptions.excludePatterns,
+    });
+
+    const returnedFiles = crawledFiles.concat(globbedFiles);
+    returnedFiles.sort();
+    return returnedFiles;
+  }
+}
diff --git a/cli/src/services/index.ts b/cli/src/services/index.ts
new file mode 100644
index 000000000..15aecfa27
--- /dev/null
+++ b/cli/src/services/index.ts
@@ -0,0 +1,2 @@
+export * from './upload.service';
+export * from './crawl.service';
diff --git a/cli/src/services/session.service.spec.ts b/cli/src/services/session.service.spec.ts
new file mode 100644
index 000000000..3d30691b0
--- /dev/null
+++ b/cli/src/services/session.service.spec.ts
@@ -0,0 +1,95 @@
+import { SessionService } from './session.service';
+import mockfs from 'mock-fs';
+import fs from 'node:fs';
+import yaml from 'yaml';
+import { LoginError } from '../cores/errors/login-error';
+
+const mockPingServer = jest.fn(() => Promise.resolve({ data: { res: 'pong' } }));
+const mockUserInfo = jest.fn(() => Promise.resolve({ data: { email: 'admin@example.com' } }));
+
+jest.mock('../api/open-api', () => {
+  return {
+    __esModule: true,
+    ...jest.requireActual('../api/open-api'),
+    UserApi: jest.fn().mockImplementation(() => {
+      return { getMyUserInfo: mockUserInfo };
+    }),
+    ServerInfoApi: jest.fn().mockImplementation(() => {
+      return { pingServer: mockPingServer };
+    }),
+  };
+});
+
+describe('SessionService', () => {
+  let sessionService: SessionService;
+  beforeAll(() => {
+    // Write a dummy output before mock-fs to prevent some annoying errors
+    console.log();
+  });
+
+  beforeEach(() => {
+    const configDir = '/config';
+    sessionService = new SessionService(configDir);
+  });
+
+  it('should connect to immich', async () => {
+    mockfs({
+      '/config/auth.yml': 'apiKey: pNussssKSYo5WasdgalvKJ1n9kdvaasdfbluPg\ninstanceUrl: https://test/api',
+    });
+    await sessionService.connect();
+    expect(mockPingServer).toHaveBeenCalledTimes(1);
+  });
+
+  it('should error if no auth file exists', async () => {
+    mockfs();
+    await sessionService.connect().catch((error) => {
+      expect(error.message).toEqual('No auth file exist. Please login first');
+    });
+  });
+
+  it('should error if auth file is missing instance URl', async () => {
+    mockfs({
+      '/config/auth.yml': 'foo: pNussssKSYo5WasdgalvKJ1n9kdvaasdfbluPg\napiKey: https://test/api',
+    });
+    await sessionService.connect().catch((error) => {
+      expect(error).toBeInstanceOf(LoginError);
+      expect(error.message).toEqual('Instance URL missing in auth config file /config/auth.yml');
+    });
+  });
+
+  it('should error if auth file is missing api key', async () => {
+    mockfs({
+      '/config/auth.yml': 'instanceUrl: pNussssKSYo5WasdgalvKJ1n9kdvaasdfbluPg\nbar: https://test/api',
+    });
+    await sessionService.connect().catch((error) => {
+      expect(error).toBeInstanceOf(LoginError);
+      expect(error.message).toEqual('API key missing in auth config file /config/auth.yml');
+    });
+  });
+
+  it('should create auth file when logged in', async () => {
+    mockfs();
+
+    await sessionService.keyLogin('https://test/api', 'pNussssKSYo5WasdgalvKJ1n9kdvaasdfbluPg');
+
+    const data: string = await fs.promises.readFile('/config/auth.yml', 'utf8');
+    const authConfig = yaml.parse(data);
+    expect(authConfig.instanceUrl).toBe('https://test/api');
+    expect(authConfig.apiKey).toBe('pNussssKSYo5WasdgalvKJ1n9kdvaasdfbluPg');
+  });
+
+  it('should delete auth file when logging out', async () => {
+    mockfs({
+      '/config/auth.yml': 'apiKey: pNussssKSYo5WasdgalvKJ1n9kdvaasdfbluPg\ninstanceUrl: https://test/api',
+    });
+    await sessionService.logout();
+
+    await fs.promises.access('/auth.yml', fs.constants.F_OK).catch((error) => {
+      expect(error.message).toContain('ENOENT');
+    });
+  });
+
+  afterEach(() => {
+    mockfs.restore();
+  });
+});
diff --git a/cli/src/services/session.service.ts b/cli/src/services/session.service.ts
new file mode 100644
index 000000000..7b0583d4d
--- /dev/null
+++ b/cli/src/services/session.service.ts
@@ -0,0 +1,81 @@
+import fs from 'node:fs';
+import yaml from 'yaml';
+import path from 'node:path';
+import { ImmichApi } from '../api/client';
+import { LoginError } from '../cores/errors/login-error';
+
+export class SessionService {
+  readonly configDir: string;
+  readonly authPath!: string;
+  private api!: ImmichApi;
+
+  constructor(configDir: string) {
+    this.configDir = configDir;
+    this.authPath = path.join(this.configDir, 'auth.yml');
+  }
+
+  public async connect(): Promise<ImmichApi> {
+    await fs.promises.access(this.authPath, fs.constants.F_OK).catch((error) => {
+      if (error.code === 'ENOENT') {
+        throw new LoginError('No auth file exist. Please login first');
+      }
+    });
+
+    const data: string = await fs.promises.readFile(this.authPath, 'utf8');
+    const parsedConfig = yaml.parse(data);
+    const instanceUrl: string = parsedConfig.instanceUrl;
+    const apiKey: string = parsedConfig.apiKey;
+
+    if (!instanceUrl) {
+      throw new LoginError('Instance URL missing in auth config file ' + this.authPath);
+    }
+
+    if (!apiKey) {
+      throw new LoginError('API key missing in auth config file ' + this.authPath);
+    }
+
+    this.api = new ImmichApi(instanceUrl, apiKey);
+
+    await this.ping();
+
+    return this.api;
+  }
+
+  public async keyLogin(instanceUrl: string, apiKey: string): Promise<ImmichApi> {
+    this.api = new ImmichApi(instanceUrl, apiKey);
+
+    // Check if server and api key are valid
+    const { data: userInfo } = await this.api.userApi.getMyUserInfo().catch((error) => {
+      throw new LoginError(`Failed to connect to the server: ${error.message}`);
+    });
+
+    console.log(`Logged in as ${userInfo.email}`);
+
+    if (!fs.existsSync(this.configDir)) {
+      // Create config folder if it doesn't exist
+      fs.mkdirSync(this.configDir, { recursive: true });
+    }
+
+    fs.writeFileSync(this.authPath, yaml.stringify({ instanceUrl, apiKey }));
+
+    console.log('Wrote auth info to ' + this.authPath);
+    return this.api;
+  }
+
+  public async logout(): Promise<void> {
+    if (fs.existsSync(this.authPath)) {
+      fs.unlinkSync(this.authPath);
+      console.log('Removed auth file ' + this.authPath);
+    }
+  }
+
+  private async ping(): Promise<void> {
+    const { data: pingResponse } = await this.api.serverInfoApi.pingServer().catch((error) => {
+      throw new Error(`Failed to connect to the server: ${error.message}`);
+    });
+
+    if (pingResponse.res !== 'pong') {
+      throw new Error('Unexpected ping reply');
+    }
+  }
+}
diff --git a/cli/src/services/upload.service.spec.ts b/cli/src/services/upload.service.spec.ts
new file mode 100644
index 000000000..9215a851c
--- /dev/null
+++ b/cli/src/services/upload.service.spec.ts
@@ -0,0 +1,36 @@
+import { UploadService } from './upload.service';
+import mockfs from 'mock-fs';
+import axios from 'axios';
+import mockAxios from 'jest-mock-axios';
+import FormData from 'form-data';
+import { ApiConfiguration } from '../cores/api-configuration';
+
+describe('UploadService', () => {
+  let uploadService: UploadService;
+
+  beforeAll(() => {
+    // Write a dummy output before mock-fs to prevent some annoying errors
+    console.log();
+  });
+
+  beforeEach(() => {
+    const apiConfiguration = new ApiConfiguration('https://example.com/api', 'key');
+
+    uploadService = new UploadService(apiConfiguration);
+  });
+
+  it('should upload a single file', async () => {
+    const data = new FormData();
+    data.append('assetType', 'image');
+
+    uploadService.upload(data);
+
+    mockAxios.mockResponse();
+    expect(axios).toHaveBeenCalled();
+  });
+
+  afterEach(() => {
+    mockfs.restore();
+    mockAxios.reset();
+  });
+});
diff --git a/cli/src/services/upload.service.ts b/cli/src/services/upload.service.ts
new file mode 100644
index 000000000..2549d83fb
--- /dev/null
+++ b/cli/src/services/upload.service.ts
@@ -0,0 +1,65 @@
+import axios, { AxiosRequestConfig } from 'axios';
+import FormData from 'form-data';
+import { ApiConfiguration } from '../cores/api-configuration';
+
+export class UploadService {
+  private readonly uploadConfig: AxiosRequestConfig<any>;
+  private readonly checkAssetExistenceConfig: AxiosRequestConfig<any>;
+  private readonly importConfig: AxiosRequestConfig<any>;
+
+  constructor(apiConfiguration: ApiConfiguration) {
+    this.uploadConfig = {
+      method: 'post',
+      maxRedirects: 0,
+      url: `${apiConfiguration.instanceUrl}/asset/upload`,
+      headers: {
+        'x-api-key': apiConfiguration.apiKey,
+      },
+      maxContentLength: Number.POSITIVE_INFINITY,
+      maxBodyLength: Number.POSITIVE_INFINITY,
+    };
+
+    this.importConfig = {
+      method: 'post',
+      maxRedirects: 0,
+      url: `${apiConfiguration.instanceUrl}/asset/import`,
+      headers: {
+        'x-api-key': apiConfiguration.apiKey,
+        'Content-Type': 'application/json',
+      },
+      maxContentLength: Number.POSITIVE_INFINITY,
+      maxBodyLength: Number.POSITIVE_INFINITY,
+    };
+
+    this.checkAssetExistenceConfig = {
+      method: 'post',
+      maxRedirects: 0,
+      url: `${apiConfiguration.instanceUrl}/asset/bulk-upload-check`,
+      headers: {
+        'x-api-key': apiConfiguration.apiKey,
+        'Content-Type': 'application/json',
+      },
+    };
+  }
+
+  public checkIfAssetAlreadyExists(path: string, checksum: string): Promise<any> {
+    this.checkAssetExistenceConfig.data = JSON.stringify({ assets: [{ id: path, checksum: checksum }] });
+
+    // TODO: retry on 500 errors?
+    return axios(this.checkAssetExistenceConfig);
+  }
+
+  public upload(data: FormData): Promise<any> {
+    this.uploadConfig.data = data;
+
+    // TODO: retry on 500 errors?
+    return axios(this.uploadConfig);
+  }
+
+  public import(data: any): Promise<any> {
+    this.importConfig.data = data;
+
+    // TODO: retry on 500 errors?
+    return axios(this.importConfig);
+  }
+}
diff --git a/cli/test/tsconfig.json b/cli/test/tsconfig.json
new file mode 100644
index 000000000..460cf368f
--- /dev/null
+++ b/cli/test/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "references": [{ "path": ".." }]
+}
diff --git a/cli/testSetup.js b/cli/testSetup.js
new file mode 100644
index 000000000..23a5890d1
--- /dev/null
+++ b/cli/testSetup.js
@@ -0,0 +1,3 @@
+// add all jest-extended matchers
+import * as matchers from 'jest-extended';
+expect.extend(matchers);
diff --git a/cli/tsconfig.json b/cli/tsconfig.json
new file mode 100644
index 000000000..0ef386a56
--- /dev/null
+++ b/cli/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "strict": true,
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "target": "es2017",
+    "moduleResolution": "node16",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "incremental": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "baseUrl": "./",
+    "paths": {
+      "@test": ["test"],
+      "@test/*": ["test/*"]
+    }
+  },
+  "exclude": ["dist", "node_modules", "upload"]
+}
diff --git a/server/bin/generate-open-api.sh b/server/bin/generate-open-api.sh
index c93f4f473..9989b3f63 100755
--- a/server/bin/generate-open-api.sh
+++ b/server/bin/generate-open-api.sh
@@ -23,11 +23,23 @@ function web {
   npx --yes @openapitools/openapi-generator-cli generate -g typescript-axios -i ./immich-openapi-specs.json -o ../web/src/api/open-api -t ./openapi-generator/templates/web --additional-properties=useSingleRequestParameter=true
 }
 
+function cli {
+  rm -rf ../cli/src/api/open-api
+  cd ./openapi-generator/templates/cli
+  wget -O apiInner.mustache https://raw.githubusercontent.com/OpenAPITools/openapi-generator/v6.6.0/modules/openapi-generator/src/main/resources/typescript-axios/apiInner.mustache
+  patch -u apiInner.mustache < apiInner.mustache.patch
+  cd ../../..
+  npx --yes @openapitools/openapi-generator-cli generate -g typescript-axios -i ./immich-openapi-specs.json -o ../cli/src/api/open-api -t ./openapi-generator/templates/cli --additional-properties=useSingleRequestParameter=true
+}
+
 if [[ $1 == 'mobile' ]]; then
   mobile
 elif [[ $1 == 'web' ]]; then
   web
+elif [[ $1 == 'cli' ]]; then
+  cli
 else
   mobile
   web
+  cli
 fi
diff --git a/server/openapi-generator/templates/cli/apiInner.mustache b/server/openapi-generator/templates/cli/apiInner.mustache
new file mode 100644
index 000000000..65bf74506
--- /dev/null
+++ b/server/openapi-generator/templates/cli/apiInner.mustache
@@ -0,0 +1,391 @@
+{{#withSeparateModelsAndApi}}
+/* tslint:disable */
+/* eslint-disable */
+{{>licenseInfo}}
+
+import type { Configuration } from '{{apiRelativeToRoot}}configuration';
+import type { AxiosPromise, AxiosInstance, AxiosRequestConfig } from 'axios';
+import globalAxios from 'axios';
+{{#withNodeImports}}
+// URLSearchParams not necessarily used
+// @ts-ignore
+import { URL, URLSearchParams } from 'url';
+{{#multipartFormData}}
+import FormData from 'form-data'
+{{/multipartFormData}}
+{{/withNodeImports}}
+// Some imports not used depending on template conditions
+// @ts-ignore
+import { DUMMY_BASE_URL, assertParamExists, setApiKeyToObject, setBasicAuthToObject, setBearerAuthToObject, setOAuthToObject, setSearchParams, serializeDataIfNeeded, toPathString, createRequestFunction } from '{{apiRelativeToRoot}}common';
+// @ts-ignore
+import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } from '{{apiRelativeToRoot}}base';
+{{#imports}}
+// @ts-ignore
+import { {{classname}} } from '{{apiRelativeToRoot}}{{tsModelPackage}}';
+{{/imports}}
+{{/withSeparateModelsAndApi}}
+{{^withSeparateModelsAndApi}}
+{{/withSeparateModelsAndApi}}
+{{#operations}}
+/**
+ * {{classname}} - axios parameter creator{{#description}}
+ * {{&description}}{{/description}}
+ * @export
+ */
+export const {{classname}}AxiosParamCreator = function (configuration?: Configuration) {
+    return {
+    {{#operation}}
+        /**
+         * {{&notes}}
+         {{#summary}}
+         * @summary {{&summary}}
+         {{/summary}}
+         {{#allParams}}
+         * @param {{=<% %>=}}{<%&dataType%>}<%={{ }}=%> {{^required}}[{{/required}}{{paramName}}{{^required}}]{{/required}} {{description}}
+         {{/allParams}}
+         * @param {*} [options] Override http request option.{{#isDeprecated}}
+         * @deprecated{{/isDeprecated}}
+         * @throws {RequiredError}
+         */
+        {{nickname}}: async ({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+    {{#allParams}}
+    {{#required}}
+            // verify required parameter '{{paramName}}' is not null or undefined
+            assertParamExists('{{nickname}}', '{{paramName}}', {{paramName}})
+    {{/required}}
+    {{/allParams}}
+            const localVarPath = `{{{path}}}`{{#pathParams}}
+                .replace(`{${"{{baseName}}"}}`, encodeURIComponent(String({{paramName}}))){{/pathParams}};
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: '{{httpMethod}}', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;{{#vendorExtensions}}{{#hasFormParams}}
+            const localVarFormParams = new {{^multipartFormData}}URLSearchParams(){{/multipartFormData}}{{#multipartFormData}}((configuration && configuration.formDataCtor) || FormData)(){{/multipartFormData}};{{/hasFormParams}}{{/vendorExtensions}}
+
+    {{#authMethods}}
+            // authentication {{name}} required
+            {{#isApiKey}}
+            {{#isKeyInHeader}}
+            await setApiKeyToObject(localVarHeaderParameter, "{{keyParamName}}", configuration)
+            {{/isKeyInHeader}}
+            {{#isKeyInQuery}}
+            await setApiKeyToObject(localVarQueryParameter, "{{keyParamName}}", configuration)
+            {{/isKeyInQuery}}
+            {{/isApiKey}}
+            {{#isBasicBasic}}
+            // http basic authentication required
+            setBasicAuthToObject(localVarRequestOptions, configuration)
+            {{/isBasicBasic}}
+            {{#isBasicBearer}}
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+            {{/isBasicBearer}}
+            {{#isOAuth}}
+            // oauth required
+            await setOAuthToObject(localVarHeaderParameter, "{{name}}", [{{#scopes}}"{{{scope}}}"{{^-last}}, {{/-last}}{{/scopes}}], configuration)
+            {{/isOAuth}}
+
+    {{/authMethods}}
+    {{#queryParams}}
+            {{#isArray}}
+            if ({{paramName}}) {
+            {{#isCollectionFormatMulti}}
+                {{#uniqueItems}}
+                localVarQueryParameter['{{baseName}}'] = Array.from({{paramName}});
+                {{/uniqueItems}}
+                {{^uniqueItems}}
+                localVarQueryParameter['{{baseName}}'] = {{paramName}};
+                {{/uniqueItems}}
+            {{/isCollectionFormatMulti}}
+            {{^isCollectionFormatMulti}}
+                {{#uniqueItems}}
+                localVarQueryParameter['{{baseName}}'] = Array.from({{paramName}}).join(COLLECTION_FORMATS.{{collectionFormat}});
+                {{/uniqueItems}}
+                {{^uniqueItems}}
+                localVarQueryParameter['{{baseName}}'] = {{paramName}}.join(COLLECTION_FORMATS.{{collectionFormat}});
+                {{/uniqueItems}}
+            {{/isCollectionFormatMulti}}
+            }
+            {{/isArray}}
+            {{^isArray}}
+            if ({{paramName}} !== undefined) {
+                {{#isDateTime}}
+                localVarQueryParameter['{{baseName}}'] = ({{paramName}} as any instanceof Date) ?
+                    ({{paramName}} as any).toISOString() :
+                    {{paramName}};
+                {{/isDateTime}}
+                {{^isDateTime}}
+                {{#isDate}}
+                localVarQueryParameter['{{baseName}}'] = ({{paramName}} as any instanceof Date) ?
+                    ({{paramName}} as any).toISOString().substr(0,10) :
+                    {{paramName}};
+                {{/isDate}}
+                {{^isDate}}
+                localVarQueryParameter['{{baseName}}'] = {{paramName}};
+                {{/isDate}}
+                {{/isDateTime}}
+            }
+            {{/isArray}}
+
+    {{/queryParams}}
+    {{#headerParams}}
+            {{#isArray}}
+            if ({{paramName}}) {
+                {{#uniqueItems}}
+                let mapped = Array.from({{paramName}}).map(value => (<any>"{{{dataType}}}" !== "Set<string>") ? JSON.stringify(value) : (value || ""));
+                {{/uniqueItems}}
+                {{^uniqueItems}}
+                let mapped = {{paramName}}.map(value => (<any>"{{{dataType}}}" !== "Array<string>") ? JSON.stringify(value) : (value || ""));
+                {{/uniqueItems}}
+                localVarHeaderParameter['{{baseName}}'] = mapped.join(COLLECTION_FORMATS["{{collectionFormat}}"]);
+            }
+            {{/isArray}}
+            {{^isArray}}
+            {{! `val == null` covers for both `null` and `undefined`}}
+            if ({{paramName}} != null) {
+                {{#isString}}
+                localVarHeaderParameter['{{baseName}}'] = String({{paramName}});
+                {{/isString}}
+                {{^isString}}
+                {{! isString is falsy also for $ref that defines a string or enum type}}
+                localVarHeaderParameter['{{baseName}}'] = typeof {{paramName}} === 'string' 
+                    ? {{paramName}} 
+                    : JSON.stringify({{paramName}});
+                {{/isString}}
+            }
+            {{/isArray}}
+
+    {{/headerParams}}
+    {{#vendorExtensions}}
+    {{#formParams}}
+            {{#isArray}}
+            if ({{paramName}}) {
+            {{#isCollectionFormatMulti}}
+                {{paramName}}.forEach((element) => {
+                    localVarFormParams.{{#multipartFormData}}append{{/multipartFormData}}{{^multipartFormData}}set{{/multipartFormData}}('{{baseName}}', element as any);
+                })
+            {{/isCollectionFormatMulti}}
+            {{^isCollectionFormatMulti}}
+                localVarFormParams.{{#multipartFormData}}append{{/multipartFormData}}{{^multipartFormData}}set{{/multipartFormData}}('{{baseName}}', {{paramName}}.join(COLLECTION_FORMATS.{{collectionFormat}}));
+            {{/isCollectionFormatMulti}}
+            }{{/isArray}}
+            {{^isArray}}
+            if ({{paramName}} !== undefined) { {{^multipartFormData}}
+                localVarFormParams.set('{{baseName}}', {{paramName}} as any);{{/multipartFormData}}{{#multipartFormData}}{{#isPrimitiveType}}
+                localVarFormParams.append('{{baseName}}', {{paramName}} as any);{{/isPrimitiveType}}{{^isPrimitiveType}}{{#isEnum}}
+                localVarFormParams.append('{{baseName}}', {{paramName}} as any);{{/isEnum}}{{^isEnum}}
+                localVarFormParams.append('{{baseName}}', new Blob([JSON.stringify({{paramName}})], { type: "application/json", }));{{/isEnum}}{{/isPrimitiveType}}{{/multipartFormData}}
+            }{{/isArray}}
+    {{/formParams}}{{/vendorExtensions}}
+    {{#vendorExtensions}}{{#hasFormParams}}{{^multipartFormData}}
+            localVarHeaderParameter['Content-Type'] = 'application/x-www-form-urlencoded';{{/multipartFormData}}{{#multipartFormData}}
+            localVarHeaderParameter['Content-Type'] = 'multipart/form-data';{{/multipartFormData}}
+    {{/hasFormParams}}{{/vendorExtensions}}
+    {{#bodyParam}}
+            {{^consumes}}
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+            {{/consumes}}
+            {{#consumes.0}}
+            localVarHeaderParameter['Content-Type'] = '{{{mediaType}}}';
+            {{/consumes.0}}
+
+    {{/bodyParam}}
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions,{{#hasFormParams}}{{#multipartFormData}} ...(localVarFormParams as any).getHeaders?.(),{{/multipartFormData}}{{/hasFormParams}} ...options.headers};
+    {{#hasFormParams}}
+            localVarRequestOptions.data = localVarFormParams{{#vendorExtensions}}{{^multipartFormData}}.toString(){{/multipartFormData}}{{/vendorExtensions}};
+    {{/hasFormParams}}
+    {{#bodyParam}}
+            localVarRequestOptions.data = serializeDataIfNeeded({{paramName}}, localVarRequestOptions, configuration)
+    {{/bodyParam}}
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    {{/operation}}
+    }
+};
+
+/**
+ * {{classname}} - functional programming interface{{#description}}
+ * {{{.}}}{{/description}}
+ * @export
+ */
+export const {{classname}}Fp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = {{classname}}AxiosParamCreator(configuration)
+    return {
+    {{#operation}}
+        /**
+         * {{&notes}}
+         {{#summary}}
+         * @summary {{&summary}}
+         {{/summary}}
+         {{#allParams}}
+         * @param {{=<% %>=}}{<%&dataType%>}<%={{ }}=%> {{^required}}[{{/required}}{{paramName}}{{^required}}]{{/required}} {{description}}
+         {{/allParams}}
+         * @param {*} [options] Override http request option.{{#isDeprecated}}
+         * @deprecated{{/isDeprecated}}
+         * @throws {RequiredError}
+         */
+        async {{nickname}}({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<{{{returnType}}}{{^returnType}}void{{/returnType}}>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.{{nickname}}({{#allParams}}{{paramName}}, {{/allParams}}options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    {{/operation}}
+    }
+};
+
+/**
+ * {{classname}} - factory interface{{#description}}
+ * {{&description}}{{/description}}
+ * @export
+ */
+export const {{classname}}Factory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = {{classname}}Fp(configuration)
+    return {
+    {{#operation}}
+        /**
+         * {{&notes}}
+         {{#summary}}
+         * @summary {{&summary}}
+         {{/summary}}
+        {{#useSingleRequestParameter}}
+         {{#allParams.0}}
+         * @param {{=<% %>=}}{<%& classname %><%& operationIdCamelCase %>Request}<%={{ }}=%> requestParameters Request parameters.
+         {{/allParams.0}}
+        {{/useSingleRequestParameter}}
+        {{^useSingleRequestParameter}}
+         {{#allParams}}
+         * @param {{=<% %>=}}{<%&dataType%>}<%={{ }}=%> {{^required}}[{{/required}}{{paramName}}{{^required}}]{{/required}} {{description}}
+         {{/allParams}}
+        {{/useSingleRequestParameter}}
+         * @param {*} [options] Override http request option.{{#isDeprecated}}
+         * @deprecated{{/isDeprecated}}
+         * @throws {RequiredError}
+         */
+        {{#useSingleRequestParameter}}
+        {{nickname}}({{#allParams.0}}requestParameters: {{classname}}{{operationIdCamelCase}}Request{{^hasRequiredParams}} = {}{{/hasRequiredParams}}, {{/allParams.0}}options?: AxiosRequestConfig): AxiosPromise<{{{returnType}}}{{^returnType}}void{{/returnType}}> {
+            return localVarFp.{{nickname}}({{#allParams.0}}{{#allParams}}requestParameters.{{paramName}}, {{/allParams}}{{/allParams.0}}options).then((request) => request(axios, basePath));
+        },
+        {{/useSingleRequestParameter}}
+        {{^useSingleRequestParameter}}
+        {{nickname}}({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options?: any): AxiosPromise<{{{returnType}}}{{^returnType}}void{{/returnType}}> {
+            return localVarFp.{{nickname}}({{#allParams}}{{paramName}}, {{/allParams}}options).then((request) => request(axios, basePath));
+        },
+        {{/useSingleRequestParameter}}
+    {{/operation}}
+    };
+};
+
+{{#withInterfaces}}
+/**
+ * {{classname}} - interface{{#description}}
+ * {{&description}}{{/description}}
+ * @export
+ * @interface {{classname}}
+ */
+export interface {{classname}}Interface {
+{{#operation}}
+    /**
+     * {{&notes}}
+     {{#summary}}
+     * @summary {{&summary}}
+     {{/summary}}
+     {{#allParams}}
+     * @param {{=<% %>=}}{<%&dataType%>}<%={{ }}=%> {{^required}}[{{/required}}{{paramName}}{{^required}}]{{/required}} {{description}}
+     {{/allParams}}
+     * @param {*} [options] Override http request option.{{#isDeprecated}}
+     * @deprecated{{/isDeprecated}}
+     * @throws {RequiredError}
+     * @memberof {{classname}}Interface
+     */
+    {{nickname}}({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options?: AxiosRequestConfig): AxiosPromise<{{{returnType}}}{{^returnType}}void{{/returnType}}>;
+
+{{/operation}}
+}
+
+{{/withInterfaces}}
+{{#useSingleRequestParameter}}
+{{#operation}}
+{{#allParams.0}}
+/**
+ * Request parameters for {{nickname}} operation in {{classname}}.
+ * @export
+ * @interface {{classname}}{{operationIdCamelCase}}Request
+ */
+export interface {{classname}}{{operationIdCamelCase}}Request {
+    {{#allParams}}
+    /**
+     * {{description}}
+     * @type {{=<% %>=}}{<%&dataType%>}<%={{ }}=%>
+     * @memberof {{classname}}{{operationIdCamelCase}}
+     */
+    readonly {{paramName}}{{^required}}?{{/required}}: {{{dataType}}}
+    {{^-last}}
+
+    {{/-last}}
+    {{/allParams}}
+}
+
+{{/allParams.0}}
+{{/operation}}
+{{/useSingleRequestParameter}}
+/**
+ * {{classname}} - object-oriented interface{{#description}}
+ * {{{.}}}{{/description}}
+ * @export
+ * @class {{classname}}
+ * @extends {BaseAPI}
+ */
+{{#withInterfaces}}
+export class {{classname}} extends BaseAPI implements {{classname}}Interface {
+{{/withInterfaces}}
+{{^withInterfaces}}
+export class {{classname}} extends BaseAPI {
+{{/withInterfaces}}
+    {{#operation}}
+    /**
+     * {{&notes}}
+     {{#summary}}
+     * @summary {{&summary}}
+     {{/summary}}
+     {{#useSingleRequestParameter}}
+     {{#allParams.0}}
+     * @param {{=<% %>=}}{<%& classname %><%& operationIdCamelCase %>Request}<%={{ }}=%> requestParameters Request parameters.
+     {{/allParams.0}}
+     {{/useSingleRequestParameter}}
+     {{^useSingleRequestParameter}}
+     {{#allParams}}
+     * @param {{=<% %>=}}{<%&dataType%>}<%={{ }}=%> {{^required}}[{{/required}}{{paramName}}{{^required}}]{{/required}} {{description}}
+     {{/allParams}}
+     {{/useSingleRequestParameter}}
+     * @param {*} [options] Override http request option.{{#isDeprecated}}
+     * @deprecated{{/isDeprecated}}
+     * @throws {RequiredError}
+     * @memberof {{classname}}
+     */
+    {{#useSingleRequestParameter}}
+    public {{nickname}}({{#allParams.0}}requestParameters: {{classname}}{{operationIdCamelCase}}Request{{^hasRequiredParams}} = {}{{/hasRequiredParams}}, {{/allParams.0}}options?: AxiosRequestConfig) {
+        return {{classname}}Fp(this.configuration).{{nickname}}({{#allParams.0}}{{#allParams}}requestParameters.{{paramName}}, {{/allParams}}{{/allParams.0}}options).then((request) => request(this.axios, this.basePath));
+    }
+    {{/useSingleRequestParameter}}
+    {{^useSingleRequestParameter}}
+    public {{nickname}}({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options?: AxiosRequestConfig) {
+        return {{classname}}Fp(this.configuration).{{nickname}}({{#allParams}}{{paramName}}, {{/allParams}}options).then((request) => request(this.axios, this.basePath));
+    }
+    {{/useSingleRequestParameter}}
+    {{^-last}}
+
+    {{/-last}}
+    {{/operation}}
+}
+{{/operations}}
diff --git a/server/openapi-generator/templates/cli/apiInner.mustache.orig b/server/openapi-generator/templates/cli/apiInner.mustache.orig
new file mode 100644
index 000000000..4cb65b7f1
--- /dev/null
+++ b/server/openapi-generator/templates/cli/apiInner.mustache.orig
@@ -0,0 +1,390 @@
+{{#withSeparateModelsAndApi}}
+/* tslint:disable */
+/* eslint-disable */
+{{>licenseInfo}}
+
+import type { Configuration } from '{{apiRelativeToRoot}}configuration';
+import type { AxiosPromise, AxiosInstance, AxiosRequestConfig } from 'axios';
+import globalAxios from 'axios';
+{{#withNodeImports}}
+// URLSearchParams not necessarily used
+// @ts-ignore
+import { URL, URLSearchParams } from 'url';
+{{#multipartFormData}}
+import FormData from 'form-data'
+{{/multipartFormData}}
+{{/withNodeImports}}
+// Some imports not used depending on template conditions
+// @ts-ignore
+import { DUMMY_BASE_URL, assertParamExists, setApiKeyToObject, setBasicAuthToObject, setBearerAuthToObject, setOAuthToObject, setSearchParams, serializeDataIfNeeded, toPathString, createRequestFunction } from '{{apiRelativeToRoot}}common';
+// @ts-ignore
+import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } from '{{apiRelativeToRoot}}base';
+{{#imports}}
+// @ts-ignore
+import { {{classname}} } from '{{apiRelativeToRoot}}{{tsModelPackage}}';
+{{/imports}}
+{{/withSeparateModelsAndApi}}
+{{^withSeparateModelsAndApi}}
+{{/withSeparateModelsAndApi}}
+{{#operations}}
+/**
+ * {{classname}} - axios parameter creator{{#description}}
+ * {{&description}}{{/description}}
+ * @export
+ */
+export const {{classname}}AxiosParamCreator = function (configuration?: Configuration) {
+    return {
+    {{#operation}}
+        /**
+         * {{&notes}}
+         {{#summary}}
+         * @summary {{&summary}}
+         {{/summary}}
+         {{#allParams}}
+         * @param {{=<% %>=}}{<%&dataType%>}<%={{ }}=%> {{^required}}[{{/required}}{{paramName}}{{^required}}]{{/required}} {{description}}
+         {{/allParams}}
+         * @param {*} [options] Override http request option.{{#isDeprecated}}
+         * @deprecated{{/isDeprecated}}
+         * @throws {RequiredError}
+         */
+        {{nickname}}: async ({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+    {{#allParams}}
+    {{#required}}
+            // verify required parameter '{{paramName}}' is not null or undefined
+            assertParamExists('{{nickname}}', '{{paramName}}', {{paramName}})
+    {{/required}}
+    {{/allParams}}
+            const localVarPath = `{{{path}}}`{{#pathParams}}
+                .replace(`{${"{{baseName}}"}}`, encodeURIComponent(String({{paramName}}))){{/pathParams}};
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: '{{httpMethod}}', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;{{#vendorExtensions}}{{#hasFormParams}}
+            const localVarFormParams = new {{^multipartFormData}}URLSearchParams(){{/multipartFormData}}{{#multipartFormData}}((configuration && configuration.formDataCtor) || FormData)(){{/multipartFormData}};{{/hasFormParams}}{{/vendorExtensions}}
+
+    {{#authMethods}}
+            // authentication {{name}} required
+            {{#isApiKey}}
+            {{#isKeyInHeader}}
+            await setApiKeyToObject(localVarHeaderParameter, "{{keyParamName}}", configuration)
+            {{/isKeyInHeader}}
+            {{#isKeyInQuery}}
+            await setApiKeyToObject(localVarQueryParameter, "{{keyParamName}}", configuration)
+            {{/isKeyInQuery}}
+            {{/isApiKey}}
+            {{#isBasicBasic}}
+            // http basic authentication required
+            setBasicAuthToObject(localVarRequestOptions, configuration)
+            {{/isBasicBasic}}
+            {{#isBasicBearer}}
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+            {{/isBasicBearer}}
+            {{#isOAuth}}
+            // oauth required
+            await setOAuthToObject(localVarHeaderParameter, "{{name}}", [{{#scopes}}"{{{scope}}}"{{^-last}}, {{/-last}}{{/scopes}}], configuration)
+            {{/isOAuth}}
+
+    {{/authMethods}}
+    {{#queryParams}}
+            {{#isArray}}
+            if ({{paramName}}) {
+            {{#isCollectionFormatMulti}}
+                {{#uniqueItems}}
+                localVarQueryParameter['{{baseName}}'] = Array.from({{paramName}});
+                {{/uniqueItems}}
+                {{^uniqueItems}}
+                localVarQueryParameter['{{baseName}}'] = {{paramName}};
+                {{/uniqueItems}}
+            {{/isCollectionFormatMulti}}
+            {{^isCollectionFormatMulti}}
+                {{#uniqueItems}}
+                localVarQueryParameter['{{baseName}}'] = Array.from({{paramName}}).join(COLLECTION_FORMATS.{{collectionFormat}});
+                {{/uniqueItems}}
+                {{^uniqueItems}}
+                localVarQueryParameter['{{baseName}}'] = {{paramName}}.join(COLLECTION_FORMATS.{{collectionFormat}});
+                {{/uniqueItems}}
+            {{/isCollectionFormatMulti}}
+            }
+            {{/isArray}}
+            {{^isArray}}
+            if ({{paramName}} !== undefined) {
+                {{#isDateTime}}
+                localVarQueryParameter['{{baseName}}'] = ({{paramName}} as any instanceof Date) ?
+                    ({{paramName}} as any).toISOString() :
+                    {{paramName}};
+                {{/isDateTime}}
+                {{^isDateTime}}
+                {{#isDate}}
+                localVarQueryParameter['{{baseName}}'] = ({{paramName}} as any instanceof Date) ?
+                    ({{paramName}} as any).toISOString().substr(0,10) :
+                    {{paramName}};
+                {{/isDate}}
+                {{^isDate}}
+                localVarQueryParameter['{{baseName}}'] = {{paramName}};
+                {{/isDate}}
+                {{/isDateTime}}
+            }
+            {{/isArray}}
+
+    {{/queryParams}}
+    {{#headerParams}}
+            {{#isArray}}
+            if ({{paramName}}) {
+                {{#uniqueItems}}
+                let mapped = Array.from({{paramName}}).map(value => (<any>"{{{dataType}}}" !== "Set<string>") ? JSON.stringify(value) : (value || ""));
+                {{/uniqueItems}}
+                {{^uniqueItems}}
+                let mapped = {{paramName}}.map(value => (<any>"{{{dataType}}}" !== "Array<string>") ? JSON.stringify(value) : (value || ""));
+                {{/uniqueItems}}
+                localVarHeaderParameter['{{baseName}}'] = mapped.join(COLLECTION_FORMATS["{{collectionFormat}}"]);
+            }
+            {{/isArray}}
+            {{^isArray}}
+            {{! `val == null` covers for both `null` and `undefined`}}
+            if ({{paramName}} != null) {
+                {{#isString}}
+                localVarHeaderParameter['{{baseName}}'] = String({{paramName}});
+                {{/isString}}
+                {{^isString}}
+                {{! isString is falsy also for $ref that defines a string or enum type}}
+                localVarHeaderParameter['{{baseName}}'] = typeof {{paramName}} === 'string' 
+                    ? {{paramName}} 
+                    : JSON.stringify({{paramName}});
+                {{/isString}}
+            }
+            {{/isArray}}
+
+    {{/headerParams}}
+    {{#vendorExtensions}}
+    {{#formParams}}
+            {{#isArray}}
+            if ({{paramName}}) {
+            {{#isCollectionFormatMulti}}
+                {{paramName}}.forEach((element) => {
+                    localVarFormParams.{{#multipartFormData}}append{{/multipartFormData}}{{^multipartFormData}}set{{/multipartFormData}}('{{baseName}}', element as any);
+                })
+            {{/isCollectionFormatMulti}}
+            {{^isCollectionFormatMulti}}
+                localVarFormParams.{{#multipartFormData}}append{{/multipartFormData}}{{^multipartFormData}}set{{/multipartFormData}}('{{baseName}}', {{paramName}}.join(COLLECTION_FORMATS.{{collectionFormat}}));
+            {{/isCollectionFormatMulti}}
+            }{{/isArray}}
+            {{^isArray}}
+            if ({{paramName}} !== undefined) { {{^multipartFormData}}
+                localVarFormParams.set('{{baseName}}', {{paramName}} as any);{{/multipartFormData}}{{#multipartFormData}}{{#isPrimitiveType}}
+                localVarFormParams.append('{{baseName}}', {{paramName}} as any);{{/isPrimitiveType}}{{^isPrimitiveType}}
+                localVarFormParams.append('{{baseName}}', new Blob([JSON.stringify({{paramName}})], { type: "application/json", }));{{/isPrimitiveType}}{{/multipartFormData}}
+            }{{/isArray}}
+    {{/formParams}}{{/vendorExtensions}}
+    {{#vendorExtensions}}{{#hasFormParams}}{{^multipartFormData}}
+            localVarHeaderParameter['Content-Type'] = 'application/x-www-form-urlencoded';{{/multipartFormData}}{{#multipartFormData}}
+            localVarHeaderParameter['Content-Type'] = 'multipart/form-data';{{/multipartFormData}}
+    {{/hasFormParams}}{{/vendorExtensions}}
+    {{#bodyParam}}
+            {{^consumes}}
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+            {{/consumes}}
+            {{#consumes.0}}
+            localVarHeaderParameter['Content-Type'] = '{{{mediaType}}}';
+            {{/consumes.0}}
+
+    {{/bodyParam}}
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions,{{#hasFormParams}}{{#multipartFormData}} ...(localVarFormParams as any).getHeaders?.(),{{/multipartFormData}}{{/hasFormParams}} ...options.headers};
+    {{#hasFormParams}}
+            localVarRequestOptions.data = localVarFormParams{{#vendorExtensions}}{{^multipartFormData}}.toString(){{/multipartFormData}}{{/vendorExtensions}};
+    {{/hasFormParams}}
+    {{#bodyParam}}
+            localVarRequestOptions.data = serializeDataIfNeeded({{paramName}}, localVarRequestOptions, configuration)
+    {{/bodyParam}}
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    {{/operation}}
+    }
+};
+
+/**
+ * {{classname}} - functional programming interface{{#description}}
+ * {{{.}}}{{/description}}
+ * @export
+ */
+export const {{classname}}Fp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = {{classname}}AxiosParamCreator(configuration)
+    return {
+    {{#operation}}
+        /**
+         * {{&notes}}
+         {{#summary}}
+         * @summary {{&summary}}
+         {{/summary}}
+         {{#allParams}}
+         * @param {{=<% %>=}}{<%&dataType%>}<%={{ }}=%> {{^required}}[{{/required}}{{paramName}}{{^required}}]{{/required}} {{description}}
+         {{/allParams}}
+         * @param {*} [options] Override http request option.{{#isDeprecated}}
+         * @deprecated{{/isDeprecated}}
+         * @throws {RequiredError}
+         */
+        async {{nickname}}({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<{{{returnType}}}{{^returnType}}void{{/returnType}}>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.{{nickname}}({{#allParams}}{{paramName}}, {{/allParams}}options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    {{/operation}}
+    }
+};
+
+/**
+ * {{classname}} - factory interface{{#description}}
+ * {{&description}}{{/description}}
+ * @export
+ */
+export const {{classname}}Factory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = {{classname}}Fp(configuration)
+    return {
+    {{#operation}}
+        /**
+         * {{&notes}}
+         {{#summary}}
+         * @summary {{&summary}}
+         {{/summary}}
+        {{#useSingleRequestParameter}}
+         {{#allParams.0}}
+         * @param {{=<% %>=}}{<%& classname %><%& operationIdCamelCase %>Request}<%={{ }}=%> requestParameters Request parameters.
+         {{/allParams.0}}
+        {{/useSingleRequestParameter}}
+        {{^useSingleRequestParameter}}
+         {{#allParams}}
+         * @param {{=<% %>=}}{<%&dataType%>}<%={{ }}=%> {{^required}}[{{/required}}{{paramName}}{{^required}}]{{/required}} {{description}}
+         {{/allParams}}
+        {{/useSingleRequestParameter}}
+         * @param {*} [options] Override http request option.{{#isDeprecated}}
+         * @deprecated{{/isDeprecated}}
+         * @throws {RequiredError}
+         */
+        {{#useSingleRequestParameter}}
+        {{nickname}}({{#allParams.0}}requestParameters: {{classname}}{{operationIdCamelCase}}Request{{^hasRequiredParams}} = {}{{/hasRequiredParams}}, {{/allParams.0}}options?: AxiosRequestConfig): AxiosPromise<{{{returnType}}}{{^returnType}}void{{/returnType}}> {
+            return localVarFp.{{nickname}}({{#allParams.0}}{{#allParams}}requestParameters.{{paramName}}, {{/allParams}}{{/allParams.0}}options).then((request) => request(axios, basePath));
+        },
+        {{/useSingleRequestParameter}}
+        {{^useSingleRequestParameter}}
+        {{nickname}}({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options?: any): AxiosPromise<{{{returnType}}}{{^returnType}}void{{/returnType}}> {
+            return localVarFp.{{nickname}}({{#allParams}}{{paramName}}, {{/allParams}}options).then((request) => request(axios, basePath));
+        },
+        {{/useSingleRequestParameter}}
+    {{/operation}}
+    };
+};
+
+{{#withInterfaces}}
+/**
+ * {{classname}} - interface{{#description}}
+ * {{&description}}{{/description}}
+ * @export
+ * @interface {{classname}}
+ */
+export interface {{classname}}Interface {
+{{#operation}}
+    /**
+     * {{&notes}}
+     {{#summary}}
+     * @summary {{&summary}}
+     {{/summary}}
+     {{#allParams}}
+     * @param {{=<% %>=}}{<%&dataType%>}<%={{ }}=%> {{^required}}[{{/required}}{{paramName}}{{^required}}]{{/required}} {{description}}
+     {{/allParams}}
+     * @param {*} [options] Override http request option.{{#isDeprecated}}
+     * @deprecated{{/isDeprecated}}
+     * @throws {RequiredError}
+     * @memberof {{classname}}Interface
+     */
+    {{nickname}}({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options?: AxiosRequestConfig): AxiosPromise<{{{returnType}}}{{^returnType}}void{{/returnType}}>;
+
+{{/operation}}
+}
+
+{{/withInterfaces}}
+{{#useSingleRequestParameter}}
+{{#operation}}
+{{#allParams.0}}
+/**
+ * Request parameters for {{nickname}} operation in {{classname}}.
+ * @export
+ * @interface {{classname}}{{operationIdCamelCase}}Request
+ */
+export interface {{classname}}{{operationIdCamelCase}}Request {
+    {{#allParams}}
+    /**
+     * {{description}}
+     * @type {{=<% %>=}}{<%&dataType%>}<%={{ }}=%>
+     * @memberof {{classname}}{{operationIdCamelCase}}
+     */
+    readonly {{paramName}}{{^required}}?{{/required}}: {{{dataType}}}
+    {{^-last}}
+
+    {{/-last}}
+    {{/allParams}}
+}
+
+{{/allParams.0}}
+{{/operation}}
+{{/useSingleRequestParameter}}
+/**
+ * {{classname}} - object-oriented interface{{#description}}
+ * {{{.}}}{{/description}}
+ * @export
+ * @class {{classname}}
+ * @extends {BaseAPI}
+ */
+{{#withInterfaces}}
+export class {{classname}} extends BaseAPI implements {{classname}}Interface {
+{{/withInterfaces}}
+{{^withInterfaces}}
+export class {{classname}} extends BaseAPI {
+{{/withInterfaces}}
+    {{#operation}}
+    /**
+     * {{&notes}}
+     {{#summary}}
+     * @summary {{&summary}}
+     {{/summary}}
+     {{#useSingleRequestParameter}}
+     {{#allParams.0}}
+     * @param {{=<% %>=}}{<%& classname %><%& operationIdCamelCase %>Request}<%={{ }}=%> requestParameters Request parameters.
+     {{/allParams.0}}
+     {{/useSingleRequestParameter}}
+     {{^useSingleRequestParameter}}
+     {{#allParams}}
+     * @param {{=<% %>=}}{<%&dataType%>}<%={{ }}=%> {{^required}}[{{/required}}{{paramName}}{{^required}}]{{/required}} {{description}}
+     {{/allParams}}
+     {{/useSingleRequestParameter}}
+     * @param {*} [options] Override http request option.{{#isDeprecated}}
+     * @deprecated{{/isDeprecated}}
+     * @throws {RequiredError}
+     * @memberof {{classname}}
+     */
+    {{#useSingleRequestParameter}}
+    public {{nickname}}({{#allParams.0}}requestParameters: {{classname}}{{operationIdCamelCase}}Request{{^hasRequiredParams}} = {}{{/hasRequiredParams}}, {{/allParams.0}}options?: AxiosRequestConfig) {
+        return {{classname}}Fp(this.configuration).{{nickname}}({{#allParams.0}}{{#allParams}}requestParameters.{{paramName}}, {{/allParams}}{{/allParams.0}}options).then((request) => request(this.axios, this.basePath));
+    }
+    {{/useSingleRequestParameter}}
+    {{^useSingleRequestParameter}}
+    public {{nickname}}({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options?: AxiosRequestConfig) {
+        return {{classname}}Fp(this.configuration).{{nickname}}({{#allParams}}{{paramName}}, {{/allParams}}options).then((request) => request(this.axios, this.basePath));
+    }
+    {{/useSingleRequestParameter}}
+    {{^-last}}
+
+    {{/-last}}
+    {{/operation}}
+}
+{{/operations}}
diff --git a/server/openapi-generator/templates/cli/apiInner.mustache.patch b/server/openapi-generator/templates/cli/apiInner.mustache.patch
new file mode 100644
index 000000000..99963da62
--- /dev/null
+++ b/server/openapi-generator/templates/cli/apiInner.mustache.patch
@@ -0,0 +1,14 @@
+--- apiInner.mustache   2023-02-10 17:44:20.945845049 +0000
++++ apiInner.mustache.patch     2023-02-10 17:46:28.669054112 +0000
+@@ -173,8 +173,9 @@
+             {{^isArray}}
+             if ({{paramName}} !== undefined) { {{^multipartFormData}}
+                 localVarFormParams.set('{{baseName}}', {{paramName}} as any);{{/multipartFormData}}{{#multipartFormData}}{{#isPrimitiveType}}
+-                localVarFormParams.append('{{baseName}}', {{paramName}} as any);{{/isPrimitiveType}}{{^isPrimitiveType}}
+-                localVarFormParams.append('{{baseName}}', new Blob([JSON.stringify({{paramName}})], { type: "application/json", }));{{/isPrimitiveType}}{{/multipartFormData}}
++                localVarFormParams.append('{{baseName}}', {{paramName}} as any);{{/isPrimitiveType}}{{^isPrimitiveType}}{{#isEnum}}
++                localVarFormParams.append('{{baseName}}', {{paramName}} as any);{{/isEnum}}{{^isEnum}}
++                localVarFormParams.append('{{baseName}}', new Blob([JSON.stringify({{paramName}})], { type: "application/json", }));{{/isEnum}}{{/isPrimitiveType}}{{/multipartFormData}}
+             }{{/isArray}}
+     {{/formParams}}{{/vendorExtensions}}
+     {{#vendorExtensions}}{{#hasFormParams}}{{^multipartFormData}}

From 3cc77d945b476db5e8bc24c8235bb99b7ef34186 Mon Sep 17 00:00:00 2001
From: Mert <101130780+mertalev@users.noreply.github.com>
Date: Thu, 6 Jul 2023 11:27:21 -0400
Subject: [PATCH 46/53] fix(server): use thumbnail content type instead of
 application/octet-stream (#3075)

* asset mimetype instead of application/octet-stream

* use thumbnail mimetype instead

* narrowed openapi spec

* thumbnail format validation

* JPEG fallback, `getThumbnailPath` returns format

* return content type in `getThumbnailPath`

* moved `format` validation to dto

* removed unused import

* moved fallback warning
---
 mobile/openapi/doc/AssetApi.md                      |  2 +-
 mobile/openapi/doc/PersonApi.md                     |  2 +-
 server/immich-openapi-specs.json                    | 10 ++++++++--
 server/src/immich/api-v1/asset/asset.controller.ts  |  4 +---
 server/src/immich/api-v1/asset/asset.service.ts     | 13 +++++++------
 .../api-v1/asset/dto/get-asset-thumbnail.dto.ts     |  3 ++-
 server/src/immich/controllers/person.controller.ts  |  3 +--
 7 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/mobile/openapi/doc/AssetApi.md b/mobile/openapi/doc/AssetApi.md
index 319deb2ac..c71b4151d 100644
--- a/mobile/openapi/doc/AssetApi.md
+++ b/mobile/openapi/doc/AssetApi.md
@@ -822,7 +822,7 @@ Name | Type | Description  | Notes
 ### HTTP request headers
 
  - **Content-Type**: Not defined
- - **Accept**: application/octet-stream
+ - **Accept**: image/jpeg, image/webp
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
diff --git a/mobile/openapi/doc/PersonApi.md b/mobile/openapi/doc/PersonApi.md
index dd1c0eb8e..aa37a294e 100644
--- a/mobile/openapi/doc/PersonApi.md
+++ b/mobile/openapi/doc/PersonApi.md
@@ -228,7 +228,7 @@ Name | Type | Description  | Notes
 ### HTTP request headers
 
  - **Content-Type**: Not defined
- - **Accept**: application/octet-stream
+ - **Accept**: image/jpeg
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
diff --git a/server/immich-openapi-specs.json b/server/immich-openapi-specs.json
index caae449e2..5f664730f 100644
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@@ -1673,7 +1673,13 @@
         "responses": {
           "200": {
             "content": {
-              "application/octet-stream": {
+              "image/jpeg": {
+                "schema": {
+                  "type": "string",
+                  "format": "binary"
+                }
+              },
+              "image/webp": {
                 "schema": {
                   "type": "string",
                   "format": "binary"
@@ -2704,7 +2710,7 @@
         "responses": {
           "200": {
             "content": {
-              "application/octet-stream": {
+              "image/jpeg": {
                 "schema": {
                   "type": "string",
                   "format": "binary"
diff --git a/server/src/immich/api-v1/asset/asset.controller.ts b/server/src/immich/api-v1/asset/asset.controller.ts
index c2d3e6b39..7cd93bd7e 100644
--- a/server/src/immich/api-v1/asset/asset.controller.ts
+++ b/server/src/immich/api-v1/asset/asset.controller.ts
@@ -19,7 +19,7 @@ import {
   ValidationPipe,
 } from '@nestjs/common';
 import { FileFieldsInterceptor } from '@nestjs/platform-express';
-import { ApiBody, ApiConsumes, ApiHeader, ApiOkResponse, ApiTags } from '@nestjs/swagger';
+import { ApiBody, ApiConsumes, ApiHeader, ApiTags } from '@nestjs/swagger';
 import { Response as Res } from 'express';
 import { Authenticated, AuthUser, SharedLinkRoute } from '../../app.guard';
 import { assetUploadOption, ImmichFile } from '../../config/asset-upload.config';
@@ -122,7 +122,6 @@ export class AssetController {
   @SharedLinkRoute()
   @Get('/file/:id')
   @Header('Cache-Control', 'private, max-age=86400, no-transform')
-  @ApiOkResponse({ content: { 'application/octet-stream': { schema: { type: 'string', format: 'binary' } } } })
   serveFile(
     @AuthUser() authUser: AuthUserDto,
     @Headers() headers: Record<string, string>,
@@ -136,7 +135,6 @@ export class AssetController {
   @SharedLinkRoute()
   @Get('/thumbnail/:id')
   @Header('Cache-Control', 'private, max-age=86400, no-transform')
-  @ApiOkResponse({ content: { 'application/octet-stream': { schema: { type: 'string', format: 'binary' } } } })
   getAssetThumbnail(
     @AuthUser() authUser: AuthUserDto,
     @Headers() headers: Record<string, string>,
diff --git a/server/src/immich/api-v1/asset/asset.service.ts b/server/src/immich/api-v1/asset/asset.service.ts
index 0a1ee8e0e..26c0ca7bb 100644
--- a/server/src/immich/api-v1/asset/asset.service.ts
+++ b/server/src/immich/api-v1/asset/asset.service.ts
@@ -256,8 +256,8 @@ export class AssetService {
     }
 
     try {
-      const thumbnailPath = this.getThumbnailPath(asset, query.format);
-      return this.streamFile(thumbnailPath, res, headers);
+      const [thumbnailPath, contentType] = this.getThumbnailPath(asset, query.format);
+      return this.streamFile(thumbnailPath, res, headers, contentType);
     } catch (e) {
       res.header('Cache-Control', 'none');
       this.logger.error(`Cannot create read stream for asset ${asset.id}`, 'getAssetThumbnail');
@@ -522,16 +522,17 @@ export class AssetService {
   private getThumbnailPath(asset: AssetEntity, format: GetAssetThumbnailFormatEnum) {
     switch (format) {
       case GetAssetThumbnailFormatEnum.WEBP:
-        if (asset.webpPath && asset.webpPath.length > 0) {
-          return asset.webpPath;
+        if (asset.webpPath) {
+          return [asset.webpPath, 'image/webp'];
         }
+        this.logger.warn(`WebP thumbnail requested but not found for asset ${asset.id}, falling back to JPEG`);
 
       case GetAssetThumbnailFormatEnum.JPEG:
       default:
         if (!asset.resizePath) {
-          throw new NotFoundException('resizePath not set');
+          throw new NotFoundException(`No thumbnail found for asset ${asset.id}`);
         }
-        return asset.resizePath;
+        return [asset.resizePath, 'image/jpeg'];
     }
   }
 
diff --git a/server/src/immich/api-v1/asset/dto/get-asset-thumbnail.dto.ts b/server/src/immich/api-v1/asset/dto/get-asset-thumbnail.dto.ts
index 5a8dc0687..ad0e755d6 100644
--- a/server/src/immich/api-v1/asset/dto/get-asset-thumbnail.dto.ts
+++ b/server/src/immich/api-v1/asset/dto/get-asset-thumbnail.dto.ts
@@ -1,5 +1,5 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { IsOptional } from 'class-validator';
+import { IsEnum, IsOptional } from 'class-validator';
 
 export enum GetAssetThumbnailFormatEnum {
   JPEG = 'JPEG',
@@ -8,6 +8,7 @@ export enum GetAssetThumbnailFormatEnum {
 
 export class GetAssetThumbnailDto {
   @IsOptional()
+  @IsEnum(GetAssetThumbnailFormatEnum)
   @ApiProperty({
     type: String,
     enum: GetAssetThumbnailFormatEnum,
diff --git a/server/src/immich/controllers/person.controller.ts b/server/src/immich/controllers/person.controller.ts
index 575230459..2e8135161 100644
--- a/server/src/immich/controllers/person.controller.ts
+++ b/server/src/immich/controllers/person.controller.ts
@@ -7,7 +7,7 @@ import {
   PersonUpdateDto,
 } from '@app/domain';
 import { Body, Controller, Get, Param, Put, StreamableFile } from '@nestjs/common';
-import { ApiOkResponse, ApiTags } from '@nestjs/swagger';
+import { ApiTags } from '@nestjs/swagger';
 import { Authenticated, AuthUser } from '../app.guard';
 import { UseValidation } from '../app.utils';
 import { UUIDParamDto } from './dto/uuid-param.dto';
@@ -43,7 +43,6 @@ export class PersonController {
   }
 
   @Get(':id/thumbnail')
-  @ApiOkResponse({ content: { 'application/octet-stream': { schema: { type: 'string', format: 'binary' } } } })
   getPersonThumbnail(@AuthUser() authUser: AuthUserDto, @Param() { id }: UUIDParamDto) {
     return this.service.getThumbnail(authUser, id).then(asStreamableFile);
   }

From 852ef3cd1b7556e52ed7dcf5ec8e11abf80d19d9 Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Thu, 6 Jul 2023 16:56:02 -0500
Subject: [PATCH 47/53] chore(server): update openapi

---
 cli/src/api/open-api/api.ts              | 24 ++++++++++++-------
 cli/src/api/open-api/base.ts             |  2 +-
 cli/src/api/open-api/common.ts           |  2 +-
 cli/src/api/open-api/configuration.ts    |  2 +-
 cli/src/api/open-api/index.ts            |  2 +-
 mobile/openapi/doc/AssetApi.md           | 18 +++++++-------
 mobile/openapi/doc/PersonApi.md          |  9 ++++---
 mobile/openapi/lib/api/asset_api.dart    | 20 ++--------------
 mobile/openapi/lib/api/person_api.dart   | 10 +-------
 mobile/openapi/test/asset_api_test.dart  |  4 ++--
 mobile/openapi/test/person_api_test.dart |  2 +-
 server/immich-openapi-specs.json         | 30 ------------------------
 web/src/api/open-api/api.ts              | 12 +++++-----
 13 files changed, 43 insertions(+), 94 deletions(-)

diff --git a/cli/src/api/open-api/api.ts b/cli/src/api/open-api/api.ts
index 246d633c9..737d72da3 100644
--- a/cli/src/api/open-api/api.ts
+++ b/cli/src/api/open-api/api.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.65.0
+ * The version of the OpenAPI document: 1.66.1
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
@@ -1772,11 +1772,17 @@ export interface PersonResponseDto {
  */
 export interface PersonUpdateDto {
     /**
-     * 
+     * Person name.
      * @type {string}
      * @memberof PersonUpdateDto
      */
-    'name': string;
+    'name'?: string;
+    /**
+     * Asset is used to get the feature face thumbnail.
+     * @type {string}
+     * @memberof PersonUpdateDto
+     */
+    'featureFaceAssetId'?: string;
 }
 /**
  * 
@@ -5889,7 +5895,7 @@ export const AssetApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+        async getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetThumbnail(id, format, key, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -5986,7 +5992,7 @@ export const AssetApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+        async serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.serveFile(id, isThumb, isWeb, key, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -6155,7 +6161,7 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        getAssetThumbnail(requestParameters: AssetApiGetAssetThumbnailRequest, options?: AxiosRequestConfig): AxiosPromise<File> {
+        getAssetThumbnail(requestParameters: AssetApiGetAssetThumbnailRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
             return localVarFp.getAssetThumbnail(requestParameters.id, requestParameters.format, requestParameters.key, options).then((request) => request(axios, basePath));
         },
         /**
@@ -6234,7 +6240,7 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        serveFile(requestParameters: AssetApiServeFileRequest, options?: AxiosRequestConfig): AxiosPromise<File> {
+        serveFile(requestParameters: AssetApiServeFileRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
             return localVarFp.serveFile(requestParameters.id, requestParameters.isThumb, requestParameters.isWeb, requestParameters.key, options).then((request) => request(axios, basePath));
         },
         /**
@@ -8862,7 +8868,7 @@ export const PersonApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getPersonThumbnail(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+        async getPersonThumbnail(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.getPersonThumbnail(id, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -8919,7 +8925,7 @@ export const PersonApiFactory = function (configuration?: Configuration, basePat
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        getPersonThumbnail(requestParameters: PersonApiGetPersonThumbnailRequest, options?: AxiosRequestConfig): AxiosPromise<File> {
+        getPersonThumbnail(requestParameters: PersonApiGetPersonThumbnailRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
             return localVarFp.getPersonThumbnail(requestParameters.id, options).then((request) => request(axios, basePath));
         },
         /**
diff --git a/cli/src/api/open-api/base.ts b/cli/src/api/open-api/base.ts
index 724f10503..3281535e5 100644
--- a/cli/src/api/open-api/base.ts
+++ b/cli/src/api/open-api/base.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.65.0
+ * The version of the OpenAPI document: 1.66.1
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/cli/src/api/open-api/common.ts b/cli/src/api/open-api/common.ts
index e9e8c41f5..c9fda5ed7 100644
--- a/cli/src/api/open-api/common.ts
+++ b/cli/src/api/open-api/common.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.65.0
+ * The version of the OpenAPI document: 1.66.1
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/cli/src/api/open-api/configuration.ts b/cli/src/api/open-api/configuration.ts
index 9dad93679..1a74d526b 100644
--- a/cli/src/api/open-api/configuration.ts
+++ b/cli/src/api/open-api/configuration.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.65.0
+ * The version of the OpenAPI document: 1.66.1
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/cli/src/api/open-api/index.ts b/cli/src/api/open-api/index.ts
index 7183d73c6..1243cc241 100644
--- a/cli/src/api/open-api/index.ts
+++ b/cli/src/api/open-api/index.ts
@@ -4,7 +4,7 @@
  * Immich
  * Immich API
  *
- * The version of the OpenAPI document: 1.65.0
+ * The version of the OpenAPI document: 1.66.1
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
diff --git a/mobile/openapi/doc/AssetApi.md b/mobile/openapi/doc/AssetApi.md
index c71b4151d..41f4e2e02 100644
--- a/mobile/openapi/doc/AssetApi.md
+++ b/mobile/openapi/doc/AssetApi.md
@@ -768,7 +768,7 @@ This endpoint does not need any parameter.
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
 # **getAssetThumbnail**
-> MultipartFile getAssetThumbnail(id, format, key)
+> getAssetThumbnail(id, format, key)
 
 
 
@@ -796,8 +796,7 @@ final format = ; // ThumbnailFormat |
 final key = key_example; // String | 
 
 try {
-    final result = api_instance.getAssetThumbnail(id, format, key);
-    print(result);
+    api_instance.getAssetThumbnail(id, format, key);
 } catch (e) {
     print('Exception when calling AssetApi->getAssetThumbnail: $e\n');
 }
@@ -813,7 +812,7 @@ Name | Type | Description  | Notes
 
 ### Return type
 
-[**MultipartFile**](MultipartFile.md)
+void (empty response body)
 
 ### Authorization
 
@@ -822,7 +821,7 @@ Name | Type | Description  | Notes
 ### HTTP request headers
 
  - **Content-Type**: Not defined
- - **Accept**: image/jpeg, image/webp
+ - **Accept**: Not defined
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
@@ -1273,7 +1272,7 @@ Name | Type | Description  | Notes
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
 # **serveFile**
-> MultipartFile serveFile(id, isThumb, isWeb, key)
+> serveFile(id, isThumb, isWeb, key)
 
 
 
@@ -1302,8 +1301,7 @@ final isWeb = true; // bool |
 final key = key_example; // String | 
 
 try {
-    final result = api_instance.serveFile(id, isThumb, isWeb, key);
-    print(result);
+    api_instance.serveFile(id, isThumb, isWeb, key);
 } catch (e) {
     print('Exception when calling AssetApi->serveFile: $e\n');
 }
@@ -1320,7 +1318,7 @@ Name | Type | Description  | Notes
 
 ### Return type
 
-[**MultipartFile**](MultipartFile.md)
+void (empty response body)
 
 ### Authorization
 
@@ -1329,7 +1327,7 @@ Name | Type | Description  | Notes
 ### HTTP request headers
 
  - **Content-Type**: Not defined
- - **Accept**: application/octet-stream
+ - **Accept**: Not defined
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
diff --git a/mobile/openapi/doc/PersonApi.md b/mobile/openapi/doc/PersonApi.md
index aa37a294e..ca35880dd 100644
--- a/mobile/openapi/doc/PersonApi.md
+++ b/mobile/openapi/doc/PersonApi.md
@@ -178,7 +178,7 @@ Name | Type | Description  | Notes
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
 # **getPersonThumbnail**
-> MultipartFile getPersonThumbnail(id)
+> getPersonThumbnail(id)
 
 
 
@@ -204,8 +204,7 @@ final api_instance = PersonApi();
 final id = 38400000-8cf0-11bd-b23e-10b96e4ef00d; // String | 
 
 try {
-    final result = api_instance.getPersonThumbnail(id);
-    print(result);
+    api_instance.getPersonThumbnail(id);
 } catch (e) {
     print('Exception when calling PersonApi->getPersonThumbnail: $e\n');
 }
@@ -219,7 +218,7 @@ Name | Type | Description  | Notes
 
 ### Return type
 
-[**MultipartFile**](MultipartFile.md)
+void (empty response body)
 
 ### Authorization
 
@@ -228,7 +227,7 @@ Name | Type | Description  | Notes
 ### HTTP request headers
 
  - **Content-Type**: Not defined
- - **Accept**: image/jpeg
+ - **Accept**: Not defined
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
diff --git a/mobile/openapi/lib/api/asset_api.dart b/mobile/openapi/lib/api/asset_api.dart
index a73ec3b1e..94394f020 100644
--- a/mobile/openapi/lib/api/asset_api.dart
+++ b/mobile/openapi/lib/api/asset_api.dart
@@ -772,19 +772,11 @@ class AssetApi {
   /// * [ThumbnailFormat] format:
   ///
   /// * [String] key:
-  Future<MultipartFile?> getAssetThumbnail(String id, { ThumbnailFormat? format, String? key, }) async {
+  Future<void> getAssetThumbnail(String id, { ThumbnailFormat? format, String? key, }) async {
     final response = await getAssetThumbnailWithHttpInfo(id,  format: format, key: key, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
-    // When a remote server returns no body with a status of 204, we shall not decode it.
-    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
-    // FormatException when trying to decode an empty string.
-    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
-      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MultipartFile',) as MultipartFile;
-    
-    }
-    return null;
   }
 
   /// Performs an HTTP 'GET /asset/curated-locations' operation and returns the [Response].
@@ -1284,19 +1276,11 @@ class AssetApi {
   /// * [bool] isWeb:
   ///
   /// * [String] key:
-  Future<MultipartFile?> serveFile(String id, { bool? isThumb, bool? isWeb, String? key, }) async {
+  Future<void> serveFile(String id, { bool? isThumb, bool? isWeb, String? key, }) async {
     final response = await serveFileWithHttpInfo(id,  isThumb: isThumb, isWeb: isWeb, key: key, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
-    // When a remote server returns no body with a status of 204, we shall not decode it.
-    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
-    // FormatException when trying to decode an empty string.
-    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
-      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MultipartFile',) as MultipartFile;
-    
-    }
-    return null;
   }
 
   /// Update an asset
diff --git a/mobile/openapi/lib/api/person_api.dart b/mobile/openapi/lib/api/person_api.dart
index 37f8bf8a3..a27c5845f 100644
--- a/mobile/openapi/lib/api/person_api.dart
+++ b/mobile/openapi/lib/api/person_api.dart
@@ -192,19 +192,11 @@ class PersonApi {
   /// Parameters:
   ///
   /// * [String] id (required):
-  Future<MultipartFile?> getPersonThumbnail(String id,) async {
+  Future<void> getPersonThumbnail(String id,) async {
     final response = await getPersonThumbnailWithHttpInfo(id,);
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
-    // When a remote server returns no body with a status of 204, we shall not decode it.
-    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
-    // FormatException when trying to decode an empty string.
-    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
-      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MultipartFile',) as MultipartFile;
-    
-    }
-    return null;
   }
 
   /// Performs an HTTP 'PUT /person/{id}' operation and returns the [Response].
diff --git a/mobile/openapi/test/asset_api_test.dart b/mobile/openapi/test/asset_api_test.dart
index 1c5f08536..003956969 100644
--- a/mobile/openapi/test/asset_api_test.dart
+++ b/mobile/openapi/test/asset_api_test.dart
@@ -92,7 +92,7 @@ void main() {
       // TODO
     });
 
-    //Future<MultipartFile> getAssetThumbnail(String id, { ThumbnailFormat format, String key }) async
+    //Future getAssetThumbnail(String id, { ThumbnailFormat format, String key }) async
     test('test getAssetThumbnail', () async {
       // TODO
     });
@@ -139,7 +139,7 @@ void main() {
       // TODO
     });
 
-    //Future<MultipartFile> serveFile(String id, { bool isThumb, bool isWeb, String key }) async
+    //Future serveFile(String id, { bool isThumb, bool isWeb, String key }) async
     test('test serveFile', () async {
       // TODO
     });
diff --git a/mobile/openapi/test/person_api_test.dart b/mobile/openapi/test/person_api_test.dart
index 33e78b8a7..956ec138d 100644
--- a/mobile/openapi/test/person_api_test.dart
+++ b/mobile/openapi/test/person_api_test.dart
@@ -32,7 +32,7 @@ void main() {
       // TODO
     });
 
-    //Future<MultipartFile> getPersonThumbnail(String id) async
+    //Future getPersonThumbnail(String id) async
     test('test getPersonThumbnail', () async {
       // TODO
     });
diff --git a/server/immich-openapi-specs.json b/server/immich-openapi-specs.json
index 5f664730f..3e74a64c6 100644
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@@ -1351,14 +1351,6 @@
         ],
         "responses": {
           "200": {
-            "content": {
-              "application/octet-stream": {
-                "schema": {
-                  "type": "string",
-                  "format": "binary"
-                }
-              }
-            },
             "description": ""
           }
         },
@@ -1672,20 +1664,6 @@
         ],
         "responses": {
           "200": {
-            "content": {
-              "image/jpeg": {
-                "schema": {
-                  "type": "string",
-                  "format": "binary"
-                }
-              },
-              "image/webp": {
-                "schema": {
-                  "type": "string",
-                  "format": "binary"
-                }
-              }
-            },
             "description": ""
           }
         },
@@ -2709,14 +2687,6 @@
         ],
         "responses": {
           "200": {
-            "content": {
-              "image/jpeg": {
-                "schema": {
-                  "type": "string",
-                  "format": "binary"
-                }
-              }
-            },
             "description": ""
           }
         },
diff --git a/web/src/api/open-api/api.ts b/web/src/api/open-api/api.ts
index c1a8f7f22..72b41daa7 100644
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -5904,7 +5904,7 @@ export const AssetApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+        async getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetThumbnail(id, format, key, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -6001,7 +6001,7 @@ export const AssetApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+        async serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.serveFile(id, isThumb, isWeb, key, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -6181,7 +6181,7 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: any): AxiosPromise<File> {
+        getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: any): AxiosPromise<void> {
             return localVarFp.getAssetThumbnail(id, format, key, options).then((request) => request(axios, basePath));
         },
         /**
@@ -6269,7 +6269,7 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: any): AxiosPromise<File> {
+        serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: any): AxiosPromise<void> {
             return localVarFp.serveFile(id, isThumb, isWeb, key, options).then((request) => request(axios, basePath));
         },
         /**
@@ -8913,7 +8913,7 @@ export const PersonApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getPersonThumbnail(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+        async getPersonThumbnail(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.getPersonThumbnail(id, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -8970,7 +8970,7 @@ export const PersonApiFactory = function (configuration?: Configuration, basePat
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        getPersonThumbnail(id: string, options?: any): AxiosPromise<File> {
+        getPersonThumbnail(id: string, options?: any): AxiosPromise<void> {
             return localVarFp.getPersonThumbnail(id, options).then((request) => request(axios, basePath));
         },
         /**

From 812cb3d940d632c3f0e72be50a59b608abf3293a Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 6 Jul 2023 17:25:56 -0500
Subject: [PATCH 48/53] Revert "fix(server): use thumbnail content type instead
 of application/octet-stream (#3075)" (#3134)

* Revert "fix(server): use thumbnail content type instead of application/octet-stream (#3075)"

This reverts commit 3cc77d945b476db5e8bc24c8235bb99b7ef34186.

* generate api
---
 cli/src/api/open-api/api.ts                   | 12 +++++-----
 mobile/openapi/doc/AssetApi.md                | 18 +++++++-------
 mobile/openapi/doc/PersonApi.md               |  9 +++----
 mobile/openapi/lib/api/asset_api.dart         | 20 ++++++++++++++--
 mobile/openapi/lib/api/person_api.dart        | 10 +++++++-
 mobile/openapi/test/asset_api_test.dart       |  4 ++--
 mobile/openapi/test/person_api_test.dart      |  2 +-
 server/immich-openapi-specs.json              | 24 +++++++++++++++++++
 .../immich/api-v1/asset/asset.controller.ts   |  4 +++-
 .../src/immich/api-v1/asset/asset.service.ts  | 13 +++++-----
 .../asset/dto/get-asset-thumbnail.dto.ts      |  3 +--
 .../immich/controllers/person.controller.ts   |  3 ++-
 web/src/api/open-api/api.ts                   | 12 +++++-----
 13 files changed, 93 insertions(+), 41 deletions(-)

diff --git a/cli/src/api/open-api/api.ts b/cli/src/api/open-api/api.ts
index 737d72da3..277d676da 100644
--- a/cli/src/api/open-api/api.ts
+++ b/cli/src/api/open-api/api.ts
@@ -5895,7 +5895,7 @@ export const AssetApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+        async getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetThumbnail(id, format, key, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -5992,7 +5992,7 @@ export const AssetApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+        async serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.serveFile(id, isThumb, isWeb, key, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -6161,7 +6161,7 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        getAssetThumbnail(requestParameters: AssetApiGetAssetThumbnailRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
+        getAssetThumbnail(requestParameters: AssetApiGetAssetThumbnailRequest, options?: AxiosRequestConfig): AxiosPromise<File> {
             return localVarFp.getAssetThumbnail(requestParameters.id, requestParameters.format, requestParameters.key, options).then((request) => request(axios, basePath));
         },
         /**
@@ -6240,7 +6240,7 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        serveFile(requestParameters: AssetApiServeFileRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
+        serveFile(requestParameters: AssetApiServeFileRequest, options?: AxiosRequestConfig): AxiosPromise<File> {
             return localVarFp.serveFile(requestParameters.id, requestParameters.isThumb, requestParameters.isWeb, requestParameters.key, options).then((request) => request(axios, basePath));
         },
         /**
@@ -8868,7 +8868,7 @@ export const PersonApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getPersonThumbnail(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+        async getPersonThumbnail(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.getPersonThumbnail(id, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -8925,7 +8925,7 @@ export const PersonApiFactory = function (configuration?: Configuration, basePat
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        getPersonThumbnail(requestParameters: PersonApiGetPersonThumbnailRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
+        getPersonThumbnail(requestParameters: PersonApiGetPersonThumbnailRequest, options?: AxiosRequestConfig): AxiosPromise<File> {
             return localVarFp.getPersonThumbnail(requestParameters.id, options).then((request) => request(axios, basePath));
         },
         /**
diff --git a/mobile/openapi/doc/AssetApi.md b/mobile/openapi/doc/AssetApi.md
index 41f4e2e02..319deb2ac 100644
--- a/mobile/openapi/doc/AssetApi.md
+++ b/mobile/openapi/doc/AssetApi.md
@@ -768,7 +768,7 @@ This endpoint does not need any parameter.
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
 # **getAssetThumbnail**
-> getAssetThumbnail(id, format, key)
+> MultipartFile getAssetThumbnail(id, format, key)
 
 
 
@@ -796,7 +796,8 @@ final format = ; // ThumbnailFormat |
 final key = key_example; // String | 
 
 try {
-    api_instance.getAssetThumbnail(id, format, key);
+    final result = api_instance.getAssetThumbnail(id, format, key);
+    print(result);
 } catch (e) {
     print('Exception when calling AssetApi->getAssetThumbnail: $e\n');
 }
@@ -812,7 +813,7 @@ Name | Type | Description  | Notes
 
 ### Return type
 
-void (empty response body)
+[**MultipartFile**](MultipartFile.md)
 
 ### Authorization
 
@@ -821,7 +822,7 @@ void (empty response body)
 ### HTTP request headers
 
  - **Content-Type**: Not defined
- - **Accept**: Not defined
+ - **Accept**: application/octet-stream
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
@@ -1272,7 +1273,7 @@ Name | Type | Description  | Notes
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
 # **serveFile**
-> serveFile(id, isThumb, isWeb, key)
+> MultipartFile serveFile(id, isThumb, isWeb, key)
 
 
 
@@ -1301,7 +1302,8 @@ final isWeb = true; // bool |
 final key = key_example; // String | 
 
 try {
-    api_instance.serveFile(id, isThumb, isWeb, key);
+    final result = api_instance.serveFile(id, isThumb, isWeb, key);
+    print(result);
 } catch (e) {
     print('Exception when calling AssetApi->serveFile: $e\n');
 }
@@ -1318,7 +1320,7 @@ Name | Type | Description  | Notes
 
 ### Return type
 
-void (empty response body)
+[**MultipartFile**](MultipartFile.md)
 
 ### Authorization
 
@@ -1327,7 +1329,7 @@ void (empty response body)
 ### HTTP request headers
 
  - **Content-Type**: Not defined
- - **Accept**: Not defined
+ - **Accept**: application/octet-stream
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
diff --git a/mobile/openapi/doc/PersonApi.md b/mobile/openapi/doc/PersonApi.md
index ca35880dd..dd1c0eb8e 100644
--- a/mobile/openapi/doc/PersonApi.md
+++ b/mobile/openapi/doc/PersonApi.md
@@ -178,7 +178,7 @@ Name | Type | Description  | Notes
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
 # **getPersonThumbnail**
-> getPersonThumbnail(id)
+> MultipartFile getPersonThumbnail(id)
 
 
 
@@ -204,7 +204,8 @@ final api_instance = PersonApi();
 final id = 38400000-8cf0-11bd-b23e-10b96e4ef00d; // String | 
 
 try {
-    api_instance.getPersonThumbnail(id);
+    final result = api_instance.getPersonThumbnail(id);
+    print(result);
 } catch (e) {
     print('Exception when calling PersonApi->getPersonThumbnail: $e\n');
 }
@@ -218,7 +219,7 @@ Name | Type | Description  | Notes
 
 ### Return type
 
-void (empty response body)
+[**MultipartFile**](MultipartFile.md)
 
 ### Authorization
 
@@ -227,7 +228,7 @@ void (empty response body)
 ### HTTP request headers
 
  - **Content-Type**: Not defined
- - **Accept**: Not defined
+ - **Accept**: application/octet-stream
 
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
 
diff --git a/mobile/openapi/lib/api/asset_api.dart b/mobile/openapi/lib/api/asset_api.dart
index 94394f020..a73ec3b1e 100644
--- a/mobile/openapi/lib/api/asset_api.dart
+++ b/mobile/openapi/lib/api/asset_api.dart
@@ -772,11 +772,19 @@ class AssetApi {
   /// * [ThumbnailFormat] format:
   ///
   /// * [String] key:
-  Future<void> getAssetThumbnail(String id, { ThumbnailFormat? format, String? key, }) async {
+  Future<MultipartFile?> getAssetThumbnail(String id, { ThumbnailFormat? format, String? key, }) async {
     final response = await getAssetThumbnailWithHttpInfo(id,  format: format, key: key, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
+    // When a remote server returns no body with a status of 204, we shall not decode it.
+    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
+    // FormatException when trying to decode an empty string.
+    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
+      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MultipartFile',) as MultipartFile;
+    
+    }
+    return null;
   }
 
   /// Performs an HTTP 'GET /asset/curated-locations' operation and returns the [Response].
@@ -1276,11 +1284,19 @@ class AssetApi {
   /// * [bool] isWeb:
   ///
   /// * [String] key:
-  Future<void> serveFile(String id, { bool? isThumb, bool? isWeb, String? key, }) async {
+  Future<MultipartFile?> serveFile(String id, { bool? isThumb, bool? isWeb, String? key, }) async {
     final response = await serveFileWithHttpInfo(id,  isThumb: isThumb, isWeb: isWeb, key: key, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
+    // When a remote server returns no body with a status of 204, we shall not decode it.
+    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
+    // FormatException when trying to decode an empty string.
+    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
+      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MultipartFile',) as MultipartFile;
+    
+    }
+    return null;
   }
 
   /// Update an asset
diff --git a/mobile/openapi/lib/api/person_api.dart b/mobile/openapi/lib/api/person_api.dart
index a27c5845f..37f8bf8a3 100644
--- a/mobile/openapi/lib/api/person_api.dart
+++ b/mobile/openapi/lib/api/person_api.dart
@@ -192,11 +192,19 @@ class PersonApi {
   /// Parameters:
   ///
   /// * [String] id (required):
-  Future<void> getPersonThumbnail(String id,) async {
+  Future<MultipartFile?> getPersonThumbnail(String id,) async {
     final response = await getPersonThumbnailWithHttpInfo(id,);
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
+    // When a remote server returns no body with a status of 204, we shall not decode it.
+    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
+    // FormatException when trying to decode an empty string.
+    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
+      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MultipartFile',) as MultipartFile;
+    
+    }
+    return null;
   }
 
   /// Performs an HTTP 'PUT /person/{id}' operation and returns the [Response].
diff --git a/mobile/openapi/test/asset_api_test.dart b/mobile/openapi/test/asset_api_test.dart
index 003956969..1c5f08536 100644
--- a/mobile/openapi/test/asset_api_test.dart
+++ b/mobile/openapi/test/asset_api_test.dart
@@ -92,7 +92,7 @@ void main() {
       // TODO
     });
 
-    //Future getAssetThumbnail(String id, { ThumbnailFormat format, String key }) async
+    //Future<MultipartFile> getAssetThumbnail(String id, { ThumbnailFormat format, String key }) async
     test('test getAssetThumbnail', () async {
       // TODO
     });
@@ -139,7 +139,7 @@ void main() {
       // TODO
     });
 
-    //Future serveFile(String id, { bool isThumb, bool isWeb, String key }) async
+    //Future<MultipartFile> serveFile(String id, { bool isThumb, bool isWeb, String key }) async
     test('test serveFile', () async {
       // TODO
     });
diff --git a/mobile/openapi/test/person_api_test.dart b/mobile/openapi/test/person_api_test.dart
index 956ec138d..33e78b8a7 100644
--- a/mobile/openapi/test/person_api_test.dart
+++ b/mobile/openapi/test/person_api_test.dart
@@ -32,7 +32,7 @@ void main() {
       // TODO
     });
 
-    //Future getPersonThumbnail(String id) async
+    //Future<MultipartFile> getPersonThumbnail(String id) async
     test('test getPersonThumbnail', () async {
       // TODO
     });
diff --git a/server/immich-openapi-specs.json b/server/immich-openapi-specs.json
index 3e74a64c6..caae449e2 100644
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@@ -1351,6 +1351,14 @@
         ],
         "responses": {
           "200": {
+            "content": {
+              "application/octet-stream": {
+                "schema": {
+                  "type": "string",
+                  "format": "binary"
+                }
+              }
+            },
             "description": ""
           }
         },
@@ -1664,6 +1672,14 @@
         ],
         "responses": {
           "200": {
+            "content": {
+              "application/octet-stream": {
+                "schema": {
+                  "type": "string",
+                  "format": "binary"
+                }
+              }
+            },
             "description": ""
           }
         },
@@ -2687,6 +2703,14 @@
         ],
         "responses": {
           "200": {
+            "content": {
+              "application/octet-stream": {
+                "schema": {
+                  "type": "string",
+                  "format": "binary"
+                }
+              }
+            },
             "description": ""
           }
         },
diff --git a/server/src/immich/api-v1/asset/asset.controller.ts b/server/src/immich/api-v1/asset/asset.controller.ts
index 7cd93bd7e..c2d3e6b39 100644
--- a/server/src/immich/api-v1/asset/asset.controller.ts
+++ b/server/src/immich/api-v1/asset/asset.controller.ts
@@ -19,7 +19,7 @@ import {
   ValidationPipe,
 } from '@nestjs/common';
 import { FileFieldsInterceptor } from '@nestjs/platform-express';
-import { ApiBody, ApiConsumes, ApiHeader, ApiTags } from '@nestjs/swagger';
+import { ApiBody, ApiConsumes, ApiHeader, ApiOkResponse, ApiTags } from '@nestjs/swagger';
 import { Response as Res } from 'express';
 import { Authenticated, AuthUser, SharedLinkRoute } from '../../app.guard';
 import { assetUploadOption, ImmichFile } from '../../config/asset-upload.config';
@@ -122,6 +122,7 @@ export class AssetController {
   @SharedLinkRoute()
   @Get('/file/:id')
   @Header('Cache-Control', 'private, max-age=86400, no-transform')
+  @ApiOkResponse({ content: { 'application/octet-stream': { schema: { type: 'string', format: 'binary' } } } })
   serveFile(
     @AuthUser() authUser: AuthUserDto,
     @Headers() headers: Record<string, string>,
@@ -135,6 +136,7 @@ export class AssetController {
   @SharedLinkRoute()
   @Get('/thumbnail/:id')
   @Header('Cache-Control', 'private, max-age=86400, no-transform')
+  @ApiOkResponse({ content: { 'application/octet-stream': { schema: { type: 'string', format: 'binary' } } } })
   getAssetThumbnail(
     @AuthUser() authUser: AuthUserDto,
     @Headers() headers: Record<string, string>,
diff --git a/server/src/immich/api-v1/asset/asset.service.ts b/server/src/immich/api-v1/asset/asset.service.ts
index 26c0ca7bb..0a1ee8e0e 100644
--- a/server/src/immich/api-v1/asset/asset.service.ts
+++ b/server/src/immich/api-v1/asset/asset.service.ts
@@ -256,8 +256,8 @@ export class AssetService {
     }
 
     try {
-      const [thumbnailPath, contentType] = this.getThumbnailPath(asset, query.format);
-      return this.streamFile(thumbnailPath, res, headers, contentType);
+      const thumbnailPath = this.getThumbnailPath(asset, query.format);
+      return this.streamFile(thumbnailPath, res, headers);
     } catch (e) {
       res.header('Cache-Control', 'none');
       this.logger.error(`Cannot create read stream for asset ${asset.id}`, 'getAssetThumbnail');
@@ -522,17 +522,16 @@ export class AssetService {
   private getThumbnailPath(asset: AssetEntity, format: GetAssetThumbnailFormatEnum) {
     switch (format) {
       case GetAssetThumbnailFormatEnum.WEBP:
-        if (asset.webpPath) {
-          return [asset.webpPath, 'image/webp'];
+        if (asset.webpPath && asset.webpPath.length > 0) {
+          return asset.webpPath;
         }
-        this.logger.warn(`WebP thumbnail requested but not found for asset ${asset.id}, falling back to JPEG`);
 
       case GetAssetThumbnailFormatEnum.JPEG:
       default:
         if (!asset.resizePath) {
-          throw new NotFoundException(`No thumbnail found for asset ${asset.id}`);
+          throw new NotFoundException('resizePath not set');
         }
-        return [asset.resizePath, 'image/jpeg'];
+        return asset.resizePath;
     }
   }
 
diff --git a/server/src/immich/api-v1/asset/dto/get-asset-thumbnail.dto.ts b/server/src/immich/api-v1/asset/dto/get-asset-thumbnail.dto.ts
index ad0e755d6..5a8dc0687 100644
--- a/server/src/immich/api-v1/asset/dto/get-asset-thumbnail.dto.ts
+++ b/server/src/immich/api-v1/asset/dto/get-asset-thumbnail.dto.ts
@@ -1,5 +1,5 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { IsEnum, IsOptional } from 'class-validator';
+import { IsOptional } from 'class-validator';
 
 export enum GetAssetThumbnailFormatEnum {
   JPEG = 'JPEG',
@@ -8,7 +8,6 @@ export enum GetAssetThumbnailFormatEnum {
 
 export class GetAssetThumbnailDto {
   @IsOptional()
-  @IsEnum(GetAssetThumbnailFormatEnum)
   @ApiProperty({
     type: String,
     enum: GetAssetThumbnailFormatEnum,
diff --git a/server/src/immich/controllers/person.controller.ts b/server/src/immich/controllers/person.controller.ts
index 2e8135161..575230459 100644
--- a/server/src/immich/controllers/person.controller.ts
+++ b/server/src/immich/controllers/person.controller.ts
@@ -7,7 +7,7 @@ import {
   PersonUpdateDto,
 } from '@app/domain';
 import { Body, Controller, Get, Param, Put, StreamableFile } from '@nestjs/common';
-import { ApiTags } from '@nestjs/swagger';
+import { ApiOkResponse, ApiTags } from '@nestjs/swagger';
 import { Authenticated, AuthUser } from '../app.guard';
 import { UseValidation } from '../app.utils';
 import { UUIDParamDto } from './dto/uuid-param.dto';
@@ -43,6 +43,7 @@ export class PersonController {
   }
 
   @Get(':id/thumbnail')
+  @ApiOkResponse({ content: { 'application/octet-stream': { schema: { type: 'string', format: 'binary' } } } })
   getPersonThumbnail(@AuthUser() authUser: AuthUserDto, @Param() { id }: UUIDParamDto) {
     return this.service.getThumbnail(authUser, id).then(asStreamableFile);
   }
diff --git a/web/src/api/open-api/api.ts b/web/src/api/open-api/api.ts
index 72b41daa7..c1a8f7f22 100644
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -5904,7 +5904,7 @@ export const AssetApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+        async getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetThumbnail(id, format, key, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -6001,7 +6001,7 @@ export const AssetApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+        async serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.serveFile(id, isThumb, isWeb, key, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -6181,7 +6181,7 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: any): AxiosPromise<void> {
+        getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: any): AxiosPromise<File> {
             return localVarFp.getAssetThumbnail(id, format, key, options).then((request) => request(axios, basePath));
         },
         /**
@@ -6269,7 +6269,7 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: any): AxiosPromise<void> {
+        serveFile(id: string, isThumb?: boolean, isWeb?: boolean, key?: string, options?: any): AxiosPromise<File> {
             return localVarFp.serveFile(id, isThumb, isWeb, key, options).then((request) => request(axios, basePath));
         },
         /**
@@ -8913,7 +8913,7 @@ export const PersonApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getPersonThumbnail(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+        async getPersonThumbnail(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.getPersonThumbnail(id, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -8970,7 +8970,7 @@ export const PersonApiFactory = function (configuration?: Configuration, basePat
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        getPersonThumbnail(id: string, options?: any): AxiosPromise<void> {
+        getPersonThumbnail(id: string, options?: any): AxiosPromise<File> {
             return localVarFp.getPersonThumbnail(id, options).then((request) => request(axios, basePath));
         },
         /**

From 6588bb3d7925eded4a79703781acbac3e11f8ff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jordi=20Altay=C3=B3?= <jordialtayo@gmail.com>
Date: Fri, 7 Jul 2023 00:28:59 +0200
Subject: [PATCH 49/53] Add catalan translation of readme (#3130)

* Create README_ca_ES.md

* Update README_ca_ES.md

* Update README.md

* Update README_ca_ES.md

* Update README_ca_ES.md

* Update README_ca_ES.md
---
 README.md       |   1 +
 README_ca_ES.md | 107 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 README_ca_ES.md

diff --git a/README.md b/README.md
index c96385b6b..46652585c 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@
 <p align="center">
   <a href="README_zh_CN.md">中文</a>
   <a href="README_tr_TR.md">Türkçe</a>
+  <a href="README_ca_ES.md">Català</a>
 </p>
 
 ## Disclaimer
diff --git a/README_ca_ES.md b/README_ca_ES.md
new file mode 100644
index 000000000..38fb7e02e
--- /dev/null
+++ b/README_ca_ES.md
@@ -0,0 +1,107 @@
+<p align="center"> 
+  <br/>  
+  <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-green.svg?color=3F51B5&style=for-the-badge&label=Llicència&logoColor=000000&labelColor=ececec" alt="Llicència: MIT"></a>
+  <a href="https://discord.gg/D8JsnBEuKb">
+    <img src="https://img.shields.io/discord/979116623879368755.svg?label=Discord&logo=Discord&style=for-the-badge&logoColor=000000&labelColor=ececec" atl="Discord"/>
+  </a>
+  <br/>  
+  <br/>   
+</p>
+
+<p align="center">
+<img src="design/immich-logo.svg" width="150" title="Iniciar sessió amb URL personalitzada">
+</p>
+<h3 align="center">Immich - Solució de còpia de seguretat d'alta rendiment per a fotos i vídeos auto-allotjada</h3>
+<br/>
+<a href="https://immich.app">
+<img src="design/immich-screenshots.png" title="Captura de pantalla principal">
+</a>
+<br/>
+<p align="center">
+  <a href="README.md">English</a>
+  <a href="README_zh_CN.md">中文</a>
+  <a href="README_tr_TR.md">Türkçe</a>
+</p>
+
+## Avís legal
+
+- ⚠️ El projecte està en desenvolupament **molt actiu**.
+- ⚠️ Espereu errors i canvis que poden trencar coses.
+- ⚠️ **No utilitzeu l'aplicació com a única manera de guardar les vostres fotos i vídeos!**
+
+## Contingut
+
+- [Documentació oficial](https://immich.app/docs)
+- [Mapa de ruta](https://github.com/orgs/immich-app/projects/1)
+- [Demo](#demo)
+- [Funcionalitats](#funcionalitats)
+- [Introducció](https://immich.app/docs/overview/introduction)
+- [Instal·lació](https://immich.app/docs/install/requirements)
+- [Directrius de contribució](https://immich.app/docs/overview/support-the-project)
+- [Donar suport al projecte](#suportar-el-projecte)
+
+## Documentació
+
+Podeu trobar la documentació principal, incloent les guies d'instal·lació, a https://immich.app/.
+
+## Demo
+
+Podeu accedir a la demostració web a https://demo.immich.app
+
+Per a l'aplicació mòbil, podeu utilitzar `https://demo.immich.app/api` com a "URL de punt final del servidor".
+
+```bash title="Credencials de la demo"
+Les credencials
+email: demo@immich.app
+contrasenya: demo
+```
+```
+Spec: Free-tier Oracle VM - Amsterdam - 2.4Ghz quad-core ARM64 CPU, 24GB RAM
+```
+
+# Funcionalitats
+
+| Característiques                              | Mòbil  | Web |
+| -------------------------------------------- | ------ | --- |
+| Pujar i veure vídeos i fotos                  | Sí     | Sí  |
+| Còpia de seguretat automàtica en obrir l'aplicació | Sí | N/A |
+| Selecció d'àlbums per a la còpia de seguretat | Sí     | N/A |
+| Descarregar fotos i vídeos a l'aparell local  | Sí     | Sí  |
+| Suport per a múltiples usuaris                | Sí     | Sí  |
+| Àlbums i àlbums compartits                    | Sí     | Sí  |
+| Barra de desplaçament amb funció de rasclet/arrossegament | Sí | Sí |
+| Suport per a formats raw                      | Sí     | Sí  |
+| Visualització de metadades (EXIF, mapa)       | Sí     | Sí  |
+| Cerca per metadades, objectes, cares i CLIP   | Sí     | Sí  |
+| Funcions administratives (gestió d'usuaris)   | No     | Sí  |
+| Còpia de seguretat en segon pla               | Sí     | N/A |
+| Desplaçament virtual                          | Sí     | Sí  |
+| Suport per a OAuth                            | Sí     | Sí  |
+| Claus d'API                                   | N/A    | Sí  |
+| Còpia de seguretat i reproducció de LivePhoto  | iOS    | Sí  |
+| Estructura d'emmagatzematge definida per l'usuari | Sí  | Sí  |
+| Compartició pública                           | No     | Sí  |
+| Arxiu i preferits                             | Sí     | Sí  |
+| Mapa global                                   | No     | Sí  |
+| Compartició amb associats                      | Sí     | Sí  |
+| Reconeixement facial i agrupament              | Sí     | Sí  |
+| Records (fa x anys)                           | Sí     | Sí  |
+| Suport fora de línia                          | Sí     | No  |
+| Galeria de només lectura                      | Sí     | Sí  |
+
+# Donar suport al projecte
+
+M'he compromès amb aquest projecte i no em detindré. Continuaré actualitzant la documentació, afegint noves funcionalitats i solucionant errors. Però no ho puc fer sol. Per això, necessito la vostra ajuda per donar-me motivació addicional per seguir endavant.
+
+Com van dir els nostres amfitrions a l'episodi [selfhosted.show - 'The-organization-must-not-be-name is a Hostile Actor'](https://selfhosted.show/79?t=1418), això és una tasca enorme del que l'equip i jo estem fent. I m'encantaria poder dedicar-m'hi a temps complet, per la qual cosa us demano la vostra ajuda per fer-ho possible.
+
+Si creieu que aquesta és una causa justa i l'aplicació és alguna cosa que us veieu utilitzant durant molt de temps, considereu donar suport al projecte amb alguna de les opcions següents.
+
+## Donació
+
+- [Donació mensual](https://github.com/sponsors/alextran1502) a través de GitHub Sponsors
+- [Donació única](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502) a través de GitHub Sponsors
+- [Librepay](https://liberapay.com/alex.tran1502/)
+- [buymeacoffee](https://www.buymeacoffee.com/altran1502)
+- Bitcoin: 1FvEp6P6NM8EZEkpGUFAN2LqJ1gxusNxZX
+

From d064477a45f28860a5bc64db2a5e7b4fb6d27be7 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 6 Jul 2023 17:34:15 -0500
Subject: [PATCH 50/53] fix(web): Places and Things thumbnail cannot be clicked
 (#3133)

* fix(web): Places and Things thumbnail cannot be clicked

* fix openapi

* fix test
---
 web/src/lib/components/assets/thumbnail/thumbnail.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 24ec8d0cd..87c54942d 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -44,16 +44,15 @@
     return [235, 235];
   })();
 
-  const thumbnailClickedHandler = (e: Event) => {
+  const thumbnailClickedHandler = () => {
     if (!disabled) {
-      e.preventDefault();
       dispatch('click', { asset });
     }
   };
 
   const thumbnailKeyDownHandler = (e: KeyboardEvent) => {
     if (e.key === 'Enter') {
-      thumbnailClickedHandler(e);
+      thumbnailClickedHandler();
     }
   };
 

From 927d6ab1c68daaaa65790bc40669e240ce24b88a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 7 Jul 2023 08:57:30 -0500
Subject: [PATCH 51/53] chore(deps): bump docker/setup-buildx-action from 2.8.0
 to 2.9.0 (#3145)

Bumps [docker/setup-buildx-action](https://github.com/docker/setup-buildx-action) from 2.8.0 to 2.9.0.
- [Release notes](https://github.com/docker/setup-buildx-action/releases)
- [Commits](https://github.com/docker/setup-buildx-action/compare/v2.8.0...v2.9.0)

---
updated-dependencies:
- dependency-name: docker/setup-buildx-action
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/docker.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index 8a448f2fc..4784864a9 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -45,7 +45,7 @@ jobs:
         uses: docker/setup-qemu-action@v2.2.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.8.0
+        uses: docker/setup-buildx-action@v2.9.0
         # Workaround to fix error:
         # failed to push: failed to copy: io: read/write on closed pipe
         # See https://github.com/docker/build-push-action/issues/761

From 50c7b35291893e6e2fb695570a2983dcca1431c9 Mon Sep 17 00:00:00 2001
From: Mert <101130780+mertalev@users.noreply.github.com>
Date: Fri, 7 Jul 2023 21:49:18 -0400
Subject: [PATCH 52/53] clarified openapi use (#3149)

---
 docs/docs/developer/open-api.md     | 6 +++---
 docs/docs/developer/pr-checklist.md | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/docs/developer/open-api.md b/docs/docs/developer/open-api.md
index 0fdd5551f..3989b4580 100644
--- a/docs/docs/developer/open-api.md
+++ b/docs/docs/developer/open-api.md
@@ -1,10 +1,10 @@
-# Open API
+# OpenAPI
 
-Immich uses the [Open API](https://swagger.io/specification/) standard to generate API documentation. To view the published docs see [here](/docs/api).
+Immich uses the [OpenAPI](https://swagger.io/specification/) standard to generate API documentation. To view the published docs see [here](/docs/api).
 
 ## Generator
 
-OpenAPI is used to generate the client (Typescript, Dart) SDK. `openapi-generator-cli` can be installed [here](https://openapi-generator.tech/docs/installation/). When you add a new or modify an existing endpoint, you must run the command below to update the client SDK.
+OpenAPI is used to generate the client (Typescript, Dart) SDK. `openapi-generator-cli` can be installed [here](https://openapi-generator.tech/docs/installation/). The generated SDK is based on the `immich-openapi-specs.json` file, which is autogenerated by the server when running in development mode. The `immich-openapi-specs.json` file can be modified with `@nestjs/swagger` decorators used or referenced by controller endpoints. See the [NestJS OpenAPI docs](https://docs.nestjs.com/openapi/types-and-parameters) for more info. When you add a new endpoint or modify an existing one, you must run the command below to update the client SDK.
 
 ```bash
 npm run api:generate # Run from the `server/` directory
diff --git a/docs/docs/developer/pr-checklist.md b/docs/docs/developer/pr-checklist.md
index efaa8f041..4318f6106 100644
--- a/docs/docs/developer/pr-checklist.md
+++ b/docs/docs/developer/pr-checklist.md
@@ -24,9 +24,9 @@ Run all web checks with `npm run check:all`
 Run all server checks with `npm run check:all`
 :::
 
-## Open API
+## OpenAPI
 
-The Open API client libraries need to be regenerated whenever there are changes to the `immich-openapi-specs.json` file. See [Open API](/docs/developer/open-api.md) for more details.
+The OpenAPI client libraries need to be regenerated whenever there are changes to the `immich-openapi-specs.json` file. Note that you should not modify this file directly as it is auto-generated. See [OpenAPI](/docs/developer/open-api.md) for more details.
 
 ## Database Migrations
 

From fe2330ebf607874df66349dd5a9cf42068933427 Mon Sep 17 00:00:00 2001
From: Fynn Petersen-Frey <10599762+fyfrey@users.noreply.github.com>
Date: Sat, 8 Jul 2023 15:46:22 +0200
Subject: [PATCH 53/53] feat(mobile): reduce UI rebuilds (#3129)

---
 .../home/ui/asset_grid/immich_asset_grid.dart | 107 ++++++------------
 1 file changed, 35 insertions(+), 72 deletions(-)

diff --git a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid.dart b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid.dart
index 21a33b51c..f9f018350 100644
--- a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid.dart
@@ -50,86 +50,49 @@ class ImmichAssetGrid extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    var settings = ref.watch(appSettingsServiceProvider);
-
-    // Needs to suppress hero animations when navigating to this widget
-    final enableHeroAnimations = useState(false);
-    final transitionDuration = ModalRoute.of(context)?.transitionDuration;
-
+    final settings = ref.watch(appSettingsServiceProvider);
     final perRow = useState(
       assetsPerRow ?? settings.getSetting(AppSettingsEnum.tilesPerRow)!,
     );
     final scaleFactor = useState(7.0 - perRow.value);
     final baseScaleFactor = useState(7.0 - perRow.value);
 
-    useEffect(
-      () {
-        // Wait for transition to complete, then re-enable
-        if (transitionDuration == null) {
-          // No route transition found, maybe we opened this up first
-          enableHeroAnimations.value = true;
-        } else {
-          // Unfortunately, using the transition animation itself didn't
-          // seem to work reliably. So instead, wait until the duration of the
-          // animation has elapsed to re-enable the hero animations
-          Future.delayed(transitionDuration).then((_) {
-            enableHeroAnimations.value = true;
-          });
-        }
-        return null;
-      },
-      [],
-    );
-
-    Future<bool> onWillPop() async {
-      enableHeroAnimations.value = false;
-      return true;
-    }
-
     Widget buildAssetGridView(RenderList renderList) {
-      return WillPopScope(
-        onWillPop: onWillPop,
-        child: HeroMode(
-          enabled: enableHeroAnimations.value,
-          child: RawGestureDetector(
-            gestures: {
-              CustomScaleGestureRecognizer:
-                  GestureRecognizerFactoryWithHandlers<
-                          CustomScaleGestureRecognizer>(
-                      () => CustomScaleGestureRecognizer(),
-                      (CustomScaleGestureRecognizer scale) {
-                scale.onStart = (details) {
-                  baseScaleFactor.value = scaleFactor.value;
-                };
+      return RawGestureDetector(
+        gestures: {
+          CustomScaleGestureRecognizer: GestureRecognizerFactoryWithHandlers<
+                  CustomScaleGestureRecognizer>(
+              () => CustomScaleGestureRecognizer(),
+              (CustomScaleGestureRecognizer scale) {
+            scale.onStart = (details) {
+              baseScaleFactor.value = scaleFactor.value;
+            };
 
-                scale.onUpdate = (details) {
-                  scaleFactor.value =
-                      max(min(5.0, baseScaleFactor.value * details.scale), 1.0);
-                  if (7 - scaleFactor.value.toInt() != perRow.value) {
-                    perRow.value = 7 - scaleFactor.value.toInt();
-                  }
-                };
-                scale.onEnd = (details) {};
-              })
-            },
-            child: ImmichAssetGridView(
-              onRefresh: onRefresh,
-              assetsPerRow: perRow.value,
-              listener: listener,
-              showStorageIndicator: showStorageIndicator ??
-                  settings.getSetting(AppSettingsEnum.storageIndicator),
-              renderList: renderList,
-              margin: margin,
-              selectionActive: selectionActive,
-              preselectedAssets: preselectedAssets,
-              canDeselect: canDeselect,
-              dynamicLayout: dynamicLayout ??
-                  settings.getSetting(AppSettingsEnum.dynamicLayout),
-              showMultiSelectIndicator: showMultiSelectIndicator,
-              visibleItemsListener: visibleItemsListener,
-              topWidget: topWidget,
-            ),
-          ),
+            scale.onUpdate = (details) {
+              scaleFactor.value =
+                  max(min(5.0, baseScaleFactor.value * details.scale), 1.0);
+              if (7 - scaleFactor.value.toInt() != perRow.value) {
+                perRow.value = 7 - scaleFactor.value.toInt();
+              }
+            };
+          })
+        },
+        child: ImmichAssetGridView(
+          onRefresh: onRefresh,
+          assetsPerRow: perRow.value,
+          listener: listener,
+          showStorageIndicator: showStorageIndicator ??
+              settings.getSetting(AppSettingsEnum.storageIndicator),
+          renderList: renderList,
+          margin: margin,
+          selectionActive: selectionActive,
+          preselectedAssets: preselectedAssets,
+          canDeselect: canDeselect,
+          dynamicLayout: dynamicLayout ??
+              settings.getSetting(AppSettingsEnum.dynamicLayout),
+          showMultiSelectIndicator: showMultiSelectIndicator,
+          visibleItemsListener: visibleItemsListener,
+          topWidget: topWidget,
         ),
       );
     }