From e6c4c425903e14859ed6c82a2429a996f698c5be Mon Sep 17 00:00:00 2001
From: Nikita Karamov <me@kytta.dev>
Date: Sat, 2 Sep 2023 22:21:29 +0200
Subject: [PATCH] Hide "Prevously used" if there are no previously used
 instances

---
 src/components/instance-select.astro | 19 +++++++++++++++----
 src/pages/index.astro                |  1 +
 src/styles/main.scss                 |  7 +++++--
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/instance-select.astro b/src/components/instance-select.astro
index e0c505b..26b70ae 100644
--- a/src/components/instance-select.astro
+++ b/src/components/instance-select.astro
@@ -10,7 +10,10 @@ const { instance, errors } = Astro.props;
 ---
 
 <datalist id="popular-instances"></datalist>
-<label data-translate="instance">
+<label
+	class="mt1r"
+	data-translate="instance"
+>
 	Fediverse instance
 	<div class="instance-input">
 		<span id="https-label">https://</span>
@@ -41,13 +44,15 @@ const { instance, errors } = Astro.props;
 
 <div
 	id="saved-instances"
+	class="mt1r"
 	data-translate="previouslyUsed"
 >
 	Previously used:
-	<div></div>
+	<span class="list"></span>
 </div>
 
 <label
+	class="mt1r"
 	for="remember"
 	data-translate="rememberInstance"
 >
@@ -91,7 +96,7 @@ const { instance, errors } = Astro.props;
 			display: inline-block;
 		}
 
-		:global(span) {
+		:global(span.link) {
 			color: var(--s2f-accent-color-contrast);
 			cursor: pointer;
 			text-decoration: 1px solid underline currentColor;
@@ -107,8 +112,12 @@ const { instance, errors } = Astro.props;
 	const instanceElement = document.querySelector(
 		"#instance",
 	) as HTMLInputElement;
+	const savedInstancesElement = document.querySelector(
+		"#saved-instances",
+	) as HTMLDivElement;
 	$savedInstances.subscribe((instances) => {
 		if (instances.size === 0) {
+			savedInstancesElement.style.display = "none";
 			return;
 		}
 
@@ -117,7 +126,8 @@ const { instance, errors } = Astro.props;
 			instanceElement.value = getUrlDomain(savedInstances[0] as string);
 		}
 
-		document.querySelector("#saved-instances>div")!.replaceChildren(
+		savedInstancesElement.style.display = "block";
+		document.querySelector("#saved-instances>.list")!.replaceChildren(
 			...savedInstances
 				.flatMap((instance: string) => {
 					if (!instance) {
@@ -126,6 +136,7 @@ const { instance, errors } = Astro.props;
 
 					const host = getUrlDomain(instance);
 					const element = document.createElement("span");
+					element.classList.add("link");
 					element.textContent = host;
 					element.addEventListener("click", () => {
 						instanceElement.value = host;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index daabca5..7716cdb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -96,6 +96,7 @@ if (Astro.request.method === "POST") {
 		<input
 			type="submit"
 			value="Publish"
+			class="mt1r"
 			data-translate="publish"
 			data-translate-attribute="value"
 		/>
diff --git a/src/styles/main.scss b/src/styles/main.scss
index aa61994..0bf106d 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -94,9 +94,8 @@ strong {
 	font-weight: bolder;
 }
 
-form label {
+label {
 	display: block;
-	margin-bottom: 1rem;
 }
 
 input,
@@ -178,3 +177,7 @@ p.error {
 	color: var(--s2f-error-color);
 	margin: 0 0 1rem;
 }
+
+.mt1r {
+	margin-top: 1rem !important;
+}