@immich/ui 0.51.0 → 0.52.0

package/dist/components/Badge/Badge.svelte

@@ -37,11 +37,11 @@
       },
       textSize: styleVariants.textSize,
       paddingSize: {
-        tiny: 'px-3 py-1',
-        small: 'px-3.25 py-1.25',
-        medium: 'px-3.75 py-1.5',
-        large: 'px-4 py-1.75',
-        giant: 'px-4.25 py-2',
+        tiny: 'px-1.5 py-1',
+        small: 'px-1.75 py-0.75',
+        medium: 'px-2.5 py-1',
+        large: 'px-2.75 py-1',
+        giant: 'px-3 py-1.25',
       },
       roundedSize: {
         tiny: 'rounded-lg',

package/dist/components/CommandPalette/CommandPaletteDefaultProvider.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import CommandPaletteProvider from './CommandPaletteProvider.svelte';
+  import { defaultProvider } from '../../services/command-palette-manager.svelte.js';
+  import type { ActionItem } from '../../types.js';
+
+  type Props = {
+    name: string;
+    actions?: ActionItem[];
+  };
+
+  const { name, actions = [] }: Props = $props();
+</script>
+
+<CommandPaletteProvider providers={[defaultProvider({ name, actions })]} />

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

@@ -0,0 +1,8 @@
+import type { ActionItem } from '../../types.js';
+type Props = {
+    name: string;
+    actions?: ActionItem[];
+};
+declare const CommandPaletteDefaultProvider: import("svelte").Component<Props, {}, "">;
+type CommandPaletteDefaultProvider = ReturnType<typeof CommandPaletteDefaultProvider>;
+export default CommandPaletteDefaultProvider;

package/dist/components/CommandPalette/CommandPaletteItem.svelte

@@ -3,26 +3,18 @@
   import Badge from '../Badge/Badge.svelte';
   import Button from '../Button/Button.svelte';
   import Icon from '../Icon/Icon.svelte';
-  import IconButton from '../IconButton/IconButton.svelte';
   import Kbd from '../Kbd/Kbd.svelte';
   import Text from '../Text/Text.svelte';
   import type { ActionItem } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
-  import { mdiClose } from '@mdi/js';
 
   type Props = {
     item: ActionItem;
     selected: boolean;
     onSelect: () => void;
-    onRemove?: () => void;
   };
 
-  const { item, selected, onRemove, onSelect }: Props = $props();
-
-  const handleRemove = (event: MouseEvent) => {
-    event.stopPropagation();
-    onRemove?.();
-  };
+  const { item, selected, onSelect }: Props = $props();
 
   const shortcuts =
     item.shortcuts === undefined ? [] : Array.isArray(item.shortcuts) ? item.shortcuts : [item.shortcuts];
@@ -66,18 +58,7 @@
         {/if}
       </div>
     </div>
-    {#if onRemove}
-      <IconButton
-        size="small"
-        onclick={handleRemove}
-        class="shrink-0"
-        icon={mdiClose}
-        shape="round"
-        variant="ghost"
-        color="secondary"
-        aria-label="Remove"
-      />
-    {:else if renderedShortcuts.length > 0}
+    {#if renderedShortcuts.length > 0}
       <div class="flex shrink-0 flex-col justify-end gap-1">
         {#each renderedShortcuts as shortcut (shortcut.join('-'))}
           <div class="flex justify-end">

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

@@ -3,7 +3,6 @@ type Props = {
     item: ActionItem;
     selected: boolean;
     onSelect: () => void;
-    onRemove?: () => void;
 };
 declare const CommandPaletteItem: import("svelte").Component<Props, {}, "">;
 type CommandPaletteItem = ReturnType<typeof CommandPaletteItem>;

package/dist/components/CommandPalette/CommandPaletteProvider.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { commandPaletteManager, type ActionProvider } from '../../services/command-palette-manager.svelte.js';
+
+  type Props = {
+    providers: ActionProvider[];
+  };
+
+  const { providers }: Props = $props();
+
+  $effect(() => {
+    const callbacks: Array<() => void> = [];
+    for (const provider of providers) {
+      callbacks.push(commandPaletteManager.addProvider(provider));
+    }
+
+    return () => callbacks.forEach((callback) => callback());
+  });
+</script>

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

@@ -0,0 +1,7 @@
+import { type ActionProvider } from '../../services/command-palette-manager.svelte.js';
+type Props = {
+    providers: ActionProvider[];
+};
+declare const CommandPaletteProvider: import("svelte").Component<Props, {}, "">;
+type CommandPaletteProvider = ReturnType<typeof CommandPaletteProvider>;
+export default CommandPaletteProvider;

package/dist/components/Heading/Heading.svelte

@@ -20,25 +20,18 @@
     children: Snippet;
   } & HTMLAttributes<HTMLElement>;
 
-  const {
-    tag = 'p',
-    size = 'medium',
-    fontWeight = 'semi-bold',
-    class: className,
-    children,
-    ...restProps
-  }: Props = $props();
+  const { tag = 'p', size = 'medium', fontWeight = 'bold', class: className, children, ...restProps }: Props = $props();
 
   const styles = tv({
     base: 'leading-none tracking-tight',
     variants: {
       size: {
-        tiny: 'text-lg',
-        small: 'text-xl',
-        medium: 'text-2xl',
+        tiny: 'text-base',
+        small: 'text-lg',
+        medium: 'text-xl',
         large: 'text-3xl',
-        giant: 'text-4xl',
-        title: 'text-5xl',
+        giant: 'text-5xl',
+        title: 'text-7xl',
       },
     },
   });

package/dist/components/Markdown/Heading.svelte

@@ -11,33 +11,30 @@
 
   const { children, id, level }: Props = $props();
 
-  const getSizeAndTag = (level?: number): { size: Size; tag: HeadingTag } => {
+  const getSizeAndTag = (level?: number): { size: Size; tag: HeadingTag; padding: string } => {
     switch (level) {
       case 1: {
-        return { size: 'giant', tag: 'h1' };
+        return { size: 'giant', tag: 'h1', padding: 'mb-6' };
       }
       case 2: {
-        return { size: 'large', tag: 'h2' };
+        return { size: 'large', tag: 'h2', padding: 'my-4' };
       }
       case 3: {
-        return { size: 'medium', tag: 'h3' };
+        return { size: 'medium', tag: 'h3', padding: 'my-3' };
       }
       case 4: {
-        return { size: 'small', tag: 'h4' };
+        return { size: 'small', tag: 'h4', padding: 'my-1' };
       }
       case 5: {
-        return { size: 'tiny', tag: 'h5' };
-      }
-      case 6: {
-        return { size: 'tiny', tag: 'h6' };
+        return { size: 'tiny', tag: 'h5', padding: 'my-0.5' };
       }
       default: {
-        return { size: 'tiny', tag: 'p' };
+        return { size: 'tiny', tag: 'p', padding: '' };
       }
     }
   };
 
-  let { size, tag } = $derived(getSizeAndTag(level));
+  let { size, tag, padding } = $derived(getSizeAndTag(level));
 </script>
 
-<Heading {size} {tag} class="mt-4 mb-1" {id} {children} />
+<Heading {size} {tag} class={padding} {id} {children} />

package/dist/components/Modal/Modal.svelte

@@ -10,11 +10,10 @@
   import Logo from '../Logo/Logo.svelte';
   import TooltipProvider from '../Tooltip/TooltipProvider.svelte';
   import { ChildKey, zIndex } from '../../constants.js';
-  import { commandPaletteManager } from '../../services/command-palette-manager.svelte.js';
   import type { ModalSize } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { Dialog } from 'bits-ui';
-  import { onMount, tick, type Snippet } from 'svelte';
+  import { tick, type Snippet } from 'svelte';
   import { tv } from 'tailwind-variants';
 
   type Props = {
@@ -87,8 +86,6 @@
 
   const interactOutsideBehavior = $derived(closeOnBackdropClick ? 'close' : 'ignore');
   const escapeKeydownBehavior = $derived(closeOnEsc ? 'close' : 'ignore');
-
-  onMount(() => commandPaletteManager.pushContextLayer());
 </script>
 
 <Dialog.Root open={true} onOpenChange={(isOpen: boolean) => !isOpen && handleClose()}>

package/dist/components/Textarea/Textarea.svelte

@@ -5,6 +5,7 @@
   import { styleVariants } from '../../styles.js';
   import type { TextareaProps } from '../../types.js';
   import { cleanClass, generateId } from '../../utilities/internal.js';
+  import { onMount } from 'svelte';
   import type { FormEventHandler } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -53,15 +54,20 @@
   const labelId = `label-${id}`;
   const descriptionId = $derived(description ? `description-${id}` : undefined);
 
-  const onInput: FormEventHandler<HTMLTextAreaElement> = (event) => {
-    const element = event.target as HTMLTextAreaElement;
+  const autogrow = (element: HTMLTextAreaElement | null) => {
     if (element && grow) {
+      element.style.minHeight = '0';
       element.style.height = 'auto';
       element.style.height = `${element.scrollHeight}px`;
     }
+  };
 
+  const onInput: FormEventHandler<HTMLTextAreaElement> = (event) => {
+    autogrow(event.target as HTMLTextAreaElement);
     restProps?.oninput?.(event);
   };
+
+  onMount(() => autogrow(ref));
 </script>
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>

package/dist/components/Toast/ToastPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Toast from './Toast.svelte';
+  import TooltipProvider from '../Tooltip/TooltipProvider.svelte';
   import { zIndex } from '../../constants.js';
   import { isCustomToast } from '../../services/toast-manager.svelte.js';
   import type { ToastPanelProps } from '../../types.js';
@@ -10,19 +11,21 @@
   const isEmpty = $derived(items.length === 0);
 </script>
 
-<div
-  class={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} />
-    {:else}
-      <Toast {...item} />
-    {/if}
-  {/each}
-</div>
+<TooltipProvider>
+  <div
+    class={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} />
+      {:else}
+        <Toast {...item} />
+      {/if}
+    {/each}
+  </div>
+</TooltipProvider>

package/dist/index.d.ts

@@ -29,7 +29,8 @@ export { default as Checkbox } from './components/Checkbox/Checkbox.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
 export { default as CodeBlock } from './components/CodeBlock/CodeBlock.svelte';
-export { default as CommandPaletteContext } from './components/CommandPalette/CommandPaletteContext.svelte';
+export { default as CommandPaletteDefaultProvider } from './components/CommandPalette/CommandPaletteDefaultProvider.svelte';
+export { default as CommandPaletteProvider } from './components/CommandPalette/CommandPaletteProvider.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
 export { default as ContextMenuButton } from './components/ContextMenu/ContextMenuButton.svelte';

package/dist/index.js

@@ -31,7 +31,8 @@ export { default as Checkbox } from './components/Checkbox/Checkbox.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
 export { default as CodeBlock } from './components/CodeBlock/CodeBlock.svelte';
-export { default as CommandPaletteContext } from './components/CommandPalette/CommandPaletteContext.svelte';
+export { default as CommandPaletteDefaultProvider } from './components/CommandPalette/CommandPaletteDefaultProvider.svelte';
+export { default as CommandPaletteProvider } from './components/CommandPalette/CommandPaletteProvider.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
 export { default as ContextMenuButton } from './components/ContextMenu/ContextMenuButton.svelte';

package/dist/internal/Button.svelte

@@ -37,7 +37,7 @@
   const disabled = $derived((restProps as HTMLButtonAttributes).disabled || loading);
 
   const buttonVariants = tv({
-    base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-1 rounded-md text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+    base: 'flex items-center justify-center gap-1 rounded-md text-sm font-medium outline-offset-2 transition-colors focus-visible:outline-2',
     variants: {
       disabled: {
         true: 'disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50',
@@ -69,6 +69,14 @@
         large: 'rounded-xl',
         giant: 'rounded-2xl',
       },
+      focusOutlineColor: {
+        primary: 'outline-primary',
+        secondary: 'outline-dark',
+        success: 'outline-success',
+        danger: 'outline-danger',
+        warning: 'outline-warning',
+        info: 'outline-info',
+      },
       filledColor: styleVariants.filledColor,
       filledColorHover: styleVariants.filledColorHover,
       outlineColor: {
@@ -112,6 +120,7 @@
         filledColorHover: variant === 'filled' ? color : undefined,
         outlineColor: variant === 'outline' ? color : undefined,
         ghostColor: variant === 'ghost' ? color : undefined,
+        focusOutlineColor: color,
       }),
       className,
     ),

package/dist/internal/CommandPaletteModal.svelte

@@ -15,13 +15,17 @@
     type CommandPaletteTranslations,
   } from '../services/command-palette-manager.svelte.js';
   import { t } from '../services/translation.svelte.js';
+  import type { ActionItem } from '../types.js';
   import { mdiArrowDown, mdiArrowUp, mdiKeyboardEsc, mdiKeyboardReturn, mdiMagnify } from '@mdi/js';
 
   type Props = {
-    onClose: () => void;
+    onClose: (action?: ActionItem) => void;
     translations?: CommandPaletteTranslations;
+    initialQuery?: string;
   };
 
+  const { onClose, translations, initialQuery = '' }: Props = $props();
+
   const handleUp = (event: KeyboardEvent) => handleNavigate(event, 'up');
   const handleDown = (event: KeyboardEvent) => handleNavigate(event, 'down');
   const handleSelect = (event: KeyboardEvent) => handleNavigate(event, 'select');
@@ -30,23 +34,31 @@
 
     switch (direction) {
       case 'up': {
-        commandPaletteManager.up();
+        selectedIndex = Math.max((selectedIndex === 0 ? commandPaletteManager.items.length : selectedIndex) - 1, 0);
         break;
       }
 
       case 'down': {
-        commandPaletteManager.down();
+        if (!query && commandPaletteManager.items.length === 0) {
+          commandPaletteManager.loadAllItems();
+          break;
+        }
+
+        selectedIndex = (selectedIndex + 1) % commandPaletteManager.items.length || 0;
         break;
       }
 
       case 'select': {
-        await commandPaletteManager.select();
+        onClose(commandPaletteManager.items[selectedIndex]);
         break;
       }
     }
   };
 
-  const { onClose, translations }: Props = $props();
+  let selectedIndex = $state(0);
+  let query = $state(initialQuery);
+
+  $effect(() => commandPaletteManager.queryUpdate(query));
 </script>
 
 <svelte:window
@@ -61,43 +73,34 @@
   ]}
 />
 
-<Modal size="large" {onClose} closeOnBackdropClick class="max-h-[75vh] lg:max-h-[50vh]">
+<Modal size="large" {onClose} closeOnBackdropClick class="max-h-[85vh] lg:max-h-[75vh]">
   <ModalHeader>
     <div class="flex place-items-center gap-1">
       <Input
-        bind:value={commandPaletteManager.query}
+        bind:value={query}
         placeholder={t('search_placeholder', translations)}
         leadingIcon={mdiMagnify}
         tabindex={1}
       />
       <div>
-        <CloseButton onclick={() => commandPaletteManager.close()} class="md:hidden" />
+        <CloseButton onclick={() => onClose()} class="md:hidden" />
       </div>
     </div>
   </ModalHeader>
   <ModalBody>
     <Stack gap={2}>
-      {#if commandPaletteManager.query}
-        {#if commandPaletteManager.results.length === 0}
+      {#if query}
+        {#if commandPaletteManager.items.length === 0}
           <Text>{t('search_no_results', translations)}</Text>
         {/if}
-      {:else if commandPaletteManager.recentItems.length > 0}
-        <Text>{t('search_recently_used', translations)}</Text>
       {:else}
         <Text>{t('command_palette_prompt_default', translations)}</Text>
       {/if}
 
-      {#if commandPaletteManager.results.length > 0}
+      {#if commandPaletteManager.items.length > 0}
         <div class="flex flex-col">
-          {#each commandPaletteManager.results as item, i (item.id)}
-            <CommandPaletteItem
-              {item}
-              selected={commandPaletteManager.selectedIndex === i}
-              onRemove={commandPaletteManager.query || commandPaletteManager.isShowAll
-                ? undefined
-                : () => commandPaletteManager.remove(i)}
-              onSelect={() => commandPaletteManager.select(i)}
-            />
+          {#each commandPaletteManager.items as item, i (item.id)}
+            <CommandPaletteItem {item} selected={selectedIndex === i} onSelect={() => onClose(item)} />
           {/each}
         </div>
       {/if}
@@ -105,7 +108,7 @@
   </ModalBody>
   <ModalFooter>
     <div class="flex w-full justify-around">
-      {#if commandPaletteManager.isEmpty}
+      {#if !query && commandPaletteManager.items.length === 0}
         <div class="flex place-items-center gap-1">
           <span class="flex gap-1 rounded bg-gray-300 p-1 dark:bg-gray-500">
             <Icon icon={mdiArrowDown} size="1rem" />

package/dist/internal/CommandPaletteModal.svelte.d.ts

@@ -1,7 +1,9 @@
 import { type CommandPaletteTranslations } from '../services/command-palette-manager.svelte.js';
+import type { ActionItem } from '../types.js';
 type Props = {
-    onClose: () => void;
+    onClose: (action?: ActionItem) => void;
     translations?: CommandPaletteTranslations;
+    initialQuery?: string;
 };
 declare const CommandPaletteModal: import("svelte").Component<Props, {}, "">;
 type CommandPaletteModal = ReturnType<typeof CommandPaletteModal>;

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

@@ -1,64 +1,20 @@
-import type { ActionItem, MaybeArray, TranslationProps } from '../types.js';
+import type { ActionItem, MaybePromise, 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;
+export type ActionProvider = {
+    name: string;
+    onSearch: (query?: string) => MaybePromise<ActionItem[]>;
+};
+export declare const defaultProvider: ({ name, actions }: {
+    name: string;
+    actions: ActionItem[];
+}) => {
+    name: string;
+    onSearch: (query?: string) => ActionItem[];
+};
 declare class CommandPaletteManager {
     #private;
-    selectedIndex: number;
-    items: ({
-        title: string;
-        description?: string;
-        type?: string;
-        searchText?: string;
-        icon: import("../types.js").IconLike;
-        iconClass?: string;
-        color?: import("../types.js").Color;
-        onAction: import("../types.js").ActionItemHandler;
-        shortcuts?: MaybeArray<import("../actions/shortcut.js").Shortcut>;
-        shortcutOptions?: {
-            ignoreInputFields?: boolean;
-            preventDefault?: boolean;
-        };
-        isGlobal?: boolean;
-    } & import("../types.js").IfLike & {
-        id: string;
-    })[];
-    filteredItems: ({
-        title: string;
-        description?: string;
-        type?: string;
-        searchText?: string;
-        icon: import("../types.js").IconLike;
-        iconClass?: string;
-        color?: import("../types.js").Color;
-        onAction: import("../types.js").ActionItemHandler;
-        shortcuts?: MaybeArray<import("../actions/shortcut.js").Shortcut>;
-        shortcutOptions?: {
-            ignoreInputFields?: boolean;
-            preventDefault?: boolean;
-        };
-        isGlobal?: boolean;
-    } & import("../types.js").IfLike & {
-        id: string;
-    })[];
-    recentItems: ({
-        title: string;
-        description?: string;
-        type?: string;
-        searchText?: string;
-        icon: import("../types.js").IconLike;
-        iconClass?: string;
-        color?: import("../types.js").Color;
-        onAction: import("../types.js").ActionItemHandler;
-        shortcuts?: MaybeArray<import("../actions/shortcut.js").Shortcut>;
-        shortcutOptions?: {
-            ignoreInputFields?: boolean;
-            preventDefault?: boolean;
-        };
-        isGlobal?: boolean;
-    } & import("../types.js").IfLike & {
-        id: string;
-    })[];
-    results: ({
+    get isEnabled(): boolean;
+    get items(): ({
         title: string;
         description?: string;
         type?: string;
@@ -67,7 +23,7 @@ declare class CommandPaletteManager {
         iconClass?: string;
         color?: import("../types.js").Color;
         onAction: import("../types.js").ActionItemHandler;
-        shortcuts?: MaybeArray<import("../actions/shortcut.js").Shortcut>;
+        shortcuts?: import("../types.js").MaybeArray<import("../actions/shortcut.js").Shortcut>;
         shortcutOptions?: {
             ignoreInputFields?: boolean;
             preventDefault?: boolean;
@@ -76,26 +32,12 @@ declare class CommandPaletteManager {
     } & import("../types.js").IfLike & {
         id: string;
     })[];
-    get isEnabled(): boolean;
     enable(): void;
-    get query(): string;
-    set query(query: string);
-    get isShowAll(): boolean;
-    get isEmpty(): boolean;
     setTranslations(translations?: CommandPaletteTranslations): void;
-    pushContextLayer(): (() => void) | undefined;
-    popContextLayer(): void;
-    open(): void;
-    close(): Promise<void> | undefined;
-    select(selectedIndex?: number): Promise<void>;
-    remove(index: number): void;
-    up(): void;
-    down(): void;
-    reset(): void;
-    addCommands(itemOrItems: MaybeArray<ActionItem>): () => void;
-    removeCommands(itemOrItems: MaybeArray<{
-        id: string;
-    }>): void;
+    queryUpdate(query: string): void;
+    open(initialQuery?: string): void;
+    loadAllItems(): void;
+    addProvider(provider: ActionProvider): () => void;
 }
 export declare const commandPaletteManager: CommandPaletteManager;
 export {};

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

@@ -1,39 +1,23 @@
-import { matchesShortcut, shortcuts, shouldIgnoreEvent } from '../actions/shortcut.js';
+import { matchesShortcut, shortcuts } from '../actions/shortcut.js';
 import CommandPaletteModal from '../internal/CommandPaletteModal.svelte';
-import { generateId, isEnabled } from '../utilities/internal.js';
 import { modalManager } from './modal-manager.svelte.js';
-export const asText = (...items) => {
-    return items
-        .filter((item) => item !== undefined && item !== null)
-        .map((items) => String(items))
-        .join('|')
-        .toLowerCase();
-};
-const isMatch = ({ title, description, type, searchText = asText(title, description, type) }, query) => {
-    if (!query) {
-        return true;
-    }
-    return searchText.includes(query);
-};
+import { asArray, generateId, getSearchString } from '../utilities/internal.js';
+export const defaultProvider = ({ name, actions }) => ({
+    name,
+    onSearch: (query) => query ? actions.filter((action) => getSearchString(action).includes(query.toLowerCase())) : actions,
+});
 class CommandPaletteManager {
-    #query = $state('');
-    selectedIndex = $state(0);
-    #isEnabled = $state(false);
-    #normalizedQuery = $derived(this.#query.toLowerCase());
-    #modal;
     #translations = {};
+    #providers = [];
+    #isEnabled = false;
     #isOpen = false;
-    #isShowAll = $state(false);
-    #globalLayer = $state({ items: [], recentItems: [] });
-    #layers = $state([{ items: [], recentItems: [] }]);
-    items = $derived([...this.#globalLayer.items, ...this.#layers.at(-1).items].filter(isEnabled));
-    filteredItems = $derived(this.items.filter((item) => isMatch(item, this.#normalizedQuery)).slice(0, 100));
-    recentItems = $derived([...this.#globalLayer.recentItems, ...this.#layers.at(-1).recentItems].filter(isEnabled));
-    results = $derived(this.#isShowAll ? this.items : this.#query ? this.filteredItems : this.recentItems);
-    #isEmpty = $derived(!this.#isShowAll && !this.#query && this.results.length === 0);
+    #items = $state([]);
     get isEnabled() {
         return this.#isEnabled;
     }
+    get items() {
+        return this.#items;
+    }
     enable() {
         if (this.#isEnabled) {
             return;
@@ -48,146 +32,54 @@ class CommandPaletteManager {
             document.body.addEventListener('keydown', (event) => this.#handleKeydown(event));
         }
     }
-    get query() {
-        return this.#query;
-    }
-    set query(query) {
-        this.#query = query;
-        if (this.#isShowAll && query) {
-            this.#isShowAll = false;
-        }
-    }
-    get isShowAll() {
-        return this.#isShowAll;
-    }
-    get isEmpty() {
-        return this.#isEmpty;
-    }
-    async #handleKeydown(event) {
-        const command = this.items.find(({ shortcuts }) => {
-            if (!shortcuts) {
-                return;
-            }
-            if (shortcuts)
-                return Array.isArray(shortcuts)
-                    ? shortcuts.some((shortcut) => matchesShortcut(event, shortcut))
-                    : matchesShortcut(event, shortcuts);
-        });
-        if (!command) {
-            return;
-        }
-        const { ignoreInputFields = true, preventDefault = true } = command.shortcutOptions ?? {};
-        if (ignoreInputFields && shouldIgnoreEvent(event)) {
-            return;
-        }
-        if (preventDefault) {
-            event.preventDefault();
-        }
-        await command.onAction(command);
-    }
     setTranslations(translations = {}) {
         this.#translations = translations;
     }
-    pushContextLayer() {
-        if (!this.#isEnabled) {
-            return;
-        }
-        // we do not want the command palette to have its own context layer
-        if (this.#isOpen) {
-            return;
-        }
-        this.#layers.push({ items: [], recentItems: [] });
-        return () => this.popContextLayer();
-    }
-    popContextLayer() {
-        if (this.#layers.length > 1) {
-            this.#layers = this.#layers.slice(0, -1);
-        }
+    async #onSearch(query) {
+        const newItems = await Promise.all(this.#providers.map((provider) => Promise.resolve(provider.onSearch(query))));
+        this.#items = newItems.flat().map((item) => ({ ...item, id: generateId() }));
     }
-    open() {
-        if (this.#modal || !this.#isEnabled) {
+    queryUpdate(query) {
+        if (!query) {
+            this.#items = [];
             return;
         }
-        this.selectedIndex = 0;
-        this.#isOpen = true;
-        const { close, onClose } = modalManager.open(CommandPaletteModal, { translations: this.#translations });
-        this.#modal = { close };
-        void onClose.then(() => this.#onClose());
+        void this.#onSearch(query);
     }
-    close() {
-        if (!this.#modal) {
-            return;
+    async #handleKeydown(event) {
+        const actions = await Promise.all(this.#providers.map((provider) => Promise.resolve(provider.onSearch())));
+        for (const action of actions.flat()) {
+            const shortcuts = asArray(action.shortcuts);
+            if (shortcuts.some((shortcut) => matchesShortcut(event, shortcut))) {
+                action?.onAction(action);
+            }
         }
-        return this.#modal.close();
     }
-    #onClose() {
-        this.#query = '';
-        this.#modal = undefined;
+    async #onClose(action) {
+        await action?.onAction(action);
         this.#isOpen = false;
-        this.#isShowAll = false;
-    }
-    async select(selectedIndex) {
-        const selected = this.results[selectedIndex ?? this.selectedIndex];
-        if (!selected) {
-            return;
-        }
-        if (selected.isGlobal) {
-            this.#globalLayer.recentItems = this.#globalLayer.recentItems.filter(({ id }) => id !== selected.id);
-            this.#globalLayer.recentItems.unshift(selected);
-        }
-        else {
-            this.#layers.at(-1).recentItems = this.#layers.at(-1).recentItems.filter(({ id }) => id !== selected.id);
-            this.#layers.at(-1)?.recentItems.unshift(selected);
-        }
-        await selected.onAction(selected);
-        await this.close();
-    }
-    remove(index) {
-        const item = this.recentItems.at(index);
-        if (!item) {
-            return;
-        }
-        this.#globalLayer.recentItems = this.#globalLayer.recentItems.filter(({ id }) => id !== item.id);
-        this.#layers.at(-1).recentItems = this.#layers.at(-1).recentItems.filter(({ id }) => id !== item.id);
+        this.#items = [];
     }
-    up() {
-        this.selectedIndex = (this.selectedIndex - 1 + this.results.length) % (this.results.length || 1);
-    }
-    down() {
-        if (this.#isEmpty) {
-            this.#isShowAll = true;
+    open(initialQuery) {
+        if (this.#isOpen) {
             return;
         }
-        this.selectedIndex = (this.selectedIndex + 1) % (this.results.length || 1);
-    }
-    reset() {
-        this.#layers = [{ items: [], recentItems: [] }];
-        this.#globalLayer = { items: [], recentItems: [] };
-        this.#query = '';
+        const { onClose } = modalManager.open(CommandPaletteModal, {
+            translations: this.#translations,
+            initialQuery,
+        });
+        this.#isOpen = true;
+        void onClose.then((action) => this.#onClose(action));
     }
-    addCommands(itemOrItems) {
-        const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
-        const itemsWithId = items.map((item) => ({
-            ...item,
-            id: generateId(),
-        }));
-        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);
+    loadAllItems() {
+        void this.#onSearch();
     }
-    #removeCommands(layer, ids) {
-        return {
-            items: layer.items.filter(({ id }) => !ids[id]),
-            recentItems: layer.recentItems.filter(({ id }) => !ids[id]),
-        };
+    addProvider(provider) {
+        this.#providers.push(provider);
+        return () => this.#removeProvider(provider);
     }
-    removeCommands(itemOrItems) {
-        const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
-        const ids = items.reduce((acc, { id }) => ({ ...acc, [id]: true }), {});
-        this.#layers = this.#layers.map((layer) => this.#removeCommands(layer, ids));
-        this.#globalLayer = this.#removeCommands(this.#globalLayer, ids);
+    #removeProvider(provider) {
+        this.#providers = this.#providers.filter((actionProvider) => actionProvider !== provider);
     }
 }
 export const commandPaletteManager = new CommandPaletteManager();

package/dist/site/SiteFooter.svelte

@@ -31,6 +31,9 @@
           <SiteFooterLink href={Constants.Sites.Docs} text="Documentation" />
           <SiteFooterLink href={Constants.Sites.My} text="My Immich" />
           <SiteFooterLink href={Constants.Sites.Api} text="Immich API" />
+          <SiteFooterLink href={Constants.Sites.Data} text="Immich Data" />
+          <SiteFooterLink href={Constants.Sites.Datasets} text="Immich Datasets" />
+          <SiteFooterLink href={Constants.Sites.Awesome} text="Awesome Immich" />
         </Stack>
 
         <Stack>

package/dist/site/constants.d.ts

@@ -26,6 +26,7 @@ export declare const Constants: {
         Get: string;
         My: string;
         Store: string;
+        Awesome: string;
         Ui: string;
     };
     Pages: {

package/dist/site/constants.js

@@ -1,5 +1,5 @@
 import { goto } from '$app/navigation';
-import { asText } from '../services/command-palette-manager.svelte.js';
+import { asText } from '../utilities/common.js';
 import { mdiOpenInNew } from '@mdi/js';
 export const Constants = {
     Socials: {
@@ -29,6 +29,7 @@ export const Constants = {
         Get: 'https://get.immich.app/',
         My: 'https://my.immich.app/',
         Store: 'https://immich.store/',
+        Awesome: 'https://awesome.immich.app/',
         Ui: 'https://ui.immich.app/',
     },
     Pages: {

package/dist/types.d.ts

@@ -28,6 +28,7 @@ export type IconLike = string | {
     path: string;
 };
 export type MaybeArray<T> = T | T[];
+export type MaybePromise<T> = T | Promise<T>;
 export type IconProps = {
     icon: IconLike;
     title?: string;

package/dist/utilities/common.d.ts

@@ -31,3 +31,4 @@ export declare const resolveMetadata: (site: Metadata, page?: Metadata, article?
         tags: string[] | undefined;
     } | undefined;
 };
+export declare const asText: (...items: unknown[]) => string;

package/dist/utilities/common.js

@@ -60,3 +60,10 @@ export const resolveMetadata = (site, page, article) => {
             : undefined,
     };
 };
+export const asText = (...items) => {
+    return items
+        .filter((item) => item !== undefined && item !== null)
+        .map((items) => String(items))
+        .join('|')
+        .toLowerCase();
+};

package/dist/utilities/internal.d.ts

@@ -1,4 +1,4 @@
-import type { Color, IconLike, IfLike, TextColor } from '../types.js';
+import type { ActionItem, Color, IconLike, IfLike, MaybeArray, TextColor } from '../types.js';
 export declare const cleanClass: (...classNames: unknown[]) => string;
 export declare const withPrefix: (key: string) => string;
 export declare const generateId: () => string;
@@ -10,3 +10,5 @@ export declare const resolveIcon: ({ icons, color, override, fallback, }: {
     icons: Partial<Record<Color | TextColor, string>>;
 }) => IconLike | undefined;
 export declare const isEnabled: ({ $if }: IfLike) => boolean;
+export declare const asArray: <T>(items?: MaybeArray<T>) => T[];
+export declare const getSearchString: ({ title, description, type, searchText }: ActionItem) => string;

package/dist/utilities/internal.js

@@ -1,3 +1,4 @@
+import { asText } from './common.js';
 import { twMerge } from 'tailwind-merge';
 export const cleanClass = (...classNames) => {
     return twMerge(classNames
@@ -25,3 +26,5 @@ export const resolveIcon = ({ icons, color, override, fallback, }) => {
     return icons[color] ?? fallback;
 };
 export const isEnabled = ({ $if }) => $if?.() ?? true;
+export const asArray = (items) => (Array.isArray(items) ? items : items ? [items] : []);
+export const getSearchString = ({ title, description, type, searchText }) => searchText ?? asText(title, description, type);

package/package.json

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

package/dist/components/CommandPalette/CommandPaletteContext.svelte

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

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

@@ -1,7 +0,0 @@
-import type { ActionItem } from '../../types.js';
-type Props = {
-    commands?: ActionItem[];
-};
-declare const CommandPaletteContext: import("svelte").Component<Props, {}, "">;
-type CommandPaletteContext = ReturnType<typeof CommandPaletteContext>;
-export default CommandPaletteContext;