chore(translations): add missing translations (#884)

frontend/messages/en.json

@@ -17,6 +17,7 @@
 	"image_should_be_in_format": "The image should be in PNG or JPEG format.",
 	"items_per_page": "Items per page",
 	"no_items_found": "No items found",
+	"select_items": "Select items...",
 	"search": "Search...",
 	"expand_card": "Expand card",
 	"copied": "Copied",

frontend/src/lib/components/audit-log-list.svelte

@@ -3,6 +3,7 @@
 	import { Badge } from '$lib/components/ui/badge';
 	import * as Table from '$lib/components/ui/table';
 	import { m } from '$lib/paraglide/messages';
+	import {translateAuditLogEvent} from "$lib/utils/audit-log-translator";
 	import AuditLogService from '$lib/services/audit-log-service';
 	import type { AuditLog } from '$lib/types/audit-log.type';
 	import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
@@ -18,14 +19,6 @@
 	} = $props();
 
 	const auditLogService = new AuditLogService();
-
-	function toFriendlyEventString(event: string) {
-		const words = event.split('_');
-		const capitalizedWords = words.map((word) => {
-			return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
-		});
-		return capitalizedWords.join(' ');
-	}
 </script>
 
 <AdvancedTable
@@ -58,7 +51,7 @@
 			</Table.Cell>
 		{/if}
 		<Table.Cell>
-			<Badge class="rounded-full" variant="outline">{toFriendlyEventString(item.event)}</Badge>
+			<Badge class="rounded-full" variant="outline">{translateAuditLogEvent(item.event)}</Badge>
 		</Table.Cell>
 		<Table.Cell
 			>{item.city && item.country ? `${item.city}, ${item.country}` : m.unknown()}</Table.Cell

frontend/src/lib/components/form/searchable-multi-select.svelte

@@ -4,6 +4,7 @@
 	import * as Command from '$lib/components/ui/command';
 	import * as Popover from '$lib/components/ui/popover';
 	import { cn } from '$lib/utils/style';
+    import { m } from '$lib/paraglide/messages';
 	import { LoaderCircle, LucideCheck, LucideChevronDown } from '@lucide/svelte';
 	import type { FormEventHandler } from 'svelte/elements';
 
@@ -18,9 +19,6 @@
 		onSelect,
 		oninput,
 		isLoading = false,
-		placeholder = 'Select items...',
-		searchText = 'Search...',
-		noItemsText = 'No items found.',
 		disableInternalSearch = false,
 		id
 	}: {
@@ -29,9 +27,6 @@
 		onSelect?: (value: string[]) => void;
 		oninput?: FormEventHandler<HTMLInputElement>;
 		isLoading?: boolean;
-		placeholder?: string;
-		searchText?: string;
-		noItemsText?: string;
 		disableInternalSearch?: boolean;
 		id?: string;
 	} = $props();
@@ -93,7 +88,7 @@
 							<Badge variant="secondary">{label}</Badge>
 						{/each}
 					{:else}
-						<span class="text-muted-foreground font-normal">{placeholder}</span>
+						<span class="text-muted-foreground font-normal">{m.select_items()}</span>
 					{/if}
 				</div>
 				<LucideChevronDown class="ml-2 size-4 shrink-0 opacity-50" />
@@ -103,7 +98,7 @@
 	<Popover.Content class="p-0" sameWidth>
 		<Command.Root shouldFilter={false}>
 			<Command.Input
-				placeholder={searchText}
+				placeholder={m.search()}
 				value={searchValue}
 				oninput={(e) => {
 					filterItems(e.currentTarget.value);
@@ -116,7 +111,7 @@
 						<LoaderCircle class="size-4 animate-spin" />
 					</div>
 				{:else}
-					{noItemsText}
+					{m.no_items_found()}
 				{/if}
 			</Command.Empty>
 			<Command.Group class="max-h-60 overflow-y-auto">

frontend/src/lib/utils/audit-log-translator.ts

@@ -0,0 +1,29 @@
+import { m } from '$lib/paraglide/messages';
+
+export const eventTypes: Record<string, string> = {
+	SIGN_IN: m.sign_in(),
+	TOKEN_SIGN_IN: m.token_sign_in(),
+	CLIENT_AUTHORIZATION: m.client_authorization(),
+	NEW_CLIENT_AUTHORIZATION: m.new_client_authorization(),
+	ACCOUNT_CREATED: m.account_created()
+}
+
+/**
+ * Translates an audit log event type using paraglide messages.
+ * Falls back to a formatted string if no specific translation is found.
+ * @param event The event type string from the backend (e.g., "CLIENT_AUTHORIZATION").
+ * @returns The translated string.
+ */
+export function translateAuditLogEvent(event: string): string {
+	if (event in eventTypes) {
+		return eventTypes[event];
+	}
+
+	// If no specific translation is found, provide a readable fallback.
+	// This converts "SOME_EVENT" to "Some Event".
+	const words = event.split('_');
+	const capitalizedWords = words.map((word) => {
+		return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+	});
+	return capitalizedWords.join(' ');
+}

frontend/src/routes/settings/admin/users/+page.svelte

@@ -21,7 +21,7 @@
 	let signupTokens = $state(data.signupTokens);
 	let signupTokensRequestOptions = $state(data.signupTokensRequestOptions);
 
-	let selectedCreateOptions = $state('Add User');
+	let selectedCreateOptions = $state(m.add_user());
 	let expandAddUser = $state(false);
 	let signupTokenModalOpen = $state(false);
 	let signupTokenListModalOpen = $state(false);

frontend/src/routes/settings/audit-log/global/+page.svelte

@@ -7,6 +7,7 @@
 	import AuditLogService from '$lib/services/audit-log-service';
 	import type { AuditLogFilter } from '$lib/types/audit-log.type';
 	import AuditLogSwitcher from '../audit-log-switcher.svelte';
+	import {eventTypes as eventTranslations} from "$lib/utils/audit-log-translator";
 
 	let { data } = $props();
 
@@ -27,13 +28,7 @@
 		internal: 'Internal Networks'
 	});
 
-	const eventTypes = $state({
-		SIGN_IN: m.sign_in(),
-		TOKEN_SIGN_IN: m.token_sign_in(),
-		CLIENT_AUTHORIZATION: m.client_authorization(),
-		NEW_CLIENT_AUTHORIZATION: m.new_client_authorization(),
-		ACCOUNT_CREATED: m.account_created()
-	});
+	const eventTypes = $state(eventTranslations);
 
 	$effect(() => {
 		auditLogService.listAllLogs(requestOptions, filters).then((response) => (auditLogs = response));