chore(server,cli,web): housekeeping and stricter code style (#6751)

* add unicorn to eslint

* fix lint errors for cli

* fix merge

* fix album name extraction

* Update cli/src/commands/upload.command.ts

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

* es2k23

* use lowercase os

* return undefined album name

* fix bug in asset response dto

* auto fix issues

* fix server code style

* es2022 and formatting

* fix compilation error

* fix test

* fix config load

* fix last lint errors

* set string type

* bump ts

* start work on web

* web formatting

* Fix UUIDParamDto as UUIDParamDto

* fix library service lint

* fix web errors

* fix errors

* formatting

* wip

* lints fixed

* web can now start

* alphabetical package json

* rename error

* chore: clean up

---------

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

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

@@ -66,7 +66,7 @@
     close: void;
   }>();
 
-  $: showDeleteReaction = Array(reactions.length).fill(false);
+  $: showDeleteReaction = Array.from({ length: reactions.length }).fill(false);
   $: {
     if (innerHeight && activityHeight) {
       divHeight = innerHeight - activityHeight;
@@ -198,7 +198,7 @@
               {/if}
               {#if reaction.user.id === user.id || albumOwnerId === user.id}
                 <div class="flex items-start w-fit pt-[5px]" title="Delete comment">
-                  <button on:click={() => (!showDeleteReaction[index] ? showOptionsMenu(index) : '')}>
+                  <button on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}>
                     <Icon path={mdiDotsVertical} />
                   </button>
                 </div>
@@ -244,7 +244,7 @@
                 {/if}
                 {#if reaction.user.id === user.id || albumOwnerId === user.id}
                   <div class="flex items-start w-fit" title="Delete like">
-                    <button on:click={() => (!showDeleteReaction[index] ? showOptionsMenu(index) : '')}>
+                    <button on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}>
                       <Icon path={mdiDotsVertical} />
                     </button>
                   </div>

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

@@ -145,11 +145,7 @@
           albumId: album.id,
           type: ReactionType.Like,
         });
-        if (data.length > 0) {
-          isLiked = data[0];
-        } else {
-          isLiked = null;
-        }
+        isLiked = data.length > 0 ? data[0] : null;
       } catch (error) {
         handleError(error, "Can't get Favorite");
       }
@@ -238,8 +234,8 @@
     try {
       const { data } = await api.albumApi.getAllAlbums({ assetId: asset.id });
       appearsInAlbums = data;
-    } catch (e) {
-      console.error('Error getting album that asset belong to', e);
+    } catch (error) {
+      console.error('Error getting album that asset belong to', error);
     }
   };
 
@@ -260,40 +256,48 @@
 
     switch (key) {
       case 'a':
-      case 'A':
+      case 'A': {
         if (shiftKey) {
           toggleArchive();
         }
         return;
-      case 'ArrowLeft':
+      }
+      case 'ArrowLeft': {
         navigateAssetBackward();
         return;
-      case 'ArrowRight':
+      }
+      case 'ArrowRight': {
         navigateAssetForward();
         return;
+      }
       case 'd':
-      case 'D':
+      case 'D': {
         if (shiftKey) {
           downloadFile(asset);
         }
         return;
-      case 'Delete':
+      }
+      case 'Delete': {
         trashOrDelete(shiftKey);
         return;
-      case 'Escape':
+      }
+      case 'Escape': {
         if (isShowDeleteConfirmation) {
           isShowDeleteConfirmation = false;
           return;
         }
         closeViewer();
         return;
-      case 'f':
+      }
+      case 'f': {
         toggleFavorite();
         return;
-      case 'i':
+      }
+      case 'i': {
         isShowActivity = false;
         $isShowDetail = !$isShowDetail;
         return;
+      }
     }
   };
 
@@ -383,8 +387,8 @@
         message: 'Moved to trash',
         type: NotificationType.Info,
       });
-    } catch (e) {
-      handleError(e, 'Unable to trash asset');
+    } catch (error) {
+      handleError(error, 'Unable to trash asset');
     }
   };
 
@@ -398,8 +402,8 @@
         message: 'Permanently deleted asset',
         type: NotificationType.Info,
       });
-    } catch (e) {
-      handleError(e, 'Unable to delete asset');
+    } catch (error) {
+      handleError(error, 'Unable to delete asset');
     } finally {
       isShowDeleteConfirmation = false;
     }
@@ -537,11 +541,7 @@
   const handleStackedAssetMouseEvent = (e: CustomEvent<{ isMouseOver: boolean }>, asset: AssetResponseDto) => {
     const { isMouseOver } = e.detail;
 
-    if (isMouseOver) {
-      previewStackedAsset = asset;
-    } else {
-      previewStackedAsset = undefined;
-    }
+    previewStackedAsset = isMouseOver ? asset : undefined;
   };
 
   const handleUnstack = async () => {

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

@@ -108,10 +108,11 @@
     }
     const ctrl = event.ctrlKey;
     switch (event.key) {
-      case 'Enter':
+      case 'Enter': {
         if (ctrl && event.target === textArea) {
           handleFocusOut();
         }
+      }
     }
   };
 
@@ -222,7 +223,7 @@
           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'}
+          placeholder={isOwner ? 'Add a description' : ''}
           on:focusin={handleFocusIn}
           on:focusout={handleFocusOut}
           on:input={() => autoGrowHeight(textArea)}

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

@@ -20,9 +20,9 @@
         dataUrl = URL.createObjectURL(data);
         return dataUrl;
       } else {
-        throw new Error('Invalid data format');
+        throw new TypeError('Invalid data format');
       }
-    } catch (error) {
+    } catch {
       errorMessage = 'Failed to load asset';
       return '';
     }

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

@@ -20,7 +20,7 @@
   let assetData: string;
   let abortController: AbortController;
   let hasZoomed = false;
-  let copyImageToClipboard: (src: string) => Promise<Blob>;
+  let copyImageToClipboard: (source: string) => Promise<Blob>;
   let canCopyImagesToClipboard: () => boolean;
 
   $: if (imgElement) {
@@ -90,8 +90,8 @@
         message: 'Copied image to clipboard.',
         timeout: 3000,
       });
-    } catch (err) {
-      console.error('Error [photo-viewer]:', err);
+    } catch (error) {
+      console.error('Error [photo-viewer]:', error);
       notificationController.show({
         type: NotificationType.Error,
         message: 'Copying image to clipboard failed.',