npm-dep: update

2026-07-29 00:42:41 -04:00 · 2024-04-11 21:58:46 +02:00
parent 0aaaf92bd4
commit 97e626f441
21 changed files with 2461 additions and 938 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -3,6 +3,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
+	"endOfLine": "lf"
 }
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,25 +15,29 @@
 		"typesafe-i18n": "typesafe-i18n"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "^2.0.3",
-		"@sveltejs/kit": "^1.30.4",
+		"@eslint/js": "^9.0.0",
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/kit": "^2.5.5",
+		"@sveltejs/vite-plugin-svelte": "^3.1.0",
 		"@typescript-eslint/eslint-plugin": "^7.6.0",
 		"@typescript-eslint/parser": "^7.6.0",
 		"autoprefixer": "^10.4.19",
 		"daisyui": "^4.10.1",
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
+		"eslint-plugin-svelte": "^2.37.0",
 		"husky": "^9.0.11",
 		"postcss": "^8.4.38",
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
+		"prettier-plugin-tailwindcss": "^0.5.13",
 		"svelte": "^4.2.13",
 		"svelte-check": "^3.6.9",
 		"tailwindcss": "^3.4.3",
 		"tslib": "^2.6.2",
 		"typescript": "^5.4.5",
-		"vite": "^4.5.3"
+		"typescript-eslint": "^7.6.0",
+		"vite": "^5.2.8"
 	},
 	"type": "module",
 	"lint-staged": {
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/src/lib/components/DeviceCard.svelte
+++ b/frontend/src/lib/components/DeviceCard.svelte
@@ -121,16 +121,16 @@
 	}
 </script>

-<div class="card bg-base-300 shadow-md rounded-3xl" transition:scale={{ delay: 0, duration: 200 }}>
+<div class="card rounded-3xl bg-base-300 shadow-md" transition:scale={{ delay: 0, duration: 200 }}>
 	<div class="card-body p-6">
 		{#if device.link.toString() !== ''}
 			<a href={device.link.toString()} target="_blank">
-				<h1 class="card-title link">{device.name}</h1>
+				<h1 class="link card-title">{device.name}</h1>
 			</a>
 		{:else}
 			<h1 class="card-title">{device.name}</h1>
 		{/if}
-		<ul class="menu bg-base-200 rounded-box">
+		<ul class="menu rounded-box bg-base-200">
 			<!-- TODO: change to nic array once backend supports it -->
 			<DeviceCardNic {device} />
 		</ul>
@@ -171,14 +171,14 @@
 				{/if}
 			</span>
 			{#if moreButtons.filter((btn) => btn.requires).length > 0}
-				<div class="dropdown dropdown-top dropdown-end bg-base-300 ms-auto">
+				<div class="dropdown dropdown-end dropdown-top ms-auto bg-base-300">
 					<label tabindex="-1" class="btn btn-sm m-1" for="more-{device.id}"
 						>{$LL.device.card_btn_more()}</label
 					>
 					<ul
 						id="more-{device.id}"
 						tabindex="-1"
-						class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-fit"
+						class="menu dropdown-content z-[1] w-fit rounded-box bg-base-100 p-2 shadow"
 					>
 						{#each moreButtons as btn}
 							{#if btn.requires}
--- a/frontend/src/lib/components/DeviceCardNic.svelte
+++ b/frontend/src/lib/components/DeviceCardNic.svelte
@@ -105,7 +105,7 @@

 <li class="tooltip" class:disabled data-tip={hoverText}>
 	<div
-		class="flex items-start p-2 gap-4"
+		class="flex items-start gap-4 p-2"
 		on:click={disabled ? null : handleClick}
 		on:keydown={disabled ? null : handleClick}
 		role="none"
@@ -161,7 +161,7 @@

 <dialog class="modal" bind:this={modalWake}>
 	<div class="modal-box">
-		<h3 class="font-bold text-lg">
+		<h3 class="text-lg font-bold">
 			{$LL.device.modal_confirm_wake_title({ device: device.name })}
 		</h3>
 		<p class="py-4">{$LL.device.modal_confirm_wake_desc({ device: device.name })}</p>
@@ -176,7 +176,7 @@

 <dialog class="modal" bind:this={modalShutdown}>
 	<div class="modal-box">
-		<h3 class="font-bold text-lg">
+		<h3 class="text-lg font-bold">
 			{$LL.device.modal_confirm_shutdown_title({ device: device.name })}
 		</h3>
 		<p class="py-4">{$LL.device.modal_confirm_shutdown_desc({ device: device.name })}</p>
--- a/frontend/src/lib/components/DeviceForm.svelte
+++ b/frontend/src/lib/components/DeviceForm.svelte
@@ -172,7 +172,7 @@
 	<div class="card w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.general()}</h2>
-			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
 				<div class="form-control w-full max-w-xs">
 					<label class="label" for="device-name">
 						<div class="label-text">
@@ -237,30 +237,30 @@
 						required
 					/>
 				</div>
-				<span class="badge text-error self-center">* {$LL.device.general_required_field()}</span>
+				<span class="badge self-center text-error">* {$LL.device.general_required_field()}</span>
 			</div>
 		</div>
 	</div>
-	<div class="card w-full bg-base-300 shadow-xl mt-6">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.ports()}</h2>
 			<p class="my-2">{$LL.device.ports_desc()}</p>
 			<div class="form-control w-full">
-				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 					<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
 					{#each device.expand.ports as _, index}
 						<DeviceFormPort bind:device {index} />
 					{/each}
 				</div>
 				<button
-					class="btn max-w-xs btn-primary mt-4"
+					class="btn btn-primary mt-4 max-w-xs"
 					on:click={() => createEmptyPort()}
 					type="button">{$LL.device.ports_add_new()}</button
 				>
 			</div>
 		</div>
 	</div>
-	<div class="card w-full bg-base-300 shadow-xl mt-6">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.link()}</h2>
 			<p class="my-2">
@@ -276,7 +276,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="card w-full bg-base-300 shadow-xl mt-6">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.ping()}</h2>
 			<p class="my-2">
@@ -291,13 +291,13 @@
 					id="ping-cmd"
 					type="text"
 					placeholder="$:"
-					class="input w-full max-w-xs mb-2"
+					class="input mb-2 w-full max-w-xs"
 					bind:value={device.ping_cmd}
 				/>
 			</div>
 		</div>
 	</div>
-	<div class="card w-full bg-base-300 shadow-xl mt-6">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.wake()}</h2>
 			<p class="my-2">
@@ -313,12 +313,12 @@
 					id="wake-cmd"
 					type="text"
 					placeholder="$:"
-					class="input w-full max-w-xs mb-2"
+					class="input mb-2 w-full max-w-xs"
 					bind:value={device.wake_cmd}
 				/>
 			</div>
 			<div class="form-control flex flex-row flex-wrap gap-4">
-				<div class="flex flex-row gap-2 items-center">
+				<div class="flex flex-row items-center gap-2">
 					<input
 						id="wake-confirm"
 						type="checkbox"
@@ -365,7 +365,7 @@
 		</div>
 	</div>

-	<div class="card w-full bg-base-300 shadow-xl mt-6">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">Sleep-On-LAN</h2>
 			<p class="mt-2">
@@ -379,10 +379,10 @@
 				<!-- eslint-disable svelte/no-at-html-tags -->
 				{@html $LL.device.sol_desc3()}
 			</p>
-			<div class="flex flex-row flex-wrap gap-4 items-end mt-4">
+			<div class="mt-4 flex flex-row flex-wrap items-end gap-4">
 				<div>
 					<div class="form-control flex flex-row flex-wrap gap-4">
-						<div class="flex flex-row gap-2 items-center">
+						<div class="flex flex-row items-center gap-2">
 							<input
 								id="sol-enable"
 								type="checkbox"
@@ -418,7 +418,7 @@
 				{#if device.sol_enabled}
 					<div>
 						<div class="form-control flex flex-row flex-wrap gap-4">
-							<div class="flex flex-row gap-2 items-center">
+							<div class="flex flex-row items-center gap-2">
 								<input
 									id="sol-auth"
 									type="checkbox"
@@ -474,7 +474,7 @@
 		</div>
 	</div>

-	<div class="card w-full bg-base-300 shadow-xl mt-6">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.shutdown()}</h2>
 			<p class="my-2">
@@ -482,13 +482,13 @@
 				{@html $LL.device.shutdown_desc()}
 			</p>
 			<p class="my-2 font-bold">{$LL.device.shutdown_examples()}</p>
-			<div class="mockup-code text-sm min-w-0 max-w-fit">
+			<div class="mockup-code min-w-0 max-w-fit text-sm">
 				<pre data-prefix="#"><code>{$LL.device.shutdown_examples_windows()}</code></pre>
 				<pre data-prefix="$" class="text-warning"><code
 						>net rpc shutdown -I 192.168.1.13 -U "user%password"</code
 					></pre>
 			</div>
-			<div class="mockup-code text-sm min-w-0 max-w-fit">
+			<div class="mockup-code min-w-0 max-w-fit text-sm">
 				<pre data-prefix="#"><code>{$LL.device.shutdown_examples_linux()}</code></pre>
 				<pre data-prefix="$" class="text-warning"><code
 						>sshpass -p password ssh -o "StrictHostKeyChecking=no" user@192.168.1.13 "sudo poweroff"</code
@@ -502,12 +502,12 @@
 					id="shutdown-cmd"
 					type="text"
 					placeholder="$:"
-					class="input w-full max-w-xs mb-2"
+					class="input mb-2 w-full max-w-xs"
 					bind:value={device.shutdown_cmd}
 				/>
 			</div>
 			<div class="form-control flex flex-row flex-wrap gap-4">
-				<div class="flex flex-row gap-2 items-center">
+				<div class="flex flex-row items-center gap-2">
 					<input
 						id="shutdown-confirm"
 						type="checkbox"
@@ -556,7 +556,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="card w-full bg-base-300 shadow-xl mt-6">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.password()}</h2>
 			<p class="my-2">
@@ -574,7 +574,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="card w-full bg-base-300 shadow-xl mt-6">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.groups()}</h2>
 			<p class="my-2">
@@ -585,13 +585,13 @@
 					<div class="join">
 						<div class=" tooltip" data-tip="Delete">
 							<button
-								class="join-item btn btn-error"
+								class="btn btn-error join-item"
 								type="button"
 								on:click={() => deleteGroup(group)}><Fa icon={faX} /></button
 							>
 						</div>
 						<div
-							class="btn bg-base-100 hover:bg-base-200 join-item"
+							class="btn join-item bg-base-100 hover:bg-base-200"
 							on:click={() => toggleGroup(group.id)}
 							role="none"
 						>
@@ -607,7 +607,7 @@
 			</div>
 			<div class="join max-w-xs">
 				<input
-					class="input input-bordered join-item w-full"
+					class="input join-item input-bordered w-full"
 					placeholder={$LL.device.groups_placeholder()}
 					type="text"
 					bind:value={newGroup}
@@ -625,7 +625,7 @@
 			>
 			<dialog class="modal" bind:this={deleteModal}>
 				<form method="dialog" class="modal-box">
-					<h3 class="font-bold text-lg">{$LL.users.confirm_delete_title()}</h3>
+					<h3 class="text-lg font-bold">{$LL.users.confirm_delete_title()}</h3>
 					<p class="py-4">{$LL.users.confirm_delete_desc({ username: device.name })}</p>
 					<div class="modal-action">
 						<button class="btn">{$LL.buttons.cancel()}</button>
--- a/frontend/src/lib/components/DeviceFormPort.svelte
+++ b/frontend/src/lib/components/DeviceFormPort.svelte
@@ -74,7 +74,7 @@
 			</div>
 			<div class="card-actions justify-end">
 				<button
-					class="btn btn-xs btn-outline btn-error"
+					class="btn btn-outline btn-error btn-xs"
 					on:click={() => deletePort(device.expand.ports[index])}
 					type="button"><Fa icon={faTrash} />{$LL.buttons.delete()}</button
 				>
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -99,7 +99,7 @@
 			<ul
 				id="mobile-menu"
 				tabindex="-1"
-				class="menu dropdown-content mt-3 z-[1] p-2 gap-1 shadow bg-base-300 rounded-box w-max"
+				class="menu dropdown-content z-[1] mt-3 w-max gap-1 rounded-box bg-base-300 p-2 shadow"
 			>
 				{#if $settingsPub?.website_title}
 					<div class="menu-title">
@@ -140,14 +140,14 @@
 								{#each availableThemes as theme}
 									<li>
 										<button
-											class="outline-base-content overflow-hidden rounded-lg text-left"
+											class="overflow-hidden rounded-lg text-left outline-base-content"
 											data-set-theme={theme}
 											on:click={() => (activeTheme = theme)}
 											on:keydown={() => (activeTheme = theme)}
 										>
 											<div
 												data-theme={theme}
-												class="bg-base-100 text-base-content rounded w-full cursor-pointer font-sans"
+												class="w-full cursor-pointer rounded bg-base-100 font-sans text-base-content"
 											>
 												<div class="grid grid-cols-5 grid-rows-3">
 													<div
@@ -159,10 +159,10 @@
 														/>
 														<div class="flex-grow text-sm">{theme}</div>
 														<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
-															<div class="bg-primary w-2 rounded" />
-															<div class="bg-secondary w-2 rounded" />
-															<div class="bg-accent w-2 rounded" />
-															<div class="bg-neutral w-2 rounded" />
+															<div class="w-2 rounded bg-primary" />
+															<div class="w-2 rounded bg-secondary" />
+															<div class="w-2 rounded bg-accent" />
+															<div class="w-2 rounded bg-neutral" />
 														</div>
 													</div>
 												</div>
@@ -176,7 +176,7 @@
 				</li>
 			</ul>
 		</div>
-		<a class="btn btn-ghost normal-case text-xl px-2" href="/">
+		<a class="btn btn-ghost px-2 text-xl normal-case" href="/">
 			<img
 				src={$settingsPub?.id && $settingsPub?.favicon
 					? `${backendUrl}api/files/settings_public/${$settingsPub?.id}/${$settingsPub?.favicon}`
@@ -191,7 +191,7 @@
 		{#if $settingsPub?.website_title}
 			<span class="px-2">{$settingsPub?.website_title}</span>
 		{/if}
-		<ul class="menu menu-horizontal px-1 gap-1">
+		<ul class="menu menu-horizontal gap-1 px-1">
 			<li>
 				<a href="/" class="p-2" class:active={$page.url.pathname === '/'}
 					><Fa icon={faHome} />{$LL.home.page_title()}</a
@@ -211,35 +211,35 @@
 			{/if}
 		</ul>
 		<div class="dropdown dropdown-end">
-			<div tabindex="-1" class="btn normal-case btn-ghost">
+			<div tabindex="-1" class="btn btn-ghost normal-case">
 				<Fa icon={faSwatchbook} />
 				<span class="font-normal">{$LL.navbar.theme()}</span>
 				<Fa icon={faChevronDown} />
 			</div>
 			<div
-				class="dropdown-content bg-base-200 text-base-content rounded-box h-fit max-h-96 w-56 overflow-y-auto shadow mt-3 z-[1]"
+				class="dropdown-content z-[1] mt-3 h-fit max-h-96 w-56 overflow-y-auto rounded-box bg-base-200 text-base-content shadow"
 			>
 				<div class="grid grid-cols-1 gap-3 p-3" tabindex="-1">
 					{#each availableThemes as theme}
 						<button
-							class="outline-base-content overflow-hidden rounded-lg text-left"
+							class="overflow-hidden rounded-lg text-left outline-base-content"
 							data-set-theme={theme}
 							on:click={() => (activeTheme = theme)}
 							on:keydown={() => (activeTheme = theme)}
 						>
 							<div
 								data-theme={theme}
-								class="bg-base-100 text-base-content w-full cursor-pointer font-sans"
+								class="w-full cursor-pointer bg-base-100 font-sans text-base-content"
 							>
 								<div class="grid grid-cols-5 grid-rows-3">
 									<div class="col-span-5 row-span-3 row-start-1 flex items-center gap-2 px-4 py-3">
 										<Fa icon={faCheck} class={activeTheme === theme ? 'visible' : 'invisible'} />
 										<div class="flex-grow text-sm">{theme}</div>
 										<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
-											<div class="bg-primary w-2 rounded" />
-											<div class="bg-secondary w-2 rounded" />
-											<div class="bg-accent w-2 rounded" />
-											<div class="bg-neutral w-2 rounded" />
+											<div class="w-2 rounded bg-primary" />
+											<div class="w-2 rounded bg-secondary" />
+											<div class="w-2 rounded bg-accent" />
+											<div class="w-2 rounded bg-neutral" />
 										</div>
 									</div>
 								</div>
@@ -250,7 +250,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="justify-end ms-auto">
+	<div class="ms-auto justify-end">
 		{#if $pocketbase.authStore?.model !== null}
 			{#if $pocketbase.authStore.isAdmin || $permission.create}
 				<a class="btn btn-success me-4" href="/device/new">
@@ -259,14 +259,14 @@
 				</a>
 			{/if}
 			<div class="dropdown dropdown-end">
-				<label tabindex="-1" class="btn btn-ghost btn-circle avatar" for="avatar">
+				<label tabindex="-1" class="avatar btn btn-circle btn-ghost" for="avatar">
 					<div class="w-10 rounded-full" id="avatar">
 						<img src="{backendUrl}_/images/avatars/avatar{avatar}.svg" alt="Avatar {avatar}" />
 					</div>
 				</label>
 				<ul
 					tabindex="-1"
-					class="menu dropdown-content mt-3 z-[1] p-2 shadow bg-base-300 rounded-box"
+					class="menu dropdown-content z-[1] mt-3 rounded-box bg-base-300 p-2 shadow"
 				>
 					<li class="menu-title">
 						{$pocketbase.authStore.isAdmin
--- a/frontend/src/lib/components/NetworkScan.svelte
+++ b/frontend/src/lib/components/NetworkScan.svelte
@@ -116,13 +116,13 @@
 </script>

 {#if $settingsPriv}
-	<div class="card w-full bg-base-300 shadow-xl mt-6">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.tabs[1]()}</h2>
 			<p class="my-2">
 				{$LL.device.network_scan_desc()}
 			</p>
-			<div class="flex flex-row flex-wrap gap-4 items-end">
+			<div class="flex flex-row flex-wrap items-end gap-4">
 				<form on:submit|preventDefault={saveSettings}>
 					<label class="label" for="scan-range">
 						<span class="label-text">{$LL.device.network_scan_ip_range()}</span>
@@ -130,7 +130,7 @@
 					<div class="join max-w-xs">
 						<input
 							id="scan-range"
-							class="input input-bordered join-item w-full"
+							class="input join-item input-bordered w-full"
 							type="text"
 							placeholder="192.168.1.0/24"
 							bind:value={scanRange}
@@ -192,7 +192,7 @@
 								</div>
 								<div class="ms-auto">
 									<button
-										class="btn btn-sm btn-success"
+										class="btn btn-success btn-sm"
 										on:click={(e) => {
 											addSingle(device);
 											e.currentTarget.disabled = true;
--- a/frontend/src/lib/components/PageLoading.svelte
+++ b/frontend/src/lib/components/PageLoading.svelte
@@ -1,3 +1,3 @@
-<div class="container max-w-lg mx-auto text-center">
+<div class="container mx-auto max-w-lg text-center">
 	<span class="loading loading-dots loading-lg" />
 </div>
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -102,7 +102,7 @@
 <Toaster position="bottom-center" {toastOptions} />

 <Transition url={$page.url}>
-	<div class="container mx-auto p-2 mb-4">
+	<div class="container mx-auto mb-4 p-2">
 		<slot />
 	</div>
 </Transition>
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -105,7 +105,7 @@
 				<div class="join-item">
 					<div class="join">
 						<button
-							class="join-item btn"
+							class="btn join-item"
 							type="button"
 							on:click={() => (orderByGroups = !orderByGroups)}
 							>{$LL.home.order_groups()}
@@ -118,7 +118,7 @@
 					</div>
 				</div>
 				<input
-					class="join-item btn"
+					class="btn join-item"
 					type="radio"
 					name="order"
 					aria-label={$LL.home.order_name()}
@@ -126,7 +126,7 @@
 					value="name"
 				/>
 				<input
-					class="join-item btn"
+					class="btn join-item"
 					type="radio"
 					name="order"
 					aria-label={$LL.home.order_ip()}
@@ -135,7 +135,7 @@
 				/>
 			{/if}
 			<div class="tooltip" data-tip={$LL.home.order_tooltip()}>
-				<button class="join-item btn" on:click={() => (orderExpanded = !orderExpanded)}>
+				<button class="btn join-item" on:click={() => (orderExpanded = !orderExpanded)}>
 					{#if orderExpanded}
 						<Fa icon={faChevronCircleRight} size="lg" />
 					{:else}
@@ -157,7 +157,7 @@
 			{#if Object.keys(devicesWithGroup).length > 0}
 				{#each Object.keys(devicesWithGroup).sort( (a, b) => a.localeCompare( b, undefined, { numeric: true, sensitivity: 'base' } ) ) as group}
 					<div>
-						<h1 class="text-2xl font-bold mb-3">{group}</h1>
+						<h1 class="mb-3 text-2xl font-bold">{group}</h1>
 						<div class={gridClass}>
 							{#each devicesWithGroup[group].sort( (a, b) => a[orderBy].localeCompare( b[orderBy], undefined, { numeric: true, sensitivity: 'base' } ) ) as device}
 								<DeviceCard {device} />
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -130,10 +130,10 @@
 	}
 </script>

-<h1 class="text-3xl font-bold mb-8">{$LL.account.page_title()}</h1>
+<h1 class="mb-8 text-3xl font-bold">{$LL.account.page_title()}</h1>
 <div class="card w-full bg-base-300 shadow-xl">
 	<div class="card-body">
-		<div class="flex flex-row gap-4 items-center">
+		<div class="flex flex-row items-center gap-4">
 			<div class="avatar">
 				<div class="w-16 rounded-full">
 					<!-- svelte static build will fail, because the image gets served from pocketbase
@@ -161,10 +161,10 @@
 			</div>
 		</div>
 		<form on:submit|preventDefault={saveUser}>
-			<h2 class="card-title mt-4 mb-2">{$LL.account.avatar_title()}</h2>
+			<h2 class="card-title mb-2 mt-4">{$LL.account.avatar_title()}</h2>
 			<div class="flex flex-row flex-wrap gap-4">
 				{#each [...Array(10).keys()] as i}
-					<div class="avatar btn btn-ghost btn-circle">
+					<div class="avatar btn btn-circle btn-ghost">
 						<div
 							class="w-11 rounded-full"
 							class:ring={newAvatar !== undefined
@@ -194,7 +194,7 @@
 					</div>
 				{/each}
 			</div>
-			<h2 class="card-title mt-4 mb-2">{$LL.account.language_title()}</h2>
+			<h2 class="card-title mb-2 mt-4">{$LL.account.language_title()}</h2>
 			<select class="select select-bordered w-full max-w-xs" bind:value={selectedLanguage}>
 				<option value="auto" selected={localStorageLang === null}
 					>🌐 {$LL.account.language_option_auto()}</option
@@ -214,7 +214,7 @@
 		</form>
 	</div>
 </div>
-<div class="card w-full bg-base-300 shadow-xl mt-6">
+<div class="card mt-6 w-full bg-base-300 shadow-xl">
 	<div class="card-body">
 		<h2 class="card-title">{$LL.account.change_password_title()}</h2>
 		<p>{$LL.account.change_password_body()}</p>
--- a/frontend/src/routes/device/[id]/+page.svelte
+++ b/frontend/src/routes/device/[id]/+page.svelte
@@ -37,10 +37,10 @@
 {#await getDevice()}
 	<PageLoading />
 {:then device}
-	<h1 class="text-3xl font-bold mb-8 sm:break-all">{device.name}</h1>
+	<h1 class="mb-8 text-3xl font-bold sm:break-all">{device.name}</h1>
 	<DeviceForm {device} />
 {:catch err}
-	<div class="container max-w-lg mx-auto">
+	<div class="container mx-auto max-w-lg">
 		{err}
 	</div>
 {/await}
--- a/frontend/src/routes/device/new/+page.svelte
+++ b/frontend/src/routes/device/new/+page.svelte
@@ -43,9 +43,9 @@
 	let activeTab = 'manual';
 </script>

-<h1 class="text-3xl font-bold mb-8">{$LL.device.page_title()}</h1>
-<div class="flex justify-center mb-6">
-	<ul class="menu menu-horizontal bg-base-300 rounded-box gap-1">
+<h1 class="mb-8 text-3xl font-bold">{$LL.device.page_title()}</h1>
+<div class="mb-6 flex justify-center">
+	<ul class="menu menu-horizontal gap-1 rounded-box bg-base-300">
 		{#each tabs as tab}
 			{#if tab.show}
 				<li>
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -56,10 +56,10 @@
 </script>

 <div class="mt-10 flex items-center justify-center">
-	<div class="card bg-base-300 shadow-xl w-full max-w-lg">
+	<div class="card w-full max-w-lg bg-base-300 shadow-xl">
 		<div class="card-body">
 			{#if $settingsPub?.website_title}
-				<h1 class="text-xl text-center font-bold">{$settingsPub?.website_title}</h1>
+				<h1 class="text-center text-xl font-bold">{$settingsPub?.website_title}</h1>
 			{/if}
 			<div class="flex flex-row gap-4">
 				<figure class="w-16"><img src="/gopher.svg" alt="Gopher" /></figure>
@@ -81,7 +81,7 @@
 				</label>
 				<label class="relative block">
 					<div
-						class="absolute top-1/2 -translate-y-1/2 right-4 cursor-pointer"
+						class="absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer"
 						role="none"
 						on:click={() => toggleVisibility(inputPassword)}
 						on:keydown={() => toggleVisibility(inputPassword)}
@@ -106,9 +106,9 @@
 						<ul
 							id="other-providers"
 							tabindex="-1"
-							class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-56"
+							class="menu dropdown-content z-[1] w-56 rounded-box bg-base-200 p-2 shadow"
 						>
-							<li class="menu-title flex flex-row gap-2 items-center">
+							<li class="menu-title flex flex-row items-center gap-2">
 								{$LL.login.menu_title_auth_providers()}
 								<a href="https://github.com/seriousm4x/UpSnap/wiki/Auth-providers" target="_blank"
 									><Fa icon={faQuestionCircle} /></a
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -90,9 +90,9 @@
 {#if settingsPubClone === undefined || settingsPrivClone === undefined}
 	<PageLoading />
 {:else}
-	<h1 class="text-3xl font-bold mb-8">{$LL.settings.page_title()}</h1>
+	<h1 class="mb-8 text-3xl font-bold">{$LL.settings.page_title()}</h1>
 	<form on:submit|preventDefault={save}>
-		<div class="card w-full bg-base-300 shadow-xl mt-6">
+		<div class="card mt-6 w-full bg-base-300 shadow-xl">
 			<div class="card-body">
 				<h2 class="card-title">{$LL.settings.ping_interval_title()}</h2>
 				<p class="mt-2">
@@ -106,7 +106,7 @@
 					<!-- eslint-disable svelte/no-at-html-tags -->
 					{@html $LL.settings.ping_interval_desc2()}
 				</p>
-				<div class="form-control w-full mt-2">
+				<div class="form-control mt-2 w-full">
 					<input
 						type="text"
 						placeholder="e.g. '@every 5s' or '@every 1m'"
@@ -122,7 +122,7 @@
 					<label class="label cursor-pointer gap-2">
 						<input
 							type="checkbox"
-							class="checkbox checkbox-primary"
+							class="checkbox-primary checkbox"
 							bind:checked={settingsPrivClone.lazy_ping}
 						/>
 						<span class="label-text">{$LL.settings.lazy_ping_enable()}</span>
@@ -130,7 +130,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="card w-full bg-base-300 shadow-xl mt-6">
+		<div class="card mt-6 w-full bg-base-300 shadow-xl">
 			<div class="card-body">
 				<h2 class="card-title">{$LL.settings.website_title_title()}</h2>
 				<p class="my-2">{$LL.settings.website_title_desc()}</p>
@@ -144,7 +144,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="card w-full bg-base-300 shadow-xl mt-6">
+		<div class="card mt-6 w-full bg-base-300 shadow-xl">
 			<div class="card-body">
 				<h2 class="card-title">{$LL.settings.icon_title()}</h2>
 				<p class="my-2">
@@ -163,7 +163,7 @@
 						bind:this={faviconPreview}
 					/>
 				</div>
-				<div class="form-control w-full max-w-md flex flex-row gap-4">
+				<div class="form-control flex w-full max-w-md flex-row gap-4">
 					<input
 						type="file"
 						class="file-input w-full max-w-xs"
@@ -178,12 +178,12 @@
 				</div>
 			</div>
 		</div>
-		<div class="card-actions justify-end mt-6">
+		<div class="card-actions mt-6 justify-end">
 			<button class="btn btn-success" type="submit"><Fa icon={faSave} />{$LL.buttons.save()}</button
 			>
 		</div>
 	</form>
-	<div class="container mx-auto text-center mt-6">
+	<div class="container mx-auto mt-6 text-center">
 		{#if PUBLIC_VERSION === ''}
 			{$LL.settings.upsnap_version()}: (untracked)
 		{:else}
--- a/frontend/src/routes/users/+page.svelte
+++ b/frontend/src/routes/users/+page.svelte
@@ -181,10 +181,10 @@
 {#await Promise.all([getUsersPromise, getPermissionsPromise, getDevicesPromise])}
 	<PageLoading />
 {:then}
-	<h1 class="text-3xl font-bold mb-8">{$LL.users.page_title()}</h1>
+	<h1 class="mb-8 text-3xl font-bold">{$LL.users.page_title()}</h1>
 	{#each users as user, index}
 		<form on:submit|preventDefault={() => save(user)}>
-			<div class="card w-full bg-base-300 shadow-xl mt-6">
+			<div class="card mt-6 w-full bg-base-300 shadow-xl">
 				<div class="card-body gap-4">
 					<h2 class="card-title">
 						<label tabindex="-1" class="avatar" for="avatar{index}">
@@ -219,16 +219,16 @@
 									<a href="/device/new" class="link">{$LL.users.create_new_device()}</a>
 								</p>
 							{:else}
-								<div class="grid grid-cols-4 md:grid-cols-5 gap-4 justify-items-center">
+								<div class="grid grid-cols-4 justify-items-center gap-4 md:grid-cols-5">
 									<div class="font-bold md:col-start-2">{$LL.users.read()}</div>
 									<div class="font-bold">{$LL.users.update()}</div>
 									<div class="font-bold">{$LL.users.delete()}</div>
 									<div class="font-bold">{$LL.users.power()}</div>
 									{#each devices as device}
-										<hr class="col-span-full w-full border-b-1 opacity-30 border-neutral" />
+										<hr class="border-b-1 col-span-full w-full border-neutral opacity-30" />
 										{#each permissions.filter((perm) => perm.user === user.id) as permission}
 											<div
-												class="flex flex-row flex-wrap gap-2 place-self-start break-all col-span-full md:col-span-1"
+												class="col-span-full flex flex-row flex-wrap gap-2 place-self-start break-all md:col-span-1"
 											>
 												<span class="font-bold">{device.name}</span>
 												<span class="badge hidden md:block">{device.ip}</span>
@@ -260,7 +260,7 @@
 										{/each}
 									{/each}
 									<button
-										class="btn btn-sm btn-neutral md:col-start-2"
+										class="btn btn-neutral btn-sm md:col-start-2"
 										type="button"
 										on:click={() => {
 											toggleAllPermissions(user, 'read');
@@ -271,7 +271,7 @@
 										/></button
 									>
 									<button
-										class=" btn btn-sm btn-neutral"
+										class=" btn btn-neutral btn-sm"
 										type="button"
 										on:click={() => {
 											toggleAllPermissions(user, 'update');
@@ -282,7 +282,7 @@
 										/></button
 									>
 									<button
-										class=" btn btn-sm btn-neutral"
+										class=" btn btn-neutral btn-sm"
 										type="button"
 										on:click={() => {
 											toggleAllPermissions(user, 'delete');
@@ -293,7 +293,7 @@
 										/></button
 									>
 									<button
-										class=" btn btn-sm btn-neutral"
+										class=" btn btn-neutral btn-sm"
 										type="button"
 										on:click={() => {
 											toggleAllPermissions(user, 'power');
@@ -304,18 +304,18 @@
 										/></button
 									>
 								</div>
-								<div class="mt-4 flex flex-row flex-wrap gap-4 justify-end"></div>
+								<div class="mt-4 flex flex-row flex-wrap justify-end gap-4"></div>
 							{/if}
 						</div>
 					</div>
-					<div class="justify-end join">
+					<div class="join justify-end">
 						<button
-							class="join-item btn btn-error"
+							class="btn btn-error join-item"
 							type="button"
 							on:click={() => deleteModal[index].showModal()}
 							><Fa icon={faTrash} />{$LL.buttons.delete()}</button
 						>
-						<button class="join-item btn btn-success" type="submit"
+						<button class="btn btn-success join-item" type="submit"
 							><Fa icon={faSave} />{$LL.buttons.save()}</button
 						>
 					</div>
@@ -324,7 +324,7 @@
 		</form>
 		<dialog class="modal" bind:this={deleteModal[index]}>
 			<form method="dialog" class="modal-box">
-				<h3 class="font-bold text-lg">{$LL.users.confirm_delete_title()}</h3>
+				<h3 class="text-lg font-bold">{$LL.users.confirm_delete_title()}</h3>
 				<p class="py-4">{$LL.users.confirm_delete_desc({ username: user.username })}</p>
 				<div class="modal-action">
 					<button class="btn">{$LL.buttons.cancel()}</button>
@@ -335,7 +335,7 @@
 			</form>
 		</dialog>
 	{/each}
-	<div class="card w-full bg-base-300 shadow-xl mt-6">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.users.create_new_user()}</h2>
 			<form on:submit|preventDefault={createUser}>
@@ -393,7 +393,7 @@
 						/>
 					</div>
 				</div>
-				<span class="badge text-error mt-4 self-center">* {$LL.users.required_field()}</span>
+				<span class="badge mt-4 self-center text-error">* {$LL.users.required_field()}</span>
 				<div class="card-actions justify-end">
 					<button type="submit" class="btn btn-success mt-2"
 						><Fa icon={faPlus} />{$LL.buttons.add()}</button
--- a/frontend/src/routes/welcome/+page.svelte
+++ b/frontend/src/routes/welcome/+page.svelte
@@ -57,10 +57,10 @@
 </script>

 <div class="mt-10 flex items-center justify-center">
-	<div class="flex flex-col gap-16 w-screen max-w-lg my-4">
+	<div class="my-4 flex w-screen max-w-lg flex-col gap-16">
 		<div class="card bg-base-300 shadow-xl">
 			{#if $settingsPub?.setup_completed}
-				<figure class="w-72 mx-auto pt-6"><img src="/gopher.svg" alt="Gopher" /></figure>
+				<figure class="mx-auto w-72 pt-6"><img src="/gopher.svg" alt="Gopher" /></figure>
 				<div class="card-body">
 					<h2 class="card-title">{$LL.welcome.not_expected_title()}</h2>
 					<p>{$LL.welcome.not_expected_desc()}</p>
@@ -71,7 +71,7 @@
 					</div>
 				</div>
 			{:else if stepsCompleted === 0}
-				<figure class="w-44 mx-auto pt-6"><img src="/gopher.svg" alt="Gopher" /></figure>
+				<figure class="mx-auto w-44 pt-6"><img src="/gopher.svg" alt="Gopher" /></figure>
 				<div class="card-body">
 					<h2 class="card-title">{$LL.welcome.step1_page_title()}</h2>
 					<p>{$LL.welcome.step1_setup_desc()}</p>
@@ -104,7 +104,7 @@
 						</label>
 						<label class="relative block">
 							<div
-								class="absolute top-1/2 -translate-y-1/2 right-4 cursor-pointer"
+								class="absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer"
 								role="none"
 								on:click={() => toggleVisibility(inputPassword)}
 								on:keydown={() => toggleVisibility(inputPassword)}
@@ -127,7 +127,7 @@
 						</label>
 						<label class="relative block">
 							<div
-								class="absolute top-1/2 -translate-y-1/2 right-4 cursor-pointer"
+								class="absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer"
 								role="none"
 								on:click={() => toggleVisibility(inputConfirm)}
 								on:keydown={() => toggleVisibility(inputConfirm)}
@@ -145,7 +145,7 @@
 								bind:this={inputConfirm}
 							/>
 						</label>
-						<div class="card-actions justify-end mt-4">
+						<div class="card-actions mt-4 justify-end">
 							<button class="btn btn-primary" type="submit"
 								>{$LL.welcome.step2_btn_create()} <Fa icon={faArrowRight} /></button
 							>
@@ -153,7 +153,7 @@
 					</form>
 				</div>
 			{:else if stepsCompleted === 2}
-				<figure class="w-72 mx-auto pt-6"><img src="/gopher.svg" alt="Gopher" /></figure>
+				<figure class="mx-auto w-72 pt-6"><img src="/gopher.svg" alt="Gopher" /></figure>
 				<div class="card-body">
 					<h2 class="card-title">{$LL.welcome.step3_page_title()}</h2>
 					<p>{$LL.welcome.step3_page_desc()}</p>
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {