Vincent/work-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show each site's own icon; restore the native title bar

Browse Source 
Both previous attempts asked a question about a domain, and a domain does
not know which product it is serving. Google's favicon service returned a
marketing site's icon for anything behind a login and nothing for a
private host; Simple Icons returned one flat brand mark where the real
one is multicoloured and, for Gmail, carries the unread count.

The page already holds the answer - fetched, authenticated, current. The
injected script now reads link[rel~="icon"] and reports the best one:
largest declared sizes wins, an Apple touch icon counts as 180, and an
.ico is penalised as usually the 16px tab icon. It rechecks on the same
tick as the unread count, which is when a site like Gmail redraws its
icon with a badge. The URL is stored, so the nav is right at launch
rather than blank until every page has loaded.

The custom frame is gone with it: ordinary macOS title bar, traffic
lights where every other window puts them, and the bar following the
app's Light/Dark choice through set_theme. A window that behaves like a
window beats one that looks bespoke.
This commit is contained in:
Vincent
2026-09-01 15:03:09 +02:00
parent ffedb72b83
commit 17d13d2505
17 changed files with 186 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/build-brand-icons.mjs
-36
View File
@@ -1,36 +0,0 @@
/**
* Turns Simple Icons into one map of slug → [path, brand colour].
*
* The package ships a file per icon and 15MB of SVG wrapper around what is
* really a single `d` attribute each, plus a separate metadata file carrying
* the brand's own hex. This joins the two and throws the rest away.
*
* The output goes to public/ rather than src/: it is fetched once at runtime
* instead of being parsed into the JS bundle at every startup.
*
* `npm run build` runs this, so the result is never committed and never stale.
*/
import { readFileSync, readdirSync, writeFileSync } from "node:fs";
import { join } from "node:path";
const ICONS = "node_modules/simple-icons/icons";
const META = "node_modules/simple-icons/data/simple-icons.json";
const OUT = "public/brand-icons.json";
const hexes = new Map();
for (const icon of JSON.parse(readFileSync(META, "utf8"))) {
hexes.set(icon.slug, icon.hex);
}
const icons = {};
for (const file of readdirSync(ICONS)) {
if (!file.endsWith(".svg")) continue;
const slug = file.slice(0, -4);
const path = /\sd="([^"]+)"/.exec(readFileSync(join(ICONS, file), "utf8"))?.[1];
if (!path) continue;
icons[slug] = [path, hexes.get(slug) ?? "64748B"];
}
writeFileSync(OUT, JSON.stringify(icons));
const kb = Math.round(readFileSync(OUT).length / 1024);
console.log(`${Object.keys(icons).length} icons → ${OUT} (${kb} KB)`);