feat: add support for translations (#349)

Co-authored-by: Kyle Mendell <kmendell@outlook.com>
Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/lib/components/form/custom-claims-input.svelte

@@ -8,6 +8,7 @@
 	import { onMount, type Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import AutoCompleteInput from './auto-complete-input.svelte';
+	import { m } from '$lib/paraglide/messages';
 
 	let {
 		customClaims = $bindable(),
@@ -41,15 +42,15 @@
 			{#each customClaims as _, i}
 				<div class="flex gap-x-2">
 					<AutoCompleteInput
-						placeholder="Key"
+						placeholder={m.key()}
 						suggestions={filteredSuggestions}
 						bind:value={customClaims[i].key}
 					/>
-					<Input placeholder="Value" bind:value={customClaims[i].value} />
+					<Input placeholder={m.value()} bind:value={customClaims[i].value} />
 					<Button
 						variant="outline"
 						size="sm"
-						aria-label="Remove custom claim"
+						aria-label={m.remove_custom_claim()}
 						on:click={() => (customClaims = customClaims.filter((_, index) => index !== i))}
 					>
 						<LucideMinus class="h-4 w-4" />
@@ -69,7 +70,7 @@
 			on:click={() => (customClaims = [...customClaims, { key: '', value: '' }])}
 		>
 			<LucidePlus class="mr-1 h-4 w-4" />
-			{customClaims.length === 0 ? 'Add custom claim' : 'Add another'}
+			{customClaims.length === 0 ? m.add_custom_claim() : m.add_another()}
 		</Button>
 	{/if}
 </div>

frontend/src/lib/components/form/date-picker.svelte

@@ -2,6 +2,8 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Calendar } from '$lib/components/ui/calendar';
 	import * as Popover from '$lib/components/ui/popover';
+	import { m } from '$lib/paraglide/messages';
+	import { getLocale } from '$lib/paraglide/runtime';
 	import { cn } from '$lib/utils/style';
 	import {
 		CalendarDate,
@@ -30,7 +32,7 @@
 		open = false;
 	}
 
-	const df = new DateFormatter('en-US', {
+	const df = new DateFormatter(getLocale(), {
 		dateStyle: 'long'
 	});
 </script>
@@ -44,7 +46,7 @@
 			builders={[builder]}
 		>
 			<CalendarIcon class="mr-2 h-4 w-4" />
-			{date ? df.format(date.toDate(getLocalTimeZone())) : 'Select a date'}
+			{date ? df.format(date.toDate(getLocalTimeZone())) : m.select_a_date()}
 		</Button>
 	</Popover.Trigger>
 	<Popover.Content class="w-auto p-0" align="start">

frontend/src/lib/components/form/file-input.svelte

@@ -3,6 +3,7 @@
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { VariantProps } from 'tailwind-variants';
 	import type { buttonVariants } from '$lib/components/ui/button';
+	import { m } from '$lib/paraglide/messages';
 
 	let {
 		id,
@@ -21,7 +22,7 @@
 	{#if restProps.children}
 		{@render restProps.children()}
 	{:else}
-		Select File
+		{m.select_file()}
 	{/if}
 </button>
 <input {id} {...restProps} type="file" class="hidden" />

frontend/src/lib/components/form/profile-picture-settings.svelte

@@ -4,6 +4,7 @@
 	import Button from '$lib/components/ui/button/button.svelte';
 	import { LucideLoader, LucideRefreshCw, LucideUpload } from 'lucide-svelte';
 	import { openConfirmDialog } from '../confirm-dialog';
+	import { m } from '$lib/paraglide/messages';
 
 	let {
 		userId,
@@ -40,11 +41,10 @@
 
 	function onReset() {
 		openConfirmDialog({
-			title: 'Reset profile picture?',
-			message:
-				'This will remove the uploaded image, and reset the profile picture to default. Do you want to continue?',
+			title: m.reset_profile_picture_question(),
+			message: m.this_will_remove_the_uploaded_image_and_reset_the_profile_picture_to_default(),
 			confirm: {
-				label: 'Reset',
+				label: m.reset(),
 				action: async () => {
 					isLoading = true;
 					await resetCallback().catch();
@@ -58,16 +58,16 @@
 <div class="flex gap-5">
 	<div class="flex w-full flex-col justify-between gap-5 sm:flex-row">
 		<div>
-			<h3 class="text-xl font-semibold">Profile Picture</h3>
+			<h3 class="text-xl font-semibold">{m.profile_picture()}</h3>
 			{#if isLdapUser}
 				<p class="text-muted-foreground mt-1 text-sm">
-					The profile picture is managed by the LDAP server and cannot be changed here.
+					{m.profile_picture_is_managed_by_ldap_server()}
 				</p>
 			{:else}
 				<p class="text-muted-foreground mt-1 text-sm">
-					Click on the profile picture to upload a custom one from your files.
+					{m.click_profile_picture_to_upload_custom()}
 				</p>
-				<p class="text-muted-foreground mt-1 text-sm">The image should be in PNG or JPEG format.</p>
+				<p class="text-muted-foreground mt-1 text-sm">{m.image_should_be_in_format()}</p>
 			{/if}
 			<Button
 				variant="outline"
@@ -77,7 +77,7 @@
 				disabled={isLoading || isLdapUser}
 			>
 				<LucideRefreshCw class="mr-2 h-4 w-4" />
-				Reset to default
+				{m.reset_to_default()}
 			</Button>
 		</div>
 		{#if isLdapUser}