Speed Dial: replace tile monograms with native SVG icons

Tiles previously rendered a colored monogram (title/source initials plus an ordinal) with a per-id hue. Show the matching native SVG icon instead:

- AppAction/NativeCommand gain an `icon` field; commands get a curated key->icon table and settings inherit their group header's icon.
- Notebook tracks each page's resource icon name and reports it in tab_options(), so the tab picker can show it too.
- Searcher records the group icon so settings keep it through search.
- Web tile rendering swaps monogramFor/hue for an <img>; drop the now-unused hue/text CSS vars. Add a test asserting every non-empty icon resolves to a shipped SVG.
This commit is contained in:
Lam Wei Lun
2026-09-11 11:36:24 +08:00
parent 792ab183e4
commit 42bee12481
15 changed files with 231 additions and 82 deletions
+15 -6
View File
@@ -60,9 +60,7 @@ body {
border: 0;
border-radius: 8px;
cursor: pointer;
color: hsl(var(--h) var(--speed-tile-text-s, 72%) var(--speed-tile-text-l, 38%));
font-weight: 700;
/* why: mirror .tile centering - icons/placeholder are 18px glyphs, and a bare <button> inherits
/* why: mirror .tile centering - icons/placeholder are 16px, and a bare <button> inherits
13px + UA padding, which would clip them. inline-flex + pad:0 + overflow:hidden fits them. */
font-size: 12px;
padding: 0;
@@ -310,9 +308,6 @@ body {
width: 26px;
height: 26px;
border-radius: 6px;
color: hsl(var(--h) var(--speed-tile-text-s, 72%) var(--speed-tile-text-l, 38%));
font-weight: 700;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -320,6 +315,20 @@ body {
border: 1px solid var(--speed-tile-border, #d8d8d8);
}
/* Native SVG pictogram in a tile; blank tiles (no icon) have no child. */
.tile-icon {
width: 16px;
height: 16px;
display: block;
pointer-events: none;
}
/* Tab-strip glyphs are drawn white for the dark tab bar; recolor to the shared #949494 gray so
they read on both the light and dark tile backgrounds. */
.tile-icon.tab-mono {
filter: brightness(0) invert(.58);
}
.row-left {
flex: 1 1 auto;
min-width: 0;