From de96d35affd0fc9626f4be4bb026a9ccf3bef3c6 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 21 Oct 2022 21:33:56 +0200
Subject: [PATCH] clean up the new script page

---
 .../src/lib/components/ScriptBuilder.svelte   | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 38b6865594..3162db90cf 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -27,6 +27,7 @@
 	export let template: 'pgsql' | 'script' = 'script'
 
 	let viewScriptKind = script.kind !== Script.kind.SCRIPT
+	let viewTemplate = script.kind !== Script.kind.SCRIPT && script.language == Script.language.DENO
 
 	let pathError = ''
 
@@ -243,25 +244,29 @@
 						/>
 					</div>
 				{/if}
-
 				{#if script.language == 'deno' && script.kind == Script.kind.SCRIPT}
-					<h2 class="border-b pb-1 mt-4">
-						Script Template <Tooltip
-							>A template is a pre-filled script corresponding to a more specialized use-case</Tooltip
-						>
-					</h2>
+					<Button
+						color="light"
+						size="sm"
+						endIcon={{ icon: viewTemplate ? faChevronUp : faChevronDown }}
+						on:click={() => (viewTemplate = !viewTemplate)}
+					>
+						Use a predefined template that apply to this script kind and template
+					</Button>
 
-					<div class="max-w-md">
-						<RadioButton
-							label="Template"
-							options={[
-								['Standard', 'script'],
-								['PostgreSQL Prepared Statement', 'pgsql']
-							]}
-							on:change={(e) => initContent(script.language, script.kind, e.detail)}
-							bind:value={template}
-						/>
-					</div>
+					{#if viewTemplate}
+						<div class="max-w-lg" transition:slide>
+							<RadioButton
+								label="Template"
+								options={[
+									['Standard', 'script'],
+									['PostgreSQL Prepared Statement', 'pgsql']
+								]}
+								on:change={(e) => initContent(script.language, script.kind, e.detail)}
+								bind:value={template}
+							/>
+						</div>
+					{/if}
 				{/if}
 
 				<label class="block">