frontend cleanup

frontend/src/lib/components/InputField.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import { t } from 'svelte-i18n';
 
 	/** @type {string} */

frontend/src/lib/components/Modal.svelte

@@ -1,9 +1,6 @@
 <script>
 	import { quintOut } from 'svelte/easing';
 
-	import { t } from 'svelte-i18n';
-	import { createEventDispatcher } from 'svelte';
-
 	const modal = (/** @type {Element} */ node, { duration = 300 } = {}) => {
 		const transform = getComputedStyle(node).transform;
 
@@ -19,11 +16,6 @@
 			}
 		};
 	};
-
-	const dispatch = createEventDispatcher();
-	function closeModal() {
-		dispatch('close', {});
-	}
 </script>
 
 <div class="modal-background">
@@ -59,42 +51,11 @@
 		box-shadow: 0 4px 20px rgba(17, 17, 27, 0.5); /* var(--crust) with opacity */
 		transform: translate(-50%, -50%);
 	}
-	.sr-only {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border-width: 0;
-	}
 	@media (max-width: 990px) {
 		.modal {
 			width: 90%;
 		}
 	}
-	.modal-close {
-		border: none;
-		padding: 1rem;
-		cursor: pointer;
-		position: absolute;
-		right: 0;
-		top: 0;
-	}
-
-	.modal-close svg {
-		display: block;
-		margin-left: auto;
-		margin-right: auto;
-		transition: all 0.3s ease-in-out;
-		fill: var(--blue); /* Using Catppuccin blue */
-	}
-	.modal-close:hover svg {
-		fill: var(--red); /* Using Catppuccin red */
-		transform: scale(1.2);
-	}
 	.modal .container {
 		max-height: 90vh;
 		overflow-y: auto;

frontend/src/lib/components/UserEditForm.svelte

@@ -80,7 +80,7 @@
 		}
 	}
 
-	$: isNewUser = user === null;
+	// $: isNewUser = user === null;
 	$: isLoading = user === undefined;
 
 	$: {
@@ -135,7 +135,8 @@
 		label: sub?.name ?? ''
 	}));
 	$: selectedSubscriptionModel =
-		subscriptions.find((sub) => sub?.id === localUser.membership?.subscription_model.id) || null;
+		subscriptions.find((sub) => sub?.name === localUser.membership?.subscription_model.name) ||
+		null;
 
 	/**
 	 * creates groups of categories depending on the first letter
@@ -146,7 +147,7 @@
 		return Object.entries(categories)
 			.sort((a, b) => a[1].category.localeCompare(b[1].category))
 			.reduce(
-				(/** @type {Object.<string, App.Locals['licence_categories']>} */ acc, [_, category]) => {
+				(/** @type {Object.<string, App.Locals['licence_categories']>} */ acc, [, category]) => {
 					const firstLetter = category.category[0];
 					if (!acc[firstLetter]) {
 						acc[firstLetter] = [];
@@ -167,12 +168,12 @@
 	}
 
 	/** @type {import('../../routes/auth/about/[id]/$types').SubmitFunction} */
-	const handleUpdate = async ({ formData, action, cancel }) => {
+	const handleUpdate = async () => {
 		isUpdating = true;
 		return async ({ result }) => {
 			isUpdating = false;
 			if (result.type === 'success' || result.type === 'redirect') {
-				close();
+				dispatch('close');
 			} else {
 				document.querySelector('.modal .container')?.scrollTo({ top: 0, behavior: 'smooth' });
 			}
@@ -371,7 +372,7 @@
 			<div class="licence-categories">
 				<h3>{$t('licence_categories')}</h3>
 				<div class="checkbox-grid">
-					{#each Object.entries(groupedCategories) as [group, categories], groupIndex}
+					{#each Object.entries(groupedCategories) as [, categories], groupIndex}
 						{#if groupIndex > 0}
 							<div class="category-break"></div>
 						{/if}
@@ -417,11 +418,11 @@
 				<div class="subscription-column">
 					<p>
 						<strong>{$t('monthly_fee')}:</strong>
-						{selectedSubscriptionModel?.monthly_fee || '-'}
+						{selectedSubscriptionModel?.monthly_fee || '-'} €
 					</p>
 					<p>
 						<strong>{$t('hourly_rate')}:</strong>
-						{selectedSubscriptionModel?.hourly_rate || '-'}
+						{selectedSubscriptionModel?.hourly_rate || '-'} €
 					</p>
 					{#if selectedSubscriptionModel?.included_hours_per_year}
 						<p>