feat(hub): Videos and Music list their cards a page at a time

Previous/next arrows in the pinned toolbar, on group pages and in Search.
Page size is an account preference (Settings → Defaults), 50 by default,
10 to 200 in steps of 10.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

1 files changed, 9 insertions, 3 deletions

diff --git a/packages/meshbay-hub/tests/harness/sticky_header_probe.py b/packages/meshbay-hub/tests/harness/sticky_header_probe.py
index 320a2d4..ee1e61b 100755
--- a/packages/meshbay-hub/tests/harness/sticky_header_probe.py
+++ b/packages/meshbay-hub/tests/harness/sticky_header_probe.py
@@ -185,7 +185,11 @@ for (let i = 0; i < 40; i++)
   add({ name: `${ARTISTS[i % ARTISTS.length]} au Zenith (2019) 1080p.mkv`,
         path: 'films', type: 'video',
         display_title: `${ARTISTS[i % ARTISTS.length]} au Zenith` });
-for (let a = 0; a < 20; a++)
+// Forty films and forty albums against a page of thirty, so Videos and Music
+// draw their page arrows in the toolbar being measured (pager.js) — a band
+// that only ever gets them past fifty would never be measured with them.
+const PAGE_SIZE = '30';
+for (let a = 0; a < 40; a++)
   for (let t = 0; t < 2; t++)
     add({ name: `${t + 1} track.flac`,
           path: `musique/${ARTISTS[a % ARTISTS.length]} ${a}/disque ${t}`,
@@ -319,7 +323,7 @@ const settle = () => new Promise((r) =>
       render(html`<${GroupPage} groupId="g1" token="t" username="me" userId="u1"
         group=${{ id: 'g1', name: 'un groupe', owner_username: 'me',
                   is_admin: false }}
-        userPrefs=${{ default_tab: 'files' }} />`,
+        userPrefs=${{ default_tab: 'files', media_page_size: PAGE_SIZE }} />`,
         document.getElementById('root'));
     } else {
       render(html`<${SearchPage} token="t" username="me" userId="u1"
@@ -329,7 +333,7 @@ const settle = () => new Promise((r) =>
               not. */''}
         groups=${[{ id: 'g1', name: 'musique_de_la_maison_2024',
                     owner_username: 'cbesson' }]}
-        userPrefs=${{}} />`, document.getElementById('root'));
+        userPrefs=${{ media_page_size: PAGE_SIZE }} />`, document.getElementById('root'));
       // Results only exist once an index has arrived; the view toggle is drawn
       // with them.
       const field = await waitFor('.search-bar input');
@@ -377,6 +381,8 @@ const settle = () => new Promise((r) =>
       bottomScrollY: Math.round(scrollY),
       scrollY: scrolledBy, room: Math.round(room),
       overflowX: overflowX(),
+      // Whether the toolbar carried its page arrows while it was measured.
+      pager: !!document.querySelector('.video-toolbar > .tb-pager'),
       // Whether the Search page's group column is on screen. It is dropped at
       // phone widths, where the file name needs every pixel it can get.
       groupColumn: (() => {