@immich/ui 0.49.3 → 0.50.1

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -18,7 +18,7 @@
   <Scrollable
     class={cleanClass(
       'bg-light text-dark absolute shrink-0 border-e shadow-lg transition-all duration-200 md:relative',
-      open ? `${zIndex.AppShellSidebar} w-[min(100vw,16rem)]` : 'w-[0px] border-e-0',
+      open ? `${zIndex.AppShellSidebar} w-[min(100vw,16rem)]` : 'w-0 border-e-0',
       className,
     )}
   >

package/dist/components/Avatar/Avatar.svelte

@@ -11,7 +11,7 @@
   const { color = 'primary', size = 'medium', name }: Props = $props();
 
   const styles = tv({
-    base: 'flex h-full w-full items-center justify-center font-medium select-none',
+    base: 'flex h-full w-full items-center justify-center font-medium text-white select-none',
     variants: {
       size: {
         tiny: 'h-5 w-5 text-xs',
@@ -22,15 +22,15 @@
       },
       color: {
         primary: 'bg-primary text-light',
-        pink: 'text-light bg-pink-400',
-        red: 'text-light bg-red-500',
-        yellow: 'text-light bg-yellow-500',
-        purple: 'text-dark bg-purple-600',
-        orange: 'text-light bg-orange-600',
-        gray: 'text-dark bg-gray-600',
-        amber: 'text-light bg-amber-600',
-        blue: 'text-dark bg-blue-500',
-        green: 'text-dark bg-green-600',
+        pink: 'bg-pink-400',
+        red: 'bg-red-500',
+        yellow: 'bg-yellow-500',
+        purple: 'bg-purple-600',
+        orange: 'bg-orange-600',
+        gray: 'bg-gray-600',
+        amber: 'bg-amber-600',
+        blue: 'bg-blue-500',
+        green: 'bg-green-600',
       },
     },
   });

package/dist/components/Badge/Badge.svelte

@@ -24,31 +24,31 @@
   }: Props = $props();
 
   const styles = tv({
-    base: 'border px-2 py-0.5',
+    base: 'text-light inline-flex items-center border font-medium antialiased',
     variants: {
       shape: styleVariants.shape,
       color: {
-        primary: 'border-primary-100 bg-primary-100 text-primary-950 dark:bg-primary-200 dark:border-primary-200',
-        secondary: 'border-light-300 bg-light-100 text-light-950 dark:bg-light-200',
-        success: 'border-success-100 bg-success-100 text-success-950 dark:bg-success-200 dark:border-success-200',
-        info: 'border-info-200 bg-info-200 text-info-950',
-        warning: 'border-warning-200 bg-warning-200 text-warning-950',
-        danger: 'border-danger-200 bg-danger-200 text-danger-950 dark:bg-danger-200',
+        primary: 'bg-primary',
+        secondary: 'bg-dark',
+        success: 'bg-success',
+        info: 'bg-info',
+        warning: 'bg-warning',
+        danger: 'bg-danger text-danger-50',
       },
       textSize: styleVariants.textSize,
       paddingSize: {
-        tiny: 'px-1.5 py-px',
-        small: 'px-1.75 py-0.5',
-        medium: 'px-2.5 py-0.75',
+        tiny: 'px-1.5 py-1',
+        small: 'px-1.75 py-0.75',
+        medium: 'px-2.5 py-1',
         large: 'px-2.75 py-1',
         giant: 'px-3 py-1.25',
       },
       roundedSize: {
-        tiny: 'rounded-md',
-        small: 'rounded-md',
-        medium: 'rounded-md',
-        large: 'rounded-lg',
-        giant: 'rounded-lg',
+        tiny: 'rounded-lg',
+        small: 'rounded-lg',
+        medium: 'rounded-lg',
+        large: 'rounded-xl',
+        giant: 'rounded-xl',
       },
     },
   });

package/dist/components/Breadcrumbs/Breadcrumbs.svelte

@@ -19,7 +19,7 @@
   </span>
 {/snippet}
 
-<nav class={cleanClass('flex items-center gap-1', className)} {...props}>
+<nav class={cleanClass('flex flex-wrap items-center gap-1', className)} {...props}>
   {#each items as item, index (index)}
     {#if index > 0}
       {#if typeof separator === 'object' && 'text' in separator}

package/dist/components/Card/Card.svelte

@@ -9,7 +9,6 @@
   import { cubicOut } from 'svelte/easing';
   import type { HTMLAttributes } from 'svelte/elements';
   import { slide } from 'svelte/transition';
-  import { twMerge } from 'tailwind-merge';
   import { tv } from 'tailwind-variants';
 
   type Props = HTMLAttributes<HTMLDivElement> & {
@@ -87,14 +86,12 @@
   const headerPadding = $derived(headerBorder || !expanded);
 
   const headerContainerClasses = $derived(
-    twMerge(
-      cleanClass(
-        headerContainerStyles({
-          padding: headerPadding,
-          border: headerBorder,
-        }),
-        headerChild?.class,
-      ),
+    cleanClass(
+      headerContainerStyles({
+        padding: headerPadding,
+        border: headerBorder,
+      }),
+      headerChild?.class,
     ),
   );
 </script>
@@ -137,14 +134,14 @@
     {#if bodyChild && expanded}
       <div
         transition:slide={{ duration: expandable ? 200 : 0, easing: cubicOut }}
-        class={twMerge(cleanClass('immich-scrollbar h-full w-full overflow-auto p-4', bodyChild?.class))}
+        class={cleanClass('immich-scrollbar h-full w-full overflow-auto p-4', bodyChild?.class)}
       >
         {@render bodyChild?.snippet()}
       </div>
     {/if}
 
     {#if footerChild}
-      <div class={twMerge(cleanClass('flex items-center border-t p-4', footerChild.class))}>
+      <div class={cleanClass('flex items-center border-t p-4', footerChild.class)}>
         {@render footerChild.snippet()}
       </div>
     {/if}

package/dist/components/CommandPalette/CommandPaletteItem.svelte

@@ -43,11 +43,13 @@
     fullWidth
     variant={selected ? 'outline' : 'ghost'}
     color="secondary"
-    class="flex justify-between gap-3 border text-start {selected ? 'border-neutral-500!' : ''}"
+    class="hover:bg-primary-50 flex justify-between gap-3 border py-4 text-start {selected
+      ? 'border-primary/50 bg-primary-50'
+      : 'border-light-200 dark:border-light-300'}"
   >
     <div class="flex flex-col">
-      <div class="flex items-center gap-1">
-        <Text fontWeight="bold">{item.title}</Text>
+      <div class="flex place-items-center gap-2">
+        <Text fontWeight="semi-bold">{item.title}</Text>
         <Icon icon={item.icon} size="1.25rem" class={item.iconClass} />
       </div>
       {#if item.description}
@@ -58,9 +60,9 @@
         >
       {/if}
       <div class="mt-2">
-        <Badge size="small" color="primary" shape="rectangle">{item.type}</Badge>
+        <Badge color="primary" size="small">{item.type}</Badge>
         {#if item.isGlobal}
-          <Badge size="small" shape="rectangle" color="warning">Global</Badge>
+          <Badge color="warning" size="small">Global</Badge>
         {/if}
       </div>
     </div>

package/dist/components/ConfirmModal/ConfirmModal.svelte

@@ -4,8 +4,8 @@
   import ModalBody from '../Modal/ModalBody.svelte';
   import ModalFooter from '../Modal/ModalFooter.svelte';
   import HStack from '../Stack/HStack.svelte';
-  import type { Color } from '../../types.js';
   import { t } from '../../services/translation.svelte.js';
+  import type { Color, ModalSize } from '../../types.js';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -15,7 +15,7 @@
     confirmText?: string;
     confirmColor?: Color;
     disabled?: boolean;
-    size?: 'small' | 'medium';
+    size?: ModalSize;
     onClose: (confirmed: boolean) => void;
     promptSnippet?: Snippet;
   }

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

@@ -1,4 +1,4 @@
-import type { Color } from '../../types.js';
+import type { Color, ModalSize } from '../../types.js';
 import type { Snippet } from 'svelte';
 interface Props {
     title?: string;
@@ -7,7 +7,7 @@ interface Props {
     confirmText?: string;
     confirmColor?: Color;
     disabled?: boolean;
-    size?: 'small' | 'medium';
+    size?: ModalSize;
     onClose: (confirmed: boolean) => void;
     promptSnippet?: Snippet;
 }

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -3,7 +3,8 @@
   import Text from '../Text/Text.svelte';
   import { zIndex } from '../../constants.js';
   import { styleVariants } from '../../styles.js';
-  import { MenuItemType, type ContextMenuProps, type ActionItem } from '../../types.js';
+  import { type ActionItem, type ContextMenuProps, type MenuItems } from '../../types.js';
+  import { isMenuItemType } from '../../utilities/common.js';
   import { cleanClass, isEnabled } from '../../utilities/internal.js';
   import { DropdownMenu } from 'bits-ui';
   import { fly } from 'svelte/transition';
@@ -20,10 +21,6 @@
     ...restProps
   }: ContextMenuProps = $props();
 
-  const isDivider = (item: ActionItem | MenuItemType): item is MenuItemType => {
-    return item === MenuItemType.Divider;
-  };
-
   const itemStyles = tv({
     base: 'hover:bg-light-200 flex w-full items-center gap-1 rounded-lg p-1 text-start hover:cursor-pointer',
     variants: {
@@ -83,10 +80,35 @@
     }
   };
 
-  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 getFilteredItems = (items?: MenuItems) => {
+    if (!items) {
+      return [];
+    }
+
+    const results = [];
+    for (const item of items) {
+      if (item && (isMenuItemType(item) || isEnabled(item))) {
+        results.push(item);
+        continue;
+      }
+    }
+
+    // remove trailing dividers
+    for (let i = results.length - 1; i >= 0; i--) {
+      const item = results[i];
+      if (isMenuItemType(item)) {
+        results.pop();
+        continue;
+      }
+
+      break;
+    }
+
+    return results;
+  };
+
+  const filteredItems = $derived(getFilteredItems(items));
+  const filteredBottomItems = $derived(getFilteredItems(bottomItems) as ActionItem[]);
 
   const alignOffset = $derived(target.clientWidth / 2);
   const sideOffset = $derived(-target.clientHeight / 2);
@@ -100,8 +122,8 @@
         {#if open}
           <div {...wrapperProps} class={zIndex.ContextMenu}>
             <div {...props} {...restProps} class={cleanClass(wrapperStyles({ size }), className)} transition:fly>
-              {#each filteredItems as item, i (isDivider(item) ? i : item.title)}
-                {#if isDivider(item)}
+              {#each filteredItems as item, i (isMenuItemType(item) ? i : item.title)}
+                {#if isMenuItemType(item)}
                   <DropdownMenu.Separator class="dark:border-light-300 my-0.5 border-t" />
                 {:else}
                   <DropdownMenu.Item
@@ -118,7 +140,7 @@
                 {/if}
               {/each}
 
-              {#if filteredBottomItems}
+              {#if filteredBottomItems.length > 0}
                 <DropdownMenu.Separator class="dark:border-light-300 my-0.5 border-t" />
                 <div class="flex gap-1 px-1">
                   {#each filteredBottomItems as item (item.title)}

package/dist/components/ContextMenu/ContextMenuButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import IconButton from '../IconButton/IconButton.svelte';
   import { menuManager } from '../../services/menu-manager.svelte.js';
+  import { t } from '../../services/translation.svelte.js';
   import type { ContextMenuButtonProps } from '../../types.js';
   import { mdiDotsVertical } from '@mdi/js';
 
@@ -10,8 +11,10 @@
     icon = mdiDotsVertical,
     variant = 'ghost',
     shape = 'round',
+    'aria-label': ariaLabel,
     items,
     bottomItems,
+    translations,
     ...rest
   }: ContextMenuButtonProps = $props();
 
@@ -20,4 +23,12 @@
   };
 </script>
 
-<IconButton {icon} {color} {shape} {variant} {...rest} {onclick} />
+<IconButton
+  {icon}
+  {color}
+  {shape}
+  {variant}
+  aria-label={ariaLabel ?? t('open_menu', translations)}
+  {...rest}
+  {onclick}
+/>

package/dist/components/FormModal/FormModal.svelte

@@ -5,7 +5,7 @@
   import ModalFooter from '../Modal/ModalFooter.svelte';
   import HStack from '../Stack/HStack.svelte';
   import { t } from '../../services/translation.svelte.js';
-  import type { Color } from '../../types.js';
+  import type { Color, ModalSize } from '../../types.js';
   import { generateId } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
 
@@ -15,7 +15,7 @@
     submitText?: string;
     submitColor?: Color;
     disabled?: boolean;
-    size?: 'small' | 'medium';
+    size?: ModalSize;
     preventDefault?: boolean;
     onClose: () => void;
     onSubmit: (event: SubmitEvent) => void;

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

@@ -1,4 +1,4 @@
-import type { Color } from '../../types.js';
+import type { Color, ModalSize } from '../../types.js';
 import type { Snippet } from 'svelte';
 type Props = {
     title: string;
@@ -6,7 +6,7 @@ type Props = {
     submitText?: string;
     submitColor?: Color;
     disabled?: boolean;
-    size?: 'small' | 'medium';
+    size?: ModalSize;
     preventDefault?: boolean;
     onClose: () => void;
     onSubmit: (event: SubmitEvent) => void;

package/dist/components/Textarea/Textarea.svelte

@@ -22,7 +22,7 @@
   const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(getFieldContext());
 
   const styles = tv({
-    base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
+    base: 'focus-within:ring-primary dark:focus-within:ring-primary w-full bg-gray-100 ring-1 ring-gray-200 outline-none focus-within:ring-1 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-800 dark:ring-black dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
     variants: {
       shape: styleVariants.shape,
       padding: {

package/dist/components/Toast/ToastContent.svelte

@@ -27,15 +27,15 @@
   );
 
   const iconStyles = tv({
-    base: 'h-8 w-8 shrink-0 rounded-xl py-1.75',
+    base: 'h-8 w-8 shrink-0 rounded-xl py-1.75 text-white',
     variants: {
       color: {
-        primary: 'bg-primary-100 dark:bg-primary-200 text-primary',
-        secondary: 'bg-light-200 dark:bg-light-300',
-        success: 'bg-success-100 dark:bg-success-200 text-success',
-        info: 'bg-info-200 text-info',
-        warning: 'bg-warning-200 text-warning',
-        danger: 'bg-danger-200 text-danger',
+        primary: 'bg-primary dark:bg-primary-200',
+        secondary: 'bg-dark dark:bg-light-300',
+        success: 'bg-success dark:bg-success-200',
+        info: 'bg-info dark:text-info-50',
+        warning: 'bg-warning dark:text-warning-50',
+        danger: 'bg-danger dark:text-danger-50',
       },
     },
   });

package/dist/components/Toast/ToastPanel.svelte

@@ -4,7 +4,6 @@
   import { isCustomToast } from '../../services/toast-manager.svelte.js';
   import type { ToastPanelProps } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
-  import { twMerge } from 'tailwind-merge';
 
   const { items, class: className, ...props }: ToastPanelProps = $props();
 
@@ -12,12 +11,10 @@
 </script>
 
 <div
-  class={twMerge(
-    cleanClass(
-      isEmpty ? 'hidden' : 'absolute top-0 right-0 flex flex-col items-end justify-end gap-2 p-4',
-      zIndex.ToastPanel,
-      className,
-    ),
+  class={cleanClass(
+    isEmpty ? 'hidden' : 'absolute top-0 right-0 flex flex-col items-end justify-end gap-2 p-4',
+    zIndex.ToastPanel,
+    className,
   )}
   {...props}
 >

package/dist/internal/Button.svelte

@@ -7,7 +7,6 @@
   import { cleanClass } from '../utilities/internal.js';
   import { Button as ButtonPrimitive } from 'bits-ui';
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-  import { twMerge } from 'tailwind-merge';
   import { tv } from 'tailwind-variants';
 
   type InternalButtonProps = ButtonProps & {
@@ -99,22 +98,20 @@
 
   const classList = $derived(
     cleanClass(
-      twMerge(
-        buttonVariants({
-          shape,
-          fullWidth,
-          textPadding: icon ? undefined : size,
-          textSize: size,
-          iconSize: icon ? size : undefined,
-          disabled,
-          roundedSize: shape === 'semi-round' ? size : undefined,
-          filledColor: variant === 'filled' ? color : undefined,
-          filledColorHover: variant === 'filled' ? color : undefined,
-          outlineColor: variant === 'outline' ? color : undefined,
-          ghostColor: variant === 'ghost' ? color : undefined,
-        }),
-        className,
-      ),
+      buttonVariants({
+        shape,
+        fullWidth,
+        textPadding: icon ? undefined : size,
+        textSize: size,
+        iconSize: icon ? size : undefined,
+        disabled,
+        roundedSize: shape === 'semi-round' ? size : undefined,
+        filledColor: variant === 'filled' ? color : undefined,
+        filledColorHover: variant === 'filled' ? color : undefined,
+        outlineColor: variant === 'outline' ? color : undefined,
+        ghostColor: variant === 'ghost' ? color : undefined,
+      }),
+      className,
     ),
   );
 

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

@@ -4,16 +4,76 @@ export declare const asText: (...items: unknown[]) => string;
 declare class CommandPaletteManager {
     #private;
     selectedIndex: number;
-    items: (ActionItem & {
+    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: (ActionItem & {
+    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: (ActionItem & {
+    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: (ActionItem & {
+    results: ({
+        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;
     })[];
     get isEnabled(): boolean;

package/dist/services/translation.svelte.d.ts

@@ -12,6 +12,7 @@ declare const defaultTranslations: {
     show_password: string;
     hide_password: string;
     dark_theme: string;
+    open_menu: string;
     command_palette_prompt_default: string;
     command_palette_to_select: string;
     command_palette_to_navigate: string;

package/dist/services/translation.svelte.js

@@ -17,6 +17,8 @@ const defaultTranslations = {
     hide_password: 'Hide password',
     // theme switcher
     dark_theme: 'Toggle dark theme',
+    // context menu
+    open_menu: 'Open menu',
     // command palette
     command_palette_prompt_default: 'Quickly find pages, actions, or commands',
     command_palette_to_select: 'to select',

package/dist/theme/default.css

@@ -119,7 +119,7 @@
     --immich-ui-primary-900: oklch(0.211 0.068 273.01);
     --immich-ui-primary-950: oklch(0.15 0.05 273.01);
 
-    --immich-ui-success-50: oklch(0.969 0.051 148.59);
+    --immich-ui-success-50: oklch(0.983 0.0115 162.06);
     --immich-ui-success-100: oklch(0.937 0.109 148.66);
     --immich-ui-success-200: oklch(0.863 0.249 147.5);
     --immich-ui-success-300: oklch(0.813 0.234 147.54);
@@ -131,7 +131,7 @@
     --immich-ui-success-900: oklch(0.252 0.073 147.47);
     --immich-ui-success-950: oklch(0.194 0.056 147.87);
 
-    --immich-ui-danger-50: oklch(0.96 0.018 17.57);
+    --immich-ui-danger-50: oklch(0.9747 0.0109 24.32);
     --immich-ui-danger-100: oklch(0.926 0.034 17.84);
     --immich-ui-danger-200: oklch(0.853 0.074 19.77);
     --immich-ui-danger-300: oklch(0.774 0.125 21.53);
@@ -143,7 +143,7 @@
     --immich-ui-danger-900: oklch(0.245 0.094 29.51);
     --immich-ui-danger-950: oklch(0.186 0.07 29.56);
 
-    --immich-ui-warning: oklch(0.812 0.17 76.3);
+    --immich-ui-warning: oklch(0.9887 0.0126 86.83);
     --immich-ui-warning-50: oklch(0.983 0.01 58.27);
     --immich-ui-warning-100: oklch(0.959 0.027 63.96);
     --immich-ui-warning-200: oklch(0.925 0.051 64.24);
@@ -156,7 +156,7 @@
     --immich-ui-warning-900: oklch(0.27 0.057 76.33);
     --immich-ui-warning-950: oklch(0.209 0.044 77.51);
 
-    --immich-ui-info-50: oklch(0.958 0.02 267.31);
+    --immich-ui-info-50: oklch(0.9801 0.0096 252.81);
     --immich-ui-info-100: oklch(0.922 0.036 268.3);
     --immich-ui-info-200: oklch(0.845 0.073 265.19);
     --immich-ui-info-300: oklch(0.769 0.114 261.53);

package/dist/types.d.ts

@@ -1,8 +1,8 @@
+import type { Shortcut } from './actions/shortcut.js';
 import type { Translations } from './services/translation.svelte.js';
 import type { DateTime } from 'luxon';
 import type { Component, Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLTextareaAttributes } from 'svelte/elements';
-import type { Shortcut } from './actions/shortcut.js';
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 export type TextColor = Color | 'muted';
 export type TextVariant = 'italic';
@@ -71,9 +71,9 @@ export type CloseButtonProps = {
 export type ContextMenuButtonProps = ButtonBase & {
     icon?: IconLike;
     position?: ContextMenuPosition;
-    'aria-label': string;
     items: MenuItems;
     bottomItems?: Array<ActionItem | undefined>;
+    translations?: TranslationProps<'open_menu'>;
 } & Omit<HTMLButtonAttributes, 'color' | 'size'>;
 export type IconButtonProps = ButtonBase & {
     icon: IconLike;
@@ -243,8 +243,8 @@ export type DatePickerProps = {
 export type IfLike = {
     $if?: () => boolean;
 };
-export type ActionItemHandler<T = never> = (item: ActionItem<T>) => void | Promise<void>;
-export type ActionItem<T = never> = Omit<{
+export type ActionItemHandler<T extends ActionItem = ActionItem> = (item: T) => void | Promise<void>;
+export type ActionItem = {
     title: string;
     description?: string;
     type?: string;
@@ -252,17 +252,14 @@ export type ActionItem<T = never> = Omit<{
     icon: IconLike;
     iconClass?: string;
     color?: Color;
-    onAction: ActionItemHandler<T>;
-    data: T;
+    onAction: ActionItemHandler;
     shortcuts?: MaybeArray<Shortcut>;
     shortcutOptions?: {
         ignoreInputFields?: boolean;
         preventDefault?: boolean;
     };
     isGlobal?: boolean;
-} & IfLike, [
-    T
-] extends [never] ? 'data' : ''>;
+} & IfLike;
 export type BreadcrumbsProps = {
     separator?: IconLike | {
         text: string;

package/dist/utilities/common.d.ts

@@ -1,3 +1,4 @@
+import { MenuItemType, type ActionItem } from '../types.js';
 import type { DateTime } from 'luxon';
 export declare const resolveUrl: (url: string, currentHostname?: string) => string;
 export declare const isExternalLink: (href: string) => boolean;
@@ -14,6 +15,7 @@ export type ArticleMetadata = {
     section?: string;
     tags?: string[];
 };
+export declare const isMenuItemType: (item: ActionItem | MenuItemType) => item is MenuItemType;
 export declare const resolveMetadata: (site: Metadata, page?: Metadata, article?: ArticleMetadata) => {
     type: string;
     siteName: string;

package/dist/utilities/common.js

@@ -1,4 +1,5 @@
 import { env } from '$env/dynamic/public';
+import { MenuItemType } from '../types.js';
 const getImmichApp = (host) => {
     if (!host || !host.endsWith('immich.app')) {
         return false;
@@ -25,6 +26,9 @@ export const resolveUrl = (url, currentHostname) => {
 export const isExternalLink = (href) => {
     return !(href.startsWith('/') || href.startsWith('#'));
 };
+export const isMenuItemType = (item) => {
+    return item === MenuItemType.Divider;
+};
 export const resolveMetadata = (site, page, article) => {
     const title = page ? `${page.title} | ${site.title}` : site.title;
     const description = page?.description ?? site.description;

package/package.json

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