Search: found words stay highlighted as results come in, and a query that is over leaves the next one alone

More review of the smooth search results (1d435c2) found what it left behind:

- Rows put into the shown list from the one built aside, or into the look-alike a held tab shows, lost the
  highlight of the query's words: a live range collapses when an ancestor of what it spans is moved, and
  the row's own observer sees nothing of that. Whoever moves highlighted rows now has their text found
  again (`reapplyTextHighlights` in textHighlight).
- A load of a query that is over could still reach the next one's: create its group of found media under
  a dead middleware (its messages then never showed), make a row with its words, or mark Apps loaded.
  Every such step checks the query is still the current one after it has waited.
- Opening another tab with nothing in it while a new query was held let go of what the held tab showed,
  tearing down its rows: only the new query's own reveal lets the queries before it go.
- Apps and Channels without a query put their two groups in together, and a failed request of one
  (popular apps, similar channels) kept both out. The one that failed stays out now, the other comes in,
  and a row's picture that did not load no longer keeps the row out.

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

Author: morethanwords

src/components/appSearchSuper.ts

@@ -7,6 +7,8 @@ import {commitSearchGroups, createSearchGroup, destroySearchRows, getSearchTrans
 import {horizontalMenu} from '@components/horizontalMenu';
 import LazyLoadQueue from '@components/lazyLoadQueue';
 import {putPreloader} from '@components/putPreloader';
+import noop from '@helpers/noop';
+import {reapplyTextHighlights} from '@helpers/dom/textHighlight';
 import Scrollable from '@components/scrollable';
 import {ScrollableContextValue} from '@components/scrollable2';
 import useHeavyAnimationCheck, {getHeavyAnimationPromise} from '@hooks/useHeavyAnimationCheck';
@@ -1341,16 +1343,19 @@ export default class AppSearchSuper {
     return filterMessagesByInputFilter({inputFilter: type, messages: messages, limit: messages.length});
   }
 
-  private async processEmptyFilter({message, mediaTab}: ProcessSearchSuperResult) {
+  private async processEmptyFilter({message, mediaTab, middleware}: ProcessSearchSuperResult) {
     const isSaved = mediaTab.type === 'saved';
+    const query = this.searchContext.query;
 
     let peerId = message.peerId;
     if(isSaved) {
       peerId = message.fromId;
     }
     peerId = await this.managers.appPeersManager.getPeerMigratedTo(peerId) || peerId;
-
-    const middleware = this.middleware.get();
+    // * the query that asked is over: no row for it, under the next one's middleware or words
+    if(!middleware()) {
+      return;
+    }
 
     const loadPromises: Promise<any>[] = [];
     // * put in whole, with the others of its page (`performSearchResult`)
@@ -1375,7 +1380,7 @@ export default class AppSearchSuper {
       } as any,
       lastMessage: message,
       dialogElement,
-      highlightWord: this.searchContext.query,
+      highlightWord: query,
       noForwardIcon: isSaved
     });
 
@@ -1616,6 +1621,10 @@ export default class AppSearchSuper {
     let inputFilter = mediaTab.inputFilter;
 
     await getHeavyAnimationPromise();
+    // * the query that asked is over: the search's context and its group of found media are the next one's
+    if(!middleware()) {
+      return 0;
+    }
 
     let searchGroup: SearchGroup;
     if(inputFilter === 'inputMessagesFilterPhotoVideo' && !!this.searchContext.query.trim()) {
@@ -2610,7 +2619,8 @@ export default class AppSearchSuper {
         dom.lastMessageSpan.append(i18n('UnknownBotUsers'));
       }
 
-      await Promise.all(loadPromises);
+      // * a picture that did not come does not keep its row out
+      await Promise.all(loadPromises).catch(noop);
       return dom.containerEl;
     }));
 
@@ -2627,6 +2637,23 @@ export default class AppSearchSuper {
     }
   }
 
+  /**
+   * Puts a tab's groups in together once their rows are there: one whose rows could not be had (a request of its
+   * failed) stays out, and the others go in all the same. False when the query is over by then
+   */
+  private async appendRenderedGroups(mediaTab: SearchSuperMediaTab, middleware: Middleware, rendering: [SearchGroup, Promise<any>][]) {
+    const isRendered = await Promise.all(rendering.map(([, promise]) => promise.then(() => true, (err) => {
+      this.log.error('search group error:', err);
+      return false;
+    })));
+    if(!middleware()) {
+      return false;
+    }
+
+    mediaTab.itemsTab.append(...rendering.filter((_, idx) => isRendered[idx]).map(([group]) => group.container));
+    return true;
+  }
+
   private async loadChannels({mediaTab, middleware}: SearchSuperLoadTypeOptions) {
     const managers = bindManagersToSession(this.managers);
     if(this.searchContext.query) {
@@ -2659,34 +2686,33 @@ export default class AppSearchSuper {
     const channelDialogs = channelDialogsWithUndefined.filter(Boolean);
 
     // * the groups go in together, once they have their rows - not the joined channels before the similar ones
-    const groups: SearchGroup[] = [];
-    const promises: Promise<any>[] = [];
+    const rendering: [SearchGroup, Promise<any>][] = [];
     if(channelDialogs.length) {
       const group = createSearchGroup({name: 'Chat.Search.JoinedChannels', type: 'channels', middleware});
       group.setActive();
-      groups.push(group);
 
       const SHOW_MORE_LIMIT = 5;
       if(channelDialogs.length > SHOW_MORE_LIMIT) group.needShowMoreButton();
 
-      promises.push(this.renderPeerDialogs(channelDialogs.map((dialog) => dialog.peerId), group, middleware));
+      rendering.push([group, this.renderPeerDialogs(channelDialogs.map((dialog) => dialog.peerId), group, middleware)]);
     }
 
-    const recommendations = await managers.appChatsManager.getChannelRecommendations();
+    // * on top of the joined ones: failing, it leaves them be
+    const recommendations = await managers.appChatsManager.getChannelRecommendations().catch((err): undefined => {
+      this.log.error('channel recommendations error:', err);
+      return undefined;
+    });
     if(!middleware()) return;
 
-    if(recommendations.chats.length) {
+    if(recommendations?.chats.length) {
       const group = createSearchGroup({name: 'SimilarChannels', type: 'channels', middleware});
       group.setActive();
-      groups.push(group);
 
-      promises.push(this.renderPeerDialogs(recommendations.chats.map((chat) => chat.id.toPeerId(true)), group, middleware));
+      rendering.push([group, this.renderPeerDialogs(recommendations.chats.map((chat) => chat.id.toPeerId(true)), group, middleware)]);
     }
 
-    await Promise.all(promises);
-    if(!middleware()) return;
+    if(!await this.appendRenderedGroups(mediaTab, middleware, rendering)) return;
 
-    mediaTab.itemsTab.append(...groups.map((group) => group.container));
     this.afterPerforming(1, mediaTab);
     this.loaded[mediaTab.type] = true;
   }
@@ -2741,22 +2767,19 @@ export default class AppSearchSuper {
     if(!middleware()) return;
 
     // * the groups go in together, once they have their rows - not the first one before the popular apps
-    const groups: SearchGroup[] = [];
-    let topAppsPromise: Promise<void>;
+    const rendering: [SearchGroup, Promise<any>][] = [];
     if(myTopApps.length) {
       const group = createSearchGroup({name: 'MiniApps.Apps', type: 'apps', onFound: onClick, middleware});
       group.setActive();
-      groups.push(group);
 
       const SHOW_MORE_LIMIT = 5;
       if(myTopApps.length > SHOW_MORE_LIMIT) group.needShowMoreButton();
 
-      topAppsPromise = this.renderPeerDialogs(myTopApps.map((app) => app.id.toPeerId(false)), group, middleware, 'bots');
+      rendering.push([group, this.renderPeerDialogs(myTopApps.map((app) => app.id.toPeerId(false)), group, middleware, 'bots')]);
     }
 
     const group = createSearchGroup({name: 'MiniApps.Popular', type: 'apps', onFound: onClick, middleware});
     group.setActive();
-    groups.push(group);
 
     type GetPopularAppsResult = ReturnType<typeof rootScope.managers.appAttachMenuBotsManager.getPopularAppBots>;
     let currentOffset: string = '', loadPromise: GetPopularAppsResult;
@@ -2773,6 +2796,8 @@ export default class AppSearchSuper {
       const {nextOffset, userIds} = await loadPromise;
 
       await this.renderPeerDialogs(userIds.map((id) => id.toPeerId(false)), group, middleware, 'bots');
+      // * a query that is over marks nothing loaded: `loaded` is the next one's by now
+      if(!middleware()) return;
 
       currentOffset = nextOffset || undefined;
       loadPromise = undefined;
@@ -2790,10 +2815,9 @@ export default class AppSearchSuper {
       }
     });
 
-    await Promise.all([topAppsPromise, loadMoreApps()]);
-    if(!middleware()) return;
+    rendering.push([group, loadMoreApps()]);
+    if(!await this.appendRenderedGroups(mediaTab, middleware, rendering)) return;
 
-    mediaTab.itemsTab.append(...groups.map((group) => group.container));
     this.afterPerforming(1, mediaTab);
   }
 
@@ -3364,6 +3388,8 @@ export default class AppSearchSuper {
     ghost.inert = true;
     ghost.append(...content);
     tabContainer.append(ghost);
+    // * the rows were moved into it: their highlights of the query are found again
+    reapplyTextHighlights(ghost);
     return ghost;
   }
 
@@ -3398,7 +3424,8 @@ export default class AppSearchSuper {
       const wait = isNewQuery ? SEARCH_RESULTS_WAIT : SEARCH_RESULTS_WAIT + SEARCH_RESULTS_WAIT_LATE;
       Promise.race([settle(promise), pause(wait)]).then(() => {
         if(middleware()) {
-          this.revealTab(mediaTab, {resetScroll: isNewQuery, isLast: true});
+          // * only a new query's reveal lets the queries before it go: a tab opened empty held none of theirs
+          this.revealTab(mediaTab, {resetScroll: isNewQuery, isLast: isNewQuery});
         }
       });
       return;
@@ -3427,7 +3454,7 @@ export default class AppSearchSuper {
         groups: revealed.length === parts.length ? undefined : flatten(revealed.map((part) => part.groups)),
         resetScroll,
         merge,
-        isLast: !merge && parts.every((part) => part.isShown)
+        isLast: isNewQuery && !merge && parts.every((part) => part.isShown)
       });
       resetScroll = false;
     };

src/components/searchGroup.tsx

@@ -9,6 +9,7 @@ import {hotReloadGuard} from '@lib/solidjs/hotReloadGuardProvider';
 import {CROSS_FADE_KEYFRAMES, getAnimatedOptions} from '@helpers/dom/crossfadeContent';
 import liteMode from '@helpers/liteMode';
 import deferredPromise from '@helpers/cancellablePromise';
+import {reapplyTextHighlights} from '@helpers/dom/textHighlight';
 
 export type SearchGroupType = 'contacts' | 'globalContacts' | 'messages' | string;
 
@@ -231,6 +232,9 @@ export function createSearchGroup(options: {
       } else {
         list.append(...newRows);
       }
+
+      // * moved from the draft, as the rows leaving are into their list: their highlights are found again
+      reapplyTextHighlights(container);
     };
 
     const applyRest = () => {

src/helpers/dom/textHighlight.ts

@@ -526,6 +526,19 @@ hotEffect(import.meta.hot, () => {
 // * every live highlight, so the ones whose container silently left the document (a cleared
 // * search list, an ejected bubble) can be released without a hook at each call site
 const instances = new Set<TextHighlighter>();
+
+/**
+ * Finds the text of every highlight inside `root` again. Its ranges collapse when an ancestor of its container
+ * is moved to another parent (rows put in from a list built aside, held in a look-alike of what they were in),
+ * and the container's own observer sees nothing of that: whoever moves highlighted rows calls this after
+ */
+export function reapplyTextHighlights(root: Node) {
+  for(const instance of instances) {
+    if(root.contains(instance.container)) {
+      instance.apply();
+    }
+  }
+}
 const SWEEP_INTERVAL = 30e3;
 // * a container may be detached only briefly (virtual lists reattach rows) — give it time
 const DETACHED_GRACE = 10e3;
@@ -641,7 +654,7 @@ class TextHighlighter implements TextHighlight {
     this.found = false;
   }
 
-  private apply() {
+  public apply() {
     if(this.disposed) {
       return;
     }

src/tests/textHighlight.test.ts

@@ -26,7 +26,8 @@ import createHighlight, {
   computeRanges,
   extractText,
   findQuoteSpan,
-  findSearchSpans
+  findSearchSpans,
+  reapplyTextHighlights
 } from '@helpers/dom/textHighlight';
 
 const highlights = new Set<TextHighlight>();
@@ -395,6 +396,26 @@ describe('highlightText', () => {
     highlight.dispose();
   });
 
+  it('finds its text again once a row moved to another list is reapplied', () => {
+    // * a row highlighted in a list built aside (a search group's draft), then put in the shown one
+    const draft = document.createElement('div');
+    const row = document.createElement('div');
+    row.innerHTML = '<span>moved text</span>';
+    draft.append(row);
+    const highlight = highlightText({container: row, match: {type: 'search', query: 'moved'}});
+    const texts = () => registered('tg-search').map((range) => range.toString());
+    expect(texts()).toEqual(['moved']);
+
+    // * the move collapses the live range, and the row's own observer sees nothing of it
+    const list = html('');
+    list.append(row);
+    expect(texts()).toEqual(['']);
+
+    reapplyTextHighlights(list);
+    expect(texts()).toEqual(['moved']);
+    highlight.dispose();
+  });
+
   it('collects a highlight whose container has left the document', async() => {
     const element = html('gone soon');
     highlightText({container: element, match: {type: 'search', query: 'gone'}});