Launcher polish: monogram reveal-on-failure + app placeholder on every icon surface (v0.163.1)

(A) The launcher monogram bled through every transparent white logo — it rendered
unconditionally under the img. Now hidden by default (.launch-mono display:none),
revealed only when the img chain fails (onerror adds .launch-tile--noimg).

(B) The /static/app-placeholder.svg default reached only app_list_row. The four
other sanctioned app-logo onerror chains now match the canonical SVG->PNG->placeholder
grammar: backups_apps (aligned row), stacks (infra->infra-logo else placeholder),
app_info hero (screenshots still vanish), deploy (keeps .LogoURL/.LogoPNGURL).

Template/CSS only; no handler/funcmap change. 5 tests + 2 red-proofs.
This commit is contained in:
2026-07-24 10:14:25 +02:00
parent 7a53cb43ef
commit 2c80868c63
9 changed files with 199 additions and 10 deletions
@@ -37,8 +37,8 @@
<!-- Hero section -->
<div class="app-info-hero">
<img class="app-info-logo" src="{{logoURL .Meta.Slug}}"
alt="{{.Meta.DisplayName}}"
onerror="this.onerror=function(){this.style.display='none'};this.src='{{logoPNGURL .Meta.Slug}}'">
alt="{{.Meta.DisplayName}}" data-fallback="/static/app-placeholder.svg"
onerror="if(!this.dataset.step){this.dataset.step='1';this.src='{{logoPNGURL .Meta.Slug}}';}else if(this.dataset.fallback&&this.dataset.step==='1'){this.dataset.step='2';this.src=this.dataset.fallback;}else{this.onerror=null;this.style.visibility='hidden';}">
<div class="app-info-hero-text">
{{if .AppInfo.Tagline}}
<p class="app-info-tagline">{{.AppInfo.Tagline}}</p>
@@ -139,10 +139,12 @@
<div class="app-backup-row" data-status="{{.Status}}">
<!-- Aligned to the shared app-row grammar (icon + name left, status + chevron right);
the expander behavior is untouched — this header is the one allowlisted aligned
copy in scripts/app_row_dedup_gate.py, NOT a partial render (it owns the toggle). -->
copy in scripts/app_row_dedup_gate.py, NOT a partial render (it owns the toggle).
The icon chain matches app_row.html: SVG -> PNG -> /static/app-placeholder.svg, so a
logo-less app shows the placeholder here too instead of a hidden dead-end (v0.163.1). -->
<div class="app-backup-row-header" onclick="toggleBackupDetail(this)">
<img class="app-row-icon" src="{{logoURL .Slug}}" alt=""
onerror="this.onerror=function(){this.style.visibility='hidden'};this.src='{{logoPNGURL .Slug}}'">
<img class="app-row-icon" src="{{logoURL .Slug}}" alt="" data-fallback="/static/app-placeholder.svg"
onerror="if(!this.dataset.step){this.dataset.step='1';this.src='{{logoPNGURL .Slug}}';}else if(this.dataset.fallback&&this.dataset.step==='1'){this.dataset.step='2';this.src=this.dataset.fallback;}else{this.onerror=null;this.style.visibility='hidden';}">
<span class="app-backup-row-name">{{.DisplayName}}</span>
<div class="app-backup-row-meta">
{{if .DriveDisconnected}}
@@ -26,7 +26,8 @@
{{if .FlashSuccess}}<div class="flash flash-success">{{.FlashSuccess}}</div>{{end}}
{{if .FlashError}}<div class="flash flash-error">{{.FlashError}}</div>{{end}}
<div class="deploy-info">
<img class="deploy-logo" src="{{.LogoURL}}" alt="" onerror="this.onerror=function(){this.style.display='none'};this.src='{{.LogoPNGURL}}'">
<img class="deploy-logo" src="{{.LogoURL}}" alt="" data-fallback="/static/app-placeholder.svg"
onerror="if(!this.dataset.step){this.dataset.step='1';this.src='{{.LogoPNGURL}}';}else if(this.dataset.fallback&&this.dataset.step==='1'){this.dataset.step='2';this.src=this.dataset.fallback;}else{this.onerror=null;this.style.visibility='hidden';}">
<div>
<h3>{{.Meta.DisplayName}}</h3>
{{if .Meta.Description}}<p>{{.Meta.Description}}</p>{{end}}
@@ -14,7 +14,7 @@
<span class="launch-tile" style="background: {{tileColor .Slug .BrandColor}}">
<span class="launch-mono">{{initial .DisplayName}}</span>
<img class="launch-logo" src="{{logoURL .Slug}}" alt=""
onerror="if(!this.dataset.step){this.dataset.step='1';this.src='{{logoPNGURL .Slug}}';}else{this.onerror=null;this.style.display='none';}">
onerror="if(!this.dataset.step){this.dataset.step='1';this.src='{{logoPNGURL .Slug}}';}else{this.onerror=null;this.style.display='none';this.parentElement.classList.add('launch-tile--noimg');}">
</span>
<span class="launch-name">{{.DisplayName}}</span>
{{if ne (stateStr .State) "running"}}<span class="tag tag-{{stateColor .State}}"><span class="dot"></span>{{stateLabel .State}}</span>{{end}}
@@ -24,7 +24,7 @@
<span class="launch-tile launch-tile--off" style="background: {{tileColor .Slug .BrandColor}}">
<span class="launch-mono">{{initial .DisplayName}}</span>
<img class="launch-logo" src="{{logoURL .Slug}}" alt=""
onerror="if(!this.dataset.step){this.dataset.step='1';this.src='{{logoPNGURL .Slug}}';}else{this.onerror=null;this.style.display='none';}">
onerror="if(!this.dataset.step){this.dataset.step='1';this.src='{{logoPNGURL .Slug}}';}else{this.onerror=null;this.style.display='none';this.parentElement.classList.add('launch-tile--noimg');}">
</span>
<span class="launch-name">{{.DisplayName}}</span>
<span class="tag tag-{{stateColor .State}}"><span class="dot"></span>{{stateLabel .State}}</span>
@@ -22,7 +22,7 @@
<div class="stack-detail-card stack-state-{{stateColor .State}}" data-filter-state="{{filterCategory .State .Deployed}}"{{if .Meta.Slug}} data-href="/apps/{{.Meta.Slug}}"{{end}}>
<div class="stack-detail-header">
<div class="stack-title-row">
<img class="stack-logo-lg" src="{{logoURL .Meta.Slug}}" alt=""{{if $im}} data-fallback="/static/infra-logo.svg"{{end}}
<img class="stack-logo-lg" src="{{logoURL .Meta.Slug}}" alt="" data-fallback="{{if $im}}/static/infra-logo.svg{{else}}/static/app-placeholder.svg{{end}}"
onerror="if(!this.dataset.step){this.dataset.step='1';this.src='{{logoPNGURL .Meta.Slug}}';}else if(this.dataset.fallback&&this.dataset.step==='1'){this.dataset.step='2';this.src=this.dataset.fallback;}else{this.onerror=null;this.style.visibility='hidden';}">
<div>
<h3>{{if $im}}{{$im.DisplayName}}{{else}}{{.Meta.DisplayName}}{{end}}</h3>
@@ -1146,8 +1146,15 @@ a.stat-card:hover {
transform: translateY(-2px);
border-color: var(--blue);
}
/* The monogram is the logo-less fallback ONLY: hidden by default, revealed when the tile's <img>
chain fails (onerror adds .launch-tile--noimg). Otherwise a transparent white glyph would show
the letter bleeding through its gaps on every tile (v0.163.1 live finding). */
.launch-mono {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--font-ui);
font-size: 2.4rem;
@@ -1155,6 +1162,7 @@ a.stat-card:hover {
line-height: 1;
user-select: none;
}
.launch-tile--noimg .launch-mono { display: flex; }
.launch-logo {
position: relative;
width: 58%;