chore(web): Update to Svelte 4 (#3196)

* trying to update to svelte 4

* update dependencies

* remove global transition

* suppress wrning

* chore: install from github

* revert material icon change

* Supress a11y warning

* update

* remove coverage test on web

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

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

@@ -58,6 +58,7 @@
   };
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="group hover:cursor-pointer mt-4 border-[3px] border-transparent dark:hover:border-immich-dark-primary/75 hover:border-immich-primary/75 rounded-3xl p-5 relative"
   on:click={() => dispatchClick('click', album)}

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

@@ -251,6 +251,7 @@
   </div>
 
   {#if showNavigation}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class={`row-start-2 row-span-end col-start-1 flex place-items-center hover:cursor-pointer w-1/4 mb-[60px] ${
         asset.type === AssetTypeEnum.Video ? '' : 'z-[999]'
@@ -303,6 +304,7 @@
   </div>
 
   {#if showNavigation}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class={`row-start-2 row-span-full col-start-4 flex justify-end place-items-center hover:cursor-pointer w-1/4 justify-self-end mb-[60px] ${
         asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'

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

@@ -262,6 +262,7 @@
     {/if}
     {#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)}

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -65,6 +65,7 @@
 </script>
 
 <IntersectionObserver once={false} let:intersecting>
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     style:width="{width}px"
     style:height="{height}px"

web/src/lib/components/assets/thumbnail/video-thumbnail.svelte

@@ -36,6 +36,7 @@
     </span>
   {/if}
 
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <span
     class="pt-2 pr-2"
     on:mouseenter={() => {

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -202,7 +202,7 @@
 
             {#key currentAsset.id}
               <img
-                transition:fade|local
+                transition:fade
                 class="rounded-2xl w-full h-full object-contain transition-all"
                 src={api.getAssetThumbnailUrl(currentAsset.id, 'JPEG')}
                 alt=""

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -153,6 +153,7 @@
     {@const dateGroupTitle = formatGroupTitle(DateTime.fromISO(assetsInDateGroup[0].fileCreatedAt).startOf('day'))}
     <!-- Asset Group By Date -->
 
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="flex flex-col mt-5"
       on:mouseenter={() => {

web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte

@@ -24,6 +24,7 @@
 />
 
 {#if dragStartTarget}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray"
     transition:fade={{ duration: 250 }}

web/src/lib/components/shared-components/empty-placeholder.svelte

@@ -9,6 +9,7 @@
 </script>
 
 {#if actionHandler}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     on:click={actionHandler}
     on:keydown={actionHandler}

web/src/lib/components/shared-components/notification/notification-card.svelte

@@ -69,6 +69,7 @@
   };
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   transition:fade={{ duration: 250 }}
   style:background-color={backgroundColor()}

web/src/lib/components/shared-components/scrollbar/scrollbar.svelte

@@ -91,6 +91,7 @@
   };
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   id="immich-scrubbable-scrollbar"
   class="fixed right-0 bg-immich-bg z-[100] hover:cursor-row-resize select-none"

web/src/lib/components/shared-components/side-bar/side-bar-button.svelte

@@ -15,6 +15,7 @@
   const onButtonClicked = () => dispatch('selected');
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   on:click={onButtonClicked}
   on:keydown={onButtonClicked}

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -103,6 +103,7 @@
           {/if}
 
           {#if !link.expiresAt || !isExpired(link.expiresAt)}
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div
               class="hover:cursor-pointer"
               title="Go to share page"