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/photos-page/actions/add-to-album.svelte

@@ -23,10 +23,9 @@
     closeMenu();
   };
 
-  const handleAddToNewAlbum = (event: CustomEvent) => {
+  const handleAddToNewAlbum = (albumName: string) => {
     showAlbumPicker = false;
 
-    const { albumName }: { albumName: string } = event.detail;
     const assetIds = Array.from(getAssets()).map((asset) => asset.id);
     api.albumApi.createAlbum({ createAlbumDto: { albumName, assetIds } }).then((response) => {
       const { id, albumName } = response.data;
@@ -42,9 +41,8 @@
     });
   };
 
-  const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
+  const handleAddToAlbum = async (album: AlbumResponseDto) => {
     showAlbumPicker = false;
-    const album = event.detail.album;
     const assetIds = Array.from(getAssets()).map((asset) => asset.id);
     await addAssetsToAlbum(album.id, assetIds);
     clearSelect();
@@ -56,9 +54,8 @@
 {#if showAlbumPicker}
   <AlbumSelectionModal
     {shared}
-    on:newAlbum={handleAddToNewAlbum}
-    on:newSharedAlbum={handleAddToNewAlbum}
-    on:album={handleAddToAlbum}
+    on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
+    on:album={({ detail }) => handleAddToAlbum(detail)}
     on:close={handleHideAlbumPicker}
   />
 {/if}

web/src/lib/components/photos-page/asset-select-control-bar.svelte

@@ -36,7 +36,7 @@
   });
 </script>
 
-<ControlAppBar on:close-button-click={clearSelect} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
+<ControlAppBar on:close={clearSelect} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
   <p class="font-medium text-immich-primary dark:text-immich-dark-primary" slot="leading">
     Selected {assets.size.toLocaleString($locale)}
   </p>