App-icon tiles for Signals and DeadAir, drawn as the logo is (#268)

web/signals.svg and web/deadair-{on,off}.svg, each with a -dark twin,
follow logo.svg's rules: square and opaque, the logo's gradient ground,
flat layers in its scale blues, the needle's orange, nothing thin
enough to vanish at 32px. Signals is the page's own glyph, waves going
out from a point, the point in orange. DeadAir on is the waveform
closed up with the needle at the cut; off has the silence still in its
middle, an orange flat line, and its bars muted, so the state is in
the shape as the old glyphs had it.

The Signals folder row and its page header show the Signals tile in
place of the glyph on an accent tint; the player's DeadAir switch shows
the on or off tile. tile() puts both variants on the page, and the mode
rule that picked the logo's now picks any .onlight/.ondark. The three
glyphs nothing uses any more are gone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/app.css

@@ -501,9 +501,9 @@ a{color:var(--accent)}
 }
 #applogo{display:flex;flex:none}
 #applogo img{width:28px;height:28px;border-radius:7px}
-/* The logo in the mode's own variant. Dark unless the page says light, as the palette is: with
+/* The logo, and the app-icon tiles, in the mode's own variant. Dark unless the page says light, as the palette is: with
    Auto, data-mode arrives with the script, and until then the page is drawn dark. */
-:root[data-mode="light"] .logo.ondark,:root:not([data-mode="light"]) .logo.onlight{display:none}
+:root[data-mode="light"] .ondark,:root:not([data-mode="light"]) .onlight{display:none}
 /* Classic is the 2004 app, so it wears the 2004 app's icon. */
 .logo.classic,:root[data-theme="classic"] .logo:not(.classic){display:none}
 :root[data-theme="classic"] .logo.classic{display:block}
@@ -590,8 +590,6 @@ input:focus,select:focus{outline:0;border-color:var(--accent)}
 .feed.lastpin{margin-bottom:9px}
 .feed.lastpin::after{content:"";position:absolute;left:8px;right:8px;bottom:-5px;border-bottom:1px solid var(--line)}
 .feed.child .art{width:28px;height:28px;font-size:11px}
-/* A Signal's tile is its icon, as a place's is: there is no artwork of its own. */
-.art.sig .i{width:45%;height:45%}
 /* A Signal's own icon (#261): Font Awesome's file as a mask, so it is drawn in the text's colour
    and follows the theme as the page's own icons do. */
 .ficon{
@@ -780,6 +778,8 @@ body.scan-this .fhead [data-a=scan] .i,body.scan-any .fhead [data-a=scanall] .i,
 }
 /* Initials, tinted by a hash of the name so two "TS" in a row can be told apart. Mixed into the
    page ground, not --raise: that is also the selected row, and a selected tile vanished into it. */
+.art>.tile{width:100%;height:100%;display:block}
+#pdead .tile{width:22px;height:22px;border-radius:5px}
 .art.ini{background:color-mix(in srgb,var(--tint) 24%,var(--bg));color:var(--tint)}
 /* A folder: its first four shows' art, as iTunes built a playlist's from its albums. */
 .art.mosaic{grid-template:1fr 1fr/1fr 1fr;place-items:stretch}

web/build.mjs

@@ -123,6 +123,7 @@ if (process.argv[1] === fileURLToPath(import.meta.url)) {
   // nothing here shows any more but the classic theme.
   for (const [from, to] of [
     ['logo.svg', 'logo.svg'], ['logo-dark.svg', 'logo-dark.svg'],
+    ...['signals', 'deadair-on', 'deadair-off'].flatMap(n => [`${n}.svg`, `${n}-dark.svg`]).map(f => [f, f]),
     ['favicon.png', 'favicon.png'], ['favicon.png', 'favicon.ico'], ['favicon-dark.png', 'favicon-dark.png'],
     ['apple-touch-icon.png', 'apple-touch-icon.png'], ['apple-touch-icon.png', 'apple-touch-icon-precomposed.png'],
     ['ipodderx-icon.png', 'icon.png'], ['boot.js', 'boot.js'], ['InterVariable.woff2', 'inter.woff2'], ['Inter-LICENSE.txt', 'Inter-LICENSE.txt'],

web/deadair-off-dark.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <!-- deadair-off.svg's dark appearance: the same layers in the same places, only recoloured. -->
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#1d4468"/>
+      <stop offset="1" stop-color="#0c2238"/>
+    </linearGradient>
+  </defs>
+  <g id="background"><rect width="1024" height="1024" fill="url(#bg)"/></g>
+  <g id="waveform" fill="#8fc2ea">
+    <rect x="120" y="336" width="112" height="352" rx="56" opacity=".3"/>
+    <rect x="264" y="208" width="112" height="608" rx="56" opacity=".5"/>
+    <rect x="648" y="208" width="112" height="608" rx="56" opacity=".5"/>
+    <rect x="792" y="336" width="112" height="352" rx="56" opacity=".3"/>
+  </g>
+  <g id="silence"><rect x="424" y="464" width="176" height="96" rx="48" fill="#ff6a1a"/></g>
+</svg>

web/deadair-off.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <!-- DeadAir off: deadair-on.svg's waveform with the silence still in its middle, a flat line,
+       its bars muted, as the page's off glyph is only outlined; the silence keeps the orange. -->
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#dff0fb"/>
+      <stop offset="1" stop-color="#9fccef"/>
+    </linearGradient>
+  </defs>
+  <g id="background"><rect width="1024" height="1024" fill="url(#bg)"/></g>
+  <g id="waveform" fill="#2f6aa0">
+    <rect x="120" y="336" width="112" height="352" rx="56" opacity=".3"/>
+    <rect x="264" y="208" width="112" height="608" rx="56" opacity=".5"/>
+    <rect x="648" y="208" width="112" height="608" rx="56" opacity=".5"/>
+    <rect x="792" y="336" width="112" height="352" rx="56" opacity=".3"/>
+  </g>
+  <g id="silence"><rect x="424" y="464" width="176" height="96" rx="48" fill="#ff5500"/></g>
+</svg>

web/deadair-on-dark.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <!-- deadair-on.svg's dark appearance: the same layers in the same places, only recoloured. -->
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#1d4468"/>
+      <stop offset="1" stop-color="#0c2238"/>
+    </linearGradient>
+  </defs>
+  <g id="background"><rect width="1024" height="1024" fill="url(#bg)"/></g>
+  <g id="waveform" fill="#8fc2ea">
+    <rect x="188" y="336" width="112" height="352" rx="56" opacity=".55"/>
+    <rect x="332" y="208" width="112" height="608" rx="56" opacity=".85"/>
+    <rect x="580" y="208" width="112" height="608" rx="56" opacity=".85"/>
+    <rect x="724" y="336" width="112" height="352" rx="56" opacity=".55"/>
+  </g>
+  <g id="needle"><rect x="476" y="160" width="72" height="704" rx="36" fill="#ff6a1a"/></g>
+</svg>

web/deadair-on.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <!-- DeadAir on, drawn as logo.svg is (square, opaque, one background and flat hard-edged
+       layers, nothing thin enough to vanish at 32px) from the page's own DeadAir glyph: the
+       waveform closed up where its silence was, the cut marked by the needle in orange.
+       deadair-off.svg is the same waveform with the silence still in it. Each <g> is a layer. -->
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#dff0fb"/>
+      <stop offset="1" stop-color="#9fccef"/>
+    </linearGradient>
+  </defs>
+  <g id="background"><rect width="1024" height="1024" fill="url(#bg)"/></g>
+  <g id="waveform" fill="#2f6aa0">
+    <rect x="188" y="336" width="112" height="352" rx="56" opacity=".55"/>
+    <rect x="332" y="208" width="112" height="608" rx="56" opacity=".85"/>
+    <rect x="580" y="208" width="112" height="608" rx="56" opacity=".85"/>
+    <rect x="724" y="336" width="112" height="352" rx="56" opacity=".55"/>
+  </g>
+  <g id="needle"><rect x="476" y="160" width="72" height="704" rx="36" fill="#ff5500"/></g>
+</svg>

web/signals-dark.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <!-- signals.svg's dark appearance: the same layers in the same places, only recoloured. -->
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#1d4468"/>
+      <stop offset="1" stop-color="#0c2238"/>
+    </linearGradient>
+  </defs>
+  <g id="background"><rect width="1024" height="1024" fill="url(#bg)"/></g>
+  <g id="waves" fill="none" stroke="#8fc2ea" stroke-width="112" stroke-linecap="round">
+    <path d="M293 252A340 340 0 0 0 293 772M731 252A340 340 0 0 1 731 772" opacity=".5"/>
+    <path d="M377 351A210 210 0 0 0 377 673M647 351A210 210 0 0 1 647 673" opacity=".85"/>
+  </g>
+  <g id="point"><circle cx="512" cy="512" r="96" fill="#ff6a1a"/></g>
+</svg>

web/signals.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <!-- The Signals folder's tile, drawn as logo.svg is (square, opaque, one background and flat
+       hard-edged layers, nothing thin enough to vanish at 32px) from the page's own Signals
+       glyph: waves going out from a point, the point in the needle's orange. Each <g> is a layer. -->
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#dff0fb"/>
+      <stop offset="1" stop-color="#9fccef"/>
+    </linearGradient>
+  </defs>
+  <g id="background"><rect width="1024" height="1024" fill="url(#bg)"/></g>
+  <g id="waves" fill="none" stroke="#2f6aa0" stroke-width="112" stroke-linecap="round">
+    <path d="M293 252A340 340 0 0 0 293 772M731 252A340 340 0 0 1 731 772" opacity=".5"/>
+    <path d="M377 351A210 210 0 0 0 377 673M647 351A210 210 0 0 1 647 673" opacity=".85"/>
+  </g>
+  <g id="point"><circle cx="512" cy="512" r="96" fill="#ff5500"/></g>
+</svg>

web/src/player.ts

@@ -164,13 +164,13 @@ $<HTMLInputElement>('#seek').oninput=(e: Event)=>{const d=audio.duration;if(d)au
 $<HTMLSelectElement>('#rate').onchange=(e: Event)=>{audio.playbackRate=+(e.target as HTMLSelectElement).value;localStorage.setItem('ipx.rate',(e.target as HTMLSelectElement).value)};
 $<HTMLInputElement>('#vol').oninput=(e: Event)=>{audio.volume=Number((e.target as HTMLInputElement).value)/100;localStorage.setItem('ipx.vol',(e.target as HTMLInputElement).value)};
 /// DeadAir's switch beside the speed: on or off for the show that is playing. The state is in the
-/// icon's shape and aria-pressed, never a colour.
+/// icon's shape (the silence still in it, or closed up) and aria-pressed, never a colour.
 function paintDead(){
   const b=$<HTMLButtonElement>('#pdead'), f=S.feeds.find(x=>x.id===player.feed);
   b.hidden=!f||document.body.classList.contains('has-video');
   if(!f||b.hidden) return;
   b.setAttribute('aria-pressed',String(!!f.deadair));
-  b.innerHTML=f.deadair?ICON.deadairOn:ICON.deadair;
+  b.innerHTML=tile(f.deadair?'deadair-on':'deadair-off');
   b.title=f.deadair?'DeadAir is cutting the dead air from this show':'DeadAir: cut the dead air from this show';
 }
 $<HTMLButtonElement>('#pdead').onclick=async()=>{

web/src/signals.ts

@@ -21,8 +21,7 @@ function signalOf(view: string|null){
 /// The Signals folder: first in the feed list, under All Subscriptions, open or closed as an OPML's
 /// is (#255, #256). As rows under the places, a long list of them pushed the feeds down.
 const SIGNALS=':signals';
-// Tinted as a feed's initials are: a plain tile vanished into a selected row (see .art.ini).
+const sigArt=()=>`<span class="fart"><div class="art">${tile('signals')}</div></span>`;
-const sigArt=()=>`<span class="fart"><div class="art ini sig" style="--tint:var(--accent)">${ICON.signal}</div></span>`;
 function feedRow(id: string, cls: string, html: string, open: ()=>void){
   const el=document.createElement('div');
   el.className='feed '+cls+(S.feed===id?' sel':'');
@@ -75,7 +74,7 @@ function renderSignals(){
   box.classList.add('plain');
   box.innerHTML=`
     <div class="fhead slim">
-      <div class="art">${ICON.signal}</div>
+      <div class="art">${tile('signals')}</div>
       <div class="meta">
         <h2>Signals</h2>
         <div class="sub">Each one picks what matters out of the noise of your ${plural(S.feeds.length,'feed')} · ${unread} unread</div>

web/src/util.ts

@@ -12,9 +12,9 @@ const esc = (s: string|null|undefined) => (s??'').replace(/[&<>"']/g,c=>ESCAPED[
 // ones used, so there is no font to download and nothing is fetched from anyone else. Each takes
 // the button's own colour. To add one, copy the path from svgs/<style>/<name>.svg at the same tag.
 const fa=(box: string,body: string)=>`<svg class="i" viewBox="${box}" aria-hidden="true">${body}</svg>`;
+/// An app-icon tile (web/signals.svg, deadair-on.svg, ...) in the mode's own variant, as the logo is.
+const tile=(name: string)=>`<img class="tile onlight" src="/${name}.svg" alt=""><img class="tile ondark" src="/${name}-dark.svg" alt="">`;
 const ICON: Record<string,string>={
-// Waves either side of a point: a Signal (#254).
-signal:fa('0 0 512 512','<g fill="none" stroke="currentColor" stroke-width="44" stroke-linecap="round"><path d="M136 136a170 170 0 0 0 0 240"/><path d="M376 136a170 170 0 0 1 0 240"/><path d="M204 196a85 85 0 0 0 0 120"/><path d="M308 196a85 85 0 0 1 0 120"/></g><circle cx="256" cy="256" r="38" fill="currentColor"/>'),
   share:fa('0 0 512 512','<path fill="currentColor" d="M384 192c53 0 96-43 96-96s-43-96-96-96-96 43-96 96c0 5.4 .5 10.8 1.3 16L159.6 184.1c-16.9-15-39.2-24.1-63.6-24.1-53 0-96 43-96 96s43 96 96 96c24.4 0 46.6-9.1 63.6-24.1L289.3 400c-.9 5.2-1.3 10.5-1.3 16 0 53 43 96 96 96s96-43 96-96-43-96-96-96c-24.4 0-46.6 9.1-63.6 24.1L190.7 272c.9-5.2 1.3-10.5 1.3-16s-.5-10.8-1.3-16l129.7-72.1c16.9 15 39.2 24.1 63.6 24.1z"/>'), // solid/share-nodes
   plus:fa('0 0 448 512','<path fill="currentColor" d="M256 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 160-160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l160 0 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160 160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0 0-160z"/>'), // solid/plus
   circleMinus:fa('0 0 512 512','<path fill="currentColor" d="M512 256A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM184 232l144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/>'), // solid/circle-minus, for Unsubscribe
@@ -26,10 +26,6 @@ signal:fa('0 0 512 512','<g fill="none" stroke="currentColor" stroke-width="44"
   // for the outline's stroke, so the two draw the same size.
   pin:fa('-18 -18 420 548','<path fill="none" stroke="currentColor" stroke-width="36" stroke-linejoin="round" d="M32 32C32 14.3 46.3 0 64 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-29.5 0 11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3L32 352c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64 64 64C46.3 64 32 49.7 32 32zM160 384l64 0 0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96z"/>'), // solid/thumbtack, outlined
   pinOn:fa('-18 -18 420 548','<path fill="currentColor" d="M32 32C32 14.3 46.3 0 64 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-29.5 0 11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3L32 352c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64 64 64C46.3 64 32 49.7 32 32zM160 384l64 0 0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96z"/>'), // solid/thumbtack
-  // DeadAir (#171): a waveform. Off for this show, outlined with the silence still in its
-  // middle; on, solid with the gap closed up. Padded like pin for the outline's stroke.
-  deadair:fa('-16 -16 544 544','<g fill="none" stroke="currentColor" stroke-width="24"><rect x="14" y="200" width="44" height="112" rx="22"/><rect x="84" y="136" width="44" height="240" rx="22"/><rect x="154" y="96" width="44" height="320" rx="22"/><rect x="314" y="96" width="44" height="320" rx="22"/><rect x="384" y="136" width="44" height="240" rx="22"/><rect x="454" y="200" width="44" height="112" rx="22"/></g>'),
-  deadairOn:fa('-16 -16 544 544','<g fill="currentColor"><rect x="59" y="200" width="44" height="112" rx="22"/><rect x="129" y="136" width="44" height="240" rx="22"/><rect x="199" y="96" width="44" height="320" rx="22"/><rect x="269" y="96" width="44" height="320" rx="22"/><rect x="339" y="136" width="44" height="240" rx="22"/><rect x="409" y="200" width="44" height="112" rx="22"/></g>'),
   scan:fa('0 0 512 512','<path fill="currentColor" d="M65.9 228.5c13.3-93 93.4-164.5 190.1-164.5 53 0 101 21.5 135.8 56.2 .2 .2 .4 .4 .6 .6l7.6 7.2-47.9 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l128 0c17.7 0 32-14.3 32-32l0-128c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 53.4-11.3-10.7C390.5 28.6 326.5 0 256 0 127 0 20.3 95.4 2.6 219.5 .1 237 12.2 253.2 29.7 255.7s33.7-9.7 36.2-27.1zm443.5 64c2.5-17.5-9.7-33.7-27.1-36.2s-33.7 9.7-36.2 27.1c-13.3 93-93.4 164.5-190.1 164.5-53 0-101-21.5-135.8-56.2-.2-.2-.4-.4-.6-.6l-7.6-7.2 47.9 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 320c-8.5 0-16.7 3.4-22.7 9.5S-.1 343.7 0 352.3l1 127c.1 17.7 14.6 31.9 32.3 31.7S65.2 496.4 65 478.7l-.4-51.5 10.7 10.1c46.3 46.1 110.2 74.7 180.7 74.7 129 0 235.7-95.4 253.4-219.5z"/>'), // solid/arrows-rotate
   download:fa('0 0 448 512','<path fill="currentColor" d="M256 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 210.7-41.4-41.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 242.7 256 32zM64 320c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-46.9 0-56.6 56.6c-31.2 31.2-81.9 31.2-113.1 0L110.9 320 64 320zm304 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>'), // solid/download
   save:fa('0 0 448 512','<path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32L64 32zm32 96c0-17.7 14.3-32 32-32l160 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-160 0c-17.7 0-32-14.3-32-32l0-64zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>'), // solid/floppy-disk