From f9b198a49b692a45b6404944794176513dae99b6 Mon Sep 17 00:00:00 2001
From: martbost <martybostick@gmail.com>
Date: Fri, 11 Sep 2026 06:05:02 -0500
Subject: [PATCH] Your links: collapsed band per angle; Share button only where
 a share sheet exists

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 public/assets/promo.js | 18 +++++++++---------
 public/assets/site.css |  8 ++++----
 public/my.html         |  4 ++--
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/public/assets/promo.js b/public/assets/promo.js
index 5a532dd..77c87ae 100644
--- a/public/assets/promo.js
+++ b/public/assets/promo.js
@@ -113,19 +113,19 @@ window.IAPPromo = (function () {
       for (const a of ANGLES) {
         const url = angleLink(link, a.angle);
         const hasVideo = VIDEOS.some(v => v.angle === a.angle);
-        const row = document.createElement('div');
-        row.className = 'angle-row';
-        row.innerHTML = '<div class="angle-txt"><div class="angle-head"><span class="angle-name">' + esc(a.name) + '</span><span class="angle-hook">' + esc(a.hook) + '</span>'
-          + (hasVideo ? '<span class="angle-tag">video</span>' : '') + '</div>'
+        // one collapsed band per angle, like the banner kit: open the one you want
+        const row = document.createElement('details');
+        row.className = 'angle-row pb-acc';
+        row.innerHTML = '<summary><span><span class="angle-name">' + esc(a.name) + '</span> <span class="angle-hook">' + esc(a.hook) + '</span></span>'
+          + (hasVideo ? '<span class="angle-tag">video</span>' : '') + '</summary>'
+          + '<div class="angle-body"><div class="angle-txt">'
           + '<div class="muted small">' + esc(a.use) + '</div>'
           + '<a class="mono small angle-url" href="' + esc(url) + '" target="_blank" rel="noopener">' + esc(url) + '</a></div>'
-          + '<div class="angle-btns"><a class="btn small sec" href="' + esc(url) + '" target="_blank" rel="noopener">Open</a><button class="btn small" type="button">Copy</button><button class="btn small sec" type="button">Share</button></div>';
+          + '<div class="angle-btns"><a class="btn small sec" href="' + esc(url) + '" target="_blank" rel="noopener">Open</a><button class="btn small" type="button">Copy</button>'
+          + (navigator.share ? '<button class="btn small sec" type="button">Share</button>' : '') + '</div></div>'; // Share = the phone's share sheet; desktops have none, so no button
         const [copyBtn, shareBtn] = row.querySelectorAll('button');
         copyBtn.onclick = async () => { try { await navigator.clipboard.writeText(url); status((a.name === 'General' ? 'Invite' : a.name) + ' link copied.', 'ok'); } catch (e) { status('Copy failed.', 'bad'); } };
-        shareBtn.onclick = async () => {
-          if (navigator.share) { try { await navigator.share({ title: 'InstantAdPay', text: a.hook, url }); return; } catch (e) { if (e && e.name === 'AbortError') return; } }
-          try { await navigator.clipboard.writeText(url); status('No share sheet here, so the link is copied.', 'ok'); } catch (e) { status('Copy failed.', 'bad'); }
-        };
+        if (shareBtn) shareBtn.onclick = async () => { try { await navigator.share({ title: 'InstantAdPay', text: a.hook, url }); } catch (e) { if (!(e && e.name === 'AbortError')) status('Could not open the share sheet.', 'bad'); } };
         al.appendChild(row);
       }
     }
diff --git a/public/assets/site.css b/public/assets/site.css
index 3d8bc96..0d529a7 100644
--- a/public/assets/site.css
+++ b/public/assets/site.css
@@ -627,12 +627,12 @@ img{max-width:100%}
 
 /* ── promo tools (2026-09-09) ── */
 .promo-strip{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px}
-.angle-list{display:flex;flex-direction:column}
-.angle-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)}
+.angle-list{display:flex;flex-direction:column;gap:8px}
+.angle-row.pb-acc>summary{padding:12px 14px;font-size:14.5px}
+.angle-row .angle-body{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:0 14px 14px}
 .angle-row .angle-txt{flex:1 1 320px;min-width:0}
-.angle-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
 .angle-name{font-family:var(--disp);font-weight:700;font-size:15px}
-.angle-hook{color:var(--mint);font-size:13px}
+.angle-hook{color:var(--mint);font-size:13px;font-weight:500}
 .angle-tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:1px 7px}
 .angle-url{overflow-wrap:anywhere;margin-top:4px;display:block;color:var(--mint);text-decoration:none}
 .angle-url:hover{text-decoration:underline}
diff --git a/public/my.html b/public/my.html
index 3a65dc7..e7e0220 100644
--- a/public/my.html
+++ b/public/my.html
@@ -5,7 +5,7 @@
 <title>Member area | InstantAdPay</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
 <link rel="icon" type="image/png" href="/logo-icon.png">
-<link rel="stylesheet" href="/assets/site.css?v=20260910j">
+<link rel="stylesheet" href="/assets/site.css?v=20260911a">
 </head>
 <body class="bo-body">
 
@@ -881,7 +881,7 @@
 </div>
 <script src="/assets/common.js?v=20260910c"></script>
 <script src="/assets/wallet.js?v=20260910a"></script>
-<script src="/assets/promo.js?v=20260910b"></script>
+<script src="/assets/promo.js?v=20260911a"></script>
 <script src="/assets/my.js?v=20260910m"></script>
 <script src="/assets/chat.js?v=20260907l"></script>
 </body>