@immich/ui 0.42.0 → 0.42.2

package/dist/components/CommandPalette/CommandPaletteContext.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { commandPaletteManager, type CommandItem } from '../../services/command-palette-manager.svelte';
-  import { onMount } from 'svelte';
+  import { untrack } from 'svelte';
 
   type Props = {
     commands?: CommandItem[];
@@ -9,5 +9,11 @@
 
   const { commands = [], global }: Props = $props();
 
-  onMount(() => commandPaletteManager.addCommands(commands, { global }));
+  $effect(() => {
+    // prevent reactivity loop
+    const addCommands = (commands: CommandItem[], global?: boolean) =>
+      untrack(() => commandPaletteManager.addCommands(commands, { global }));
+
+    return addCommands(commands, global);
+  });
 </script>

package/dist/components/CommandPalette/CommandPaletteItem.svelte

@@ -59,7 +59,7 @@
           {/if}
         </div>
       </div>
-      <div class="flex flex-col items-end">
+      <div class="flex flex-col items-end gap-1">
         {#if onRemove}
           <IconButton
             size="small"
@@ -73,17 +73,13 @@
         {: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>
+        {#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>

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/dist/services/command-palette-manager.svelte.d.ts

@@ -2,7 +2,7 @@ import { type Shortcut } from '../actions/shortcut.js';
 import type { MaybeArray, TranslationProps } from '../types.js';
 export type CommandItem = {
     icon: string;
-    iconClass: string;
+    iconClass?: string;
     type: string;
     title: string;
     description?: string;

package/package.json

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