chore: more flexible modal manager types (#19123)

* fix: required argument in onClose modal function

* chore: more flexible modal manager types

web/src/lib/components/admin-page/settings/auth/auth-settings.svelte

@@ -36,7 +36,7 @@
   const handleSave = async (skipConfirm: boolean) => {
     const allMethodsDisabled = !config.oauth.enabled && !config.passwordLogin.enabled;
     if (allMethodsDisabled && !skipConfirm) {
-      const isConfirmed = await modalManager.show(AuthDisableLoginConfirmModal, {});
+      const isConfirmed = await modalManager.show(AuthDisableLoginConfirmModal);
       if (!isConfirmed) {
         return;
       }

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

@@ -104,7 +104,7 @@
     if (document.fullscreenElement) {
       await document.exitFullscreen();
     }
-    await modalManager.show(SlideshowSettingsModal, {});
+    await modalManager.show(SlideshowSettingsModal);
   };
 </script>
 

web/src/lib/components/photos-page/actions/change-description-action.svelte

@@ -18,7 +18,7 @@
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
   const handleUpdateDescription = async () => {
-    const description = await modalManager.show(AssetUpdateDecriptionConfirmModal, {});
+    const description = await modalManager.show(AssetUpdateDecriptionConfirmModal);
     if (description) {
       const ids = getSelectedAssets(getOwnedAssets(), $user);
 

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

@@ -703,7 +703,7 @@
     }
 
     isShortcutModalOpen = true;
-    await modalManager.show(ShortcutsModal, {});
+    await modalManager.show(ShortcutsModal);
     isShortcutModalOpen = false;
   };
 

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -5,11 +5,10 @@
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { Viewport } from '$lib/managers/timeline-manager/types';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handlePromiseError } from '$lib/utils';

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -51,7 +51,7 @@
           shape="round"
           onclick={async () => {
             onClose();
-            await modalManager.show(AvatarEditModal, {});
+            await modalManager.show(AvatarEditModal);
           }}
         />
       </div>

web/src/lib/components/shared-components/side-bar/purchase-info.svelte

@@ -27,7 +27,7 @@
   const { isPurchased } = purchaseStore;
 
   const openPurchaseModal = async () => {
-    await modalManager.show(PurchaseModal, {});
+    await modalManager.show(PurchaseModal);
     showMessage = false;
   };
 

web/src/lib/managers/modal-manager.svelte.ts

@@ -6,15 +6,21 @@ type OnCloseData<T> = T extends { onClose: (data?: infer R) => void }
   : T extends { onClose: (data: infer R) => void }
     ? R
     : never;
-type ExtendsEmptyObject<T> = keyof T extends never ? Record<string, never> : T;
+type ExtendsEmptyObject<T> = keyof T extends never ? never : T;
 type StripValueIfOptional<T> = T extends undefined ? undefined : T;
 
+// if the modal does not expect any props, makes the props param optional but also allows passing `{}` and `undefined`
+type OptionalParamIfEmpty<T> = ExtendsEmptyObject<T> extends never ? [] | [Record<string, never> | undefined] : [T];
+
 class ModalManager {
-  show<T extends object>(Component: Component<T>, props: ExtendsEmptyObject<Omit<T, 'onClose'>>) {
+  show<T extends object>(Component: Component<T>, ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>) {
-    return this.open(Component, props).onClose;
+    return this.open(Component, ...props).onClose;
   }
 
-  open<T extends object, K = OnCloseData<T>>(Component: Component<T>, props: ExtendsEmptyObject<Omit<T, 'onClose'>>) {
+  open<T extends object, K = OnCloseData<T>>(
+    Component: Component<T>,
+    ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>
+  ) {
     let modal: object = {};
     let onClose: (...args: [StripValueIfOptional<K>]) => Promise<void>;
 
@@ -27,7 +33,7 @@ class ModalManager {
       modal = mount(Component, {
         target: document.body,
         props: {
-          ...(props as T),
+          ...((props?.[0] ?? {}) as T),
           onClose,
         },
       });

web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -200,7 +200,7 @@
           icon={mdiInformationOutline}
           aria-label={$t('deduplication_info')}
           size="small"
-          onclick={() => modalManager.show(DuplicatesInformationModal, {})}
+          onclick={() => modalManager.show(DuplicatesInformationModal)}
         />
       </div>
 

web/src/routes/admin/library-management/+page.svelte

@@ -207,7 +207,7 @@
   };
 
   const onCreateNewLibraryClicked = async () => {
-    const result = await modalManager.show(LibraryUserPickerModal, {});
+    const result = await modalManager.show(LibraryUserPickerModal);
     if (result) {
       await handleCreate(result);
     }

web/src/routes/admin/users/+page.svelte

@@ -58,7 +58,7 @@
   };
 
   const handleCreate = async () => {
-    await modalManager.show(UserCreateModal, {});
+    await modalManager.show(UserCreateModal);
     await refresh();
   };