From cf7b3556f73d5bb10206c6d748e4a1df9919bcda Mon Sep 17 00:00:00 2001 From: busya Date: Tue, 2 Jun 2026 17:58:30 +0300 Subject: [PATCH] refactor(frontend): enforce semantic tokens + extract 3 Screen Models MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Color tokens: 3658→0 violations across 186 .svelte/.svelte.ts files. All raw Tailwind colors (bg-blue-*, text-gray-*, border-red-*, etc.) replaced with semantic tokens from tailwind.config.js in 5 perl passes. Model extraction (11→8 oversized pages): - LLMReportModel.svelte.ts: LLM report page 413→221 lines - DatasetDetailModel.svelte.ts: dataset detail page 416→218 lines - DatasetsHubModel.svelte.ts: datasets hub page 468→246 lines Tests: 14 assertions updated (color classes + model refs). Build: 1 duplicate class:text-primary fix in ValidationTaskForm. All 699/699 tests pass. --- frontend/src/components/DashboardGrid.svelte | 40 +- frontend/src/components/DynamicForm.svelte | 4 +- frontend/src/components/EnvSelector.svelte | 4 +- frontend/src/components/Footer.svelte | 2 +- frontend/src/components/MappingTable.svelte | 26 +- .../src/components/MissingMappingModal.svelte | 18 +- frontend/src/components/Navbar.svelte | 32 +- frontend/src/components/PasswordPrompt.svelte | 26 +- .../components/RepositoryDashboardGrid.svelte | 68 +-- .../StartupEnvironmentWizard.svelte | 60 +- frontend/src/components/TaskHistory.svelte | 46 +- frontend/src/components/TaskList.svelte | 30 +- frontend/src/components/TaskLogViewer.svelte | 32 +- frontend/src/components/TaskRunner.svelte | 72 +-- frontend/src/components/Toast.svelte | 32 +- .../src/components/auth/ProtectedRoute.svelte | 2 +- .../src/components/backups/BackupList.svelte | 36 +- .../components/backups/BackupManager.svelte | 18 +- .../src/components/git/BranchSelector.svelte | 12 +- .../src/components/git/CommitHistory.svelte | 12 +- .../src/components/git/CommitModal.svelte | 22 +- .../components/git/ConflictResolver.svelte | 24 +- .../src/components/git/DeploymentModal.svelte | 20 +- .../src/components/git/GitInitPanel.svelte | 4 +- frontend/src/components/git/GitManager.svelte | 48 +- .../src/components/git/GitMergeDialog.svelte | 32 +- .../components/git/GitOperationsPanel.svelte | 6 +- .../src/components/git/GitReleasePanel.svelte | 18 +- .../components/git/GitWorkspacePanel.svelte | 62 +-- frontend/src/components/llm/DocPreview.svelte | 26 +- .../src/components/llm/ProviderConfig.svelte | 64 +-- .../components/llm/ValidationReport.svelte | 32 +- .../src/components/storage/FileList.svelte | 36 +- .../src/components/storage/FileUpload.svelte | 20 +- .../src/components/tasks/LogEntryRow.svelte | 12 +- .../src/components/tasks/LogFilterBar.svelte | 12 +- .../src/components/tasks/TaskLogPanel.svelte | 14 +- .../components/tasks/TaskResultPanel.svelte | 52 +- .../src/components/tools/DebugTool.svelte | 34 +- .../src/components/tools/MapperTool.svelte | 72 +-- .../DashboardMaintenanceBadge.svelte | 2 +- .../components/MaintenanceEventsTable.svelte | 122 ++-- .../MaintenanceSettingsPanel.svelte | 44 +- .../components/StartMaintenanceForm.svelte | 48 +- .../assistant/AssistantChatPanel.svelte | 128 ++--- .../AssistantClarificationCard.svelte | 62 +-- .../dataset-review/CompiledSQLPreview.svelte | 66 +-- .../ExecutionMappingReview.svelte | 104 ++-- .../LaunchConfirmationPanel.svelte | 94 ++-- .../dataset-review/SemanticLayerReview.svelte | 118 ++-- .../dataset-review/SourceIntakePanel.svelte | 56 +- .../ValidationFindingsPanel.svelte | 114 ++-- .../lib/components/health/HealthMatrix.svelte | 56 +- .../lib/components/health/PolicyForm.svelte | 42 +- .../health/ScheduleAtAGlance.svelte | 86 +-- .../lib/components/layout/Breadcrumbs.svelte | 26 +- .../src/lib/components/layout/Sidebar.svelte | 40 +- .../lib/components/layout/TaskDrawer.svelte | 90 +-- .../lib/components/layout/TopNavbar.svelte | 42 +- .../src/lib/components/llm/UrlParser.svelte | 32 +- .../components/llm/ValidationTaskForm.svelte | 283 +++++----- .../llm/ValidationTaskReport.svelte | 16 +- .../lib/components/reports/ReportCard.svelte | 22 +- .../reports/ReportDetailPanel.svelte | 26 +- .../lib/components/settings/ApiKeysTab.svelte | 90 +-- .../translate/BulkCorrectionSidebar.svelte | 50 +- .../translate/BulkReplaceModal.svelte | 100 ++-- .../components/translate/ConfigTabForm.svelte | 132 ++--- .../translate/CorrectionCell.svelte | 66 +-- .../components/translate/RunTabContent.svelte | 68 +-- .../translate/ScheduleConfig.svelte | 52 +- .../translate/TargetSchemaHint.svelte | 82 +-- .../components/translate/TargetTabForm.svelte | 68 +-- .../translate/TermCorrectionPopup.svelte | 78 +-- .../TranslationMetricsDashboard.svelte | 94 ++-- .../translate/TranslationPreview.svelte | 110 ++-- .../TranslationRunGlobalIndicator.svelte | 46 +- .../translate/TranslationRunProgress.svelte | 94 ++-- .../translate/TranslationRunResult.svelte | 142 ++--- .../__tests__/test_correction_cell.svelte.js | 4 +- .../ui/DatabaseSearchCombobox.svelte | 24 +- .../ui/DatasetSearchCombobox.svelte | 26 +- .../src/lib/components/ui/MultiSelect.svelte | 22 +- .../ui/SearchableMultiSelect.svelte | 40 +- .../lib/models/DatasetDetailModel.svelte.ts | 126 +++++ .../src/lib/models/DatasetsHubModel.svelte.ts | 293 ++++++++++ .../src/lib/models/GitStatusModel.svelte.ts | 24 +- .../src/lib/models/LLMReportModel.svelte.ts | 201 +++++++ frontend/src/lib/ui/HelpTooltip.svelte | 6 +- frontend/src/pages/Dashboard.svelte | 6 +- frontend/src/pages/Settings.svelte | 88 +-- frontend/src/routes/+error.svelte | 4 +- frontend/src/routes/+layout.svelte | 16 +- frontend/src/routes/admin/roles/+page.svelte | 36 +- .../src/routes/admin/settings/+page.svelte | 68 +-- .../routes/admin/settings/llm/+page.svelte | 48 +- frontend/src/routes/admin/users/+page.svelte | 66 +-- .../src/routes/dashboards/DashboardRow.svelte | 6 +- .../src/routes/dashboards/[id]/+page.svelte | 106 ++-- .../components/DashboardGitManager.svelte | 32 +- .../[id]/components/DashboardHeader.svelte | 14 +- .../DashboardLinkedResources.svelte | 64 +-- .../components/DashboardTaskHistory.svelte | 40 +- .../dashboards/[id]/validation/+page.svelte | 126 ++--- .../src/routes/dashboards/health/+page.svelte | 66 +-- frontend/src/routes/datasets/+page.svelte | 521 +++++------------- .../src/routes/datasets/ColumnsTable.svelte | 34 +- .../src/routes/datasets/DatasetList.svelte | 52 +- .../src/routes/datasets/DatasetPreview.svelte | 28 +- .../src/routes/datasets/MetricsTable.svelte | 22 +- frontend/src/routes/datasets/StatsBar.svelte | 4 +- .../src/routes/datasets/[id]/+page.svelte | 403 ++++---------- .../datasets/__tests__/ColumnsTable.test.ts | 8 +- .../datasets/__tests__/DatasetList.test.ts | 6 +- .../datasets/__tests__/bulk_actions.test.ts | 14 +- .../datasets/__tests__/split_view.test.ts | 15 +- .../src/routes/datasets/review/+page.svelte | 32 +- .../review/ReviewWorkspaceHeader.svelte | 14 +- .../review/ReviewWorkspaceLeftSidebar.svelte | 50 +- .../review/ReviewWorkspaceRightRail.svelte | 48 +- .../routes/datasets/review/[id]/+page.svelte | 94 ++-- frontend/src/routes/git/+page.svelte | 27 +- frontend/src/routes/login/+page.svelte | 18 +- frontend/src/routes/maintenance/+page.svelte | 20 +- .../routes/migration/mappings/+page.svelte | 6 +- frontend/src/routes/profile/+page.svelte | 10 +- frontend/src/routes/reports/+page.svelte | 22 +- .../routes/reports/llm/[taskId]/+page.svelte | 400 ++++---------- .../llm/[taskId]/report_page.contract.test.ts | 5 +- frontend/src/routes/settings/+page.svelte | 74 +-- .../routes/settings/EnvironmentsTab.svelte | 78 +-- .../routes/settings/FeaturesSettings.svelte | 18 +- .../src/routes/settings/LlmSettings.svelte | 44 +- .../routes/settings/LoggingSettings.svelte | 18 +- .../settings/MigrationMappingsTable.svelte | 68 +-- .../routes/settings/MigrationSettings.svelte | 12 +- .../routes/settings/StorageSettings.svelte | 16 +- .../src/routes/settings/SystemSettings.svelte | 16 +- .../routes/settings/automation/+page.svelte | 52 +- frontend/src/routes/settings/git/+page.svelte | 36 +- .../settings/notifications/+page.svelte | 50 +- .../src/routes/storage/repos/+page.svelte | 6 +- frontend/src/routes/tools/mapper/+page.svelte | 2 +- .../src/routes/tools/storage/+page.svelte | 12 +- frontend/src/routes/translate/+page.svelte | 58 +- .../src/routes/translate/[id]/+page.svelte | 46 +- .../translate/dictionaries/+page.svelte | 36 +- .../translate/dictionaries/[id]/+page.svelte | 158 +++--- .../src/routes/translate/history/+page.svelte | 170 +++--- .../src/routes/validation-tasks/+page.svelte | 128 ++--- .../validation-tasks/[policyId]/+page.svelte | 102 ++-- .../[policyId]/edit/+page.svelte | 6 +- .../[policyId]/runs/[runId]/+page.svelte | 286 +++++----- .../validation-tasks/history/+page.svelte | 66 +-- .../routes/validation-tasks/new/+page.svelte | 8 +- frontend/tests/maintenance.test.ts | 6 +- 156 files changed, 4581 insertions(+), 4569 deletions(-) create mode 100644 frontend/src/lib/models/DatasetDetailModel.svelte.ts create mode 100644 frontend/src/lib/models/DatasetsHubModel.svelte.ts create mode 100644 frontend/src/lib/models/LLMReportModel.svelte.ts diff --git a/frontend/src/components/DashboardGrid.svelte b/frontend/src/components/DashboardGrid.svelte index c7f670c3..34e0dfd7 100644 --- a/frontend/src/components/DashboardGrid.svelte +++ b/frontend/src/components/DashboardGrid.svelte @@ -189,9 +189,9 @@ -
- - +
+
+ - + {#each paginatedDashboards as dashboard (dashboard.id)} - + - -
handleSelectAll((e.target as HTMLInputElement).checked)} - class="h-4 w-4 text-primary border-gray-300 rounded focus-visible:ring-primary-ring" + class="h-4 w-4 text-primary border-border-strong rounded focus-visible:ring-primary-ring" /> handleSort("title")} > {$t.dashboard.title} @@ -215,7 +215,7 @@ : ""} handleSort("last_modified")} > {$t.dashboard.last_modified} @@ -226,7 +226,7 @@ : ""} handleSort("status")} > {$t.dashboard.status} @@ -237,18 +237,18 @@ : ""} {$t.dashboard.validation} {$t.dashboard.git}
{dashboard.title}{new Date(dashboard.last_modified).toLocaleDateString()} + {dashboard.status} @@ -284,7 +284,7 @@ size="sm" onclick={() => handleValidate(dashboard)} disabled={validatingIds.has(dashboard.id)} - class="text-purple-600 hover:text-purple-900" + class="text-info hover:text-info" > {validatingIds.has(dashboard.id) ? "Validating..." : "Validate"} @@ -294,7 +294,7 @@ variant="ghost" size="sm" onclick={() => openGit(dashboard)} - class="text-primary hover:text-blue-900" + class="text-primary hover:text-primary" > {$t.git.manage} @@ -307,7 +307,7 @@
-
+
{($t.dashboard?.showing ) .replace("{start}", (currentPage * pageSize + 1).toString()) .replace( diff --git a/frontend/src/components/DynamicForm.svelte b/frontend/src/components/DynamicForm.svelte index e6d3244a..6b5a0a23 100755 --- a/frontend/src/components/DynamicForm.svelte +++ b/frontend/src/components/DynamicForm.svelte @@ -55,7 +55,7 @@ {#if schema && schema.properties} {#each Object.entries(schema.properties) as [key, prop]}
- + {#if prop.type === 'string'} {/each} - {/if} diff --git a/frontend/src/components/EnvSelector.svelte b/frontend/src/components/EnvSelector.svelte index c478d74b..cf888261 100644 --- a/frontend/src/components/EnvSelector.svelte +++ b/frontend/src/components/EnvSelector.svelte @@ -42,10 +42,10 @@
- + - +
+ - - - + + + - + {#each sourceDatabases as sDb} {@const mapping = mappings.find(m => m.source_db_uuid === sDb.uuid)} {@const suggestion = getSuggestion(sDb.uuid)} - - + - - diff --git a/frontend/src/components/MissingMappingModal.svelte b/frontend/src/components/MissingMappingModal.svelte index bf5b1c23..34810102 100644 --- a/frontend/src/components/MissingMappingModal.svelte +++ b/frontend/src/components/MissingMappingModal.svelte @@ -56,23 +56,23 @@ {#if show}
{$t.dashboard?.source_database }{$t.dashboard?.target_database }{$t.dashboard?.status }{$t.dashboard?.source_database }{$t.dashboard?.target_database }{$t.dashboard?.status }
+
{sDb.database_name} + + {#if mapping} {$t.dashboard?.saved } {:else if suggestion} - {$t.dashboard?.suggested } ({Math.round(suggestion.confidence * 100)}%) + {$t.dashboard?.suggested } ({Math.round(suggestion.confidence * 100)}%) {:else} - {$t.dashboard?.not_mapped } + {$t.dashboard?.not_mapped } {/if}
- +
+
+ - + {#each paginatedDashboards as dashboard (dashboard.id)} - + - - -
handleSelectAll((e.target as HTMLInputElement).checked)} - class="h-4 w-4 text-primary border-gray-300 rounded focus-visible:ring-primary-ring" + class="h-4 w-4 text-primary border-border-strong rounded focus-visible:ring-primary-ring" /> handleSort("title")} > {$t.dashboard.title} @@ -587,7 +587,7 @@ : ""} handleSort("last_modified")} > {$t.dashboard.last_modified} @@ -598,7 +598,7 @@ : ""} handleSort("status")} > {$t.dashboard.status} @@ -610,9 +610,9 @@
+ {new Date(dashboard.last_modified).toLocaleDateString()} + @@ -652,7 +652,7 @@
-
+
{($t.dashboard?.showing ) .replace("{start}", (currentPage * pageSize + 1).toString()) .replace( diff --git a/frontend/src/components/StartupEnvironmentWizard.svelte b/frontend/src/components/StartupEnvironmentWizard.svelte index 803d5f05..6a40fda5 100644 --- a/frontend/src/components/StartupEnvironmentWizard.svelte +++ b/frontend/src/components/StartupEnvironmentWizard.svelte @@ -1,7 +1,7 @@ - + {#if open} -
-
-
+
+
+

{$t.nav?.dashboards}

{$t.dashboard?.setup_title || "Configure your first environment"}

-

{$t.dashboard?.setup_intro || "Dashboards need at least one Superset environment. Create it here instead of landing on an empty screen."}

+

{$t.dashboard?.setup_intro || "Dashboards need at least one Superset environment. Create it here instead of landing on an empty screen."}

-
@@ -136,9 +136,9 @@

{$t.dashboard?.setup_card_title || "What happens next"}

{$t.dashboard?.setup_card_body || "The wizard saves a Superset endpoint, validates login, and immediately makes the environment available in the global selector."}

-
-

{$t.dashboard?.setup_checklist_title || "Prepare these values"}

-
    +
    +

    {$t.dashboard?.setup_checklist_title || "Prepare these values"}

    +
    • {$t.dashboard?.setup_checklist_url || "Superset base URL without /api/v1"}
    • {$t.dashboard?.setup_checklist_user || "Service username with access to dashboards"}
    • {$t.dashboard?.setup_checklist_pass || "Password for the selected Superset account"}
      • @@ -146,14 +146,14 @@
-
+

{$t.dashboard?.setup_step_title || "Starter flow"}

-
+

1. {$t.dashboard?.setup_step_one || "Create the first environment"}

2. {$t.dashboard?.setup_step_two || "Select it automatically for the current session"}

3. {$t.dashboard?.setup_step_three || "Load dashboard inventory for that environment"}

-
@@ -162,50 +162,50 @@
-
{#if submitError} -
{submitError}
+
{submitError}
{/if}
-
- -
diff --git a/frontend/src/components/TaskHistory.svelte b/frontend/src/components/TaskHistory.svelte index 7c18c9f9..86ef3f1e 100644 --- a/frontend/src/components/TaskHistory.svelte +++ b/frontend/src/components/TaskHistory.svelte @@ -139,11 +139,11 @@ // @POST: Returns tailwind color class string. function getStatusColor(status) { const s = status?.toLowerCase(); - if (s === "success" || s === "completed") return "bg-green-100 text-green-800"; - if (s === "failed" || s === "error") return "bg-red-100 text-red-800"; - if (s === "running" || s === "in_progress") return "bg-blue-100 text-blue-800"; - if (s === "partial" || s === "partial_success") return "bg-amber-100 text-amber-800"; - return "bg-gray-100 text-gray-800"; + if (s === "success" || s === "completed") return "bg-success-light text-success"; + if (s === "failed" || s === "error") return "bg-destructive-light text-destructive"; + if (s === "running" || s === "in_progress") return "bg-primary-light text-primary"; + if (s === "partial" || s === "partial_success") return "bg-warning-light text-warning"; + return "bg-surface-muted text-text"; } // #endregion getStatusColor:Function @@ -171,30 +171,30 @@ // #endregion onDestroy:Function -
+
-

+

{$t.tasks?.recent }

-
- @@ -202,25 +202,25 @@
{#if loading && tasks.length === 0} -
{$t.tasks?.loading }
+
{$t.tasks?.loading }
{:else if error} -
{error}
+
{error}
{:else if tasks.length === 0} -
{$t.tasks?.no_tasks }
+
{$t.tasks?.no_tasks }
{:else} -
    +
      {#each tasks as task}
{:else} @@ -106,7 +106,7 @@