Fix sample search & search experience

output/index.css

@@ -187,11 +187,11 @@ header {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	max-height: 6rem;
+	max-height: 10rem;
 	justify-content: center;
 	box-sizing: border-box;
 	overflow: hidden;
-	transition: max-height 0.1s;
+	transition: max-height 0.5s;
 	align-items: flex-start;
 }
 
@@ -220,7 +220,6 @@ header {
 	border: 1px var(--primary-color) solid;
 	text-align: right;
 	padding: 0.1rem 0.25rem;
-	margin-right: 1rem;
 }
 
 #search-bar.search-no-results {
@@ -229,6 +228,17 @@ header {
 
 #btn-clear-search {
 	margin-right: 1rem;
+	font-size: 1.5rem;
+	padding: 0.25rem 1rem;
+}
+
+#sample-searches {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	padding: 0 1rem;
+	justify-content: center;
+	row-gap: 0.2rem;
 }
 
 /* --- Table --- */

output/main.js

@@ -632,14 +632,13 @@ function useSearchTerm(rawTerm) {
 		const term = rawTerm.toLowerCase().replace(/lang:(\S+)/g, "").trim();
 		const termTags = Array.from(rawTerm.matchAll(/#[^#\s]+/g)).map(match => match[0].slice(1).toLowerCase());
 		const termLanguage = rawTerm.match(/lang:(\S+)/)?.[1];
-		console.log(termLanguage);
 		const newRows = communityFullRowCache.filter(
 			row => {
 				const rowInfo = dom.row_info(row);
 				const langAscii = rowInfo.language_flag && flagToLanguageAscii(rowInfo.language_flag).toLowerCase();
 				const rowName = rowInfo.name.toLowerCase();
 				const rowDesc = rowInfo.description.toLowerCase();
-				const rowTags = rowInfo.tags.map(({text}) => text);
+				const rowTags = rowInfo.tags.map(({text}) => text.replace(/\s+/g, "-"));
 				if (termLanguage && !langAscii.includes(termLanguage.toLowerCase())) {
 					return false;
 				}

sites/+components/communities-search.php

@@ -1,22 +1,24 @@
 <?php
-	$sample_searches_tags_reserved = ["we're here"];
-	$sample_searches_plain = ["Australia"];
-	$sample_searches_tags = ["privacy", "linux"];
+	$sample_searches_tags_reserved = ["new", "we're here"];
+	$sample_searches_plain = ["language", "Australia"];
+	$sample_searches_tags = ["official", "privacy", "android", "crypto"];
 	$sample_searches_languages = [["en", "🇬🇧"], ["zh", "🇨🇳"]];
 
 	$sample_searches = [];
 
-	foreach ($sample_searches_tags_reserved as $sample_search) {
-		$sample_searches[] = array("type" => "tag-reserved", "text" => "#$sample_search", "search" => "#$sample_search");
+	foreach ($sample_searches_tags_reserved as $tag) {
+		$search = str_replace(" ", "-", $tag);
+		$sample_searches[] = array("type" => "tag-reserved", "text" => "#$tag", "search" => "#$search");
 	}
-	foreach ($sample_searches_tags as $sample_search) {
-		$sample_searches[] = array("type" => "tag", "text" => "#$sample_search", "search" => "#$sample_search");
+	foreach ($sample_searches_tags as $tag) {
+		$search = str_replace(" ", "-", $tag);
+		$sample_searches[] = array("type" => "tag", "text" => "#$tag", "search" => "#$search");
 	}
-	foreach ($sample_searches_plain as $sample_search) {
-		$sample_searches[] = array("type" => "plain", "text" => $sample_search, "search" => $sample_search);
+	foreach ($sample_searches_plain as $text) {
+		$sample_searches[] = array("type" => "plain", "text" => $text, "search" => $text);
 	}
-	foreach ($sample_searches_languages as $sample_search) {
-		$sample_searches[] = array("type" => "language", "text" => $sample_search[1], "search" => "lang:" . $sample_search[0]);
+	foreach ($sample_searches_languages as $language_array) {
+		$sample_searches[] = array("type" => "language", "text" => $language_array[1], "search" => "lang:" . $language_array[0]);
 	}
 ?>