From 30c49ed74790d157724a41a4982349d138dcd910 Mon Sep 17 00:00:00 2001
From: Scott McKendry <39483124+scottmckendry@users.noreply.github.com>
Date: Sun, 25 Aug 2024 15:34:48 +1200
Subject: [PATCH] feat(ui): style search suggestions

---
 public/css/styles.css   | 19 ++++++++++++++++++-
 views/settings.templ    | 13 +++++++++----
 views/settings_templ.go |  4 ++--
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index beabf5d..6ed2183 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -101,7 +101,7 @@ a {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    margin-top: 30vh;
 }
 
 #clock {
@@ -132,6 +132,23 @@ a {
     transition: all 0.2s ease-in-out;
 }
 
+#suggestions {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 50vw;
+}
+
+#suggestions a {
+    padding: 10px 15px;
+    margin: 10px;
+    color: #fff;
+    text-decoration: none;
+    background-color: #333;
+    transition: all 0.2s ease-in-out;
+    border-radius: 0.25rem;
+}
+
 #search:focus {
     opacity: 1;
 }
diff --git a/views/settings.templ b/views/settings.templ
index c5ede4b..80ad531 100644
--- a/views/settings.templ
+++ b/views/settings.templ
@@ -23,12 +23,17 @@ templ Settings(user goth.User, settings *data.UserSettings) {
 			</div>
 			<div class="setting">
 				<label for="suggestions" class="tooltip-container">
-					Show Google-Powered Suggestions <icon class="bx bx-help-circle"></icon>
-					<p class="tooltip-text">This feature will send your search queries to Google to provide suggestions - regardless of your search engine choice.</p>
+					Show Google-Powered Suggestions (experimental) <icon class="bx bx-help-circle"></icon>
+					<p class="tooltip-text">
+						This feature will send your search queries to Google to provide suggestions - regardless of your search engine choice.
+						<br/>
+						<br/>
+						Google has a tendency to localise suggestions. Becuase the requests are made from the mnemstart server, the suggestions may not be relevant to your local area.
+					</p>
 				</label>
 				<select name="suggestions" data-include-edit="">
-					<option value="true" selected?={ settings.ShowSuggestions }>Yes</option>
-					<option value="false" selected?={ !settings.ShowSuggestions }>No</option>
+					<option value="on" selected?={ settings.ShowSuggestions }>Yes</option>
+					<option value="off" selected?={ !settings.ShowSuggestions }>No</option>
 				</select>
 			</div>
 			<div class="action-buttons">
diff --git a/views/settings_templ.go b/views/settings_templ.go
index acdc657..20d7d68 100644
--- a/views/settings_templ.go
+++ b/views/settings_templ.go
@@ -102,7 +102,7 @@ func Settings(user goth.User, settings *data.UserSettings) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></div><div class=\"setting\"><label for=\"suggestions\" class=\"tooltip-container\">Show Google-Powered Suggestions <icon class=\"bx bx-help-circle\"></icon><p class=\"tooltip-text\">This feature will send your search queries to Google to provide suggestions - regardless of your search engine choice.</p></label> <select name=\"suggestions\" data-include-edit=\"\"><option value=\"true\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></div><div class=\"setting\"><label for=\"suggestions\" class=\"tooltip-container\">Show Google-Powered Suggestions (experimental) <icon class=\"bx bx-help-circle\"></icon><p class=\"tooltip-text\">This feature will send your search queries to Google to provide suggestions - regardless of your search engine choice.<br><br>Google has a tendency to localise suggestions. Becuase the requests are made from the mnemstart server, the suggestions may not be relevant to your local area.</p></label> <select name=\"suggestions\" data-include-edit=\"\"><option value=\"on\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -112,7 +112,7 @@ func Settings(user goth.User, settings *data.UserSettings) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">Yes</option> <option value=\"false\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">Yes</option> <option value=\"off\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}