Закончили редизайн, обновили интерфейс бэкапа

frontend/src/components/tools/MapperTool.svelte

@@ -13,6 +13,8 @@
     import { getConnections } from '../../services/connectionService.js';
     import { selectedTask } from '../../lib/stores.js';
     import { addToast } from '../../lib/toasts.js';
+    import { t } from '../../lib/i18n';
+    import { Button, Card, Select, Input } from '../../lib/ui';
     // [/SECTION]
 
     let envs = [];
@@ -36,7 +38,7 @@
             envs = await envsRes.json();
             connections = await getConnections();
         } catch (e) {
-            addToast('Failed to fetch data', 'error');
+            addToast($t.mapper.errors.fetch_failed, 'error');
         }
     }
     // [/DEF:fetchData:Function]
@@ -47,17 +49,17 @@
     // @POST: Mapper task is started and selectedTask is updated.
     async function handleRunMapper() {
         if (!selectedEnv || !datasetId) {
-            addToast('Please fill in required fields', 'warning');
+            addToast($t.mapper.errors.required_fields, 'warning');
             return;
         }
 
         if (source === 'postgres' && (!selectedConnection || !tableName)) {
-            addToast('Connection and Table Name are required for postgres source', 'warning');
+            addToast($t.mapper.errors.postgres_required, 'warning');
             return;
         }
 
         if (source === 'excel' && !excelPath) {
-            addToast('Excel path is required for excel source', 'warning');
+            addToast($t.mapper.errors.excel_required, 'warning');
             return;
         }
 
@@ -75,7 +77,7 @@
             });
             
             selectedTask.set(task);
-            addToast('Mapper task started', 'success');
+            addToast($t.mapper.success.started, 'success');
         } catch (e) {
             addToast(e.message, 'error');
         } finally {
@@ -88,78 +90,94 @@
 </script>
 
 <!-- [SECTION: TEMPLATE] -->
-<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-    <h3 class="text-lg font-medium text-gray-900 mb-4">Dataset Column Mapper</h3>
-    <div class="space-y-4">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-                <label for="mapper-env" class="block text-sm font-medium text-gray-700">Environment</label>
-                <select id="mapper-env" bind:value={selectedEnv} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                    <option value="" disabled>-- Select Environment --</option>
-                    {#each envs as env}
-                        <option value={env.id}>{env.name}</option>
-                    {/each}
-                </select>
-            </div>
-            <div>
-                <label for="mapper-ds-id" class="block text-sm font-medium text-gray-700">Dataset ID</label>
-                <input type="number" id="mapper-ds-id" bind:value={datasetId} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
-            </div>
-        </div>
-
-        <div>
-            <label class="block text-sm font-medium text-gray-700">Mapping Source</label>
-            <div class="mt-2 flex space-x-4">
-                <label class="inline-flex items-center">
-                    <input type="radio" bind:group={source} value="postgres" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" />
-                    <span class="ml-2 text-sm text-gray-700">PostgreSQL</span>
-                </label>
-                <label class="inline-flex items-center">
-                    <input type="radio" bind:group={source} value="excel" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" />
-                    <span class="ml-2 text-sm text-gray-700">Excel</span>
-                </label>
-            </div>
-        </div>
-
-        {#if source === 'postgres'}
-            <div class="space-y-4 p-4 bg-gray-50 rounded-md border border-gray-100">
+<div class="space-y-6">
+    <Card title={$t.mapper.title}>
+        <div class="space-y-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
-                    <label for="mapper-conn" class="block text-sm font-medium text-gray-700">Saved Connection</label>
-                    <select id="mapper-conn" bind:value={selectedConnection} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                        <option value="" disabled>-- Select Connection --</option>
-                        {#each connections as conn}
-                            <option value={conn.id}>{conn.name}</option>
-                        {/each}
-                    </select>
+                    <Select
+                        label={$t.mapper.environment}
+                        bind:value={selectedEnv}
+                        options={[
+                            { value: '', label: $t.mapper.select_env },
+                            ...envs.map(e => ({ value: e.id, label: e.name }))
+                        ]}
+                    />
                 </div>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                        <label for="mapper-table" class="block text-sm font-medium text-gray-700">Table Name</label>
-                        <input type="text" id="mapper-table" bind:value={tableName} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
-                    </div>
-                    <div>
-                        <label for="mapper-schema" class="block text-sm font-medium text-gray-700">Table Schema</label>
-                        <input type="text" id="mapper-schema" bind:value={tableSchema} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
-                    </div>
+                <div>
+                    <Input
+                        label={$t.mapper.dataset_id}
+                        type="number"
+                        bind:value={datasetId}
+                    />
                 </div>
             </div>
-        {:else}
-            <div class="p-4 bg-gray-50 rounded-md border border-gray-100">
-                <label for="mapper-excel" class="block text-sm font-medium text-gray-700">Excel File Path</label>
-                <input type="text" id="mapper-excel" bind:value={excelPath} placeholder="/path/to/mapping.xlsx" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
-            </div>
-        {/if}
 
-        <div class="flex justify-end">
-            <button
-                on:click={handleRunMapper}
-                disabled={isRunning}
-                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:opacity-50"
-            >
-                {isRunning ? 'Starting...' : 'Run Mapper'}
-            </button>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">{$t.mapper.source}</label>
+                <div class="flex space-x-4">
+                    <label class="inline-flex items-center">
+                        <input type="radio" bind:group={source} value="postgres" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" />
+                        <span class="ml-2 text-sm text-gray-700">{$t.mapper.source_postgres}</span>
+                    </label>
+                    <label class="inline-flex items-center">
+                        <input type="radio" bind:group={source} value="excel" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" />
+                        <span class="ml-2 text-sm text-gray-700">{$t.mapper.source_excel}</span>
+                    </label>
+                </div>
+            </div>
+
+            {#if source === 'postgres'}
+                <div class="space-y-4 p-4 bg-gray-50 rounded-md border border-gray-100">
+                    <div>
+                        <Select
+                            label={$t.mapper.connection}
+                            bind:value={selectedConnection}
+                            options={[
+                                { value: '', label: $t.mapper.select_connection },
+                                ...connections.map(c => ({ value: c.id, label: c.name }))
+                            ]}
+                        />
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                            <Input
+                                label={$t.mapper.table_name}
+                                type="text"
+                                bind:value={tableName}
+                            />
+                        </div>
+                        <div>
+                            <Input
+                                label={$t.mapper.table_schema}
+                                type="text"
+                                bind:value={tableSchema}
+                            />
+                        </div>
+                    </div>
+                </div>
+            {:else}
+                <div class="p-4 bg-gray-50 rounded-md border border-gray-100">
+                    <Input
+                        label={$t.mapper.excel_path}
+                        type="text"
+                        bind:value={excelPath}
+                        placeholder="/path/to/mapping.xlsx"
+                    />
+                </div>
+            {/if}
+
+            <div class="flex justify-end pt-2">
+                <Button
+                    variant="primary"
+                    on:click={handleRunMapper}
+                    disabled={isRunning}
+                >
+                    {isRunning ? $t.mapper.starting : $t.mapper.run}
+                </Button>
+            </div>
         </div>
-    </div>
+    </Card>
 </div>
 <!-- [/SECTION] -->
 <!-- [/DEF:MapperTool:Component] -->