Мультиязночность + причесывание css

frontend/src/components/TaskList.svelte

@@ -9,6 +9,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import { formatDistanceToNow } from 'date-fns';
+  import { t } from '../lib/i18n';
 
   export let tasks: Array<any> = [];
   export let loading: boolean = false;
@@ -58,9 +59,9 @@
 
 <div class="bg-white shadow overflow-hidden sm:rounded-md">
   {#if loading && tasks.length === 0}
-    <div class="p-4 text-center text-gray-500">Loading tasks...</div>
+    <div class="p-4 text-center text-gray-500">{$t.tasks?.loading || 'Loading...'}</div>
   {:else if tasks.length === 0}
-    <div class="p-4 text-center text-gray-500">No tasks found.</div>
+    <div class="p-4 text-center text-gray-500">{$t.tasks?.no_tasks || 'No tasks found.'}</div>
   {:else}
     <ul class="divide-y divide-gray-200">
       {#each tasks as task (task.id)}
@@ -94,7 +95,7 @@
                     <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
                   </svg>
                   <p>
-                    Started {formatTime(task.started_at)}
+                    {($t.tasks?.started || "").replace('{time}', formatTime(task.started_at))}
                   </p>
                 </div>
               </div>