Draw apps with Simple Icons instead of fetched favicons
The favicon service was wrong as often as it was right: a sign-in page's icon for anything behind a login, nothing at all for a private host, and both answers cached past any way of asking again. Refreshing could not fix it, because the staleness was not local. Now every mark is. Each app is its brand glyph in white on a round tile, coloured from Tailwind's 500s by hashing the host - you find things by their colour, so one that moved every launch would be worse than none. A host with no glyph gets its initial in the same tile. Matching tries the registrable name first, since a self-hosted tool is nearly always on a subdomain of its vendor - aputure.odoo.com is Odoo, not Aputure. A short table covers what a domain cannot answer, which is most of Google. The build reduces Simple Icons' 15MB of SVGs to one 4.5MB map in public/, fetched once rather than parsed into the bundle at every start; the bundle stays at 233KB. It is generated on every build, so never committed and never stale. Traffic lights are offset to sit inside the window margin rather than crowding its edge.
This commit is contained in:
@@ -33,7 +33,6 @@ export default function Nav({
|
||||
onSelect, onToggleCollapse, onOpenSettings, onToggleGroup,
|
||||
onBack, onForward, onReload,
|
||||
}: Props) {
|
||||
const iconV = config.settings.faviconVersion ?? 0;
|
||||
const groups = [...config.groups].sort((a, b) => a.order - b.order);
|
||||
const inGroup = (id: string | null) =>
|
||||
config.apps.filter((a) => a.groupId === id).sort((a, b) => a.order - b.order);
|
||||
@@ -106,7 +105,7 @@ export default function Nav({
|
||||
}
|
||||
>
|
||||
{active && <span className="absolute left-0 h-5 w-[3px] rounded-full bg-sky-500" />}
|
||||
<Favicon url={app.url} name={app.name} size={20} version={iconV} />
|
||||
<Favicon url={app.url} name={app.name} size={20} />
|
||||
{(unread[app.id] ?? 0) > 0 && (
|
||||
<span
|
||||
title={`${unread[app.id]} new since you last looked`}
|
||||
@@ -168,7 +167,7 @@ export default function Nav({
|
||||
title={app.url}
|
||||
className={`${row} ${app.id === activeId ? active : inactive}`}
|
||||
>
|
||||
<Favicon url={app.url} name={app.name} version={iconV} />
|
||||
<Favicon url={app.url} name={app.name} />
|
||||
<span className="truncate">{app.name}</span>
|
||||
{badge(app.id, app.id === activeId)}
|
||||
</button>
|
||||
|
||||
@@ -99,16 +99,7 @@ export default function Settings({
|
||||
|
||||
{/* ----------------------------------------------------- apps */}
|
||||
<section className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<SectionHeading>Apps</SectionHeading>
|
||||
<button
|
||||
onClick={() => run(() => api.refreshFavicons())}
|
||||
title="Fetch every icon again — one that cached wrong will not fix itself"
|
||||
className={BTN}
|
||||
>
|
||||
Refresh icons
|
||||
</button>
|
||||
</div>
|
||||
<SectionHeading>Apps</SectionHeading>
|
||||
<div className="space-y-1.5">
|
||||
{config.apps.length === 0 && <p className={HELP}>Nothing yet. Add the first one below.</p>}
|
||||
{orderedApps.map((app) => (
|
||||
@@ -116,7 +107,7 @@ export default function Settings({
|
||||
key={app.id}
|
||||
className="flex items-center gap-2 rounded-lg border border-slate-200 px-2 py-1.5 dark:border-slate-800"
|
||||
>
|
||||
<Favicon url={app.url} name={app.name} version={config.settings.faviconVersion ?? 0} />
|
||||
<Favicon url={app.url} name={app.name} />
|
||||
<input
|
||||
value={app.name}
|
||||
onChange={(e) => patch(app, { name: e.target.value })}
|
||||
@@ -192,7 +183,7 @@ export default function Settings({
|
||||
{withHidden.map((app) => (
|
||||
<div key={app.id} className={SUBPANEL}>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<Favicon url={app.url} name={app.name} version={config.settings.faviconVersion ?? 0} />
|
||||
<Favicon url={app.url} name={app.name} />
|
||||
<span className="text-[12px] font-medium">{app.name}</span>
|
||||
<Badge tone="accent">{app.hidden.length}</Badge>
|
||||
</div>
|
||||
@@ -240,7 +231,7 @@ export default function Settings({
|
||||
key={app.id}
|
||||
className="flex items-center gap-3 rounded-lg border border-slate-200 px-2 py-1.5 dark:border-slate-800"
|
||||
>
|
||||
<Favicon url={app.url} name={app.name} version={config.settings.faviconVersion ?? 0} />
|
||||
<Favicon url={app.url} name={app.name} />
|
||||
<span className="w-28 shrink-0 truncate text-[12px]">{app.name}</span>
|
||||
<input
|
||||
type="range"
|
||||
|
||||
+43
-36
@@ -5,7 +5,9 @@
|
||||
* Ported from FlightTube: slate and sky, a 9–15px type ladder, outline-first
|
||||
* controls, borders for separation and shadows only for elevation.
|
||||
*/
|
||||
import type { ReactNode } from "react";
|
||||
import { useEffect, useState, type ReactNode } from "react";
|
||||
|
||||
import { colourFor, hostOf, loadBrandIcons, slugForHost } from "../brandIcons";
|
||||
|
||||
/** Every control in the app is this tall, so a row of mixed ones lines up. */
|
||||
export const CONTROL_H = "h-[30px]";
|
||||
@@ -201,55 +203,60 @@ export function Dialog({
|
||||
}
|
||||
|
||||
/**
|
||||
* An app's mark. Google's favicon service is used rather than the site's own
|
||||
* /favicon.ico, because many work tools sit behind a login that would return
|
||||
* the sign-in page's icon — or a 403 — to a request without a session.
|
||||
* An app's mark: its brand glyph, white, on a round tile of its own colour.
|
||||
*
|
||||
* Local rather than fetched. The favicon service this replaced returned a
|
||||
* sign-in page's icon for anything behind a login, nothing at all for a
|
||||
* private host, and cached both answers past any way of asking again.
|
||||
*/
|
||||
export function Favicon({
|
||||
url,
|
||||
name,
|
||||
size = 16,
|
||||
version = 0,
|
||||
}: {
|
||||
url: string;
|
||||
name: string;
|
||||
size?: number;
|
||||
/** Bumped by "Refresh icons" to get past a wrongly cached one. */
|
||||
version?: number;
|
||||
}) {
|
||||
let host = "";
|
||||
try {
|
||||
host = new URL(url).hostname;
|
||||
} catch {
|
||||
host = "";
|
||||
}
|
||||
const [icons, setIcons] = useState<Record<string, string> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let live = true;
|
||||
void loadBrandIcons().then((i) => live && setIcons(i));
|
||||
return () => {
|
||||
live = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const host = hostOf(url);
|
||||
const slug = icons ? slugForHost(host, icons) : null;
|
||||
const path = slug ? icons?.[slug] : undefined;
|
||||
const colour = colourFor(host || name);
|
||||
const letter = name.trim().charAt(0).toUpperCase() || "?";
|
||||
|
||||
return (
|
||||
<span
|
||||
className="relative grid shrink-0 place-items-center overflow-hidden rounded"
|
||||
style={{ width: size, height: size }}
|
||||
className="grid shrink-0 place-items-center rounded-full"
|
||||
style={{ width: size, height: size, background: colour }}
|
||||
aria-hidden
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
className="absolute inset-0 grid place-items-center rounded bg-slate-200
|
||||
text-[9px] font-bold text-slate-500 dark:bg-slate-700 dark:text-slate-300"
|
||||
style={{ fontSize: Math.max(9, size * 0.5) }}
|
||||
>
|
||||
{letter}
|
||||
</span>
|
||||
{host && (
|
||||
<img
|
||||
src={`https://www.google.com/s2/favicons?sz=64&domain=${host}&v=${version}`}
|
||||
alt=""
|
||||
width={size}
|
||||
height={size}
|
||||
loading="lazy"
|
||||
className="relative rounded"
|
||||
onError={(e) => {
|
||||
// Leave the letter showing rather than a broken-image glyph.
|
||||
e.currentTarget.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
{path ? (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="#fff"
|
||||
style={{ width: size * 0.58, height: size * 0.58 }}
|
||||
>
|
||||
<path d={path} />
|
||||
</svg>
|
||||
) : (
|
||||
/* No glyph for this host — its initial, in the same round tile, so a
|
||||
private tool sits in the row looking like it belongs. */
|
||||
<span
|
||||
className="font-semibold leading-none text-white"
|
||||
style={{ fontSize: Math.max(8, size * 0.5) }}
|
||||
>
|
||||
{letter}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user