linter + новые таски

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

@@ -1,295 +1,270 @@
+<!-- [DEF:SettingsPage:Page] -->
 <script>
-    import { onMount } from 'svelte';
-    import { updateGlobalSettings, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection, updateStorageSettings } from '../../lib/api';
-    import { addToast } from '../../lib/toasts';
-    import { t } from '$lib/i18n';
-    import { Button, Input, Card, PageHeader } from '$lib/ui';
+  /**
+   * @TIER: CRITICAL
+   * @PURPOSE: Consolidated Settings Page - All settings in one place with tabbed navigation
+   * @LAYER: UI
+   * @RELATION: BINDS_TO -> sidebarStore
+   * @INVARIANT: Always shows tabbed interface with all settings categories
+   * 
+   * @UX_STATE: Loading -> Shows skeleton loader
+   * @UX_STATE: Loaded -> Shows tabbed settings interface
+   * @UX_STATE: Error -> Shows error banner with retry button
+   * @UX_FEEDBACK: Toast notifications on save success/failure
+   * @UX_RECOVERY: Refresh button reloads settings data
+   */
 
-    /** @type {import('./$types').PageData} */
-    export let data;
+  import { onMount } from 'svelte';
+  import { t } from '$lib/i18n';
+  import { api } from '$lib/api.js';
+  import { addToast } from '$lib/toasts';
 
-    let settings = data.settings || {
-        environments: [],
-        settings: {
-            storage: {
-                root_path: '',
-                backup_structure_pattern: '',
-                repo_structure_pattern: '',
-                filename_pattern: ''
-            }
-        }
-    };
+  // State
+  let activeTab = 'environments';
+  let settings = null;
+  let isLoading = true;
+  let error = null;
 
-    $: if (data.settings) {
-        settings = { ...data.settings };
-        if (settings.settings && !settings.settings.storage) {
-            settings.settings.storage = {
-                root_path: '',
-                backup_structure_pattern: '',
-                repo_structure_pattern: '',
-                filename_pattern: ''
-            };
-        }
+  // Load settings on mount
+  onMount(async () => {
+    await loadSettings();
+  });
+
+  // Load consolidated settings from API
+  async function loadSettings() {
+    isLoading = true;
+    error = null;
+    try {
+      const response = await api.getConsolidatedSettings();
+      settings = response;
+    } catch (err) {
+      error = err.message || 'Failed to load settings';
+      console.error('[SettingsPage][Coherence:Failed]', err);
+    } finally {
+      isLoading = false;
     }
+  }
 
-    let newEnv = {
-        id: '',
-        name: '',
-        url: '',
-        username: '',
-        password: '',
-        is_default: false
-    };
+  // Handle tab change
+  function handleTabChange(tab) {
+    activeTab = tab;
+  }
 
-    let editingEnvId = null;
+  // Get tab class
+  function getTabClass(tab) {
+    return activeTab === tab
+      ? 'text-blue-600 border-b-2 border-blue-600'
+      : 'text-gray-600 hover:text-gray-800 border-transparent hover:border-gray-300';
+  }
 
-    // [DEF:handleSaveGlobal:Function]
-    /* @PURPOSE: Saves global application settings.
-       @PRE: settings.settings must contain valid configuration.
-       @POST: Global settings are updated via API.
-    */
-    async function handleSaveGlobal() {
-        try {
-            console.log("[Settings.handleSaveGlobal][Action] Saving global settings.");
-            await updateGlobalSettings(settings.settings);
-            addToast('Global settings saved', 'success');
-            console.log("[Settings.handleSaveGlobal][Coherence:OK] Global settings saved.");
-        } catch (error) {
-            console.error("[Settings.handleSaveGlobal][Coherence:Failed] Failed to save global settings:", error);
-            addToast('Failed to save global settings', 'error');
-        }
+  // Handle save
+  async function handleSave() {
+    console.log('[SettingsPage][Action] Saving settings');
+    try {
+      await api.updateConsolidatedSettings(settings);
+      addToast($t.settings?.save_success || 'Settings saved', 'success');
+    } catch (err) {
+      console.error('[SettingsPage][Coherence:Failed]', err);
+      addToast($t.settings?.save_failed || 'Failed to save settings', 'error');
     }
-    // [/DEF:handleSaveGlobal:Function]
-
-    // [DEF:handleSaveStorage:Function]
-    /* @PURPOSE: Saves storage-specific settings.
-       @PRE: settings.settings.storage must contain valid configuration.
-       @POST: Storage settings are updated via API.
-    */
-    async function handleSaveStorage() {
-        try {
-            console.log("[Settings.handleSaveStorage][Action] Saving storage settings.");
-            await updateStorageSettings(settings.settings.storage);
-            addToast('Storage settings saved', 'success');
-            console.log("[Settings.handleSaveStorage][Coherence:OK] Storage settings saved.");
-        } catch (error) {
-            console.error("[Settings.handleSaveStorage][Coherence:Failed] Failed to save storage settings:", error);
-            addToast(error.message || 'Failed to save storage settings', 'error');
-        }
-    }
-    // [/DEF:handleSaveStorage:Function]
-
-    // [DEF:handleAddOrUpdateEnv:Function]
-    /* @PURPOSE: Adds a new environment or updates an existing one.
-       @PRE: newEnv must contain valid environment details.
-       @POST: Environment is saved and page is reloaded to reflect changes.
-    */
-    async function handleAddOrUpdateEnv() {
-        try {
-            console.log(`[Settings.handleAddOrUpdateEnv][Action] ${editingEnvId ? 'Updating' : 'Adding'} environment.`);
-            if (editingEnvId) {
-                await updateEnvironment(editingEnvId, newEnv);
-                addToast('Environment updated', 'success');
-            } else {
-                await addEnvironment(newEnv);
-                addToast('Environment added', 'success');
-            }
-            resetEnvForm();
-            // In a real app, we might want to invalidate the load function here
-            // For now, we'll just manually update the local state or re-fetch
-            // But since we are using SvelteKit, we should ideally use invalidateAll()
-            location.reload(); // Simple way to refresh data for now
-            console.log("[Settings.handleAddOrUpdateEnv][Coherence:OK] Environment saved.");
-        } catch (error) {
-            console.error("[Settings.handleAddOrUpdateEnv][Coherence:Failed] Failed to save environment:", error);
-            addToast('Failed to save environment', 'error');
-        }
-    }
-    // [/DEF:handleAddOrUpdateEnv:Function]
-
-    // [DEF:handleDeleteEnv:Function]
-    /* @PURPOSE: Deletes a Superset environment.
-       @PRE: id must be a valid environment ID.
-       @POST: Environment is removed and page is reloaded.
-    */
-    async function handleDeleteEnv(id) {
-        if (confirm('Are you sure you want to delete this environment?')) {
-            try {
-                console.log(`[Settings.handleDeleteEnv][Action] Deleting environment: ${id}`);
-                await deleteEnvironment(id);
-                addToast('Environment deleted', 'success');
-                location.reload();
-                console.log("[Settings.handleDeleteEnv][Coherence:OK] Environment deleted.");
-            } catch (error) {
-                console.error("[Settings.handleDeleteEnv][Coherence:Failed] Failed to delete environment:", error);
-                addToast('Failed to delete environment', 'error');
-            }
-        }
-    }
-    // [/DEF:handleDeleteEnv:Function]
-
-    // [DEF:handleTestEnv:Function]
-    /* @PURPOSE: Tests the connection to a Superset environment.
-       @PRE: id must be a valid environment ID.
-       @POST: Displays success or error toast based on connection result.
-    */
-    async function handleTestEnv(id) {
-        try {
-            console.log(`[Settings.handleTestEnv][Action] Testing environment: ${id}`);
-            const result = await testEnvironmentConnection(id);
-            if (result.status === 'success') {
-                addToast('Connection successful', 'success');
-                console.log("[Settings.handleTestEnv][Coherence:OK] Connection successful.");
-            } else {
-                addToast(`Connection failed: ${result.message}`, 'error');
-                console.log("[Settings.handleTestEnv][Coherence:Failed] Connection failed.");
-            }
-        } catch (error) {
-            console.error("[Settings.handleTestEnv][Coherence:Failed] Error testing connection:", error);
-            addToast('Failed to test connection', 'error');
-        }
-    }
-    // [/DEF:handleTestEnv:Function]
-
-    // [DEF:editEnv:Function]
-    /* @PURPOSE: Populates the environment form for editing.
-       @PRE: env object must be provided.
-       @POST: newEnv and editingEnvId are updated.
-    */
-    function editEnv(env) {
-        newEnv = { ...env };
-        editingEnvId = env.id;
-    }
-    // [/DEF:editEnv:Function]
-
-    // [DEF:resetEnvForm:Function]
-    /* @PURPOSE: Resets the environment creation/edit form to default state.
-       @PRE: None.
-       @POST: newEnv is cleared and editingEnvId is set to null.
-    */
-    function resetEnvForm() {
-        newEnv = {
-            id: '',
-            name: '',
-            url: '',
-            username: '',
-            password: '',
-            is_default: false
-        };
-        editingEnvId = null;
-    }
-    // [/DEF:resetEnvForm:Function]
+  }
 </script>
 
-<div class="container mx-auto p-4">
-    <PageHeader title={$t.settings.title} />
+<style>
+  .container {
+    @apply max-w-7xl mx-auto px-4 py-6;
+  }
 
-    {#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}
+  .header {
+    @apply flex items-center justify-between mb-6;
+  }
 
+  .title {
+    @apply text-2xl font-bold text-gray-900;
+  }
 
-    <div class="mb-8">
-        <Card title={$t.settings?.storage_title || "File Storage Configuration"}>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div class="md:col-span-2">
-                    <Input
-                        label={$t.settings?.storage_root || "Storage Root Path"}
-                        bind:value={settings.settings.storage.root_path}
-                    />
-                </div>
-                <Input
-                    label={$t.settings?.storage_backup_pattern || "Backup Directory Pattern"}
-                    bind:value={settings.settings.storage.backup_structure_pattern}
-                />
-                <Input
-                    label={$t.settings?.storage_repo_pattern || "Repository Directory Pattern"}
-                    bind:value={settings.settings.storage.repo_structure_pattern}
-                />
-                <Input
-                    label={$t.settings?.storage_filename_pattern || "Filename Pattern"}
-                    bind:value={settings.settings.storage.filename_pattern}
-                />
-                <div class="bg-gray-50 p-4 rounded border border-gray-200">
-                    <span class="block text-xs font-semibold text-gray-500 uppercase mb-2">{$t.settings?.storage_preview || "Path Preview"}</span>
-                    <code class="text-sm text-indigo-600">
-                        {settings.settings.storage.root_path}/backups/sample_backup.zip
-                    </code>
-                </div>
-            </div>
-            <div class="mt-6">
-                <Button on:click={handleSaveStorage}>
-                    {$t.common.save}
-                </Button>
-            </div>
-        </Card>
+  .refresh-btn {
+    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors;
+  }
+
+  .error-banner {
+    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4 flex items-center justify-between;
+  }
+
+  .retry-btn {
+    @apply px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors;
+  }
+
+  .tabs {
+    @apply border-b border-gray-200 mb-6;
+  }
+
+  .tab-btn {
+    @apply px-4 py-2 text-sm font-medium transition-colors focus:outline-none;
+  }
+
+  .tab-content {
+    @apply bg-white rounded-lg p-6 border border-gray-200;
+  }
+
+  .skeleton {
+    @apply animate-pulse bg-gray-200 rounded;
+  }
+</style>
+
+<div class="container">
+  <!-- Header -->
+  <div class="header">
+    <h1 class="title">{$t.settings?.title || 'Settings'}</h1>
+    <button class="refresh-btn" on:click={loadSettings}>
+      {$t.common?.refresh || 'Refresh'}
+    </button>
+  </div>
+
+  <!-- Error Banner -->
+  {#if error}
+    <div class="error-banner">
+      <span>{error}</span>
+      <button class="retry-btn" on:click={loadSettings}>
+        {$t.common?.retry || 'Retry'}
+      </button>
+    </div>
+  {/if}
+
+  <!-- Loading State -->
+  {#if isLoading}
+    <div class="tab-content">
+      <div class="skeleton h-8"></div>
+      <div class="skeleton h-8"></div>
+      <div class="skeleton h-8"></div>
+      <div class="skeleton h-8"></div>
+      <div class="skeleton h-8"></div>
+    </div>
+  {:else if settings}
+    <!-- Tabs -->
+    <div class="tabs">
+      <button 
+        class="tab-btn {getTabClass('environments')}"
+        on:click={() => handleTabChange('environments')}
+      >
+        {$t.settings?.environments || 'Environments'}
+      </button>
+      <button 
+        class="tab-btn {getTabClass('connections')}"
+        on:click={() => handleTabChange('connections')}
+      >
+        {$t.settings?.connections || 'Connections'}
+      </button>
+      <button 
+        class="tab-btn {getTabClass('llm')}"
+        on:click={() => handleTabChange('llm')}
+      >
+        {$t.settings?.llm || 'LLM'}
+      </button>
+      <button 
+        class="tab-btn {getTabClass('logging')}"
+        on:click={() => handleTabChange('logging')}
+      >
+        {$t.settings?.logging || 'Logging'}
+      </button>
+      <button 
+        class="tab-btn {getTabClass('storage')}"
+        on:click={() => handleTabChange('storage')}
+      >
+        {$t.settings?.storage || 'Storage'}
+      </button>
     </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>
-    {/if}
-        
-        <div class="mb-6 overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
+    <!-- Tab Content -->
+    <div class="tab-content">
+      {#if activeTab === 'environments'}
+        <!-- Environments Tab -->
+        <div class="text-lg font-medium mb-4">
+          <h2 class="text-xl font-bold mb-4">{$t.settings?.environments || 'Superset Environments'}</h2>
+          <p class="text-gray-600 mb-6">
+            {$t.settings?.env_description || 'Configure Superset environments for dashboards and datasets.'}
+          </p>
+          <div class="flex justify-end mb-6">
+            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
+              {$t.settings?.env_add || 'Add Environment'}
+            </button>
+          </div>
+          {#if settings.environments && settings.environments.length > 0}
+            <div class="mt-6">
+              <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">{$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">{$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">{$t.git?.actions || "Actions"}</th>
-                    </tr>
+                  <tr>
+                    <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">{$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-right text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.env_actions || "Actions"}</th>
+                  </tr>
                 </thead>
                 <tbody class="bg-white divide-y divide-gray-200">
-                    {#each settings.environments as env}
-                        <tr>
-                            <td class="px-6 py-4 whitespace-nowrap">{env.name}</td>
-                            <td class="px-6 py-4 whitespace-nowrap">{env.url}</td>
-                            <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">{$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}
+                  {#each settings.environments as env}
+                    <tr>
+                      <td class="px-6 py-4 whitespace-nowrap">{env.name}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">{env.url}</td>
+                      <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 class="text-green-600 hover:text-green-900 mr-4" on:click={() => handleTestEnv(env.id)}>
+                          {$t.settings?.env_test || "Test"}
+                        </button>
+                        <button class="text-indigo-600 hover:text-indigo-900 mr-4" on:click={() => editEnv(env)}>
+                          {$t.common.edit}
+                        </button>
+                        <button class="text-red-600 hover:text-red-900" on:click={() => handleDeleteEnv(env.id)}>
+                          {$t.settings?.env_delete || "Delete"}
+                        </button>
+                      </td>
+                    </tr>
+                  {/each}
                 </tbody>
-            </table>
-        </div>
-
-        <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-8 flex gap-3">
-                <Button on:click={handleAddOrUpdateEnv}>
-                    {editingEnvId ? $t.common.save : ($t.settings?.env_add || "Add Environment")}
-                </Button>
-                {#if editingEnvId}
-                    <Button variant="secondary" on:click={resetEnvForm}>
-                        {$t.common.cancel}
-                    </Button>
-                {/if}
+              </table>
             </div>
+          {/if}
         </div>
-        </Card>
-    </section>
+      {:else if activeTab === 'connections'}
+        <!-- Connections Tab -->
+        <div class="text-lg font-medium mb-4">
+          <h2 class="text-xl font-bold mb-4">{$t.settings?.connections || 'Database Connections'}</h2>
+          <p class="text-gray-600 mb-6">
+            {$t.settings?.connections_description || 'Configure database connections for data mapping.'}
+          </p>
+        </div>
+      {:else if activeTab === 'llm'}
+        <!-- LLM Tab -->
+        <div class="text-lg font-medium mb-4">
+          <h2 class="text-xl font-bold mb-4">{$t.settings?.llm || 'LLM Providers'}</h2>
+          <p class="text-gray-600 mb-6">
+            {$t.settings?.llm_description || 'Configure LLM providers for dataset documentation.'}
+          </p>
+          <div class="flex justify-end mb-6">
+            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
+              {$t.llm?.add_provider || 'Add Provider'}
+            </button>
+          </div>
+        </div>
+      {:else if activeTab === 'logging'}
+        <!-- Logging Tab -->
+        <div class="text-lg font-medium mb-4">
+          <h2 class="text-xl font-bold mb-4">{$t.settings?.logging || 'Logging Configuration'}</h2>
+          <p class="text-gray-600 mb-6">
+            {$t.settings?.logging_description || 'Configure logging and task log levels.'}
+          </p>
+        </div>
+      {:else if activeTab === 'storage'}
+        <!-- Storage Tab -->
+        <div class="text-lg font-medium mb-4">
+          <h2 class="text-xl font-bold mb-4">{$t.settings?.storage || 'File Storage Configuration'}</h2>
+          <p class="text-gray-600 mb-6">
+            {$t.settings?.storage_description || 'Configure file storage paths and patterns.'}
+          </p>
+        </div>
+      {/if}
+    </div>
 </div>
+
+<!-- [/DEF:SettingsPage:Page] -->