fix(web): re-render albums (#7403)

* fix: re-render albums

* fix: album description

* fix: reactivity

* fix album reactivity + components for title and description

* only update AssetGrid when albumId changes

* remove title and description bindings

* remove console.log

* chore: fix merge

* pr feedback

* pr feedback

---------

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { autoGrowHeight } from '$lib/utils/autogrow';
+  import { updateAlbumInfo } from '@immich/sdk';
+  import { handleError } from '$lib/utils/handle-error';
+
+  export let id: string;
+  export let description: string;
+  export let isOwned: boolean;
+
+  $: newDescription = description;
+
+  const handleUpdateDescription = async () => {
+    if (newDescription === description) {
+      return;
+    }
+
+    try {
+      await updateAlbumInfo({
+        id,
+        updateAlbumDto: {
+          description: newDescription,
+        },
+      });
+    } catch (error) {
+      handleError(error, 'Error updating album description');
+      return;
+    }
+    description = newDescription;
+  };
+</script>
+
+{#if isOwned}
+  <textarea
+    class="w-full mt-2 resize-none overflow-hidden text-black dark:text-white border-b-2 border-transparent border-gray-500 bg-transparent text-base outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:focus:border-immich-dark-primary hover:border-gray-400"
+    bind:value={newDescription}
+    on:input={(e) => autoGrowHeight(e.currentTarget)}
+    on:focusout={handleUpdateDescription}
+    use:autoGrowHeight
+    placeholder="Add description"
+  />
+{:else if description}
+  <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">
+    {description}
+  </p>
+{/if}

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { updateAlbumInfo } from '@immich/sdk';
+  import { handleError } from '$lib/utils/handle-error';
+
+  export let id: string;
+  export let albumName: string;
+  export let isOwned: boolean;
+
+  $: newAlbumName = albumName;
+
+  const handleUpdateName = async () => {
+    if (newAlbumName === albumName) {
+      return;
+    }
+
+    try {
+      await updateAlbumInfo({
+        id,
+        updateAlbumDto: {
+          albumName: newAlbumName,
+        },
+      });
+    } catch (error) {
+      handleError(error, 'Unable to update album name');
+      return;
+    }
+    albumName = newAlbumName;
+  };
+</script>
+
+<input
+  on:keydown={(e) => e.key === 'Enter' && e.currentTarget.blur()}
+  on:blur={handleUpdateName}
+  class="w-[99%] mb-2 border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
+    ? 'hover:border-gray-400'
+    : 'hover:border-transparent'} bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray"
+  type="text"
+  bind:value={newAlbumName}
+  disabled={!isOwned}
+  title="Edit Title"
+  placeholder="Add a title"
+/>

web/src/lib/components/shared-components/settings/setting-switch.svelte

@@ -11,7 +11,7 @@
   export let isEdited = false;
 
   const dispatch = createEventDispatcher<{ toggle: boolean }>();
-  const onToggle = (event: Event) => dispatch('toggle', (event.target as HTMLInputElement).checked);
+  const onToggle = (ischecked: boolean) => dispatch('toggle', ischecked);
 </script>
 
 <div class="flex place-items-center justify-between">
@@ -34,5 +34,5 @@
     <slot />
   </div>
 
-  <Slider bind:checked {disabled} on:click={onToggle} />
+  <Slider bind:checked {disabled} on:toggle={({ detail }) => onToggle(detail)} />
 </div>

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -41,7 +41,6 @@
   import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
   import { downloadArchive } from '$lib/utils/asset-utils';
-  import { autoGrowHeight } from '$lib/utils/autogrow';
   import { clickOutside } from '$lib/utils/click-outside';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
@@ -71,17 +70,19 @@
     mdiPlus,
     mdiShareVariantOutline,
   } from '@mdi/js';
-  import { onMount } from 'svelte';
   import { fly } from 'svelte/transition';
   import type { PageData } from './$types';
+  import AlbumTitle from '$lib/components/album-page/album-title.svelte';
+  import AlbumDescription from '$lib/components/album-page/album-description.svelte';
+  import { handlePromiseError } from '$lib/utils';
 
   export let data: PageData;
 
   let { isViewing: showAssetViewer, setAssetId } = assetViewingStore;
   let { slideshowState, slideshowShuffle } = slideshowStore;
 
-  let album = data.album;
+  $: album = data.album;
-  let description = album.description;
+  $: albumId = album.id;
 
   $: {
     if (!album.isActivityEnabled && $numberOfComments === 0) {
@@ -103,9 +104,7 @@
 
   let backUrl: string = AppRoute.ALBUMS;
   let viewMode = ViewMode.VIEW;
-  let titleInput: HTMLInputElement;
   let isCreatingSharedAlbum = false;
-  let currentAlbumName = album.albumName;
   let contextMenuPosition: { x: number; y: number } = { x: 0, y: 0 };
   let isShowActivity = false;
   let isLiked: ActivityResponseDto | null = null;
@@ -114,11 +113,11 @@
   let assetGridWidth: number;
   let textArea: HTMLTextAreaElement;
 
-  const assetStore = new AssetStore({ albumId: album.id });
+  $: assetStore = new AssetStore({ albumId });
   const assetInteractionStore = createAssetInteractionStore();
   const { isMultiSelectState, selectedAssets } = assetInteractionStore;
 
-  const timelineStore = new AssetStore({ isArchived: false }, album.id);
+  $: timelineStore = new AssetStore({ isArchived: false }, albumId);
   const timelineInteractionStore = createAssetInteractionStore();
   const { selectedAssets: timelineSelected } = timelineInteractionStore;
 
@@ -132,7 +131,7 @@
   $: showActivityStatus =
     album.sharedUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || $numberOfComments > 0);
 
-  $: afterNavigate(({ from }) => {
+  afterNavigate(({ from }) => {
     assetViewingStore.showAssetViewer(false);
 
     let url: string | undefined = from?.url?.pathname;
@@ -218,11 +217,10 @@
     isShowActivity = !isShowActivity;
   };
 
-  onMount(async () => {
+  $: if (album.sharedUsers.length > 0) {
-    if (album.sharedUsers.length > 0) {
+    handlePromiseError(getFavorite());
-      await Promise.all([getFavorite(), getNumberOfComments()]);
+    handlePromiseError(getNumberOfComments());
   }
-  });
 
   const handleKeypress = (event: KeyboardEvent) => {
     if (event.target !== textArea) {
@@ -416,42 +414,6 @@
       handleError(error, 'Unable to update album cover');
     }
   };
-
-  const handleUpdateName = async () => {
-    if (currentAlbumName === album.albumName) {
-      return;
-    }
-
-    try {
-      await updateAlbumInfo({
-        id: album.id,
-        updateAlbumDto: {
-          albumName: album.albumName,
-        },
-      });
-      currentAlbumName = album.albumName;
-    } catch (error) {
-      handleError(error, 'Unable to update album name');
-    }
-  };
-
-  const handleUpdateDescription = async () => {
-    if (album.description === description) {
-      return;
-    }
-    try {
-      await updateAlbumInfo({
-        id: album.id,
-        updateAlbumDto: {
-          description,
-        },
-      });
-
-      album.description = description;
-    } catch (error) {
-      handleError(error, 'Error updating album description');
-    }
-  };
 </script>
 
 <svelte:window on:keydown={handleKeypress} />
@@ -576,8 +538,14 @@
       class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
       style={`width:${assetGridWidth}px`}
     >
+      <!-- Use key because AssetGrid can't deal with changing stores -->
+      {#key albumId}
         {#if viewMode === ViewMode.SELECT_ASSETS}
-        <AssetGrid assetStore={timelineStore} assetInteractionStore={timelineInteractionStore} isSelectionMode={true} />
+          <AssetGrid
+            assetStore={timelineStore}
+            assetInteractionStore={timelineInteractionStore}
+            isSelectionMode={true}
+          />
         {:else}
           <AssetGrid
             {album}
@@ -593,19 +561,7 @@
             {#if viewMode !== ViewMode.SELECT_THUMBNAIL}
               <!-- ALBUM TITLE -->
               <section class="pt-24">
-              <input
+                <AlbumTitle id={album.id} albumName={album.albumName} {isOwned} />
-                on:keydown={(e) => e.key === 'Enter' && titleInput.blur()}
-                on:blur={handleUpdateName}
-                class="w-[99%] mb-2 border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
-                  ? 'hover:border-gray-400'
-                  : 'hover:border-transparent'} bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray"
-                type="text"
-                bind:value={album.albumName}
-                disabled={!isOwned}
-                bind:this={titleInput}
-                title="Edit Title"
-                placeholder="Add a title"
-              />
 
                 <!-- ALBUM SUMMARY -->
                 {#if album.assetCount > 0}
@@ -655,21 +611,7 @@
                   </div>
                 {/if}
                 <!-- ALBUM DESCRIPTION -->
-              {#if isOwned}
+                <AlbumDescription id={album.id} description={album.description} {isOwned} />
-                <textarea
-                  class="w-full mt-2 resize-none overflow-hidden text-black dark:text-white border-b-2 border-transparent border-gray-500 bg-transparent text-base outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:focus:border-immich-dark-primary hover:border-gray-400"
-                  bind:this={textArea}
-                  bind:value={description}
-                  on:input={() => autoGrowHeight(textArea)}
-                  on:focusout={handleUpdateDescription}
-                  use:autoGrowHeight
-                  placeholder="Add description"
-                />
-              {:else if description}
-                <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">
-                  {description}
-                </p>
-              {/if}
               </section>
             {/if}
 
@@ -704,6 +646,7 @@
             />
           </div>
         {/if}
+      {/key}
     </main>
   </div>
   {#if album.sharedUsers.length > 0 && album && isShowActivity && $user && !$showAssetViewer}