feat(web): add emptyplaceholder when no assets (#3155)

* add emptyplace holder when no assets

* remove unecessary number type

* wording

---------

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

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

@@ -12,18 +12,31 @@
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import { assetInteractionStore, isMultiSelectStoreState, selectedAssets } from '$lib/stores/asset-interaction.store';
   import { assetStore } from '$lib/stores/assets.store';
-  import { onDestroy } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
   import Plus from 'svelte-material-icons/Plus.svelte';
   import type { PageData } from './$types';
+  import { api } from '@api';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import { openFileUploadDialog } from '$lib/utils/file-uploader';
 
   export let data: PageData;
+  let assetCount = 1;
+
+  onMount(async () => {
+    const { data: allAssetCount } = await api.assetApi.getAssetCountByUserId();
+    assetCount = allAssetCount.total;
+  });
 
   onDestroy(() => {
     assetInteractionStore.clearMultiselect();
   });
 
   $: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
+
+  const handleUpload = async () => {
+    openFileUploadDialog();
+  };
 </script>
 
 <UserPageLayout user={data.user} hideNavbar={$isMultiSelectStoreState} showUploadButton>
@@ -45,6 +58,11 @@
       </AssetSelectControlBar>
     {/if}
   </svelte:fragment>
-
-  <AssetGrid slot="content" showMemoryLane />
+  <svelte:fragment slot="content">
+    {#if assetCount}
+      <AssetGrid showMemoryLane />
+    {:else}
+      <EmptyPlaceholder text="CLICK TO UPLOAD YOUR FIRST PHOTO" actionHandler={handleUpload} />
+    {/if}
+  </svelte:fragment>
 </UserPageLayout>