From aa02ccb7314b2d627be5a2c5fab0fc8974456ade Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Fri, 19 Jan 2024 22:30:00 +0100
Subject: [PATCH] fix(web): album description (#6512)

fix: album description
---
 .../asset-viewer/activity-viewer.svelte       | 12 +++---
 .../asset-viewer/asset-viewer.svelte          |  2 +-
 .../(user)/albums/[albumId]/+page.svelte      | 37 +++++++++++++++++--
 3 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/web/src/lib/components/asset-viewer/activity-viewer.svelte
index 7b49fdb4d1..ba8ed47f09 100644
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@@ -172,12 +172,12 @@
     </div>
     {#if innerHeight}
       <div
-        class="overflow-y-auto immich-scrollbar relative w-full"
+        class="overflow-y-auto immich-scrollbar relative w-full px-2"
         style="height: {divHeight}px;padding-bottom: {chatHeight}px"
       >
         {#each reactions as reaction, index (reaction.id)}
           {#if reaction.type === 'comment'}
-            <div class="flex dark:bg-gray-800 bg-gray-200 p-3 mx-2 mt-3 rounded-lg gap-4 justify-start">
+            <div class="flex dark:bg-gray-800 bg-gray-200 py-3 pl-3 mt-3 rounded-lg gap-4 justify-start">
               <div class="flex items-center">
                 <UserAvatar user={reaction.user} size="sm" />
               </div>
@@ -215,7 +215,7 @@
 
             {#if (index != reactions.length - 1 && !shouldGroup(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
               <div
-                class=" px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
+                class="pt-1 px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
                 title={new Date(reaction.createdAt).toLocaleDateString(undefined, timeOptions)}
               >
                 {timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
@@ -223,7 +223,7 @@
             {/if}
           {:else if reaction.type === 'like'}
             <div class="relative">
-              <div class="flex p-3 mx-2 mt-3 rounded-full gap-4 items-center text-sm">
+              <div class="flex py-3 pl-3 mt-3 gap-4 items-center text-sm">
                 <div class="text-red-600"><Icon path={mdiHeart} size={20} /></div>
 
                 <div class="w-full" title={`${reaction.user.name} (${reaction.user.email})`}>
@@ -260,7 +260,7 @@
               </div>
               {#if (index != reactions.length - 1 && isTenMinutesApart(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
                 <div
-                  class=" px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
+                  class="pt-1 px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
                   title={new Date(reaction.createdAt).toLocaleDateString(navigator.language, timeOptions)}
                 >
                   {timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
@@ -274,7 +274,7 @@
   </div>
 
   <div class="absolute w-full bottom-0">
-    <div class="flex items-center justify-center p-2 mr-2" bind:clientHeight={chatHeight}>
+    <div class="flex items-center justify-center p-2" bind:clientHeight={chatHeight}>
       <div class="flex p-2 gap-4 h-fit bg-gray-200 text-immich-dark-gray rounded-3xl w-full">
         <div>
           <UserAvatar {user} size="md" showTitle={false} />
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index fc298f471d..9de100c2a6 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -741,7 +741,7 @@
     <div
       transition:fly={{ duration: 150 }}
       id="activity-panel"
-      class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg pl-4"
+      class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
       translate="yes"
     >
       <ActivityViewer
diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte
index c878b98f6e..89d048eaae 100644
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@@ -100,6 +100,7 @@
   let reactions: ActivityResponseDto[] = [];
   let globalWidth: number;
   let assetGridWidth: number;
+  let textarea: HTMLTextAreaElement;
 
   const assetStore = new AssetStore({ albumId: album.id });
   const assetInteractionStore = createAssetInteractionStore();
@@ -122,7 +123,13 @@
   $: showActivityStatus =
     album.sharedUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || $numberOfComments > 0);
 
-  afterNavigate(({ from }) => {
+  $: {
+    if (textarea) {
+      textarea.value = album.description;
+      autoGrowHeight();
+    }
+  }
+  $: afterNavigate(({ from }) => {
     assetViewingStore.showAssetViewer(false);
 
     let url: string | undefined = from?.url?.pathname;
@@ -142,6 +149,13 @@
     }
   });
 
+  const autoGrowHeight = () => {
+    // little hack so that the height of the text area is correctly initialized
+    textarea.scrollHeight;
+    textarea.style.height = '5px';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  };
+
   const handleToggleEnableActivity = async () => {
     try {
       const { data } = await api.albumApi.updateAlbumInfo({
@@ -636,7 +650,12 @@
                   disabled={!isOwned}
                   title="Edit description"
                 >
-                  {album.description || 'Add description'}
+                  <textarea
+                    class="w-full bg-transparent resize-none overflow-hidden outline-none"
+                    bind:this={textarea}
+                    bind:value={album.description}
+                    placeholder="Add description"
+                  />
                 </button>
               {/if}
             </section>
@@ -680,7 +699,7 @@
       <div
         transition:fly={{ duration: 150 }}
         id="activity-panel"
-        class="z-[2] w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg pl-4"
+        class="z-[2] w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
         translate="yes"
       >
         <ActivityViewer
@@ -753,3 +772,15 @@
 {/if}
 
 <UpdatePanel {assetStore} />
+
+<style>
+  ::placeholder {
+    color: rgb(60, 60, 60);
+    opacity: 0.6;
+  }
+
+  ::-ms-input-placeholder {
+    /* Edge 12 -18 */
+    color: white;
+  }
+</style>