Docs: show the new icon set in the landing list and admin screenshots

public/js/admin-app-form.js

@@ -369,19 +369,20 @@ function renderActLabels(host) {
     );
     const ctl = document.createElement('span');
     ctl.className = 'albl-ctl';
-    const mkBtn = (txt, aria, cls, disabled, onClick) => {
+    const mkBtn = (txt, aria, cls, disabled, onClick, icon) => {
       const b = document.createElement('button');
       b.type = 'button';
       b.className = cls;
-      b.textContent = txt;
+      if (icon) setHtml(b, html`${raw(iconSvg(icon, 14))}`);
+      else b.textContent = txt;
       b.setAttribute('aria-label', aria);
       b.disabled = disabled;
       b.onclick = onClick;
       return b;
     };
     ctl.append(
-      mkBtn('\u2191', t('app.moveUp'), 'albl-move', i === 0, () => moveActLabel(i, -1)),
-      mkBtn('\u2193', t('app.moveDown'), 'albl-move', i === state.spaths.length - 1, () => moveActLabel(i, 1)),
+      mkBtn('', t('app.moveUp'), 'albl-move', i === 0, () => moveActLabel(i, -1), 'arrow-up'),
+      mkBtn('', t('app.moveDown'), 'albl-move', i === state.spaths.length - 1, () => moveActLabel(i, 1), 'arrow-down'),
       mkBtn(t('widgetCfg.remove'), t('app.removeLabel'), 'grp-hdr-rm', false, () => {
         captureActLabels();
         state.spaths.splice(i, 1);

public/js/admin.js

@@ -1,4 +1,4 @@
-import { buildAppForm, buildFolderForm, captureActLabels, serializeKvRows } from '/js/admin-app-form.js?v=0b617803';
+import { buildAppForm, buildFolderForm, captureActLabels, serializeKvRows } from '/js/admin-app-form.js?v=72ab8cad';
 import { checkAuth, requireLogin, wirePasswordStrength } from '/js/admin-auth.js?v=9833ce5d';
 import { initList, render, syncFilterUI } from '/js/admin-list.js?v=1c65c8ad';
 import { resolveAdminSection } from '/js/admin-logic.js?v=e3673bd7';

src/content/docs/docs/badges.md

@@ -8,7 +8,7 @@ description: Add health checks, fixed labels and live values from any API to Sta
 A badge is the small pill on an app tile. Each app can have three kinds.
 
 <figure class="sy-shot">
-  <img class="sy-shot__light" src="/img/admin/app-edit-badge-b0148914.png" alt="The Badge section of an app: Health Check, Fixed Label and Live Activity" loading="lazy"><img class="sy-shot__dark" src="/img/admin/app-edit-badge-dark-d272ba44.png" alt="The Badge section of an app: Health Check, Fixed Label and Live Activity" loading="lazy">
+  <img class="sy-shot__light" src="/img/admin/app-edit-badge-98d02665.png" alt="The Badge section of an app: Health Check, Fixed Label and Live Activity" loading="lazy"><img class="sy-shot__dark" src="/img/admin/app-edit-badge-dark-cee1d99a.png" alt="The Badge section of an app: Health Check, Fixed Label and Live Activity" loading="lazy">
 </figure>
 
 ## Health check
@@ -35,7 +35,7 @@ Tick **Secret** on a header to keep its value on the server. Poll sets how often
 One API can feed up to five values. Press Add Label for each.
 
 <figure class="sy-shot">
-  <img class="sy-shot__light" src="/img/admin/app-edit-labels-3cce9d48.png" alt="Two labels, each with Value, Label Text, Color, Unit and Show From" loading="lazy"><img class="sy-shot__dark" src="/img/admin/app-edit-labels-dark-7729b939.png" alt="Two labels, each with Value, Label Text, Color, Unit and Show From" loading="lazy">
+  <img class="sy-shot__light" src="/img/admin/app-edit-labels-b87badcc.png" alt="Two labels, each with Value, Label Text, Color, Unit and Show From" loading="lazy"><img class="sy-shot__dark" src="/img/admin/app-edit-labels-dark-7cf4b4cd.png" alt="Two labels, each with Value, Label Text, Color, Unit and Show From" loading="lazy">
 </figure>
 
 - **Show From** keeps a value hidden below that count.

src/content/docs/docs/customization.md

@@ -19,7 +19,7 @@ Browsers only allow Keep Screen Awake over HTTPS. On a plain HTTP address the to
 
 
 <figure class="sy-shot">
-  <img class="sy-shot__light" src="/img/admin/appearance-da7cfb3d.png" alt="The Appearance section of the admin UI" loading="lazy"><img class="sy-shot__dark" src="/img/admin/appearance-dark-d382dd9a.png" alt="The Appearance section of the admin UI" loading="lazy">
+  <img class="sy-shot__light" src="/img/admin/appearance-14c98840.png" alt="The Appearance section of the admin UI" loading="lazy"><img class="sy-shot__dark" src="/img/admin/appearance-dark-ff2e7225.png" alt="The Appearance section of the admin UI" loading="lazy">
   <figcaption>Appearance, in the admin UI.</figcaption>
 </figure>
 

src/pages/index.astro

@@ -301,7 +301,7 @@ const schema = {
             <span class="achip">Folders</span>
           </div>
           <div class="arow">
-            <svg class="ahandle" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="9" cy="5" r="2"/><circle cx="15" cy="5" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="15" cy="12" r="2"/><circle cx="9" cy="19" r="2"/><circle cx="15" cy="19" r="2"/></svg>
+            <svg class="ahandle" viewBox="0 0 24 24" aria-hidden="true"><g><circle cx="9" cy="6" r="2" fill="currentColor"/><circle cx="15" cy="6" r="2" fill="currentColor"/><circle cx="9" cy="12" r="2" fill="currentColor"/><circle cx="15" cy="12" r="2" fill="currentColor"/><circle cx="9" cy="18" r="2" fill="currentColor"/><circle cx="15" cy="18" r="2" fill="currentColor"/></g><g></g></svg>
             <span class="aicon" style="background:#1c1c1e"><img src="/icons/w-github.svg" alt=""></span>
             <span class="aname">GitHub</span>
             <span class="apills">
@@ -311,8 +311,8 @@ const schema = {
             </span>
           </div>
           <div class="arow">
-            <svg class="ahandle" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="9" cy="5" r="2"/><circle cx="15" cy="5" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="15" cy="12" r="2"/><circle cx="9" cy="19" r="2"/><circle cx="15" cy="19" r="2"/></svg>
-            <span class="aicon aicon-wg" style="background:#3A3A3C"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="7" width="10" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"></rect><circle cx="9.7" cy="9.7" r="1" fill="currentColor"></circle><line x1="9" y1="13.4" x2="13" y2="13.4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></line></svg></span>
+            <svg class="ahandle" viewBox="0 0 24 24" aria-hidden="true"><g><circle cx="9" cy="6" r="2" fill="currentColor"/><circle cx="15" cy="6" r="2" fill="currentColor"/><circle cx="9" cy="12" r="2" fill="currentColor"/><circle cx="15" cy="12" r="2" fill="currentColor"/><circle cx="9" cy="18" r="2" fill="currentColor"/><circle cx="15" cy="18" r="2" fill="currentColor"/></g><g></g></svg>
+            <span class="aicon aicon-wg" style="background:#3A3A3C"><svg viewBox="0 0 24 24" aria-hidden="true"><defs><mask id="lp-nowplaying-m" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="#fff"/><path d="M10 8v8l6-4z" fill="#000" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></mask></defs><g mask="url(#lp-nowplaying-m)"><rect x="3" y="3" width="18" height="18" rx="4" fill="currentColor"/></g><g><path d="M10 8v8l6-4z" class="sy-a sy-as" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg></span>
             <span class="aname">Now Playing</span>
             <span class="apills">
               <span class="apill" style="background:rgba(0,210,224,.20);color:#3BDDEC">Widget</span>