fix(web): small fixes for empty placeholder (#7859)

Author: michelheusschen

Diff for: web/src/lib/components/shared-components/empty-placeholder.svelte

@@ -1,28 +1,24 @@
 <script lang="ts">
   import empty1Url from '$lib/assets/empty-1.svg';
 
-  export let actionHandler: undefined | (() => unknown) = undefined;
-  export let text = '';
-  export let alt = '';
+  export let onClick: undefined | (() => unknown) = undefined;
+  export let text: string;
   export let fullWidth = false;
   export let src = empty1Url;
 
-  const noop = () => {};
+  $: width = fullWidth ? 'w-full' : 'w-1/2';
 
-  $: handler = actionHandler || noop;
-  $: width = fullWidth ? 'w-full' : 'w-[50%]';
-
-  const hoverClasses = actionHandler
-    ? `border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer`
+  const hoverClasses = onClick
+    ? `border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25`
     : '';
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  on:click={handler}
-  on:keydown={handler}
+<svelte:element
+  this={onClick ? 'button' : 'div'}
+  on:click={onClick}
   class="{width} m-auto mt-10 flex flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray {hoverClasses}"
 >
-  <img {src} {alt} width="500" draggable="false" />
-  <p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
-</div>
+  <img {src} alt="" width="500" draggable="false" />
+  <p class="text-immich-text-gray-500 dark:text-immich-dark-fg">{text}</p>
+</svelte:element>

Diff for: web/src/routes/(user)/albums/+page.svelte

@@ -375,11 +375,7 @@
 
     <!-- Empty Message -->
   {:else}
-    <EmptyPlaceholder
-      text="Create an album to organize your photos and videos"
-      actionHandler={handleCreateAlbum}
-      alt="Empty albums"
-    />
+    <EmptyPlaceholder text="Create an album to organize your photos and videos" onClick={handleCreateAlbum} />
   {/if}
 </UserPageLayout>
 

Diff for: web/src/routes/(user)/archive/+page.svelte

@@ -45,10 +45,6 @@
 
 <UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
   <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}>
-    <EmptyPlaceholder
-      text="Archive photos and videos to hide them from your Photos view"
-      alt="Empty archive"
-      slot="empty"
-    />
+    <EmptyPlaceholder text="Archive photos and videos to hide them from your Photos view" slot="empty" />
   </AssetGrid>
 </UserPageLayout>

Diff for: web/src/routes/(user)/favorites/+page.svelte

@@ -50,10 +50,6 @@
 
 <UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
   <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}>
-    <EmptyPlaceholder
-      text="Add favorites to quickly find your best pictures and videos"
-      alt="Empty favorites"
-      slot="empty"
-    />
+    <EmptyPlaceholder text="Add favorites to quickly find your best pictures and videos" slot="empty" />
   </AssetGrid>
 </UserPageLayout>

Diff for: web/src/routes/(user)/photos/+page.svelte

@@ -88,10 +88,6 @@
     {#if $user.memoriesEnabled}
       <MemoryLane />
     {/if}
-    <EmptyPlaceholder
-      text="CLICK TO UPLOAD YOUR FIRST PHOTO"
-      actionHandler={() => openFileUploadDialog()}
-      slot="empty"
-    />
+    <EmptyPlaceholder text="CLICK TO UPLOAD YOUR FIRST PHOTO" onClick={() => openFileUploadDialog()} slot="empty" />
   </AssetGrid>
 </UserPageLayout>

Diff for: web/src/routes/(user)/sharing/+page.svelte

@@ -92,7 +92,6 @@
         {#if data.sharedAlbums.length === 0}
           <EmptyPlaceholder
             text="Create a shared album to share photos and videos with people in your network"
-            alt="Empty album list"
             src={empty2Url}
           />
         {/if}

Diff for: web/src/routes/(user)/trash/+page.svelte

@@ -91,12 +91,7 @@
       <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
         Trashed items will be permanently deleted after {$serverConfig.trashDays} days.
       </p>
-      <EmptyPlaceholder
-        text="Trashed photos and videos will show up here."
-        alt="Empty trash can"
-        slot="empty"
-        src={empty3Url}
-      />
+      <EmptyPlaceholder text="Trashed photos and videos will show up here." src={empty3Url} slot="empty" />
     </AssetGrid>
   </UserPageLayout>
 {/if}

Diff for: web/src/routes/admin/library-management/+page.svelte

@@ -462,8 +462,7 @@
       {:else}
         <EmptyPlaceholder
           text="Create an external library to view your photos and videos"
-          actionHandler={() => (toCreateLibrary = true)}
-          alt="Empty albums"
+          onClick={() => (toCreateLibrary = true)}
         />
       {/if}
     </div>

Diff for: web/src/routes/admin/repair/+page.svelte

@@ -203,12 +203,7 @@
     <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
       {#if matches.length + extras.length + orphans.length === 0}
         <div class="w-full">
-          <EmptyPlaceholder
-            fullWidth
-            text="Untracked and missing files will show up here"
-            alt="Empty report"
-            src={empty4Url}
-          />
+          <EmptyPlaceholder fullWidth text="Untracked and missing files will show up here" src={empty4Url} />
         </div>
       {:else}
         <div class="gap-2">