feat(web): add types to dispatcher (#5700)

* feat: add types to dispatcher

* fix: create album name

* pr feedback

* pr feedback

* pr feedback

* fix: api key name

* remove newSharedAlbum

* pr feedback

* fix: api key creation

* on:close

* fix: owner

* fix: onclose

* remove unused code

---------

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

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

@@ -9,7 +9,10 @@
   export let isShowActivity: boolean | undefined;
   export let disabled: boolean;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    openActivityTab: void;
+    favorite: void;
+  }>();
 </script>
 
 <div

web/src/lib/components/asset-viewer/album-list-item.svelte

@@ -2,7 +2,9 @@
   import { AlbumResponseDto, ThumbnailFormat, api } from '@api';
   import { createEventDispatcher } from 'svelte';
 
-  const dispatcher = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    album: void;
+  }>();
 
   export let album: AlbumResponseDto;
   export let variant: 'simple' | 'full' = 'full';
@@ -24,7 +26,7 @@
 </script>
 
 <button
-  on:click={() => dispatcher('album')}
+  on:click={() => dispatch('album')}
   class="flex w-full gap-4 px-6 py-2 text-left transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
 >
   <div class="h-12 w-12 shrink-0 rounded-xl bg-slate-300">

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

@@ -39,7 +39,7 @@
   type MenuItemEvent = 'addToAlbum' | 'addToSharedAlbum' | 'asProfileImage' | 'runJob' | 'playSlideShow' | 'unstack';
 
   const dispatch = createEventDispatcher<{
-    goBack: void;
+    back: void;
     stopMotionPhoto: void;
     playMotionPhoto: void;
     download: void;
@@ -78,7 +78,7 @@
   class="z-[1001] flex h-16 place-items-center justify-between bg-gradient-to-b from-black/40 px-3 transition-transform duration-200"
 >
   <div class="text-white">
-    <CircleIconButton isOpacity={true} icon={mdiArrowLeft} on:click={() => dispatch('goBack')} />
+    <CircleIconButton isOpacity={true} icon={mdiArrowLeft} on:click={() => dispatch('back')} />
   </div>
   <div class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white">
     {#if asset.isOffline}

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

@@ -424,19 +424,17 @@
     addToSharedAlbum = shared;
   };
 
-  const handleAddToNewAlbum = (event: CustomEvent) => {
+  const handleAddToNewAlbum = (albumName: string) => {
     isShowAlbumPicker = false;
 
-    const { albumName }: { albumName: string } = event.detail;
     api.albumApi.createAlbum({ createAlbumDto: { albumName, assetIds: [asset.id] } }).then((response) => {
       const album = response.data;
       goto(`${AppRoute.ALBUMS}/${album.id}`);
     });
   };
 
-  const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
+  const handleAddToAlbum = async (album: AlbumResponseDto) => {
     isShowAlbumPicker = false;
-    const album = event.detail.album;
 
     await addAssetsToAlbum(album.id, [asset.id]);
     await getAllAlbums();
@@ -575,7 +573,7 @@
         showDetailButton={shouldShowDetailButton}
         showSlideshow={!!assetStore}
         hasStackChildren={$stackAssetsStore.length > 0}
-        on:goBack={closeViewer}
+        on:back={closeViewer}
         on:showDetail={showDetailInfoHandler}
         on:download={() => downloadFile(asset)}
         on:delete={trashOrDelete}
@@ -759,9 +757,8 @@
   {#if isShowAlbumPicker}
     <AlbumSelectionModal
       shared={addToSharedAlbum}
-      on:newAlbum={handleAddToNewAlbum}
-      on:newSharedAlbum={handleAddToNewAlbum}
-      on:album={handleAddToAlbum}
+      on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
+      on:album={({ detail }) => handleAddToAlbum(detail)}
       on:close={() => (isShowAlbumPicker = false)}
     />
   {/if}
@@ -784,11 +781,7 @@
   {/if}
 
   {#if isShowProfileImageCrop}
-    <ProfileImageCropper
-      {asset}
-      on:close={() => (isShowProfileImageCrop = false)}
-      on:close-viewer={handleCloseViewer}
-    />
+    <ProfileImageCropper {asset} on:close={() => (isShowProfileImageCrop = false)} />
   {/if}
 </section>
 

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import { locale } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { getAssetFilename } from '$lib/utils/asset-utils';
@@ -53,7 +52,7 @@
     }
   }
 
-  $: isOwner = $page?.data?.user?.id === asset.ownerId;
+  $: isOwner = $user.id === asset.ownerId;
 
   $: {
     // Get latest description from server