Мультиязночность + причесывание 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>

frontend/src/routes/git/+page.svelte

@@ -4,6 +4,8 @@
   import DashboardGrid from '../../components/DashboardGrid.svelte';
   import { addToast as toast } from '../../lib/toasts.js';
   import type { DashboardMetadata } from '../../types/dashboard';
+  import { t } from '$lib/i18n';
+  import { Button, Card, PageHeader, Select } from '$lib/ui';
 
   let environments: any[] = [];
   let selectedEnvId = "";
@@ -50,29 +52,22 @@
 </script>
 
 <div class="max-w-6xl mx-auto p-6">
-  <div class="flex justify-between items-center mb-6">
-    <h1 class="text-2xl font-bold text-gray-800">Git Dashboard Management</h1>
-    <div class="flex items-center space-x-4">
-      <label for="env-select" class="text-sm font-medium text-gray-700">Environment:</label>
-      <select
-        id="env-select"
+  <PageHeader title="Git Dashboard Management">
+    <div slot="actions" class="flex items-center space-x-4">
+      <Select
+        label="Environment"
         bind:value={selectedEnvId}
-        class="border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 border bg-white"
-      >
-        {#each environments as env}
-          <option value={env.id}>{env.name}</option>
-        {/each}
-      </select>
+        options={environments.map(e => ({ value: e.id, label: e.name }))}
+      />
     </div>
-  </div>
+  </PageHeader>
 
   {#if loading}
     <div class="flex justify-center py-12">
       <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
     </div>
   {:else}
-    <div class="bg-white rounded-lg shadow p-6">
-      <h2 class="text-lg font-medium mb-4">Select Dashboard to Manage</h2>
+    <Card title="Select Dashboard to Manage">
       {#if fetchingDashboards}
         <p class="text-gray-500">Loading dashboards...</p>
       {:else if dashboards.length > 0}
@@ -80,7 +75,7 @@
       {:else}
         <p class="text-gray-500 italic">No dashboards found in this environment.</p>
       {/if}
-    </div>
+    </Card>
   {/if}
 </div>
 <!-- [/DEF:GitDashboardPage:Component] -->

frontend/src/routes/migration/+page.svelte

@@ -21,6 +21,8 @@
   import { selectedTask } from '../../lib/stores.js';
   import { resumeTask } from '../../services/taskService.js';
   import type { DashboardMetadata, DashboardSelection } from '../../types/dashboard';
+  import { t } from '$lib/i18n';
+  import { Button, Card, PageHeader } from '$lib/ui';
   // [/SECTION]
 
   // [SECTION: STATE]
@@ -294,19 +296,18 @@
 
 <!-- [SECTION: TEMPLATE] -->
 <div class="max-w-4xl mx-auto p-6">
-  <h1 class="text-2xl font-bold mb-6">Migration Dashboard</h1>
+  <PageHeader title={$t.nav.migration} />
   
   <TaskHistory on:viewLogs={handleViewLogs} />
 
   {#if $selectedTask}
     <div class="mt-6">
       <TaskRunner />
-      <button
-        on:click={() => selectedTask.set(null)}
-        class="mt-4 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-      >
-        Back to New Migration
-      </button>
+      <div class="mt-4">
+        <Button variant="secondary" on:click={() => selectedTask.set(null)}>
+          {$t.common.cancel}
+        </Button>
+      </div>
     </div>
   {:else}
     {#if loading}
@@ -383,13 +384,12 @@
       </div>
     {/if}
 
-    <button
+    <Button
       on:click={startMigration}
       disabled={!sourceEnvId || !targetEnvId || sourceEnvId === targetEnvId || selectedDashboardIds.length === 0}
-      class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400"
     >
       Start Migration
-    </button>
+    </Button>
   {/if}
 </div>
 

frontend/src/routes/migration/mappings/+page.svelte

@@ -14,6 +14,8 @@
   import { onMount } from 'svelte';
   import EnvSelector from '../../../components/EnvSelector.svelte';
   import MappingTable from '../../../components/MappingTable.svelte';
+  import { t } from '$lib/i18n';
+  import { Button, PageHeader } from '$lib/ui';
   // [/SECTION]
 
   // [SECTION: STATE]
@@ -128,7 +130,7 @@
 
 <!-- [SECTION: TEMPLATE] -->
 <div class="max-w-6xl mx-auto p-6">
-  <h1 class="text-2xl font-bold mb-6">Database Mapping Management</h1>
+  <PageHeader title="Database Mapping Management" />
 
   {#if loading}
     <p>Loading environments...</p>
@@ -149,13 +151,13 @@
     </div>
 
     <div class="mb-8">
-      <button
+      <Button
         on:click={fetchDatabases}
         disabled={!sourceEnvId || !targetEnvId || sourceEnvId === targetEnvId || fetchingDbs}
-        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400"
+        isLoading={fetchingDbs}
       >
-        {fetchingDbs ? 'Fetching...' : 'Fetch Databases & Suggestions'}
-      </button>
+        Fetch Databases & Suggestions
+      </Button>
     </div>
 
     {#if error}

frontend/src/routes/settings/+page.svelte

@@ -2,6 +2,8 @@
     import { onMount } from 'svelte';
     import { updateGlobalSettings, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection } from '../../lib/api';
     import { addToast } from '../../lib/toasts';
+    import { t } from '$lib/i18n';
+    import { Button, Input, Card, PageHeader } from '$lib/ui';
 
     /** @type {import('./$types').PageData} */
     export let data;
@@ -142,7 +144,7 @@
 </script>
 
 <div class="container mx-auto p-4">
-    <h1 class="text-2xl font-bold mb-6">Settings</h1>
+    <PageHeader title={$t.settings.title} />
 
     {#if data.error}
         <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
@@ -150,38 +152,39 @@
         </div>
     {/if}
 
-    <section class="mb-8 bg-white p-6 rounded shadow">
-        <h2 class="text-xl font-semibold mb-4">Global Settings</h2>
-        <div class="grid grid-cols-1 gap-4">
-            <div>
-                <label for="backup_path" class="block text-sm font-medium text-gray-700">Backup Storage Path</label>
-                <input type="text" id="backup_path" bind:value={settings.settings.backup_path} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
+    <div class="mb-8">
+        <Card title={$t.settings?.global_title || "Global Settings"}>
+            <div class="grid grid-cols-1 gap-6">
+                <Input
+                    label={$t.settings?.backup_path || "Backup Storage Path"}
+                    bind:value={settings.settings.backup_path}
+                />
+                <Button on:click={handleSaveGlobal}>
+                    {$t.common.save}
+                </Button>
             </div>
-            <button on:click={handleSaveGlobal} class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-max">
-                Save Global Settings
-            </button>
+        </Card>
+    </div>
+
+    <section class="mb-8">
+        <Card title={$t.settings?.env_title || "Superset Environments"}>
+
+    {#if settings.environments.length === 0}
+        <div class="mb-4 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700">
+            <p class="font-bold">Warning</p>
+            <p>{$t.settings?.env_warning || "No Superset environments configured."}</p>
         </div>
-    </section>
-
-    <section class="mb-8 bg-white p-6 rounded shadow">
-        <h2 class="text-xl font-semibold mb-4">Superset Environments</h2>
-
-        {#if settings.environments.length === 0}
-            <div class="mb-4 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700">
-                <p class="font-bold">Warning</p>
-                <p>No Superset environments configured. You must add at least one environment to perform backups or migrations.</p>
-            </div>
-        {/if}
+    {/if}
         
         <div class="mb-6 overflow-x-auto">
             <table class="min-w-full divide-y divide-gray-200">
                 <thead class="bg-gray-50">
                     <tr>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.connections?.name || "Name"}</th>
                         <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.connections?.user || "Username"}</th>
                         <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.git?.actions || "Actions"}</th>
                     </tr>
                 </thead>
                 <tbody class="bg-white divide-y divide-gray-200">
@@ -192,9 +195,9 @@
                             <td class="px-6 py-4 whitespace-nowrap">{env.username}</td>
                             <td class="px-6 py-4 whitespace-nowrap">{env.is_default ? 'Yes' : 'No'}</td>
                             <td class="px-6 py-4 whitespace-nowrap">
-                                <button on:click={() => handleTestEnv(env.id)} class="text-green-600 hover:text-green-900 mr-4">Test</button>
-                                <button on:click={() => editEnv(env)} class="text-indigo-600 hover:text-indigo-900 mr-4">Edit</button>
-                                <button on:click={() => handleDeleteEnv(env.id)} class="text-red-600 hover:text-red-900">Delete</button>
+                                <button on:click={() => handleTestEnv(env.id)} class="text-green-600 hover:text-green-900 mr-4">{$t.settings?.env_test || "Test"}</button>
+                                <button on:click={() => editEnv(env)} class="text-indigo-600 hover:text-indigo-900 mr-4">{$t.common.edit}</button>
+                                <button on:click={() => handleDeleteEnv(env.id)} class="text-red-600 hover:text-red-900">{$t.settings?.env_delete || "Delete"}</button>
                             </td>
                         </tr>
                     {/each}
@@ -202,44 +205,30 @@
             </table>
         </div>
 
-        <div class="bg-gray-50 p-4 rounded">
-            <h3 class="text-lg font-medium mb-4">{editingEnvId ? 'Edit' : 'Add'} Environment</h3>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                    <label for="env_id" class="block text-sm font-medium text-gray-700">ID</label>
-                    <input type="text" id="env_id" bind:value={newEnv.id} disabled={!!editingEnvId} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
-                </div>
-                <div>
-                    <label for="env_name" class="block text-sm font-medium text-gray-700">Name</label>
-                    <input type="text" id="env_name" bind:value={newEnv.name} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
-                </div>
-                <div>
-                    <label for="env_url" class="block text-sm font-medium text-gray-700">URL</label>
-                    <input type="text" id="env_url" bind:value={newEnv.url} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
-                </div>
-                <div>
-                    <label for="env_user" class="block text-sm font-medium text-gray-700">Username</label>
-                    <input type="text" id="env_user" bind:value={newEnv.username} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
-                </div>
-                <div>
-                    <label for="env_pass" class="block text-sm font-medium text-gray-700">Password</label>
-                    <input type="password" id="env_pass" bind:value={newEnv.password} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
-                </div>
-                <div class="flex items-center">
-                    <input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
-                    <label for="env_default" class="ml-2 block text-sm text-gray-900">Default Environment</label>
+        <div class="mt-8 bg-gray-50 p-6 rounded-lg border border-gray-100">
+            <h3 class="text-lg font-medium mb-6">{editingEnvId ? ($t.settings?.env_edit || "Edit Environment") : ($t.settings?.env_add || "Add Environment")}</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <Input label="ID" bind:value={newEnv.id} disabled={!!editingEnvId} />
+                <Input label={$t.connections?.name || "Name"} bind:value={newEnv.name} />
+                <Input label="URL" bind:value={newEnv.url} />
+                <Input label={$t.connections?.user || "Username"} bind:value={newEnv.username} />
+                <Input label={$t.connections?.pass || "Password"} type="password" bind:value={newEnv.password} />
+                <div class="flex items-center gap-2 h-10 mt-auto">
+                    <input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" />
+                    <label for="env_default" class="text-sm font-medium text-gray-700">{$t.settings?.env_default || "Default Environment"}</label>
                 </div>
             </div>
-            <div class="mt-4 flex gap-2">
-                <button on:click={handleAddOrUpdateEnv} class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
-                    {editingEnvId ? 'Update' : 'Add'} Environment
-                </button>
+            <div class="mt-8 flex gap-3">
+                <Button on:click={handleAddOrUpdateEnv}>
+                    {editingEnvId ? $t.common.save : ($t.settings?.env_add || "Add Environment")}
+                </Button>
                 {#if editingEnvId}
-                    <button on:click={resetEnvForm} class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
-                        Cancel
-                    </button>
+                    <Button variant="secondary" on:click={resetEnvForm}>
+                        {$t.common.cancel}
+                    </Button>
                 {/if}
             </div>
         </div>
+        </Card>
     </section>
 </div>

frontend/src/routes/settings/git/+page.svelte

@@ -1,8 +1,24 @@
-<script>
+<!-- [DEF:GitSettingsPage:Component] -->
+<!--
+@SEMANTICS: git, settings, configuration, integration
+@PURPOSE:   Manage Git server configurations for dashboard versioning.
+@LAYER:     Page
+@RELATION:  USES -> gitService
+@RELATION:  USES -> Button, Input, Card, PageHeader, Select
+
+@INVARIANT: All configurations must be validated via connection test.
+-->
+
+<script lang="ts">
+    // [SECTION: IMPORTS]
     import { onMount } from 'svelte';
     import { gitService } from '../../../services/gitService';
     import { addToast as toast } from '../../../lib/toasts.js';
+    import { t } from '$lib/i18n';
+    import { Button, Input, Card, PageHeader, Select } from '$lib/ui';
+    // [/SECTION: IMPORTS]
 
+    // [SECTION: STATE]
     let configs = [];
     let newConfig = {
         name: '',
@@ -12,15 +28,27 @@
         default_repository: ''
     };
     let testing = false;
+    // [/SECTION: STATE]
 
-    onMount(async () => {
+    // [DEF:loadConfigs:Function]
+    /**
+     * @purpose Fetches existing git configurations.
+     */
+    async function loadConfigs() {
         try {
             configs = await gitService.getConfigs();
         } catch (e) {
             toast(e.message, 'error');
         }
-    });
+    }
+    // [/DEF:loadConfigs:Function]
 
+    onMount(loadConfigs);
+
+    // [DEF:handleTest:Function]
+    /**
+     * @purpose Tests connection to a git server with current form data.
+     */
     async function handleTest() {
         testing = true;
         try {
@@ -36,7 +64,12 @@
             testing = false;
         }
     }
+    // [/DEF:handleTest:Function]
 
+    // [DEF:handleSave:Function]
+    /**
+     * @purpose Saves a new git configuration.
+     */
     async function handleSave() {
         try {
             const saved = await gitService.createConfig(newConfig);
@@ -47,7 +80,13 @@
             toast(e.message, 'error');
         }
     }
+    // [/DEF:handleSave:Function]
 
+    // [DEF:handleDelete:Function]
+    /**
+     * @purpose Deletes a git configuration by ID.
+     * @param {string} id - Configuration ID.
+     */
     async function handleDelete(id) {
         if (!confirm('Are you sure you want to delete this Git configuration?')) return;
         try {
@@ -58,31 +97,34 @@
             toast(e.message, 'error');
         }
     }
+    // [/DEF:handleDelete:Function]
 </script>
 
-<div class="p-6">
-    <h1 class="text-2xl font-bold mb-6">Git Integration Settings</h1>
+<!-- [SECTION: TEMPLATE] -->
+<div class="p-6 max-w-6xl mx-auto">
+    <PageHeader title="Git Integration Settings" />
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
         <!-- List of Configs -->
-        <div class="bg-white p-6 rounded shadow">
-            <h2 class="text-xl font-semibold mb-4">Configured Servers</h2>
+        <Card title="Configured Servers">
             {#if configs.length === 0}
                 <p class="text-gray-500">No Git servers configured.</p>
             {:else}
-                <ul class="divide-y">
+                <ul class="divide-y divide-gray-100">
                     {#each configs as config}
-                        <li class="py-3 flex justify-between items-center">
+                        <li class="py-4 flex justify-between items-center">
                             <div>
-                                <span class="font-medium">{config.name}</span>
-                                <span class="text-sm text-gray-500 ml-2">({config.provider})</span>
-                                <div class="text-xs text-gray-400">{config.url}</div>
+                                <div class="flex items-center gap-2">
+                                    <span class="font-medium text-gray-900">{config.name}</span>
+                                    <span class="text-xs font-mono bg-gray-50 text-gray-500 px-1.5 py-0.5 rounded">{config.provider}</span>
+                                </div>
+                                <div class="text-xs text-gray-400 mt-1">{config.url}</div>
                             </div>
                             <div class="flex items-center space-x-4">
-                                <span class="px-2 py-1 text-xs rounded {config.status === 'CONNECTED' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
+                                <span class="px-2 py-1 text-xs font-medium rounded {config.status === 'CONNECTED' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'}">
                                     {config.status}
                                 </span>
-                                <button on:click={() => handleDelete(config.id)} class="text-red-600 hover:text-red-800 p-1" title="Delete">
+                                <button on:click={() => handleDelete(config.id)} class="text-gray-400 hover:text-red-600 transition-colors" title="Delete">
                                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                         <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                                     </svg>
@@ -92,45 +134,41 @@
                     {/each}
                 </ul>
             {/if}
-        </div>
+        </Card>
 
         <!-- Add New Config -->
-        <div class="bg-white p-6 rounded shadow">
-            <h2 class="text-xl font-semibold mb-4">Add Git Server</h2>
-            <div class="space-y-4">
-                <div>
-                    <label class="block text-sm font-medium text-gray-700">Display Name</label>
-                    <input type="text" bind:value={newConfig.name} class="mt-1 block w-full border rounded p-2" placeholder="e.g. My GitHub" />
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700">Provider</label>
-                    <select bind:value={newConfig.provider} class="mt-1 block w-full border rounded p-2">
-                        <option value="GITHUB">GitHub</option>
-                        <option value="GITLAB">GitLab</option>
-                        <option value="GITEA">Gitea</option>
-                    </select>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700">Server URL</label>
-                    <input type="text" bind:value={newConfig.url} class="mt-1 block w-full border rounded p-2" />
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700">Personal Access Token (PAT)</label>
-                    <input type="password" bind:value={newConfig.pat} class="mt-1 block w-full border rounded p-2" />
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700">Default Repository (Optional)</label>
-                    <input type="text" bind:value={newConfig.default_repository} class="mt-1 block w-full border rounded p-2" placeholder="org/repo" />
-                </div>
-                <div class="flex space-x-4 pt-4">
-                    <button on:click={handleTest} disabled={testing} class="bg-gray-200 px-4 py-2 rounded hover:bg-gray-300 disabled:opacity-50">
-                        {testing ? 'Testing...' : 'Test Connection'}
-                    </button>
-                    <button on:click={handleSave} class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+        <Card title="Add Git Server">
+            <div class="space-y-6">
+                <Input label="Display Name" bind:value={newConfig.name} placeholder="e.g. My GitHub" />
+                <Select
+                    label="Provider"
+                    bind:value={newConfig.provider}
+                    options={[
+                        { value: 'GITHUB', label: 'GitHub' },
+                        { value: 'GITLAB', label: 'GitLab' },
+                        { value: 'GITEA', label: 'Gitea' }
+                    ]}
+                />
+                <Input label="Server URL" bind:value={newConfig.url} />
+                <Input label="Personal Access Token (PAT)" type="password" bind:value={newConfig.pat} />
+                <Input label="Default Repository (Optional)" bind:value={newConfig.default_repository} placeholder="org/repo" />
+                
+                <div class="flex gap-3 pt-2">
+                    <Button variant="secondary" on:click={handleTest} isLoading={testing}>
+                        Test Connection
+                    </Button>
+                    <Button variant="primary" on:click={handleSave}>
                         Save Configuration
-                    </button>
+                    </Button>
                 </div>
             </div>
-        </div>
+        </Card>
     </div>
-</div>
+</div>
+<!-- [/SECTION: TEMPLATE] -->
+
+<style>
+    /* Styles are handled by Tailwind */
+</style>
+
+<!-- [/DEF:GitSettingsPage:Component] -->

frontend/src/routes/tasks/+page.svelte

@@ -12,6 +12,8 @@
   import { addToast } from '../../lib/toasts';
   import TaskList from '../../components/TaskList.svelte';
   import TaskLogViewer from '../../components/TaskLogViewer.svelte';
+  import { t } from '$lib/i18n';
+  import { Button, Card, PageHeader, Select } from '$lib/ui';
 
   let tasks = [];
   let environments = [];
@@ -114,35 +116,35 @@
 </script>
 
 <div class="container mx-auto p-4 max-w-6xl">
-  <div class="flex justify-between items-center mb-6">
-    <h1 class="text-2xl font-bold text-gray-800">Task Management</h1>
-    <button
-      on:click={() => showBackupModal = true}
-      class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-sm transition duration-150 font-medium"
-    >
-      Run Backup
-    </button>
-  </div>
+  <PageHeader title={$t.tasks.management}>
+    <div slot="actions">
+      <Button on:click={() => showBackupModal = true}>
+        {$t.tasks.run_backup}
+      </Button>
+    </div>
+  </PageHeader>
 
   <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
     <div class="lg:col-span-1">
-      <h2 class="text-lg font-semibold mb-3 text-gray-700">Recent Tasks</h2>
+      <h2 class="text-lg font-semibold mb-3 text-gray-700">{$t.tasks.recent}</h2>
       <TaskList {tasks} {loading} on:select={handleSelectTask} />
     </div>
 
     <div class="lg:col-span-2">
-      <h2 class="text-lg font-semibold mb-3 text-gray-700">Task Details & Logs</h2>
+      <h2 class="text-lg font-semibold mb-3 text-gray-700">{$t.tasks.details_logs}</h2>
       {#if selectedTaskId}
-        <div class="bg-white rounded-lg shadow-lg h-[600px] flex flex-col">
-          <TaskLogViewer 
-            taskId={selectedTaskId} 
-            taskStatus={tasks.find(t => t.id === selectedTaskId)?.status}
-            inline={true} 
-          />
-        </div>
+        <Card padding="none">
+          <div class="h-[600px] flex flex-col overflow-hidden rounded-lg">
+            <TaskLogViewer
+              taskId={selectedTaskId}
+              taskStatus={tasks.find(t => t.id === selectedTaskId)?.status}
+              inline={true}
+            />
+          </div>
+        </Card>
       {:else}
-        <div class="bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg h-[600px] flex items-center justify-center text-gray-500">
-          <p>Select a task to view logs and details</p>
+        <div class="bg-gray-50 border-2 border-dashed border-gray-100 rounded-lg h-[600px] flex items-center justify-center text-gray-400">
+          <p>{$t.tasks.select_task}</p>
         </div>
       {/if}
     </div>
@@ -150,36 +152,29 @@
 </div>
 
 {#if showBackupModal}
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
-      <h3 class="text-xl font-bold mb-4">Run Manual Backup</h3>
-      <div class="mb-4">
-        <label for="env-select" class="block text-sm font-medium text-gray-700 mb-1">Target Environment</label>
-        <select
-          id="env-select"
-          bind:value={selectedEnvId}
-          class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 border"
-        >
-          <option value="" disabled>-- Select Environment --</option>
-          {#each environments as env}
-            <option value={env.id}>{env.name}</option>
-          {/each}
-        </select>
-      </div>
-      <div class="flex justify-end space-x-3">
-        <button
-          on:click={() => showBackupModal = false}
-          class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition"
-        >
-          Cancel
-        </button>
-        <button
-          on:click={handleRunBackup}
-          class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
-        >
-          Start Backup
-        </button>
-      </div>
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm p-4">
+    <div class="w-full max-w-md">
+      <Card title={$t.tasks.manual_backup}>
+        <div class="space-y-6">
+          <Select
+            label={$t.tasks.target_env}
+            bind:value={selectedEnvId}
+            options={[
+              { value: '', label: $t.tasks.select_env },
+              ...environments.map(e => ({ value: e.id, label: e.name }))
+            ]}
+          />
+          
+          <div class="flex justify-end gap-3 pt-2">
+            <Button variant="secondary" on:click={() => showBackupModal = false}>
+              {$t.common.cancel}
+            </Button>
+            <Button variant="primary" on:click={handleRunBackup}>
+              Start Backup
+            </Button>
+          </div>
+        </div>
+      </Card>
     </div>
   </div>
 {/if}

frontend/src/routes/tools/debug/+page.svelte

@@ -7,19 +7,18 @@
 <script>
     import DebugTool from '../../../components/tools/DebugTool.svelte';
     import TaskRunner from '../../../components/TaskRunner.svelte';
+    import { PageHeader } from '$lib/ui';
 </script>
 
-<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-    <div class="px-4 py-6 sm:px-0">
-        <h1 class="text-2xl font-semibold text-gray-900 mb-6">System Diagnostics</h1>
-        
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <div class="lg:col-span-2">
-                <DebugTool />
-            </div>
-            <div class="lg:col-span-1">
-                <TaskRunner />
-            </div>
+<div class="max-w-7xl mx-auto p-6">
+    <PageHeader title="System Diagnostics" />
+    
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div class="lg:col-span-2">
+            <DebugTool />
+        </div>
+        <div class="lg:col-span-1">
+            <TaskRunner />
         </div>
     </div>
 </div>

frontend/src/routes/tools/mapper/+page.svelte

@@ -7,19 +7,18 @@
 <script>
     import MapperTool from '../../../components/tools/MapperTool.svelte';
     import TaskRunner from '../../../components/TaskRunner.svelte';
+    import { PageHeader } from '$lib/ui';
 </script>
 
-<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-    <div class="px-4 py-6 sm:px-0">
-        <h1 class="text-2xl font-semibold text-gray-900 mb-6">Dataset Column Mapper</h1>
-        
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <div class="lg:col-span-2">
-                <MapperTool />
-            </div>
-            <div class="lg:col-span-1">
-                <TaskRunner />
-            </div>
+<div class="max-w-7xl mx-auto p-6">
+    <PageHeader title="Dataset Column Mapper" />
+    
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div class="lg:col-span-2">
+            <MapperTool />
+        </div>
+        <div class="lg:col-span-1">
+            <TaskRunner />
         </div>
     </div>
 </div>

frontend/src/routes/tools/search/+page.svelte

@@ -7,19 +7,18 @@
 <script>
     import SearchTool from '../../../components/tools/SearchTool.svelte';
     import TaskRunner from '../../../components/TaskRunner.svelte';
+    import { PageHeader } from '$lib/ui';
 </script>
 
-<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-    <div class="px-4 py-6 sm:px-0">
-        <h1 class="text-2xl font-semibold text-gray-900 mb-6">Dataset Search</h1>
-        
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <div class="lg:col-span-2">
-                <SearchTool />
-            </div>
-            <div class="lg:col-span-1">
-                <TaskRunner />
-            </div>
+<div class="max-w-7xl mx-auto p-6">
+    <PageHeader title="Dataset Search" />
+    
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div class="lg:col-span-2">
+            <SearchTool />
+        </div>
+        <div class="lg:col-span-1">
+            <TaskRunner />
         </div>
     </div>
 </div>