fix(web): set album description textarea height correctly (#9880)

* fix(web): set description textarea content correctly

* Deduplicate description textarea

* Add strict types to function

* Add strict types to functions

* Add default parameter values

* Add tests covering AutogrowTextarea

* Add another test and lint the files

* Add a test, fix a typo

* Implement suggestions

* Remove use of $$restProp

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

@@ -1,20 +1,13 @@
 <script lang="ts">
-  import { autoGrowHeight } from '$lib/actions/autogrow';
   import { updateAlbumInfo } from '@immich/sdk';
   import { handleError } from '$lib/utils/handle-error';
-  import { shortcut } from '$lib/actions/shortcut';
+  import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
 
   export let id: string;
   export let description: string;
   export let isOwned: boolean;
 
-  $: newDescription = description;
-
-  const handleUpdateDescription = async () => {
-    if (newDescription === description) {
-      return;
-    }
-
+  const handleUpdateDescription = async (newDescription: string) => {
     try {
       await updateAlbumInfo({
         id,
@@ -24,24 +17,17 @@
       });
     } catch (error) {
       handleError(error, 'Error updating album description');
-      return;
     }
     description = newDescription;
   };
 </script>
 
 {#if isOwned}
-  <textarea
-    class="w-full mt-2 resize-none 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
+  <AutogrowTextarea
+    content={description}
+    class="w-full mt-2 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"
+    onContentUpdate={handleUpdateDescription}
     placeholder="Add a description"
-    use:shortcut={{
-      shortcut: { key: 'Enter', ctrl: true },
-      onShortcut: (e) => e.currentTarget.blur(),
-    }}
   />
 {:else if description}
   <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">