fix(web): search bar is now a form: enter to submit

web/src/control.rs

@@ -8,18 +8,20 @@ pub fn Navigator() -> impl IntoView {
 	let auth = use_context::<Auth>().expect("missing auth context");
 	let (query, set_query) = create_signal("".to_string());
 	view! {
-		<table class="align">
-			<tr>
-				<td class="w-100">
-					<input type="text" class="w-100" on:input=move |ev| {
-						set_query.set(event_target_value(&ev))
-					} />
-				</td>
-				<td>
-					<a href={move|| format!("/web/search?q={}", query.get())}><input type="submit" value="go" /></a>
-				</td>
-			</tr>
-		</table>
+		<form action={move|| format!("/web/search?q={}", query.get())}>
+			<table class="align">
+				<tr>
+					<td class="w-100">
+						<input type="text" class="w-100" on:input=move |ev| {
+							set_query.set(event_target_value(&ev))
+						} />
+					</td>
+					<td>
+						<a href={move|| format!("/web/search?q={}", query.get())}><input type="submit" value="go" /></a>
+					</td>
+				</tr>
+			</table>
+		</form>
 		<table class="align w-100">
 			<tr><td colspan="2"><a href="/web/home"><input class="w-100" type="submit" class:hidden=move || !auth.present() value="home timeline" /></a></td></tr>
 			<tr><td colspan="2"><a href="/web/server"><input class="w-100" type="submit" value="server timeline" /></a></td></tr>

web/src/page.rs

@@ -410,33 +410,33 @@ pub fn SearchPage() -> impl IntoView {
 
 	view! {
 		<Breadcrumb>search</Breadcrumb>
-		<blockquote class="mt-1 mb-1">
+		<blockquote class="mt-3 mb-3">
 			<details open>
 				<summary class="mb-2">
 					<code class="cw center color ml-s w-100">users</code>
 				</summary>
+				<div class="pb-1">
 				{move || match user.get() {
-					None => None,
-					Some(None) => None,
-					Some(Some(u)) => Some(view! {
-						<ActorBanner object=u />
-					}),
+					None => view! { <p class="center"><small>searching...</small></p> },
+					Some(None) => view! { <p class="center"><code>N/A</code></p> },
+					Some(Some(u)) => view! { <p><ActorBanner object=u /></p> },
 				}}
+				</div>
 			</details>
 		</blockquote>
 
-		<blockquote class="mt-1 mb-1">
+		<blockquote class="mt-3 mb-3">
 			<details open>
 				<summary class="mb-2">
 					<code class="cw center color ml-s w-100">objects</code>
 				</summary>
+				<div class="pb-1">
 				{move || match object.get() {
-					None => None,
-					Some(None) => None,
-					Some(Some(o)) => Some(view! {
-						<Object object=o />
-					}),
+					None => view! { <p class="center"><small>searching...</small></p> },
+					Some(None) => view!{ <p class="center"><code>N/A</code></p> },
+					Some(Some(o)) => view! { <p><Object object=o /></p> },
 				}}
+				</div>
 			</details>
 		</blockquote>
 	}