fix(web): show icons for empty album (#2604)

web/src/lib/components/album-page/album-card.svelte

@@ -15,9 +15,9 @@
 	import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
 	import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
 	import { locale } from '$lib/stores/preferences.store';
+	import IconButton from '../elements/buttons/icon-button.svelte';
 
 	export let album: AlbumResponseDto;
 	export let isSharingView = false;
@@ -82,7 +82,9 @@
 			on:click|stopPropagation|preventDefault={showAlbumContextMenu}
 			data-testid="context-button-parent"
 		>
-			<CircleIconButton logo={DotsVertical} size={'20'} />
+			<IconButton color="overlay-primary">
+				<DotsVertical size="20" />
+			</IconButton>
 		</div>
 	{/if}
 
@@ -115,7 +117,10 @@
 				{album.assetCount.toLocaleString($locale)}
 				{album.assetCount == 1 ? `item` : `items`}
 			</p>
-			<p>·</p>
+
+			{#if isSharingView || album.shared}
+				<p>·</p>
+			{/if}
 
 			{#if isSharingView}
 				{#await getAlbumOwnerInfo() then albumOwner}

web/src/lib/components/album-page/album-viewer.svelte

@@ -4,7 +4,6 @@
 	import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
 	import { downloadAssets } from '$lib/stores/download';
 	import { locale } from '$lib/stores/preferences.store';
-	import { clickOutside } from '$lib/utils/click-outside';
 	import { openFileUploadDialog } from '$lib/utils/file-uploader';
 	import {
 		AlbumResponseDto,
@@ -376,16 +375,14 @@
 			</svelte:fragment>
 
 			<svelte:fragment slot="trailing">
-				{#if album.assetCount > 0}
+				{#if !isCreatingSharedAlbum}
 					{#if !sharedLink}
 						<CircleIconButton
 							title="Add Photos"
 							on:click={() => (isShowAssetSelection = true)}
 							logo={FileImagePlusOutline}
 						/>
-					{/if}
+					{:else if sharedLink?.allowUpload}
-
-					{#if sharedLink?.allowUpload}
 						<CircleIconButton
 							title="Add Photos"
 							on:click={() => openFileUploadDialog(album.id, sharedLink?.key)}
@@ -393,7 +390,6 @@
 						/>
 					{/if}
 
-					<!-- Share and remove album -->
 					{#if isOwned}
 						<CircleIconButton
 							title="Share"
@@ -402,7 +398,9 @@
 						/>
 						<CircleIconButton title="Remove album" on:click={removeAlbum} logo={DeleteOutline} />
 					{/if}
+				{/if}
 
+				{#if album.assetCount > 0 && !isCreatingSharedAlbum}
 					{#if !isPublicShared || (isPublicShared && sharedLink?.allowDownload)}
 						<CircleIconButton
 							title="Download"
@@ -412,29 +410,31 @@
 					{/if}
 
 					{#if !isPublicShared && isOwned}
-						<div use:clickOutside on:outclick={() => (isShowAlbumOptions = false)}>
+						<CircleIconButton
-							<CircleIconButton
+							title="Album options"
-								title="Album options"
+							on:click={showAlbumOptionsMenu}
-								on:click={showAlbumOptionsMenu}
+							logo={DotsVertical}
-								logo={DotsVertical}
+						>
-								>{#if isShowAlbumOptions}
+							{#if isShowAlbumOptions}
-									<ContextMenu {...contextMenuPosition}>
+								<ContextMenu
-										<MenuOption
+									{...contextMenuPosition}
-											on:click={() => {
+									on:outclick={() => (isShowAlbumOptions = false)}
-												isShowThumbnailSelection = true;
+								>
-												isShowAlbumOptions = false;
+									<MenuOption
-											}}
+										on:click={() => {
-											text="Set album cover"
+											isShowThumbnailSelection = true;
-										/>
+											isShowAlbumOptions = false;
-									</ContextMenu>
+										}}
-								{/if}
+										text="Set album cover"
-							</CircleIconButton>
+									/>
-						</div>
+								</ContextMenu>
+							{/if}
+						</CircleIconButton>
 					{/if}
+				{/if}
 
-					{#if isPublicShared}
+				{#if isPublicShared}
-						<ThemeButton />
+					<ThemeButton />
-					{/if}
 				{/if}
 
 				{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}

web/src/lib/components/elements/buttons/button.svelte

@@ -9,7 +9,8 @@
 		| 'green'
 		| 'gray'
 		| 'transparent-gray'
-		| 'dark-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;
@@ -38,9 +39,10 @@
 		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: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'
+			'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> = {

web/src/lib/components/elements/buttons/icon-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-	export type Color = 'transparent-primary' | 'transparent-gray';
+	export type Color = 'transparent-primary' | 'transparent-gray' | 'overlay-primary';
 </script>
 
 <script lang="ts">