Promo tools: pill menu (Social posts / Email swipes / Banners / Banner wall / Videos)

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

public/assets/my.js

@@ -1011,6 +1011,20 @@
   }
   document.querySelectorAll('.subtabs [data-earn]').forEach(b =>
     b.addEventListener('click', () => setEarnSub(b.dataset.earn)));
+  // promo tools: pill menu switches between posts / swipes / banners / wall / videos
+  function setPromoSub(name) {
+    const ids = ['posts', 'swipe', 'banners', 'wall', 'videos'];
+    if (!ids.includes(name)) name = 'posts';
+    ids.forEach(id => { const el = $('promo-' + id); if (el) el.hidden = id !== name; });
+    document.querySelectorAll('.promo-pills [data-promo]').forEach(b => {
+      b.classList.toggle('on', b.dataset.promo === name);
+      b.setAttribute('aria-selected', b.dataset.promo === name ? 'true' : 'false');
+    });
+    try { localStorage.setItem('iap.promoSub', name); } catch (e) {}
+  }
+  document.querySelectorAll('.promo-pills [data-promo]').forEach(b =>
+    b.addEventListener('click', () => setPromoSub(b.dataset.promo)));
+  try { setPromoSub(localStorage.getItem('iap.promoSub') || 'posts'); } catch (e) { setPromoSub('posts'); }
   async function loadInbox() {
     try {
       const r = await (await fetch('/api/my/inbox')).json();

public/my.html

@@ -534,17 +534,24 @@
       </div>
 
       <div class="pane" id="pane-promo" hidden>
-        <div class="card">
+        <div class="chips promo-pills" role="tablist" aria-label="Promo tools sections">
+          <button class="chip-t on" data-promo="posts" type="button" role="tab">Social posts</button>
+          <button class="chip-t" data-promo="swipe" type="button" role="tab">Email swipes</button>
+          <button class="chip-t" data-promo="banners" type="button" role="tab">Banners</button>
+          <button class="chip-t" data-promo="wall" type="button" role="tab">Banner wall</button>
+          <button class="chip-t" data-promo="videos" type="button" role="tab">Videos</button>
+        </div>
+        <div class="card promo-sec" id="promo-posts">
           <h3>Share-ready posts, personalized with your link</h3>
           <p class="muted small">Copy, paste anywhere, done. Every post already carries your invite link,
             so the credit is always yours.</p>
           <div id="promoPosts"></div>
         </div>
-        <div class="card">
+        <div class="card promo-sec" id="promo-swipe" hidden>
           <h3>Email swipe</h3>
           <p class="muted small" id="promoSwipeWrap"></p>
         </div>
-        <div class="card">
+        <div class="card promo-sec" id="promo-wall" hidden>
           <h3>Your banner wall</h3>
           <p class="muted small">A public page showing your line banner and your upline ladder, with your
             join link front and center. Every visit puts eyes on your whole line — send traffic here and
@@ -553,12 +560,18 @@
           <p><button class="btn small sec" id="wallCopy" type="button" hidden>Copy wall link</button>
              <a class="btn small sec" id="wallOpen" target="_blank" rel="noopener" hidden>Open your wall</a></p>
         </div>
-        <div class="card">
+        <div class="card promo-sec" id="promo-banners" hidden>
           <h3>Banners</h3>
           <p class="muted small">Branded InstantAdPay banners, ready to drop anywhere. Pair one with your
             invite link (copy it from "My line"). Right-click to save, or copy the image URL.</p>
           <div id="promoBanners" class="promo-banners"></div>
         </div>
+        <div class="card promo-sec" id="promo-videos" hidden>
+          <h3>Hook videos</h3>
+          <p class="muted small">Short videos, one per angle, each with a matched invite link that lands on a
+            page continuing the same hook. In production now. When they arrive, this tab holds the previews,
+            your matched links, and paste-ready captions.</p>
+        </div>
       </div>
 
       <div class="pane" id="pane-profile" hidden>
@@ -697,7 +710,7 @@
 </div>
 <script src="/assets/common.js?v=20260909a"></script>
 <script src="/assets/wallet.js?v=20260908t"></script>
-<script src="/assets/my.js?v=20260909b"></script>
+<script src="/assets/my.js?v=20260909c"></script>
 <script src="/assets/chat.js?v=20260907l"></script>
 </body>
 </html>