@immich/ui 0.44.0 → 0.45.0

package/dist/internal/CommandPaletteModal.svelte

@@ -61,7 +61,7 @@
   ]}
 />
 
-<Modal size="large" {onClose} closeOnBackdropClick>
+<Modal size="large" {onClose} closeOnBackdropClick class="max-h-[75vh] lg:max-h-[50vh]">
   <ModalHeader>
     <div class="flex place-items-center gap-1">
       <Input
@@ -93,7 +93,9 @@
             <CommandPaletteItem
               {item}
               selected={commandPaletteManager.selectedIndex === i}
-              onRemove={commandPaletteManager.query ? undefined : () => commandPaletteManager.remove(i)}
+              onRemove={commandPaletteManager.query || commandPaletteManager.isShowAll
+                ? undefined
+                : () => commandPaletteManager.remove(i)}
               onSelect={() => commandPaletteManager.select(i)}
             />
           {/each}
@@ -103,29 +105,38 @@
   </ModalBody>
   <ModalFooter>
     <div class="flex w-full justify-around">
-      <div class="flex gap-4">
-        <div class="flex place-items-center gap-1">
-          <span class="rounded bg-gray-300 p-1 dark:bg-gray-500">
-            <Icon icon={mdiKeyboardReturn} size="1rem" />
-          </span>
-          <Text size="small">to select</Text>
-        </div>
-
+      {#if commandPaletteManager.isEmpty}
         <div class="flex place-items-center gap-1">
           <span class="flex gap-1 rounded bg-gray-300 p-1 dark:bg-gray-500">
-            <Icon icon={mdiArrowUp} size="1rem" />
             <Icon icon={mdiArrowDown} size="1rem" />
           </span>
-          <Text size="small">to navigate</Text>
+          <Text size="small">{t('command_palette_to_show_all', translations)}</Text>
         </div>
+      {:else}
+        <div class="flex gap-4">
+          <div class="flex place-items-center gap-1">
+            <span class="rounded bg-gray-300 p-1 dark:bg-gray-500">
+              <Icon icon={mdiKeyboardReturn} size="1rem" />
+            </span>
+            <Text size="small">{t('command_palette_to_select', translations)}</Text>
+          </div>
 
-        <div class="flex place-items-center gap-1">
-          <span class="rounded bg-gray-300 p-1 dark:bg-gray-500">
-            <Icon icon={mdiKeyboardEsc} size="1rem" />
-          </span>
-          <Text size="small">to close</Text>
+          <div class="flex place-items-center gap-1">
+            <span class="flex gap-1 rounded bg-gray-300 p-1 dark:bg-gray-500">
+              <Icon icon={mdiArrowUp} size="1rem" />
+              <Icon icon={mdiArrowDown} size="1rem" />
+            </span>
+            <Text size="small">{t('command_palette_to_navigate', translations)}</Text>
+          </div>
+
+          <div class="flex place-items-center gap-1">
+            <span class="rounded bg-gray-300 p-1 dark:bg-gray-500">
+              <Icon icon={mdiKeyboardEsc} size="1rem" />
+            </span>
+            <Text size="small">{t('command_palette_to_close', translations)}</Text>
+          </div>
         </div>
-      </div>
+      {/if}
     </div>
   </ModalFooter>
 </Modal>

package/dist/internal/DatePicker.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import { getFieldContext } from '../common/context.svelte.js';
+  import Icon from '../components/Icon/Icon.svelte';
+  import IconButton from '../components/IconButton/IconButton.svelte';
+  import Label from '../components/Label/Label.svelte';
+  import { zIndex } from '../constants.js';
+  import { styleVariants } from '../styles.js';
+  import type { Shape, Size } from '../types.js';
+  import { cleanClass, generateId } from '../utilities/internal.js';
+  import type { DateValue } from '@internationalized/date';
+  import { mdiCalendar, mdiChevronLeft, mdiChevronRight } from '@mdi/js';
+  import { DatePicker } from 'bits-ui';
+  import { tv } from 'tailwind-variants';
+
+  type Props = {
+    onChange?: (date?: DateValue) => void;
+    minDate?: DateValue;
+    maxDate?: DateValue;
+    date?: DateValue;
+    class?: string;
+    shape?: Shape;
+    size?: Size;
+  };
+
+  let {
+    onChange,
+    minDate,
+    maxDate,
+    date = $bindable<DateValue | undefined>(undefined),
+    class: className,
+    shape = 'semi-round',
+    size = 'small',
+  }: Props = $props();
+
+  const { readOnly, required, invalid, disabled, label, ...labelProps } = $derived(getFieldContext());
+
+  const id = generateId();
+  const inputId = `datepicker-${id}`;
+  const labelId = `label-${id}`;
+
+  const containerStyles = tv({
+    base: cleanClass(styleVariants.inputContainerCommon, 'flex w-full items-center'),
+    variants: {
+      shape: styleVariants.shape,
+      roundedSize: styleVariants.inputRoundedSize,
+      invalid: {
+        true: 'border-danger/80 border',
+        false: '',
+      },
+    },
+  });
+
+  const buttonStyles = tv({
+    base: 'flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-neutral-200 hover:dark:bg-neutral-700',
+  });
+
+  const segmentStyles = tv({
+    base: 'rounded px-1 py-0.5 tabular-nums outline-none focus:bg-gray-300 focus:text-gray-900 data-disabled:cursor-not-allowed data-focused:bg-gray-300 data-focused:text-gray-900 data-placeholder:text-gray-400 dark:focus:bg-gray-700 dark:focus:text-gray-100 dark:data-focused:bg-gray-700 dark:data-focused:text-gray-100',
+    variants: {
+      textSize: styleVariants.textSize,
+    },
+  });
+</script>
+
+<div class={cleanClass('flex w-full flex-col gap-1', className)}>
+  {#if label}
+    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
+  {/if}
+
+  <DatePicker.Root
+    onValueChange={onChange}
+    minValue={minDate}
+    maxValue={maxDate}
+    bind:value={date}
+    readonly={readOnly}
+    {disabled}
+  >
+    <DatePicker.Input
+      id={inputId}
+      aria-labelledby={labelId}
+      class={containerStyles({
+        shape,
+        roundedSize: shape === 'semi-round' ? size : undefined,
+        invalid,
+      })}
+    >
+      {#snippet children({ segments })}
+        <div class={cleanClass(styleVariants.inputCommon, 'w-full px-4 py-2')}>
+          {#each segments as { part, value }, i (`segment-${i}`)}
+            <DatePicker.Segment {part} class={segmentStyles({ textSize: size })}>
+              {value}
+            </DatePicker.Segment>
+          {/each}
+        </div>
+        <DatePicker.Trigger class="mr-2 rounded-full">
+          <IconButton
+            variant="ghost"
+            shape="round"
+            color="secondary"
+            {size}
+            icon={mdiCalendar}
+            {disabled}
+            aria-label="Open calendar"
+          />
+        </DatePicker.Trigger>
+      {/snippet}
+    </DatePicker.Input>
+    <DatePicker.Portal>
+      <DatePicker.Content
+        class="bg-subtle text-dark rounded-xl border p-4 shadow-lg outline-none select-none {zIndex.SelectDropdown}"
+        sideOffset={10}
+      >
+        <DatePicker.Calendar class="w-full">
+          {#snippet children({ months, weekdays })}
+            <DatePicker.Header class="mb-3 flex items-center justify-between">
+              <DatePicker.PrevButton class={buttonStyles()}>
+                <Icon icon={mdiChevronLeft} size="1.25rem" />
+              </DatePicker.PrevButton>
+              <DatePicker.Heading class="text-sm font-semibold" />
+              <DatePicker.NextButton class={buttonStyles()}>
+                <Icon icon={mdiChevronRight} size="1.25rem" />
+              </DatePicker.NextButton>
+            </DatePicker.Header>
+            {#each months as month (`month-${month.value}`)}
+              <DatePicker.Grid class="w-full border-collapse">
+                <DatePicker.GridHead>
+                  <DatePicker.GridRow class="flex w-full">
+                    {#each weekdays as day, i (`weekday-${i}`)}
+                      <DatePicker.HeadCell
+                        class="text-muted flex h-8 w-8 flex-1 items-center justify-center text-xs font-medium"
+                      >
+                        {day.slice(0, 2)}
+                      </DatePicker.HeadCell>
+                    {/each}
+                  </DatePicker.GridRow>
+                </DatePicker.GridHead>
+                <DatePicker.GridBody>
+                  {#each month.weeks as weekDates (`weekDates-${weekDates}`)}
+                    <DatePicker.GridRow class="flex w-full">
+                      {#each weekDates as date (`date-${date.toString()}`)}
+                        <DatePicker.Cell {date} month={month.value} class="flex-1">
+                          <DatePicker.Day
+                            class="{buttonStyles()} data-selected:bg-primary data-selected:text-light data-today:border-primary border border-transparent data-disabled:cursor-not-allowed data-disabled:opacity-40 data-outside-month:text-gray-400 data-unavailable:cursor-not-allowed data-unavailable:text-gray-300 data-unavailable:line-through"
+                          >
+                            {date.day}
+                          </DatePicker.Day>
+                        </DatePicker.Cell>
+                      {/each}
+                    </DatePicker.GridRow>
+                  {/each}
+                </DatePicker.GridBody>
+              </DatePicker.Grid>
+            {/each}
+          {/snippet}
+        </DatePicker.Calendar>
+      </DatePicker.Content>
+    </DatePicker.Portal>
+  </DatePicker.Root>
+</div>

package/dist/internal/DatePicker.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Shape, Size } from '../types.js';
+import type { DateValue } from '@internationalized/date';
+import { DatePicker } from 'bits-ui';
+type Props = {
+    onChange?: (date?: DateValue) => void;
+    minDate?: DateValue;
+    maxDate?: DateValue;
+    date?: DateValue;
+    class?: string;
+    shape?: Shape;
+    size?: Size;
+};
+declare const DatePicker: import("svelte").Component<Props, {}, "date">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/internal/Select.svelte

@@ -78,7 +78,7 @@
 
 <div class={cleanClass('flex flex-col gap-1', className)} bind:this={ref}>
   {#if label}
-    <Label id={labelId} for={inputId} {label} {...labelProps} />
+    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
   {/if}
 
   <Select.Root type={multiple ? 'multiple' : 'single'} bind:value={internalValue as never} {onValueChange}>
@@ -126,7 +126,7 @@
           {#each options as { value, label, disabled }, i (i + value)}
             <Select.Item
               class={cleanClass(
-                'hover:bg-subtle data-[selected]:bg-primary/10 flex h-10 w-full items-center px-5 py-3 text-sm duration-75 outline-none select-none data-disabled:opacity-50',
+                'hover:bg-subtle data-selected:bg-primary/10 flex h-10 w-full items-center px-5 py-3 text-sm duration-75 outline-none select-none data-disabled:opacity-50',
                 disabled ? 'cursor-not-allowed' : 'cursor-pointer',
               )}
               {value}

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

@@ -17,11 +17,10 @@ export type CommandItem = {
 } | {
     action: (command: CommandItem) => void;
 });
-export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default'>;
+export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default' | 'command_palette_to_select' | 'command_palette_to_close' | 'command_palette_to_navigate' | 'command_palette_to_show_all'>;
 export declare const asText: (...items: unknown[]) => string;
 declare class CommandPaletteManager {
     #private;
-    query: string;
     selectedIndex: number;
     items: (CommandItem & {
         id: string;
@@ -37,6 +36,10 @@ declare class CommandPaletteManager {
     })[];
     get isEnabled(): boolean;
     enable(): void;
+    get query(): string;
+    set query(query: string);
+    get isShowAll(): boolean;
+    get isEmpty(): boolean;
     setTranslations(translations?: CommandPaletteTranslations): void;
     pushContextLayer(): (() => void) | undefined;
     popContextLayer(): void;

package/dist/services/command-palette-manager.svelte.js

@@ -17,19 +17,21 @@ const isMatch = ({ title, description, type, text = asText(title, description, t
     return text.includes(query);
 };
 class CommandPaletteManager {
-    query = $state('');
+    #query = $state('');
     selectedIndex = $state(0);
     #isEnabled = $state(false);
-    #normalizedQuery = $derived(this.query.toLowerCase());
+    #normalizedQuery = $derived(this.#query.toLowerCase());
     #modal;
     #translations = {};
     #isOpen = false;
+    #isShowAll = $state(false);
     #globalLayer = $state({ items: [], recentItems: [] });
     #layers = $state([{ items: [], recentItems: [] }]);
     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].filter(isEnabled));
-    results = $derived(this.query ? this.filteredItems : this.recentItems);
+    results = $derived(this.#isShowAll ? this.items : this.#query ? this.filteredItems : this.recentItems);
+    #isEmpty = $derived(!this.#isShowAll && !this.#query && this.results.length === 0);
     get isEnabled() {
         return this.#isEnabled;
     }
@@ -47,6 +49,21 @@ class CommandPaletteManager {
             document.body.addEventListener('keydown', (event) => this.#handleKeydown(event));
         }
     }
+    get query() {
+        return this.#query;
+    }
+    set query(query) {
+        this.#query = query;
+        if (this.#isShowAll && query) {
+            this.#isShowAll = false;
+        }
+    }
+    get isShowAll() {
+        return this.#isShowAll;
+    }
+    get isEmpty() {
+        return this.#isEmpty;
+    }
     async #handleKeydown(event) {
         const command = this.items.find(({ shortcuts }) => {
             if (!shortcuts) {
@@ -116,35 +133,50 @@ class CommandPaletteManager {
         return this.#modal.close();
     }
     #onClose() {
-        this.query = '';
+        this.#query = '';
         this.#modal = undefined;
         this.#isOpen = false;
+        this.#isShowAll = false;
     }
     async select(selectedIndex) {
         const selected = this.results[selectedIndex ?? this.selectedIndex];
         if (!selected) {
             return;
         }
-        // no duplicates
-        this.recentItems = this.recentItems.filter(({ id }) => id !== selected.id);
-        this.recentItems.unshift(selected);
-        this.recentItems = this.recentItems.slice(0, 5);
+        const globalItem = this.#globalLayer.items.find(({ id }) => id !== selected.id);
+        if (globalItem) {
+            this.#globalLayer.recentItems = this.#globalLayer.recentItems.filter(({ id }) => id !== selected.id);
+            this.#globalLayer.recentItems.unshift(selected);
+        }
+        else {
+            this.#layers.at(-1).recentItems = this.#layers.at(-1).recentItems.filter(({ id }) => id !== selected.id);
+            this.#layers.at(-1)?.recentItems.unshift(selected);
+        }
         await this.#executeCommand(selected);
         await this.close();
     }
     remove(index) {
-        this.recentItems.splice(index, 1);
+        const item = this.recentItems.at(index);
+        if (!item) {
+            return;
+        }
+        this.#globalLayer.recentItems = this.#globalLayer.recentItems.filter(({ id }) => id !== item.id);
+        this.#layers.at(-1).recentItems = this.#layers.at(-1).recentItems.filter(({ id }) => id !== item.id);
     }
     up() {
         this.selectedIndex = (this.selectedIndex - 1 + this.results.length) % (this.results.length || 1);
     }
     down() {
+        if (this.#isEmpty) {
+            this.#isShowAll = true;
+            return;
+        }
         this.selectedIndex = (this.selectedIndex + 1) % (this.results.length || 1);
     }
     reset() {
         this.#layers = [{ items: [], recentItems: [] }];
         this.#globalLayer = { items: [], recentItems: [] };
-        this.query = '';
+        this.#query = '';
     }
     addCommands(itemOrItems, options = {}) {
         const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];

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

@@ -13,10 +13,15 @@ declare const defaultTranslations: {
     hide_password: string;
     dark_theme: string;
     command_palette_prompt_default: string;
+    command_palette_to_select: string;
+    command_palette_to_navigate: string;
+    command_palette_to_close: string;
+    command_palette_to_show_all: string;
     toast_success_title: string;
     toast_info_title: string;
     toast_warning_title: string;
     toast_danger_title: string;
+    save: string;
 };
 export type Translations = typeof defaultTranslations;
 export declare const translate: <T extends keyof Translations>(key: T, overrides?: TranslationProps<T>) => string;

package/dist/services/translation.svelte.js

@@ -19,10 +19,15 @@ const defaultTranslations = {
     dark_theme: 'Toggle dark theme',
     // command palette
     command_palette_prompt_default: 'Quickly find pages, actions, or commands',
+    command_palette_to_select: 'to select',
+    command_palette_to_navigate: 'to navigate',
+    command_palette_to_close: 'to close',
+    command_palette_to_show_all: 'to show all',
     toast_success_title: 'Success',
     toast_info_title: 'Info',
     toast_warning_title: 'Warning',
     toast_danger_title: 'Error',
+    save: 'Save',
 };
 let translations = $state(defaultTranslations);
 export const translate = (key, overrides) => overrides?.[key] ?? translations[key];

package/dist/styles.d.ts

@@ -16,11 +16,20 @@ export declare const styleVariants: {
         warning: string;
         info: string;
     };
+    inputCommon: string;
+    inputContainerCommon: string;
     shape: {
         rectangle: string;
         'semi-round': string;
         round: string;
     };
+    inputRoundedSize: {
+        tiny: string;
+        small: string;
+        medium: string;
+        large: string;
+        giant: string;
+    };
     border: {
         true: string;
         false: string;

package/dist/styles.js

@@ -12,11 +12,20 @@ export const styleVariants = {
         ...color,
         muted: 'text-gray-600 dark:text-gray-400',
     },
+    inputCommon: 'disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 bg-transparent transition outline-none disabled:cursor-not-allowed ',
+    inputContainerCommon: 'bg-gray-100 ring-1 ring-gray-200 focus-within:ring-primary dark:focus-within:ring-primary transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-black',
     shape: {
         rectangle: 'rounded-none',
         'semi-round': '',
         round: 'rounded-full',
     },
+    inputRoundedSize: {
+        tiny: 'rounded-lg',
+        small: 'rounded-lg',
+        medium: 'rounded-lg',
+        large: 'rounded-lg',
+        giant: 'rounded-lg',
+    },
     border: {
         true: 'border',
         false: '',