roxxie-proxy-u-prod 0.1.0

package/source/packages/chrome/src/pages/DownloadsPage.tsx

@@ -0,0 +1,133 @@
+import { css, type FC } from "dreamland/core";
+import type { Tab } from "../Tab/Tab";
+import { iconLink, iconClose, iconFolder } from "../icons";
+import { Icon } from "@components/Icon";
+import { formatBytes } from "../util";
+import { Favicon } from "@components/Favicon";
+import { downloadsService, tabsService } from "..";
+
+export function DownloadsPage(this: FC<{ tab: Tab }>) {
+	return (
+		<div>
+			<nav>
+				<h1>Downloads</h1>
+			</nav>
+			<ul class="entries">
+				{use(downloadsService.globalDownloadHistory).mapEach((entry) => {
+					const url = new URL(entry.url);
+					return (
+						<li
+							class="entry"
+							on:click={() => {
+								tabsService.newTab(url);
+							}}
+						>
+							<span class="inner">
+								<Favicon domain={url.hostname} size="medium"></Favicon>
+								<div class="text">
+									<span class="title">{entry.filename}</span>
+									<span class="url">{url.hostname}</span>
+									<div class="details">
+										<span>{formatBytes(entry.size)}</span>
+										<span>{new Date(entry.timestamp).toDateString()}</span>
+									</div>
+								</div>
+								<div class="icons">
+									<Icon icon={iconFolder}></Icon>
+									<Icon icon={iconLink}></Icon>
+									<Icon icon={iconClose}></Icon>
+								</div>
+							</span>
+						</li>
+					);
+				})}
+			</ul>
+		</div>
+	);
+}
+DownloadsPage.style = css`
+	:scope {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		background: var(--ntp_background);
+		color: var(--ntp_text);
+	}
+	nav {
+		width: 100%;
+		padding: var(--space-xxl);
+		background: var(--toolbar);
+	}
+	h1 {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin-left: 0;
+	}
+	.entries {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		width: 100%;
+		padding-right: 1.75em;
+	}
+	.entry {
+		width: 100%;
+		transition: background 0.1s;
+	}
+	.inner {
+		display: flex;
+		align-items: center;
+		gap: var(--space-md);
+		cursor: pointer;
+		padding-block: var(--space-lg);
+		padding-left: var(--space-md);
+		margin-left: 1.75em;
+		border-bottom: 1px solid var(--ntp-text-10);
+	}
+	.entry:hover {
+		background: var(--ntp-text-10);
+	}
+	.entry img {
+		width: 16px;
+		height: 16px;
+	}
+	.entry .title {
+		font-weight: bold;
+		color: inherit;
+		text-decoration: none;
+	}
+	.entry .title:hover {
+		color: var(--tab_line);
+		text-decoration: underline;
+	}
+	.inner span {
+		white-space: nowrap;
+		overflow: hidden;
+		padding: 0.085em;
+		text-overflow: ellipsis;
+	}
+	.text {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xs);
+		flex: 1;
+		min-width: 0;
+	}
+	.details {
+		display: flex;
+		gap: 1em;
+		color: var(--ntp-text-70);
+	}
+	.icons {
+		display: flex;
+		gap: var(--space-md);
+		margin-left: 0.75em;
+	}
+	.icons :global(svg) {
+		width: 1em;
+		height: 1em;
+		color: var(--ntp-text-70);
+	}
+`;

package/source/packages/chrome/src/pages/HistoryPage.tsx

@@ -0,0 +1,99 @@
+import { css, type FC } from "dreamland/core";
+import type { Tab } from "../Tab/Tab";
+import { Favicon } from "@components/Favicon";
+import { profileService, tabsService } from "..";
+
+export function HistoryPage(this: FC<{ tab: Tab }>) {
+	return (
+		<div>
+			<nav>
+				<h1>History</h1>
+			</nav>
+			<ul class="entries">
+				{profileService.globalhistory
+					.sort((a, b) => b.timestamp - a.timestamp)
+					.map((entry) => (
+						<li
+							class="entry"
+							on:click={() => {
+								tabsService.newTab(entry.url);
+							}}
+						>
+							<span
+								class="inner"
+								x={(() => {
+									console.log(entry);
+								})()}
+							>
+								<Favicon iconUrl={entry.favicon} size="small"></Favicon>
+								<span class="title">{entry.title || entry.url.href}</span>
+								<span class="url">{entry.url.hostname}</span>
+							</span>
+						</li>
+					))}
+			</ul>
+		</div>
+	);
+}
+HistoryPage.style = css`
+	:scope {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		background: var(--ntp_background);
+		color: var(--ntp_text);
+	}
+	nav {
+		width: 100%;
+		padding: var(--space-xxl);
+		background: var(--toolbar);
+	}
+	h1 {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin-left: 0;
+	}
+	.entries {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		width: 100%;
+		padding-right: 1.75em;
+		overflow-y: scroll;
+		width: 100%;
+		flex: 1;
+	}
+	.entry {
+		width: 100%;
+		transition: background 0.1s;
+	}
+	.inner {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		gap: var(--space-sm);
+		padding-block: var(--space-xl);
+		padding-left: var(--space-sm);
+		margin-left: var(--space-xxl);
+		border-bottom: 1px solid var(--ntp-text-10);
+	}
+	.entry:hover {
+		background: var(--ntp-text-10);
+	}
+	.entry img {
+		width: 16px;
+		height: 16px;
+	}
+	.entry .title {
+		font-weight: bold;
+	}
+	.inner span {
+		white-space: nowrap;
+		overflow: hidden;
+		padding: 0.085em;
+		font-size: 0.85rem;
+		text-overflow: ellipsis;
+	}
+`;

package/source/packages/chrome/src/pages/NewTabPage.tsx

@@ -0,0 +1,264 @@
+import { css, type FC } from "dreamland/core";
+import type { Tab } from "../Tab/Tab";
+import { trimUrl } from "@components/Omnibar/utils";
+import { Icon } from "@components/Icon";
+import { iconSearch } from "../icons";
+import { TopSiteButton, type TopSiteEntry } from "@components/TopSiteButton";
+import { profileService, settingsService, tabsService } from "..";
+import { AVAILABLE_SEARCH_ENGINES } from "@components/Omnibar/suggestions";
+
+const MAX_TOP_SITES = 8;
+
+function getTopSiteFallback(title: string, url: URL) {
+	const source = (title || url.hostname || trimUrl(url))
+		.replace(/^www\./, "")
+		.trim();
+
+	return source.charAt(0).toUpperCase() || "?";
+}
+
+function getTopSiteTitle(title: string | null | undefined, url: URL) {
+	const trimmedTitle = title?.trim();
+
+	if (trimmedTitle && !/^https?:\/\//i.test(trimmedTitle)) {
+		return trimmedTitle;
+	}
+
+	if (url.hostname) {
+		const hostname = url.hostname.replace(/^www\./, "");
+		const pathname = url.pathname.replace(/\/$/, "");
+
+		return pathname && pathname !== "/" ? `${hostname}${pathname}` : hostname;
+	}
+
+	return trimUrl(url);
+}
+
+function getTopSites(): TopSiteEntry[] {
+	const topSites: TopSiteEntry[] = [];
+	const seen = new Set<string>();
+
+	const addEntry = (
+		url: URL | null | undefined,
+		title: string | null | undefined,
+		favicon: string | null | undefined
+	) => {
+		if (!url || seen.has(url.origin) || topSites.length >= MAX_TOP_SITES)
+			return;
+
+		const cleanTitle = title?.trim() || trimUrl(url);
+		const displayTitle = getTopSiteTitle(title, url);
+		topSites.push({
+			url,
+			title: cleanTitle,
+			displayTitle,
+			favicon: favicon || null,
+			fallback: getTopSiteFallback(displayTitle, url),
+		});
+		seen.add(url.origin);
+	};
+
+	for (const entry of [...profileService.globalhistory].sort(
+		(a, b) => b.timestamp - a.timestamp
+	)) {
+		addEntry(entry.url, entry.title, entry.favicon);
+	}
+
+	return topSites;
+}
+
+export function NewTabPage(this: FC<{ tab: Tab }>) {
+	const topSites = use(profileService.globalhistory).map(getTopSites);
+
+	return (
+		<div>
+			<div class="logo">
+				<img
+					src={`${import.meta.env.BASE_URL}roxxie-icon.svg`}
+					alt="Roxxie Proxy U logo"
+					width="56"
+					height="56"
+				/>
+				<h1>Roxxie Proxy U</h1>
+			</div>
+			<div class="topbar">
+				<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();
+									tabsService.searchNavigate(
+										(e.target as HTMLInputElement).value
+									);
+								}
+							}}
+							placeholder={use(
+								settingsService.settings.defaultSearchEngine
+							).map(
+								(engine) =>
+									`Search ${AVAILABLE_SEARCH_ENGINES[engine].name} or type a URL`
+							)}
+						></input>
+					</div>
+				</div>
+				{/*<div class="clock">
+					{new Date().toLocaleTimeString([], {
+						hour: "2-digit",
+						minute: "2-digit",
+					})}
+				</div>*/}
+			</div>
+			<div class="main">
+				<section class="top-sites" aria-label="Favorites and frequent sites">
+					<ul class="top-sites-list">
+						{topSites.mapEach((entry) => (
+							<TopSiteButton entry={entry}></TopSiteButton>
+						))}
+					</ul>
+				</section>
+			</div>
+		</div>
+	);
+}
+NewTabPage.style = css`
+	:scope {
+		--top-site-column-size: 6.3rem;
+		--top-site-tile-size: 4.25rem;
+		--top-site-icon-size: 48px;
+
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-family: var(--font);
+		background: var(--ntp_background);
+		color: var(--ntp_text);
+
+		padding: clamp(4rem, 5vw, 6rem) clamp(1.25rem, 4vw, 4rem) 3rem;
+		overflow-y: auto;
+	}
+
+	.topbar {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 1.5rem;
+	}
+	.logo {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		margin-bottom: 2rem;
+	}
+	.logo h1 {
+		font-size: 2.25rem;
+		font-weight: 600;
+		user-select: none;
+	}
+	.logo img {
+		display: inline-block;
+		user-select: none;
+	}
+	.clock {
+		font-size: 1.5em;
+		font-weight: bold;
+		min-width: 4em;
+		text-align: center;
+	}
+
+	.inputcontainercontainer {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+	}
+	.inputcontainer {
+		width: min(100%, 42rem);
+		min-height: 3rem;
+		background: var(--toolbar_field);
+		border: 1px solid var(--ntp-text-20);
+		border-radius: var(--radius-xl);
+		display: flex;
+		align-items: center;
+		transition:
+			border-color 0.15s ease-out,
+			box-shadow 0.15s ease-out,
+			background-color 0.15s ease-out;
+	}
+
+	.icon {
+		font-size: 1.15rem;
+		padding-left: var(--space-xl);
+		color: var(--field-text-50);
+	}
+
+	.inputcontainer:focus-within {
+		border-color: var(--tab_line);
+		box-shadow: 0 0 0 2px var(--accent-20);
+		outline: none;
+	}
+	input {
+		font-size: 1.05rem;
+		outline: none;
+		padding: var(--space-xl);
+		flex: 1;
+		height: 100%;
+		background: none;
+		border: none;
+		color: var(--toolbar_field_text);
+		font-family: var(--font);
+	}
+
+	input::placeholder {
+		color: var(--field-text-60);
+	}
+
+	.main {
+		margin-top: var(--space-xl);
+		width: min(100%, 62rem);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-xl);
+	}
+
+	.top-sites {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	.top-sites-list {
+		width: 100%;
+		max-width: calc(var(--top-site-column-size) * 8 + 7 * 1rem);
+		display: grid;
+		grid-template-columns: repeat(
+			auto-fit,
+			minmax(
+				min(var(--top-site-column-size), 100%),
+				var(--top-site-column-size)
+			)
+		);
+		justify-content: center;
+		justify-items: center;
+		gap: 1.35rem 1rem;
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	@media (max-width: 720px) {
+		:scope {
+			padding-top: 1.25rem;
+		}
+
+		.top-sites-list {
+			grid-template-columns: repeat(auto-fit, minmax(6.25rem, 6.25rem));
+		}
+	}
+`;

package/source/packages/chrome/src/pages/PlaygroundPage.tsx

@@ -0,0 +1,43 @@
+import { css, type FC } from "dreamland/core";
+import type { Tab } from "../Tab/Tab";
+
+// import { editor } from "monaco-editor";
+
+// const Editor: Component<
+// 	{
+// 		language: string;
+// 	},
+// 	{
+// 		editor: editor.IStandaloneCodeEditor;
+// 	}
+// > = function (cx) {
+// 	cx.mount = () => {
+// 		this.editor = editor.create(cx.root, {
+// 			language: this.language,
+// 			automaticLayout: true,
+// 		});
+// 	};
+
+// 	return <div></div>;
+// };
+// Editor.style = css`
+// 	:scope {
+// 		width: 100%;
+// 		height: 100%;
+// 	}
+// `;
+
+export function PlaygroundPage(this: FC<{ tab: Tab }>) {
+	return (
+		<div>
+			<h1>Scramjet Playground</h1>
+			{/*<Editor language="html"></Editor>*/}
+		</div>
+	);
+}
+PlaygroundPage.style = css`
+	:scope {
+		width: 100%;
+		height: 100%;
+	}
+`;