alexei.dolgolyov/tiny-forge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docker-watcher): phase 14 - frontend polish & modern UI

Browse Source 
Design system with CSS custom properties (light/dark themes).
38 Lucide SVG icon components. Dark mode with system preference.
EN/RU localization with i18n store. Skeleton loaders, empty states,
toggle switches, micro-interactions. Responsive sidebar with
mobile hamburger menu. All pages polished with consistent styling.
This commit is contained in:
Admin
2026-03-27 23:53:09 +03:00
parent d4659146fc
commit a3aa5912d9
74 changed files with 2954 additions and 1750 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/projects/[id]/env/+page.svelte
Vendored
+108 -155
View File
@@ -3,6 +3,11 @@
import type { Stage, StageEnv } from '$lib/types';
import * as api from '$lib/api';
import { toasts } from '$lib/stores/toast';
import { t } from '$lib/i18n';
import { IconChevronRight, IconPlus, IconEdit, IconTrash, IconCheck, IconX, IconLock, IconLoader } from '$lib/components/icons';
import ToggleSwitch from '$lib/components/ToggleSwitch.svelte';
import Skeleton from '$lib/components/Skeleton.svelte';
import EmptyState from '$lib/components/EmptyState.svelte';
let stages = $state<Stage[]>([]);
let selectedStageId = $state('');
@@ -12,13 +17,11 @@
let envLoading = $state(false);
let error = $state('');
// New env var form.
let newKey = $state('');
let newValue = $state('');
let newEncrypted = $state(false);
let saving = $state(false);
// Edit state.
let editingId = $state('');
let editKey = $state('');
let editValue = $state('');
@@ -32,19 +35,16 @@
try {
const detail = await api.getProject(projectId);
stages = detail.stages;
// Parse project-level env.
try {
projectEnv = JSON.parse(detail.project.env || '{}');
} catch {
projectEnv = {};
}
if (stages.length > 0 && !selectedStageId) {
selectedStageId = stages[0].id;
}
} catch (e) {
error = e instanceof Error ? e.message : 'Failed to load project';
error = e instanceof Error ? e.message : $t('envEditor.loadFailed');
} finally {
loading = false;
}
@@ -56,7 +56,7 @@
try {
envVars = await api.listStageEnv(projectId, stageId);
} catch (e) {
toasts.error(e instanceof Error ? e.message : 'Failed to load env vars');
toasts.error(e instanceof Error ? e.message : $t('envEditor.loadEnvFailed'));
envVars = [];
} finally {
envLoading = false;
@@ -75,10 +75,10 @@
newKey = '';
newValue = '';
newEncrypted = false;
toasts.success('Environment variable added');
toasts.success($t('envEditor.envAdded'));
await loadStageEnv(selectedStageId);
} catch (e) {
toasts.error(e instanceof Error ? e.message : 'Failed to add env var');
toasts.error(e instanceof Error ? e.message : $t('envEditor.addFailed'));
} finally {
saving = false;
}
@@ -108,10 +108,10 @@
}
await api.updateStageEnv(projectId, selectedStageId, editingId, data);
editingId = '';
toasts.success('Environment variable updated');
toasts.success($t('envEditor.envUpdated'));
await loadStageEnv(selectedStageId);
} catch (e) {
toasts.error(e instanceof Error ? e.message : 'Failed to update env var');
toasts.error(e instanceof Error ? e.message : $t('envEditor.updateFailed'));
} finally {
saving = false;
}
@@ -120,19 +120,13 @@
async function handleDelete(envId: string) {
try {
await api.deleteStageEnv(projectId, selectedStageId, envId);
toasts.success('Environment variable deleted');
toasts.success($t('envEditor.envDeleted'));
await loadStageEnv(selectedStageId);
} catch (e) {
toasts.error(e instanceof Error ? e.message : 'Failed to delete env var');
toasts.error(e instanceof Error ? e.message : $t('envEditor.deleteFailed'));
}
}
// Determine if a key is inherited from project level.
function isInherited(key: string): boolean {
return key in projectEnv;
}
// Determine if a key is overridden at stage level.
function isOverridden(key: string): boolean {
return envVars.some((e) => e.key === key);
}
@@ -150,36 +144,37 @@
</script>
<svelte:head>
<title>Environment Variables - Docker Watcher</title>
<title>{$t('envEditor.title')} - {$t('app.name')}</title>
</svelte:head>
<div>
<div class="space-y-6">
<!-- Header -->
<div class="flex items-center gap-2">
<a href="/projects/{projectId}" class="text-sm text-gray-500 hover:text-gray-700">Project</a>
<span class="text-sm text-gray-400">/</span>
<h1 class="text-2xl font-bold text-gray-900">Environment Variables</h1>
<div>
<div class="flex items-center gap-1.5 text-sm text-[var(--text-tertiary)]">
<a href="/projects/{projectId}" class="hover:text-[var(--text-link)] transition-colors">{$t('common.project')}</a>
<IconChevronRight size={14} />
</div>
<h1 class="mt-1 text-2xl font-bold text-[var(--text-primary)]">{$t('envEditor.title')}</h1>
<p class="mt-1 text-sm text-[var(--text-secondary)]">{$t('envEditor.description')}</p>
</div>
<p class="mt-1 text-sm text-gray-500">
Manage per-stage environment variable overrides. Stage-level values override project-level defaults.
</p>
{#if loading}
<div class="mt-8 flex items-center justify-center py-12">
<div class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-indigo-600"></div>
<div class="space-y-4">
<Skeleton width="16rem" height="2.5rem" />
<Skeleton height="12rem" />
</div>
{:else if error}
<div class="mt-4 rounded-md bg-red-50 p-4">
<p class="text-sm text-red-700">{error}</p>
<div class="rounded-xl border border-[var(--color-danger-light)] bg-[var(--color-danger-light)] p-4">
<p class="text-sm text-[var(--color-danger)]">{error}</p>
</div>
{:else}
<!-- Stage selector -->
<div class="mt-6">
<label for="stage-select" class="block text-sm font-medium text-gray-700">Stage</label>
<div>
<label for="stage-select" class="block text-sm font-medium text-[var(--text-primary)]">{$t('envEditor.stage')}</label>
<select
id="stage-select"
bind:value={selectedStageId}
class="mt-1 block w-64 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
class="mt-1 block w-64 rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-3 py-2 text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-2 focus:ring-[var(--color-brand-500)] focus:outline-none"
>
{#each stages as stage (stage.id)}
<option value={stage.id}>{stage.name}</option>
@@ -188,37 +183,31 @@
</div>
{#if stages.length === 0}
<div class="mt-6 rounded-lg border-2 border-dashed border-gray-300 p-8 text-center">
<p class="text-sm text-gray-500">No stages configured. Add stages to the project first.</p>
</div>
<EmptyState title={$t('envEditor.noStages')} icon="instances" />
{:else}
<!-- Project-level env (read-only reference) -->
<!-- Project-level env -->
{#if Object.keys(projectEnv).length > 0}
<div class="mt-6">
<h2 class="text-sm font-semibold text-gray-700">Project-Level Defaults</h2>
<div class="mt-2 rounded-lg border border-gray-200 bg-gray-50">
<table class="min-w-full divide-y divide-gray-200">
<div>
<h2 class="text-sm font-semibold text-[var(--text-secondary)]">{$t('envEditor.projectDefaults')}</h2>
<div class="mt-2 overflow-hidden rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card-hover)]">
<table class="min-w-full divide-y divide-[var(--border-primary)]">
<thead>
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Key</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
<th class="px-4 py-2.5 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.key')}</th>
<th class="px-4 py-2.5 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.value')}</th>
<th class="px-4 py-2.5 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.source')}</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tbody class="divide-y divide-[var(--border-secondary)]">
{#each Object.entries(projectEnv) as [key, value] (key)}
<tr class={isOverridden(key) ? 'opacity-50' : ''}>
<td class="whitespace-nowrap px-4 py-2 font-mono text-sm text-gray-900">{key}</td>
<td class="px-4 py-2 font-mono text-sm text-gray-600">{value}</td>
<td class="px-4 py-2 text-sm">
<td class="whitespace-nowrap px-4 py-2.5 font-mono text-sm text-[var(--text-primary)]">{key}</td>
<td class="px-4 py-2.5 font-mono text-sm text-[var(--text-secondary)]">{value}</td>
<td class="px-4 py-2.5 text-sm">
{#if isOverridden(key)}
<span class="rounded bg-yellow-50 px-2 py-0.5 text-xs font-medium text-yellow-700">
overridden
</span>
<span class="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">{$t('envEditor.overridden')}</span>
{:else}
<span class="rounded bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">
inherited
</span>
<span class="rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">{$t('envEditor.inherited')}</span>
{/if}
</td>
</tr>
@@ -230,143 +219,107 @@
{/if}
<!-- Stage-level overrides -->
<div class="mt-6">
<h2 class="text-sm font-semibold text-gray-700">Stage Overrides</h2>
<div>
<h2 class="text-sm font-semibold text-[var(--text-secondary)]">{$t('envEditor.stageOverrides')}</h2>
{#if envLoading}
<div class="mt-4 flex items-center justify-center py-8">
<div class="h-6 w-6 animate-spin rounded-full border-4 border-gray-200 border-t-indigo-600"></div>
<div class="mt-4 flex items-center justify-center gap-2 py-8 text-[var(--text-tertiary)]">
<IconLoader size={20} />
<span class="text-sm">{$t('common.loading')}</span>
</div>
{:else}
<div class="mt-2 rounded-lg border border-gray-200 bg-white shadow-sm">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<div class="mt-2 overflow-hidden rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] shadow-[var(--shadow-sm)]">
<table class="min-w-full divide-y divide-[var(--border-primary)]">
<thead class="bg-[var(--surface-card-hover)]">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Key</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Secret</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Source</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.key')}</th>
<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.value')}</th>
<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.secret')}</th>
<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.source')}</th>
<th class="px-4 py-3 text-right text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('envEditor.actions')}</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tbody class="divide-y divide-[var(--border-secondary)]">
{#each envVars as env (env.id)}
{#if editingId === env.id}
<tr class="bg-indigo-50">
<td class="px-4 py-2">
<input
type="text"
bind:value={editKey}
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
/>
<tr class="bg-[var(--color-brand-50)]/30">
<td class="px-4 py-2.5">
<input type="text" bind:value={editKey} class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
</td>
<td class="px-4 py-2">
<input
type={editEncrypted ? 'password' : 'text'}
bind:value={editValue}
placeholder={env.encrypted ? 'Leave empty to keep current' : ''}
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
/>
<td class="px-4 py-2.5">
<input type={editEncrypted ? 'password' : 'text'} bind:value={editValue} placeholder={env.encrypted ? 'Leave empty to keep current' : ''} class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
</td>
<td class="px-4 py-2">
<input type="checkbox" bind:checked={editEncrypted} class="rounded" />
<td class="px-4 py-2.5">
<ToggleSwitch bind:checked={editEncrypted} label="Secret" />
</td>
<td class="px-4 py-2"></td>
<td class="px-4 py-2 text-right">
<button
type="button"
class="mr-2 text-sm font-medium text-indigo-600 hover:text-indigo-800"
disabled={saving}
onclick={handleUpdate}
>
Save
</button>
<button
type="button"
class="text-sm text-gray-500 hover:text-gray-700"
onclick={cancelEdit}
>
Cancel
</button>
<td class="px-4 py-2.5"></td>
<td class="px-4 py-2.5 text-right">
<div class="flex items-center justify-end gap-1">
<button type="button" class="rounded-lg p-1.5 text-emerald-600 hover:bg-emerald-50 transition-colors" disabled={saving} onclick={handleUpdate} title={$t('envEditor.save')}>
<IconCheck size={16} />
</button>
<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-[var(--surface-card-hover)] transition-colors" onclick={cancelEdit} title={$t('common.cancel')}>
<IconX size={16} />
</button>
</div>
</td>
</tr>
{:else}
<tr>
<td class="whitespace-nowrap px-4 py-2 font-mono text-sm text-gray-900">{env.key}</td>
<td class="px-4 py-2 font-mono text-sm text-gray-600">
<tr class="hover:bg-[var(--surface-card-hover)] transition-colors">
<td class="whitespace-nowrap px-4 py-2.5 font-mono text-sm text-[var(--text-primary)]">{env.key}</td>
<td class="px-4 py-2.5 font-mono text-sm text-[var(--text-secondary)]">
{env.encrypted ? '••••••••' : env.value}
</td>
<td class="px-4 py-2">
<td class="px-4 py-2.5">
{#if env.encrypted}
<span class="rounded bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-700">
secret
<span class="inline-flex items-center gap-1 rounded-full bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-700">
<IconLock size={12} />
{$t('envEditor.secret')}
</span>
{/if}
</td>
<td class="px-4 py-2 text-sm">
{#if isInherited(env.key)}
<span class="rounded bg-yellow-50 px-2 py-0.5 text-xs font-medium text-yellow-700">
overrides project
</span>
<td class="px-4 py-2.5 text-sm">
{#if env.key in projectEnv}
<span class="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">{$t('envEditor.overridesProject')}</span>
{:else}
<span class="rounded bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">
stage only
</span>
<span class="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">{$t('envEditor.stageOnly')}</span>
{/if}
</td>
<td class="whitespace-nowrap px-4 py-2 text-right">
<button
type="button"
class="mr-2 text-sm font-medium text-indigo-600 hover:text-indigo-800"
onclick={() => startEdit(env)}
>
{env.encrypted ? 'Change' : 'Edit'}
</button>
<button
type="button"
class="text-sm font-medium text-red-600 hover:text-red-800"
onclick={() => handleDelete(env.id)}
>
Delete
</button>
<td class="whitespace-nowrap px-4 py-2.5 text-right">
<div class="flex items-center justify-end gap-1">
<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-link)] transition-colors" onclick={() => startEdit(env)} title={$t('envEditor.edit')}>
<IconEdit size={16} />
</button>
<button type="button" class="rounded-lg p-1.5 text-[var(--text-tertiary)] hover:bg-red-50 hover:text-red-600 transition-colors" onclick={() => handleDelete(env.id)} title={$t('envEditor.delete')}>
<IconTrash size={16} />
</button>
</div>
</td>
</tr>
{/if}
{/each}
<!-- Add new row -->
<tr class="bg-gray-50">
<td class="px-4 py-2">
<input
type="text"
bind:value={newKey}
placeholder="KEY_NAME"
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
/>
<tr class="bg-[var(--surface-card-hover)]">
<td class="px-4 py-2.5">
<input type="text" bind:value={newKey} placeholder="KEY_NAME" class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
</td>
<td class="px-4 py-2">
<input
type={newEncrypted ? 'password' : 'text'}
bind:value={newValue}
placeholder="value"
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
/>
<td class="px-4 py-2.5">
<input type={newEncrypted ? 'password' : 'text'} bind:value={newValue} placeholder="value" class="block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-2 py-1 font-mono text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:ring-1 focus:ring-[var(--color-brand-500)] focus:outline-none" />
</td>
<td class="px-4 py-2">
<label class="flex items-center gap-1 text-xs text-gray-600">
<input type="checkbox" bind:checked={newEncrypted} class="rounded" />
Secret
</label>
<td class="px-4 py-2.5">
<ToggleSwitch bind:checked={newEncrypted} label="Secret" />
</td>
<td class="px-4 py-2"></td>
<td class="px-4 py-2 text-right">
<td class="px-4 py-2.5"></td>
<td class="px-4 py-2.5 text-right">
<button
type="button"
class="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
class="inline-flex items-center gap-1 rounded-lg bg-[var(--color-brand-600)] px-3 py-1.5 text-xs font-medium text-white hover:bg-[var(--color-brand-700)] disabled:opacity-50 transition-colors active:animate-press"
disabled={!newKey.trim() || saving}
onclick={handleAdd}
>
{saving ? 'Adding...' : 'Add'}
<IconPlus size={14} />
{saving ? $t('envEditor.adding') : $t('envEditor.add')}
</button>
</td>
</tr>