From ffce3ee33749e0051f72836aa18b1fb5effbd657 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Thu, 19 Mar 2026 21:17:22 +0300
Subject: [PATCH] Show template previews by default, remove Preview toggle
 button

Previews now always visible below each template editor when content
is valid. Populated automatically via the debounced validation call.
When editing an existing config, all slots are previewed immediately
on form open. Preview hidden when there are errors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/routes/template-configs/+page.svelte  | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/frontend/src/routes/template-configs/+page.svelte b/frontend/src/routes/template-configs/+page.svelte
index afb2bd4..87ddcbb 100644
--- a/frontend/src/routes/template-configs/+page.svelte
+++ b/frontend/src/routes/template-configs/+page.svelte
@@ -118,8 +118,13 @@
 		finally { loaded = true; }
 	}
 
-	function openNew() { form = defaultForm(); editing = null; showForm = true; }
-	function edit(c: any) { form = { ...defaultForm(), ...c }; editing = c.id; showForm = true; }
+	function openNew() { form = defaultForm(); editing = null; showForm = true; slotPreview = {}; slotErrors = {}; }
+	function edit(c: any) {
+		form = { ...defaultForm(), ...c }; editing = c.id; showForm = true;
+		slotPreview = {}; slotErrors = {};
+		// Trigger initial preview for all populated slots
+		setTimeout(() => refreshAllPreviews(), 100);
+	}
 
 	async function save(e: SubmitEvent) {
 		e.preventDefault(); error = '';
@@ -130,17 +135,6 @@
 		} catch (err: any) { error = err.message; }
 	}
 
-	async function previewSlot(slotKey: string) {
-		// Toggle: if already showing, hide it
-		if (slotPreview[slotKey]) { delete slotPreview[slotKey]; slotPreview = { ...slotPreview }; return; }
-		const template = (form as any)[slotKey] || '';
-		if (!template) { slotPreview = { ...slotPreview, [slotKey]: '(empty)' }; return; }
-		try {
-			const res = await api('/template-configs/preview-raw', { method: 'POST', body: JSON.stringify({ template, target_type: previewTargetType }) });
-			slotPreview = { ...slotPreview, [slotKey]: res.error ? `Error: ${res.error}` : res.rendered };
-		} catch (err: any) { slotPreview = { ...slotPreview, [slotKey]: `Error: ${err.message}` }; }
-	}
-
 	async function preview(configId: number, slotKey: string) {
 		const config = configs.find(c => c.id === configId);
 		if (!config) return;
@@ -211,8 +205,6 @@
 							<div class="flex items-center justify-between mb-1">
 								<label class="text-xs text-[var(--color-muted-foreground)]">{t(`templateConfig.${slot.label}`)}</label>
 								<div class="flex items-center gap-2">
-									<button type="button" onclick={() => previewSlot(slot.key)}
-										class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('templateConfig.preview')}</button>
 									{#if varsRef[slot.key]}
 										<button type="button" onclick={() => showVarsFor = slot.key}
 											class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('templateConfig.variables')}</button>
@@ -231,9 +223,9 @@
 										<p class="mt-1 text-xs" style="color: var(--color-error-fg);">✕ {t('common.syntaxError')}: {slotErrors[slot.key]}{slotErrorLines[slot.key] ? ` (${t('common.line')} ${slotErrorLines[slot.key]})` : ''}</p>
 									{/if}
 								{/if}
-								{#if slotPreview[slot.key]}
+								{#if slotPreview[slot.key] && !slotErrors[slot.key]}
 									<div class="mt-1 p-2 bg-[var(--color-muted)] rounded text-sm">
-										<pre class="whitespace-pre-wrap">{slotPreview[slot.key]}</pre>
+										<pre class="whitespace-pre-wrap text-xs">{slotPreview[slot.key]}</pre>
 									</div>
 								{/if}
 							{/if}