[chrome] redesign new tab page

Author: velzie

packages/chrome/src/App.tsx

@@ -48,6 +48,7 @@ export const App: Component = function (cx) {
 			{use(browser.activetab.url, browser.settings.bookmarksPinned)
 				.map(([u, pinned]) => pinned || u.href === "puter://newtab")
 				.andThen(<BookmarksStrip />)}
+			<div style="border-bottom: 1px solid var(--bg20)"></div>
 			{cx.children}
 		</div>
 	);

packages/chrome/src/components/Omnibar/UrlInput.tsx

@@ -144,10 +144,10 @@ export const UrlInput: Component<
 		if (title.toLowerCase().startsWith(inputValue.toLowerCase())) {
 			return (
 				<>
+					<span>{title.substring(0, inputValue.length)}</span>
 					<span style="font-weight: normal; opacity: 0.7;">
-						{title.substring(0, inputValue.length)}
+						{title.substring(inputValue.length)}
 					</span>
-					<span>{title.substring(inputValue.length)}</span>
 				</>
 			);
 		}
@@ -200,7 +200,18 @@ export const UrlInput: Component<
 								/>
 							)}
 						</div>
-						<div class="result-content">
+						<div
+							class="result-content"
+							class:single={
+								// TODO: remove this when non pointed class: works
+								use(this.url).map(
+									() =>
+										item.title == null ||
+										item.title === "" ||
+										item.title === trimUrl(item.url)
+								)
+							}
+						>
 							{(item.title && (
 								<span class="description">
 									{renderResultHighlight(item.title, this.input.value)}
@@ -354,32 +365,45 @@ UrlInput.style = css`
 	.overflowitem {
 		display: flex;
 		align-items: center;
-		height: 2.5em;
+		/*height: 2.5em;*/
 		cursor: pointer;
-		gap: 0.5em;
+		gap: 1em;
+
+		margin-left: 0.5em;
 		padding-left: 0.5em;
-		padding-right: 0.5em;
+
+		margin-right: 0.5em;
+
+		margin-top: 0.25em;
+		padding-top: 0.25em;
+		margin-bottom: 0.25em;
+		padding-bottom: 0.25em;
+
 		white-space: nowrap;
 		color: var(--fg);
-		width: 100%;
 		overflow: hidden;
+
+		border-radius: var(--radius);
 	}
 
 	.result-content {
 		display: flex;
 		flex-direction: column;
 		flex: 1;
 		min-width: 0;
-		overflow: hidden;
 		gap: 2px;
 	}
+	.result-content.single {
+		display: block;
+	}
 
 	.overflowitem .url,
 	.overflowitem .description {
 		text-overflow: ellipsis;
 		text-wrap: nowrap;
 		word-wrap: nowrap;
 		overflow: hidden;
+		line-height: 1.2;
 	}
 
 	.overflowitem .description {
@@ -397,7 +421,11 @@ UrlInput.style = css`
 		text-overflow: ellipsis;
 		overflow: hidden;
 	}
-	.overflowitem.focused {
+	.overflowitem.focused,
+	.overflowitem.focused:hover {
+		background: var(--bg20);
+	}
+	.overflowitem:hover {
 		background: var(--bg04);
 	}
 

packages/chrome/src/pages/NewTabPage.tsx

@@ -4,6 +4,8 @@ import { browser } from "../Browser";
 import { trimUrl } from "../components/Omnibar/utils";
 import { createMenu } from "../components/Menu";
 import { defaultFaviconUrl } from "../assets/favicon";
+import { Icon } from "../components/Icon";
+import { iconSearch } from "../icons";
 
 export const NewTabPage: Component<
 	{
@@ -13,16 +15,32 @@ export const NewTabPage: Component<
 > = function () {
 	return (
 		<div>
+			<div class="topbar">
+				{/*<div class="logo"></div>*/}
+				<div class="inputcontainercontainer">
+					<div class="inputcontainer">
+						<div class="icon">
+							<Icon icon={iconSearch}></Icon>
+						</div>
+						<input
+							on:keydown={(e: KeyboardEvent) => {
+								if (e.key === "Enter") {
+									e.preventDefault();
+									browser.searchNavigate((e.target as HTMLInputElement).value);
+								}
+							}}
+							placeholder="Search Google or type A URL"
+						></input>
+					</div>
+				</div>
+				{/*<div class="clock">
+					{new Date().toLocaleTimeString([], {
+						hour: "2-digit",
+						minute: "2-digit",
+					})}
+				</div>*/}
+			</div>
 			<div class="main">
-				<input
-					on:keydown={(e: KeyboardEvent) => {
-						if (e.key === "Enter") {
-							e.preventDefault();
-							browser.searchNavigate((e.target as HTMLInputElement).value);
-						}
-					}}
-					placeholder="Search Google or type A URL"
-				></input>
 				<div class="suggestions">
 					{browser.globalhistory.slice(0, 5).map((entry) => (
 						<div
@@ -61,10 +79,69 @@ NewTabPage.style = css`
 		width: 100%;
 		height: 100%;
 		display: flex;
-		justify-content: center;
+		flex-direction: column;
+		align-items: center;
 		font-family: var(--font);
 		background: var(--bg01);
 		color: var(--fg);
+
+		padding: 5em;
+	}
+
+	.topbar {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 3em;
+	}
+	.logo {
+		width: 3em;
+		height: 3em;
+	}
+	.clock {
+		font-size: 1.5em;
+		font-weight: bold;
+		min-width: 4em;
+		text-align: center;
+	}
+
+	.inputcontainercontainer {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+	}
+	.inputcontainer {
+		flex: 1;
+		max-width: 40em;
+		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
+		background: var(--bg20);
+		border-radius: var(--radius);
+		display: flex;
+		align-items: center;
+	}
+
+	.icon {
+		font-size: 1.5em;
+		padding-left: 0.5em;
+		color: var(--fg3);
+	}
+
+	.inputcontainer:focus-within {
+		box-shadow: 0 0 2px var(--accent);
+		outline: 1px solid var(--accent);
+	}
+	input {
+		font-size: 1.25em;
+		outline: none;
+		padding: 1em;
+		padding-top: 0.75em;
+		padding-bottom: 0.75em;
+		flex: 1;
+		height: 100%;
+		background: none;
+		border: none;
+		color: var(--fg);
 	}
 
 	.suggestions {
@@ -108,34 +185,23 @@ NewTabPage.style = css`
 		text-overflow: ellipsis;
 		text-align: center;
 		white-space: nowrap;
+		line-height: 1.2;
 	}
 	.suggestion img {
 		width: 32px;
 		height: 32px;
 	}
 
 	.main {
+		margin-top: 2.5em;
 		width: 70%;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		gap: 1em;
 	}
 
-	input {
-		width: 100%;
-		height: 2em;
-		font-size: 1.5em;
-		border: 2px solid var(--bg20);
-		outline: none;
-		border-radius: 1em;
-		padding: 1em;
-		background: var(--bg);
-		color: var(--fg);
-	}
-
 	.main {
 		position: relative;
-		top: 10em;
 	}
 `;