refactor(web): descriptions (#6517)

* refactor: reusable autogrow

* fix: remove useless autogrow

* fix: correct size for album description

* fix: format

* fix: move to own file

* refactor: album description

* refactor: asset description

* simplify

* fix: style when no description provided

* fix: switching assets

* feat: update description with ctrl + enter

* fix: variable name

* fix: styling

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -1,49 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import type { AlbumResponseDto } from '@api';
-  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
-  import Button from '../elements/buttons/button.svelte';
-
-  const dispatch = createEventDispatcher<{
-    close: void;
-    save: string;
-  }>();
-  export let album: AlbumResponseDto;
-
-  let description = album.description;
-
-  const handleCancel = () => dispatch('close');
-  const handleSubmit = () => dispatch('save', description);
-</script>
-
-<FullScreenModal on:clickOutside={handleCancel} on:escape={handleCancel}>
-  <div
-    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-  >
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit description</h1>
-    </div>
-
-    <form on:submit|preventDefault={handleSubmit} autocomplete="off">
-      <div class="m-4 flex flex-col gap-2">
-        <label class="immich-form-label" for="name">Description</label>
-        <!-- svelte-ignore a11y-autofocus -->
-        <textarea
-          class="immich-form-input focus:outline-none"
-          id="name"
-          name="name"
-          rows="5"
-          bind:value={description}
-          autofocus
-        />
-      </div>
-
-      <div class="mt-8 flex w-full gap-4 px-4">
-        <Button color="gray" fullwidth on:click={handleCancel}>Cancel</Button>
-        <Button type="submit" fullwidth>Ok</Button>
-      </div>
-    </form>
-  </div>
-</FullScreenModal>

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -19,6 +19,7 @@
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import { getAssetType } from '$lib/utils/asset-utils';
   import * as luxon from 'luxon';
+  import { autoGrowHeight } from '$lib/utils/autogrow';
 
   const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
 
@@ -98,11 +99,6 @@
     }
   };
 
-  const autoGrow = () => {
-    textArea.style.height = '5px';
-    textArea.style.height = textArea.scrollHeight + 'px';
-  };
-
   const timeOptions = {
     year: 'numeric',
     month: '2-digit',
@@ -293,7 +289,7 @@
               bind:this={textArea}
               bind:value={message}
               placeholder={disabled ? 'Comments are disabled' : 'Say something'}
-              on:input={autoGrow}
+              on:input={() => autoGrowHeight(textArea)}
               on:keypress={handleEnter}
               class="h-[18px] {disabled
                 ? 'cursor-not-allowed'

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -31,14 +31,17 @@
   import ChangeLocation from '../shared-components/change-location.svelte';
   import { handleError } from '../../utils/handle-error';
   import { user } from '$lib/stores/user.store';
+  import { autoGrowHeight } from '$lib/utils/autogrow';
+  import { clickOutside } from '$lib/utils/click-outside';
 
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
   export let albumId: string | null = null;
 
   let showAssetPath = false;
-  let textarea: HTMLTextAreaElement;
+  let textArea: HTMLTextAreaElement;
   let description: string;
+  let originalDescription: string;
   let showEditFaces = false;
   let previousId: string;
 
@@ -61,10 +64,10 @@
     if (newAsset.id && !api.isSharedLink) {
       const { data } = await api.assetApi.getAssetById({ id: asset.id });
       people = data?.people || [];
+
       description = data.exifInfo?.description || '';
-      textarea.value = description;
-      autoGrowHeight();
     }
+    originalDescription = description;
   };
 
   $: handleNewAsset(asset);
@@ -99,6 +102,19 @@
     closeViewer: void;
   }>();
 
+  const handleKeypress = async (event: KeyboardEvent) => {
+    if (event.target !== textArea) {
+      return;
+    }
+    const ctrl = event.ctrlKey;
+    switch (event.key) {
+      case 'Enter':
+        if (ctrl && event.target === textArea) {
+          handleFocusOut();
+        }
+    }
+  };
+
   const getMegapixel = (width: number, height: number): number | undefined => {
     const megapixel = Math.round((height * width) / 1_000_000);
 
@@ -112,21 +128,21 @@
   const handleRefreshPeople = async () => {
     await api.assetApi.getAssetById({ id: asset.id }).then((res) => {
       people = res.data?.people || [];
-      textarea.value = res.data?.exifInfo?.description || '';
+      textArea.value = res.data?.exifInfo?.description || '';
     });
     showEditFaces = false;
   };
 
-  const autoGrowHeight = () => {
-    textarea.style.height = 'auto';
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  };
-
   const handleFocusIn = () => {
     dispatch('descriptionFocusIn');
   };
 
   const handleFocusOut = async () => {
+    textArea.blur();
+    if (description === originalDescription) {
+      return;
+    }
+    originalDescription = description;
     dispatch('descriptionFocusOut');
     try {
       await api.assetApi.updateAsset({
@@ -134,7 +150,7 @@
         updateAssetDto: { description },
       });
     } catch (error) {
-      console.error(error);
+      handleError(error, 'Cannot update the description');
     }
   };
 
@@ -170,6 +186,8 @@
   }
 </script>
 
+<svelte:window on:keydown={handleKeypress} />
+
 <section class="relative p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
   <div class="flex place-items-center gap-2">
     <button
@@ -196,22 +214,26 @@
     </section>
   {/if}
 
-  <section class="mx-4 mt-10" style:display={!isOwner && description === '' ? 'none' : 'block'}>
-    {#if !isOwner || api.isSharedLink}
-      <span class="break-words">{description}</span>
-    {:else}
-      <textarea
-        bind:this={textarea}
-        class="max-h-[500px]
+  {#if isOwner || description !== ''}
+    <section class="px-4 mt-10">
+      {#key asset.id}
+        <textarea
+          disabled={!isOwner || api.isSharedLink}
+          bind:this={textArea}
+          class="max-h-[500px]
       w-full resize-none overflow-hidden border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary"
-        placeholder={!isOwner ? '' : 'Add a description'}
-        on:focusin={handleFocusIn}
-        on:focusout={handleFocusOut}
-        on:input={autoGrowHeight}
-        bind:value={description}
-      />
-    {/if}
-  </section>
+          placeholder={!isOwner ? '' : 'Add a description'}
+          on:focusin={handleFocusIn}
+          on:focusout={handleFocusOut}
+          on:input={() => autoGrowHeight(textArea)}
+          bind:value={description}
+          use:autoGrowHeight
+          use:clickOutside
+          on:outclick={handleFocusOut}
+        />
+      {/key}
+    </section>
+  {/if}
 
   {#if !api.isSharedLink && people.length > 0}
     <section class="px-4 py-4 text-sm">
@@ -315,7 +337,9 @@
         </div>
       </div>
     {:else}
-      <p class="text-sm">DETAILS</p>
+      <div class="flex h-10 w-full items-center justify-between text-sm">
+        <h2>DETAILS</h2>
+      </div>
     {/if}
 
     {#if asset.exifInfo?.dateTimeOriginal && !asset.isReadOnly}