From 9d88e2aecc348566f5cdfffb45ef466952a96932 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Tue, 14 Mar 2023 22:24:23 +0100
Subject: [PATCH] fix(frontend): Update setting accordion (#1285)

* fix(frontend): Update setting accordion

* remove empty tooltip

---------

Co-authored-by: Faton Ramadani <faton.ramadani14@gmail.com>
---
 .../src/lib/components/ScriptBuilder.svelte   | 132 +++++++++---------
 .../src/lib/components/SettingSection.svelte  |  26 ++--
 2 files changed, 82 insertions(+), 76 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 450b82b4f6..0d09726f13 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -230,77 +230,79 @@
 		<!-- metadata -->
 		{#if step === 1}
 			<CenteredPage>
-				<h2 class="border-b pb-1 mt-8 mb-2">Path</h2>
-				<Path
-					bind:this={pathC}
-					bind:error={pathError}
-					bind:path={script.path}
-					{initialPath}
-					on:enter={() => changeStep(2)}
-					namePlaceholder="script"
-					kind="script"
-				/>
-				<h2 class="border-b pb-1 mt-12 mb-4">Summary</h2>
-				<input
-					type="text"
-					bind:this={summaryC}
-					bind:value={script.summary}
-					placeholder="Short summary to be displayed when listed"
-				/>
-
-				<h2 class="border-b pb-1 mt-12 mb-6">Language</h2>
-				{#if lockedLanguage}
-					<div class="text-sm text-gray-600 italic mb-2">
-						As a forked script, the language '{script.language}' cannot be modified.
-					</div>
-				{/if}
-				<div class="flex flex-row gap-2 flex-wrap">
-					{#each langs as [label, lang]}
-						{@const isPicked = script.language == lang && template == 'script'}
+				<SettingSection title="Path" element="h2">
+					<Path
+						bind:this={pathC}
+						bind:error={pathError}
+						bind:path={script.path}
+						{initialPath}
+						on:enter={() => changeStep(2)}
+						namePlaceholder="script"
+						kind="script"
+					/>
+				</SettingSection>
+				<SettingSection title="Summary" element="h2">
+					<input
+						type="text"
+						bind:this={summaryC}
+						bind:value={script.summary}
+						placeholder="Short summary to be displayed when listed"
+					/>
+				</SettingSection>
+				<SettingSection title="Language" element="h2">
+					{#if lockedLanguage}
+						<div class="text-sm text-gray-600 italic mb-2">
+							As a forked script, the language '{script.language}' cannot be modified.
+						</div>
+					{/if}
+					<div class="flex flex-row gap-2 flex-wrap">
+						{#each langs as [label, lang]}
+							{@const isPicked = script.language == lang && template == 'script'}
+							<Button
+								size="sm"
+								variant="border"
+								color={isPicked ? 'blue' : 'dark'}
+								btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+								on:click={() => {
+									script.language = lang
+									template = 'script'
+									initContent(lang, script.kind, template)
+								}}
+								disabled={lockedLanguage}
+							>
+								<LanguageIcon {lang} />
+								<span class="ml-2 py-2">{label}</span>
+							</Button>
+						{/each}
 						<Button
 							size="sm"
 							variant="border"
-							color={isPicked ? 'blue' : 'dark'}
-							btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-							on:click={() => {
-								script.language = lang
-								template = 'script'
-								initContent(lang, script.kind, template)
-							}}
+							color={template == 'pgsql' ? 'blue' : 'dark'}
+							btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 							disabled={lockedLanguage}
+							on:click={() => {
+								script.language = Script.language.DENO
+								template = 'pgsql'
+								initContent(script.language, script.kind, template)
+							}}
 						>
-							<LanguageIcon {lang} />
-							<span class="ml-2 py-2">{label}</span>
+							<LanguageIcon lang="pgsql" /><span class="ml-2 py-2">PostgreSQL</span>
 						</Button>
-					{/each}
-					<Button
-						size="sm"
-						variant="border"
-						color={template == 'pgsql' ? 'blue' : 'dark'}
-						btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-						disabled={lockedLanguage}
-						on:click={() => {
-							script.language = Script.language.DENO
-							template = 'pgsql'
-							initContent(script.language, script.kind, template)
-						}}
-					>
-						<LanguageIcon lang="pgsql" /><span class="ml-2 py-2">PostgreSQL</span>
-					</Button>
-					<!-- <Button
-						size="sm"
-						variant="border"
-						color={template == 'mysql' ? 'blue' : 'dark'}
-						btnClasses={template == 'mysql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-						on:click={() => {
-							script.language = Script.language.DENO
-							template = 'mysql'
-							initContent(script.language, script.kind, template)
-						}}
-					>
-						<LanguageIcon lang="mysql" /><span class="ml-2 py-2">MySQL</span>
-					</Button> -->
-				</div>
+						<!-- <Button
+							size="sm"
+							variant="border"
+							color={template == 'mysql' ? 'blue' : 'dark'}
+							btnClasses={template == 'mysql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							on:click={() => {
+								script.language = Script.language.DENO
+								template = 'mysql'
+								initContent(script.language, script.kind, template)
+							}}
+						>
+							<LanguageIcon lang="mysql" /><span class="ml-2 py-2">MySQL</span>
+						</Button> -->
+					</div>
+				</SettingSection>
 				<SettingSection
 					title="Script kind"
 					element="h3"
diff --git a/frontend/src/lib/components/SettingSection.svelte b/frontend/src/lib/components/SettingSection.svelte
index 1d3aa47aa9..354b763e57 100644
--- a/frontend/src/lib/components/SettingSection.svelte
+++ b/frontend/src/lib/components/SettingSection.svelte
@@ -5,7 +5,7 @@
 	import Tooltip from './Tooltip.svelte'
 
 	export let title: string
-	export let tooltip: string
+	export let tooltip: string = ''
 	export let element: `h${IntRange<1, 6>}` = 'h2'
 	export let accordion = false
 	let showContent = !accordion
@@ -14,25 +14,29 @@
 <div class="border-b [&:has(button:hover)]:border-gray-400 duration-200 pb-1 mt-8 mb-2">
 	{#if accordion}
 		<button
-			class="flex w-full justify-between items-center"
+			class="flex w-full justify-start items-center"
 			on:click={() => (showContent = !showContent)}
 		>
+			<span class="rounded-full hover:bg-gray-100 focus:bg-gray-100 p-1 mr-1">
+				<ChevronDown size={22} class="rotate-0 duration-300 {showContent ? '!-rotate-180' : ''}" />
+			</span>
 			<svelte:element this={element}>
 				{title}
-				<Tooltip scale={0.9} class="mb-0.5">
-					{tooltip}
-				</Tooltip>
+				{#if tooltip}
+					<Tooltip scale={0.9} class="mb-0.5">
+						{tooltip}
+					</Tooltip>
+				{/if}
 			</svelte:element>
-			<span class="rounded-full hover:bg-gray-100 focus:bg-gray-100 p-1">
-				<ChevronDown size={22} class="rotate-0 duration-300 {showContent ? '!rotate-180' : ''}" />
-			</span>
 		</button>
 	{:else}
 		<svelte:element this={element}>
 			{title}
-			<Tooltip scale={0.9} class="mb-0.5">
-				{tooltip}
-			</Tooltip>
+			{#if tooltip}
+				<Tooltip scale={0.9} class="mb-0.5">
+					{tooltip}
+				</Tooltip>
+			{/if}
 		</svelte:element>
 	{/if}
 </div>