@immich/ui 0.41.1 → 0.42.1

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,28 @@
           {/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 gap-1">
+        {#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}
+        {#if renderedShortcuts.length > 0}
+          <div class="flex justify-end gap-1">
+            {#each renderedShortcuts[0] as key (key)}
+              <Kbd size="small">{key}</Kbd>
+            {/each}
+          </div>
+        {/if}
+      </div>
     </div>
   </Button>
 </div>

package/dist/components/Kbd/Kbd.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Color, Size } from '../../types.js';
+  import type { Size } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
@@ -7,7 +7,6 @@
 
   type Props = {
     size?: Size;
-    color?: Color;
     class?: string;
     children?: Snippet;
   } & HTMLAttributes<HTMLElement>;
@@ -15,7 +14,7 @@
   const { class: className, size = 'small', children, ...restProps }: Props = $props();
 
   const styles = tv({
-    base: 'bg-subtle text-dark flex flex-col rounded-md border border-b-2 px-1 font-mono shadow',
+    base: 'bg-subtle rounded-md border border-b-2 px-1 py-0.5 font-mono shadow',
     variants: {
       size: {
         tiny: 'text-xs',

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

@@ -1,9 +1,8 @@
-import type { Color, Size } from '../../types.js';
+import type { Size } from '../../types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = {
     size?: Size;
-    color?: Color;
     class?: string;
     children?: Snippet;
 } & HTMLAttributes<HTMLElement>;

package/dist/internal/CommandPaletteModal.svelte

@@ -89,7 +89,7 @@
 
       {#if commandPaletteManager.results.length > 0}
         <div class="flex flex-col">
-          {#each commandPaletteManager.results as item, i (i)}
+          {#each commandPaletteManager.results as item, i (item.id)}
             <CommandPaletteItem
               {item}
               selected={commandPaletteManager.selectedIndex === i}

package/package.json

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