busya/ss-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(frontend): migrate inline SVGs to Icon component (10 files, 36 icons)

Browse Source 
Replaced 36 inline <svg> patterns with <Icon name="..."> from $lib/ui:
- GitManager (9), Toast (5), migration/+page (12), datasets/[id] (3),
  TaskRunner (2), GitWorkspacePanel (2), dashboards/+page (1),
  dashboards/[id] (1), TaskHistory (1)
This commit is contained in:
busya
2026-06-17 15:13:08 +03:00
parent d0c66db691
commit 0350fd6e19
10 changed files with 69 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/routes/migration/+page.svelte
View File

@@ -46,7 +46,7 @@
import { MigrationModel } from "../../lib/models/MigrationModel.svelte.ts";
import { t } from "$lib/i18n/index.svelte.js";
import { Button, Card, PageHeader } from "$lib/ui";
import { Button, Card, Icon, PageHeader } from "$lib/ui";
// ── Model: single source of truth ───────────────────────────────
const model = new MigrationModel();
@@ -87,13 +87,9 @@
variant="ghost"
onclick={() => model.toggleTaskHistory()}
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
</svg>
<Icon name="clipboard" size={16} strokeWidth={2} />
{$t.tasks?.recent || "Task History"}
<svg class="w-4 h-4 transition-transform" class:rotate-180={model.showTaskHistory} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
<Icon name="chevronDown" size={16} class="transition-transform {model.showTaskHistory ? 'rotate-180' : ''}" strokeWidth={2} />
</Button>
</div>
<!-- #endregion MigrationHeader -->
@@ -147,9 +143,7 @@
${(s.step <= model.currentStep || (s.step === 2 && model.stepReady[1]) || (s.step === 3 && model.stepReady[1] && model.stepReady[2])) ? 'cursor-pointer hover:border-primary-ring' : 'cursor-not-allowed'}
`}>
{#if model.currentStep > s.step}
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
</svg>
<Icon name="check" size={20} strokeWidth={2.5} />
{:else}
{s.step}
{/if}
@@ -195,9 +189,7 @@
<p class="text-sm font-medium text-destructive">{model.error}</p>
</div>
<Button variant="ghost" size="sm" onclick={() => model.clearError()} aria-label={$t.common?.close || "Close"}>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<Icon name="close" size={16} strokeWidth={2} />
</Button>
</div>
</div>
@@ -240,9 +232,7 @@
{#if model.sourceEnvId && model.targetEnvId && model.sourceEnvId === model.targetEnvId}
<div class="mt-4 p-3 bg-warning-light border border-warning-ring rounded-lg">
<p class="text-sm text-warning flex items-center gap-2">
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
<Icon name="warning" size={16} class="flex-shrink-0" strokeWidth={2} />
{$t.migration?.different_envs || "Source and target environments must be different."}
</p>
</div>
@@ -333,17 +323,13 @@
onclick={() => model.fetchDatabases()}
disabled={model.fetchingDbs || !model.sourceEnvId || !model.targetEnvId}
>
<svg class="w-3.5 h-3.5" class:animate-spin={model.fetchingDbs} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
<Icon name="refresh" size={14} class={model.fetchingDbs ? 'animate-spin' : ''} strokeWidth={2} />
{$t.migration?.fetch_dbs || "Fetch Databases"}
</Button>
</div>
{#if model.fetchingDbs}
<div class="flex items-center gap-2 text-sm text-text-muted">
<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
<Icon name="refresh" size={16} class="animate-spin" strokeWidth={2} />
<span>{$t.migration?.loading_dbs || "Loading databases and suggestions..."}</span>
</div>
{:else if model.sourceDatabases.length > 0}
@@ -371,7 +357,7 @@
disabled={!model.stepReady[2] || model.dryRunLoading}
>
{#if model.dryRunLoading}
<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
<Icon name="refresh" size={16} class="animate-spin" strokeWidth={2} />
{/if}
{$t.dashboard?.view_summary || "Dry Run"}
</Button>
@@ -415,9 +401,7 @@
<div class="p-4 border border-border rounded-xl bg-surface-card">
<div class="flex items-center gap-2 mb-3">
<div class="w-8 h-8 rounded-lg bg-info-light flex items-center justify-center">
<svg class="w-4 h-4 text-info" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
<Icon name="dashboard" size={16} class="text-info" strokeWidth={2} />
</div>
<h4 class="text-sm font-semibold text-text">{$t.dashboard?.title || "Dashboards"}</h4>
</div>
@@ -467,9 +451,7 @@
<div class="p-4 border border-border rounded-xl bg-surface-card">
<div class="flex items-center gap-2 mb-3">
<div class="w-8 h-8 rounded-lg bg-success-light flex items-center justify-center">
<svg class="w-4 h-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
</svg>
<Icon name="database" size={16} class="text-success" strokeWidth={2} />
</div>
<h4 class="text-sm font-semibold text-text">{$t.dashboard?.linked_resources || "Datasets"}</h4>
</div>
@@ -561,9 +543,7 @@
<!-- Raw JSON Details -->
<details class="border border-border rounded-xl overflow-hidden">
<summary class="px-4 py-3 bg-surface-muted cursor-pointer text-sm font-medium text-text hover:bg-surface-muted transition-colors flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
<Icon name="code" size={16} strokeWidth={2} />
{$t.tasks?.diff_preview || "Diff JSON"}
</summary>
<pre class="p-4 max-h-72 overflow-auto text-xs bg-surface-muted text-text">{JSON.stringify(model.dryRunResult, null, 2)}</pre>
@@ -600,9 +580,7 @@
{#if model.currentStep === 4 && !activeTask}
<Card padding="none" class="mb-6">
<div class="flex flex-col items-center justify-center p-12">
<svg class="w-16 h-16 text-info mb-4 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<Icon name="lightning" size={64} class="text-info mb-4 animate-pulse" strokeWidth={1.5} />
<h3 class="text-lg font-semibold text-text mb-2">{$t.migration?.starting || "Starting Migration..."}</h3>
<p class="text-sm text-text-muted">{$t.common.loading || "Please wait..."}</p>
<Button variant="secondary" class="mt-6" onclick={() => model.goToStep(3)}>