fix: UI/UX consistency overhaul — fix 8 bugs, standardize design system

Bug fixes: - Backup refresh no longer re-renders entire page (separate refreshing state) - SSL cert button no longer flickers when no certs available - Volume mode selector rewritten to use proper scope system (7 scopes) - Navigation flicker eliminated when returning from env/volumes pages - Logout button moved to sidebar footer near theme/locale controls - Subdomain pattern now shows variable hint tooltip ({project}, {stage}, etc.) - SSL certificate selector moved to Credentials page with auto-save - Projects page now has search/filter by name, image, or registry Consistency improvements: - New Breadcrumb component replaces 5 inline implementations - New IconArrowLeft, IconChevronDown components replace inline SVGs - All inline spinners replaced with IconLoader component - 10 semantic badge classes with dark mode variants in tokens.css - Global disabled button cursor-not-allowed rule - Raw inputs in auth page replaced with FormField components - Missing aria-labels added to icon-only buttons - Error panels standardized to use design tokens
2026-04-04 21:34:36 +03:00
parent 27ec23921d
commit 216bd7e2db
23 changed files with 494 additions and 251 deletions
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { getSettings, updateSettings, getWebhookUrl, regenerateWebhookUrl, listNpmCertificates, testDnsConnection, listDnsZones } from '$lib/api';
+	import { getSettings, updateSettings, getWebhookUrl, regenerateWebhookUrl, testDnsConnection, listDnsZones } from '$lib/api';
 	import type { EntityPickerItem } from '$lib/types';
 	import FormField from '$lib/components/FormField.svelte';
 	import EntityPicker from '$lib/components/EntityPicker.svelte';
 	import { toasts } from '$lib/stores/toast';
 	import { t } from '$lib/i18n';
-	import { IconLoader, IconCopy, IconRefresh, IconShield, IconX } from '$lib/components/icons';
+	import { IconLoader, IconCopy, IconRefresh, IconX, IconInfo } from '$lib/components/icons';
 	import Skeleton from '$lib/components/Skeleton.svelte';

 	let loading = $state(true);
@@ -22,11 +22,6 @@
 	let notificationUrl = $state('');
 	let staleThresholdDays = $state('7');

-	let sslCertificateId = $state(0);
-	let sslCertName = $state('');
-	let certPickerOpen = $state(false);
-	let certPickerItems = $state<EntityPickerItem[]>([]);
-	let loadingCerts = $state(false);

 	// Proxy provider state.
 	let proxyProvider = $state('npm');
@@ -93,7 +88,6 @@
 			subdomainPattern = settings.subdomain_pattern ?? '';
 			pollingInterval = settings.polling_interval ?? '';
 			baseVolumePath = settings.base_volume_path ?? '';
-			sslCertificateId = settings.ssl_certificate_id ?? 0;
 			notificationUrl = settings.notification_url ?? '';
 			staleThresholdDays = String(settings.stale_threshold_days ?? 7);
 			proxyProvider = settings.proxy_provider ?? 'npm';
@@ -124,7 +118,6 @@
 				subdomain_pattern: subdomainPattern.trim(), polling_interval: pollingInterval.trim(),
 				base_volume_path: baseVolumePath.trim(), notification_url: notificationUrl.trim(),
 				proxy_provider: proxyProvider,
-				ssl_certificate_id: proxyProvider === 'npm' ? sslCertificateId : 0,
 				stale_threshold_days: Math.max(1, parseInt(staleThresholdDays, 10) || 7),
 				wildcard_dns: wildcardDns,
 				dns_provider: wildcardDns ? '' : dnsProvider,
@@ -155,52 +148,6 @@
 		}
 	}

-	async function openCertPicker() {
-		loadingCerts = true;
-		certPickerOpen = true;
-		try {
-			const certs = await listNpmCertificates();
-			certPickerItems = certs.map((cert): EntityPickerItem => ({
-				value: String(cert.id),
-				label: cert.nice_name || `Certificate #${cert.id}`,
-				description: cert.domain_names.join(', ')
-			}));
-		} catch (err) {
-			toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.noCertificatesFound'));
-			certPickerOpen = false;
-		} finally {
-			loadingCerts = false;
-		}
-	}
-
-	function handleCertSelect(value: string) {
-		const id = parseInt(value, 10);
-		sslCertificateId = id;
-		const item = certPickerItems.find((i) => i.value === value);
-		sslCertName = item?.label ?? '';
-		certPickerOpen = false;
-	}
-
-	function clearCertificate() {
-		sslCertificateId = 0;
-		sslCertName = '';
-	}
-
-	// When loading settings, try to resolve cert name if an ID is set.
-	async function resolveCertName() {
-		if (sslCertificateId <= 0) return;
-		try {
-			const certs = await listNpmCertificates();
-			const match = certs.find((c) => c.id === sslCertificateId);
-			if (match) {
-				sslCertName = match.nice_name || `Certificate #${match.id}`;
-			} else {
-				sslCertName = `Certificate #${sslCertificateId}`;
-			}
-		} catch {
-			sslCertName = `Certificate #${sslCertificateId}`;
-		}
-	}

 	async function openZonePicker() {
 		loadingZones = true;
@@ -262,7 +209,6 @@

 	async function init() {
 		await loadSettings();
-		await resolveCertName();
 		if (!wildcardDns && cloudflareZoneId) {
 			resolveZoneName();
 		}
@@ -293,7 +239,34 @@
 				<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')} />
+				<div>
+					<div class="flex items-center gap-1.5">
+						<label for="subdomainPattern" class="block text-sm font-medium text-[var(--text-primary)]">{$t('settingsGeneral.subdomainPattern')}</label>
+						<div class="group relative">
+							<button type="button" class="inline-flex items-center justify-center rounded-full text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] transition-colors" aria-label={$t('settingsGeneral.subdomainVarsTitle')}>
+								<IconInfo size={14} />
+							</button>
+							<div class="pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 w-64 -translate-x-1/2 rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] p-3 shadow-lg opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+								<p class="mb-2 text-xs font-semibold text-[var(--text-primary)]">{$t('settingsGeneral.subdomainVarsTitle')}</p>
+								<ul class="space-y-1 text-xs text-[var(--text-secondary)]">
+									<li><code class="rounded bg-[var(--surface-card-hover)] px-1 py-0.5 font-mono text-[var(--text-link)]">{'{project}'}</code> — {$t('settingsGeneral.varProject')}</li>
+									<li><code class="rounded bg-[var(--surface-card-hover)] px-1 py-0.5 font-mono text-[var(--text-link)]">{'{stage}'}</code> — {$t('settingsGeneral.varStage')}</li>
+									<li><code class="rounded bg-[var(--surface-card-hover)] px-1 py-0.5 font-mono text-[var(--text-link)]">{'{tag}'}</code> — {$t('settingsGeneral.varTag')}</li>
+									<li><code class="rounded bg-[var(--surface-card-hover)] px-1 py-0.5 font-mono text-[var(--text-link)]">{'{port}'}</code> — {$t('settingsGeneral.varPort')}</li>
+								</ul>
+								<div class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-[var(--border-primary)]"></div>
+							</div>
+						</div>
+					</div>
+					<input
+						id="subdomainPattern"
+						type="text"
+						bind:value={subdomainPattern}
+						placeholder="stage-{'{stage}'}-{'{project}'}"
+						class="mt-1.5 block w-full rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:border-[var(--color-brand-500)] focus:outline-none focus:ring-1 focus:ring-[var(--color-brand-500)]"
+					/>
+					<p class="mt-1 text-xs text-[var(--text-tertiary)]">{$t('settingsGeneral.subdomainPatternHelp')}</p>
+				</div>
 				<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.baseVolumePath')} name="baseVolumePath" bind:value={baseVolumePath} placeholder="/data" helpText={$t('settingsGeneral.baseVolumePathHelp')} />
 				<FormField label={$t('settingsGeneral.notificationUrl')} name="notificationUrl" bind:value={notificationUrl} placeholder="https://notify.example.com/webhook" error={errors.notificationUrl ?? ''} helpText={$t('settingsGeneral.notificationUrlHelp')} />
@@ -325,43 +298,7 @@
 				{/if}
 			</div>

-			<!-- SSL Certificate (NPM only) -->
-			{#if proxyProvider === 'npm'}
-			<div class="mt-6 border-t border-[var(--border-primary)] pt-4">
-				<div class="flex items-start gap-3">
-					<div class="flex-1">
-						<label class="block text-sm font-medium text-[var(--text-primary)]">{$t('settingsGeneral.sslCertificate')}</label>
-						<p class="mt-0.5 text-xs text-[var(--text-tertiary)]">{$t('settingsGeneral.sslCertificateHelp')}</p>
-						<div class="mt-2 flex items-center gap-2">
-							<button
-								type="button"
-								onclick={openCertPicker}
-								class="inline-flex items-center gap-2 rounded-lg border border-[var(--border-primary)] px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] transition-colors"
-							>
-								<IconShield size={16} />
-								{#if loadingCerts}
-									{$t('settingsGeneral.loadingCertificates')}
-								{:else if sslCertificateId > 0 && sslCertName}
-									{sslCertName}
-								{:else}
-									{$t('settingsGeneral.noCertificate')}
-								{/if}
-							</button>
-							{#if sslCertificateId > 0}
-								<button
-									type="button"
-									onclick={clearCertificate}
-									class="inline-flex items-center gap-1 rounded-lg border border-[var(--border-primary)] px-2 py-2 text-sm text-[var(--text-tertiary)] hover:text-[var(--color-danger)] hover:bg-[var(--surface-card-hover)] transition-colors"
-									title={$t('settingsGeneral.clearCertificate')}
-								>
-									<IconX size={14} />
-								</button>
-							{/if}
-						</div>
-					</div>
-				</div>
-			</div>
-			{/if}
+			<!-- SSL Certificate moved to Credentials page -->

 			<!-- Stale Detection -->
 			<div class="mt-6 border-t border-[var(--border-primary)] pt-4">
@@ -511,15 +448,6 @@
 	{/if}
 </div>

-<EntityPicker
-	bind:open={certPickerOpen}
-	items={certPickerItems}
-	current={String(sslCertificateId)}
-	title={$t('settingsGeneral.selectCertificate')}
-	onselect={handleCertSelect}
-	onclose={() => { certPickerOpen = false; }}
-/>
-
 <EntityPicker
 	bind:open={zonePickerOpen}
 	items={zonePickerItems}