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

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.
2026-03-27 23:53:09 +03:00
parent d4659146fc
commit a3aa5912d9
74 changed files with 2954 additions and 1750 deletions
@@ -3,13 +3,15 @@
 	import type { Settings } from '$lib/types';
 	import FormField from '$lib/components/FormField.svelte';
 	import { toasts } from '$lib/stores/toast';
+	import { t } from '$lib/i18n';
+	import { IconLoader, IconCopy, IconRefresh } from '$lib/components/icons';
+	import Skeleton from '$lib/components/Skeleton.svelte';

 	let loading = $state(true);
 	let saving = $state(false);
 	let webhookUrl = $state('');
 	let regenerating = $state(false);

-	// Settings fields
 	let domain = $state('');
 	let serverIp = $state('');
 	let network = $state('');
@@ -21,37 +23,26 @@

 	function validateDomain(value: string): string {
 		if (!value.trim()) return 'Domain is required';
-		if (!/^[a-zA-Z0-9][a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/.test(value.trim())) {
-			return 'Invalid domain format';
-		}
+		if (!/^[a-zA-Z0-9][a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/.test(value.trim())) return 'Invalid domain format';
 		return '';
 	}

 	function validateIp(value: string): string {
 		if (!value.trim()) return '';
-		if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(value.trim())) {
-			return 'Invalid IP address format';
-		}
+		if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(value.trim())) return 'Invalid IP address format';
 		return '';
 	}

 	function validatePollingInterval(value: string): string {
 		if (!value.trim()) return '';
 		const num = parseInt(value, 10);
-		if (isNaN(num) || num < 10 || num > 86400) {
-			return 'Polling interval must be between 10 and 86400 seconds';
-		}
+		if (isNaN(num) || num < 10 || num > 86400) return 'Polling interval must be between 10 and 86400 seconds';
 		return '';
 	}

 	function validateUrl(value: string): string {
 		if (!value.trim()) return '';
-		try {
-			new URL(value.trim());
-			return '';
-		} catch {
-			return 'Invalid URL format';
-		}
+		try { new URL(value.trim()); return ''; } catch { return 'Invalid URL format'; }
 	}

 	function validateAll(): boolean {
@@ -79,8 +70,7 @@
 			pollingInterval = settings.polling_interval ?? '';
 			notificationUrl = settings.notification_url ?? '';
 		} catch (err) {
-			const message = err instanceof Error ? err.message : 'Failed to load settings';
-			toasts.error(message);
+			toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.loadFailed'));
 		} finally {
 			loading = false;
 		}
@@ -90,29 +80,21 @@
 		try {
 			const result = await getWebhookUrl();
 			webhookUrl = result.url;
-		} catch {
-			// Webhook URL may not be configured yet
-		}
+		} catch { /* may not be configured */ }
 	}

 	async function handleSave() {
 		if (!validateAll()) return;
-
 		saving = true;
 		try {
-			const payload: Partial<Settings> = {
-				domain: domain.trim(),
-				server_ip: serverIp.trim(),
-				network: network.trim(),
-				subdomain_pattern: subdomainPattern.trim(),
-				polling_interval: pollingInterval.trim(),
+			await updateSettings({
+				domain: domain.trim(), server_ip: serverIp.trim(), network: network.trim(),
+				subdomain_pattern: subdomainPattern.trim(), polling_interval: pollingInterval.trim(),
 				notification_url: notificationUrl.trim()
-			};
-			await updateSettings(payload);
-			toasts.success('Settings saved successfully');
+			});
+			toasts.success($t('settingsGeneral.saved'));
 		} catch (err) {
-			const message = err instanceof Error ? err.message : 'Failed to save settings';
-			toasts.error(message);
+			toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.saveFailed'));
 		} finally {
 			saving = false;
 		}
@@ -123,155 +105,83 @@
 		try {
 			const result = await regenerateWebhookUrl();
 			webhookUrl = result.url;
-			toasts.success('Webhook URL regenerated');
+			toasts.success($t('settingsGeneral.regenerated'));
 		} catch (err) {
-			const message = err instanceof Error ? err.message : 'Failed to regenerate webhook URL';
-			toasts.error(message);
+			toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.regenerateFailed'));
 		} finally {
 			regenerating = false;
 		}
 	}

-	$effect(() => {
-		loadSettings();
-		loadWebhookUrlValue();
-	});
+	$effect(() => { loadSettings(); loadWebhookUrlValue(); });
 </script>

 <svelte:head>
-	<title>General Settings - Docker Watcher</title>
+	<title>{$t('settingsGeneral.title')} - {$t('app.name')}</title>
 </svelte:head>

 <div class="space-y-6">
 	{#if loading}
-		<div class="flex items-center justify-center py-12">
-			<svg class="h-8 w-8 animate-spin text-blue-600" viewBox="0 0 24 24" fill="none">
-				<circle
-					class="opacity-25"
-					cx="12"
-					cy="12"
-					r="10"
-					stroke="currentColor"
-					stroke-width="4"
-				></circle>
-				<path
-					class="opacity-75"
-					fill="currentColor"
-					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-				></path>
-			</svg>
+		<div class="space-y-4">
+			<Skeleton height="2rem" width="12rem" />
+			<div class="grid grid-cols-2 gap-4">
+				{#each Array(6) as _}
+					<Skeleton height="4rem" />
+				{/each}
+			</div>
 		</div>
 	{:else}
-		<!-- Global settings form -->
-		<div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-			<h2 class="mb-4 text-lg font-semibold text-gray-800">Global Configuration</h2>
-
+		<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-6 shadow-[var(--shadow-sm)]">
+			<h2 class="mb-4 text-lg font-semibold text-[var(--text-primary)]">{$t('settingsGeneral.globalConfig')}</h2>
 			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-				<FormField
-					label="Domain"
-					name="domain"
-					bind:value={domain}
-					placeholder="example.com"
-					required
-					error={errors.domain ?? ''}
-					helpText="Base domain for subdomain routing"
-				/>
-
-				<FormField
-					label="Server IP"
-					name="serverIp"
-					bind:value={serverIp}
-					placeholder="93.84.96.191"
-					error={errors.serverIp ?? ''}
-					helpText="Public IP address of the server"
-				/>
-
-				<FormField
-					label="Docker Network"
-					name="network"
-					bind:value={network}
-					placeholder="staging-net"
-					helpText="Docker network for deployed containers"
-				/>
-
-				<FormField
-					label="Subdomain Pattern"
-					name="subdomainPattern"
-					bind:value={subdomainPattern}
-					placeholder="stage-{stage}-{project}"
-					helpText="Pattern for auto-generated subdomains"
-				/>
-
-				<FormField
-					label="Polling Interval (seconds)"
-					name="pollingInterval"
-					type="number"
-					bind:value={pollingInterval}
-					placeholder="60"
-					error={errors.pollingInterval ?? ''}
-					helpText="How often to check registries for new tags (10-86400)"
-				/>
-
-				<FormField
-					label="Notification URL"
-					name="notificationUrl"
-					bind:value={notificationUrl}
-					placeholder="https://notify.example.com/webhook"
-					error={errors.notificationUrl ?? ''}
-					helpText="Webhook URL for deploy notifications"
-				/>
+				<FormField label={$t('settingsGeneral.domain')} name="domain" bind:value={domain} placeholder="example.com" required error={errors.domain ?? ''} helpText={$t('settingsGeneral.domainHelp')} />
+				<FormField label={$t('settingsGeneral.serverIp')} name="serverIp" bind:value={serverIp} placeholder="93.84.96.191" error={errors.serverIp ?? ''} helpText={$t('settingsGeneral.serverIpHelp')} />
+				<FormField label={$t('settingsGeneral.dockerNetwork')} name="network" bind:value={network} placeholder="staging-net" helpText={$t('settingsGeneral.dockerNetworkHelp')} />
+				<FormField label={$t('settingsGeneral.subdomainPattern')} name="subdomainPattern" bind:value={subdomainPattern} placeholder="stage-{'{stage}'}-{'{project}'}" helpText={$t('settingsGeneral.subdomainPatternHelp')} />
+				<FormField label={$t('settingsGeneral.pollingInterval')} name="pollingInterval" type="number" bind:value={pollingInterval} placeholder="60" error={errors.pollingInterval ?? ''} helpText={$t('settingsGeneral.pollingIntervalHelp')} />
+				<FormField label={$t('settingsGeneral.notificationUrl')} name="notificationUrl" bind:value={notificationUrl} placeholder="https://notify.example.com/webhook" error={errors.notificationUrl ?? ''} helpText={$t('settingsGeneral.notificationUrlHelp')} />
 			</div>
-
 			<div class="mt-6">
-				<button
-					onclick={handleSave}
-					disabled={saving}
-					class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
-				>
-					{saving ? 'Saving...' : 'Save Settings'}
+				<button onclick={handleSave} disabled={saving} class="inline-flex items-center gap-2 rounded-lg bg-[var(--color-brand-600)] px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-150 hover:bg-[var(--color-brand-700)] disabled:opacity-50 active:animate-press">
+					{#if saving}<IconLoader size={16} />{/if}
+					{saving ? $t('settingsGeneral.saving') : $t('settingsGeneral.saveSettings')}
 				</button>
 			</div>
 		</div>

-		<!-- Webhook URL section -->
-		<div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-			<h2 class="mb-4 text-lg font-semibold text-gray-800">Webhook URL</h2>
-			<p class="mb-3 text-sm text-gray-500">
-				This secret URL receives image push notifications from your CI pipeline.
-			</p>
+		<!-- Webhook URL -->
+		<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-6 shadow-[var(--shadow-sm)]">
+			<h2 class="mb-1 text-lg font-semibold text-[var(--text-primary)]">{$t('settingsGeneral.webhookUrl')}</h2>
+			<p class="mb-3 text-sm text-[var(--text-secondary)]">{$t('settingsGeneral.webhookDesc')}</p>

 			{#if webhookUrl}
 				<div class="flex items-center gap-3">
-					<code
-						class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-sm font-mono text-gray-700 break-all"
-					>
+					<code class="flex-1 rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card-hover)] px-3 py-2.5 font-mono text-sm text-[var(--text-secondary)] break-all">
 						{webhookUrl}
 					</code>
 					<button
-						onclick={() => {
-							navigator.clipboard.writeText(webhookUrl);
-							toasts.info('Webhook URL copied to clipboard');
-						}}
-						class="rounded-md border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
+						onclick={() => { navigator.clipboard.writeText(webhookUrl); toasts.info($t('settingsGeneral.copied')); }}
+						class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--border-primary)] px-3 py-2.5 text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] transition-colors"
 					>
-						Copy
+						<IconCopy size={16} />
+						{$t('settingsGeneral.copy')}
 					</button>
 				</div>
 			{:else}
-				<p class="text-sm text-gray-400 italic">No webhook URL configured</p>
+				<p class="text-sm text-[var(--text-tertiary)] italic">{$t('settingsGeneral.noWebhookUrl')}</p>
 			{/if}

 			<div class="mt-4">
 				<button
 					onclick={handleRegenerateWebhook}
 					disabled={regenerating}
-					class="rounded-md border border-red-300 px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 disabled:opacity-50"
+					class="inline-flex items-center gap-2 rounded-lg border border-[var(--color-danger)] px-4 py-2 text-sm font-medium text-[var(--color-danger)] hover:bg-[var(--color-danger-light)] transition-colors disabled:opacity-50 active:animate-press"
 				>
-					{regenerating ? 'Regenerating...' : 'Regenerate URL'}
+					{#if regenerating}<IconLoader size={16} />{/if}
+					<IconRefresh size={16} />
+					{regenerating ? $t('settingsGeneral.regenerating') : $t('settingsGeneral.regenerateUrl')}
 				</button>
-				<p class="mt-1 text-xs text-gray-500">
-					Warning: regenerating will invalidate the current URL. Update your CI pipelines.
-				</p>
+				<p class="mt-1 text-xs text-[var(--text-tertiary)]">{$t('settingsGeneral.regenerateWarning')}</p>
 			</div>
 		</div>
 	{/if}