@immich/ui 0.26.0 → 0.27.0

package/dist/actions/shortcut.d.ts

@@ -0,0 +1,28 @@
+import type { ActionReturn } from 'svelte/action';
+export type Shortcut = {
+    key: string;
+    alt?: boolean;
+    ctrl?: boolean;
+    shift?: boolean;
+    meta?: boolean;
+};
+export type ShortcutOptions<T = HTMLElement> = {
+    shortcut: Shortcut;
+    /** If true, the event handler will not execute if the event comes from an input field */
+    ignoreInputFields?: boolean;
+    onShortcut: (event: KeyboardEvent & {
+        currentTarget: T;
+    }) => unknown;
+    preventDefault?: boolean;
+};
+export declare const shortcutLabel: (shortcut: Shortcut) => string;
+/** Determines whether an event should be ignored. The event will be ignored if:
+ *  - The element dispatching the event is not the same as the element which the event listener is attached to
+ *  - The element dispatching the event is an input field
+ */
+export declare const shouldIgnoreEvent: (event: KeyboardEvent | ClipboardEvent) => boolean;
+export declare const matchesShortcut: (event: KeyboardEvent, shortcut: Shortcut) => boolean;
+/** 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 */
+export declare const shortcuts: <T extends HTMLElement>(node: T, options: ShortcutOptions<T>[]) => ActionReturn<ShortcutOptions<T>[]>;

package/dist/actions/shortcut.js

@@ -0,0 +1,72 @@
+export const shortcutLabel = (shortcut) => {
+    let label = '';
+    if (shortcut.ctrl) {
+        label += 'Ctrl ';
+    }
+    if (shortcut.alt) {
+        label += 'Alt ';
+    }
+    if (shortcut.meta) {
+        label += 'Cmd ';
+    }
+    if (shortcut.shift) {
+        label += '⇧';
+    }
+    label += shortcut.key.toUpperCase();
+    return label;
+};
+/** Determines whether an event should be ignored. The event will be ignored if:
+ *  - The element dispatching the event is not the same as the element which the event listener is attached to
+ *  - The element dispatching the event is an input field
+ */
+export const shouldIgnoreEvent = (event) => {
+    if (event.target === event.currentTarget) {
+        return false;
+    }
+    const type = event.target.type;
+    return ['textarea', 'text', 'date', 'datetime-local', 'email', 'password'].includes(type);
+};
+export const matchesShortcut = (event, shortcut) => {
+    return (shortcut.key.toLowerCase() === event.key.toLowerCase() &&
+        Boolean(shortcut.alt) === event.altKey &&
+        Boolean(shortcut.ctrl) === event.ctrlKey &&
+        Boolean(shortcut.shift) === event.shiftKey &&
+        Boolean(shortcut.meta) === event.metaKey);
+};
+/** Bind a single keyboard shortcut to node. */
+export const shortcut = (node, option) => {
+    const { update: shortcutsUpdate, destroy } = shortcuts(node, [option]);
+    return {
+        update(newOption) {
+            shortcutsUpdate?.([newOption]);
+        },
+        destroy,
+    };
+};
+/** Binds multiple keyboard shortcuts to node */
+export const shortcuts = (node, options) => {
+    function onKeydown(event) {
+        const ignoreShortcut = shouldIgnoreEvent(event);
+        for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true, } of options) {
+            if (ignoreInputFields && ignoreShortcut) {
+                continue;
+            }
+            if (matchesShortcut(event, shortcut)) {
+                if (preventDefault) {
+                    event.preventDefault();
+                }
+                onShortcut(event);
+                return;
+            }
+        }
+    }
+    node.addEventListener('keydown', onKeydown);
+    return {
+        update(newOptions) {
+            options = newOptions;
+        },
+        destroy() {
+            node.removeEventListener('keydown', onKeydown);
+        },
+    };
+};

package/dist/components/CommandPalette/CommandPalette.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { shortcuts } from '../../actions/shortcut.js';
+	import CloseButton from '../CloseButton/CloseButton.svelte';
+	import CommandPaletteItem from './CommandPaletteItem.svelte';
+	import Icon from '../Icon/Icon.svelte';
+	import Input from '../Input/Input.svelte';
+	import Modal from '../Modal/Modal.svelte';
+	import ModalBody from '../Modal/ModalBody.svelte';
+	import ModalFooter from '../Modal/ModalFooter.svelte';
+	import ModalHeader from '../Modal/ModalHeader.svelte';
+	import Stack from '../Stack/Stack.svelte';
+	import Text from '../Text/Text.svelte';
+	import { commandPaletteManager } from '../../services/command-palette-manager.svelte';
+	import { t } from '../../services/translation.svelte.js';
+	import type { TranslationProps } from '../../types.js';
+	import { mdiArrowDown, mdiArrowUp, mdiKeyboardEsc, mdiKeyboardReturn, mdiMagnify } from '@mdi/js';
+
+	type Props = {
+		translations?: TranslationProps<
+			| 'search_placeholder'
+			| 'search_no_results'
+			| 'search_recently_used'
+			| 'command_palette_prompt_default'
+		>;
+	};
+
+	let { translations }: Props = $props();
+
+	let inputElement = $state<HTMLInputElement | null>(null);
+
+	const handleOpen = () => commandPaletteManager.open();
+	const handleClose = () => commandPaletteManager.close();
+	const handleUp = (event: KeyboardEvent) => handleNavigate(event, 'up');
+	const handleDown = (event: KeyboardEvent) => handleNavigate(event, 'down');
+	const handleSelect = (event: KeyboardEvent) => handleNavigate(event, 'select');
+	const handleNavigate = async (event: KeyboardEvent, direction: 'up' | 'down' | 'select') => {
+		if (!commandPaletteManager.isOpen) {
+			return;
+		}
+
+		event.preventDefault();
+
+		switch (direction) {
+			case 'up': {
+				commandPaletteManager.up();
+				break;
+			}
+
+			case 'down': {
+				commandPaletteManager.down();
+				break;
+			}
+
+			case 'select': {
+				await commandPaletteManager.select();
+				break;
+			}
+		}
+	};
+</script>
+
+<svelte:window
+	use:shortcuts={[
+		{ shortcut: { key: 'k', meta: true }, preventDefault: true, onShortcut: handleOpen },
+		{ shortcut: { key: 'k', ctrl: true }, preventDefault: true, onShortcut: handleOpen },
+		{ shortcut: { key: '/' }, preventDefault: true, onShortcut: handleOpen },
+		{ shortcut: { key: 'ArrowUp' }, ignoreInputFields: false, onShortcut: handleUp },
+		{ shortcut: { key: 'ArrowDown' }, ignoreInputFields: false, onShortcut: handleDown },
+		{ shortcut: { key: 'k', ctrl: true }, ignoreInputFields: false, onShortcut: handleUp },
+		{ shortcut: { key: 'k', meta: true }, ignoreInputFields: false, onShortcut: handleUp },
+		{ shortcut: { key: 'j', ctrl: true }, ignoreInputFields: false, onShortcut: handleDown },
+		{ shortcut: { key: 'j', meta: true }, ignoreInputFields: false, onShortcut: handleDown },
+		{ shortcut: { key: 'Enter' }, ignoreInputFields: false, onShortcut: handleSelect },
+		{ shortcut: { key: 'Escape' }, onShortcut: handleClose },
+	]}
+/>
+
+{#if commandPaletteManager.isOpen}
+	<Modal size="large" onClose={handleClose} closeOnBackdropClick>
+		<ModalHeader>
+			<div class="flex place-items-center gap-1">
+				<Input
+					bind:ref={inputElement}
+					bind:value={commandPaletteManager.query}
+					placeholder={t('search_placeholder', translations)}
+					leadingIcon={mdiMagnify}
+					tabindex={1}
+				/>
+				<div>
+					<CloseButton onclick={() => commandPaletteManager.close()} class="md:hidden" />
+				</div>
+			</div>
+		</ModalHeader>
+		<ModalBody>
+			<Stack gap={2}>
+				{#if commandPaletteManager.query}
+					{#if commandPaletteManager.results.length === 0}
+						<Text>{t('search_no_results', translations)}</Text>
+					{/if}
+				{:else if commandPaletteManager.recentItems.length > 0}
+					<Text>{t('search_recently_used', translations)}</Text>
+				{:else}
+					<Text>{t('command_palette_prompt_default', translations)}</Text>
+				{/if}
+
+				{#if commandPaletteManager.results.length > 0}
+					<div class="flex flex-col">
+						{#each commandPaletteManager.results as item, i (i)}
+							<CommandPaletteItem
+								{item}
+								selected={commandPaletteManager.selectedIndex === i}
+								onRemove={commandPaletteManager.query
+									? undefined
+									: () => commandPaletteManager.remove(i)}
+								onSelect={() => commandPaletteManager.select(i)}
+							/>
+						{/each}
+					</div>
+				{/if}
+			</Stack>
+		</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>
+
+					<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>
+					</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>
+				</div>
+			</div>
+		</ModalFooter>
+	</Modal>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { TranslationProps } from '../../types.js';
+type Props = {
+    translations?: TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default'>;
+};
+declare const CommandPalette: import("svelte").Component<Props, {}, "">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/components/CommandPalette/CommandPaletteItem.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import Button from '../Button/Button.svelte';
+	import Icon from '../Icon/Icon.svelte';
+	import IconButton from '../IconButton/IconButton.svelte';
+	import Text from '../Text/Text.svelte';
+	import type { CommandItem } from '../../services/command-palette-manager.svelte';
+	import { mdiClose } from '@mdi/js';
+
+	type Props = {
+		item: CommandItem;
+		selected: boolean;
+		onSelect: () => void;
+		onRemove?: () => void;
+	};
+
+	const { item, selected, onRemove, onSelect }: Props = $props();
+
+	const handleRemove = (event: MouseEvent) => {
+		event.stopPropagation();
+		onRemove?.();
+	};
+
+	let ref = $state<HTMLElement | null>(null);
+
+	$effect(() => {
+		if (selected && ref) {
+			ref.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
+		}
+	});
+</script>
+
+<div bind:this={ref} class="p-1">
+	<Button
+		onclick={() => onSelect()}
+		fullWidth
+		variant={selected ? 'outline' : 'ghost'}
+		color="secondary"
+		class="overflow-hidden border"
+	>
+		<div class="flex w-full place-items-center justify-between gap-2">
+			<div class="flex min-w-0 place-items-center gap-2">
+				<Icon icon={item.icon} size="2rem" class={item.iconClass} />
+				<div class="flex min-w-0 flex-col">
+					<div class="flex place-items-center gap-1">
+						<Text fontWeight="bold">{item.title}</Text>
+					</div>
+					{#if item.description}
+						<Text
+							size="small"
+							class="overflow-hidden text-ellipsis whitespace-nowrap"
+							color={selected ? undefined : 'muted'}>{item.description}</Text
+						>
+					{/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>
+	</Button>
+</div>

package/dist/components/CommandPalette/CommandPaletteItem.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CommandItem } from '../../services/command-palette-manager.svelte';
+type Props = {
+    item: CommandItem;
+    selected: boolean;
+    onSelect: () => void;
+    onRemove?: () => void;
+};
+declare const CommandPaletteItem: import("svelte").Component<Props, {}, "">;
+type CommandPaletteItem = ReturnType<typeof CommandPaletteItem>;
+export default CommandPaletteItem;

package/dist/components/{Form → Input}/Input.svelte

@@ -3,7 +3,7 @@
 	import Label from '../Label/Label.svelte';
 	import Text from '../Text/Text.svelte';
 	import type { InputProps } from '../../types.js';
-	import { cleanClass, generateId } from '../../utils.js';
+	import { cleanClass, generateId, isIconLike } from '../../utils.js';
 	import Icon from '../Icon/Icon.svelte';
 	import { tv } from 'tailwind-variants';
 
@@ -102,7 +102,7 @@
 		{#if leadingIcon}
 			<div tabindex="-1" class={iconStyles({ size })}>
 				{#if leadingIcon}
-					{#if typeof leadingIcon === 'string'}
+					{#if isIconLike(leadingIcon)}
 						<Icon size="60%" icon={leadingIcon} />
 					{:else}
 						{@render leadingIcon()}
@@ -139,7 +139,7 @@
 		{#if trailingIcon}
 			<div tabindex="-1" class={cleanClass(iconStyles({ size }), 'end-0')}>
 				{#if trailingIcon}
-					{#if typeof trailingIcon === 'string'}
+					{#if isIconLike(trailingIcon)}
 						<Icon size="60%" icon={trailingIcon} />
 					{:else}
 						{@render trailingIcon()}

package/dist/components/Link/Link.svelte

@@ -7,15 +7,24 @@
 		class?: string;
 		children: Snippet;
 		href: string;
+		underline?: boolean;
 		external?: boolean;
 	} & HTMLAnchorAttributes;
 
-	const { href, class: className, external, children, ...restProps }: Props = $props();
+	const {
+		href,
+		class: className,
+		underline = true,
+		external,
+		children,
+		...restProps
+	}: Props = $props();
 </script>
 
 <a
 	{href}
-	class={cleanClass('underline', className)}
+	draggable="false"
+	class={cleanClass(underline && 'underline', className)}
 	target={external ? '_blank' : undefined}
 	rel={external ? 'noopener noreferrer' : undefined}
 	{...restProps}

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

@@ -4,6 +4,7 @@ type Props = {
     class?: string;
     children: Snippet;
     href: string;
+    underline?: boolean;
     external?: boolean;
 } & HTMLAnchorAttributes;
 declare const Link: import("svelte").Component<Props, {}, "">;

package/dist/components/Navbar/NavbarItem.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import Icon from '../Icon/Icon.svelte';
+	import Link from '../Link/Link.svelte';
 	import type { IconProps } from '../../types.js';
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
 		title: string;
-		active?: boolean;
 		href: string;
+		external?: boolean;
+		active?: boolean;
 		variant?: 'compact';
 		isActive?: () => boolean;
 		icon?: string | IconProps;
@@ -18,6 +20,7 @@
 
 	let {
 		href,
+		external,
 		isActive: isActiveOverride,
 		title,
 		variant,
@@ -49,10 +52,11 @@
 	});
 </script>
 
-<a
+<Link
 	{href}
-	draggable="false"
+	{external}
 	aria-current={active ? 'page' : undefined}
+	underline={false}
 	class={styles({ active, variant: variant ?? 'default' })}
 >
 	<div class="flex w-full place-items-center gap-4 truncate overflow-hidden">
@@ -66,4 +70,4 @@
 		{/if}
 		<span class="text-sm font-medium">{title}</span>
 	</div>
-</a>
+</Link>

package/dist/components/Navbar/NavbarItem.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { IconProps } from '../../types.js';
 type Props = {
     title: string;
-    active?: boolean;
     href: string;
+    external?: boolean;
+    active?: boolean;
     variant?: 'compact';
     isActive?: () => boolean;
     icon?: string | IconProps;

package/dist/components/{Form → PasswordInput}/PasswordInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Input from './Input.svelte';
 	import IconButton from '../IconButton/IconButton.svelte';
+	import Input from '../Input/Input.svelte';
 	import { t } from '../../services/translation.svelte.js';
 	import type { PasswordInputProps } from '../../types.js';
 	import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';

package/dist/index.d.ts

@@ -1,13 +1,15 @@
 export { default as appStoreBadge } from './assets/appstore-badge.svg';
 export { default as fdroidBadge } from './assets/fdroid-badge.svg';
+export { default as immichFutoDark } from './assets/immich-logo-futo-dark.svg';
+export { default as immichFutoLight } from './assets/immich-logo-futo-light.svg';
 export { default as immichLogoInlineDark } from './assets/immich-logo-inline-dark.svg';
 export { default as immichLogoInlineLight } from './assets/immich-logo-inline-light.svg';
 export { default as immichLogoStackedDark } from './assets/immich-logo-stacked-dark.svg';
 export { default as immichLogoStackedLight } from './assets/immich-logo-stacked-light.svg';
 export { default as immichLogoJson } from './assets/immich-logo.json';
 export { default as immichLogo } from './assets/immich-logo.svg';
-export { default as playStoreBadge } from './assets/playstore-badge.png';
 export { default as obtainiumBadge } from './assets/obtainium-badge.png';
+export { default as playStoreBadge } from './assets/playstore-badge.png';
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
 export { default as AppShellHeader } from './components/AppShell/AppShellHeader.svelte';
@@ -20,31 +22,32 @@ export { default as CardDescription } from './components/Card/CardDescription.sv
 export { default as CardFooter } from './components/Card/CardFooter.svelte';
 export { default as CardHeader } from './components/Card/CardHeader.svelte';
 export { default as CardTitle } from './components/Card/CardTitle.svelte';
+export { default as Checkbox } from './components/Checkbox/Checkbox.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
+export { default as CommandPalette } from './components/CommandPalette/CommandPalette.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
-export { default as Checkbox } from './components/Form/Checkbox.svelte';
-export { default as Field } from './components/Form/Field.svelte';
-export { default as HelperText } from './components/Form/HelperText.svelte';
-export { default as Input } from './components/Form/Input.svelte';
-export { default as PasswordInput } from './components/Form/PasswordInput.svelte';
+export { default as Field } from './components/Field/Field.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';
 export { default as Heading } from './components/Heading/Heading.svelte';
+export { default as HelperText } from './components/HelperText/HelperText.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IconButton } from './components/IconButton/IconButton.svelte';
+export { default as Input } from './components/Input/Input.svelte';
 export { default as Kbd } from './components/Kbd/Kbd.svelte';
 export { default as Label } from './components/Label/Label.svelte';
 export { default as Link } from './components/Link/Link.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
 export { default as Modal } from './components/Modal/Modal.svelte';
-export { default as ModalHeader } from './components/Modal/ModalHeader.svelte';
 export { default as ModalBody } from './components/Modal/ModalBody.svelte';
 export { default as ModalFooter } from './components/Modal/ModalFooter.svelte';
+export { default as ModalHeader } from './components/Modal/ModalHeader.svelte';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.svelte';
 export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
 export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
+export { default as PasswordInput } from './components/PasswordInput/PasswordInput.svelte';
 export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
 export { default as Select } from './components/Select/Select.svelte';
 export { default as HStack } from './components/Stack/HStack.svelte';
@@ -54,8 +57,11 @@ export { default as SupporterBadge } from './components/SupporterBadge/Supporter
 export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Text } from './components/Text/Text.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
+export * from './services/command-palette-manager.svelte.js';
+export * from './services/modal-manager.svelte.js';
 export * from './services/theme.svelte.js';
 export * from './services/translation.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
-export * from './services/modalManager.svelte.js';
+export * from './site/constants.js';
+export { default as SiteFooter } from './site/SiteFooter.svelte';

package/dist/index.js

@@ -1,14 +1,16 @@
 // files
 export { default as appStoreBadge } from './assets/appstore-badge.svg';
 export { default as fdroidBadge } from './assets/fdroid-badge.svg';
+export { default as immichFutoDark } from './assets/immich-logo-futo-dark.svg';
+export { default as immichFutoLight } from './assets/immich-logo-futo-light.svg';
 export { default as immichLogoInlineDark } from './assets/immich-logo-inline-dark.svg';
 export { default as immichLogoInlineLight } from './assets/immich-logo-inline-light.svg';
 export { default as immichLogoStackedDark } from './assets/immich-logo-stacked-dark.svg';
 export { default as immichLogoStackedLight } from './assets/immich-logo-stacked-light.svg';
 export { default as immichLogoJson } from './assets/immich-logo.json';
 export { default as immichLogo } from './assets/immich-logo.svg';
-export { default as playStoreBadge } from './assets/playstore-badge.png';
 export { default as obtainiumBadge } from './assets/obtainium-badge.png';
+export { default as playStoreBadge } from './assets/playstore-badge.png';
 // components
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
@@ -22,31 +24,32 @@ export { default as CardDescription } from './components/Card/CardDescription.sv
 export { default as CardFooter } from './components/Card/CardFooter.svelte';
 export { default as CardHeader } from './components/Card/CardHeader.svelte';
 export { default as CardTitle } from './components/Card/CardTitle.svelte';
+export { default as Checkbox } from './components/Checkbox/Checkbox.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
+export { default as CommandPalette } from './components/CommandPalette/CommandPalette.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
-export { default as Checkbox } from './components/Form/Checkbox.svelte';
-export { default as Field } from './components/Form/Field.svelte';
-export { default as HelperText } from './components/Form/HelperText.svelte';
-export { default as Input } from './components/Form/Input.svelte';
-export { default as PasswordInput } from './components/Form/PasswordInput.svelte';
+export { default as Field } from './components/Field/Field.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';
 export { default as Heading } from './components/Heading/Heading.svelte';
+export { default as HelperText } from './components/HelperText/HelperText.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IconButton } from './components/IconButton/IconButton.svelte';
+export { default as Input } from './components/Input/Input.svelte';
 export { default as Kbd } from './components/Kbd/Kbd.svelte';
 export { default as Label } from './components/Label/Label.svelte';
 export { default as Link } from './components/Link/Link.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
 export { default as Modal } from './components/Modal/Modal.svelte';
-export { default as ModalHeader } from './components/Modal/ModalHeader.svelte';
 export { default as ModalBody } from './components/Modal/ModalBody.svelte';
 export { default as ModalFooter } from './components/Modal/ModalFooter.svelte';
+export { default as ModalHeader } from './components/Modal/ModalHeader.svelte';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.svelte';
 export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
 export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
+export { default as PasswordInput } from './components/PasswordInput/PasswordInput.svelte';
 export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
 export { default as Select } from './components/Select/Select.svelte';
 export { default as HStack } from './components/Stack/HStack.svelte';
@@ -57,8 +60,12 @@ export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Text } from './components/Text/Text.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
 // helpers
+export * from './services/command-palette-manager.svelte.js';
+export * from './services/modal-manager.svelte.js';
 export * from './services/theme.svelte.js';
 export * from './services/translation.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
-export * from './services/modalManager.svelte.js';
+// site
+export * from './site/constants.js';
+export { default as SiteFooter } from './site/SiteFooter.svelte';

package/dist/internal/Button.svelte

@@ -17,6 +17,7 @@
 		ref = $bindable(null),
 		type = 'button',
 		href,
+		external,
 		variant = 'filled',
 		color = 'primary',
 		shape = 'semi-round',
@@ -158,6 +159,8 @@
 		{href}
 		class={classList}
 		aria-disabled={disabled}
+		target={external ? '_blank' : undefined}
+		rel={external ? 'noopener noreferrer' : undefined}
 		{...restProps as HTMLAnchorAttributes}
 	>
 		{#if loading}

package/dist/internal/Select.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { getFieldContext } from '../common/context.svelte.js';
-	import Field from '../components/Form/Field.svelte';
-	import Input from '../components/Form/Input.svelte';
+	import Field from '../components/Field/Field.svelte';
 	import Icon from '../components/Icon/Icon.svelte';
 	import IconButton from '../components/IconButton/IconButton.svelte';
+	import Input from '../components/Input/Input.svelte';
 	import Label from '../components/Label/Label.svelte';
 	import type { SelectCommonProps, SelectItem } from '../types.js';
 	import { cleanClass, generateId } from '../utils.js';

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

@@ -0,0 +1,37 @@
+export type CommandItem = {
+    icon: string;
+    iconClass: string;
+    type: string;
+    title: string;
+    description?: string;
+    text: string;
+} & ({
+    href: string;
+    external?: boolean;
+} | {
+    action: () => void;
+});
+export declare const asText: (...items: unknown[]) => string;
+declare class CommandPaletteManager {
+    isEnabled: boolean;
+    isOpen: boolean;
+    query: string;
+    selectedIndex: number;
+    private normalizedQuery;
+    items: CommandItem[];
+    filteredItems: CommandItem[];
+    recentItems: CommandItem[];
+    results: CommandItem[];
+    enable(): void;
+    open(): Promise<void>;
+    close(): void;
+    select(selectedIndex?: number): Promise<void>;
+    remove(index: number): void;
+    up(): void;
+    down(): void;
+    reset(): void;
+    addCommands(itemOrItems: CommandItem | CommandItem[]): void;
+    removeCommands(itemOrItems: CommandItem | CommandItem[]): void;
+}
+export declare const commandPaletteManager: CommandPaletteManager;
+export {};

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

@@ -0,0 +1,92 @@
+import { goto } from '$app/navigation';
+export const asText = (...items) => {
+    return items
+        .filter((item) => item !== undefined && item !== null)
+        .map((items) => String(items))
+        .join('|')
+        .toLowerCase();
+};
+const isEqual = (a, b) => {
+    return a.title === b.title && a.type === b.type;
+};
+const isMatch = (item, query) => {
+    if (!query) {
+        return true;
+    }
+    return item.text.includes(query);
+};
+class CommandPaletteManager {
+    isEnabled = $state(false);
+    isOpen = $state(false);
+    query = $state('');
+    selectedIndex = $state(0);
+    normalizedQuery = $derived(this.query.toLowerCase());
+    items = [];
+    filteredItems = $derived(this.items.filter((item) => isMatch(item, this.normalizedQuery)).slice(0, 100));
+    recentItems = $state([]);
+    results = $derived(this.query ? this.filteredItems : this.recentItems);
+    enable() {
+        this.isEnabled = true;
+    }
+    async open() {
+        if (!this.isEnabled || this.isOpen) {
+            return;
+        }
+        this.selectedIndex = 0;
+        this.isOpen = true;
+    }
+    close() {
+        if (!this.isEnabled || !this.isOpen) {
+            return;
+        }
+        this.query = '';
+        this.isOpen = false;
+    }
+    async select(selectedIndex) {
+        const selected = this.results[selectedIndex ?? this.selectedIndex];
+        if (!selected) {
+            return;
+        }
+        // no duplicates
+        this.recentItems = this.recentItems.filter((item) => !isEqual(item, selected));
+        this.recentItems.unshift(selected);
+        this.recentItems = this.recentItems.slice(0, 5);
+        if ('href' in selected) {
+            if (selected.href.startsWith('http') || selected.external) {
+                window.open(selected.href, '_blank');
+            }
+            else {
+                await goto(selected.href);
+            }
+        }
+        else {
+            await selected.action();
+        }
+        this.close();
+    }
+    remove(index) {
+        this.recentItems.splice(index, 1);
+    }
+    up() {
+        this.selectedIndex = (this.selectedIndex - 1 + this.results.length) % this.results.length;
+    }
+    down() {
+        this.selectedIndex = (this.selectedIndex + 1) % this.results.length;
+    }
+    reset() {
+        this.items = [];
+        this.isOpen = false;
+        this.query = '';
+    }
+    addCommands(itemOrItems) {
+        const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
+        this.items.push(...items);
+    }
+    removeCommands(itemOrItems) {
+        const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
+        for (const remoteItem of items) {
+            this.items = this.items.filter((item) => !isEqual(item, remoteItem));
+        }
+    }
+}
+export const commandPaletteManager = new CommandPaletteManager();

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

@@ -1,12 +1,16 @@
 import type { TranslationProps } from '../types.js';
 declare const defaultTranslations: {
+    cancel: string;
     close: string;
+    confirm: string;
+    search_placeholder: string;
+    search_no_results: string;
+    search_recently_used: string;
+    prompt_default: string;
     show_password: string;
     hide_password: string;
     dark_theme: string;
-    confirm: string;
-    prompt_default: string;
-    cancel: string;
+    command_palette_prompt_default: 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

@@ -1,11 +1,20 @@
 const defaultTranslations = {
+    // common
+    cancel: 'Cancel',
     close: 'Close',
+    confirm: 'Confirm',
+    search_placeholder: 'Search...',
+    search_no_results: 'No results',
+    search_recently_used: 'Recently used',
+    // modal
+    prompt_default: 'Are you sure you want to do this?',
+    // password input
     show_password: 'Show password',
     hide_password: 'Hide password',
+    // theme switcher
     dark_theme: 'Toggle dark theme',
-    confirm: 'Confirm',
-    prompt_default: 'Are you sure you want to do this?',
-    cancel: 'Cancel',
+    // command palette
+    command_palette_prompt_default: 'Quickly find pages, actions, or commands',
 };
 let translations = $state(defaultTranslations);
 export const translate = (key, overrides) => overrides?.[key] ?? translations[key];

package/dist/site/SiteFooter.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import Heading from '../components/Heading/Heading.svelte';
+	import Stack from '../components/Stack/Stack.svelte';
+	import VStack from '../components/Stack/VStack.svelte';
+	import Text from '../components/Text/Text.svelte';
+	import ThemeSwitcher from '../components/ThemeSwitcher/ThemeSwitcher.svelte';
+	import { Constants } from './constants.js';
+	import SiteFooterLink from './SiteFooterLink.svelte';
+	import {
+		mdiBookshelf,
+		mdiChartGantt,
+		mdiCubeOutline,
+		mdiHomeSearchOutline,
+		mdiKey,
+		mdiOfficeBuildingOutline,
+		mdiScriptTextOutline,
+		mdiServerOutline,
+		mdiShoppingOutline,
+	} from '@mdi/js';
+	import { siAndroid, siApple, siDiscord, siGithub, siReddit } from 'simple-icons';
+</script>
+
+<div class="bg-dark/10 mt-16 rounded-t-3xl p-8">
+	<div class="mx-auto max-w-(--breakpoint-lg) xl:py-8">
+		<Stack gap={8}>
+			<div class="place-center grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
+				<Stack>
+					<Heading size="tiny">Social</Heading>
+					<SiteFooterLink href={Constants.Socials.Github} icon={siGithub} text="GitHub" />
+					<SiteFooterLink href={Constants.Socials.Discord} icon={siDiscord} text="Discord" />
+					<SiteFooterLink href={Constants.Socials.Reddit} icon={siReddit} text="Reddit" />
+				</Stack>
+
+				<Stack>
+					<Heading size="tiny">Download</Heading>
+					<SiteFooterLink href={Constants.Get.Android} icon={siAndroid} text="Android" />
+					<SiteFooterLink href={Constants.Get.iOS} icon={siApple} text="iOS" />
+					<SiteFooterLink
+						href={Constants.Get.DockerCompose}
+						icon={mdiServerOutline}
+						text="Server"
+					/>
+				</Stack>
+
+				<Stack>
+					<Heading size="tiny">Company</Heading>
+					<SiteFooterLink
+						href={Constants.Socials.Futo}
+						icon={mdiOfficeBuildingOutline}
+						text="FUTO"
+					/>
+					<SiteFooterLink href={Constants.Sites.Buy} icon={mdiKey} text="Purchase" />
+					<SiteFooterLink href={Constants.Sites.Store} icon={mdiShoppingOutline} text="Merch" />
+				</Stack>
+
+				<Stack>
+					<Heading size="tiny">Sites</Heading>
+					<SiteFooterLink
+						href={Constants.Sites.Docs}
+						icon={mdiScriptTextOutline}
+						text="Documentation"
+					/>
+					<SiteFooterLink href={Constants.Sites.My} icon={mdiHomeSearchOutline} text="My Immich" />
+					<SiteFooterLink href={Constants.Sites.Api} icon={mdiCubeOutline} text="Immich API" />
+				</Stack>
+
+				<Stack>
+					<Heading size="tiny">Miscellaneous</Heading>
+					<SiteFooterLink href={Constants.Pages.Roadmap} icon={mdiChartGantt} text="Roadmap" />
+					<SiteFooterLink
+						href={Constants.Pages.CursedKnowledge}
+						icon={mdiBookshelf}
+						text="Cursed Knowledge"
+					/>
+				</Stack>
+			</div>
+			<VStack class="text-center">
+				<Text size="large">This project is available under GNU AGPL v3 license.</Text>
+				<Text color="muted" variant="italic">Privacy should not be a luxury</Text>
+				<ThemeSwitcher color="secondary" />
+			</VStack>
+		</Stack>
+	</div>
+</div>

package/dist/site/SiteFooter.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SiteFooter: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SiteFooter = InstanceType<typeof SiteFooter>;
+export default SiteFooter;

package/dist/site/SiteFooterLink.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { HStack, Icon, Link, Text } from '../index.ts';
+
+	type Props = {
+		href: string;
+		icon: string | { path: string };
+		text: string;
+	};
+
+	let { href, icon, text }: Props = $props();
+</script>
+
+<Link {href} external>
+	<HStack>
+		<Icon {icon} size="1.5em" />
+		<Text>{text}</Text>
+	</HStack>
+</Link>

package/dist/site/SiteFooterLink.svelte.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    href: string;
+    icon: string | {
+        path: string;
+    };
+    text: string;
+};
+declare const SiteFooterLink: import("svelte").Component<Props, {}, "">;
+type SiteFooterLink = ReturnType<typeof SiteFooterLink>;
+export default SiteFooterLink;

package/dist/site/constants.d.ts

@@ -0,0 +1,42 @@
+export declare const Constants: {
+    Socials: {
+        Futo: string;
+        Github: string;
+        Discord: string;
+        Reddit: string;
+        Weblate: string;
+    };
+    Get: {
+        iOS: string;
+        Android: string;
+        FDroid: string;
+        GithubRelease: string;
+        DockerCompose: string;
+    };
+    Sites: {
+        Api: string;
+        Demo: string;
+        My: string;
+        Buy: string;
+        Get: string;
+        Docs: string;
+        Store: string;
+    };
+    Pages: {
+        CursedKnowledge: string;
+        Roadmap: string;
+    };
+    Npm: {
+        Sdk: string;
+    };
+};
+export declare const siteCommands: {
+    icon: string;
+    type: string;
+    iconClass: string;
+    title: string;
+    description: string;
+    href: string;
+    external: boolean;
+    text: string;
+}[];

package/dist/site/constants.js

@@ -0,0 +1,120 @@
+import { asText } from '../services/command-palette-manager.svelte.js';
+import { mdiOpenInNew } from '@mdi/js';
+export const Constants = {
+    Socials: {
+        Futo: 'https://futo.org/',
+        Github: 'https://github.com/immich-app/immich',
+        Discord: 'https://discord.immich.app/',
+        Reddit: 'https://www.reddit.com/r/immich/',
+        Weblate: 'https://hosted.weblate.org/projects/immich/immich/',
+    },
+    Get: {
+        iOS: 'https://get.immich.app/ios',
+        Android: 'https://get.immich.app/android',
+        FDroid: 'https://get.immich.app/fdroid',
+        GithubRelease: 'https://github.com/immich-app/immich/releases/latest',
+        DockerCompose: 'https://get.immich.app/docker-compose',
+    },
+    Sites: {
+        Api: 'https://api.immich.app/',
+        Demo: 'https://demo.immich.app/',
+        My: 'https://my.immich.app/',
+        Buy: 'https://buy.immich.app/',
+        Get: 'https://get.immich.app/',
+        Docs: 'https://docs.immich.app/',
+        Store: 'https://immich.store/',
+    },
+    Pages: {
+        CursedKnowledge: 'https://immich.app/cursed-knowledge',
+        Roadmap: 'https://immich.app/roadmap',
+    },
+    Npm: {
+        Sdk: 'https://www.npmjs.com/package/@immich/sdk',
+    },
+};
+export const siteCommands = [
+    {
+        title: 'Immich Documentation',
+        description: 'View the Immich documentation',
+        href: Constants.Sites.Docs,
+    },
+    {
+        title: 'Buy Immich',
+        description: 'Support Immich by buying a product key.',
+        href: Constants.Sites.Buy,
+    },
+    {
+        title: 'My Immich',
+        description: 'Immich link proxy to redirect to your personal instance',
+        href: Constants.Sites.My,
+    },
+    {
+        title: 'Get Immich',
+        description: 'View downloads links for Immich apps and server',
+        href: Constants.Sites.Get,
+    },
+    {
+        title: 'Immich on the PlayStore',
+        description: 'View Immich on the Google Play Store',
+        href: Constants.Get.Android,
+    },
+    {
+        title: 'Immich on the iOS App Store',
+        description: 'View Immich on the iOS App Store',
+        href: Constants.Get.iOS,
+    },
+    {
+        title: 'Immich Demo',
+        description: 'Test out Immich with our public demo server',
+        href: Constants.Sites.Demo,
+    },
+    {
+        title: 'Immich Store',
+        description: 'Support the project by purchasing Immich merchandise',
+        href: Constants.Sites.Store,
+    },
+    {
+        title: 'Cursed Knowledge',
+        description: 'View our collection of cursed knowledge',
+        href: Constants.Pages.CursedKnowledge,
+    },
+    {
+        title: 'Roadmap',
+        description: 'View our project roadmap',
+        href: Constants.Pages.Roadmap,
+    },
+    {
+        title: 'reddit',
+        description: 'Join the Immich community on reddit',
+        href: Constants.Socials.Reddit,
+    },
+    {
+        title: 'GitHub',
+        description: 'View our project on GitHub',
+        href: Constants.Socials.Github,
+    },
+    {
+        title: 'Discord',
+        description: 'Join the conversation on Discord',
+        href: Constants.Socials.Discord,
+    },
+    {
+        title: 'Weblate',
+        description: 'Support the project by translating Immich on Weblate',
+        href: Constants.Socials.Weblate,
+    },
+    {
+        title: 'FUTO',
+        description: 'Learn more about FUTO, the company behind Immich',
+        href: Constants.Sites.Docs,
+    },
+].map((site) => ({
+    icon: mdiOpenInNew,
+    type: 'Link',
+    iconClass: 'text-indigo-700 dark:text-indigo-200',
+    title: site.title,
+    description: site.description,
+    href: site.href,
+    external: true,
+    text: asText('Site', 'Link', site.title, site.description, site.href),
+}));

package/dist/types.d.ts

@@ -21,11 +21,11 @@ export declare enum Theme {
 export type TranslationProps<T extends keyof Translations> = {
     [K in T]?: string;
 };
-type PathLike = {
+export type IconLike = string | {
     path: string;
 };
 export type IconProps = {
-    icon: string | PathLike;
+    icon: IconLike;
     title?: string;
     description?: string;
     size?: string;
@@ -40,8 +40,10 @@ export type IconProps = {
 };
 type ButtonOrAnchor = ({
     href?: never;
+    external?: never;
 } & HTMLButtonAttributes) | ({
     href: string;
+    external?: boolean;
 } & HTMLAnchorAttributes);
 type ButtonBase = {
     size?: Size;
@@ -54,8 +56,8 @@ export type ButtonProps = ButtonBase & {
     ref?: HTMLElement | null;
     fullWidth?: boolean;
     loading?: boolean;
-    leadingIcon?: string;
-    trailingIcon?: string;
+    leadingIcon?: IconLike;
+    trailingIcon?: IconLike;
 } & ButtonOrAnchor;
 export type CloseButtonProps = {
     size?: Size;
@@ -113,8 +115,8 @@ type BaseInputProps = {
 export type InputProps = BaseInputProps & {
     containerRef?: HTMLElement | null;
     type?: HTMLInputAttributes['type'];
-    leadingIcon?: string | Snippet;
-    trailingIcon?: string | Snippet;
+    leadingIcon?: IconLike | Snippet;
+    trailingIcon?: IconLike | Snippet;
 };
 export type PasswordInputProps = BaseInputProps & {
     translations?: TranslationProps<'show_password' | 'hide_password'>;

package/dist/utils.d.ts

@@ -1,3 +1,5 @@
+import type { IconLike } from './types.js';
 export declare const cleanClass: (...classNames: unknown[]) => string;
 export declare const withPrefix: (key: string) => string;
 export declare const generateId: () => string;
+export declare const isIconLike: (icon: unknown) => icon is IconLike;

package/dist/utils.js

@@ -12,3 +12,6 @@ export const cleanClass = (...classNames) => {
 export const withPrefix = (key) => `immich-ui-${key}`;
 let _count = 0;
 export const generateId = () => `ui-id-${_count++}`;
+export const isIconLike = (icon) => {
+    return typeof icon === 'string' || !!(icon && typeof icon === 'object' && 'path' in icon);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.26.0",
+	"version": "0.27.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",
@@ -69,6 +69,7 @@
 	"dependencies": {
 		"@mdi/js": "^7.4.47",
 		"bits-ui": "^2.0.0",
+		"simple-icons": "^15.14.0",
 		"tailwind-merge": "^3.0.0",
 		"tailwind-variants": "^3.0.0"
 	},