refactor: migrate shadcn-components to Svelte 5 and TW4 (#551)

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

frontend/src/routes/settings/admin/api-keys/+page.svelte

@@ -5,7 +5,7 @@
 	import ApiKeyService from '$lib/services/api-key-service';
 	import type { ApiKeyCreate, ApiKeyResponse } from '$lib/types/api-key.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideMinus, ShieldEllipsis, ShieldPlus } from 'lucide-svelte';
+	import { LucideMinus, ShieldEllipsis, ShieldPlus } from '@lucide/svelte';
 	import { slide } from 'svelte/transition';
 	import ApiKeyDialog from './api-key-dialog.svelte';
 	import ApiKeyForm from './api-key-form.svelte';
@@ -45,16 +45,16 @@
 			<div class="flex items-center justify-between">
 				<div>
 					<Card.Title>
-						<ShieldPlus class="text-primary/80 h-5 w-5" />
+						<ShieldPlus class="text-primary/80 size-5" />
 						{m.create_api_key()}
 					</Card.Title>
 					<Card.Description>{m.add_a_new_api_key_for_programmatic_access()}</Card.Description>
 				</div>
 				{#if !expandAddApiKey}
-					<Button on:click={() => (expandAddApiKey = true)}>{m.add_api_key()}</Button>
+					<Button onclick={() => (expandAddApiKey = true)}>{m.add_api_key()}</Button>
 				{:else}
-					<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddApiKey = false)}>
-						<LucideMinus class="h-5 w-5" />
+					<Button class="h-8 p-3" variant="ghost" onclick={() => (expandAddApiKey = false)}>
+						<LucideMinus class="size-5" />
 					</Button>
 				{/if}
 			</div>
@@ -73,7 +73,7 @@
 	<Card.Root>
 		<Card.Header>
 			<Card.Title>
-				<ShieldEllipsis class="text-primary/80 h-5 w-5" />
+				<ShieldEllipsis class="text-primary/80 size-5" />
 				{m.manage_api_keys()}
 			</Card.Title>
 		</Card.Header>

frontend/src/routes/settings/admin/api-keys/api-key-dialog.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <Dialog.Root open={!!apiKeyResponse} {onOpenChange}>
-	<Dialog.Content class="max-w-md" closeButton={false}>
+	<Dialog.Content class="max-w-md">
 		<Dialog.Header>
 			<Dialog.Title>{m.api_key_created()}</Dialog.Title>
 			<Dialog.Description>
@@ -45,7 +45,7 @@
 			</div>
 		{/if}
 		<Dialog.Footer class="mt-3">
-			<Button variant="default" on:click={() => onOpenChange(false)}>{m.close()}</Button>
+			<Button variant="default" onclick={() => onOpenChange(false)}>{m.close()}</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>

frontend/src/routes/settings/admin/api-keys/api-key-list.svelte

@@ -8,7 +8,7 @@
 	import type { ApiKey } from '$lib/types/api-key.type';
 	import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideBan } from 'lucide-svelte';
+	import { LucideBan } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 
 	let {
@@ -68,11 +68,8 @@
 		<Table.Cell>{formatDate(item.expiresAt)}</Table.Cell>
 		<Table.Cell>{formatDate(item.lastUsedAt)}</Table.Cell>
 		<Table.Cell class="flex justify-end">
-			<Button
-				on:click={() => revokeApiKey(item)}
-				size="sm"
-				variant="outline"
-				aria-label={m.revoke()}><LucideBan class="h-3 w-3 text-red-500" /></Button
+			<Button onclick={() => revokeApiKey(item)} size="sm" variant="outline" aria-label={m.revoke()}
+				><LucideBan class="size-3 text-red-500" /></Button
 			>
 		</Table.Cell>
 	{/snippet}

frontend/src/routes/settings/admin/application-configuration/+page.svelte

@@ -5,7 +5,7 @@
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideImage, Mail, SlidersHorizontal, UserSearch } from 'lucide-svelte';
+	import { LucideImage, Mail, SlidersHorizontal, UserSearch } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import AppConfigEmailForm from './forms/app-config-email-form.svelte';
 	import AppConfigGeneralForm from './forms/app-config-general-form.svelte';

frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte

@@ -106,11 +106,12 @@
 			<div class="grid gap-2">
 				<Label class="mb-0" for="smtp-tls">{m.smtp_tls_option()}</Label>
 				<Select.Root
-					selected={{ value: $inputs.smtpTls.value, label: tlsOptions[$inputs.smtpTls.value] }}
-					onSelectedChange={(v) => ($inputs.smtpTls.value = v!.value)}
+					type="single"
+					value={$inputs.smtpTls.value}
+					onValueChange={(v) => ($inputs.smtpTls.value = v as typeof $inputs.smtpTls.value)}
 				>
-					<Select.Trigger>
-						<Select.Value placeholder={m.email_tls_option()} />
+					<Select.Trigger class="w-full" placeholder={m.email_tls_option()}>
+						{tlsOptions[$inputs.smtpTls.value]}
 					</Select.Trigger>
 					<Select.Content>
 						<Select.Item value="none" label="None" />

frontend/src/routes/settings/admin/application-configuration/update-application-images.svelte

@@ -23,7 +23,7 @@
 <div class="flex flex-col gap-8">
 	<ApplicationImage
 		id="favicon"
-		imageClass="h-14 w-14 p-2"
+		imageClass="size-14 p-2"
 		label={m.favicon()}
 		bind:image={favicon}
 		imageURL="/api/application-configuration/favicon"
@@ -31,7 +31,7 @@
 	/>
 	<ApplicationImage
 		id="logo-light"
-		imageClass="h-32 w-32"
+		imageClass="size-32"
 		label={m.light_mode_logo()}
 		bind:image={logoLight}
 		imageURL="/api/application-configuration/logo?light=true"
@@ -39,7 +39,7 @@
 	/>
 	<ApplicationImage
 		id="logo-dark"
-		imageClass="h-32 w-32"
+		imageClass="size-32"
 		label={m.dark_mode_logo()}
 		bind:image={logoDark}
 		imageURL="/api/application-configuration/logo?light=false"

frontend/src/routes/settings/admin/oidc-clients/+page.svelte

@@ -8,7 +8,7 @@
 	import clientSecretStore from '$lib/stores/client-secret-store';
 	import type { OidcClientCreateWithLogo } from '$lib/types/oidc.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideMinus, ShieldCheck, ShieldPlus } from 'lucide-svelte';
+	import { LucideMinus, ShieldCheck, ShieldPlus } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import OIDCClientForm from './oidc-client-form.svelte';
@@ -49,7 +49,7 @@
 			<div class="flex items-center justify-between">
 				<div>
 					<Card.Title>
-						<ShieldPlus class="text-primary/80 h-5 w-5" />
+						<ShieldPlus class="text-primary/80 size-5" />
 						{m.create_oidc_client()}
 					</Card.Title>
 					<Card.Description
@@ -59,10 +59,10 @@
 					>
 				</div>
 				{#if !expandAddClient}
-					<Button on:click={() => (expandAddClient = true)}>{m.add_oidc_client()}</Button>
+					<Button onclick={() => (expandAddClient = true)}>{m.add_oidc_client()}</Button>
 				{:else}
-					<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddClient = false)}>
-						<LucideMinus class="h-5 w-5" />
+					<Button class="h-8 p-3" variant="ghost" onclick={() => (expandAddClient = false)}>
+						<LucideMinus class="size-5" />
 					</Button>
 				{/if}
 			</div>
@@ -81,7 +81,7 @@
 	<Card.Root>
 		<Card.Header>
 			<Card.Title>
-				<ShieldCheck class="text-primary/80 h-5 w-5" />
+				<ShieldCheck class="text-primary/80 size-5" />
 				{m.manage_oidc_clients()}
 			</Card.Title>
 		</Card.Header>

frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { beforeNavigate } from '$app/navigation';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import CollapsibleCard from '$lib/components/collapsible-card.svelte';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog';
 	import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
@@ -12,7 +12,7 @@
 	import clientSecretStore from '$lib/stores/client-secret-store';
 	import type { OidcClientCreateWithLogo } from '$lib/types/oidc.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideChevronLeft, LucideRefreshCcw } from 'lucide-svelte';
+	import { LucideChevronLeft, LucideRefreshCcw } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import OidcForm from '../oidc-client-form.svelte';
@@ -28,12 +28,12 @@
 	const oidcService = new OidcService();
 
 	const setupDetails = $state({
-		[m.authorization_url()]: `https://${$page.url.hostname}/authorize`,
-		[m.oidc_discovery_url()]: `https://${$page.url.hostname}/.well-known/openid-configuration`,
-		[m.token_url()]: `https://${$page.url.hostname}/api/oidc/token`,
-		[m.userinfo_url()]: `https://${$page.url.hostname}/api/oidc/userinfo`,
-		[m.logout_url()]: `https://${$page.url.hostname}/api/oidc/end-session`,
-		[m.certificate_url()]: `https://${$page.url.hostname}/.well-known/jwks.json`,
+		[m.authorization_url()]: `https://${page.url.hostname}/authorize`,
+		[m.oidc_discovery_url()]: `https://${page.url.hostname}/.well-known/openid-configuration`,
+		[m.token_url()]: `https://${page.url.hostname}/api/oidc/token`,
+		[m.userinfo_url()]: `https://${page.url.hostname}/api/oidc/userinfo`,
+		[m.logout_url()]: `https://${page.url.hostname}/api/oidc/end-session`,
+		[m.certificate_url()]: `https://${page.url.hostname}/.well-known/jwks.json`,
 		[m.pkce()]: client.pkceEnabled ? m.enabled() : m.disabled()
 	});
 
@@ -102,7 +102,7 @@
 
 <div>
 	<a class="text-muted-foreground flex text-sm" href="/settings/admin/oidc-clients"
-		><LucideChevronLeft class="h-5 w-5" /> {m.back()}</a
+		><LucideChevronLeft class="size-5" /> {m.back()}</a
 	>
 </div>
 <Card.Root>
@@ -136,7 +136,7 @@
 								onclick={createClientSecret}
 								size="sm"
 								variant="ghost"
-								aria-label="Create new client secret"><LucideRefreshCcw class="h-3 w-3" /></Button
+								aria-label="Create new client secret"><LucideRefreshCcw class="size-3" /></Button
 							>
 						</div>
 					{/if}
@@ -157,7 +157,7 @@
 
 			{#if !showAllDetails}
 				<div class="mt-4 flex justify-center">
-					<Button on:click={() => (showAllDetails = true)} size="sm" variant="ghost"
+					<Button onclick={() => (showAllDetails = true)} size="sm" variant="ghost"
 						>{m.show_more_details()}</Button
 					>
 				</div>
@@ -177,6 +177,6 @@
 >
 	<UserGroupSelection bind:selectedGroupIds={client.allowedUserGroupIds} />
 	<div class="mt-5 flex justify-end">
-		<Button on:click={() => updateUserGroupClients(client.allowedUserGroupIds)}>{m.save()}</Button>
+		<Button onclick={() => updateUserGroupClients(client.allowedUserGroupIds)}>{m.save()}</Button>
 	</div>
 </CollapsibleCard>

frontend/src/routes/settings/admin/oidc-clients/oidc-callback-url-input.svelte

@@ -3,7 +3,7 @@
 	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';
+	import { LucideMinus, LucidePlus } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -27,14 +27,18 @@
 		<div class="flex flex-col gap-y-2">
 			{#each callbackURLs as _, i}
 				<div class="flex gap-x-2">
-					<Input data-testid={`callback-url-${i + 1}`} bind:value={callbackURLs[i]} />
+					<Input
+						aria-invalid={!!error}
+						data-testid={`callback-url-${i + 1}`}
+						bind:value={callbackURLs[i]}
+					/>
 					{#if callbackURLs.length > 1 || allowEmpty}
 						<Button
 							variant="outline"
 							size="sm"
-							on:click={() => (callbackURLs = callbackURLs.filter((_, index) => index !== i))}
+							onclick={() => (callbackURLs = callbackURLs.filter((_, index) => index !== i))}
 						>
-							<LucideMinus class="h-4 w-4" />
+							<LucideMinus class="size-4" />
 						</Button>
 					{/if}
 				</div>
@@ -42,15 +46,15 @@
 		</div>
 	</FormInput>
 	{#if error}
-		<p class="mt-1 text-sm text-red-500">{error}</p>
+		<p class="text-destructive mt-1 text-xs">{error}</p>
 	{/if}
 	<Button
 		class="mt-2"
 		variant="secondary"
 		size="sm"
-		on:click={() => (callbackURLs = [...callbackURLs, ''])}
+		onclick={() => (callbackURLs = [...callbackURLs, ''])}
 	>
-		<LucidePlus class="mr-1 h-4 w-4" />
+		<LucidePlus class="mr-1 size-4" />
 		{callbackURLs.length === 0 ? m.add() : m.add_another()}
 	</Button>
 </div>

frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte

@@ -112,7 +112,7 @@
 		<Label for="logo">{m.logo()}</Label>
 		<div class="mt-2 flex items-end gap-3">
 			{#if logoDataURL}
-				<div class="bg-muted h-32 w-32 rounded-2xl p-3">
+				<div class="bg-muted size-32 rounded-2xl p-3">
 					<img
 						class="m-auto max-h-full max-w-full object-contain"
 						src={logoDataURL}
@@ -132,7 +132,7 @@
 					</Button>
 				</FileInput>
 				{#if logoDataURL}
-					<Button variant="outline" on:click={resetLogo}>{m.remove_logo()}</Button>
+					<Button variant="outline" onclick={resetLogo}>{m.remove_logo()}</Button>
 				{/if}
 			</div>
 		</div>

frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte

@@ -8,7 +8,7 @@
 	import type { OidcClient } from '$lib/types/oidc.type';
 	import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucidePencil, LucideTrash } from 'lucide-svelte';
+	import { LucidePencil, LucideTrash } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 
 	let {
@@ -56,7 +56,7 @@
 		<Table.Cell class="w-8 font-medium">
 			{#if item.hasLogo}
 				<div class="bg-secondary rounded-2xl p-3">
-					<div class="h-8 w-8">
+					<div class="size-8">
 						<img
 							class="m-auto max-h-full max-w-full object-contain"
 							src="/api/oidc/clients/{item.id}/logo"
@@ -72,13 +72,10 @@
 				href="/settings/admin/oidc-clients/{item.id}"
 				size="sm"
 				variant="outline"
-				aria-label={m.edit()}><LucidePencil class="h-3 w-3 " /></Button
+				aria-label={m.edit()}><LucidePencil class="size-3 " /></Button
 			>
-			<Button
-				on:click={() => deleteClient(item)}
-				size="sm"
-				variant="outline"
-				aria-label={m.delete()}><LucideTrash class="h-3 w-3 text-red-500" /></Button
+			<Button onclick={() => deleteClient(item)} size="sm" variant="outline" aria-label={m.delete()}
+				><LucideTrash class="size-3 text-red-500" /></Button
 			>
 		</Table.Cell>
 	{/snippet}

frontend/src/routes/settings/admin/user-groups/+page.svelte

@@ -6,7 +6,7 @@
 	import UserGroupService from '$lib/services/user-group-service';
 	import type { UserGroupCreate } from '$lib/types/user-group.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideMinus, UserCog, UserPlus } from 'lucide-svelte';
+	import { LucideMinus, UserCog, UserPlus } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import UserGroupForm from './user-group-form.svelte';
@@ -45,17 +45,17 @@
 			<div class="flex items-center justify-between">
 				<div>
 					<Card.Title>
-						<UserPlus class="text-primary/80 h-5 w-5" />
+						<UserPlus class="text-primary/80 size-5" />
 						{m.create_user_group()}
 					</Card.Title>
 					<Card.Description>{m.create_a_new_group_that_can_be_assigned_to_users()}</Card.Description
 					>
 				</div>
 				{#if !expandAddUserGroup}
-					<Button on:click={() => (expandAddUserGroup = true)}>{m.add_group()}</Button>
+					<Button onclick={() => (expandAddUserGroup = true)}>{m.add_group()}</Button>
 				{:else}
-					<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddUserGroup = false)}>
-						<LucideMinus class="h-5 w-5" />
+					<Button class="h-8 p-3" variant="ghost" onclick={() => (expandAddUserGroup = false)}>
+						<LucideMinus class="size-5" />
 					</Button>
 				{/if}
 			</div>
@@ -74,7 +74,7 @@
 	<Card.Root>
 		<Card.Header>
 			<Card.Title>
-				<UserCog class="text-primary/80 h-5 w-5" />
+				<UserCog class="text-primary/80 size-5" />
 				{m.manage_user_groups()}
 			</Card.Title>
 		</Card.Header>

frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte

@@ -9,7 +9,7 @@
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { UserGroupCreate } from '$lib/types/user-group.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideChevronLeft } from 'lucide-svelte';
+	import { LucideChevronLeft } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import UserGroupForm from '../user-group-form.svelte';
 	import UserSelection from '../user-selection.svelte';
@@ -62,10 +62,10 @@
 
 <div class="flex items-center justify-between">
 	<a class="text-muted-foreground flex text-sm" href="/settings/admin/user-groups"
-		><LucideChevronLeft class="h-5 w-5" /> {m.back()}</a
+		><LucideChevronLeft class="size-5" /> {m.back()}</a
 	>
 	{#if !!userGroup.ldapId}
-		<Badge variant="default" class="">{m.ldap()}</Badge>
+		<Badge class="rounded-full" variant="default">{m.ldap()}</Badge>
 	{/if}
 </div>
 <Card.Root>
@@ -92,7 +92,7 @@
 		<div class="mt-5 flex justify-end">
 			<Button
 				disabled={!!userGroup.ldapId && $appConfigStore.ldapEnabled}
-				on:click={() => updateUserGroupUsers(userGroup.userIds)}>{m.save()}</Button
+				onclick={() => updateUserGroupUsers(userGroup.userIds)}>{m.save()}</Button
 			>
 		</div>
 	</Card.Content>

frontend/src/routes/settings/admin/user-groups/user-group-list.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import AdvancedTable from '$lib/components/advanced-table.svelte';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
 	import { Badge } from '$lib/components/ui/badge/index';
@@ -11,8 +12,8 @@
 	import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 	import type { UserGroup, UserGroupWithUserCount } from '$lib/types/user-group.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucidePencil, LucideTrash } from 'lucide-svelte';
-	import Ellipsis from 'lucide-svelte/icons/ellipsis';
+	import { LucidePencil, LucideTrash } from '@lucide/svelte';
+	import Ellipsis from '@lucide/svelte/icons/ellipsis';
 	import { toast } from 'svelte-sonner';
 
 	let {
@@ -64,28 +65,28 @@
 		<Table.Cell>{item.userCount}</Table.Cell>
 		{#if $appConfigStore.ldapEnabled}
 			<Table.Cell>
-				<Badge variant={item.ldapId ? 'default' : 'outline'}
+				<Badge class="rounded-full" variant={item.ldapId ? 'default' : 'outline'}
 					>{item.ldapId ? m.ldap() : m.local()}</Badge
 				>
 			</Table.Cell>
 		{/if}
 		<Table.Cell class="flex justify-end">
 			<DropdownMenu.Root>
-				<DropdownMenu.Trigger asChild let:builder>
-					<Button aria-haspopup="true" size="icon" variant="ghost" builders={[builder]}>
-						<Ellipsis class="h-4 w-4" />
+				<DropdownMenu.Trigger>
+					<Button aria-haspopup="true" size="icon" variant="ghost">
+						<Ellipsis class="size-4" />
 						<span class="sr-only">{m.toggle_menu()}</span>
 					</Button>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content align="end">
-					<DropdownMenu.Item href="/settings/admin/user-groups/{item.id}"
-						><LucidePencil class="mr-2 h-4 w-4" /> {m.edit()}</DropdownMenu.Item
+					<DropdownMenu.Item onclick={() => goto(`/settings/admin/user-groups/${item.id}}`)}
+						><LucidePencil class="mr-2 size-4" /> {m.edit()}</DropdownMenu.Item
 					>
 					{#if !item.ldapId || !$appConfigStore.ldapEnabled}
 						<DropdownMenu.Item
 							class="text-red-500 focus:!text-red-700"
-							on:click={() => deleteUserGroup(item)}
-							><LucideTrash class="mr-2 h-4 w-4" />{m.delete()}</DropdownMenu.Item
+							onclick={() => deleteUserGroup(item)}
+							><LucideTrash class="mr-2 size-4" />{m.delete()}</DropdownMenu.Item
 						>
 					{/if}
 				</DropdownMenu.Content>

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

@@ -6,7 +6,7 @@
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { UserCreate } from '$lib/types/user.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideMinus, UserPen, UserPlus } from 'lucide-svelte';
+	import { LucideMinus, UserPen, UserPlus } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import UserForm from './user-form.svelte';
@@ -45,7 +45,7 @@
 			<div class="flex items-center justify-between">
 				<div>
 					<Card.Title>
-						<UserPlus class="text-primary/80 h-5 w-5" />
+						<UserPlus class="text-primary/80 size-5" />
 						{m.create_user()}
 					</Card.Title>
 					<Card.Description
@@ -55,10 +55,10 @@
 					>
 				</div>
 				{#if !expandAddUser}
-					<Button on:click={() => (expandAddUser = true)}>{m.add_user()}</Button>
+					<Button onclick={() => (expandAddUser = true)}>{m.add_user()}</Button>
 				{:else}
-					<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddUser = false)}>
-						<LucideMinus class="h-5 w-5" />
+					<Button class="h-8 p-3" variant="ghost" onclick={() => (expandAddUser = false)}>
+						<LucideMinus class="size-5" />
 					</Button>
 				{/if}
 			</div>
@@ -77,7 +77,7 @@
 	<Card.Root>
 		<Card.Header>
 			<Card.Title>
-				<UserPen class="text-primary/80 h-5 w-5" />
+				<UserPen class="text-primary/80 size-5" />
 				{m.manage_users()}
 			</Card.Title>
 		</Card.Header>

frontend/src/routes/settings/admin/users/[id]/+page.svelte

@@ -12,7 +12,7 @@
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { UserCreate } from '$lib/types/user.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideChevronLeft } from 'lucide-svelte';
+	import { LucideChevronLeft } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import UserForm from '../user-form.svelte';
 
@@ -82,10 +82,10 @@
 
 <div class="flex items-center justify-between">
 	<a class="text-muted-foreground flex text-sm" href="/settings/admin/users"
-		><LucideChevronLeft class="h-5 w-5" /> {m.back()}</a
+		><LucideChevronLeft class="size-5" /> {m.back()}</a
 	>
 	{#if !!user.ldapId}
-		<Badge variant="default" class="">{m.ldap()}</Badge>
+		<Badge class="rounded-full" variant="default">{m.ldap()}</Badge>
 	{/if}
 </div>
 <Card.Root>
@@ -119,7 +119,7 @@
 	/>
 	<div class="mt-5 flex justify-end">
 		<Button
-			on:click={() => updateUserGroups(user.userGroupIds)}
+			onclick={() => updateUserGroups(user.userGroupIds)}
 			disabled={!!user.ldapId && $appConfigStore.ldapEnabled}
 			type="submit">{m.save()}</Button
 		>
@@ -133,6 +133,6 @@
 >
 	<CustomClaimsInput bind:customClaims={user.customClaims} />
 	<div class="mt-5 flex justify-end">
-		<Button on:click={updateCustomClaims} type="submit">{m.save()}</Button>
+		<Button onclick={updateCustomClaims} type="submit">{m.save()}</Button>
 	</div>
 </CollapsibleCard>

frontend/src/routes/settings/admin/users/user-list.svelte

@@ -19,8 +19,8 @@
 		LucideTrash,
 		LucideUserCheck,
 		LucideUserX
-	} from 'lucide-svelte';
-	import Ellipsis from 'lucide-svelte/icons/ellipsis';
+	} from '@lucide/svelte';
+	import Ellipsis from '@lucide/svelte/icons/ellipsis';
 	import { toast } from 'svelte-sonner';
 
 	let {
@@ -116,16 +116,16 @@
 		<Table.Cell>{item.email}</Table.Cell>
 		<Table.Cell>{item.username}</Table.Cell>
 		<Table.Cell>
-			<Badge variant="outline">{item.isAdmin ? m.admin() : m.user()}</Badge>
+			<Badge class="rounded-full" variant="outline">{item.isAdmin ? m.admin() : m.user()}</Badge>
 		</Table.Cell>
 		<Table.Cell>
-			<Badge variant={item.disabled ? 'destructive' : 'default'}>
+			<Badge class="rounded-full" variant={item.disabled ? 'destructive' : 'default'}>
 				{item.disabled ? m.disabled() : m.enabled()}
 			</Badge>
 		</Table.Cell>
 		{#if $appConfigStore.ldapEnabled}
 			<Table.Cell>
-				<Badge variant={item.ldapId ? 'default' : 'outline'}
+				<Badge class="rounded-full" variant={item.ldapId ? 'default' : 'outline'}
 					>{item.ldapId ? m.ldap() : m.local()}</Badge
 				>
 			</Table.Cell>
@@ -133,24 +133,24 @@
 		<Table.Cell>
 			<DropdownMenu.Root>
 				<DropdownMenu.Trigger class={buttonVariants({ variant: 'ghost', size: 'icon' })}>
-					<Ellipsis class="h-4 w-4" />
+					<Ellipsis class="size-4" />
 					<span class="sr-only">{m.toggle_menu()}</span>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content align="end">
 					<DropdownMenu.Item onclick={() => (userIdToCreateOneTimeLink = item.id)}
-						><LucideLink class="mr-2 h-4 w-4" />{m.login_code()}</DropdownMenu.Item
+						><LucideLink class="mr-2 size-4" />{m.login_code()}</DropdownMenu.Item
 					>
 					<DropdownMenu.Item onclick={() => goto(`/settings/admin/users/${item.id}`)}
-						><LucidePencil class="mr-2 h-4 w-4" /> {m.edit()}</DropdownMenu.Item
+						><LucidePencil class="mr-2 size-4" /> {m.edit()}</DropdownMenu.Item
 					>
 					{#if !item.ldapId || !$appConfigStore.ldapEnabled}
 						{#if item.disabled}
 							<DropdownMenu.Item onclick={() => enableUser(item)}
-								><LucideUserCheck class="mr-2 h-4 w-4" />{m.enable()}</DropdownMenu.Item
+								><LucideUserCheck class="mr-2 size-4" />{m.enable()}</DropdownMenu.Item
 							>
 						{:else}
 							<DropdownMenu.Item onclick={() => disableUser(item)}
-								><LucideUserX class="mr-2 h-4 w-4" />{m.disable()}</DropdownMenu.Item
+								><LucideUserX class="mr-2 size-4" />{m.disable()}</DropdownMenu.Item
 							>
 						{/if}
 					{/if}
@@ -158,7 +158,7 @@
 						<DropdownMenu.Item
 							class="text-red-500 focus:!text-red-700"
 							onclick={() => deleteUser(item)}
-							><LucideTrash class="mr-2 h-4 w-4" />{m.delete()}</DropdownMenu.Item
+							><LucideTrash class="mr-2 size-4" />{m.delete()}</DropdownMenu.Item
 						>
 					{/if}
 				</DropdownMenu.Content>