fix(web): small issues everywhere (#7207)

* multiple fix

* fix: album re-render

* fix: revert re-render album

* fix: linter

---------

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

docker/docker-compose.prod.yml

@@ -17,7 +17,7 @@ x-server-build: &server-common
 services:
   immich-server:
     container_name: immich_server
-    command: [ "./start-server.sh" ]
+    command: [ "start.sh", "immich" ]
     <<: *server-common
     ports:
       - 2283:3001
@@ -27,7 +27,7 @@ services:
 
   immich-microservices:
     container_name: immich_microservices
-    command: [ "./start-microservices.sh" ]
+    command: [ "start.sh", "microservices" ]
     <<: *server-common
     # extends:
     #   file: hwaccel.transcoding.yml

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

@@ -291,8 +291,9 @@
               {disabled}
               bind:this={textArea}
               bind:value={message}
+              use:autoGrowHeight={'5px'}
               placeholder={disabled ? 'Comments are disabled' : 'Say something'}
-              on:input={() => autoGrowHeight(textArea)}
+              on:input={() => autoGrowHeight(textArea, '5px')}
               on:keypress={handleEnter}
               class="h-[18px] {disabled
                 ? 'cursor-not-allowed'

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute, AssetAction, ProjectionType } from '$lib/constants';
@@ -179,11 +178,8 @@
       getNumberOfComments();
     }
   }
-  const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo);
 
   onMount(async () => {
-    document.addEventListener('keydown', onKeyboardPress);
-
     slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
       if (value === SlideshowState.PlaySlideshow) {
         slideshowHistory.reset();
@@ -221,10 +217,6 @@
   });
 
   onDestroy(() => {
-    if (browser) {
-      document.removeEventListener('keydown', onKeyboardPress);
-    }
-
     if (slideshowStateUnsubscribe) {
       slideshowStateUnsubscribe();
     }
@@ -255,13 +247,18 @@
     isShowActivity = !isShowActivity;
   };
 
-  const handleKeyboardPress = (event: KeyboardEvent) => {
+  const handleKeypress = (event: KeyboardEvent) => {
     if (shouldIgnoreShortcut(event)) {
       return;
     }
 
     const key = event.key;
     const shiftKey = event.shiftKey;
+    const ctrlKey = event.ctrlKey;
+
+    if (ctrlKey) {
+      return;
+    }
 
     switch (key) {
       case 'a':
@@ -458,18 +455,6 @@
     await handleGetAllAlbums();
   };
 
-  const disableKeyDownEvent = () => {
-    if (browser) {
-      document.removeEventListener('keydown', onKeyboardPress);
-    }
-  };
-
-  const enableKeyDownEvent = () => {
-    if (browser) {
-      document.addEventListener('keydown', onKeyboardPress);
-    }
-  };
-
   const toggleArchive = async () => {
     try {
       const data = await updateAsset({
@@ -570,6 +555,8 @@
   };
 </script>
 
+<svelte:window on:keydown={handleKeypress} />
+
 <section
   id="immich-asset-viewer"
   class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
@@ -738,8 +725,6 @@
         albums={appearsInAlbums}
         on:close={() => ($isShowDetail = false)}
         on:closeViewer={handleCloseViewer}
-        on:descriptionFocusIn={disableKeyDownEvent}
-        on:descriptionFocusOut={enableKeyDownEvent}
       />
     </div>
   {/if}

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

@@ -40,6 +40,7 @@
   import ChangeLocation from '../shared-components/change-location.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
 
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
@@ -101,9 +102,6 @@
 
   const dispatch = createEventDispatcher<{
     close: void;
-    descriptionFocusIn: void;
-    descriptionFocusOut: void;
-    click: AlbumResponseDto;
     closeViewer: void;
   }>();
 
@@ -139,19 +137,18 @@
     showEditFaces = false;
   };
 
-  const handleFocusIn = () => {
-    dispatch('descriptionFocusIn');
-  };
-
   const handleFocusOut = async () => {
     textArea.blur();
     if (description === originalDescription) {
       return;
     }
     originalDescription = description;
-    dispatch('descriptionFocusOut');
     try {
       await updateAsset({ id: asset.id, updateAssetDto: { description } });
+      notificationController.show({
+        type: NotificationType.Info,
+        message: 'Asset description has been updated',
+      });
     } catch (error) {
       handleError(error, 'Cannot update the description');
     }
@@ -220,7 +217,6 @@
           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(textArea)}
           bind:value={description}
@@ -665,12 +661,7 @@
     <p class="pb-4 text-sm">APPEARS IN</p>
     {#each albums as album}
       <a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <div
-          class="flex gap-4 py-2 hover:cursor-pointer"
-          on:click={() => dispatch('click', album)}
-          on:keydown={() => dispatch('click', album)}
-        >
+        <div class="flex gap-4 py-2 hover:cursor-pointer">
           <div>
             <img
               alt={album.albumName}

web/src/lib/utils/autogrow.ts

@@ -1,5 +1,4 @@
 export const autoGrowHeight = (textarea: HTMLTextAreaElement, height = 'auto') => {
-  textarea.scrollHeight;
   textarea.style.height = height;
   textarea.style.height = `${textarea.scrollHeight}px`;
 };

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

@@ -83,8 +83,6 @@
   let album = data.album;
   let description = album.description;
 
-  $: album = data.album;
-
   $: {
     if (!album.isActivityEnabled && $numberOfComments === 0) {
       isShowActivity = false;
@@ -452,7 +450,10 @@
           description,
         },
       });
-
+      notificationController.show({
+        type: NotificationType.Info,
+        message: 'Album description has been updated',
+      });
       album.description = description;
     } catch (error) {
       handleError(error, 'Error updating album description');
@@ -672,7 +673,9 @@
                   placeholder="Add description"
                 />
               {:else if description}
-                <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
+                <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">
+                  {description}
+                </p>
               {/if}
             </section>
           {/if}