Chip strips drag sideways with a mouse (a drag doesn't click the chip it started on) and show a thin scrollbar on mouse devices, so the feed chips that run past the card are reachable on desktop

Co-Authored-By: Claude Opus 5.5 <[email protected]>

1 files changed, 32 insertions, 0 deletions

diff --git a/src/app.js b/src/app.js
index bf49dd1..9d5c86e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -6328,6 +6328,38 @@ if (INTENT_URI) {
   }, 500);
 }
 
+// Chip strips (the feed chips, a profile's lists) scroll sideways: a finger
+// swipes them, a mouse drags them. A drag that moved isn't a click on the
+// chip it started on.
+(() => {
+  let drag = null;
+  document.addEventListener('pointerdown', (e) => {
+    if (e.pointerType !== 'mouse' || e.button !== 0) return;
+    const el = e.target.closest && e.target.closest('.feed-chips');
+    if (!el || el.scrollWidth <= el.clientWidth) return;
+    drag = { el, x: e.clientX, left: el.scrollLeft, moved: false };
+  });
+  document.addEventListener('pointermove', (e) => {
+    if (!drag) return;
+    const dx = e.clientX - drag.x;
+    if (!drag.moved && Math.abs(dx) < 5) return;
+    drag.moved = true;
+    drag.el.classList.add('dragging');
+    drag.el.scrollLeft = drag.left - dx;
+  });
+  const end = () => {
+    if (!drag) return;
+    const d = drag; drag = null;
+    d.el.classList.remove('dragging');
+    if (!d.moved) return;
+    const eat = (ev) => { ev.stopPropagation(); ev.preventDefault(); };
+    document.addEventListener('click', eat, { capture: true, once: true });
+    setTimeout(() => document.removeEventListener('click', eat, { capture: true }), 0); // a release off the strip has no click to eat
+  };
+  document.addEventListener('pointerup', end);
+  document.addEventListener('pointercancel', () => { if (drag) drag.el.classList.remove('dragging'); drag = null; });
+})();
+
 window.addEventListener('load', () => {
   if (!pendingMigratedName()) return;
   const started = Date.now();