quoid · ACTCD · Mar 24, 2025 · Mar 2, 2025 · Mar 2, 2025 · Mar 2, 2025
diff --git a/entry-app-webview.html b/entry-app-webview.html
@@ -7,7 +7,7 @@
 			name="viewport"
 			content="width=device-width, initial-scale=1, user-scalable=no"
 		/>
-		<meta name="color-scheme" content="dark" />
+		<meta name="color-scheme" content="dark light" />
 		<title>Userscripts App</title>
 	</head>
 	<body>

diff --git a/entry-ext-action-popup.html b/entry-ext-action-popup.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta name="color-scheme" content="dark" />
+		<meta name="color-scheme" content="dark light" />
 		<title>Userscripts popup</title>
 	</head>
 	<body>

diff --git a/entry-ext-extension-page.html b/entry-ext-extension-page.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta name="color-scheme" content="dark" />
+		<meta name="color-scheme" content="dark light" />
 		<title>Userscripts page</title>
 	</head>
 	<body>

diff --git a/eslint.config.js b/eslint.config.js
@@ -40,15 +40,15 @@ export default [
 
 	/** @see {@link https://eslint.org/docs/latest/use/configure/migration-guide#configuring-language-options} */
 	{
-		files: ["scripts/**/*.js"],
+		files: ["*.js", "scripts/**/*.js"],
 		languageOptions: {
 			globals: {
 				...globals.node,
 			},
 		},
 	},
 	{
-		files: ["src/{app,dev}/**/*.{js,svelte}"],
+		files: ["src/{app,dev,shared}/**/*.{js,svelte}"],
 		languageOptions: {
 			globals: {
 				...globals.browser,

diff --git a/etc/uilayout.sketch b/etc/uilayout.sketch
diff --git a/public/ext/safari-15/images/icon-128.png b/public/ext/safari-15/images/icon-128.png
diff --git a/public/ext/safari-15/images/icon-256.png b/public/ext/safari-15/images/icon-256.png
diff --git a/public/ext/safari-15/images/icon-48.png b/public/ext/safari-15/images/icon-48.png
diff --git a/public/ext/safari-15/images/icon-512.png b/public/ext/safari-15/images/icon-512.png
diff --git a/public/ext/safari-15/images/icon-64.png b/public/ext/safari-15/images/icon-64.png
diff --git a/public/ext/safari-15/images/icon-96.png b/public/ext/safari-15/images/icon-96.png
diff --git a/public/ext/safari-15/images/toolbar-icon-16.png b/public/ext/safari-15/images/toolbar-icon-16.png
diff --git a/public/ext/safari-15/images/toolbar-icon-32.png b/public/ext/safari-15/images/toolbar-icon-32.png
diff --git a/public/ext/safari-15/images/toolbar-icon-48.png b/public/ext/safari-15/images/toolbar-icon-48.png
diff --git a/public/ext/safari-15/manifest.json b/public/ext/safari-15/manifest.json
@@ -6,6 +6,7 @@
 	"version": "_VERSION_",
 	"icons": {
 		"48": "images/icon-48.png",
+		"64": "images/icon-64.png",
 		"96": "images/icon-96.png",
 		"128": "images/icon-128.png",
 		"256": "images/icon-256.png",
@@ -19,7 +20,8 @@
 		"default_popup": "dist/entry-ext-action-popup.html",
 		"default_icon": {
 			"16": "images/toolbar-icon-16.png",
-			"32": "images/toolbar-icon-32.png"
+			"32": "images/toolbar-icon-32.png",
+			"48": "images/toolbar-icon-48.png"
 		}
 	},
 	"options_ui": {

diff --git a/scripts/utils.js b/scripts/utils.js
@@ -191,4 +191,11 @@ export const baseConfig = {
 				"import.meta.env.GIT_TAG": JSON.stringify(gitTag),
 				"import.meta.env.GIT_COMMIT": JSON.stringify(gitCommit),
 			},
+	resolve: {
+		alias: {
+			// NOTE: Don't forget to modify the `paths` in `jsconfig.json` also
+			"@shared": fileURLToPath(new URL("../src/shared", import.meta.url)),
+			"@ext": fileURLToPath(new URL("../src/ext/shared", import.meta.url)),
+		},
+	},
 };
diff --git a/src/app/App.svelte b/src/app/App.svelte
@@ -1,10 +1,10 @@
 <svelte:options runes={true} />
 
 <script>
-	import icon from "./img/icon.png";
-	import logo from "./img/logo.svg?raw";
-	import IconDebug from "../ext/shared/img/icon-bug.svg?raw";
-	import Dropdown from "../ext/shared/Components/Dropdown.svelte";
+	import logoIcon from "@shared/img/logo-icon.png";
+	import LogoText from "@shared/Components/LogoText.svelte";
+	import IconDebug from "@shared/img/icon-bug.svg?raw";
+	import Dropdown from "@shared/Components/Dropdown.svelte";
 	import { i18nInit } from "./i18n.js";
 
 	const baseUrl = "https://github.com/quoid/userscripts";
@@ -151,10 +151,11 @@
 				alt="Userscripts App Icon"
 				class="icon"
 				draggable="false"
-				src={icon}
+				src={logoIcon}
 			/>
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-			<div class="logo">{@html logo}</div>
+			<div class="logo">
+				<LogoText />
+			</div>
 			<div class="version">
 				{#if import.meta.env.GIT_TAG && import.meta.env.GIT_COMMIT}
 					<a href="{baseUrl}/releases/tag/{import.meta.env.GIT_TAG}">
@@ -370,7 +371,7 @@
 
 	button.red,
 	button.red2:hover {
-		color: var(--text-color-primary);
+		color: var(--color-white);
 		background-color: var(--color-red);
 	}
 

diff --git a/src/app/i18n.js b/src/app/i18n.js
@@ -51,7 +51,7 @@ export async function i18nInit() {
 				md: (n, s) => getLangFrom(markdown, n, s),
 			};
 		} catch (error) {
-			console.debug(error);
+			console.debug("Will fall back to `en`", error);
 		}
 	}
 	throw Error("I18n initialization failed");

diff --git a/src/app/img/logo.svg b/src/app/img/logo.svg
diff --git a/src/app/jsconfig.json b/src/app/jsconfig.json
@@ -20,7 +20,11 @@
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"skipLibCheck": true,
-		"sourceMap": true
+		"sourceMap": true,
+
+		"paths": {
+			"@shared/*": ["../shared/*"]
+		}
 	},
 	"include": ["**/*.d.ts", "**/*.js", "**/*.svelte"]
 }
diff --git a/src/app/main.js b/src/app/main.js
@@ -1,9 +1,42 @@
 import "./reset.css";
-import "../shared/variables.css";
+import "@shared/variables.css";
 import "./app.css";
 import { mount } from "svelte";
 import App from "./App.svelte";
 
+if (import.meta.env.MODE === "development") {
+	// Simulation in non-WkWebView dev environment
+	if (import.meta.env.SAFARI_PLATFORM === undefined) {
+		console.warn("Simulation webkit...");
+		window.webkit = {
+			messageHandlers: {
+				controller: {
+					postMessage: async (message) => {
+						switch (message) {
+							case "INIT":
+								return {
+									build: "2",
+									directory: "Userscripts App Documents",
+									enableLogger: true,
+									extStatus: "unknown",
+									firstRunTime: 1,
+									maxLogFileSize: 500_000_000,
+									platform: "mac",
+									promptLogger: true,
+									useSettingsInsteadOfPreferences: true,
+									version: "2.0.0",
+								};
+							default:
+								console.debug("Simulation.webkit.messageHandler:", message);
+								break;
+						}
+					},
+				},
+			},
+		};
+	}
+}
+
 const app = mount(App, { target: document.getElementById("app") });
 
 export default app;
diff --git a/src/ext/action-popup/App.svelte b/src/ext/action-popup/App.svelte
@@ -1,20 +1,20 @@
 <script>
 	import { onMount } from "svelte";
-	import IconButton from "../shared/Components/IconButton.svelte";
-	import Toggle from "../shared/Components/Toggle.svelte";
-	import Loader from "../shared/Components/Loader.svelte";
+	import IconButton from "@shared/Components/IconButton.svelte";
+	import Toggle from "@shared/Components/Toggle.svelte";
+	import Loader from "@shared/Components/Loader.svelte";
 	import PopupItem from "./Components/PopupItem.svelte";
 	import View from "./Components/View.svelte";
 	import UpdateView from "./Components/Views/UpdateView.svelte";
 	import InstallView from "./Components/Views/InstallView.svelte";
 	import AllItemsView from "./Components/Views/AllItemsView.svelte";
-	import iconOpen from "../shared/img/icon-open.svg?raw";
-	import iconUpdate from "../shared/img/icon-update.svg?raw";
-	import iconClear from "../shared/img/icon-clear.svg?raw";
-	import iconRefresh from "../shared/img/icon-refresh.svg?raw";
-	import { extensionPaths, openExtensionPage } from "../shared/utils.js";
-	import { connectNative, sendNativeMessage } from "../shared/native.js";
-	import * as settingsStorage from "../shared/settings.js";
+	import iconOpen from "@shared/img/icon-open.svg?raw";
+	import iconUpdate from "@shared/img/icon-update.svg?raw";
+	import iconClear from "@shared/img/icon-clear.svg?raw";
+	import iconRefresh from "@shared/img/icon-refresh.svg?raw";
+	import { extensionPaths, openExtensionPage } from "@ext/utils.js";
+	import { connectNative, sendNativeMessage } from "@ext/native.js";
+	import * as settingsStorage from "@ext/settings.js";
 
 	let errorNotification;
 	let active = true;
@@ -657,7 +657,7 @@
 
 	.header .buttons {
 		align-items: center;
-		border-bottom: 1px solid var(--color-black);
+		border-bottom: 1px solid var(--border-color);
 		display: flex;
 		padding: 0.5rem 1rem calc(0.5rem - 1px);
 	}
@@ -746,7 +746,7 @@
 	}
 
 	.footer {
-		border-top: 1px solid var(--color-black);
+		border-top: 1px solid var(--border-color);
 		font-weight: 600;
 		line-height: 1.5rem;
 		padding: 0.5rem 0;

diff --git a/src/ext/action-popup/Components/PopupItem.svelte b/src/ext/action-popup/Components/PopupItem.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Tag from "../../shared/Components/Tag.svelte";
+	import Tag from "@shared/Components/Tag.svelte";
 
 	export let background;
 	export let enabled = false;
@@ -50,7 +50,7 @@
 	span {
 		align-items: center;
 		background-color: var(--color-red);
-		border: 1px solid var(--color-black);
+		border: 1px solid var(--border-color);
 		border-radius: 50%;
 		display: flex;
 		display: none;

diff --git a/src/ext/action-popup/Components/View.svelte b/src/ext/action-popup/Components/View.svelte
@@ -1,8 +1,8 @@
 <script>
 	import { quintInOut } from "svelte/easing";
-	import IconButton from "../../shared/Components/IconButton.svelte";
-	import Loader from "../../shared/Components/Loader.svelte";
-	import iconArrowLeft from "../../shared/img/icon-arrow-left.svg?raw";
+	import IconButton from "@shared/Components/IconButton.svelte";
+	import Loader from "@shared/Components/Loader.svelte";
+	import iconArrowLeft from "@shared/img/icon-arrow-left.svg?raw";
 
 	export let loading = false;
 	export let headerTitle = "View Header";
@@ -51,7 +51,7 @@
 
 	.view__header {
 		background-color: var(--color-bg-secondary);
-		border-bottom: 1px solid var(--color-black);
+		border-bottom: 1px solid var(--border-color);
 		flex-shrink: 0;
 		font-weight: 600;
 		padding: 0.5rem 1rem calc(0.5rem - 1px);

diff --git a/src/ext/action-popup/Components/Views/InstallView.svelte b/src/ext/action-popup/Components/Views/InstallView.svelte
@@ -1,6 +1,6 @@
 <script>
-	import iconWarn from "../../../shared/img/icon-warn.svg?raw";
-	import iconError from "../../../shared/img/icon-error.svg?raw";
+	import iconWarn from "@shared/img/icon-warn.svg?raw";
+	import iconError from "@shared/img/icon-error.svg?raw";
 
 	export let userscript;
 	export let installError;
@@ -129,7 +129,7 @@
 	}
 
 	.badge {
-		background-color: var(--color-black);
+		background-color: var(--color-bg-theme);
 		border-radius: var(--border-radius);
 		display: flex;
 		font: var(--text-small);
@@ -158,7 +158,7 @@
 	}
 
 	button {
-		background-color: #ffffffa6; /* -text-color-secondary */
+		background-color: var(--text-color-secondary);
 		border-radius: var(--border-radius);
 		color: var(--color-bg-primary);
 		flex-grow: 1;

diff --git a/src/ext/action-popup/Components/Views/UpdateView.svelte b/src/ext/action-popup/Components/Views/UpdateView.svelte
@@ -1,5 +1,5 @@
 <script>
-	import iconUpdate from "../../../shared/img/icon-update.svg?raw";
+	import iconUpdate from "@shared/img/icon-update.svg?raw";
 
 	export let updates = [];
 	export let updateClick;
@@ -35,7 +35,7 @@
 <style>
 	.item {
 		align-items: center;
-		border-bottom: 1px solid var(--color-black);
+		border-bottom: 1px solid var(--border-color);
 		display: flex;
 		padding: 0.5rem 1rem;
 		text-align: left;