roxxie-proxy-u-prod 0.1.0

package/source/packages/chrome/src/components/Omnibar/Omnibox.tsx

@@ -0,0 +1,466 @@
+import { createDelegate, css, type FC, type Delegate } from "dreamland/core";
+import { setContextMenu } from "@components/Menu";
+import { INTERNAL_URL_PROTOCOL } from "../../consts";
+import {
+	fetchGoogleTrending,
+	fetchSuggestions,
+	trendingCached,
+	AVAILABLE_SEARCH_ENGINES,
+	type OmniboxResult,
+} from "./suggestions";
+import { trimUrl } from "./utils";
+import { UrlInput } from "@components/Omnibar/UrlInput";
+import { Suggestion } from "@components/Omnibar/Suggestion";
+import { requestUnfocusFrames } from "@components/Shell";
+import { settingsService, tabsService } from "../..";
+
+export const focusOmnibox = createDelegate<void>();
+
+function InactiveBar(this: FC<{ subtle: boolean; active: boolean }>) {
+	return (
+		<div class:subtle={use(this.subtle)} class:active={use(this.active)}></div>
+	);
+}
+InactiveBar.style = css`
+	:scope {
+		background: var(--toolbar_field);
+		width: 100%;
+		border: none;
+		outline: none;
+		border-radius: var(--radius-md);
+		margin: 0.25em;
+	}
+
+	:scope.subtle.active {
+		border: 1px solid var(--tab_line);
+	}
+`;
+
+export function Omnibox(
+	this: FC<
+		{
+			url: URL;
+			selectContent: Delegate<void>;
+			layout?: "horizontal" | "vertical";
+		},
+		{
+			value: string;
+			realvalue: string;
+			active: boolean;
+			justselected: boolean;
+			subtleinput: boolean;
+			focusindex: number;
+			searchSuggestions: OmniboxResult[];
+			trendingSuggestions: OmniboxResult[];
+			input: HTMLInputElement;
+
+			suggestionDenied: boolean;
+		}
+	>
+) {
+	this.focusindex = 0;
+	this.searchSuggestions = [];
+	this.value = "";
+	this.trendingSuggestions = [];
+
+	const [lock, unlock] = requestUnfocusFrames();
+
+	this.cx.mount = () => {
+		setContextMenu(this.root, [
+			{
+				label: "Select All",
+				action: () => {
+					this.selectContent();
+				},
+			},
+		]);
+
+		fetchGoogleTrending();
+		setTimeout(() => {
+			fetchGoogleTrending();
+		}, 1000);
+	};
+
+	focusOmnibox.listen(() => {
+		setTimeout(() => {
+			activate();
+			this.subtleinput = true;
+		}, 10);
+	});
+
+	use(this.realvalue).listen(() => {
+		if (!this.realvalue) {
+			this.searchSuggestions = [];
+			return;
+		}
+
+		// if the user is actually trying to search something we can kill the trending suggestions
+		this.trendingSuggestions = [];
+
+		fetchSuggestions(this.realvalue, this.suggestionDenied, (results) => {
+			this.searchSuggestions = results;
+
+			const firstResult = results[0];
+			if (!firstResult) return;
+			if (firstResult.kind === "search") {
+				if (!firstResult.title) return;
+				if (this.realvalue.length >= firstResult.title.length) return;
+				if (
+					!firstResult.title
+						.toLowerCase()
+						.startsWith(this.realvalue.toLowerCase())
+				)
+					return;
+
+				let currentCursor = this.input.selectionStart || 0;
+
+				this.input.setSelectionRange(
+					currentCursor,
+					currentCursor + firstResult.title.length
+				);
+				this.value = firstResult.title;
+				this.input.setSelectionRange(
+					currentCursor,
+					currentCursor + firstResult.title.length
+				);
+			} else {
+				if (!firstResult.url) return;
+
+				// todo support http:example.com
+				let normalizedUrl =
+					this.realvalue.startsWith("http://") ||
+					this.realvalue.startsWith("https://")
+						? firstResult.url.href
+						: trimUrl(firstResult.url);
+
+				if (normalizedUrl.endsWith("/") && !this.realvalue.endsWith("/")) {
+					normalizedUrl = normalizedUrl.slice(0, -1);
+				}
+				if (this.realvalue.length >= normalizedUrl.length) return;
+				if (
+					!normalizedUrl.toLowerCase().startsWith(this.realvalue.toLowerCase())
+				)
+					return;
+
+				let currentCursor = this.input.selectionStart || 0;
+
+				this.input.setSelectionRange(
+					currentCursor,
+					currentCursor + normalizedUrl.length
+				);
+				this.value = normalizedUrl;
+				this.input.setSelectionRange(
+					currentCursor,
+					currentCursor + normalizedUrl.length
+				);
+			}
+		});
+		this.suggestionDenied = false;
+	});
+
+	use(this.url.href).listen((url) => {
+		// when the url changes, clear whatever text the user might have had in the search box
+		this.value = "";
+		// also set realvalue to clear the search results
+		this.realvalue = "";
+	});
+
+	const activate = () => {
+		this.subtleinput = false;
+		this.active = true;
+		lock();
+
+		// empty value == just represent the url
+		if (this.value == "") {
+			if (this.url.href != `${INTERNAL_URL_PROTOCOL}//newtab`) {
+				this.realvalue = this.value = trimUrl(this.url);
+			}
+		}
+
+		const handleClickOutside = (e: MouseEvent) => {
+			this.active = false;
+			unlock();
+			e.preventDefault();
+
+			document.body.removeEventListener("click", handleClickOutside);
+			document.body.removeEventListener("auxclick", handleClickOutside);
+		};
+
+		document.body.addEventListener("click", handleClickOutside);
+		document.body.addEventListener("auxclick", handleClickOutside);
+
+		this.input.focus();
+		this.input.select();
+		this.justselected = true;
+		this.input.scrollLeft = 0;
+
+		if (this.url.href === `${INTERNAL_URL_PROTOCOL}//newtab`) {
+			// don't clutter the results if not on a newtab page
+			fetchGoogleTrending().then(() => {
+				const searchEngine =
+					AVAILABLE_SEARCH_ENGINES[
+						settingsService.settings.defaultSearchEngine
+					];
+				// pick a random 3 from the cache
+				this.trendingSuggestions = [...(trendingCached ?? [])]
+					.sort(() => 0.5 - Math.random())
+					.slice(0, 3)
+					.map((t) => ({
+						kind: "trending",
+						title: t.title,
+						url: new URL(searchEngine.searchUrlBuilder(t.title)),
+						favicon: null,
+					}));
+			});
+		} else {
+			this.trendingSuggestions = [];
+		}
+	};
+
+	const navTo = (url: URL) => {
+		tabsService.activetab.pushNavigate(url);
+		this.active = false;
+		this.input.blur();
+	};
+
+	const doSearch = () => {
+		const selected =
+			this.focusindex < this.searchSuggestions.length
+				? this.searchSuggestions[this.focusindex]
+				: this.trendingSuggestions[
+						this.focusindex - this.searchSuggestions.length
+					];
+		navTo(selected.url);
+	};
+
+	this.selectContent.listen(() => {
+		activate();
+	});
+
+	const overflowlength = () =>
+		this.searchSuggestions.length + this.trendingSuggestions.length;
+
+	const updateValue = () => {
+		const focused =
+			this.focusindex < this.searchSuggestions.length
+				? this.searchSuggestions[this.focusindex]
+				: this.trendingSuggestions[
+						this.focusindex - this.searchSuggestions.length
+					];
+		this.value =
+			focused.kind === "search" ||
+			focused.kind === "trending" ||
+			focused.kind === "directsearch"
+				? focused.title!
+				: focused.url!.href;
+	};
+
+	return (
+		<div
+			on:click={(e: MouseEvent) => {
+				if (this.active) {
+					e.preventDefault();
+					e.stopPropagation();
+					return;
+				}
+				activate();
+				e.stopPropagation();
+			}}
+			class:subtle={use(this.subtleinput)}
+			class:active={use(this.active)}
+			class:vertical-layout={this.layout === "vertical"}
+		>
+			<InactiveBar
+				subtle={use(this.subtleinput)}
+				active={use(this.active)}
+			></InactiveBar>
+			<div
+				class="overflow"
+				class:active={use(this.active, this.subtleinput).map(
+					([a, s]) => a && !s
+				)}
+			>
+				<div class="spacer"></div>
+				{use(this.searchSuggestions).mapEach((item) => (
+					<Suggestion
+						onClick={() => navTo(item.url)}
+						input={this.input}
+						item={item}
+						focused={use(this.focusindex).map(
+							(i) => i === this.searchSuggestions.indexOf(item)
+						)}
+					></Suggestion>
+				))}
+				{use(this.trendingSuggestions)
+					.map((s) => s.length > 0)
+					.and(<div class="spacertext">Trending Searches</div>)}
+				{use(this.trendingSuggestions).mapEach((item) => (
+					<Suggestion
+						item={item}
+						input={this.input}
+						layout={this.layout}
+						onClick={() => navTo(item.url)}
+						focused={use(this.focusindex).map(
+							(i) =>
+								i ===
+								this.searchSuggestions.length +
+									this.trendingSuggestions.indexOf(item)
+						)}
+					></Suggestion>
+				))}
+			</div>
+
+			<UrlInput
+				active={use(this.active)}
+				input={use(this.input)}
+				url={use(this.url)}
+				value={use(this.value)}
+				favicon={use(this.focusindex, this.searchSuggestions).map(() =>
+					this.focusindex > 0 &&
+					this.searchSuggestions.length > 0 &&
+					this.focusindex < this.searchSuggestions.length
+						? this.searchSuggestions[this.focusindex].favicon
+						: null
+				)}
+				doSearch={doSearch}
+				onkeydown={(e: KeyboardEvent) => {
+					if (e.key === "ArrowDown") {
+						e.preventDefault();
+						let idx = this.focusindex + 1;
+						if (idx >= overflowlength()) {
+							idx = 0;
+						}
+						this.focusindex = idx;
+						updateValue();
+					}
+					if (e.key === "ArrowUp") {
+						e.preventDefault();
+						let idx = this.focusindex - 1;
+						if (idx < 0) {
+							idx = overflowlength() - 1;
+						}
+						this.focusindex = idx;
+						updateValue();
+					}
+					if (e.key === "Enter") {
+						e.preventDefault();
+						doSearch();
+					}
+				}}
+				onkeyup={(e: KeyboardEvent) => {
+					if (!this.justselected) return;
+
+					// if the user didn't modify anything
+					if (this.input.value == trimUrl(this.url)) {
+						// insert the untrimmed version
+						this.input.value = this.url.href;
+					}
+
+					if (e.key == "ArrowLeft") {
+						// move the cursor to the start
+						if (this.url.protocol == INTERNAL_URL_PROTOCOL) {
+							this.input.setSelectionRange(0, 0);
+						} else {
+							let schemelen = this.url.protocol.length + 2;
+							this.input.setSelectionRange(schemelen, schemelen);
+						}
+					}
+
+					this.justselected = false;
+				}}
+				oninput={(e: InputEvent) => {
+					this.subtleinput = false;
+
+					if (e.inputType === "deleteContentBackward") {
+						this.suggestionDenied = true;
+					} else {
+						this.suggestionDenied = false;
+					}
+					this.focusindex = 0;
+
+					this.realvalue = this.value;
+
+					if (this.value === "") {
+						this.subtleinput = true;
+					}
+				}}
+			></UrlInput>
+		</div>
+	);
+}
+
+Omnibox.style = css`
+	:scope {
+		position: relative;
+		flex: 1;
+		display: flex;
+		height: 100%;
+		overflow: visible;
+		transition: width 150ms cubic-bezier(0,1.33,.5,1);
+	}
+
+	:scope.vertical-layout {
+		flex: none;
+		width: 100%;
+		z-index: 0;
+		background: var(--toolbar_field);
+		border-radius: var(--radius-md);
+	    border: 1px solid var(--text-20);
+	}
+
+	:scope.vertical-layout.active {
+		width: min(42rem, calc(100vw - 2rem));
+		z-index: 5;
+	}
+
+	:global(.sidebar-right) :scope.vertical-layout.active {
+		right: calc(min(42rem, calc(100vw - 2rem)) - 100%);
+	}
+
+	.result-icon {
+		align-self: start;
+		margin-top: var(--space-sm);
+	}
+
+	.favicon {
+		width: 16px;
+		height: 16px;
+	}
+
+	.overflow {
+		position: absolute;
+		display: none;
+		background: var(--toolbar_field);
+		width: 100%;
+		border-radius: var(--radius-md);
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		border: 1px solid var(--popup_border);
+		padding-bottom: var(--space-md);
+	}
+	.overflow .spacer {
+		display: block;
+		height: var(--omnibar-height);
+
+		width: 98%;
+		margin: 0 auto;
+
+		border-bottom: 1px solid
+			var(--text-35);
+		margin-bottom: var(--space-md);
+	}
+
+	.spacertext {
+		display: block;
+		height: 2em;
+		line-height: var(--omnibar-height);
+		padding-left: var(--space-xxl);
+		color: var(--text-60);
+		font-size: 0.9em;
+	}
+
+
+	.overflow.active {
+		display: block;
+	}
+}
+`;

package/source/packages/chrome/src/components/Omnibar/SiteOptionsButton.tsx

@@ -0,0 +1,52 @@
+import { css } from "dreamland/core";
+import { createMenuCustom } from "@components/Menu";
+import { SiteInformationPopup } from "@components/SiteInformationPopup";
+import { Icon } from "@components/Icon";
+import { iconOptions } from "../../icons";
+import { tabsService } from "../..";
+
+export function SiteOptionsButton() {
+	return (
+		<button
+			on:click={(e: MouseEvent) => {
+				const target = e.currentTarget as HTMLElement;
+				const rect = target.getBoundingClientRect();
+				createMenuCustom(
+					{
+						left: rect.left,
+						top: rect.bottom + 6,
+					},
+					<SiteInformationPopup
+						tab={tabsService.activetab}
+					></SiteInformationPopup>
+				);
+				e.preventDefault();
+				e.stopPropagation();
+			}}
+		>
+			<Icon icon={iconOptions}></Icon>
+		</button>
+	);
+}
+SiteOptionsButton.style = css`
+	:scope {
+		width: 100%;
+		cursor: pointer;
+		padding: 0;
+		margin: 0;
+		background: none;
+		outline: none;
+		border: none;
+		color: var(--toolbar_text);
+		font-size: calc(var(--omnibar-height) / 2.5);
+		padding: 0.1em;
+		border-radius: 0.2em;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--toolbar);
+	}
+	:scope:hover {
+		background: var(--toolbarbutton-hover-background);
+	}
+`;

package/source/packages/chrome/src/components/Omnibar/Suggestion.tsx

@@ -0,0 +1,186 @@
+import { css, type FC } from "dreamland/core";
+import { type OmniboxResult, AVAILABLE_SEARCH_ENGINES } from "./suggestions";
+import {
+	iconSearch,
+	iconTrendingUp,
+	iconGlobe,
+	iconDesktop,
+	iconAbout,
+	iconLink,
+} from "../../icons";
+import { Icon } from "@components/Icon";
+import { Favicon } from "@components/Favicon";
+import { trimUrl } from "./utils";
+import { settingsService } from "../..";
+
+const renderResultHighlight = (title: string, inputValue: string) => {
+	if (title.toLowerCase().startsWith(inputValue.toLowerCase())) {
+		return (
+			<>
+				<span>{title.substring(0, inputValue.length)}</span>
+				<span style="font-weight: normal; opacity: 0.7;">
+					{title.substring(inputValue.length)}
+				</span>
+			</>
+		);
+	}
+	return <span style="font-weight: normal; opacity: 0.7;">{title}</span>;
+};
+
+export function Suggestion(
+	this: FC<{
+		item: OmniboxResult;
+		input: HTMLInputElement;
+		focused: boolean;
+		layout?: "horizontal" | "vertical";
+
+		onClick: (e: MouseEvent) => void;
+	}>
+) {
+	let item = this.item;
+
+	const getResultIcon = () => {
+		switch (item.directUrlType) {
+			case "ip":
+				return iconDesktop;
+			case "puter":
+				return iconGlobe;
+			case "about":
+				return iconAbout;
+			case "protocol":
+				return iconLink;
+		}
+	};
+
+	return (
+		<div
+			class="overflowitem"
+			on:click={this.onClick}
+			class:focused={use(this.focused)}
+			title={item.url.href}
+			class:vertical={this.layout === "vertical"}
+		>
+			<div class="result-icon">
+				{item.kind === "search" || item.kind === "directsearch" ? (
+					<Icon icon={iconSearch}></Icon>
+				) : item.kind === "trending" ? (
+					<Icon icon={iconTrendingUp}></Icon>
+				) : item.kind === "direct" &&
+				  item.directUrlType &&
+				  item.directUrlType !== "domain" ? (
+					<Icon icon={getResultIcon()!}></Icon>
+				) : (
+					<Favicon iconUrl={item.favicon} domain={item.url.hostname}></Favicon>
+				)}
+			</div>
+			<div
+				class="result-content"
+				class:single={
+					item.kind === "directsearch" ||
+					item.title == null ||
+					item.title === "" ||
+					item.title === trimUrl(item.url)
+				}
+			>
+				{item.kind !== "directsearch"
+					? (item.title && (
+							<span class="description">
+								{renderResultHighlight(item.title, this.input.value)}
+							</span>
+						)) || <span class="description">{trimUrl(item.url)}</span>
+					: null}
+				{item.kind != "search" &&
+				item.kind != "directsearch" &&
+				item.kind != "trending" &&
+				item.title ? (
+					<span class="url">{trimUrl(item.url)}</span>
+				) : null}
+
+				{item.kind === "directsearch" ? (
+					<span>
+						{item.title}
+						<span style="font-weight: normal; opacity: 0.7">
+							{" "}
+							-{" "}
+							{
+								AVAILABLE_SEARCH_ENGINES[
+									settingsService.settings.defaultSearchEngine
+								].name
+							}{" "}
+							Search
+						</span>
+					</span>
+				) : null}
+			</div>
+		</div>
+	);
+}
+Suggestion.style = css`
+	:scope {
+		display: flex;
+		align-items: center;
+		/*height: 2.5em;*/
+		cursor: pointer;
+		gap: var(--space-xl);
+
+		padding-left: var(--space-md);
+		margin-inline: var(--space-md);
+		padding-block: var(--space-sm);
+
+		white-space: nowrap;
+		color: var(--toolbar_text);
+		overflow: hidden;
+
+		border-radius: var(--radius-md);
+	}
+
+	.result-content {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-width: 0;
+		gap: 2px;
+	}
+	.result-content.single {
+		display: block;
+	}
+
+	.url,
+	.description {
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		word-wrap: nowrap;
+		overflow: hidden;
+		line-height: 1.2;
+	}
+
+	.description {
+		font-size: 1em;
+		min-width: 0;
+		font-weight: 500;
+	}
+
+	.url {
+		color: var(--text-65);
+		font-size: 0.85em;
+		min-width: 0;
+		opacity: 0.6;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+	:scope.focused,
+	:scope.focused:hover {
+		background: color-mix(in oklab, var(--tab_line) 50%, transparent);
+		color: white;
+	}
+	:scope:hover {
+		background: var(--toolbarbutton-hover-background);
+	}
+
+	:scope.focused .title,
+	:scope.focused .url,
+	:scope.focused .description {
+		color: white;
+	}
+`;