@immich/ui 0.40.3 → 0.41.0

package/dist/components/Card/Card.svelte

@@ -46,7 +46,7 @@
   });
 
   const cardStyles = tv({
-    base: 'flex grow flex-col',
+    base: 'flex w-full grow flex-col',
     variants: {
       color: {
         primary: 'bg-primary/25 dark:bg-primary/25',

package/dist/components/CommandPalette/CommandPaletteContext.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { commandPaletteManager, type CommandItem } from '../../services/command-palette-manager.svelte';
+  import { onMount } from 'svelte';
+
+  type Props = {
+    commands?: CommandItem[];
+    global?: boolean;
+  };
+
+  const { commands = [], global }: Props = $props();
+
+  onMount(() => commandPaletteManager.addCommands(commands, { global }));
+</script>

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

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

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import Icon from '../Icon/Icon.svelte';
+  import Text from '../Text/Text.svelte';
+  import { zIndex } from '../../constants.js';
+  import { styleVariants } from '../../styles.js';
+  import { MenuItemType, type ContextMenuProps, type MenuItem } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { DropdownMenu } from 'bits-ui';
+  import { fly } from 'svelte/transition';
+  import { tv } from 'tailwind-variants';
+
+  let {
+    onClose,
+    items,
+    bottomItems,
+    size = 'medium',
+    anchor,
+    position = 'top-left',
+    class: className,
+    ...restProps
+  }: ContextMenuProps = $props();
+
+  const isDivider = (item: MenuItem | MenuItemType): item is MenuItemType => {
+    return item === MenuItemType.Divider;
+  };
+
+  const itemStyles = tv({
+    base: 'hover:bg-subtle flex w-full items-center gap-1 rounded-md px-1 py-0.5 text-start',
+    variants: {
+      color: styleVariants.textColor,
+    },
+  });
+
+  const wrapperStyles = tv({
+    base: 'bg-light flex flex-col gap-1 overflow-hidden rounded-lg border py-1',
+    variants: {
+      size: {
+        tiny: 'w-32',
+        small: 'w-48',
+        medium: 'w-3xs',
+        large: 'w-sm',
+        giant: 'w-lg',
+        full: 'w-full',
+      },
+    },
+  });
+
+  const getAlignment = (
+    align: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right',
+  ): { align: 'start' | 'center' | 'end'; side: 'top' | 'right' | 'bottom' | 'left' } => {
+    switch (align) {
+      case 'top-left': {
+        return {
+          align: 'start',
+          side: 'bottom',
+        };
+      }
+      case 'top-right': {
+        return {
+          align: 'end',
+          side: 'bottom',
+        };
+      }
+      case 'bottom-left': {
+        return {
+          align: 'start',
+          side: 'top',
+        };
+      }
+      case 'bottom-right': {
+        return {
+          align: 'end',
+          side: 'top',
+        };
+      }
+
+      default: {
+        return {
+          align: 'start',
+          side: 'bottom',
+        };
+      }
+    }
+  };
+
+  const alignOffset = $derived(anchor.clientWidth / 2);
+  const sideOffset = $derived(-anchor.clientHeight / 2);
+  const { side, align } = $derived(getAlignment(position));
+</script>
+
+<DropdownMenu.Root open={true} onOpenChange={() => onClose()}>
+  <DropdownMenu.Portal>
+    <DropdownMenu.Content forceMount customAnchor={anchor} {side} {align} {alignOffset} {sideOffset}>
+      {#snippet child({ wrapperProps, props, open })}
+        {#if open}
+          <div {...wrapperProps} class={zIndex.ContextMenu}>
+            <div {...props} {...restProps} class={cleanClass(wrapperStyles({ size }), className)} transition:fly>
+              {#each items as item, i (isDivider(item) ? i : item.title)}
+                {#if isDivider(item)}
+                  <DropdownMenu.Separator class="my-0.5 border-t" />
+                {:else}
+                  <DropdownMenu.Item
+                    textValue={item.title}
+                    closeOnSelect
+                    onSelect={(event) => item.onSelect?.({ event, item })}
+                    class="px-1"
+                  >
+                    <div class={itemStyles({ color: item.color })}>
+                      <Icon icon={item.icon} class="m-2 shrink-0" />
+                      <Text class="grow text-start">{item.title}</Text>
+                    </div>
+                  </DropdownMenu.Item>
+                {/if}
+              {/each}
+
+              {#if bottomItems}
+                <DropdownMenu.Separator class="my-0.5 border-t" />
+                <div class="flex gap-1 px-1">
+                  {#each bottomItems as item (item.title)}
+                    <DropdownMenu.Item
+                      textValue={item.title}
+                      closeOnSelect
+                      onSelect={(event) => item.onSelect?.({ event, item })}
+                      title={item.title}
+                    >
+                      <div class={cleanClass(itemStyles({ color: item.color }))}>
+                        <Icon icon={item.icon} class="m-2 shrink-0" />
+                      </div>
+                    </DropdownMenu.Item>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/if}
+      {/snippet}
+    </DropdownMenu.Content>
+  </DropdownMenu.Portal>
+</DropdownMenu.Root>

package/dist/components/ContextMenu/ContextMenu.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ContextMenuProps } from '../../types.js';
+declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/Modal/Modal.svelte

@@ -9,10 +9,11 @@
   import Icon from '../Icon/Icon.svelte';
   import Logo from '../Logo/Logo.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 { tick, type Snippet } from 'svelte';
+  import { onMount, tick, type Snippet } from 'svelte';
   import { tv } from 'tailwind-variants';
 
   type Props = {
@@ -85,6 +86,8 @@
 
   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/constants.d.ts

@@ -17,5 +17,7 @@ export declare const zIndex: {
     AppShellSidebar: string;
     ModalBackdrop: string;
     ModalContent: string;
+    SelectDropdown: string;
     ToastPanel: string;
+    ContextMenu: string;
 };

package/dist/constants.js

@@ -18,5 +18,7 @@ export const zIndex = {
     AppShellSidebar: 'z-30',
     ModalBackdrop: 'z-40',
     ModalContent: 'z-50',
+    SelectDropdown: 'z-55',
     ToastPanel: 'z-60',
+    ContextMenu: 'z-70!',
 };

package/dist/index.d.ts

@@ -27,7 +27,7 @@ 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 CommandPalette } from './components/CommandPalette/CommandPalette.svelte';
+export { default as CommandPaletteContext } from './components/CommandPalette/CommandPaletteContext.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
 export { default as Field } from './components/Field/Field.svelte';

package/dist/index.js

@@ -29,7 +29,7 @@ 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 CommandPalette } from './components/CommandPalette/CommandPalette.svelte';
+export { default as CommandPaletteContext } from './components/CommandPalette/CommandPaletteContext.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
 export { default as Field } from './components/Field/Field.svelte';

package/dist/internal/CommandPaletteModal.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import { shortcuts } from '../actions/shortcut.js';
+  import CloseButton from '../components/CloseButton/CloseButton.svelte';
+  import CommandPaletteItem from '../components/CommandPalette/CommandPaletteItem.svelte';
+  import Icon from '../components/Icon/Icon.svelte';
+  import Input from '../components/Input/Input.svelte';
+  import Modal from '../components/Modal/Modal.svelte';
+  import ModalBody from '../components/Modal/ModalBody.svelte';
+  import ModalFooter from '../components/Modal/ModalFooter.svelte';
+  import ModalHeader from '../components/Modal/ModalHeader.svelte';
+  import Stack from '../components/Stack/Stack.svelte';
+  import Text from '../components/Text/Text.svelte';
+  import {
+    commandPaletteManager,
+    type CommandPaletteTranslations,
+  } from '../services/command-palette-manager.svelte.js';
+  import { t } from '../services/translation.svelte.js';
+  import { mdiArrowDown, mdiArrowUp, mdiKeyboardEsc, mdiKeyboardReturn, mdiMagnify } from '@mdi/js';
+
+  type Props = {
+    onClose: () => void;
+    translations?: CommandPaletteTranslations;
+  };
+
+  const handleUp = (event: KeyboardEvent) => handleNavigate(event, 'up');
+  const handleDown = (event: KeyboardEvent) => handleNavigate(event, 'down');
+  const handleSelect = (event: KeyboardEvent) => handleNavigate(event, 'select');
+  const handleNavigate = async (event: KeyboardEvent, direction: 'up' | 'down' | 'select') => {
+    event.preventDefault();
+
+    switch (direction) {
+      case 'up': {
+        commandPaletteManager.up();
+        break;
+      }
+
+      case 'down': {
+        commandPaletteManager.down();
+        break;
+      }
+
+      case 'select': {
+        await commandPaletteManager.select();
+        break;
+      }
+    }
+  };
+
+  const { onClose, translations }: Props = $props();
+</script>
+
+<svelte:window
+  use:shortcuts={[
+    { shortcut: { key: 'ArrowUp' }, preventDefault: false, ignoreInputFields: false, onShortcut: handleUp },
+    { shortcut: { key: 'ArrowDown' }, preventDefault: false, ignoreInputFields: false, onShortcut: handleDown },
+    { shortcut: { key: 'k', ctrl: true }, ignoreInputFields: false, onShortcut: handleUp },
+    { shortcut: { key: 'k', meta: true }, ignoreInputFields: false, onShortcut: handleUp },
+    { shortcut: { key: 'j', ctrl: true }, ignoreInputFields: false, onShortcut: handleDown },
+    { shortcut: { key: 'j', meta: true }, ignoreInputFields: false, onShortcut: handleDown },
+    { shortcut: { key: 'Enter' }, ignoreInputFields: false, onShortcut: handleSelect },
+  ]}
+/>
+
+<Modal size="large" {onClose} closeOnBackdropClick>
+  <ModalHeader>
+    <div class="flex place-items-center gap-1">
+      <Input
+        bind:value={commandPaletteManager.query}
+        placeholder={t('search_placeholder', translations)}
+        leadingIcon={mdiMagnify}
+        tabindex={1}
+      />
+      <div>
+        <CloseButton onclick={() => commandPaletteManager.close()} class="md:hidden" />
+      </div>
+    </div>
+  </ModalHeader>
+  <ModalBody>
+    <Stack gap={2}>
+      {#if commandPaletteManager.query}
+        {#if commandPaletteManager.results.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}
+        <div class="flex flex-col">
+          {#each commandPaletteManager.results as item, i (i)}
+            <CommandPaletteItem
+              {item}
+              selected={commandPaletteManager.selectedIndex === i}
+              onRemove={commandPaletteManager.query ? undefined : () => commandPaletteManager.remove(i)}
+              onSelect={() => commandPaletteManager.select(i)}
+            />
+          {/each}
+        </div>
+      {/if}
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <div class="flex w-full justify-around">
+      <div class="flex gap-4">
+        <div class="flex place-items-center gap-1">
+          <span class="rounded bg-gray-300 p-1 dark:bg-gray-500">
+            <Icon icon={mdiKeyboardReturn} size="1rem" />
+          </span>
+          <Text size="small">to select</Text>
+        </div>
+
+        <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={mdiArrowUp} size="1rem" />
+            <Icon icon={mdiArrowDown} size="1rem" />
+          </span>
+          <Text size="small">to navigate</Text>
+        </div>
+
+        <div class="flex place-items-center gap-1">
+          <span class="rounded bg-gray-300 p-1 dark:bg-gray-500">
+            <Icon icon={mdiKeyboardEsc} size="1rem" />
+          </span>
+          <Text size="small">to close</Text>
+        </div>
+      </div>
+    </div>
+  </ModalFooter>
+</Modal>

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

@@ -0,0 +1,8 @@
+import { type CommandPaletteTranslations } from '../services/command-palette-manager.svelte.js';
+type Props = {
+    onClose: () => void;
+    translations?: CommandPaletteTranslations;
+};
+declare const CommandPaletteModal: import("svelte").Component<Props, {}, "">;
+type CommandPaletteModal = ReturnType<typeof CommandPaletteModal>;
+export default CommandPaletteModal;

package/dist/internal/Select.svelte

@@ -5,6 +5,7 @@
   import IconButton from '../components/IconButton/IconButton.svelte';
   import Input from '../components/Input/Input.svelte';
   import Label from '../components/Label/Label.svelte';
+  import { zIndex } from '../constants.js';
   import type { SelectCommonProps, SelectItem } from '../types.js';
   import { cleanClass, generateId } from '../utilities/internal.js';
   import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiUnfoldMoreHorizontal } from '@mdi/js';
@@ -115,7 +116,7 @@
     <Select.Portal>
       <Select.Content
         bind:ref={contentRef}
-        class="bg-light text-dark max-h-96 rounded-xl border py-3 outline-none select-none"
+        class="bg-light text-dark max-h-96 rounded-xl border py-3 outline-none select-none {zIndex.SelectDropdown}"
         sideOffset={10}
       >
         <Select.ScrollUpButton class="flex w-full items-center justify-center">

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

@@ -1,3 +1,5 @@
+import { type Shortcut } from '../actions/shortcut.js';
+import type { MaybeArray, TranslationProps } from '../types.js';
 export type CommandItem = {
     icon: string;
     iconClass: string;
@@ -5,32 +7,54 @@ export type CommandItem = {
     title: string;
     description?: string;
     text: string;
+    shortcuts?: MaybeArray<Shortcut>;
+    shortcutOptions?: {
+        ignoreInputFields?: boolean;
+        preventDefault?: boolean;
+    };
 } & ({
     href: string;
 } | {
-    action: () => void;
+    action: () => void | Promise<void>;
 });
+export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default'>;
 export declare const asText: (...items: unknown[]) => string;
 declare class CommandPaletteManager {
-    isEnabled: boolean;
-    isOpen: boolean;
+    #private;
     query: string;
     selectedIndex: number;
-    private normalizedQuery;
-    items: CommandItem[];
-    filteredItems: CommandItem[];
-    recentItems: CommandItem[];
-    results: CommandItem[];
+    items: (CommandItem & {
+        id: string;
+    })[];
+    filteredItems: (CommandItem & {
+        id: string;
+    })[];
+    recentItems: (CommandItem & {
+        id: string;
+    })[];
+    results: (CommandItem & {
+        id: string;
+    })[];
+    get isEnabled(): boolean;
     enable(): void;
-    open(): Promise<void>;
-    close(): void;
+    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: CommandItem | CommandItem[]): void;
-    removeCommands(itemOrItems: CommandItem | CommandItem[]): void;
+    addCommands(itemOrItems: MaybeArray<CommandItem & {
+        id?: string;
+    }>, options?: {
+        global?: boolean;
+    }): () => void;
+    removeCommands(itemOrItems: MaybeArray<{
+        id: string;
+    }>): void;
 }
 export declare const commandPaletteManager: CommandPaletteManager;
 export {};

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

@@ -1,4 +1,8 @@
 import { goto } from '$app/navigation';
+import { matchesShortcut, shortcuts, shouldIgnoreEvent } from '../actions/shortcut.js';
+import CommandPaletteModal from '../internal/CommandPaletteModal.svelte';
+import { generateId } from '../utilities/internal.js';
+import { modalManager } from './modal-manager.svelte.js';
 export const asText = (...items) => {
     return items
         .filter((item) => item !== undefined && item !== null)
@@ -6,9 +10,6 @@ export const asText = (...items) => {
         .join('|')
         .toLowerCase();
 };
-const isEqual = (a, b) => {
-    return a.title === b.title && a.type === b.type;
-};
 const isMatch = (item, query) => {
     if (!query) {
         return true;
@@ -16,31 +17,110 @@ const isMatch = (item, query) => {
     return item.text.includes(query);
 };
 class CommandPaletteManager {
-    isEnabled = $state(false);
-    isOpen = $state(false);
     query = $state('');
     selectedIndex = $state(0);
-    normalizedQuery = $derived(this.query.toLowerCase());
-    items = [];
-    filteredItems = $derived(this.items.filter((item) => isMatch(item, this.normalizedQuery)).slice(0, 100));
-    recentItems = $state([]);
+    #isEnabled = $state(false);
+    #normalizedQuery = $derived(this.query.toLowerCase());
+    #modal;
+    #translations = {};
+    #isOpen = false;
+    #globalLayer = $state({ items: [], recentItems: [] });
+    #layers = $state([{ items: [], recentItems: [] }]);
+    items = $derived([...this.#globalLayer.items, ...this.#layers.at(-1).items]);
+    filteredItems = $derived(this.items.filter((item) => isMatch(item, this.#normalizedQuery)).slice(0, 100));
+    recentItems = $derived([...this.#globalLayer.recentItems, ...this.#layers.at(-1).recentItems]);
     results = $derived(this.query ? this.filteredItems : this.recentItems);
+    get isEnabled() {
+        return this.#isEnabled;
+    }
     enable() {
-        this.isEnabled = true;
+        if (this.#isEnabled) {
+            return;
+        }
+        this.#isEnabled = true;
+        if (globalThis.window && document.body) {
+            shortcuts(document.body, [
+                { shortcut: { key: 'k', meta: true }, onShortcut: () => this.open() },
+                { shortcut: { key: 'k', ctrl: true }, onShortcut: () => this.open() },
+                { shortcut: { key: '/' }, preventDefault: true, onShortcut: () => this.open() },
+            ]);
+            document.body.addEventListener('keydown', (event) => this.#handleKeydown(event));
+        }
+    }
+    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 this.#executeCommand(command);
+    }
+    async #executeCommand(command) {
+        if ('href' in command) {
+            if (!command.href.startsWith('/')) {
+                window.open(command.href, '_blank');
+            }
+            else {
+                await goto(command.href);
+            }
+        }
+        else {
+            await command.action();
+        }
+    }
+    setTranslations(translations = {}) {
+        this.#translations = translations;
     }
-    async open() {
-        if (!this.isEnabled || this.isOpen) {
+    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);
+        }
+    }
+    open() {
+        if (this.#modal || !this.#isEnabled) {
             return;
         }
         this.selectedIndex = 0;
-        this.isOpen = true;
+        this.#isOpen = true;
+        const { close, onClose } = modalManager.open(CommandPaletteModal, { translations: this.#translations });
+        this.#modal = { close };
+        void onClose.then(() => this.#onClose());
     }
     close() {
-        if (!this.isEnabled || !this.isOpen) {
+        if (!this.#modal) {
             return;
         }
+        return this.#modal.close();
+    }
+    #onClose() {
         this.query = '';
-        this.isOpen = false;
+        this.#modal = undefined;
+        this.#isOpen = false;
     }
     async select(selectedIndex) {
         const selected = this.results[selectedIndex ?? this.selectedIndex];
@@ -48,45 +128,48 @@ class CommandPaletteManager {
             return;
         }
         // no duplicates
-        this.recentItems = this.recentItems.filter((item) => !isEqual(item, selected));
+        this.recentItems = this.recentItems.filter(({ id }) => id !== selected.id);
         this.recentItems.unshift(selected);
         this.recentItems = this.recentItems.slice(0, 5);
-        if ('href' in selected) {
-            if (!selected.href.startsWith('/')) {
-                window.open(selected.href, '_blank');
-            }
-            else {
-                await goto(selected.href);
-            }
-        }
-        else {
-            await selected.action();
-        }
-        this.close();
+        await this.#executeCommand(selected);
+        await this.close();
     }
     remove(index) {
         this.recentItems.splice(index, 1);
     }
     up() {
-        this.selectedIndex = (this.selectedIndex - 1 + this.results.length) % this.results.length;
+        this.selectedIndex = (this.selectedIndex - 1 + this.results.length) % (this.results.length || 1);
     }
     down() {
-        this.selectedIndex = (this.selectedIndex + 1) % this.results.length;
+        this.selectedIndex = (this.selectedIndex + 1) % (this.results.length || 1);
     }
     reset() {
-        this.items = [];
-        this.isOpen = false;
+        this.#layers = [{ items: [], recentItems: [] }];
+        this.#globalLayer = { items: [], recentItems: [] };
         this.query = '';
     }
-    addCommands(itemOrItems) {
+    addCommands(itemOrItems, options = {}) {
         const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
-        this.items.push(...items);
+        const itemsWithId = items.map((item) => ({ ...item, id: item.id ?? generateId() }));
+        if (options.global) {
+            this.#globalLayer.items.push(...itemsWithId);
+        }
+        else {
+            this.#layers.at(-1).items.push(...itemsWithId);
+        }
+        return () => this.removeCommands(itemsWithId);
+    }
+    #removeCommands(layer, ids) {
+        return {
+            items: layer.items.filter(({ id }) => !ids[id]),
+            recentItems: layer.recentItems.filter(({ id }) => !ids[id]),
+        };
     }
     removeCommands(itemOrItems) {
         const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
-        for (const remoteItem of items) {
-            this.items = this.items.filter((item) => !isEqual(item, remoteItem));
-        }
+        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);
     }
 }
 export const commandPaletteManager = new CommandPaletteManager();

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

@@ -0,0 +1,6 @@
+import type { ContextMenuBaseProps } from '../types.js';
+declare class MenuManager {
+    show(event: MouseEvent, props: ContextMenuBaseProps): Promise<void>;
+}
+export declare const menuManager: MenuManager;
+export {};

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

@@ -0,0 +1,11 @@
+import ContextMenu from '../components/ContextMenu/ContextMenu.svelte';
+import { modalManager } from './modal-manager.svelte.js';
+class MenuManager {
+    show(event, props) {
+        return modalManager.show(ContextMenu, {
+            ...props,
+            anchor: event.currentTarget,
+        });
+    }
+}
+export const menuManager = new MenuManager();

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

@@ -1,20 +1,20 @@
 import { type Component, type ComponentProps } from 'svelte';
 import ConfirmModal from '../components/ConfirmModal/ConfirmModal.svelte';
 type OnCloseData<T> = T extends {
-    onClose: (data?: infer R) => void;
-} ? R | undefined : T extends {
     onClose: (data: infer R) => void;
-} ? R : never;
+} ? unknown extends R ? void : R : T extends {
+    onClose: (data?: infer R) => void;
+} ? R | undefined : never;
 type ExtendsEmptyObject<T> = keyof T extends never ? never : T;
-type StripValueIfOptional<T> = T extends undefined ? undefined : T;
+type StripParamIfOptional<T> = T extends void ? [] : [T];
 type OptionalParamIfEmpty<T> = ExtendsEmptyObject<T> extends never ? [] | [Record<string, never> | undefined] : [T];
 declare class ModalManager {
     #private;
     get openCount(): number;
-    show<T extends object>(Component: Component<T>, ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>): Promise<StripValueIfOptional<OnCloseData<T>>>;
+    show<T extends object>(Component: Component<T>, ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>): Promise<OnCloseData<T>>;
     open<T extends object, K = OnCloseData<T>>(Component: Component<T>, ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>): {
-        onClose: Promise<StripValueIfOptional<K>>;
-        close: (args_0: StripValueIfOptional<K>) => Promise<void>;
+        onClose: Promise<K>;
+        close: (...args: StripParamIfOptional<K>) => Promise<void>;
     };
     showDialog(options: Omit<ComponentProps<typeof ConfirmModal>, 'onClose'>): Promise<boolean>;
 }

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

@@ -16,7 +16,7 @@ class ModalManager {
                 await unmount(modal);
                 this.#openCount--;
                 // make sure bits-ui clean up finishes before resolving
-                setTimeout(() => resolve(args?.[0]), 10);
+                setTimeout(() => resolve(args[0]), 10);
             };
             modal = mount(Component, {
                 target: document.body,
@@ -29,7 +29,7 @@ class ModalManager {
         });
         return {
             onClose: deferred,
-            close: (...args) => onClose(args[0]),
+            close: (...args) => onClose(...args),
         };
     }
     showDialog(options) {

package/dist/types.d.ts

@@ -9,6 +9,7 @@ export type HeadingColor = TextColor;
 export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
 export type ModalSize = Size | 'full';
 export type ContainerSize = ModalSize;
+export type MenuSize = ModalSize;
 export type HeadingSize = Size | 'title';
 export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
 export type Shape = 'rectangle' | 'semi-round' | 'round';
@@ -25,6 +26,7 @@ export type TranslationProps<T extends keyof Translations> = {
 export type IconLike = string | {
     path: string;
 };
+export type MaybeArray<T> = T | T[];
 export type IconProps = {
     icon: IconLike;
     title?: string;
@@ -202,4 +204,31 @@ export type ToastButton = {
     variant?: Variants;
     onClick: () => void;
 };
+export type MenuSelectHandler = (context: {
+    event: Event;
+    item: MenuItem;
+}) => void;
+export type MenuItem = {
+    title: string;
+    icon: IconLike;
+    color?: Color;
+    onSelect?: MenuSelectHandler;
+};
+export declare enum MenuItemType {
+    Divider = "divider"
+}
+export type MenuItems = Array<MenuItem | MenuItemType>;
+export type MenuProps = {
+    items: MenuItems;
+    bottomItems?: MenuItem[];
+    size?: MenuSize;
+} & HTMLAttributes<HTMLDivElement>;
+export type ContextMenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type ContextMenuBaseProps = MenuProps & {
+    position?: ContextMenuPosition;
+};
+export type ContextMenuProps = ContextMenuBaseProps & {
+    onClose: () => void;
+    anchor: HTMLElement;
+};
 export {};

package/dist/types.js

@@ -3,3 +3,7 @@ export var Theme;
     Theme["Light"] = "light";
     Theme["Dark"] = "dark";
 })(Theme || (Theme = {}));
+export var MenuItemType;
+(function (MenuItemType) {
+    MenuItemType["Divider"] = "divider";
+})(MenuItemType || (MenuItemType = {}));

package/package.json

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

package/dist/components/CommandPalette/CommandPalette.svelte

@@ -1,145 +0,0 @@
-<script lang="ts">
-  import { shortcuts } from '../../actions/shortcut.js';
-  import CloseButton from '../CloseButton/CloseButton.svelte';
-  import CommandPaletteItem from './CommandPaletteItem.svelte';
-  import Icon from '../Icon/Icon.svelte';
-  import Input from '../Input/Input.svelte';
-  import Modal from '../Modal/Modal.svelte';
-  import ModalBody from '../Modal/ModalBody.svelte';
-  import ModalFooter from '../Modal/ModalFooter.svelte';
-  import ModalHeader from '../Modal/ModalHeader.svelte';
-  import Stack from '../Stack/Stack.svelte';
-  import Text from '../Text/Text.svelte';
-  import { commandPaletteManager } from '../../services/command-palette-manager.svelte';
-  import { t } from '../../services/translation.svelte.js';
-  import type { TranslationProps } from '../../types.js';
-  import { mdiArrowDown, mdiArrowUp, mdiKeyboardEsc, mdiKeyboardReturn, mdiMagnify } from '@mdi/js';
-
-  type Props = {
-    translations?: TranslationProps<
-      'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default'
-    >;
-  };
-
-  let { translations }: Props = $props();
-
-  let inputElement = $state<HTMLInputElement | null>(null);
-
-  const handleOpen = () => commandPaletteManager.open();
-  const handleClose = () => commandPaletteManager.close();
-  const handleUp = (event: KeyboardEvent) => handleNavigate(event, 'up');
-  const handleDown = (event: KeyboardEvent) => handleNavigate(event, 'down');
-  const handleSelect = (event: KeyboardEvent) => handleNavigate(event, 'select');
-  const handleNavigate = async (event: KeyboardEvent, direction: 'up' | 'down' | 'select') => {
-    if (!commandPaletteManager.isOpen) {
-      return;
-    }
-
-    event.preventDefault();
-
-    switch (direction) {
-      case 'up': {
-        commandPaletteManager.up();
-        break;
-      }
-
-      case 'down': {
-        commandPaletteManager.down();
-        break;
-      }
-
-      case 'select': {
-        await commandPaletteManager.select();
-        break;
-      }
-    }
-  };
-</script>
-
-<svelte:window
-  use:shortcuts={[
-    { shortcut: { key: 'k', meta: true }, onShortcut: handleOpen },
-    { shortcut: { key: 'k', ctrl: true }, onShortcut: handleOpen },
-    { shortcut: { key: '/' }, preventDefault: true, onShortcut: handleOpen },
-    { shortcut: { key: 'ArrowUp' }, preventDefault: false, ignoreInputFields: false, onShortcut: handleUp },
-    { shortcut: { key: 'ArrowDown' }, preventDefault: false, ignoreInputFields: false, onShortcut: handleDown },
-    { shortcut: { key: 'k', ctrl: true }, ignoreInputFields: false, onShortcut: handleUp },
-    { shortcut: { key: 'k', meta: true }, ignoreInputFields: false, onShortcut: handleUp },
-    { shortcut: { key: 'j', ctrl: true }, ignoreInputFields: false, onShortcut: handleDown },
-    { shortcut: { key: 'j', meta: true }, ignoreInputFields: false, onShortcut: handleDown },
-    { shortcut: { key: 'Enter' }, ignoreInputFields: false, onShortcut: handleSelect },
-    { shortcut: { key: 'Escape' }, onShortcut: handleClose },
-  ]}
-/>
-
-{#if commandPaletteManager.isOpen}
-  <Modal size="large" onClose={handleClose} closeOnBackdropClick>
-    <ModalHeader>
-      <div class="flex place-items-center gap-1">
-        <Input
-          bind:ref={inputElement}
-          bind:value={commandPaletteManager.query}
-          placeholder={t('search_placeholder', translations)}
-          leadingIcon={mdiMagnify}
-          tabindex={1}
-        />
-        <div>
-          <CloseButton onclick={() => commandPaletteManager.close()} class="md:hidden" />
-        </div>
-      </div>
-    </ModalHeader>
-    <ModalBody>
-      <Stack gap={2}>
-        {#if commandPaletteManager.query}
-          {#if commandPaletteManager.results.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}
-          <div class="flex flex-col">
-            {#each commandPaletteManager.results as item, i (i)}
-              <CommandPaletteItem
-                {item}
-                selected={commandPaletteManager.selectedIndex === i}
-                onRemove={commandPaletteManager.query ? undefined : () => commandPaletteManager.remove(i)}
-                onSelect={() => commandPaletteManager.select(i)}
-              />
-            {/each}
-          </div>
-        {/if}
-      </Stack>
-    </ModalBody>
-    <ModalFooter>
-      <div class="flex w-full justify-around">
-        <div class="flex gap-4">
-          <div class="flex place-items-center gap-1">
-            <span class="rounded bg-gray-300 p-1 dark:bg-gray-500">
-              <Icon icon={mdiKeyboardReturn} size="1rem" />
-            </span>
-            <Text size="small">to select</Text>
-          </div>
-
-          <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={mdiArrowUp} size="1rem" />
-              <Icon icon={mdiArrowDown} size="1rem" />
-            </span>
-            <Text size="small">to navigate</Text>
-          </div>
-
-          <div class="flex place-items-center gap-1">
-            <span class="rounded bg-gray-300 p-1 dark:bg-gray-500">
-              <Icon icon={mdiKeyboardEsc} size="1rem" />
-            </span>
-            <Text size="small">to close</Text>
-          </div>
-        </div>
-      </div>
-    </ModalFooter>
-  </Modal>
-{/if}

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

@@ -1,7 +0,0 @@
-import type { TranslationProps } from '../../types.js';
-type Props = {
-    translations?: TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default'>;
-};
-declare const CommandPalette: import("svelte").Component<Props, {}, "">;
-type CommandPalette = ReturnType<typeof CommandPalette>;
-export default CommandPalette;