MWPW-191570: Studio pagination, search refill, and translation dialog UX

.gitignore

@@ -47,6 +47,9 @@ masStudio-*.json
 .cursor
 .superpowers/
 
+# Worktree documentation (per-ticket, not committed)
+docs/
+
 # web-components specific
 !web-components/dist
 web-components/commerce.json

nala/studio/translations/translations.page.js

@@ -47,11 +47,8 @@ export default class TranslationsPage {
     }
 
     async waitForListToLoad(timeout = 15000) {
-        await this.loadingIndicator.waitFor({ state: 'hidden', timeout }).catch(() => {});
-        await Promise.race([
-            this.translationTable.waitFor({ state: 'visible', timeout }),
-            this.emptyState.waitFor({ state: 'visible', timeout }),
-        ]);
+        const dataRow = this.translationTable.locator('sp-table-row:not(.skeleton-row)').first();
+        await dataRow.or(this.emptyState).waitFor({ state: 'visible', timeout });
     }
 
     async getSentOnColumnTexts() {

nala/utils/nala.run.js

@@ -1,6 +1,29 @@
 #!/usr/bin/env node
 
 import { spawn, spawnSync } from 'child_process';
+import { readFileSync, existsSync } from 'fs';
+import { dirname, basename, join } from 'path';
+
+function detectWorktreePort() {
+    // Walk up from cwd looking for a parent dir named "worktrees"; if the cwd is
+    // <…>/worktrees/<BRANCH>/…, read <…>/worktrees/.ports for BRANCH=<offset>.
+    let dir = process.cwd();
+    while (dir !== dirname(dir)) {
+        const parent = dirname(dir);
+        if (basename(parent) === 'worktrees') {
+            const branch = basename(dir);
+            const portsFile = join(parent, '.ports');
+            if (!existsSync(portsFile)) return null;
+            const line = readFileSync(portsFile, 'utf-8')
+                .split('\n')
+                .find((l) => l.startsWith(`${branch}=`));
+            const offset = line ? parseInt(line.split('=')[1], 10) : NaN;
+            return Number.isFinite(offset) ? 3000 + offset : null;
+        }
+        dir = parent;
+    }
+    return null;
+}
 
 function displayHelp() {
     console.log(`
@@ -99,7 +122,12 @@ function getLocalTestLiveUrl(env, masiourl, milolibs, repo = 'mas', owner = 'ado
         process.env.MILO_LIBS = `?milolibs=${milolibs}`;
     }
 
-    if (env === 'local') return 'http://localhost:3000';
+    if (env === 'local') {
+        // When run from a worktree checkout, auto-target that worktree's AEM port
+        // so `npm run nala local` works without needing to set LOCAL_TEST_LIVE_URL.
+        const worktreePort = detectWorktreePort();
+        return `http://localhost:${worktreePort ?? 3000}`;
+    }
     if (env === 'libs') return 'http://localhost:6456';
     return `https://${env}--${repo}--${owner}.aem.live`;
 }

studio/src/common/skeleton-styles.css.js

@@ -0,0 +1,34 @@
+import { css } from 'lit';
+
+export const skeletonStyles = css`
+    .skeleton-element {
+        background: linear-gradient(
+            90deg,
+            var(--spectrum-gray-200) 25%,
+            var(--spectrum-gray-100) 50%,
+            var(--spectrum-gray-200) 75%
+        );
+        background-size: 200% 100%;
+        animation: shimmer 1.5s infinite;
+        border-radius: 4px;
+    }
+
+    .skeleton-table-cell {
+        height: 18px;
+        width: 80%;
+        border-radius: 4px;
+    }
+
+    .skeleton-row sp-table-cell {
+        padding: 16px 20px;
+    }
+
+    @keyframes shimmer {
+        0% {
+            background-position: 200% 0;
+        }
+        100% {
+            background-position: -200% 0;
+        }
+    }
+`;

studio/src/mas-content.js

@@ -293,7 +293,7 @@ class MasContent extends LitElement {
             this.observedSentinel = null;
         } else if (loadingJustCompleted && this.hasMore.value) {
             this.scrollObserver?.unobserve(sentinel);
-            this.scrollObserver?.observe(sentinel);
+            requestAnimationFrame(() => this.scrollObserver?.observe(sentinel));
         }
     }
 

studio/src/mas-repository.js

@@ -35,6 +35,7 @@ import {
 } from './constants.js';
 import { fragmentHasPersonalizationTag, isPznCountryTagId, PZN_TAG_ID_PREFIX } from './common/utils/personalization-utils.js';
 import { Placeholder } from './aem/placeholder.js';
+import { getFragmentName } from './translation/translation-utils.js';
 import generateFragmentStore from './reactivity/source-fragment-store.js';
 import { getDefaultLocaleCode } from '../../io/www/src/fragment/locales.js';
 import { getDictionary } from '../libs/fragment-client.js';
@@ -102,6 +103,7 @@ export class MasRepository extends LitElement {
             placeholders: null,
             promotions: null,
             translations: null,
+            collections: null,
         };
         this.dictionaryCache = new Map();
         this.inflightDictionaryRequest = null;
@@ -359,6 +361,7 @@ export class MasRepository extends LitElement {
             localSearch.status = STATUS_PUBLISHED;
         }
 
+        let refilling = false;
         try {
             if (this.#abortControllers.search) this.#abortControllers.search.abort();
             this.#searchCursor = null;
@@ -460,6 +463,10 @@ export class MasRepository extends LitElement {
                     this.#eagerLoadAllPznPages(cursorState, searchController);
                 } else {
                     this.#abortControllers.search = null;
+                    if (cursorState) {
+                        refilling = true;
+                        this.#refillBelowThreshold(cursorState, searchController);
+                    }
                 }
             }
 
@@ -477,10 +484,35 @@ export class MasRepository extends LitElement {
             return;
         }
 
-        Store.fragments.list.loading.set(false);
+        if (!refilling) Store.fragments.list.loading.set(false);
     }
 
     static MIN_PAGE_SIZE = 10;
+    /**
+     * Soft cap on the eager personalization-page loop in #eagerLoadAllPznPages.
+     * Once the cap is hit, hasMore is set to true and the rest is delivered on
+     * demand by loadNextPage() (one page per scroll-trigger). Pagination is not
+     * lost — it simply stops being eager-prefetched after this many pages.
+     */
+    static MAX_EAGER_PZN_PAGES = 20;
+    /**
+     * Visible-row threshold for the post-filter refill loop in #refillBelowThreshold.
+     * When a cursor page, after #filterStoresByPersonalizationEnabled has been
+     * applied, has fewer than this many visible items AND the cursor is not
+     * exhausted, the loop fetches additional cursor pages until the threshold is
+     * met or the cursor runs out. Prevents the narrow-filter UX where a user sees
+     * "1 result" when the underlying catalog has many more matches spread across
+     * later cursor pages.
+     */
+    static MIN_FILTERED_PAGE_RESULTS = 25;
+    /**
+     * Soft cap on the number of #fillPage rounds the refill loop will run before
+     * giving up. Mirrors MAX_EAGER_PZN_PAGES to keep the non-personalization
+     * refill path bounded when a filter matches very little in the catalog.
+     * When the cap is hit, hasMore stays true so loadNextPage can continue
+     * fetching on scroll.
+     */
+    static MAX_REFILL_ROUNDS = 20;
 
     async #fillPage(cursor, variants, surface, fragmentStores, limit = MasRepository.MIN_PAGE_SIZE, signal) {
         let added = 0;
@@ -501,8 +533,50 @@ export class MasRepository extends LitElement {
 
     async #eagerLoadAllPznPages(cursorSnapshot, searchController) {
         const { cursor, variants, surface, fragmentStores } = cursorSnapshot;
+        let pagesLoaded = 0;
+        try {
+            while (this.#searchCursor === cursorSnapshot) {
+                if (pagesLoaded >= MasRepository.MAX_EAGER_PZN_PAGES) {
+                    Store.fragments.list.hasMore.set(true);
+                    break;
+                }
+                const done = await this.#fillPage(
+                    cursor,
+                    variants,
+                    surface,
+                    fragmentStores,
+                    undefined,
+                    searchController.signal,
+                );
+                pagesLoaded++;
+                if (this.#searchCursor !== cursorSnapshot) return;
+                Store.fragments.list.data.set([...this.#filterStoresByPersonalizationEnabled(fragmentStores)]);
+                if (done) {
+                    this.#searchCursor = null;
+                    return;
+                }
+            }
+        } catch (error) {
+            if (error.name === 'AbortError') return;
+            if (this.#searchCursor === cursorSnapshot) {
+                Store.fragments.list.hasMore.set(true);
+            }
+        }
+    }
+
+    async #refillBelowThreshold(cursorSnapshot, searchController) {
+        const { cursor, variants, surface, fragmentStores } = cursorSnapshot;
+        let rounds = 0;
+        Store.fragments.list.loading.set(true);
         try {
             while (this.#searchCursor === cursorSnapshot) {
+                const filtered = this.#filterStoresByPersonalizationEnabled(fragmentStores);
+                if (filtered.length >= MasRepository.MIN_FILTERED_PAGE_RESULTS) return;
+                if (rounds >= MasRepository.MAX_REFILL_ROUNDS) {
+                    Store.fragments.list.hasMore.set(true);
+                    return;
+                }
+                const beforeCount = fragmentStores.length;
                 const done = await this.#fillPage(
                     cursor,
                     variants,
@@ -511,10 +585,16 @@ export class MasRepository extends LitElement {
                     undefined,
                     searchController.signal,
                 );
+                rounds++;
                 if (this.#searchCursor !== cursorSnapshot) return;
+                if (fragmentStores.length === beforeCount && !done) {
+                    Store.fragments.list.hasMore.set(true);
+                    return;
+                }
                 Store.fragments.list.data.set([...this.#filterStoresByPersonalizationEnabled(fragmentStores)]);
                 if (done) {
                     this.#searchCursor = null;
+                    Store.fragments.list.hasMore.set(false);
                     return;
                 }
             }
@@ -523,6 +603,10 @@ export class MasRepository extends LitElement {
             if (this.#searchCursor === cursorSnapshot) {
                 Store.fragments.list.hasMore.set(true);
             }
+        } finally {
+            if (this.#searchCursor === cursorSnapshot || this.#searchCursor === null) {
+                Store.fragments.list.loading.set(false);
+            }
         }
     }
 
@@ -644,6 +728,38 @@ export class MasRepository extends LitElement {
         }
     }
 
+    async loadAllCollections() {
+        if (!this.search.value.path) return;
+        try {
+            if (this.#abortControllers.collections) this.#abortControllers.collections.abort();
+            this.#abortControllers.collections = new AbortController();
+
+            const damPath = getDamPath(this.search.value.path);
+            const locale = this.filters.value.locale;
+            const searchOptions = {
+                path: `${damPath}/${locale}`,
+                modelIds: [TAG_MODEL_ID_MAPPING['mas:studio/content-type/merch-card-collection']],
+                sort: [{ on: 'modifiedOrCreated', order: 'DESC' }],
+            };
+
+            const fragments = await this.searchFragmentList(searchOptions, 50, this.#abortControllers.collections);
+            const collections = [];
+            const collectionsByPath = new Map();
+            for (const fragment of fragments) {
+                const collection = { ...fragment, studioPath: getFragmentName(fragment) };
+                collections.push(collection);
+                collectionsByPath.set(fragment.path, collection);
+            }
+
+            Store.translationProjects.allCollections.set(collections);
+            Store.translationProjects.displayCollections.set(collections);
+            Store.translationProjects.collectionsByPaths.set(collectionsByPath);
+        } catch (error) {
+            if (error.name === 'AbortError') return;
+            this.processError(error, 'Could not load collections.');
+        }
+    }
+
     async loadPreviewPlaceholders() {
         if (!this.search.value.path) return;