feat: update ESLint and TypeScript configurations across frontend and backend; enhance component structure and improve data handling in various modules

apps/web/src/routes/todos/+page.svelte

@@ -71,24 +71,23 @@
 	const isLoadingTodos = $derived(todosQuery.isLoading);
 	const todos = $derived(todosQuery.data ?? []);
 	const hasTodos = $derived(todos.length > 0);
-
 </script>
 
 <div class="p-4">
-	<h1 class="text-xl mb-4">Todos (Convex)</h1>
+	<h1 class="mb-4 text-xl">Todos (Convex)</h1>
 
-	<form onsubmit={handleAddTodo} class="flex gap-2 mb-4">
+	<form onsubmit={handleAddTodo} class="mb-4 flex gap-2">
 		<input
 			type="text"
 			bind:value={newTodoText}
 			placeholder="New task..."
 			disabled={isAdding}
-			class="p-1 flex-grow"
+			class="flex-grow p-1"
 		/>
 		<button
 			type="submit"
 			disabled={!canAdd}
-			class="bg-blue-500 text-white px-3 py-1 rounded disabled:opacity-50"
+			class="rounded bg-blue-500 px-3 py-1 text-white disabled:opacity-50"
 		>
 			{#if isAdding}Adding...{:else}Add{/if}
 		</button>
@@ -104,10 +103,7 @@
 				{@const isTogglingThis = togglingId === todo._id}
 				{@const isDeletingThis = deletingId === todo._id}
 				{@const isDisabled = isTogglingThis || isDeletingThis}
-				<li
-					class="flex items-center justify-between p-2"
-					class:opacity-50={isDisabled}
-				>
+				<li class="flex items-center justify-between p-2" class:opacity-50={isDisabled}>
 					<div class="flex items-center gap-2">
 						<input
 							type="checkbox"
@@ -116,10 +112,7 @@
 							onchange={() => handleToggleTodo(todo._id, todo.completed)}
 							disabled={isDisabled}
 						/>
-						<label
-							for={`todo-${todo._id}`}
-							class:line-through={todo.completed}
-						>
+						<label for={`todo-${todo._id}`} class:line-through={todo.completed}>
 							{todo.text}
 						</label>
 					</div>
@@ -128,7 +121,7 @@
 						onclick={() => handleDeleteTodo(todo._id)}
 						disabled={isDisabled}
 						aria-label="Delete todo"
-						class="text-red-500 px-1 disabled:opacity-50"
+						class="px-1 text-red-500 disabled:opacity-50"
 					>
 						{#if isDeletingThis}Deleting...{:else}X{/if}
 					</button>