@immich/ui 0.64.1 → 0.65.0

package/dist/components/BasicModal/BasicModal.svelte

@@ -12,6 +12,8 @@
     icon?: string | boolean;
     closeText?: string;
     closeColor?: Color;
+    closeOnBackdropClick?: boolean;
+    closeOnEsc?: boolean;
     size?: ModalSize;
     onClose: () => void;
     children: Snippet;
@@ -22,13 +24,15 @@
     icon,
     closeText = t('close'),
     closeColor = 'secondary',
+    closeOnBackdropClick = true,
+    closeOnEsc = true,
     size = 'small',
     onClose = () => {},
     children,
   }: Props = $props();
 </script>
 
-<Modal {title} {onClose} {size} {icon}>
+<Modal {title} {onClose} {size} {icon} {closeOnBackdropClick} {closeOnEsc}>
   <ModalBody {children} />
   <ModalFooter>
     <Button shape="round" color={closeColor} fullWidth onclick={onClose}>

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

@@ -5,6 +5,8 @@ type Props = {
     icon?: string | boolean;
     closeText?: string;
     closeColor?: Color;
+    closeOnBackdropClick?: boolean;
+    closeOnEsc?: boolean;
     size?: ModalSize;
     onClose: () => void;
     children: Snippet;

package/dist/components/CommandPalette/CommandPaletteDefaultProvider.svelte

@@ -4,7 +4,7 @@
   import type { ActionItem } from '../../types.js';
 
   type Props = {
-    name: string;
+    name?: string;
     actions?: ActionItem[];
   };
 

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

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

package/dist/components/CommandPalette/CommandPaletteItem.svelte

@@ -6,7 +6,6 @@
   import Kbd from '../Kbd/Kbd.svelte';
   import Text from '../Text/Text.svelte';
   import type { ActionItem } from '../../types.js';
-  import { cleanClass } from '../../utilities/internal.js';
 
   type Props = {
     item: ActionItem;
@@ -63,7 +62,7 @@
       <div class="flex shrink-0 flex-col justify-end gap-1">
         {#each renderedShortcuts as shortcut (shortcut.join('-'))}
           <div class="flex justify-end">
-            <Kbd size="tiny" class={cleanClass(selected && 'border')}>{shortcut.join(' ')}</Kbd>
+            <Kbd size="tiny">{shortcut.join(' ')}</Kbd>
           </div>
         {/each}
       </div>

package/dist/internal/CommandPaletteModal.svelte

@@ -2,6 +2,7 @@
   import { shortcuts } from '../actions/shortcut.js';
   import CloseButton from '../components/CloseButton/CloseButton.svelte';
   import CommandPaletteItem from '../components/CommandPalette/CommandPaletteItem.svelte';
+  import Heading from '../components/Heading/Heading.svelte';
   import Icon from '../components/Icon/Icon.svelte';
   import Input from '../components/Input/Input.svelte';
   import Modal from '../components/Modal/Modal.svelte';
@@ -26,6 +27,10 @@
 
   const { onClose, translations, initialQuery = '' }: Props = $props();
 
+  let query = $state(initialQuery);
+
+  $effect(() => commandPaletteManager.queryUpdate(query));
+
   const handleUp = (event: KeyboardEvent) => handleNavigate(event, 'up');
   const handleDown = (event: KeyboardEvent) => handleNavigate(event, 'down');
   const handleSelect = (event: KeyboardEvent) => handleNavigate(event, 'select');
@@ -34,31 +39,26 @@
 
     switch (direction) {
       case 'up': {
-        selectedIndex = Math.max((selectedIndex === 0 ? commandPaletteManager.items.length : selectedIndex) - 1, 0);
+        commandPaletteManager.navigateUp();
         break;
       }
 
       case 'down': {
-        if (!query && commandPaletteManager.items.length === 0) {
+        if (!query && commandPaletteManager.results.length === 0) {
           commandPaletteManager.loadAllItems();
           break;
         }
 
-        selectedIndex = (selectedIndex + 1) % commandPaletteManager.items.length || 0;
+        commandPaletteManager.navigateDown();
         break;
       }
 
       case 'select': {
-        onClose(commandPaletteManager.items[selectedIndex]);
+        onClose(commandPaletteManager.selectedItem);
         break;
       }
     }
   };
-
-  let selectedIndex = $state(0);
-  let query = $state(initialQuery);
-
-  $effect(() => commandPaletteManager.queryUpdate(query));
 </script>
 
 <svelte:window
@@ -90,25 +90,34 @@
   <ModalBody>
     <Stack gap={2}>
       {#if query}
-        {#if commandPaletteManager.items.length === 0}
+        {#if commandPaletteManager.results.length === 0}
           <Text>{t('search_no_results', translations)}</Text>
         {/if}
       {:else}
         <Text>{t('command_palette_prompt_default', translations)}</Text>
       {/if}
 
-      {#if commandPaletteManager.items.length > 0}
-        <div class="flex flex-col">
-          {#each commandPaletteManager.items as item, i (item.id)}
-            <CommandPaletteItem {item} selected={selectedIndex === i} onSelect={() => onClose(item)} />
-          {/each}
-        </div>
-      {/if}
+      {#each commandPaletteManager.results as result, groupIndex (result.provider.name ?? groupIndex)}
+        {#if result.provider.name}
+          <Heading size="tiny" class="pt-2">{result.provider.name}</Heading>
+        {/if}
+        {#if commandPaletteManager.results.length > 0}
+          <div class="flex flex-col">
+            {#each result.items as item (item.id)}
+              <CommandPaletteItem
+                {item}
+                selected={commandPaletteManager.isSelected(item)}
+                onSelect={() => onClose(item)}
+              />
+            {/each}
+          </div>
+        {/if}
+      {/each}
     </Stack>
   </ModalBody>
   <ModalFooter>
     <div class="flex w-full justify-around">
-      {#if !query && commandPaletteManager.items.length === 0}
+      {#if !query && commandPaletteManager.results.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/services/command-palette-manager.svelte.d.ts

@@ -1,20 +1,26 @@
 import type { ActionItem, MaybePromise, TranslationProps } from '../types.js';
 export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'command_palette_prompt_default' | 'command_palette_to_select' | 'command_palette_to_close' | 'command_palette_to_navigate' | 'command_palette_to_show_all'>;
 export type ActionProvider = {
-    name: string;
+    name?: string;
     onSearch: (query?: string) => MaybePromise<ActionItem[]>;
 };
 export declare const defaultProvider: ({ name, actions }: {
-    name: string;
+    name?: string;
     actions: ActionItem[];
 }) => {
-    name: string;
+    name: string | undefined;
     onSearch: (query?: string) => ActionItem[];
 };
 declare class CommandPaletteManager {
     #private;
     get isEnabled(): boolean;
-    get items(): ({
+    get results(): {
+        provider: ActionProvider;
+        items: Array<ActionItem & {
+            id: string;
+        }>;
+    }[];
+    get selectedItem(): {
         title: string;
         description?: string;
         type?: string;
@@ -30,11 +36,16 @@ declare class CommandPaletteManager {
         };
     } & import("../types.js").IfLike & {
         id: string;
-    })[];
+    };
+    isSelected(item: {
+        id: string;
+    }): boolean;
     enable(): void;
     setTranslations(translations?: CommandPaletteTranslations): void;
     queryUpdate(query: string): void;
     open(initialQuery?: string): void;
+    navigateUp(): void;
+    navigateDown(): void;
     loadAllItems(): void;
     addProvider(provider: ActionProvider): () => void;
 }

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

@@ -14,12 +14,21 @@ class CommandPaletteManager {
     #providers = [];
     #isEnabled = false;
     #isOpen = false;
-    #items = $state([]);
+    #results = $state([]);
+    #selectedGroupIndex = $state(0);
+    #selectedItemIndex = $state(0);
     get isEnabled() {
         return this.#isEnabled;
     }
-    get items() {
-        return this.#items;
+    get results() {
+        return this.#results;
+    }
+    get selectedItem() {
+        const group = this.#results[this.#selectedGroupIndex];
+        return group?.items[this.#selectedItemIndex];
+    }
+    isSelected(item) {
+        return this.selectedItem?.id === item.id;
     }
     enable() {
         if (this.#isEnabled) {
@@ -39,15 +48,20 @@ class CommandPaletteManager {
         this.#translations = translations;
     }
     async #onSearch(query) {
-        const newItems = await Promise.all(this.#providers.map((provider) => Promise.resolve(provider.onSearch(query))));
-        this.#items = newItems
-            .flat()
-            .filter((item) => isEnabled(item))
-            .map((item) => ({ ...item, id: generateId() }));
+        const newResults = await Promise.all(this.#providers.map(async (provider) => {
+            const items = await provider.onSearch(query);
+            return {
+                provider,
+                items: items.filter((item) => isEnabled(item)).map((item) => ({ ...item, id: generateId() })),
+            };
+        }));
+        this.#selectedGroupIndex = 0;
+        this.#selectedItemIndex = 0;
+        this.#results = newResults.filter((result) => result.items.length > 0);
     }
     queryUpdate(query) {
         if (!query) {
-            this.#items = [];
+            this.#results = [];
             return;
         }
         void this.#onSearch(query);
@@ -78,7 +92,7 @@ class CommandPaletteManager {
     async #onClose(action) {
         await action?.onAction(action);
         this.#isOpen = false;
-        this.#items = [];
+        this.#results = [];
     }
     open(initialQuery) {
         if (this.#isOpen) {
@@ -91,6 +105,35 @@ class CommandPaletteManager {
         this.#isOpen = true;
         void onClose.then((action) => this.#onClose(action));
     }
+    navigateUp() {
+        const groups = this.#results;
+        if (groups.length === 0) {
+            return;
+        }
+        this.#selectedItemIndex--;
+        if (this.#selectedItemIndex < 0) {
+            this.#selectedGroupIndex--; // previous group
+            if (this.#selectedGroupIndex < 0) {
+                this.#selectedGroupIndex = groups.length - 1; // first group
+            }
+            this.#selectedItemIndex = groups[this.#selectedGroupIndex].items.length - 1;
+        }
+    }
+    navigateDown() {
+        const groups = this.#results;
+        if (groups.length === 0) {
+            return;
+        }
+        const group = groups[this.#selectedGroupIndex];
+        this.#selectedItemIndex++;
+        if (this.#selectedItemIndex >= group.items.length) {
+            this.#selectedItemIndex = 0;
+            this.#selectedGroupIndex++; // next group
+            if (this.#selectedGroupIndex >= groups.length) {
+                this.#selectedGroupIndex = 0; // first group
+            }
+        }
+    }
     loadAllItems() {
         void this.#onSearch();
     }

package/dist/site/constants.d.ts

@@ -41,7 +41,6 @@ export declare const Constants: {
 };
 export declare const siteCommands: {
     icon: string;
-    type: string;
     iconClass: string;
     title: string;
     description: string;

package/dist/site/constants.js

@@ -129,7 +129,6 @@ export const siteCommands = [
     },
 ].map((site) => ({
     icon: mdiOpenInNew,
-    type: 'Link',
     iconClass: 'text-indigo-700 dark:text-indigo-200',
     title: site.title,
     description: site.description,

package/package.json

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