fix(web): empty placeholders (#4470)

web/src/lib/components/photos-page/asset-grid.svelte

@@ -37,6 +37,7 @@
   let showSkeleton = true;
 
   $: timelineY = element?.scrollTop || 0;
+  $: isEmpty = $assetStore.initialized && $assetStore.buckets.length === 0;
 
   const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
   const dispatch = createEventDispatcher<{ select: AssetResponseDto; escape: void }>();
@@ -325,7 +326,7 @@
 <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
 <section
   id="asset-grid"
-  class="scrollbar-hidden ml-4 mr-[60px] h-full overflow-y-auto pb-[60px]"
+  class="scrollbar-hidden h-full overflow-y-auto pb-[60px] {isEmpty ? 'm-0' : 'ml-4 mr-[60px]'}"
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
   bind:this={element}
@@ -347,7 +348,7 @@
     <slot />
 
     <!-- (optional) empty placeholder -->
-    {#if $assetStore.initialized && $assetStore.buckets.length === 0}
+    {#if isEmpty}
       <slot name="empty" />
     {/if}
     <section id="virtual-timeline" style:height={$assetStore.timelineHeight + 'px'}>

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

@@ -4,26 +4,25 @@
   export let actionHandler: undefined | (() => unknown) = undefined;
   export let text = '';
   export let alt = '';
+  export let fullWidth = false;
   export let src = empty1Url;
 
-  let hoverClasses = 'hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer';
+  const noop = () => undefined;
+
+  $: 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`
+    : '';
 </script>
 
-{#if actionHandler}
+<!-- svelte-ignore a11y-no-static-element-interactions -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
-  <div
+  on:click={handler}
-    on:click={actionHandler}
+  on:keydown={handler}
-    on:keydown={actionHandler}
+  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}"
-    class="border dark:border-immich-dark-gray {hoverClasses} m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray"
+>
-  >
+  <img {src} {alt} width="500" draggable="false" />
-    <img {src} {alt} width="500" draggable="false" />
+  <p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
-    <p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
+</div>
-  </div>
-{:else}
-  <div
-    class="m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl border bg-gray-50 p-5 dark:border-immich-dark-gray dark:bg-immich-dark-gray"
-  >
-    <img {src} {alt} width="500" draggable="false" />
-    <p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
-  </div>
-{/if}

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

@@ -1,20 +1,21 @@
 <script lang="ts">
-  import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
-  import Link from 'svelte-material-icons/Link.svelte';
   import { goto } from '$app/navigation';
-  import { api } from '@api';
+  import empty2Url from '$lib/assets/empty-2.svg';
-  import type { PageData } from './$types';
+  import AlbumCard from '$lib/components/album-page/album-card.svelte';
+  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import {
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import empty2Url from '$lib/assets/empty-2.svg';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-  import { flip } from 'svelte/animate';
-  import AlbumCard from '$lib/components/album-page/album-card.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AppRoute } from '$lib/constants';
+  import { api } from '@api';
+  import Link from 'svelte-material-icons/Link.svelte';
+  import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
+  import { flip } from 'svelte/animate';
+  import type { PageData } from './$types';
 
   export let data: PageData;
 
@@ -103,14 +104,11 @@
 
         <!-- Empty List -->
         {#if data.sharedAlbums.length === 0}
-          <div
+          <EmptyPlaceholder
-            class="m-auto mt-10 flex w-2/3 flex-col place-content-center place-items-center rounded-3xl border bg-gray-50 p-5 dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg md:w-[500px]"
+            text="Create a shared album to share photos and videos with people in your network"
-          >
+            alt="Empty album list"
-            <img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
+            src={empty2Url}
-            <p class="text-immich-text-gray-500 text-center">
+          />
-              Create a shared album to share photos and videos with people in your network
-            </p>
-          </div>
         {/if}
       </div>
     </div>