Пишем высокопроизводительный вьюпорт для мессенджера

<div class="container">
    <!-- Панель инструментов -->
    <div class="toolbar">
      <div>
        <!-- Кнопка открывающая док с поставщиками сообщений -->
        <app-menu-button (click)="onOpenMenuHandler()" [opened]="menuOpened()" />
      </div>
      <!-- Заголовок поставщика сообщений -->
      <div class="title">{{title()}}</div>
      <!-- Элемент управления для поиска сообщений по подстроке -->
      <app-search (search)="onSearchHandler($event)" />
    </div>

    <div class="list-container">
      @let doc = dockMode();
      <app-drawer [dock]="doc" [dockLeftSize]="240">
        <!-- Док поставщика сообщений -->
        <dock-left>
          <div class="list-rooms__container">
            <!-- Виртуальный список поставщиков сообщений -->
            <ng-virtual-list class="list rooms" [items]="items" [itemRenderer]="itemRenderer" [trackBy]="'id'"
              [itemSize]="40" [dynamicSize]="true" [bufferSize]="60"
              (onItemClick)="onRoomClickHandler($event)"></ng-virtual-list>
          </div>
        </dock-left>
        <!-- Вьюпорт сообщений -->
        <div class="list-wrapper">
          <!-- Виртуальный список сообщений -->
          <ng-virtual-list #dynamicList class="list" [items]="groupDynamicItems" [itemRenderer]="groupItemRenderer"
            [trackBy]="'id'" [itemSize]="40" [bufferSize]="30" [bufferSize]="120"
            [itemConfigMap]="groupDynamicItemsConfigMap" [dynamicSize]="true" [snap]="true"
            (onScroll)="onScrollHandler($event)" snappingMethod="advanced" methodForSelecting="multi-select"
            (onScrollEnd)="onScrollEndHandler($event)" [enabledBufferOptimization]="false"
            (onItemClick)="onClickHandler($event)"></ng-virtual-list>
        </div>
      </app-drawer>
    </div>
  </div>

<!-- Шаблон сообщения -->
  <ng-template #groupItemRenderer let-data="data" let-measures="measures" let-config="config">
    @if (data) {
      @switch (data.type) {
        <!-- Индикатор формирования сообщения -->
        @case ("write-indicator") {
          <div class="list__windicator-container">
            <!-- Тут располагается пиктограмма для индикатора формирования сообщения -->
          </div>
        }
        <!-- Заголовок группы сообщений -->
        @case ("group-header") {
          <div class="list__group-container" [ngClass]="{'snapped': config.snapped, 'snapped-out': config.snappedOut}">
            <span>{{data.name}}</span>
          </div>
        }
        <!-- Cобщение -->
        @default {
          @let isIn = data.incomType === 'in';
          @let isOut = data.incomType === 'out';
          @let class = {'in': isIn, 'out': isOut, 'edited': data.edited, 'selected': config.selected, focused: config.focus};
          <div class="list__container" [ngClass]="class" [longPress]="1000">
            <div class="message__container" [ngClass]="class">
              <div class="message" [ngClass]="class">
                @if (data.edited) {
                  <!-- Редактированние сообщения с изображением -->
                  @if (data.image) {
                    <div class="complex-message">
                      <img [src]="data.image" />
                      <textarea clickOutside [clickOutsideItem]="data" (keydown)="onKeyDownHandler($event)"
                    (onClickOutside)="onOutsideClickHandler($event, data, config.selected)"
                    [ngStyle]="{height: getContentHeight(measures.height, true) + 'px'}" [value]="data.name"
                    (click)="onTAClickHandler($event)" (onOutsideClose)="onEditingCloseHandler($event)"
                    (change)="onEditedHandler($event, data)"></textarea>
                    </div>
                  } @else {
                    <!-- Редактированние сообщения без изображения -->
                    <textarea clickOutside [clickOutsideItem]="data" (keydown)="onKeyDownHandler($event)"
                    (onClickOutside)="onOutsideClickHandler($event, data, config.selected)"
                    [ngStyle]="{height: getContentHeight(measures.height) + 'px'}" [value]="data.name"
                    (click)="onTAClickHandler($event)" (onOutsideClose)="onEditingCloseHandler($event)"
                    (change)="onEditedHandler($event, data)"></textarea>
                  }
                } @else {
                  <!-- Сообщение с изображением -->
                  @if (data.image) {
                    <div class="complex-message">
                      <img [src]="data.image" />
                      <span searchHighlight substringClass="search-substring" [text]="data.name" [searchedWords]="searchedWords()"
                        (click)="onEditItemHandler($event, data, config.selected)">{{data.name}}</span>
                    </div>
                  } @else {
                    <!-- Сообщение без изображения -->
                    <span searchHighlight substringClass="search-substring" [text]="data.name" [searchedWords]="searchedWords()"
                      (click)="onEditItemHandler($event, data, config.selected)">{{data.name}}</span>
                  }
                }
              </div>
                <!-- При выборе сообщения отображается элемент управления для его удаления -->
                @if (config.selected) {
                  <div class="flex"></div>
                  <div class="message__controls">
                    <div class="ctrl__button del-icon" (click)="onDeleteItemHandler($event, data)">
                      <!-- Иконка для кнопки удаления -->
                    </div>
                  </div>
                }
              </div>
            </div>
          }
        }
      }
  </ng-template>

  <!-- Шаблон элемента списка поставщика сообщений -->
  <ng-template #itemRenderer let-data="data" let-config="config">
    @if (data) {
      @switch (data.type) {
        @case ("group-header") {
          <div class="list__item-container">
            <div class="content">
              <span>{{data.name}}</span>
            </div>
          </div>
        }
        @default {
          <div class="list__item-container">
            <div class="message">
              <span>
                <!-- Тут располагается пиктограмма для поставщика -->
              </span>
              <span>{{data.name}}</span>
            </div>
          </div>
        }
      }
    }
  </ng-template>
</div>

constructor(private _service: ClickOutsideService) {
    const list = this._listContainerRef;

    this.dockMode = computed(() => {
      const menuOpened = this.menuOpened();
      return menuOpened ? DockMode.LEFT : DockMode.NONE;
    });

    const $virtualList = toObservable(list).pipe(
      filter(list => !!list),
      switchMap(list => combineLatest([of(list), list?.$initialized])),
      filter(([, init]) => !!init),
      map(([list]) => list),
    );

    // В момент инициализации и обновления списка сообщений
    // проверяет, если нужно проскроллить до конца списка, то выполняет скролл
    combineLatest([this.$version, $virtualList]).pipe(
      map(([version, list]) => ({ version, list })),
      filter(({ list }) => !!list),
      debounceTime(50),
      tap(({ version, list }) => {
        if (version === 0) {
          list!.scrollToEnd('instant');
        }

        if (this._$isEndOfListPosition.getValue()) {
          list!.scrollToEnd('instant');
        }
      }),
    ).subscribe();

    // Поиск и скролл до искомого сообщения во вьюпорте
    combineLatest([$virtualList, toObservable(this.search)]).pipe(
      map(([list, search]) => ({ list, search })),
      filter(({ list }) => !!list),
      debounceTime(0),
      tap(({ list, search }) => {
        this.searchedWords.set(search.split(' '));
        for (let i = 0, l = this.groupDynamicItems.length; i < l; i++) {
          const item = this.groupDynamicItems[i], name: string = item['name'];
          if (name) {
            const index = name?.indexOf(search);
            if (index > -1) {
              list!.scrollTo(item.id, 'instant');
              break;
            }
          }
        }
      }),
    ).subscribe();

    // При инициализации генерируется первое сообщение
    $virtualList.pipe(
      delay(100),
      mergeMap(() => this.write()),
    ).subscribe();

    // Далее генерация новых сообщений выполняется с интервалом в 2сек
    from(interval(2000)).pipe(
      mergeMap(() => this.write()),
    ).subscribe();

    // Вычисление, является ли позиция скролла конечной
    combineLatest([toObservable(this._scrollParams), $virtualList, this.$version]).pipe(
      delay(10),
      switchMap(([{ viewportEndY, scrollWeight }, list]) => {
        let bounds: ISize | undefined;
        if (list) {
          bounds = list.getItemBounds(this.groupDynamicItems[this.groupDynamicItems.length - 1].id);
        }
        const height = (bounds?.height ?? 0);
        return of((viewportEndY + height + SNAP_HEIGHT) >= scrollWeight);
      }),
      tap(v => {
        this._$isEndOfListPosition.next(v);
      }),
    ).subscribe();

    const appHeightHandler = () => document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
    window.addEventListener('resize', appHeightHandler);

    $virtualList.pipe(
      tap(() => {
        appHeightHandler();
      }),
      delay(100),
      tap(() => {
        document.documentElement.style.setProperty('--viewport-alpha', '1');
      }),
    ).subscribe();
  }

  /**
   * Вычисляет высоту для редактируемого текстового поля
   */
  getContentHeight(v: number, hasImage: boolean = false) {
    return Math.ceil(v) - 34 - (hasImage ? 72 : 0);
  }

  /**
   * Обработчик поиска по подстроке
   */
  onSearchHandler(pattern: string) {
    this.search.set(pattern);
  }

  /**
   * Сброс списка в начальное состояние
   * Вызывается после выбора поставщика сообщений
   */
  private resetList() {
    this.groupDynamicItems = [...GROUP_DYNAMIC_ITEMS];
    this.groupDynamicItemsConfigMap = { ...GROUP_DYNAMIC_ITEMS_STICKY_MAP };
  }

  /** Поток формирования сообщения */
  private write() {
    const msg = generateMessage(this._nextIndex);
    this._nextIndex++;
    return of(msg).pipe(
      tap(() => {
        const writeIndicator = generateWriteIndicator(this._nextIndex);
        this._nextIndex++;
        this.groupDynamicItems = [...this.groupDynamicItems, writeIndicator];
        this.groupDynamicItemsConfigMap[writeIndicator.id] = {
          sticky: 0,
          selectable: false,
        };

        const writeIndicatorShift = generateWriteIndicator(this._nextIndex);
        this._nextIndex++;
        this.groupDynamicItems = [writeIndicatorShift, ...this.groupDynamicItems];
        this.groupDynamicItemsConfigMap[writeIndicatorShift.id] = {
          sticky: 0,
          selectable: false,
        };

        this.increaseVersion();
      }),
      delay(500),
      tap(() => {
        const items = [...this.groupDynamicItems];
        items.pop();
        items.push(msg);
        this.groupDynamicItemsConfigMap[msg.id] = {
          sticky: 0,
          selectable: true,
        };

        items.shift();

        for (let i = 0, l = 1; i < l; i++) {
          const msgStart = generateMessage(this._nextIndex);
          this._nextIndex++;
          this.groupDynamicItemsConfigMap[msgStart.id] = {
            sticky: 0,
            selectable: true,
          };
          items.unshift(msgStart);
        }

        this.groupDynamicItems = items;

        this.increaseVersion();
      }),
    );
  }

  /**
   * Записывает метрики скролла
   */
  onScrollHandler(e: IScrollEvent & { [x: string]: any; }) {
    this._scrollParams.set({
      viewportEndY: e.scrollSize + e.size,
      scrollWeight: e.scrollWeight,
    });
  }

  /**
   * Записывает метрики скролла
   */
  onScrollEndHandler(e: IScrollEvent & { [x: string]: any; }) {
    this._scrollParams.set({
      viewportEndY: e.scrollSize + e.size,
      scrollWeight: e.scrollWeight,
    });
  }

  /**
   * Трэйс клика по сообщению
   */
  onClickHandler(item: IRenderVirtualListItem | undefined) {
    if (item) {
      console.info(`Click: (ID: ${item.id}) Item ${item.data.name}`);
    }
  }

  /**
   * Блокировка распространения события `keydown` при нажатии `Space`
   * Это необходимо, чтобы предотвратить снятие выделения с сообщения.
   * Т.к. за выбор сообщения в списке отвечает именно клавиша `Space`
   */
  onKeyDownHandler(e: KeyboardEvent) {
    if (e.key === ' ') {
      e.stopImmediatePropagation();
    }
  }

  /**
   * Обработчик переключения режима редактирования
   */
  onEditItemHandler(e: Event, item: IRenderVirtualListItem | undefined, selected: boolean) {
    if (selected) {
      e.stopImmediatePropagation();
    }
    const index = this.groupDynamicItems.findIndex(({ id }) => id === item?.id);
    if (index > -1) {
      const items = [...this.groupDynamicItems], item = items[index];
      items[index] = { ...item, edited: selected ? !item.edited : false };
      this.groupDynamicItems = items;
      this.increaseVersion();
    }
  }

  onTAClickHandler(e: Event) {
    e.stopImmediatePropagation();
  }

  /**
   * Завершение редактирования сообщения по срабатыванию `outside click`
   */
  onOutsideClickHandler(e: Event, item: IRenderVirtualListItem<any> | undefined, selected: boolean) {
    const index = this.groupDynamicItems.findIndex(({ id }) => id === item?.id);
    if (index > -1) {
      const items = [...this.groupDynamicItems], item = items[index];
      items[index] = { ...item, edited: false };
      this.groupDynamicItems = items;
      this.increaseVersion();
    }
    this._service.activeTarget = null;
  }

  /**
   * Обработчик завершения редактирования сообщения
   */
  onEditingCloseHandler(data: { target: any; item: IItemData & { id: Id }; }) {
    const index = this.groupDynamicItems.findIndex(({ id }) => id === data.item.id);
    if (index > -1) {
      const items = [...this.groupDynamicItems], _item = items[index];
      items[index] = { ..._item, edited: false, name: data.target.value };
      this.groupDynamicItems = items;
      this.increaseVersion();
    }
  }

  /**
   * Обработчик перехода сообщения из просмотра в режим редактирования и наооборот
   */
  onEditedHandler(e: any, item: IRenderVirtualListItem<any> | undefined) {
    const index = this.groupDynamicItems.findIndex(({ id }) => id === item?.id);
    if (index > -1) {
      const items = [...this.groupDynamicItems], _item = items[index];
      items[index] = { ..._item, edited: !_item.edited, name: e.target.value };
      this.groupDynamicItems = items;
      this.increaseVersion();
    }
  }

  /**
   * Обработчик удаления сообщения
   */
  onDeleteItemHandler(e: Event, item: IRenderVirtualListItem | undefined) {
    e.stopImmediatePropagation();
    const index = this.groupDynamicItems.findIndex(({ id }) => id === item?.id);
    if (index > -1) {
      const items = [...this.groupDynamicItems];
      items.splice(index, 1);
      this.groupDynamicItems = items;
      this.increaseVersion();
    }
  }

  /**
   * Обработчик клика по поставщику сообщений
   */
  onRoomClickHandler(item: IRenderVirtualListItem | undefined) {
    this.menuOpened.set(false);
    if (item) {
      this.title.set(item.data['name']);
      this.resetList();
      this._listContainerRef()?.scrollToEnd('instant');

      setTimeout(() => {
        this._listContainerRef()?.scrollToEnd('instant');
      }, 150);
    }
  }

  /**
   * Открытие/закрытие дока с поставщиками сообщений
   */
  onOpenMenuHandler() {
    this.menuOpened.update(v => !v);
  }