vor 2 Jahren · d91cc3616b
--- a/web/jest.config.mjs
+++ b/web/jest.config.mjs
@@ -86,6 +86,8 @@ export default {
 
															 	// 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/web/package-lock.json
+++ b/web/package-lock.json
@@ -45,6 +45,7 @@
 
															 				"eslint-config-prettier": "^8.3.0",
														
 
															 				"eslint-plugin-svelte3": "^4.0.0",
														
 
															 				"factory.ts": "^1.2.0",
														
 
															+				"identity-obj-proxy": "^3.0.0",
														
 
															 				"jest": "^29.0.2",
														
 
															 				"jest-environment-jsdom": "^29.0.2",
														
 
															 				"postcss": "^8.4.13",
														
@@ -6202,6 +6203,12 @@
 
															 				"uglify-js": "^3.1.4"
														
 
															 			}
														
 
															 		},
														
 
															+		"node_modules/harmony-reflect": {
														
 
															+			"version": "1.6.2",
														
 
															+			"resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
														
 
															+			"integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
														
 
															+			"dev": true
														
 
															+		},
														
 
															 		"node_modules/has": {
														
 
															 			"version": "1.0.3",
														
 
															 			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
														
@@ -6337,6 +6344,18 @@
 
															 				"node": ">=0.10.0"
														
 
															 			}
														
 
															 		},
														
 
															+		"node_modules/identity-obj-proxy": {
														
 
															+			"version": "3.0.0",
														
 
															+			"resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
														
 
															+			"integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
														
 
															+			"dev": true,
														
 
															+			"dependencies": {
														
 
															+				"harmony-reflect": "^1.4.6"
														
 
															+			},
														
 
															+			"engines": {
														
 
															+				"node": ">=4"
														
 
															+			}
														
 
															+		},
														
 
															 		"node_modules/ignore": {
														
 
															 			"version": "5.2.1",
														
 
															 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
														
@@ -15822,6 +15841,12 @@
 
															 				"wordwrap": "^1.0.0"
														
 
															 			}
														
 
															 		},
														
 
															+		"harmony-reflect": {
														
 
															+			"version": "1.6.2",
														
 
															+			"resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
														
 
															+			"integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
														
 
															+			"dev": true
														
 
															+		},
														
 
															 		"has": {
														
 
															 			"version": "1.0.3",
														
 
															 			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
														
@@ -15918,6 +15943,15 @@
 
															 				"safer-buffer": ">= 2.1.2 < 3.0.0"
														
 
															 			}
														
 
															 		},
														
 
															+		"identity-obj-proxy": {
														
 
															+			"version": "3.0.0",
														
 
															+			"resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
														
 
															+			"integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
														
 
															+			"dev": true,
														
 
															+			"requires": {
														
 
															+				"harmony-reflect": "^1.4.6"
														
 
															+			}
														
 
															+		},
														
 
															 		"ignore": {
														
 
															 			"version": "5.2.1",
														
 
															 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
														
--- a/web/package.json
+++ b/web/package.json
@@ -43,6 +43,7 @@
 
															 		"eslint-config-prettier": "^8.3.0",
														
 
															 		"eslint-plugin-svelte3": "^4.0.0",
														
 
															 		"factory.ts": "^1.2.0",
														
 
															+		"identity-obj-proxy": "^3.0.0",
														
 
															 		"jest": "^29.0.2",
														
 
															 		"jest-environment-jsdom": "^29.0.2",
														
 
															 		"postcss": "^8.4.13",
														
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -4,13 +4,13 @@
 
															 @font-face {
														
 
															 	font-family: 'Work Sans';
														
 
															-	src: url('/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
														
 
															+	src: url('$lib/assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
														
 
															 	font-weight: 1 999;
														
 
															 }
														
 
															 @font-face {
														
 
															 	font-family: 'Snowburst One';
														
 
															-	src: url('/fonts/SnowburstOne-Regular.ttf') format('truetype');
														
 
															+	src: url('$lib/assets/fonts/SnowburstOne-Regular.ttf') format('truetype');
														
 
															 }
														
 
															 :root {
														
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -2,7 +2,6 @@
 
															 <html lang="en" class="dark">
														
 
															 	<head>
														
 
															 		<meta charset="utf-8" />
														
 
															-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
														
 
															 		<meta name="viewport" content="width=device-width, initial-scale=1" />
														
 
															 		%sveltekit.head%
														
 
															 	</head>
														
--- a/web/src/lib/assets/empty-1.svg
+++ b/web/src/lib/assets/empty-1.svg
--- a/web/src/lib/assets/empty-2.svg
+++ b/web/src/lib/assets/empty-2.svg
--- a/web/src/lib/assets/favicon.png
+++ b/web/src/lib/assets/favicon.png
--- a/web/src/lib/assets/feature-panel.png
+++ b/web/src/lib/assets/feature-panel.png
--- a/web/src/lib/assets/fonts/SnowburstOne-Regular.ttf
+++ b/web/src/lib/assets/fonts/SnowburstOne-Regular.ttf
--- a/web/src/lib/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf
+++ b/web/src/lib/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf
--- a/web/src/lib/assets/fonts/WorkSans-VariableFont_wght.ttf
+++ b/web/src/lib/assets/fonts/WorkSans-VariableFont_wght.ttf
--- a/web/src/lib/assets/immich-logo-no-outline.png
+++ b/web/src/lib/assets/immich-logo-no-outline.png
--- a/web/src/lib/assets/immich-logo.svg
+++ b/web/src/lib/assets/immich-logo.svg
--- a/web/src/lib/assets/no-thumbnail.png
+++ b/web/src/lib/assets/no-thumbnail.png
--- a/web/src/lib/components/album-page/__tests__/album-card.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/album-card.spec.ts
@@ -44,10 +44,10 @@ describe('AlbumCard component', () => {
 
															 			const albumDetailsElement = sut.getByTestId('album-details');
														
 
															 			const detailsText = `${count} items` + (shared ? ' . Shared' : '');
														
 
															-			expect(albumImgElement).toHaveAttribute('src', 'no-thumbnail.png');
														
 
															+			expect(albumImgElement).toHaveAttribute('src');
														
 
															 			expect(albumImgElement).toHaveAttribute('alt', album.id);
														
 
															-			await waitFor(() => expect(albumImgElement).toHaveAttribute('src', 'no-thumbnail.png'));
														
 
															+			await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
														
 
															 			expect(albumImgElement).toHaveAttribute('alt', album.id);
														
 
															 			expect(apiMock.assetApi.getAssetThumbnail).not.toHaveBeenCalled();
														
@@ -108,7 +108,7 @@ describe('AlbumCard component', () => {
 
															 			sut = render(AlbumCard, { album });
														
 
															 			const albumImgElement = sut.getByTestId('album-image');
														
 
															-			await waitFor(() => expect(albumImgElement).toHaveAttribute('src', 'no-thumbnail.png'));
														
 
															+			await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
														
 
															 		});
														
 
															 		it('dispatches custom "click" event with the album in context', async () => {
														
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/web/src/lib/components/album-page/album-card.svelte
@@ -16,14 +16,13 @@
 
															 	import { createEventDispatcher, onMount } from 'svelte';
														
 
															 	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
														
 
															 	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
														
 
															+	import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
														
 
															 	export let album: AlbumResponseDto;
														
 
															-	const NO_THUMBNAIL = 'no-thumbnail.png';
														
 
															-
														
 
															 	let imageData = `/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`;
														
 
															 	if (!album.albumThumbnailAssetId) {
														
 
															-		imageData = NO_THUMBNAIL;
														
 
															+		imageData = noThumbnailUrl;
														
 
															 	}
														
 
															 	const dispatchClick = createEventDispatcher<OnClick>();
														
@@ -51,7 +50,7 @@
 
															 	};
														
 
															 	onMount(async () => {
														
 
															-		imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || NO_THUMBNAIL;
														
 
															+		imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || noThumbnailUrl;
														
 
															 	});
														
 
															 	const locale = navigator.language;
														
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -40,6 +40,7 @@
 
															 	import { openFileUploadDialog } from '$lib/utils/file-uploader';
														
 
															 	import { bulkDownload } from '$lib/utils/asset-utils';
														
 
															 	import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
														
 
															+	import ImmichLogo from '../shared-components/immich-logo.svelte';
														
 
															 	export let album: AlbumResponseDto;
														
 
															 	export let sharedLink: SharedLinkResponseDto | undefined = undefined;
														
@@ -419,13 +420,7 @@
 
															 						class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
														
 
															 						href="https://immich.app"
														
 
															 					>
														
 
															-						<img
														
 
															-							src="/immich-logo.svg"
														
 
															-							alt="immich logo"
														
 
															-							height="30"
														
 
															-							width="30"
														
 
															-							draggable="false"
														
 
															-						/>
														
 
															+						<ImmichLogo height={30} width={30} />
														
 
															 						<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">
														
 
															 							IMMICH
														
 
															 						</h1>
														
--- a/web/src/lib/components/album-page/user-selection-modal.svelte
+++ b/web/src/lib/components/album-page/user-selection-modal.svelte
@@ -6,6 +6,7 @@
 
															 	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';
														
 
															 	export let album: AlbumResponseDto;
														
 
															 	export let sharedUsersInAlbum: Set<UserResponseDto>;
														
@@ -53,7 +54,7 @@
 
															 <BaseModal on:close={() => dispatch('close')}>
														
 
															 	<svelte:fragment slot="title">
														
 
															 		<span class="flex gap-2 place-items-center">
														
 
															-			<img src="/immich-logo.svg" width="24" alt="Immich" draggable="false" />
														
 
															+			<ImmichLogo width={24} />
														
 
															 			<p class="font-medium">Invite to album</p>
														
 
															 		</span>
														
 
															 	</svelte:fragment>
														
--- a/web/src/lib/components/forms/admin-registration-form.svelte
+++ b/web/src/lib/components/forms/admin-registration-form.svelte
@@ -1,7 +1,8 @@
 
															 <script lang="ts">
														
 
															 	import { goto } from '$app/navigation';
														
 
															-
														
 
															 	import { api } from '@api';
														
 
															+	import ImmichLogo from '../shared-components/immich-logo.svelte';
														
 
															+
														
 
															 	let error: string;
														
 
															 	let success: string;
														
@@ -55,14 +56,7 @@
 
															 	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">
														
 
															-		<img
														
 
															-			class="text-center"
														
 
															-			src="/immich-logo.svg"
														
 
															-			height="100"
														
 
															-			width="100"
														
 
															-			alt="immich-logo"
														
 
															-			draggable="false"
														
 
															-		/>
														
 
															+		<ImmichLogo class="text-center" height="100" width="100" />
														
 
															 		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
														
 
															 			Admin Registration
														
 
															 		</h1>
														
--- a/web/src/lib/components/forms/change-password-form.svelte
+++ b/web/src/lib/components/forms/change-password-form.svelte
@@ -1,6 +1,7 @@
 
															 <script lang="ts">
														
 
															 	import { api, UserResponseDto } from '@api';
														
 
															 	import { createEventDispatcher } from 'svelte';
														
 
															+	import ImmichLogo from '../shared-components/immich-logo.svelte';
														
 
															 	export let user: UserResponseDto;
														
 
															 	let error: string;
														
@@ -47,14 +48,7 @@
 
															 	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">
														
 
															-		<img
														
 
															-			class="text-center"
														
 
															-			src="/immich-logo.svg"
														
 
															-			height="100"
														
 
															-			width="100"
														
 
															-			alt="immich-logo"
														
 
															-			draggable="false"
														
 
															-		/>
														
 
															+		<ImmichLogo class="text-center" height="100" width="100" />
														
 
															 		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
														
 
															 			Change Password
														
 
															 		</h1>
														
--- a/web/src/lib/components/forms/create-user-form.svelte
+++ b/web/src/lib/components/forms/create-user-form.svelte
@@ -1,6 +1,7 @@
 
															 <script lang="ts">
														
 
															 	import { api } from '@api';
														
 
															 	import { createEventDispatcher } from 'svelte';
														
 
															+	import ImmichLogo from '../shared-components/immich-logo.svelte';
														
 
															 	import {
														
 
															 		notificationController,
														
 
															 		NotificationType
														
@@ -80,14 +81,7 @@
 
															 	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">
														
 
															-		<img
														
 
															-			class="text-center"
														
 
															-			src="/immich-logo.svg"
														
 
															-			height="100"
														
 
															-			width="100"
														
 
															-			alt="immich-logo"
														
 
															-			draggable="false"
														
 
															-		/>
														
 
															+		<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>
														
--- a/web/src/lib/components/forms/login-form.svelte
+++ b/web/src/lib/components/forms/login-form.svelte
@@ -5,6 +5,7 @@
 
															 	import { handleError } from '$lib/utils/handle-error';
														
 
															 	import { api, oauth, OAuthConfigResponseDto } from '@api';
														
 
															 	import { createEventDispatcher, onMount } from 'svelte';
														
 
															+	import ImmichLogo from '../shared-components/immich-logo.svelte';
														
 
															 	let error: string;
														
 
															 	let email = '';
														
@@ -77,14 +78,7 @@
 
															 	class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-md py-8"
														
 
															 >
														
 
															 	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
														
 
															-		<img
														
 
															-			class="text-center"
														
 
															-			src="/immich-logo.svg"
														
 
															-			height="100"
														
 
															-			width="100"
														
 
															-			alt="immich-logo"
														
 
															-			draggable="false"
														
 
															-		/>
														
 
															+		<ImmichLogo class="text-center" height="100" width="100" />
														
 
															 		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">Login</h1>
														
 
															 	</div>
														
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte
@@ -17,6 +17,7 @@
 
															 		notificationController,
														
 
															 		NotificationType
														
 
															 	} from '../shared-components/notification/notification';
														
 
															+	import ImmichLogo from '../shared-components/immich-logo.svelte';
														
 
															 	export let sharedLink: SharedLinkResponseDto;
														
 
															 	export let isOwned: boolean;
														
@@ -122,7 +123,7 @@
 
															 					class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
														
 
															 					href="https://immich.app"
														
 
															 				>
														
 
															-					<img src="/immich-logo.svg" alt="immich logo" height="30" width="30" draggable="false" />
														
 
															+					<ImmichLogo height="30" width="30" />
														
 
															 					<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">
														
 
															 						IMMICH
														
 
															 					</h1>
														
--- 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,5 +1,6 @@
 
															 <script lang="ts">
														
 
															 	import { fade } from 'svelte/transition';
														
 
															+	import ImmichLogo from './immich-logo.svelte';
														
 
															 	export let dropHandler: (event: DragEvent) => void;
														
 
															 	export let dragOverHandler: (event: DragEvent) => void;
														
@@ -14,13 +15,6 @@
 
															 	on:dragleave={dragLeaveHandler}
														
 
															 	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"
														
 
															 >
														
 
															-	<img
														
 
															-		src="/immich-logo.svg"
														
 
															-		alt="immich logo"
														
 
															-		height="200"
														
 
															-		width="200"
														
 
															-		class="animate-bounce pb-16"
														
 
															-		draggable="false"
														
 
															-	/>
														
 
															+	<ImmichLogo height="200" width="200" class="animate-bounce pb-16" />
														
 
															 	<div class="text-2xl">Drop files anywhere to upload</div>
														
 
															 </div>
														
--- a/web/src/lib/components/shared-components/immich-logo.svelte
+++ b/web/src/lib/components/shared-components/immich-logo.svelte
@@ -0,0 +1,7 @@
 
															+<script lang="ts">
														
 
															+	import immichLogoUrl from '$lib/assets/immich-logo.svg';
														
 
															+
														
 
															+	export let draggable = false;
														
 
															+</script>
														
 
															+
														
 
															+<img src={immichLogoUrl} alt="Immich Logo" {draggable} {...$$restProps} />
														
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -8,6 +8,7 @@
 
															 	import ThemeButton from '../theme-button.svelte';
														
 
															 	import { AppRoute } from '../../../constants';
														
 
															 	import AccountInfoPanel from './account-info-panel.svelte';
														
 
															+	import ImmichLogo from '../immich-logo.svelte';
														
 
															 	export let user: UserResponseDto;
														
 
															 	export let shouldShowUploadButton = true;
														
@@ -50,7 +51,7 @@
 
															 			class="flex gap-2 place-items-center hover:cursor-pointer"
														
 
															 			href="/photos"
														
 
															 		>
														
 
															-			<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" draggable="false" />
														
 
															+			<ImmichLogo height="35" width="35" />
														
 
															 			<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
														
 
															 				IMMICH
														
 
															 			</h1>
														
--- a/web/src/lib/components/shared-components/upload-asset-preview.svelte
+++ b/web/src/lib/components/shared-components/upload-asset-preview.svelte
@@ -2,6 +2,7 @@
 
															 	import { fade } from 'svelte/transition';
														
 
															 	import { asByteUnitString } from '$lib/utils/byte-units';
														
 
															 	import { UploadAsset } from '$lib/models/upload-asset';
														
 
															+	import ImmichLogo from './immich-logo.svelte';
														
 
															 	export let uploadAsset: UploadAsset;
														
@@ -16,13 +17,9 @@
 
															 >
														
 
															 	<div class="relative">
														
 
															 		{#if showFallbackImage}
														
 
															-			<img
														
 
															-				in:fade={{ duration: 250 }}
														
 
															-				src="immich-logo.svg"
														
 
															-				alt="Immich Logo"
														
 
															-				class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg"
														
 
															-				draggable="false"
														
 
															-			/>
														
 
															+			<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 }}
														
--- a/web/src/lib/components/sharing-page/shared-album-list-tile.svelte
+++ b/web/src/lib/components/sharing-page/shared-album-list-tile.svelte
@@ -1,13 +1,14 @@
 
															 <script lang="ts">
														
 
															 	import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
														
 
															 	import { fade } from 'svelte/transition';
														
 
															+	import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
														
 
															 	export let album: AlbumResponseDto;
														
 
															 	export let user: UserResponseDto;
														
 
															 	const loadImageData = async (thubmnailId: string | null) => {
														
 
															 		if (thubmnailId == null) {
														
 
															-			return '/no-thumbnail.png';
														
 
															+			return noThumbnailUrl;
														
 
															 		}
														
 
															 		const { data } = await api.assetApi.getAssetThumbnail(thubmnailId, ThumbnailFormat.Webp, {
														
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -9,6 +9,7 @@
 
															 		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 () => {
														
 
															 		//
														
@@ -33,7 +34,7 @@
 
															 	<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">
														
 
															-				<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" draggable="false" />
														
 
															+				<ImmichLogo height="35" width="35" />
														
 
															 				<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
														
 
															 					IMMICH
														
 
															 				</h1>
														
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -13,6 +13,7 @@
 
															 	import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
														
 
															 	import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
														
 
															 	import { fileUploadHandler } from '$lib/utils/file-uploader';
														
 
															+	import faviconUrl from '$lib/assets/favicon.png';
														
 
															 	let shouldShowAnnouncement: boolean;
														
 
															 	let localVersion: string;
														
@@ -80,6 +81,7 @@
 
															 <svelte:head>
														
 
															 	<title>{$page.data.meta?.title || 'Web'} - Immich</title>
														
 
															 	{#if $page.data.meta}
														
 
															+		<link rel="icon" href={faviconUrl} />
														
 
															 		<meta name="description" content={$page.data.meta.description} />
														
 
															 		<!-- Facebook Meta Tags -->
														
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,18 +1,12 @@
 
															 <script lang="ts">
														
 
															 	import { goto } from '$app/navigation';
														
 
															+	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 ">
														
 
															-			<img
														
 
															-				class="text-center"
														
 
															-				src="immich-logo.svg"
														
 
															-				height="200"
														
 
															-				width="200"
														
 
															-				alt="immich-logo"
														
 
															-				draggable="false"
														
 
															-			/>
														
 
															+			<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"
														
--- a/web/src/routes/albums/+page.svelte
+++ b/web/src/routes/albums/+page.svelte
@@ -10,6 +10,7 @@
 
															 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
														
 
															 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
														
 
															 	import { useAlbums } from './albums.bloc';
														
 
															+	import empty1Url from '$lib/assets/empty-1.svg';
														
 
															 	export let data: PageData;
														
@@ -93,7 +94,7 @@
 
															 					on:keydown={handleCreateAlbum}
														
 
															 					class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer 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="/empty-1.svg" alt="Empty shared album" width="500" draggable="false" />
														
 
															+					<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
														
 
															 					<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
														
 
															 						Create an album to organize your photos and videos
														
--- a/web/src/routes/favorites/+page.svelte
+++ b/web/src/routes/favorites/+page.svelte
@@ -13,6 +13,7 @@
 
															 	import StarMinusOutline from 'svelte-material-icons/StarMinusOutline.svelte';
														
 
															 	import Error from '../+error.svelte';
														
 
															 	import type { PageData } from './$types';
														
 
															+	import empty1Url from '$lib/assets/empty-1.svg';
														
 
															 	export let data: PageData;
														
@@ -126,7 +127,7 @@
 
															 				<div
														
 
															 					class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer 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="/empty-1.svg" alt="Empty shared album" width="500" draggable="false" />
														
 
															+					<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
														
 
															 					<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
														
 
															 						Add favorites to quickly find your best pictures and videos
														
--- a/web/src/routes/share/[key]/+page.server.ts
+++ b/web/src/routes/share/[key]/+page.server.ts
@@ -4,6 +4,7 @@ import { error } from '@sveltejs/kit';
 
															 import { getThumbnailUrl } from '$lib/utils/asset-utils';
														
 
															 import { serverApi, ThumbnailFormat } from '@api';
														
 
															 import type { PageServerLoad } from './$types';
														
 
															+import featurePanelUrl from '$lib/assets/feature-panel.png';
														
 
															 export const load: PageServerLoad = async ({ params, parent }) => {
														
 
															 	const { user } = await parent();
														
@@ -23,7 +24,7 @@ export const load: PageServerLoad = async ({ params, parent }) => {
 
															 				description: sharedLink.description || `${assetCount} shared photos & videos.`,
														
 
															 				imageUrl: assetId
														
 
															 					? getThumbnailUrl(assetId, ThumbnailFormat.Webp, sharedLink.key)
														
 
															-					: 'feature-panel.png'
														
 
															+					: featurePanelUrl
														
 
															 			},
														
 
															 			user
														
 
															 		};
														
--- a/web/src/routes/sharing/+page.svelte
+++ b/web/src/routes/sharing/+page.svelte
@@ -12,6 +12,7 @@
 
															 		notificationController,
														
 
															 		NotificationType
														
 
															 	} from '$lib/components/shared-components/notification/notification';
														
 
															+	import empty2Url from '$lib/assets/empty-2.svg';
														
 
															 	export let data: PageData;
														
@@ -94,7 +95,7 @@
 
															 				<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 dark:text-immich-dark-fg"
														
 
															 				>
														
 
															-					<img src="/empty-2.svg" alt="Empty shared album" width="500" draggable="false" />
														
 
															+					<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>
														
--- a/web/static/svelte-welcome.png
+++ b/web/static/svelte-welcome.png
--- a/web/static/svelte-welcome.webp
+++ b/web/static/svelte-welcome.webp