таски готовы

frontend/src/components/TaskList.svelte

@@ -14,6 +14,7 @@
   let {
     tasks = [],
     loading = false,
+    selectedTaskId = null,
   } = $props();
 
 
@@ -54,8 +55,8 @@
   // @PURPOSE: Dispatches a select event when a task is clicked.
   // @PRE: taskId is provided.
   // @POST: 'select' event is dispatched with task ID.
-  function handleTaskClick(taskId: string) {
-    dispatch('select', { id: taskId });
+  function handleTaskClick(task: any) {
+    dispatch('select', { id: task.id, task });
   }
   // [/DEF:handleTaskClick:Function]
 </script>
@@ -70,8 +71,8 @@
       {#each tasks as task (task.id)}
         <li>
           <button
-            class="block hover:bg-gray-50 w-full text-left transition duration-150 ease-in-out focus:outline-none"
-            on:click={() => handleTaskClick(task.id)}
+            class="block w-full text-left transition duration-150 ease-in-out focus:outline-none hover:bg-gray-50 {selectedTaskId === task.id ? 'bg-blue-50' : ''}"
+            on:click={() => handleTaskClick(task)}
           >
             <div class="px-4 py-4 sm:px-6">
               <div class="flex items-center justify-between">
@@ -110,4 +111,4 @@
   {/if}
 </div>
 
-<!-- [/DEF:TaskList:Component] -->
+<!-- [/DEF:TaskList:Component] -->