@immich/ui 0.41.0 → 0.42.0

package/dist/actions/shortcut.d.ts

@@ -22,6 +22,7 @@ export declare const shortcutLabel: (shortcut: Shortcut) => string;
  */
 export declare const shouldIgnoreEvent: (event: KeyboardEvent | ClipboardEvent) => boolean;
 export declare const matchesShortcut: (event: KeyboardEvent, shortcut: Shortcut) => boolean;
+export declare const renderShortcut: ({ alt, meta, ctrl, shift, key }: Shortcut) => string[];
 /** Bind a single keyboard shortcut to node. */
 export declare const shortcut: <T extends HTMLElement>(node: T, option: ShortcutOptions<T>) => ActionReturn<ShortcutOptions<T>>;
 /** Binds multiple keyboard shortcuts to node */

package/dist/actions/shortcut.js

@@ -33,6 +33,31 @@ export const matchesShortcut = (event, shortcut) => {
         Boolean(shortcut.shift) === event.shiftKey &&
         Boolean(shortcut.meta) === event.metaKey);
 };
+const isMacOS = globalThis.navigator && /Mac(intosh|Intel)/.test(globalThis.navigator.userAgent);
+const displayOverrides = {
+    ArrowDown: '↓',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    ArrowUp: '↑',
+    Delete: '⌦',
+};
+export const renderShortcut = ({ alt, meta, ctrl, shift, key }) => {
+    const result = [];
+    if (alt) {
+        result.push(isMacOS ? '⌥' : 'Alt');
+    }
+    if (meta) {
+        result.push(isMacOS ? '⌘' : '❖');
+    }
+    if (ctrl) {
+        result.push('Ctrl');
+    }
+    if (shift) {
+        result.push('⇧');
+    }
+    result.push(displayOverrides[key] ?? key.toUpperCase());
+    return result;
+};
 /** Bind a single keyboard shortcut to node. */
 export const shortcut = (node, option) => {
     const { update: shortcutsUpdate, destroy } = shortcuts(node, [option]);

package/dist/components/CommandPalette/CommandPaletteItem.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import { renderShortcut } from '../../actions/shortcut.js';
   import Button from '../Button/Button.svelte';
   import Icon from '../Icon/Icon.svelte';
   import IconButton from '../IconButton/IconButton.svelte';
+  import Kbd from '../Kbd/Kbd.svelte';
   import Text from '../Text/Text.svelte';
   import type { CommandItem } from '../../services/command-palette-manager.svelte';
   import { mdiClose } from '@mdi/js';
@@ -20,6 +22,10 @@
     onRemove?.();
   };
 
+  const shortcuts =
+    item.shortcuts === undefined ? [] : Array.isArray(item.shortcuts) ? item.shortcuts : [item.shortcuts];
+  const renderedShortcuts = shortcuts.map((shortcut) => renderShortcut(shortcut));
+
   let ref = $state<HTMLElement | null>(null);
 
   $effect(() => {
@@ -53,19 +59,32 @@
           {/if}
         </div>
       </div>
-      {#if onRemove}
-        <IconButton
-          size="small"
-          onclick={handleRemove}
-          icon={mdiClose}
-          shape="round"
-          variant="ghost"
-          color="secondary"
-          aria-label="Remove"
-        />
-      {:else}
-        <span class="shrink-0">[{item.type}]</span>
-      {/if}
+      <div class="flex flex-col items-end">
+        {#if onRemove}
+          <IconButton
+            size="small"
+            onclick={handleRemove}
+            icon={mdiClose}
+            shape="round"
+            variant="ghost"
+            color="secondary"
+            aria-label="Remove"
+          />
+        {:else}
+          <span class="shrink-0">[{item.type}]</span>
+        {/if}
+        <div class="flex items-center gap-2">
+          {#if renderedShortcuts.length > 0}
+            <div class="mt-2 flex w-3/4 flex-wrap justify-end gap-1">
+              {#each renderedShortcuts[0] as key (key)}
+                <Kbd>
+                  {key}
+                </Kbd>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </div>
     </div>
   </Button>
 </div>

package/dist/index.d.ts

@@ -68,6 +68,7 @@ export { default as ToastContainer } from './components/Toast/ToastContainer.sve
 export { default as ToastContent } from './components/Toast/ToastContent.svelte';
 export { default as ToastPanel } from './components/Toast/ToastPanel.svelte';
 export * from './services/command-palette-manager.svelte.js';
+export * from './services/menu-manager.svelte.js';
 export * from './services/modal-manager.svelte.js';
 export * from './services/theme.svelte.js';
 export * from './services/toast-manager.svelte.js';

package/dist/index.js

@@ -71,6 +71,7 @@ export { default as ToastContent } from './components/Toast/ToastContent.svelte'
 export { default as ToastPanel } from './components/Toast/ToastPanel.svelte';
 // helpers
 export * from './services/command-palette-manager.svelte.js';
+export * from './services/menu-manager.svelte.js';
 export * from './services/modal-manager.svelte.js';
 export * from './services/theme.svelte.js';
 export * from './services/toast-manager.svelte.js';

package/package.json

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