Enhance edit button UX and align actions/creation section on /Admin route

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

 <script lang="ts">
 	import User from '$lib/types/user';
 	import { t } from '$lib/services/i18n';
-	import UserItem from '$lib/components/users/userItem.svelte';
+	import UserItem from './userItem.svelte';
 	import type { PageData } from './$types';
 
 	let { data }: { data: PageData } = $props();

frontend/src/lib/components/users/userItem.svelte → frontend/src/routes/admin/users/userItem.svelte

@@ -2,7 +2,7 @@
 	import { t } from '$lib/services/i18n';
 	import type User from '$lib/types/user';
 	import { toastAlert, toastSuccess } from '$lib/utils/toasts';
-	import { Icon, PencilSquare, Trash } from 'svelte-hero-icons';
+	import { Icon, PencilSquare, Trash, CheckCircle, XCircle } from 'svelte-hero-icons';
 
 	export let user: User;
 
@@ -12,23 +12,26 @@
 	let is_active = user.is_active;
 
 	let inEdit = false;
+	let isChanged = false;
 
-	async function onEdit() {
-		if (!inEdit) {
-			nickname = user.nickname;
-			email = user.email;
-			type = user.type.toString();
-			is_active = user.is_active;
-			inEdit = true;
-			return;
-		}
+	function startEditing() {
+		inEdit = true;
+		isChanged = false;
+	}
+
+	function cancelEdit() {
+		nickname = user.nickname;
+		email = user.email;
+		type = user.type.toString();
+		is_active = user.is_active;
+
+		inEdit = false;
+		isChanged = false;
+	}
 
-		if (
-			nickname === user.nickname &&
-			email === user.email &&
-			type === user.type.toString() &&
-			is_active === user.is_active
-		) {
+	async function validateChanges() {
+		if (!isChanged) {
+			toastAlert('No changes detected.');
 			inEdit = false;
 			return;
 		}
@@ -41,8 +44,9 @@
 		});
 
 		if (res) {
+			toastSuccess('User successfully updated');
 			inEdit = false;
-			toastSuccess('Successfully updated user');
+			isChanged = false;
 			return;
 		}
 
@@ -54,21 +58,25 @@
 	<td>{user.id}</td>
 	<td>
 		{#if inEdit}
-			<input type="text" class="input" bind:value={nickname} />
+			<input type="text" class="input" bind:value={nickname} on:input={() => (isChanged = true)} />
 		{:else}
 			{user.nickname}
 		{/if}
 	</td>
 	<td>
 		{#if inEdit}
-			<input type="email" class="input" bind:value={email} />
+			<input type="email" class="input" bind:value={email} on:input={() => (isChanged = true)} />
 		{:else}
 			{user.email}
 		{/if}
 	</td>
 	<td>
 		{#if inEdit}
-			<select class="select select-sm select-bordered" bind:value={type}>
+			<select
+				class="select select-sm select-bordered"
+				bind:value={type}
+				on:change={() => (isChanged = true)}
+			>
 				<option value="2">{$t('users.type.student')}</option>
 				<option value="1">{$t('users.type.tutor')}</option>
 				<option value="0">{$t('users.type.admin')}</option>
@@ -83,20 +91,50 @@
 	</td>
 	<td>
 		{#if inEdit}
-			<input type="checkbox" class="checkbox" bind:checked={is_active} />
+			<input
+				type="checkbox"
+				class="checkbox"
+				bind:checked={is_active}
+				on:change={() => (isChanged = true)}
+			/>
 		{:else if user.is_active}
 			<span>{$t('utils.bool.true')}</span>
 		{:else}
 			<span>{$t('utils.bool.false')}</span>
 		{/if}
 	</td>
-	<td class="py-3 px-6 flex justify-center">
-		<button on:click={onEdit}>
-			<Icon src={PencilSquare} class="w-5" />
+	<td class="py-3 px-6 flex justify-center space-x-4 items-center">
+		{#if inEdit}
+			<button
+				on:click={validateChanges}
+				class="btn btn-icon bg-green-500 text-white hover:bg-green-600 rounded-full p-2 transition-all"
+				aria-label="Validate"
+			>
+				<Icon src={CheckCircle} class="w-5 h-5" />
+			</button>
+
+			<button
+				on:click={cancelEdit}
+				class="btn btn-icon bg-red-500 text-white hover:bg-red-600 rounded-full p-2 transition-all"
+				aria-label="Cancel"
+			>
+				<Icon src={XCircle} class="w-5 h-5" />
+			</button>
+		{:else}
+			<button
+				on:click={startEditing}
+				class="btn btn-icon bg-gray-200 text-gray-600 hover:bg-gray-300 rounded-full p-2 transition-all"
+				aria-label="Edit"
+			>
+				<Icon src={PencilSquare} class="w-5 h-5" />
+			</button>
+		{/if}
+
+		<button
+			class="btn btn-icon bg-gray-200 text-gray-400 hover:bg-gray-300 hover:text-red-500 rounded-full p-2 transition-all"
+			aria-label="Delete"
+		>
+			<Icon src={Trash} class="w-5 h-5" />
 		</button>
-		<Icon
-			src={Trash}
-			class="w-5 hover:cursor-not-allowed stroke-gray-400 hover:text-secondaryHover"
-		/>
-	</td></tr
->
+	</td>
+</tr>