Media pager: up and down go from post to post, left and right along a post's pictures. Adam: swipes and arrows up/down should go to the next post's media, left/right to the next within a post. The pager is now posts stacked top to bottom, each a row of its pictures or clips side by side — a quoted post's join the post that quotes it — with dots along the top when a post has more than one, saying how many and which. Up and down (swipe, arrows, j/k, Page) move a post at a time and land on a post where its row was left; left and right (swipe, arrows, h/l) move within the post and stop at its ends. A post's pictures all load as it comes near (those along its row too); a clip's head start goes to the next post's (where its row rests), the next along this one, and the post after next, at half; the look-ahead (the feed paging on, the media crawl) counts posts. Pictures pan sideways as well as up and down at 1×. Tests find the slide on screen by where it sits (the pager's children are posts now); feed-picture-pager walks right within a post, down past one with none, back up to where a post was left, left to its first, and a sideways swipe next to a swipe up; quote-pager walks the quoting post's row (its own picture, then the quote's).

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01KPw21NEpWeTGu6swVASmBt

1 files changed, 14 insertions, 11 deletions

diff --git a/tools/quote-pager-test.js b/tools/quote-pager-test.js
index 2a0e33b..5d9e536 100644
--- a/tools/quote-pager-test.js
+++ b/tools/quote-pager-test.js
@@ -1,8 +1,8 @@
 // Pictures in a quoted post are in the pager too. A post quoting another
 // draws the quoted one inside it; a tap on a picture there opened it alone
 // (the pager's list held only the feed posts' own pictures), with nothing to
-// swipe to. Now the pager has, after each post's own pictures, those of the
-// posts it quotes: swipes walk through them and on to the next post's, the
+// swipe to. Now a post's row in the pager has, after its own pictures, those
+// of the posts it quotes: left and right walk them, down goes on to the next post's, the
 // quoted picture's details name its author, and closing lands on the post
 // that quoted it.
 // Run: bun tools/quote-pager-test.js
@@ -69,7 +69,7 @@ page.on('pageerror', (e) => errs.push(String(e)));
 const click = (t) => page.evaluate((x) => { const e = [...document.querySelectorAll('button')].find((n) => n.textContent.trim().toLowerCase().includes(x)); if (e) { e.click(); return true; } return false; }, t);
 const waitText = async (x, ms = 25000) => { for (let i = 0; i < ms / 250; i++) { if ((await page.evaluate(() => document.body.innerText)).toLowerCase().includes(x)) return true; await sleep(250); } return false; };
 const waitFor = async (fn, arg, ms = 10000) => { for (let i = 0; i < ms / 100; i++) { if (await page.evaluate(fn, arg)) return true; await sleep(100); } return false; };
-const AT = () => { const sc = document.querySelector('.mp-scroll'); if (!sc) return null; const s = [...sc.querySelectorAll(':scope > .mp-slide')].find((x) => Math.abs(x.offsetTop - sc.scrollTop) < 4); return s ? s.getAttribute('data-k').split('/').pop().replace('.png', '') : 'between'; };
+const AT = () => { const sc = document.querySelector('.mp-scroll'); if (!sc) return null; const s = [...sc.querySelectorAll('.mp-slide')].find((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.top) < 4 && Math.abs(r.left) < 4; }); return s ? s.getAttribute('data-k').split('/').pop().replace('.png', '') : 'between'; };
 const at = () => page.evaluate(AT);
 const resting = (n) => waitFor(([f, x]) => eval(f)() === x, ['(' + AT + ')', n], 4000);
 
@@ -102,19 +102,22 @@ try {
   await page.mouse.click(pos2.x, pos2.y);
   check('it opens in the pager (not alone)', await waitFor(() => !!document.querySelector('.media-pager'), null, 4000) && !(await page.evaluate(() => !!document.querySelector('.lightbox'))));
   check('…on the quoted picture', await resting('q1'), await at());
-  await page.keyboard.press('ArrowDown');
-  check('down: the quoted post\'s second picture', await resting('q2'), await at());
+  // the quote's pictures are in its post's row: its own first, then the quote's
+  check('…in the post\'s row, three along', await page.evaluate(() => document.querySelector('.mp-group .mp-dots').children.length === 3));
+  await page.keyboard.press('ArrowRight');
+  check('right: the quoted post\'s second picture', await resting('q2'), await at());
   await page.keyboard.press('ArrowDown');
   check('down: on to the next post\'s', await resting('b'), await at());
-  await page.keyboard.press('ArrowUp'); await resting('q2');
-  await page.keyboard.press('ArrowUp'); await resting('q1');
   await page.keyboard.press('ArrowUp');
-  check('up past the quote: the quoting post\'s own picture, before it', await resting('a'), await at());
-  await page.keyboard.press('ArrowDown'); await resting('q1');
-  await page.keyboard.press('ArrowDown'); await resting('q2');
+  check('up: back to the quoting post, where it was left', await resting('q2'), await at());
+  await page.keyboard.press('ArrowLeft'); await resting('q1');
+  await page.keyboard.press('ArrowLeft');
+  check('left past the quote: the quoting post\'s own picture, before it', await resting('a'), await at());
+  await page.keyboard.press('ArrowRight'); await resting('q1');
+  await page.keyboard.press('ArrowRight'); await resting('q2');
   // details: a tap (moved on from the start, so the first tap shows them)
   await page.mouse.click(195, 300); await sleep(400);
-  check('the quoted picture\'s details name its author', await page.evaluate(() => { const sc = document.querySelector('.mp-scroll'); const s = [...sc.querySelectorAll(':scope > .mp-slide')].find((x) => Math.abs(x.offsetTop - sc.scrollTop) < 4); return /Store Maker/.test(s.textContent) && /two screenshots/.test(s.textContent); }));
+  check('the quoted picture\'s details name its author', await page.evaluate(() => { const sc = document.querySelector('.mp-scroll'); const s = [...sc.querySelectorAll('.mp-slide')].find((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.top) < 4 && Math.abs(r.left) < 4; }); return /Store Maker/.test(s.textContent) && /two screenshots/.test(s.textContent); }));
   await page.keyboard.press('Escape');
   check('closing it', await waitFor(() => !document.querySelector('.media-pager') && !!document.querySelector('.notes-feed'), null, 3000));
   await sleep(1500);