From 50b649cd3efd99b73ea0a38fd51dfdc7dc7b93da Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 23 May 2023 11:15:48 +0200
Subject: [PATCH] fix(web): small fixes for album selection modal (#2527)

---
 .../asset-viewer/album-list-item.svelte       | 19 ++++++++++---------
 .../album-selection-modal.svelte              | 14 +++-----------
 2 files changed, 13 insertions(+), 20 deletions(-)

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 f313d4bdff..dab58f24fd 100644
--- a/web/src/lib/components/asset-viewer/album-list-item.svelte
+++ b/web/src/lib/components/asset-viewer/album-list-item.svelte
@@ -27,15 +27,16 @@
 	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">
-		<img
-			src={album.albumThumbnailAssetId &&
-				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"
-		/>
+	<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>
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 fc0fd9aaf0..b810ec1129 100644
--- a/web/src/lib/components/shared-components/album-selection-modal.svelte
+++ b/web/src/lib/components/shared-components/album-selection-modal.svelte
@@ -16,18 +16,10 @@
 	export let shared: boolean;
 
 	onMount(async () => {
-		loading = true;
-
-		const { data } = await api.albumApi.getAllAlbums();
-
-		if (shared) {
-			albums = data.filter((album) => album.shared === shared);
-		} else {
-			albums = data;
-		}
+		const { data } = await api.albumApi.getAllAlbums(shared || undefined);
+		albums = data;
 
 		recentAlbums = albums
-			.filter((album) => album.shared === shared)
 			.sort((a, b) => (new Date(a.createdAt) > new Date(b.createdAt) ? -1 : 1))
 			.slice(0, 3);
 
@@ -61,7 +53,7 @@
 	<svelte:fragment slot="title">
 		<span class="flex gap-2 place-items-center">
 			<p class="font-medium">
-				Add to {#if shared}shared {/if}
+				Add to {#if shared}Shared {/if} Album
 			</p>
 		</span>
 	</svelte:fragment>