chore: add docs link and rename to Federated Client Credentials (#636)

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

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

@@ -2,7 +2,9 @@
 	import DatePicker from '$lib/components/form/date-picker.svelte';
 	import { Input, type FormInputEvent } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
+	import { m } from '$lib/paraglide/messages';
 	import type { FormInput } from '$lib/utils/form-util';
+	import { LucideExternalLink } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -10,6 +12,7 @@
 		input = $bindable(),
 		label,
 		description,
+		docsLink,
 		placeholder,
 		disabled = false,
 		type = 'text',
@@ -20,6 +23,7 @@
 		input?: FormInput<string | boolean | number | Date | undefined>;
 		label?: string;
 		description?: string;
+		docsLink?: string;
 		placeholder?: string;
 		disabled?: boolean;
 		type?: 'text' | 'password' | 'email' | 'number' | 'checkbox' | 'date';
@@ -35,7 +39,19 @@
 		<Label class="mb-0" for={id}>{label}</Label>
 	{/if}
 	{#if description}
-		<p class="text-muted-foreground mt-1 text-xs">{description}</p>
+		<p class="text-muted-foreground mt-1 text-xs">
+			{description}
+			{#if docsLink}
+				<a
+					class="relative text-white after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:translate-y-[-1px] after:bg-white"
+					href={docsLink}
+					target="_blank"
+				>
+					{m.docs()}
+					<LucideExternalLink class="inline size-3 align-text-top" />
+				</a>
+			{/if}
+		</p>
 	{/if}
 	<div class={label || description ? 'mt-2' : ''}>
 		{#if children}