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>