@immich/ui 0.49.1 → 0.49.3

package/dist/components/CommandPalette/CommandPaletteContext.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
-  import { commandPaletteManager, type CommandItem } from '../../services/command-palette-manager.svelte';
+  import { commandPaletteManager } from '../../services/command-palette-manager.svelte';
+  import type { ActionItem } from '../../types.js';
   import { untrack } from 'svelte';
 
   type Props = {
-    commands?: CommandItem[];
-    global?: boolean;
+    commands?: ActionItem[];
   };
 
-  const { commands = [], global }: Props = $props();
+  const { commands = [] }: Props = $props();
 
   $effect(() => {
     // prevent reactivity loop
-    const addCommands = (commands: CommandItem[], global: boolean = false) =>
-      untrack(() => commandPaletteManager.addCommands(commands, { global }));
+    const addCommands = (commands: ActionItem[]) => untrack(() => commandPaletteManager.addCommands(commands));
 
-    return addCommands(commands, global);
+    return addCommands(commands);
   });
 </script>

package/dist/components/CommandPalette/CommandPaletteContext.svelte.d.ts

@@ -1,7 +1,6 @@
-import { type CommandItem } from '../../services/command-palette-manager.svelte';
+import type { ActionItem } from '../../types.js';
 type Props = {
-    commands?: CommandItem[];
-    global?: boolean;
+    commands?: ActionItem[];
 };
 declare const CommandPaletteContext: import("svelte").Component<Props, {}, "">;
 type CommandPaletteContext = ReturnType<typeof CommandPaletteContext>;

package/dist/components/CommandPalette/CommandPaletteItem.svelte

@@ -6,12 +6,12 @@
   import IconButton from '../IconButton/IconButton.svelte';
   import Kbd from '../Kbd/Kbd.svelte';
   import Text from '../Text/Text.svelte';
-  import type { CommandItemResponse } from '../../services/command-palette-manager.svelte';
+  import type { ActionItem } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { mdiClose } from '@mdi/js';
 
   type Props = {
-    item: CommandItemResponse;
+    item: ActionItem;
     selected: boolean;
     onSelect: () => void;
     onRemove?: () => void;

package/dist/components/CommandPalette/CommandPaletteItem.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { CommandItemResponse } from '../../services/command-palette-manager.svelte';
+import type { ActionItem } from '../../types.js';
 type Props = {
-    item: CommandItemResponse;
+    item: ActionItem;
     selected: boolean;
     onSelect: () => void;
     onRemove?: () => void;

package/dist/components/Toast/ToastPanel.svelte

@@ -2,16 +2,25 @@
   import Toast from './Toast.svelte';
   import { zIndex } from '../../constants.js';
   import { isCustomToast } from '../../services/toast-manager.svelte.js';
-  import type { ToastId, ToastItem } from '../../types.js';
+  import type { ToastPanelProps } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { twMerge } from 'tailwind-merge';
 
-  type Props = {
-    items: Array<ToastItem & ToastId>;
-  };
+  const { items, class: className, ...props }: ToastPanelProps = $props();
 
-  const { items }: Props = $props();
+  const isEmpty = $derived(items.length === 0);
 </script>
 
-<div class="absolute top-0 right-0 flex flex-col items-end justify-end gap-2 p-4 {zIndex.ToastPanel}">
+<div
+  class={twMerge(
+    cleanClass(
+      isEmpty ? 'hidden' : 'absolute top-0 right-0 flex flex-col items-end justify-end gap-2 p-4',
+      zIndex.ToastPanel,
+      className,
+    ),
+  )}
+  {...props}
+>
   {#each items as item (item.id)}
     {#if isCustomToast(item)}
       <item.component {...item.props} />

package/dist/components/Toast/ToastPanel.svelte.d.ts

@@ -1,7 +1,4 @@
-import type { ToastId, ToastItem } from '../../types.js';
-type Props = {
-    items: Array<ToastItem & ToastId>;
-};
-declare const ToastPanel: import("svelte").Component<Props, {}, "">;
+import type { ToastPanelProps } from '../../types.js';
+declare const ToastPanel: import("svelte").Component<ToastPanelProps, {}, "">;
 type ToastPanel = ReturnType<typeof ToastPanel>;
 export default ToastPanel;

package/dist/services/command-palette-manager.svelte.d.ts

@@ -1,36 +1,21 @@
-import { type Shortcut } from '../actions/shortcut.js';
-import type { IfLike, MaybeArray, TranslationProps } from '../types.js';
-export type CommandItem = {
-    icon: string;
-    iconClass?: string;
-    type: string;
-    title: string;
-    description?: string;
-    text?: string;
-    shortcuts?: MaybeArray<Shortcut>;
-    shortcutOptions?: {
-        ignoreInputFields?: boolean;
-        preventDefault?: boolean;
-    };
-    id?: string;
-} & IfLike & ({
-    href: string;
-} | {
-    action: (command: CommandItemResponse) => void;
-});
-export type CommandItemResponse = CommandItem & {
-    id: string;
-    isGlobal: boolean;
-};
+import type { ActionItem, MaybeArray, TranslationProps } from '../types.js';
 export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default' | 'command_palette_to_select' | 'command_palette_to_close' | 'command_palette_to_navigate' | 'command_palette_to_show_all' | 'global'>;
 export declare const asText: (...items: unknown[]) => string;
 declare class CommandPaletteManager {
     #private;
     selectedIndex: number;
-    items: CommandItemResponse[];
-    filteredItems: CommandItemResponse[];
-    recentItems: CommandItemResponse[];
-    results: CommandItemResponse[];
+    items: (ActionItem & {
+        id: string;
+    })[];
+    filteredItems: (ActionItem & {
+        id: string;
+    })[];
+    recentItems: (ActionItem & {
+        id: string;
+    })[];
+    results: (ActionItem & {
+        id: string;
+    })[];
     get isEnabled(): boolean;
     enable(): void;
     get query(): string;
@@ -47,9 +32,7 @@ declare class CommandPaletteManager {
     up(): void;
     down(): void;
     reset(): void;
-    addCommands(itemOrItems: MaybeArray<CommandItem>, options?: {
-        global: boolean;
-    }): () => void;
+    addCommands(itemOrItems: MaybeArray<ActionItem>): () => void;
     removeCommands(itemOrItems: MaybeArray<{
         id: string;
     }>): void;

package/dist/services/command-palette-manager.svelte.js

@@ -1,4 +1,3 @@
-import { goto } from '$app/navigation';
 import { matchesShortcut, shortcuts, shouldIgnoreEvent } from '../actions/shortcut.js';
 import CommandPaletteModal from '../internal/CommandPaletteModal.svelte';
 import { generateId, isEnabled } from '../utilities/internal.js';
@@ -10,11 +9,11 @@ export const asText = (...items) => {
         .join('|')
         .toLowerCase();
 };
-const isMatch = ({ title, description, type, text = asText(title, description, type) }, query) => {
+const isMatch = ({ title, description, type, searchText = asText(title, description, type) }, query) => {
     if (!query) {
         return true;
     }
-    return text.includes(query);
+    return searchText.includes(query);
 };
 class CommandPaletteManager {
     #query = $state('');
@@ -84,18 +83,7 @@ class CommandPaletteManager {
         if (preventDefault) {
             event.preventDefault();
         }
-        await this.#executeCommand(command);
-    }
-    async #executeCommand(command) {
-        if ('href' in command) {
-            if (!command.href.startsWith('/')) {
-                window.open(command.href, '_blank');
-                return;
-            }
-            await goto(command.href);
-            return;
-        }
-        command.action(command);
+        await command.onAction(command);
     }
     setTranslations(translations = {}) {
         this.#translations = translations;
@@ -143,8 +131,7 @@ class CommandPaletteManager {
         if (!selected) {
             return;
         }
-        const globalItem = this.#globalLayer.items.find(({ id }) => id !== selected.id);
-        if (globalItem) {
+        if (selected.isGlobal) {
             this.#globalLayer.recentItems = this.#globalLayer.recentItems.filter(({ id }) => id !== selected.id);
             this.#globalLayer.recentItems.unshift(selected);
         }
@@ -152,7 +139,7 @@ class CommandPaletteManager {
             this.#layers.at(-1).recentItems = this.#layers.at(-1).recentItems.filter(({ id }) => id !== selected.id);
             this.#layers.at(-1)?.recentItems.unshift(selected);
         }
-        await this.#executeCommand(selected);
+        await selected.onAction(selected);
         await this.close();
     }
     remove(index) {
@@ -178,19 +165,16 @@ class CommandPaletteManager {
         this.#globalLayer = { items: [], recentItems: [] };
         this.#query = '';
     }
-    addCommands(itemOrItems, options = { global: false }) {
+    addCommands(itemOrItems) {
         const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
         const itemsWithId = items.map((item) => ({
             ...item,
-            id: item.id ?? generateId(),
-            isGlobal: options.global,
+            id: generateId(),
         }));
-        if (options.global) {
-            this.#globalLayer.items.push(...itemsWithId);
-        }
-        else {
-            this.#layers.at(-1).items.push(...itemsWithId);
-        }
+        const globalItems = itemsWithId.filter(({ isGlobal }) => isGlobal);
+        const localItems = itemsWithId.filter(({ isGlobal }) => !isGlobal);
+        this.#globalLayer.items.push(...globalItems);
+        this.#layers.at(-1).items.push(...localItems);
         return () => this.removeCommands(itemsWithId);
     }
     #removeCommands(layer, ids) {

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

@@ -1,16 +1,17 @@
-import type { ToastCustom, ToastItem, ToastOptions, ToastShow } from '../types.js';
+import type { ToastCustom, ToastItem, ToastOptions, ToastPanelProps, ToastShow } from '../types.js';
 export declare const isCustomToast: (item: ToastItem) => item is ToastCustom;
 declare class ToastManager {
     #private;
     show(item: ToastShow, options?: ToastOptions): void;
     custom(item: ToastCustom, options?: ToastOptions): void;
+    setOptions(options: Omit<ToastPanelProps, 'items'>): void;
     open(item: ToastItem, options?: ToastOptions): void;
+    mount(): Promise<void>;
     unmount(): Promise<void>;
     success(item?: string | ToastShow, options?: ToastOptions): void;
     info(item?: string | ToastShow, options?: ToastOptions): void;
     warning(item?: string | ToastShow, options?: ToastOptions): void;
     danger(item?: string | ToastShow, options?: ToastOptions): void;
-    mount(): Promise<void>;
     private remove;
 }
 export declare const toastManager: ToastManager;

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

@@ -13,6 +13,9 @@ class ToastManager {
     custom(item, options) {
         return this.open(item, options);
     }
+    setOptions(options) {
+        Object.assign(this.#props, options);
+    }
     open(item, options) {
         const { timeout = 3000, closable = true, id = generateId() } = options || {};
         const toast = item;
@@ -32,6 +35,14 @@ class ToastManager {
             setTimeout(() => this.remove(toast), timeout);
         }
     }
+    async mount() {
+        if (!this.#ref) {
+            this.#ref = await mount(ToastPanel, {
+                target: document.body,
+                props: this.#props,
+            });
+        }
+    }
     async unmount() {
         if (this.#ref) {
             await unmount(this.#ref);
@@ -49,14 +60,6 @@ class ToastManager {
     danger(item, options) {
         this.show({ title: t('toast_danger_title'), color: 'danger', ...expand(item) }, options);
     }
-    async mount() {
-        if (!this.#ref) {
-            this.#ref = await mount(ToastPanel, {
-                target: document.body,
-                props: this.#props,
-            });
-        }
-    }
     remove(target) {
         this.#props.items = this.#props.items.filter((item) => item.id !== target.id);
     }

package/dist/site/constants.d.ts

@@ -44,6 +44,6 @@ export declare const siteCommands: {
     iconClass: string;
     title: string;
     description: string;
-    href: string;
-    text: string;
+    onAction: () => any;
+    searchText: string;
 }[];

package/dist/site/constants.js

@@ -1,3 +1,4 @@
+import { goto } from '$app/navigation';
 import { asText } from '../services/command-palette-manager.svelte.js';
 import { mdiOpenInNew } from '@mdi/js';
 export const Constants = {
@@ -132,6 +133,6 @@ export const siteCommands = [
     iconClass: 'text-indigo-700 dark:text-indigo-200',
     title: site.title,
     description: site.description,
-    href: site.href,
-    text: asText('Site', 'Link', site.title, site.description, site.href),
+    onAction: () => goto(site.href),
+    searchText: asText('Site', 'Link', site.title, site.description, site.href),
 }));

package/dist/types.d.ts

@@ -2,6 +2,7 @@ import type { Translations } from './services/translation.svelte.js';
 import type { DateTime } from 'luxon';
 import type { Component, Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLTextareaAttributes } from 'svelte/elements';
+import type { Shortcut } from './actions/shortcut.js';
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 export type TextColor = Color | 'muted';
 export type TextVariant = 'italic';
@@ -180,6 +181,9 @@ export type ToastContainerProps = ToastCommonProps & {
     shape?: Shape;
     size?: ContainerSize;
 } & Omit<HTMLAttributes<HTMLElement>, 'title' | 'color' | 'size'>;
+export type ToastPanelProps = {
+    items: Array<ToastItem & ToastId>;
+} & HTMLAttributes<HTMLDivElement>;
 export type ToastProps = ToastContentProps & ToastContainerProps;
 type Closable = {
     onClose: () => void;
@@ -242,10 +246,20 @@ export type IfLike = {
 export type ActionItemHandler<T = never> = (item: ActionItem<T>) => void | Promise<void>;
 export type ActionItem<T = never> = Omit<{
     title: string;
+    description?: string;
+    type?: string;
+    searchText?: string;
     icon: IconLike;
+    iconClass?: string;
     color?: Color;
     onAction: ActionItemHandler<T>;
     data: T;
+    shortcuts?: MaybeArray<Shortcut>;
+    shortcutOptions?: {
+        ignoreInputFields?: boolean;
+        preventDefault?: boolean;
+    };
+    isGlobal?: boolean;
 } & IfLike, [
     T
 ] extends [never] ? 'data' : ''>;

package/package.json

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