From 3e642b97a73e9f67c6215c6d8a7b821a7c10c771 Mon Sep 17 00:00:00 2001
From: Myron Blair <myronblair@outlook.com>
Date: Sat, 6 Jun 2026 11:30:45 +0000
Subject: [PATCH] Add mouse drag, wheel, and arrow buttons to token package
 pill scroller

- Click-drag: grab cursor, drag left/right to scroll
- Mouse wheel: vertical scroll converts to horizontal pan
- Arrow buttons (< >) appear at edges when more pills are off-screen,
  hide when scrolled to the end

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.php | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/index.php b/index.php
index d0d855d..5e3f4c6 100644
--- a/index.php
+++ b/index.php
@@ -698,7 +698,11 @@ body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(
         <!-- 3. Token Package -->
         <div class="fg">
           <label>3. Select Token Package <span style="color:var(--text2);font-weight:400;font-size:15px">($1 = 1 Token)</span></label>
-          <div class="pkg-scroll" id="pkg-scroll"></div>
+          <div style="position:relative">
+            <button id="pkg-prev" onclick="pkgScroll(-1)" style="display:none;position:absolute;left:-10px;top:50%;transform:translateY(-50%);z-index:2;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:50%;width:28px;height:28px;font-size:14px;cursor:pointer;line-height:1;padding:0">‹</button>
+            <div class="pkg-scroll" id="pkg-scroll"></div>
+            <button id="pkg-next" onclick="pkgScroll(1)" style="display:none;position:absolute;right:-10px;top:50%;transform:translateY(-50%);z-index:2;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:50%;width:28px;height:28px;font-size:14px;cursor:pointer;line-height:1;padding:0">›</button>
+          </div>
           <!-- Custom amount row -->
           <div class="custom-amt-row" id="custom-pkg-row">
             <div class="custom-amt-wrap">
@@ -1466,6 +1470,59 @@ function buildCashoutPlatforms() {
 }
 
 // ─── TOKEN PACKAGES ────────────────────────────────────────
+function pkgScroll(dir) {
+  const el = document.getElementById('pkg-scroll');
+  if (el) el.scrollBy({ left: dir * 160, behavior: 'smooth' });
+}
+
+function initPkgScrollMouse() {
+  const el = document.getElementById('pkg-scroll');
+  if (!el) return;
+
+  // Show/hide arrows based on scroll position
+  const prev = document.getElementById('pkg-prev');
+  const next = document.getElementById('pkg-next');
+  function updateArrows() {
+    if (!prev || !next) return;
+    const canLeft  = el.scrollLeft > 4;
+    const canRight = el.scrollLeft < el.scrollWidth - el.clientWidth - 4;
+    prev.style.display = canLeft  ? 'block' : 'none';
+    next.style.display = canRight ? 'block' : 'none';
+  }
+  el.addEventListener('scroll', updateArrows, { passive: true });
+  setTimeout(updateArrows, 100);
+
+  // Mouse wheel → horizontal scroll
+  el.addEventListener('wheel', e => {
+    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+      e.preventDefault();
+      el.scrollBy({ left: e.deltaY * 1.5, behavior: 'auto' });
+    }
+  }, { passive: false });
+
+  // Click-drag scroll
+  let down = false, startX = 0, startScroll = 0, moved = false;
+  el.addEventListener('mousedown', e => {
+    down = true; moved = false;
+    startX = e.pageX; startScroll = el.scrollLeft;
+    el.style.cursor = 'grabbing'; el.style.userSelect = 'none';
+  });
+  document.addEventListener('mousemove', e => {
+    if (!down) return;
+    const dx = e.pageX - startX;
+    if (Math.abs(dx) > 4) moved = true;
+    el.scrollLeft = startScroll - dx;
+  });
+  document.addEventListener('mouseup', () => {
+    if (!down) return;
+    down = false;
+    el.style.cursor = 'grab'; el.style.userSelect = '';
+    // If the mouse barely moved, let the click on the pill go through
+    if (!moved) el.style.cursor = '';
+  });
+  el.style.cursor = 'grab';
+}
+
 function buildPkgPills() {
   const container = document.getElementById('pkg-scroll');
   container.innerHTML = CFG.packages.map((pkg, i) => `
@@ -1476,6 +1533,7 @@ function buildPkgPills() {
   const popularIdx = CFG.packages.findIndex(p => p.popular);
   const idx = popularIdx >= 0 ? popularIdx : 0;
   selectPkg(idx, container.querySelectorAll('.pkg-pill')[idx]);
+  initPkgScrollMouse();
 }
 function selectPkg(i, el) {
   S.pkg = CFG.packages[i]; S.customPkg = false;