[frontend] add hover highlight to omnibar buttons, "go" button

Author: velzie

frontend/src/components/IconButton.tsx

@@ -20,13 +20,24 @@ export const IconButton: Component<{
 };
 IconButton.style = css`
 	:scope {
-		padding: 0.4em;
+		box-sizing: border-box;
+		aspect-ratio: 1/1;
+		align-items: center;
+		justify-content: center;
+		padding-top: 0.25em;
+
+		padding-bottom: 0.25em;
+
 		display: flex;
 		outline: none;
 		border: none;
 		font-size: 1.25em;
 		background: none;
 		color: grey;
+		border-radius: 0.2em;
+	}
+	:scope.active:hover {
+		background-color: #fff;
 	}
 	:scope.active {
 		cursor: pointer;

frontend/src/components/Omnibox.tsx

@@ -56,7 +56,7 @@ export const Omnibox: Component<{
 				tabUrl={use(this.tab.url)}
 			></UrlInput>
 			<Spacer></Spacer>
-			<IconButton icon={iconExtension}></IconButton>
+			<IconButton active={false} icon={iconExtension}></IconButton>
 			<IconButton
 				icon={iconMore}
 				click={(e: MouseEvent) => {
@@ -97,9 +97,10 @@ Omnibox.style = css`
 		z-index: 1;
 		background: var(--aboutbrowser-omnibox-bg);
 		display: flex;
-		padding: 0px 7px 0px 7px;
+		padding: 0 7px 0 7px;
 		height: 2.5em;
 		align-items: center;
 		position: relative;
+		gap: 0.2em;
 	}
 `;

frontend/src/components/UrlInput.tsx

@@ -7,6 +7,7 @@ import {
 import iconShield from "@ktibow/iconset-ion/shield-outline";
 import iconStar from "@ktibow/iconset-ion/star-outline";
 import iconSearch from "@ktibow/iconset-ion/search";
+import iconForwards from "@ktibow/iconset-ion/arrow-forward";
 import { Icon } from "./Icon";
 import { browser, scramjet } from "../main";
 import { IconButton } from "./IconButton";
@@ -149,6 +150,19 @@ export const UrlInput: Component<
 		this.input.scrollLeft = 0;
 	};
 
+	const doSearch = () => {
+		if (this.focusindex > 0) {
+			browser.activetab.pushNavigate(
+				this.overflowItems[this.focusindex - 1].url
+			);
+		} else {
+			browser.searchNavigate(this.value);
+		}
+
+		this.active = false;
+		this.input.blur();
+	};
+
 	this.selectContent.listen(() => {
 		activate();
 	});
@@ -235,16 +249,8 @@ export const UrlInput: Component<
 							}
 							if (e.key === "Enter") {
 								e.preventDefault();
-								if (this.focusindex > 0) {
-									browser.activetab.pushNavigate(
-										this.overflowItems[this.focusindex - 1].url
-									);
-								} else {
-									browser.searchNavigate(this.value);
-								}
 
-								this.active = false;
-								this.input.blur();
+								doSearch();
 							}
 						}}
 						// keyup, we want this to happen after the input has been processed (so the user can delete the whole thing)
@@ -282,7 +288,19 @@ export const UrlInput: Component<
 						<span class="placeholder">Search with Google or enter address</span>
 					)}
 
-				<IconButton icon={iconStar}></IconButton>
+				{use(this.active)
+					.map((a) => !a)
+					.andThen(<IconButton icon={iconStar}></IconButton>)}
+				{use(this.active).andThen(
+					<IconButton
+						click={(e: MouseEvent) => {
+							doSearch();
+							e.stopPropagation();
+							e.preventDefault();
+						}}
+						icon={iconForwards}
+					></IconButton>
+				)}
 			</div>
 		</div>
 	);
@@ -380,5 +398,8 @@ UrlInput.style = css`
 		display: flex;
 		z-index: 1;
 		align-items: center;
+
+		padding-left: 0.25em;
+		padding-right: 0.25em;
 	}
 `;