feat(anime): show extension and repo icons in extensions panel

- Add extension-icons module (buildIconIndex, isSafeIconUrl, repoFaviconUrl, iconMonogram) with tests
- Render each row's icon with a monogram fallback while loading or missing
- Installed extensions borrow their icon from the catalogue; repo rows use the index host's favicon
- Restrict icon loads to https URLs
- Thread iconUrl through AvailableExtension and the runtime, document the feature
This commit is contained in:
2026-08-06 22:02:38 -07:00
parent 4c6bfaa22e
commit 47d31e9628
7 changed files with 190 additions and 1 deletions
+41
View File
@@ -211,6 +211,47 @@
border-color: rgba(237, 135, 150, 0.45);
}
/*
* Avatar for an extension row. The monogram is the box's own text, so it shows
* while the icon loads and stays put when a repository publishes none; a loaded
* icon covers it.
*/
.ext-icon {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--ctp-surface0);
font-size: 13px;
font-weight: 600;
color: var(--faint);
overflow: hidden;
}
/* A loaded icon replaces the monogram; transparent PNGs must not show it. */
.ext-icon.has-icon {
border-color: transparent;
background: transparent;
color: transparent;
}
.ext-icon-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
}
.ext-icon.has-icon .ext-icon-img {
opacity: 1;
}
.ext-main {
flex: 1 1 auto;
min-width: 0;