feat: implement OAuth Client ID Metadata Document (#1525) (#1526)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/lib/components/confirm-dialog/index.ts

@@ -6,7 +6,7 @@ import ConfirmDialog from './confirm-dialog.svelte';
 interface ConfirmDialogState {
 	open: boolean;
 	title: string;
-	message:  string | AnyFormattedMessage;
+	message: string | AnyFormattedMessage;
 	confirm: {
 		label: string;
 		destructive: boolean;

frontend/src/lib/components/form/url-list-input.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { m } from '$lib/paraglide/messages';
+	import { LucideMinus, LucidePlus } from '@lucide/svelte';
+
+	let {
+		urls = $bindable(),
+		error = null,
+		testIdPrefix = 'url',
+		disabled = false
+	}: {
+		urls: string[];
+		error?: string | null;
+		testIdPrefix?: string;
+		disabled?: boolean;
+	} = $props();
+</script>
+
+<div>
+	<div class="flex flex-col gap-y-2">
+		{#each urls as url, i (i)}
+			<div class="flex gap-x-2">
+				<Input
+					aria-invalid={!!error}
+					data-testid={`${testIdPrefix}-${i + 1}`}
+					type="text"
+					inputmode="url"
+					autocomplete="url"
+					bind:value={urls[i]}
+					{disabled}
+				/>
+				<Button
+					variant="outline"
+					size="sm"
+					aria-label={m.remove_url({ identifier: url || i + 1 })}
+					onclick={() => (urls = urls.filter((_, index) => index !== i))}
+					{disabled}
+				>
+					<LucideMinus class="size-4" />
+				</Button>
+			</div>
+		{/each}
+	</div>
+	<Button
+		class="mt-2"
+		variant="secondary"
+		size="sm"
+		onclick={() => (urls = [...urls, ''])}
+		{disabled}
+	>
+		<LucidePlus class="mr-1 size-4" />
+		{urls.length === 0 ? m.add() : m.add_another()}
+	</Button>
+</div>

frontend/src/lib/components/ui/card/card-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <p
 	bind:this={ref}
 	data-slot="card-description"
-	class={cn('text-muted-foreground text-sm mt-3', className)}
+	class={cn('text-muted-foreground text-sm mt-1', className)}
 	{...restProps}
 >
 	{@render children?.()}