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

frontend/src/routes/+page.svelte

@@ -5,6 +5,8 @@
     import { api } from '../lib/api.js';
     import { get } from 'svelte/store';
     import { goto } from '$app/navigation';
+    import { t } from '$lib/i18n';
+    import { Button, Card, PageHeader } from '$lib/ui';
 
     /** @type {import('./$types').PageData} */
     export let data;
@@ -55,34 +57,43 @@
 <div class="container mx-auto p-4">
     {#if $selectedTask}
         <TaskRunner />
-        <button on:click={() => selectedTask.set(null)} class="mt-4 bg-blue-500 text-white p-2 rounded">
-            Back to Task List
-        </button>
+        <div class="mt-4">
+            <Button variant="primary" on:click={() => selectedTask.set(null)}>
+                {$t.common.cancel}
+            </Button>
+        </div>
     {:else if $selectedPlugin}
-        <h2 class="text-2xl font-bold mb-4">{$selectedPlugin.name}</h2>
-        <DynamicForm schema={$selectedPlugin.schema} on:submit={handleFormSubmit} />
-        <button on:click={() => selectedPlugin.set(null)} class="mt-4 bg-gray-500 text-white p-2 rounded">
-            Back to Dashboard
-        </button>
+        <PageHeader title={$selectedPlugin.name} />
+        <Card>
+            <DynamicForm schema={$selectedPlugin.schema} on:submit={handleFormSubmit} />
+        </Card>
+        <div class="mt-4">
+            <Button variant="secondary" on:click={() => selectedPlugin.set(null)}>
+                {$t.common.cancel}
+            </Button>
+        </div>
     {:else}
-        <h1 class="text-2xl font-bold mb-4">Available Tools</h1>
+        <PageHeader title={$t.nav.dashboard} />
+        
         {#if data.error}
             <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                 {data.error}
             </div>
         {/if}
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {#each data.plugins as plugin}
-                <div 
-                    class="border rounded-lg p-4 cursor-pointer hover:bg-gray-100"
+                <div
                     on:click={() => selectPlugin(plugin)}
                     role="button"
                     tabindex="0"
                     on:keydown={(e) => e.key === 'Enter' && selectPlugin(plugin)}
+                    class="cursor-pointer transition-transform hover:scale-[1.02]"
                 >
-                    <h2 class="text-xl font-semibold">{plugin.name}</h2>
-                    <p class="text-gray-600">{plugin.description}</p>
-                    <span class="text-sm text-gray-400">v{plugin.version}</span>
+                    <Card title={plugin.name}>
+                        <p class="text-gray-600 mb-4">{plugin.description}</p>
+                        <span class="text-xs font-mono text-gray-400 bg-gray-50 px-2 py-1 rounded">v{plugin.version}</span>
+                    </Card>
                 </div>
             {/each}
         </div>