fix(web): update album start date when the album changes (#32242)

Co-authored-by: Dawid Krynski <188586034+DawidKrynski@users.noreply.github.com>
(cherry picked from commit d519140a6c4d9bc8c392e08a29679ddf3326d917)

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

@@ -8,7 +8,7 @@
   };
 
   const { album }: Props = $props();
-  const startDate = album.startDate;
+  const startDate = $derived(album.startDate);
 </script>
 
 <span class="my-2 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">

web/src/lib/components/album-page/__tests__/AlbumSummary.spec.ts

@@ -0,0 +1,34 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/svelte';
+import { init, register, waitLocale } from 'svelte-i18n';
+import { writable } from 'svelte/store';
+import { albumFactory } from '@test-data/factories/album-factory';
+import AlbumSummary from '../AlbumSummary.svelte';
+
+vitest.mock('$lib/stores/preferences.store', () => ({
+  locale: writable('en'),
+}));
+
+describe('AlbumSummary component', () => {
+  beforeAll(async () => {
+    await init({ fallbackLocale: 'en-US' });
+    register('en-US', () => import('$i18n/en.json'));
+    await waitLocale('en-US');
+  });
+
+  it('updates the date range when the start date of the album changes', async () => {
+    const album = albumFactory.build({
+      startDate: '2026-06-10T12:00:00.000Z',
+      endDate: '2026-06-20T12:00:00.000Z',
+      assetCount: 3,
+    });
+    const { rerender } = render(AlbumSummary, { album });
+    expect(screen.getByTestId('album-details')).toHaveTextContent('Jun 10');
+
+    await rerender({ album: { ...album, startDate: '2026-06-15T12:00:00.000Z', assetCount: 2 } });
+
+    const details = screen.getByTestId('album-details');
+    expect(details).toHaveTextContent('Jun 15');
+    expect(details).not.toHaveTextContent('Jun 10');
+  });
+});