feat: translations

src/lib/components/CloseButton/CloseButton.svelte

@@ -1,9 +1,23 @@
 <script lang="ts">
 	import IconButton from '$lib/components/IconButton/IconButton.svelte';
+	import { t } from '$lib/services/translation.svelte.js';
 	import type { CloseButtonProps } from '$lib/types.js';
 	import { mdiClose } from '@mdi/js';
 
-	const { size = 'medium', variant = 'ghost', ...restProps }: CloseButtonProps = $props();
+	const {
+		size = 'medium',
+		variant = 'ghost',
+		translations,
+		...restProps
+	}: CloseButtonProps = $props();
 </script>
 
-<IconButton {...restProps} icon={mdiClose} shape="round" {variant} {size} color="secondary" />
+<IconButton
+	{...restProps}
+	icon={mdiClose}
+	shape="round"
+	{variant}
+	{size}
+	color="secondary"
+	title={t('close', translations)}
+/>

src/lib/components/Form/PasswordInput.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import Input from '$lib/components/Form/Input.svelte';
 	import IconButton from '$lib/components/IconButton/IconButton.svelte';
+	import { t } from '$lib/services/translation.svelte.js';
 	import type { PasswordInputProps } from '$lib/types.js';
 	import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';
 
 	let {
 		value = $bindable<string>(),
-		showLabel = 'Show password',
-		hideLabel = 'Hide password',
+		translations,
 		isVisible = $bindable<boolean>(false),
 		color = 'secondary',
 		...props
@@ -24,7 +24,7 @@
 				class="m-1"
 				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
 				onclick={() => (isVisible = !isVisible)}
-				title={isVisible ? hideLabel : showLabel}
+				title={isVisible ? t('hidePassword', translations) : t('showPassword', translations)}
 			></IconButton>
 		{/if}
 	{/snippet}

src/lib/index.ts

@@ -58,3 +58,4 @@ export { default as ThemeSwitcher } from '$lib/components/ThemeSwitcher/ThemeSwi
 export * from '$lib/services/theme.svelte.js';
 export * from '$lib/types.js';
 export * from '$lib/utilities/byte-units.js';
+export * from '$lib/services/translation.svelte.js';

src/lib/services/translation.svelte.ts

@@ -0,0 +1,20 @@
+import type { TranslationProps } from '$lib/types.js';
+
+const defaultTranslations = {
+	close: 'Close',
+	showPassword: 'Show password',
+	hidePassword: 'Hide password',
+};
+
+export type Translations = typeof defaultTranslations;
+
+let translations = $state<Translations>(defaultTranslations);
+
+export const translate = <T extends keyof Translations>(
+	key: T,
+	overrides?: TranslationProps<T>,
+): string => overrides?.[key] ?? translations[key];
+export const t = translate;
+export const setTranslations = (newTranslations: Partial<Translations>) => {
+	translations = { ...defaultTranslations, ...newTranslations };
+};

src/lib/types.ts

@@ -1,3 +1,4 @@
+import type { Translations } from '$lib/services/translation.svelte.js';
 import type { Snippet } from 'svelte';
 import type {
 	HTMLAnchorAttributes,
@@ -20,6 +21,8 @@ export enum Theme {
 	Dark = 'dark',
 }
 
+export type TranslationProps<T extends keyof Translations> = { [K in T]?: string };
+
 export type IconProps = {
 	icon: string;
 	title?: string;
@@ -56,6 +59,7 @@ export type CloseButtonProps = {
 	size?: Size;
 	variant?: Variants;
 	class?: string;
+	translations?: TranslationProps<'close'>;
 } & ButtonOrAnchor;
 
 export type IconButtonProps = ButtonBase & {
@@ -108,8 +112,7 @@ export type InputProps = BaseInputProps & {
 };
 
 export type PasswordInputProps = BaseInputProps & {
-	showLabel?: string;
-	hideLabel?: string;
+	translations?: TranslationProps<'showPassword' | 'hidePassword'>;
 	isVisible?: boolean;
 };
 

src/routes/components/close-button/+page.svelte

@@ -7,6 +7,8 @@
 	import filledExample from './FilledExample.svelte?raw';
 	import OutlineExample from './OutlineExample.svelte';
 	import outlineExample from './OutlineExample.svelte?raw';
+	import TranslationExample from './TranslationExample.svelte';
+	import translationExample from './TranslationExample.svelte?raw';
 </script>
 
 <ComponentPage name="CloseButton">
@@ -15,6 +17,7 @@
 			{ title: 'Basic', code: basicExample, component: BasicExample },
 			{ title: 'Outline', code: outlineExample, component: OutlineExample },
 			{ title: 'Filled', code: filledExample, component: FilledExample },
+			{ title: 'Translation', code: translationExample, component: TranslationExample },
 		]}
 	/>
 </ComponentPage>

src/routes/components/close-button/TranslationExample.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { CloseButton } from '@immich/ui';
+</script>
+
+<CloseButton translations={{ close: 'Close me' }} />

src/routes/components/password-input/+page.svelte

@@ -9,6 +9,8 @@
 	import shapeExample from './ShapeExample.svelte?raw';
 	import SizeExample from './SizeExample.svelte';
 	import sizeExample from './SizeExample.svelte?raw';
+	import TranslationExample from './TranslationExample.svelte';
+	import translationExample from './TranslationExample.svelte?raw';
 </script>
 
 <ComponentPage name="PasswordInput">
@@ -19,6 +21,7 @@
 			{ title: 'States', code: basicExample, component: BasicExample },
 			{ title: 'Shapes', code: shapeExample, component: ShapeExample },
 			{ title: 'Sizes', code: sizeExample, component: SizeExample },
+			{ title: 'Translation', code: translationExample, component: TranslationExample },
 		]}
 	/>
 </ComponentPage>

src/routes/components/password-input/BasicExample.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-	import { Stack, Field, PasswordInput } from '@immich/ui';
+	import { Field, PasswordInput, Stack } from '@immich/ui';
+
+	let value = $state('super-secret-password');
 </script>
 
 <Stack gap={4}>
 	<Field label="Empty">
 		<PasswordInput />
 	</Field>
 	<Field label="Password">
-		<PasswordInput value="super-secret-password" />
+		<PasswordInput bind:value />
 	</Field>
 </Stack>

src/routes/components/password-input/TranslationExample.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Field, PasswordInput, Stack } from '@immich/ui';
+</script>
+
+<Stack gap={4}>
+	<Field label="Api Key">
+		<PasswordInput
+			value="super-secret-password"
+			translations={{
+				showPassword: 'Show Api key',
+				hidePassword: 'Hide Api key',
+			}}
+		/>
+	</Field>
+</Stack>