feat(web): timeline bucket for albums (4) (#3604)

* feat: server changes for album timeline

* feat(web): album timeline view

* chore: open api

* chore: remove archive action

* fix: favorite for non-owners

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -5,7 +5,7 @@
   import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
   import { handleError } from '$lib/utils/handle-error';
-  import { AlbumResponseDto, api, AssetResponseDto, SharedLinkResponseDto, SharedLinkType } from '@api';
+  import { api, SharedLinkResponseDto, SharedLinkType } from '@api';
   import { createEventDispatcher, onMount } from 'svelte';
   import Link from 'svelte-material-icons/Link.svelte';
   import BaseModal from '../base-modal.svelte';
@@ -13,9 +13,8 @@
   import DropdownButton from '../dropdown-button.svelte';
   import { notificationController, NotificationType } from '../notification/notification';
 
-  export let shareType: SharedLinkType;
-  export let sharedAssets: AssetResponseDto[] = [];
-  export let album: AlbumResponseDto | undefined = undefined;
+  export let albumId: string | undefined = undefined;
+  export let assetIds: string[] = [];
   export let editingLink: SharedLinkResponseDto | undefined = undefined;
 
   let sharedLink: string | null = null;
@@ -33,6 +32,8 @@
     options: ['Never', '30 minutes', '1 hour', '6 hours', '1 day', '7 days', '30 days'],
   };
 
+  $: shareType = albumId ? SharedLinkType.Album : SharedLinkType.Individual;
+
   onMount(async () => {
     if (editingLink) {
       if (editingLink.description) {
@@ -41,6 +42,9 @@
       allowUpload = editingLink.allowUpload;
       allowDownload = editingLink.allowDownload;
       showExif = editingLink.showExif;
+
+      albumId = editingLink.album?.id;
+      assetIds = editingLink.assets.map(({ id }) => id);
     }
 
     const module = await import('copy-image-clipboard');
@@ -56,8 +60,8 @@
       const { data } = await api.sharedLinkApi.createSharedLink({
         sharedLinkCreateDto: {
           type: shareType,
-          albumId: album ? album.id : undefined,
-          assetIds: sharedAssets.map((a) => a.id),
+          albumId,
+          assetIds,
           expiresAt: expirationDate,
           allowUpload,
           description,
@@ -151,7 +155,7 @@
   </svelte:fragment>
 
   <section class="mx-6 mb-6">
-    {#if shareType == SharedLinkType.Album}
+    {#if shareType === SharedLinkType.Album}
       {#if !editingLink}
         <div>Let anyone with the link see photos and people in this album.</div>
       {:else}
@@ -163,7 +167,7 @@
       {/if}
     {/if}
 
-    {#if shareType == SharedLinkType.Individual}
+    {#if shareType === SharedLinkType.Individual}
       {#if !editingLink}
         <div>Let anyone with the link see the selected photo(s)</div>
       {:else}

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -22,7 +22,7 @@
   <div
     class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
   >
-    <UserAvatar size="lg" {user} />
+    <UserAvatar size="xl" {user} />
 
     <div>
       <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -110,7 +110,7 @@
             on:mouseleave={() => (shouldShowAccountInfo = false)}
             on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
           >
-            <UserAvatar {user} size="md" showTitle={false} interactive />
+            <UserAvatar {user} size="lg" showTitle={false} interactive />
           </button>
 
           {#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}

web/src/lib/components/shared-components/user-avatar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
   export type Color = 'primary' | 'pink' | 'red' | 'yellow' | 'blue' | 'green';
-  export type Size = 'full' | 'sm' | 'md' | 'lg';
+  export type Size = 'full' | 'sm' | 'md' | 'lg' | 'xl';
 </script>
 
 <script lang="ts">
@@ -28,8 +28,9 @@
   const sizeClasses: Record<Size, string> = {
     full: 'w-full h-full',
     sm: 'w-7 h-7',
-    md: 'w-12 h-12',
-    lg: 'w-20 h-20',
+    md: 'w-10 h-10',
+    lg: 'w-12 h-12',
+    xl: 'w-20 h-20',
   };
 
   // Get color based on the user UUID.
@@ -69,6 +70,7 @@
       class="flex h-full w-full select-none items-center justify-center"
       class:text-xs={size === 'sm'}
       class:text-lg={size === 'lg'}
+      class:text-xl={size === 'xl'}
       class:font-medium={!autoColor}
       class:font-semibold={autoColor}
     >