Improve search interactivity

output/index.css

@@ -179,16 +179,16 @@ header {
 	display: flex;
 	justify-content: center;
 	box-sizing: border-box;
-	height: 0;
+	height: 3rem;
 	overflow: hidden;
 	transition: height 0.25s;
 }
 
-#toggle-search-bar:checked ~ #search-container {
-	height: 3rem;
+.collapsed {
+	height: 0 !important;
 }
 
-#toggle-search-bar:not(:checked) ~ #search-container > * {
+#search-container.collapsed > * {
 	display: none;
 }
 

output/js/constants.js

@@ -43,10 +43,11 @@ export const dom = {
 	snackbar: () => document.getElementById("copy-snackbar"),
 	qr_code_buttons: () => document.querySelectorAll('.qr-code-button'),
 	/** @return {HTMLInputElement | null} */
-	toggle_search_checkbox: () => document.querySelector('#toggle-search-bar'),
+	btn_toggle_search: () => document.querySelector('#btn-toggle-search'),
 	/** @return {HTMLInputElement | null} */
 	search_bar: () => document.querySelector('#search-bar'),
-	btn_clear_search: () => document.querySelector("#btn-clear-search")
+	btn_clear_search: () => document.querySelector("#btn-clear-search"),
+	search_container: () => document.querySelector("#search-container"),
 }
 
 export const JOIN_URL_PASTE = "Copied URL to clipboard. Paste into Session app to join";
@@ -99,8 +100,11 @@ export const ATTRIBUTES = {
 };
 
 export const CLASSES = {
+	COMPONENTS: {
+		COLLAPSED: 'collapsed',
+	},
 	SEARCH: {
-		NO_RESULTS: 'search-no-results'
+		NO_RESULTS: 'search-no-results',
 	}
 }
 

output/main.js

@@ -449,8 +449,10 @@ function addServerIconInteractions() {
 }
 
 function addSearchInteractions() {
-	dom.toggle_search_checkbox()?.addEventListener('click', function (ev) {
-		if (this.checked) {
+	dom.btn_toggle_search()?.addEventListener('click', function (ev) {
+		const container = dom.search_container();
+		container?.classList.toggle(CLASSES.COMPONENTS.COLLAPSED);
+		if (!container?.classList.contains(CLASSES.COMPONENTS.COLLAPSED)) {
 			const searchBar = dom.search_bar();
 			searchBar?.focus();
 			// Inconsistent; attempt to align search bar to top to make more space for results.
@@ -464,13 +466,18 @@ function addSearchInteractions() {
 		setTimeout(() => useSearchTerm(this.value), 0);
 	})
 
-	dom.search_bar()?.addEventListener('keyup', function () {
+	dom.search_bar()?.addEventListener('keyup', function (ev) {
+		if (ev.key === "Enter") {
+			this.blur();
+		}
 		useSearchTerm(this.value);
 	})
 
 	dom.btn_clear_search()?.addEventListener('click', function () {
 		useSearchTerm("");
-		dom.search_bar().value = "";
+		const searchBar = dom.search_bar();
+		searchBar?.focus();
+		searchBar.value = "";
 	})
 }
 
@@ -614,6 +621,7 @@ function initializeSearch() {
 function useSearchTerm(rawTerm) {
 	if (!rawTerm) {
 		replaceRowsWith(communityFullRowCache);
+		dom.search_bar()?.classList.remove(CLASSES.SEARCH.NO_RESULTS);
 	} else {
 		const term = rawTerm.toLowerCase();
 		const termTags = Array.from(rawTerm.matchAll(/#[^#\s]+/g)).map(match => match[0].slice(1).toLowerCase());

sites/index.php

@@ -69,12 +69,12 @@
 					href="#footer"
 					title="Learn more about sessioncommunities.online."
 					>About</a>
-					<label
-						for="toggle-search-bar"
+					<span
+						id="btn-toggle-search"
 						class="anchorstyle clickable enter-clicks js-only"
 						title="Open search bar."
 						tabindex="0"
-					>Search</label>
+					>Search</span>
 					<a
 						id="link-more-sites"
 						href="#more-sites"
@@ -97,9 +97,7 @@
 			</header>
 			<h1 id="headline">Session Communities</h1>
 
-			<input id="toggle-search-bar" class="hidden" type="checkbox">
-
-			<div id="search-container">
+			<div id="search-container" class="collapsed">
 				<div id="search">
 					<input id="search-bar" type="text" placeholder="Search with words, #tags">
 					<span id="btn-clear-search" class="anchorstyle clickable enter-clicks" tabindex="0" title="Clear search">×</span>