chore(web): move BaseModal to callback pattern (#8696)

* chore(web): move BaseModal to callback to close

* chore: add question mark

web/src/lib/components/shared-components/album-selection-modal.svelte

@@ -16,10 +16,10 @@
   const dispatch = createEventDispatcher<{
     newAlbum: string;
     album: AlbumResponseDto;
-    close: void;
   }>();
 
   export let shared: boolean;
+  export let onClose: () => void;
 
   onMount(async () => {
     albums = await getAllAlbums({ shared: shared || undefined });
@@ -52,7 +52,7 @@
   };
 </script>
 
-<BaseModal id="album-selection-modal" title={getTitle()} on:close>
+<BaseModal id="album-selection-modal" title={getTitle()} {onClose}>
   <div class="mb-2 flex max-h-[400px] flex-col">
     {#if loading}
       {#each { length: 3 } as _}

web/src/lib/components/shared-components/base-modal.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
   import { quintOut } from 'svelte/easing';
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { browser } from '$app/environment';
   import { clickOutside } from '$lib/utils/click-outside';
   import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
   import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
 
-  const dispatch = createEventDispatcher<{
-    close: void;
-  }>();
   /**
    * Unique identifier for the modal.
    */
   export let id: string;
   export let title: string;
+  export let onClose: () => void;
   export let zIndex = 9999;
   /**
    * If true, the logo will be displayed next to the modal title.
@@ -57,14 +55,14 @@
   >
     <div
       use:clickOutside={{
-        onOutclick: () => dispatch('close'),
-        onEscape: () => dispatch('close'),
+        onOutclick: onClose,
+        onEscape: onClose,
       }}
       class="min-h-[200px] w-[450px] overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar scroll-pb-20"
       style="max-height: min(95vh, 800px);"
       tabindex="-1"
     >
-      <ModalHeader id={titleId} {title} {showLogo} {icon} on:close />
+      <ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
 
       <div>
         <slot />

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -15,6 +15,7 @@
   import SettingInputField, { SettingInputFieldType } from '../settings/setting-input-field.svelte';
   import SettingSwitch from '../settings/setting-switch.svelte';
 
+  export let onClose: () => void;
   export let albumId: string | undefined = undefined;
   export let assetIds: string[] = [];
   export let editingLink: SharedLinkResponseDto | undefined = undefined;
@@ -30,8 +31,6 @@
   let enablePassword = false;
 
   const dispatch = createEventDispatcher<{
-    close: void;
-    escape: void;
     created: void;
   }>();
 
@@ -146,7 +145,7 @@
         message: 'Edited',
       });
 
-      dispatch('close');
+      onClose();
     } catch (error) {
       handleError(error, 'Failed to edit shared link');
     }
@@ -160,7 +159,7 @@
   };
 </script>
 
-<BaseModal id="create-shared-link-modal" title={getTitle()} icon={mdiLink} on:close>
+<BaseModal id="create-shared-link-modal" title={getTitle()} icon={mdiLink} {onClose}>
   <section class="mx-6 mb-6">
     {#if shareType === SharedLinkType.Album}
       {#if !editingLink}

web/src/lib/components/shared-components/full-screen-modal.svelte

@@ -55,7 +55,7 @@
       aria-modal="true"
       aria-labelledby={titleId}
     >
-      <ModalHeader id={titleId} {title} {showLogo} {icon} on:close={() => onClose?.()} />
+      <ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
       <div class="p-5 pt-0">
         <slot />
       </div>

web/src/lib/components/shared-components/modal-header.svelte

@@ -2,18 +2,14 @@
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { createEventDispatcher } from 'svelte';
   import { mdiClose } from '@mdi/js';
 
-  const dispatch = createEventDispatcher<{
-    close: void;
-  }>();
-
   /**
    * Unique identifier for the header text.
    */
   export let id: string;
   export let title: string;
+  export let onClose: () => void;
   /**
    * If true, the logo will be displayed next to the modal title.
    */
@@ -36,5 +32,5 @@
     </h1>
   </div>
 
-  <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} title="Close" />
+  <CircleIconButton on:click={onClose} icon={mdiClose} size={'20'} title="Close" />
 </div>

web/src/lib/components/shared-components/profile-image-cropper.svelte

@@ -3,17 +3,15 @@
   import { handleError } from '$lib/utils/handle-error';
   import { createProfileImage, type AssetResponseDto } from '@immich/sdk';
   import domtoimage from 'dom-to-image';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import PhotoViewer from '../asset-viewer/photo-viewer.svelte';
   import Button from '../elements/buttons/button.svelte';
   import BaseModal from './base-modal.svelte';
   import { NotificationType, notificationController } from './notification/notification';
 
   export let asset: AssetResponseDto;
+  export let onClose: () => void;
 
-  const dispatch = createEventDispatcher<{
-    close: void;
-  }>();
   let imgElement: HTMLDivElement;
 
   onMount(() => {
@@ -67,11 +65,11 @@
     } catch (error) {
       handleError(error, 'Error setting profile picture.');
     }
-    dispatch('close');
+    onClose();
   };
 </script>
 
-<BaseModal id="profile-image-cropper" title="Set profile picture" on:close>
+<BaseModal id="profile-image-cropper" title="Set profile picture" {onClose}>
   <div class="flex place-items-center items-center justify-center">
     <div
       class="relative flex aspect-square w-1/2 overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"