@immich/ui 0.49.1 → 0.49.2

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/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/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';
@@ -242,10 +243,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.2",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",