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

frontend/src/components/tools/ConnectionList.svelte

@@ -10,6 +10,8 @@
     import { onMount, createEventDispatcher } from 'svelte';
     import { getConnections, deleteConnection } from '../../services/connectionService.js';
     import { addToast } from '../../lib/toasts.js';
+    import { t } from '../../lib/i18n';
+    import { Button, Card } from '../../lib/ui';
     // [/SECTION]
 
     const dispatch = createEventDispatcher();
@@ -57,32 +59,30 @@
 </script>
 
 <!-- [SECTION: TEMPLATE] -->
-<div class="bg-white shadow overflow-hidden sm:rounded-md border border-gray-200">
-    <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
-        <h3 class="text-lg leading-6 font-medium text-gray-900">Saved Connections</h3>
-    </div>
-    <ul class="divide-y divide-gray-200">
+<Card title={$t.connections?.saved || "Saved Connections"} padding="none">
+    <ul class="divide-y divide-gray-100">
         {#if isLoading}
-            <li class="p-4 text-center text-gray-500">Loading...</li>
+            <li class="p-6 text-center text-gray-500">{$t.common.loading}</li>
         {:else if connections.length === 0}
-            <li class="p-8 text-center text-gray-500 italic">No connections saved yet.</li>
+            <li class="p-12 text-center text-gray-500 italic">{$t.connections?.no_saved || "No connections saved yet."}</li>
         {:else}
             {#each connections as conn}
-                <li class="p-4 flex items-center justify-between hover:bg-gray-50">
+                <li class="p-6 flex items-center justify-between hover:bg-gray-50 transition-colors">
                     <div>
-                        <div class="text-sm font-medium text-indigo-600 truncate">{conn.name}</div>
-                        <div class="text-xs text-gray-500">{conn.type}://{conn.username}@{conn.host}:{conn.port}/{conn.database}</div>
+                        <div class="text-sm font-medium text-blue-600 truncate">{conn.name}</div>
+                        <div class="text-xs text-gray-400 mt-1 font-mono">{conn.type}://{conn.username}@{conn.host}:{conn.port}/{conn.database}</div>
                     </div>
-                    <button
+                    <Button
+                        variant="danger"
+                        size="sm"
                         on:click={() => handleDelete(conn.id)}
-                        class="ml-2 inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                     >
-                        Delete
-                    </button>
+                        {$t.connections?.delete || "Delete"}
+                    </Button>
                 </li>
             {/each}
         {/if}
     </ul>
-</div>
+</Card>
 <!-- [/SECTION] -->
 <!-- [/DEF:ConnectionList:Component] -->