Compact and rank pinned mobile work

tests/e2e/test_mobile_pinned_work_release.py

@@ -30,10 +30,6 @@ def test_operator_pins_and_reopens_frequent_work_without_phone_overflow(viewport
             getItem:key => values.get(key) || null,
             setItem:(key, value) => values.set(key, value),
           };
-          const item = {
-            kind:'issue', repository:'stackchain/stackchain-dashboard', number:1477,
-            title:'Pin frequent work across signed-in mobile devices',
-          };
           window.opened = [];
           window.recentWork = createMobileRecentWork({
             storage, getLogin:() => 'timmy', document,
@@ -41,32 +37,48 @@ def test_operator_pins_and_reopens_frequent_work_without_phone_overflow(viewport
             list:document.querySelector('#mobile-recent-work-list'),
             pinnedSection:document.querySelector('#mobile-pinned-work'),
             pinnedList:document.querySelector('#mobile-pinned-work-list'),
+            pinnedToggle:document.querySelector('#mobile-pinned-work-toggle'),
             status:document.querySelector('#mobile-recent-work-status'),
             openRoute:route => window.opened.push(route),
           });
-          window.recentWork.record(item);
-          window.recentWork.pin(item);
+          for (let number=1; number<=20; number += 1) {
+            const item = {
+              kind:'issue', repository:'stackchain/stackchain-dashboard', number,
+              title:'Pinned mobile work ' + number,
+            };
+            window.recentWork.record(item);
+            window.recentWork.pin(item);
+          }
           document.querySelector('#mobile-queue-sheet').showModal();
         }""")
 
         expect(page.locator("#mobile-pinned-work")).to_be_visible()
-        expect(page.locator("#mobile-recent-work")).to_be_visible()
+        expect(page.locator("#mobile-recent-work")).to_be_hidden()
+        expect(page.locator("#mobile-pinned-work-list .mobile-recent-work-row")).to_have_count(3)
         expect(page.locator("#mobile-recent-work-status")).to_have_text("Sync pending.")
+        toggle = page.locator("#mobile-pinned-work-toggle")
         open_button = page.get_by_role(
-            "button", name="Open Pin frequent work across signed-in mobile devices, issue stackchain/stackchain-dashboard #1477"
+            "button", name="Open Pinned mobile work 20, issue stackchain/stackchain-dashboard #20"
         ).first
         pin_button = page.get_by_role(
-            "button", name="Unpin Pin frequent work across signed-in mobile devices"
+            "button", name="Unpin Pinned mobile work 20"
         )
-        for control in (open_button, pin_button):
+        for control in (open_button, pin_button, toggle):
             bounds = control.bounding_box()
             assert bounds and bounds["height"] >= 44
             assert bounds["x"] >= 0 and bounds["x"] + bounds["width"] <= viewport["width"]
         assert page.evaluate("document.documentElement.scrollWidth <= window.innerWidth")
 
+        toggle.click()
+        expect(page.locator("#mobile-pinned-work-list .mobile-recent-work-row")).to_have_count(20)
+        expect(toggle).to_have_text("Show fewer")
+        assert toggle.get_attribute("aria-expanded") == "true"
+        toggle.click()
+        expect(page.locator("#mobile-pinned-work-list .mobile-recent-work-row")).to_have_count(3)
+
         open_button.focus()
         open_button.press("Enter")
         assert page.evaluate("window.opened") == [
-            "#/my-work/issue/stackchain/stackchain-dashboard/1477"
+            "#/my-work/issue/stackchain/stackchain-dashboard/20"
         ]
         browser.close()