fix(web): album state after removing assets (#7745)

* fix(web): album state after removing assets

* refresh album on remove + simplify AlbumSummary

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { dateFormats } from '$lib/constants';
+  import { locale } from '$lib/stores/preferences.store';
+  import type { AlbumResponseDto } from '@immich/sdk';
+
+  export let album: AlbumResponseDto;
+
+  $: startDate = formatDate(album.startDate);
+  $: endDate = formatDate(album.endDate);
+
+  const formatDate = (date?: string) => {
+    return date ? new Date(date).toLocaleDateString($locale, dateFormats.album) : undefined;
+  };
+
+  const getDateRange = (start?: string, end?: string) => {
+    if (start && end && start !== end) {
+      return `${start} - ${end}`;
+    }
+
+    if (start) {
+      return start;
+    }
+
+    return '';
+  };
+</script>
+
+<span class="my-2 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
+  <p>{getDateRange(startDate, endDate)}</p>
+  <p>·</p>
+  <p>{album.assetCount} items</p>
+</span>

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

@@ -3,11 +3,9 @@
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.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 type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
   import { onDestroy, onMount } from 'svelte';
-  import { dateFormats } from '../../constants';
   import { createAssetInteractionStore } from '../../stores/asset-interaction.store';
   import { AssetStore } from '../../stores/assets.store';
   import { downloadArchive } from '../../utils/asset-utils';
@@ -21,6 +19,7 @@
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
   import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
   import { handlePromiseError } from '$lib/utils';
+  import AlbumSummary from './album-summary.svelte';
 
   export let sharedLink: SharedLinkResponseDto;
   export let user: UserResponseDto | undefined = undefined;
@@ -40,31 +39,6 @@
     }
   });
 
-  const getDateRange = () => {
-    const { startDate, endDate } = album;
-
-    let start = '';
-    let end = '';
-
-    if (startDate) {
-      start = new Date(startDate).toLocaleDateString($locale, dateFormats.album);
-    }
-
-    if (endDate) {
-      end = new Date(endDate).toLocaleDateString($locale, dateFormats.album);
-    }
-
-    if (startDate && endDate && start !== end) {
-      return `${start} - ${end}`;
-    }
-
-    if (start) {
-      return start;
-    }
-
-    return '';
-  };
-
   const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
 
   onMount(() => {
@@ -148,13 +122,8 @@
         {album.albumName}
       </h1>
 
-      <!-- ALBUM SUMMARY -->
       {#if album.assetCount > 0}
-        <span class="my-4 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
-          <p class="">{getDateRange()}</p>
-          <p>·</p>
-          <p>{album.assetCount} items</p>
-        </span>
+        <AlbumSummary {album} />
       {/if}
 
       <!-- ALBUM DESCRIPTION -->