fix(web): small fixes for album selection modal (#2527)

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>

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>