@immich/ui 0.58.1 → 0.58.2

package/dist/components/Modal/Modal.svelte

@@ -10,10 +10,11 @@
   import Logo from '../Logo/Logo.svelte';
   import TooltipProvider from '../Tooltip/TooltipProvider.svelte';
   import { ChildKey, zIndex } from '../../constants.js';
+  import { modalState } from '../../state/modal-state.svelte.js';
   import type { ModalSize } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { Dialog } from 'bits-ui';
-  import { tick, type Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
   import { tv } from 'tailwind-variants';
 
   type Props = {
@@ -74,21 +75,28 @@
   const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
   const footerChildren = $derived(getChildSnippet(ChildKey.ModalFooter));
 
-  const handleClose = async () => {
-    // wait for bits-ui to complete its event cycle
-    await tick();
-    await new Promise((resolve) => setTimeout(resolve, 10));
-
-    onClose?.();
-  };
-
   let cardRef = $state<HTMLElement | null>(null);
 
   const interactOutsideBehavior = $derived(closeOnBackdropClick ? 'close' : 'ignore');
   const escapeKeydownBehavior = $derived(closeOnEsc ? 'close' : 'ignore');
+
+  let layer = $state<number>();
+  const isHidden = $derived(layer !== modalState.layer);
+
+  const onOpenChangeComplete = (isOpen: boolean) => {
+    if (!isOpen && !isHidden) {
+      onClose?.();
+    }
+  };
+
+  onMount(() => {
+    layer = modalState.incrementLayer();
+
+    return () => modalState.decrementLayer();
+  });
 </script>
 
-<Dialog.Root open={true} onOpenChange={(isOpen: boolean) => !isOpen && handleClose()}>
+<Dialog.Root open={!isHidden} {onOpenChangeComplete}>
   <Dialog.Portal>
     <Dialog.Overlay class="{zIndex.ModalBackdrop} fixed start-0 top-0  flex h-dvh max-h-dvh w-screen bg-black/30" />
     <Dialog.Content
@@ -111,7 +119,7 @@
                     <Logo variant="icon" size="tiny" />
                   {/if}
                   <CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold">{title}</CardTitle>
-                  <CloseButton class="-me-2" onclick={() => handleClose()} />
+                  <CloseButton class="-me-2" onclick={() => onClose?.()} />
                 </div>
               {/if}
             </CardHeader>

package/dist/services/modal-manager.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type Component, type ComponentProps } from 'svelte';
 import ConfirmModal from '../components/ConfirmModal/ConfirmModal.svelte';
+import { type Component, type ComponentProps } from 'svelte';
 type OnCloseData<T> = T extends {
     onClose: (data: infer R) => void;
 } ? unknown extends R ? void : R : T extends {

package/dist/services/modal-manager.svelte.js

@@ -1,5 +1,5 @@
-import { mount, unmount } from 'svelte';
 import ConfirmModal from '../components/ConfirmModal/ConfirmModal.svelte';
+import { mount, unmount } from 'svelte';
 class ModalManager {
     show(Component, ...props) {
         return this.open(Component, ...props).onClose;
@@ -10,8 +10,7 @@ class ModalManager {
         const deferred = new Promise((resolve) => {
             onClose = async (...args) => {
                 await unmount(modal);
-                // make sure bits-ui clean up finishes before resolving
-                setTimeout(() => resolve(args[0]), 10);
+                resolve(args[0]);
             };
             modal = mount(Component, {
                 target: document.body,

package/dist/site/constants.d.ts

@@ -45,6 +45,6 @@ export declare const siteCommands: {
     iconClass: string;
     title: string;
     description: string;
-    onAction: () => any;
+    onAction: () => Promise<void>;
     searchText: string;
 }[];

package/dist/site/constants.js

@@ -1,5 +1,4 @@
-import { goto } from '$app/navigation';
-import { asText } from '../utilities/common.js';
+import { asText, navigateTo } from '../utilities/common.js';
 import { mdiOpenInNew } from '@mdi/js';
 export const Constants = {
     Socials: {
@@ -134,6 +133,6 @@ export const siteCommands = [
     iconClass: 'text-indigo-700 dark:text-indigo-200',
     title: site.title,
     description: site.description,
-    onAction: () => goto(site.href),
+    onAction: () => navigateTo(site.href),
     searchText: asText('Site', 'Link', site.title, site.description, site.href),
 }));

package/dist/state/modal-state.svelte.d.ts

@@ -0,0 +1,8 @@
+declare class ModalState {
+    #private;
+    get layer(): number;
+    incrementLayer(): number;
+    decrementLayer(): number;
+}
+export declare const modalState: ModalState;
+export {};

package/dist/state/modal-state.svelte.js

@@ -0,0 +1,16 @@
+class ModalState {
+    #layer = $state(0);
+    get layer() {
+        return this.#layer;
+    }
+    incrementLayer() {
+        return ++this.#layer;
+    }
+    decrementLayer() {
+        if (this.#layer < 1) {
+            throw new Error('Tried to decrement the modal layer <0');
+        }
+        return --this.#layer;
+    }
+}
+export const modalState = new ModalState();

package/dist/utilities/common.d.ts

@@ -1,5 +1,6 @@
 import { MenuItemType, type ActionItem, type IfLike } from '../types.js';
 import type { DateTime } from 'luxon';
+export declare const navigateTo: (url: string) => Promise<void>;
 export declare const resolveUrl: (url: string, currentHostname?: string) => string;
 export declare const isExternalLink: (href: string) => boolean;
 export type Metadata = {

package/dist/utilities/common.js

@@ -1,3 +1,4 @@
+import { goto } from '$app/navigation';
 import { env } from '$env/dynamic/public';
 import { MenuItemType } from '../types.js';
 const getImmichApp = (host) => {
@@ -9,6 +10,16 @@ const getImmichApp = (host) => {
     }
     return host.split('.')[0];
 };
+export const navigateTo = async (url) => {
+    const resolvedUrl = resolveUrl(url);
+    const external = isExternalLink(resolvedUrl);
+    if (external) {
+        window.open(resolvedUrl, '_blank', 'noreferrer');
+    }
+    else {
+        await goto(resolvedUrl);
+    }
+};
 export const resolveUrl = (url, currentHostname) => {
     if (!isExternalLink(url)) {
         return url;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.58.1",
+  "version": "0.58.2",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",