@immich/ui 0.50.1 → 0.52.0

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/internal/Select.svelte

@@ -136,7 +136,7 @@
             >
               {#snippet children({ selected })}
                 <div
-                  class="flex cursor-pointer items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-colors"
+                  class="flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-colors"
                 >
                   <span>{label}</span>
                 </div>

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

@@ -24,7 +24,14 @@ export const resolveUrl = (url, currentHostname) => {
     }
 };
 export const isExternalLink = (href) => {
-    return !(href.startsWith('/') || href.startsWith('#'));
+    try {
+        const current = new URL(globalThis.location.href);
+        const target = new URL(href, current);
+        return target.origin !== current.origin;
+    }
+    catch {
+        return false;
+    }
 };
 export const isMenuItemType = (item) => {
     return item === MenuItemType.Divider;
@@ -53,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.50.1",
+  "version": "0.52.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
@@ -51,7 +51,7 @@
     "@mdi/js": "^7.4.47",
     "bits-ui": "^2.9.8",
     "luxon": "^3.7.2",
-    "simple-icons": "^15.14.0",
+    "simple-icons": "^16.0.0",
     "svelte-highlight": "^7.8.4",
     "tailwind-merge": "^3.0.0",
     "tailwind-variants": "^3.0.0",

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;