@immich/ui 0.16.0 → 0.17.0

package/dist/components/AppShell/AppShell.svelte

@@ -27,7 +27,7 @@
 		{#if sidebar}
 			{@render sidebar?.snippet()}
 		{/if}
-		<Scrollable class="grow">
+		<Scrollable class="grow" resetOnNavigate>
 			{@render children?.()}
 		</Scrollable>
 	</div>

package/dist/components/Card/CardTitle.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
 	import Heading from '../Heading/Heading.svelte';
-	import type { HeadingSize } from '../../types.js';
+	import type { HeadingSize, HeadingTag } from '../../types.js';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
+		/**
+		 * The HTML element type.
+		 */
+		tag?: HeadingTag;
 		class?: string;
 		size?: HeadingSize;
 		children: Snippet;
 	};
 
-	const { size = 'small', class: className, children }: Props = $props();
+	const { size = 'small', tag, class: className, children }: Props = $props();
 </script>
 
-<Heading {size} class={className}>
+<Heading {tag} {size} class={className}>
 	{@render children?.()}
 </Heading>

package/dist/components/Card/CardTitle.svelte.d.ts

@@ -1,6 +1,10 @@
-import type { HeadingSize } from '../../types.js';
+import type { HeadingSize, HeadingTag } from '../../types.js';
 import type { Snippet } from 'svelte';
 type Props = {
+    /**
+     * The HTML element type.
+     */
+    tag?: HeadingTag;
     class?: string;
     size?: HeadingSize;
     children: Snippet;

package/dist/components/Form/Input.svelte

@@ -19,7 +19,7 @@
 		$derived(getFieldContext());
 
 	const inputStyles = tv({
-		base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-200 aria-readonly:text-dark/50 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:aria-readonly:text-dark/75',
+		base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 aria-readonly:text-dark/50 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:disabled:text-gray-200 dark:aria-readonly:text-dark/75',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',

package/dist/components/Heading/Heading.svelte

@@ -1,28 +1,30 @@
 <script lang="ts">
-	import type { HeadingColor, HeadingSize } from '../../types.js';
+	import type { HeadingColor, HeadingSize, HeadingTag } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
-		size: HeadingSize;
+		size?: HeadingSize;
+		/**
+		 * The HTML element type.
+		 */
+		tag?: HeadingTag;
 		color?: HeadingColor;
 		class?: string;
 
 		children: Snippet;
 	} & HTMLAttributes<HTMLHeadingElement>;
 
-	const { color, size = 'medium', class: className, children, ...restProps }: Props = $props();
-
-	const sizes = {
-		title: 'h1',
-		giant: 'h2',
-		large: 'h3',
-		medium: 'h4',
-		small: 'h5',
-		tiny: 'h6',
-	};
+	const {
+		color,
+		tag = 'p',
+		size = 'medium',
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
 
 	const styles = tv({
 		base: 'font-bold leading-none tracking-tight',
@@ -47,10 +49,9 @@
 		},
 	});
 
-	const tag = $derived(sizes[size] ?? 'h6');
 	const classList = $derived(cleanClass(styles({ color, size }), className));
 </script>
 
-<svelte:element this={tag} class={classList} role="heading" {...restProps}>
+<svelte:element this={tag} class={classList} {...restProps}>
 	{@render children()}
 </svelte:element>

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

@@ -1,8 +1,12 @@
-import type { HeadingColor, HeadingSize } from '../../types.js';
+import type { HeadingColor, HeadingSize, HeadingTag } from '../../types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = {
-    size: HeadingSize;
+    size?: HeadingSize;
+    /**
+     * The HTML element type.
+     */
+    tag?: HeadingTag;
     color?: HeadingColor;
     class?: string;
     children: Snippet;

package/dist/components/Modal/Modal.svelte

@@ -69,7 +69,7 @@
 				<Card class={cleanClass(modalStyles({ size }), className)}>
 					<CardHeader class="border-0 py-2">
 						<div class="flex items-center justify-between">
-							<CardTitle>{title}</CardTitle>
+							<CardTitle tag="h1">{title}</CardTitle>
 							<Dialog.Close>
 								<CloseButton size="large" onclick={() => onChange(false)} />
 							</Dialog.Close>

package/dist/components/Scrollable/Scrollable.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { afterNavigate } from '$app/navigation';
 	import { cleanClass } from '../../utils.js';
 	import type { Snippet } from 'svelte';
 
@@ -6,12 +7,20 @@
 		class?: string;
 		children?: Snippet;
 		transition?: TransitionEvent;
+		ref?: HTMLDivElement;
+		resetOnNavigate?: boolean;
 	};
 
-	const { class: className, children }: Props = $props();
+	let { resetOnNavigate = false, class: className, children, ref = $bindable() }: Props = $props();
+
+	afterNavigate(() => {
+		if (resetOnNavigate) {
+			ref?.scrollTo(0, 0);
+		}
+	});
 </script>
 
-<div class={cleanClass('immich-scrollbar h-full w-full overflow-auto', className)}>
+<div bind:this={ref} class={cleanClass('immich-scrollbar h-full w-full overflow-auto', className)}>
 	{@render children?.()}
 </div>
 

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

@@ -3,7 +3,9 @@ type Props = {
     class?: string;
     children?: Snippet;
     transition?: TransitionEvent;
+    ref?: HTMLDivElement;
+    resetOnNavigate?: boolean;
 };
-declare const Scrollable: import("svelte").Component<Props, {}, "">;
+declare const Scrollable: import("svelte").Component<Props, {}, "ref">;
 type Scrollable = ReturnType<typeof Scrollable>;
 export default Scrollable;

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import IconButton from '../IconButton/IconButton.svelte';
-	import { theme } from '../../services/theme.svelte.js';
+	import { onThemeChange, theme } from '../../services/theme.svelte.js';
 	import { t } from '../../services/translation.svelte.js';
 	import {
 		Theme,
@@ -33,6 +33,7 @@
 	const handleToggleTheme = () => {
 		theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
 		onChange?.(theme.value);
+		onThemeChange();
 	};
 
 	const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);

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

@@ -0,0 +1,11 @@
+type PreferenceOptions<T> = {
+    key: string;
+    defaults: T;
+    onReadError?: (error: unknown) => void;
+    onWriteError?: (error: unknown) => void;
+};
+export declare const preference: <T>(options: PreferenceOptions<T>) => {
+    state: T;
+    sync: () => void;
+};
+export {};

package/dist/services/preference.svelte.js

@@ -0,0 +1,37 @@
+import { browser } from '$app/environment';
+const asKey = (key) => `immich-ui-${key}`;
+const readPreference = (key, defaults) => {
+    if (!browser || !window?.localStorage) {
+        throw new Error('Local storage is not available');
+    }
+    const text = window.localStorage.getItem(asKey(key));
+    const stored = text ? JSON.parse(text) : {};
+    return { ...defaults, ...stored };
+};
+const writePreference = (key, value) => {
+    if (!browser || !window.localStorage) {
+        throw new Error('Local storage is not available');
+    }
+    const text = JSON.stringify(value);
+    window.localStorage.setItem(asKey(key), text);
+};
+export const preference = (options) => {
+    const { key, defaults, onReadError, onWriteError } = options;
+    let initialValue = defaults;
+    try {
+        initialValue = readPreference(key, defaults);
+    }
+    catch (error) {
+        onReadError?.(error);
+    }
+    const state = $state(initialValue);
+    const sync = () => {
+        try {
+            writePreference(key, state);
+        }
+        catch (error) {
+            onWriteError?.(error);
+        }
+    };
+    return { state, sync };
+};

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

@@ -1,5 +1,17 @@
 import { Theme } from '../types.js';
-export declare const theme: {
+export type ThemeOptions = {
+    lightClass?: string;
+    darkClass?: string;
+    selector?: string;
+};
+export declare const setThemeOptions: (newOptions: ThemeOptions) => {
+    lightClass?: string;
+    darkClass?: string;
+    selector?: string;
+};
+type ThemePreference = {
     value: Theme;
 };
-export declare const syncToDom: () => void;
+export declare const theme: ThemePreference;
+export declare const onThemeChange: () => void;
+export {};

package/dist/services/theme.svelte.js

@@ -1,13 +1,59 @@
+import { browser } from '$app/environment';
+import { preference } from './preference.svelte.js';
 import { Theme } from '../types.js';
-export const theme = $state({ value: Theme.Dark });
-export const syncToDom = () => {
+const defaultOptions = {
+    darkClass: 'dark',
+    selector: 'body',
+};
+let options = $state(defaultOptions);
+export const setThemeOptions = (newOptions) => (options = { ...defaultOptions, ...newOptions });
+const defaultTheme = { value: Theme.Dark };
+const { state, sync: syncToLocalStorage } = preference({
+    key: 'theme',
+    defaults: defaultTheme,
+    onReadError: (error) => console.log(`Preference read error: ${error}`),
+    onWriteError: (error) => console.log(`Preference write error: ${error}`),
+});
+export const theme = state;
+export const onThemeChange = () => {
+    syncToDom();
+    syncToLocalStorage();
+};
+const syncToDom = () => {
+    const { lightClass, darkClass, selector } = options;
+    if (!browser || !selector) {
+        return;
+    }
+    const element = document.querySelector(selector);
+    if (!element) {
+        return;
+    }
     switch (theme.value) {
         case Theme.Dark: {
-            document.body.classList.add('dark');
+            if (lightClass) {
+                element.classList.remove(lightClass);
+            }
+            if (darkClass) {
+                element.classList.add(darkClass);
+            }
+            const darkReaderLock = document.createElement('meta');
+            darkReaderLock.name = 'darkreader-lock';
+            document.head.appendChild(darkReaderLock);
             break;
         }
-        default: {
-            document.body.classList.remove('dark');
+        case Theme.Light: {
+            if (lightClass) {
+                element.classList.add(lightClass);
+            }
+            if (darkClass) {
+                element.classList.remove(darkClass);
+            }
+            const darkReaderLock = document.querySelector('head > meta[name=darkreader-lock]');
+            if (darkReaderLock) {
+                document.head.removeChild(darkReaderLock);
+            }
+            break;
         }
     }
 };
+syncToDom();

package/dist/types.d.ts

@@ -8,6 +8,7 @@ export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
 export type ModalSize = Size | 'full';
 export type ContainerSize = ModalSize;
 export type HeadingSize = Size | 'title';
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
 export type Shape = 'rectangle' | 'semi-round' | 'round';
 export type Variants = 'filled' | 'outline' | 'ghost';
 export type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.16.0",
+	"version": "0.17.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",
@@ -49,7 +49,7 @@
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^10.0.0",
 		"eslint-plugin-svelte": "^2.36.0",
-		"globals": "^15.0.0",
+		"globals": "^16.0.0",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.5",