improve settings, update some browser elements to use button component

Author: bomberfish

.vscode/settings.json

@@ -54,5 +54,8 @@
 		"**/Makefile": false,
 		"**/*.sh": false,
 		"**/dist": false
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "vscode.typescript-language-features"
 	}
 }

packages/chrome/public/icon.png

@@ -3,6 +3,7 @@ import { Icon } from "./Icon";
 import { browser, type BookmarkEntry } from "../Browser";
 import { Input } from "./Input";
 import { closeMenu } from "./Menu";
+import { Button } from "./Button";
 
 export const BookmarkPopup: Component<{
 	bookmark: Stateful<BookmarkEntry>;
@@ -16,7 +17,7 @@ export const BookmarkPopup: Component<{
 				<Input
 					label="Title"
 					value={this.bookmark.title}
-					onInput={(e) =>
+					on:input={(e) =>
 						(this.bookmark.title = (e.target as HTMLInputElement).value)
 					}
 				/>
@@ -25,13 +26,13 @@ export const BookmarkPopup: Component<{
 				<Input
 					label="URL"
 					value={this.bookmark.url}
-					onInput={(e) =>
+					on:input={(e) =>
 						(this.bookmark.url = (e.target as HTMLInputElement).value)
 					}
 				/>
 			</div>
 			<div class="actions">
-				<button
+				<Button
 					on:click={() => {
 						if (!this.new) {
 							browser.bookmarks = browser.bookmarks.filter(
@@ -42,9 +43,9 @@ export const BookmarkPopup: Component<{
 					}}
 				>
 					{this.new ? "Cancel" : "Delete"}
-				</button>
-				<button
-					class="accent"
+				</Button>
+				<Button
+					variant="primary"
 					on:click={() => {
 						if (this.new) {
 							browser.bookmarks = [this.bookmark, ...browser.bookmarks];
@@ -54,7 +55,7 @@ export const BookmarkPopup: Component<{
 					}}
 				>
 					{this.new ? "Add" : "Save"}
-				</button>
+				</Button>
 			</div>
 		</div>
 	);

packages/chrome/src/components/BookmarkPopup.tsx

@@ -1,22 +1,59 @@
 import { css, type Component } from "dreamland/core";
 
-export const Checkbox: Component<{ value: boolean }> = function () {
+export const Checkbox: Component<{
+	value: boolean;
+	"on:change"?: (value: boolean) => void;
+}> = function () {
 	return (
 		<label>
-			<input type="checkbox" checked={use(this.value)}></input>
+			<input
+				type="checkbox"
+				checked={use(this.value)}
+				on:change={(e: any) => this["on:change"]?.(e.target.checked)}
+			></input>
 		</label>
 	);
 };
+
 Checkbox.style = css`
 	:scope {
 		width: 1em;
 		height: 1em;
 		background: var(--bg);
 		border: 1px solid var(--bg20);
+		display: inline-block;
+		position: relative;
+		border-radius: 4px;
+		vertical-align: middle;
+		transition:
+			background 120ms ease,
+			border-color 120ms ease;
+		box-sizing: border-box;
+	}
+
+	:scope::after {
+		content: "✓";
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--bg);
+		font-size: 0.8em;
+		transform: scale(0);
+		transition: transform 120ms ease;
+		pointer-events: none;
 	}
+
 	:scope:has(input:checked) {
 		background: var(--accent);
+		border-color: var(--accent);
+	}
+
+	:scope:has(input:checked)::after {
+		transform: scale(1);
 	}
+
 	input {
 		visibility: hidden;
 		display: block;

packages/chrome/src/components/Checkbox.tsx

@@ -5,20 +5,22 @@ import { closeMenu, createMenuCustom } from "./Menu";
 import { iconClose, iconFolder, iconOpen, iconPause } from "../icons";
 import { formatBytes } from "../utils";
 import { defaultFaviconUrl } from "../assets/favicon";
+import { Button } from "./Button";
 
 export const DownloadsPopup: Component<{}> = function (cx) {
 	return (
 		<div>
 			<div class="title">
 				<span>Recent Downloads</span>
 				<div class="buttoniconcontainer">
-					<button
+					<Button
+						variant="icon"
 						on:click={() => {
 							closeMenu();
 						}}
 					>
 						<Icon icon={iconClose}></Icon>
-					</button>
+					</Button>
 				</div>
 			</div>
 			<div class="entries">
@@ -44,30 +46,32 @@ export const DownloadsPopup: Component<{}> = function (cx) {
 								.map((b) => !b)
 								.andThen(
 									<>
-										<button>
+										<Button variant="icon">
 											<Icon icon={iconFolder}></Icon>
-										</button>
-										<button>
+										</Button>
+										<Button variant="icon">
 											<Icon icon={iconOpen}></Icon>
-										</button>
+										</Button>
 									</>
 								)}
 							{use(b.progress).andThen(
 								<>
-									<button
+									<Button
+										variant="icon"
 										on:click={() => {
 											b.pause!();
 										}}
 									>
 										<Icon icon={iconPause}></Icon>
-									</button>
-									<button
+									</Button>
+									<Button
+										variant="icon"
 										on:click={() => {
 											b.cancel!();
 										}}
 									>
 										<Icon icon={iconClose}></Icon>
-									</button>
+									</Button>
 								</>
 							)}
 						</div>

packages/chrome/src/components/DownloadsPopup.tsx

@@ -9,23 +9,23 @@ export const Input: Component<{
 	required?: boolean;
 	disabled?: boolean;
 	autofocus?: boolean;
-	className?: string;
-	onInput?: (e: Event) => void;
-	onFocus?: (e: FocusEvent) => void;
-	onBlur?: (e: FocusEvent) => void;
-	onKeyDown?: (e: KeyboardEvent) => void;
-	onKeyUp?: (e: KeyboardEvent) => void;
+	class?: string;
+	"on:input"?: (e: Event) => void;
+	"on:focus"?: (e: FocusEvent) => void;
+	"on:blur"?: (e: FocusEvent) => void;
+	"on:keydown"?: (e: KeyboardEvent) => void;
+	"on:keyup"?: (e: KeyboardEvent) => void;
 }> = function (cx) {
 	const handleInput = (e: Event) => {
 		this.value = (e.target as HTMLInputElement).value;
 
-		if (this.onInput) {
-			this.onInput(e);
+		if (this["on:input"]) {
+			this["on:input"](e);
 		}
 	};
 
 	return (
-		<div class={`input-container ${this.className || ""}`}>
+		<div class={`input-container ${this.class || ""}`}>
 			{this.label && <label>{this.label}</label>}
 			<input
 				type={this.type || "text"}
@@ -36,10 +36,10 @@ export const Input: Component<{
 				disabled={this.disabled}
 				autofocus={this.autofocus}
 				on:input={handleInput}
-				on:focus={this.onFocus as any}
-				on:blur={this.onBlur as any}
-				on:keydown={this.onKeyDown as any}
-				on:keyup={this.onKeyUp as any}
+				on:focus={this["on:focus"] as any}
+				on:blur={this["on:blur"] as any}
+				on:keydown={this["on:keydown"] as any}
+				on:keyup={this["on:keyup"] as any}
 			/>
 		</div>
 	);

packages/chrome/src/components/Input.tsx

@@ -32,7 +32,7 @@ OmnibarButton.style = css`
 		padding: 0.25em;
 
 		font-size: 1.15em;
-		color: var(--fg5);
+		color: var(--fg2);
 		border-radius: 0.2em;
 	}
 	:scope.active:hover {

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

@@ -4,7 +4,7 @@ import { splitUrl } from "../utils";
 
 import { iconClose, iconTrash, iconSettings } from "../icons";
 import { Icon } from "./Icon";
-import { SmallIconButton } from "./SmallIconButton";
+import { Button } from "./Button";
 
 import { closeMenu } from "./Menu";
 
@@ -18,12 +18,14 @@ export const SiteInformationPopup: Component<{
 					{use(this.tab.url).map((u) => splitUrl(u)[0] + splitUrl(u)[1])}
 				</span>
 				<div class="buttoniconscontainer">
-					<SmallIconButton
-						click={() => {
+					<Button
+						variant="icon"
+						on:click={() => {
 							closeMenu();
 						}}
-						icon={iconClose}
-					></SmallIconButton>
+					>
+						<Icon icon={iconClose}></Icon>
+					</Button>
 				</div>
 			</div>
 			<div class="content">

packages/chrome/src/components/SiteInformationPopup.tsx

@@ -218,7 +218,7 @@ DragTab.style = css`
 		color: var(--fg);
 
 		border-radius: 4px;
-		padding: 7px 8px 5px 8px;
+		padding: 7px 8px;
 
 		display: flex;
 		align-items: center;
@@ -230,11 +230,13 @@ DragTab.style = css`
 	}
 	.main span {
 		flex: 1;
-		font-size: 13px;
-
+		font-size: 12px;
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
+		height: 100%;
+		vertical-align: center;
+		line-height: 100%;
 	}
 	.main .close > * {
 		width: 14px;