@immich/ui 0.42.3 → 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';
@@ -83,6 +83,11 @@
     }
   };
 
+  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));
@@ -95,7 +100,7 @@
         {#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,5 +1,5 @@
 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;
@@ -12,7 +12,7 @@ export type CommandItem = {
         ignoreInputFields?: boolean;
         preventDefault?: boolean;
     };
-} & ({
+} & IfLike & ({
     href: string;
 } | {
     action: (command: CommandItem) => void;

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
@@ -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;

package/dist/types.d.ts

@@ -213,14 +213,14 @@ 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';
@@ -231,4 +231,7 @@ export type ContextMenuBaseProps = MenuProps & {
 export type ContextMenuProps = ContextMenuBaseProps & {
     onClose: () => void;
 };
+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.3",
+  "version": "0.43.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",