@immich/ui 0.42.2 → 0.43.0

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -4,7 +4,7 @@
   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 { cleanClass, isEnabled } from '../../utilities/internal.js';
   import { DropdownMenu } from 'bits-ui';
   import { fly } from 'svelte/transition';
   import { tv } from 'tailwind-variants';
@@ -14,7 +14,7 @@
     items,
     bottomItems,
     size = 'medium',
-    anchor,
+    target,
     position = 'top-left',
     class: className,
     ...restProps
@@ -83,19 +83,24 @@
     }
   };
 
-  const alignOffset = $derived(anchor.clientWidth / 2);
-  const sideOffset = $derived(-anchor.clientHeight / 2);
+  const filteredItems = $derived(
+    items.filter((item) => item !== undefined).filter((item) => isDivider(item) || isEnabled(item)),
+  );
+  const filteredBottomItems = $derived(bottomItems?.filter((item) => item !== undefined).filter(isEnabled));
+
+  const alignOffset = $derived(target.clientWidth / 2);
+  const sideOffset = $derived(-target.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}>
+    <DropdownMenu.Content forceMount customAnchor={target} {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)}
+              {#each filteredItems as item, i (isDivider(item) ? i : item.title)}
                 {#if isDivider(item)}
                   <DropdownMenu.Separator class="my-0.5 border-t" />
                 {:else}
@@ -113,10 +118,10 @@
                 {/if}
               {/each}
 
-              {#if bottomItems}
+              {#if filteredBottomItems}
                 <DropdownMenu.Separator class="my-0.5 border-t" />
                 <div class="flex gap-1 px-1">
-                  {#each bottomItems as item (item.title)}
+                  {#each filteredBottomItems as item (item.title)}
                     <DropdownMenu.Item
                       textValue={item.title}
                       closeOnSelect

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

@@ -1,21 +1,21 @@
 import { type Shortcut } from '../actions/shortcut.js';
-import type { MaybeArray, TranslationProps } from '../types.js';
+import type { IfLike, MaybeArray, TranslationProps } from '../types.js';
 export type CommandItem = {
     icon: string;
     iconClass?: string;
     type: string;
     title: string;
     description?: string;
-    text: string;
+    text?: string;
     shortcuts?: MaybeArray<Shortcut>;
     shortcutOptions?: {
         ignoreInputFields?: boolean;
         preventDefault?: boolean;
     };
-} & ({
+} & IfLike & ({
     href: string;
 } | {
-    action: () => void | Promise<void>;
+    action: (command: CommandItem) => void;
 });
 export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default'>;
 export declare const asText: (...items: unknown[]) => string;

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

@@ -1,7 +1,7 @@
 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 { generateId, isEnabled } from '../utilities/internal.js';
 import { modalManager } from './modal-manager.svelte.js';
 export const asText = (...items) => {
     return items
@@ -10,11 +10,11 @@ export const asText = (...items) => {
         .join('|')
         .toLowerCase();
 };
-const isMatch = (item, query) => {
+const isMatch = ({ title, description, type, text = asText(title, description, type) }, query) => {
     if (!query) {
         return true;
     }
-    return item.text.includes(query);
+    return text.includes(query);
 };
 class CommandPaletteManager {
     query = $state('');
@@ -26,9 +26,9 @@ class CommandPaletteManager {
     #isOpen = false;
     #globalLayer = $state({ items: [], recentItems: [] });
     #layers = $state([{ items: [], recentItems: [] }]);
-    items = $derived([...this.#globalLayer.items, ...this.#layers.at(-1).items]);
+    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]);
+    recentItems = $derived([...this.#globalLayer.recentItems, ...this.#layers.at(-1).recentItems].filter(isEnabled));
     results = $derived(this.query ? this.filteredItems : this.recentItems);
     get isEnabled() {
         return this.#isEnabled;
@@ -73,14 +73,12 @@ class CommandPaletteManager {
         if ('href' in command) {
             if (!command.href.startsWith('/')) {
                 window.open(command.href, '_blank');
+                return;
             }
-            else {
-                await goto(command.href);
-            }
-        }
-        else {
-            await command.action();
+            await goto(command.href);
+            return;
         }
+        command.action(command);
     }
     setTranslations(translations = {}) {
         this.#translations = translations;

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

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

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

@@ -1,10 +1,9 @@
 import ContextMenu from '../components/ContextMenu/ContextMenu.svelte';
 import { modalManager } from './modal-manager.svelte.js';
 class MenuManager {
-    show(event, props) {
+    show(props) {
         return modalManager.show(ContextMenu, {
             ...props,
-            anchor: event.currentTarget,
         });
     }
 }

package/dist/types.d.ts

@@ -213,22 +213,25 @@ export type MenuItem = {
     icon: IconLike;
     color?: Color;
     onSelect?: MenuSelectHandler;
-};
+} & IfLike;
 export declare enum MenuItemType {
     Divider = "divider"
 }
-export type MenuItems = Array<MenuItem | MenuItemType>;
+export type MenuItems = Array<MenuItem | MenuItemType | undefined>;
 export type MenuProps = {
     items: MenuItems;
-    bottomItems?: MenuItem[];
+    bottomItems?: (MenuItem | undefined)[];
     size?: MenuSize;
 } & HTMLAttributes<HTMLDivElement>;
 export type ContextMenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type ContextMenuBaseProps = MenuProps & {
+    target: HTMLElement;
     position?: ContextMenuPosition;
 };
 export type ContextMenuProps = ContextMenuBaseProps & {
     onClose: () => void;
-    anchor: HTMLElement;
+};
+export type IfLike = {
+    $if?: () => boolean;
 };
 export {};

package/dist/utilities/internal.d.ts

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

package/dist/utilities/internal.js

@@ -24,3 +24,4 @@ export const resolveIcon = ({ icons, color, override, fallback, }) => {
     }
     return icons[color] ?? fallback;
 };
+export const isEnabled = ({ $if }) => $if?.() ?? true;

package/package.json

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