fix(MessagesList) - performance, search fixes and minor refactoring

[Antreesy]

☑️ Resolves

Splitted by commits:

• Fix frequently logging errors and warnings in console:
  • Uncaught TypeError "Cannot read properties of undefined" for reactions
  • 'focus-trap' error when hover over reaction to message (solves partially Focus-trap is not working (and throws error on console) for permissions editor and new conversations dialog #7970)

---

• Limit lookForNewMessages request with default fetch limit (100 messages)
• Fix store regression which leads to unnecessary fetch requests

🖼️ Screenshots: see #9897 (comment)

---

• Refactor message grouping with soft update of store
  • check previous and new state for changes: now only groups with changes will be re-rendered (probably fix Duplicate date header for the same date #8880)

---

• Adjust scroll position when loading new / old messages
  • now list remains on the same place after re-render and don't jump up-down because of loader insert into DOM

🖼️ Screenshots

Before	After

---

• Fix focusing and highlighting of messages, targeted from replies and unified search
  • If message is not presented in store yet, fetch it and its context (fix Messages chat polling freezes the browser #6046)
  • Reduce read icon height, so the outline from keyboard focus looks even

🖼️ Screenshots

Before	After

---

• Fix highlighting of focused message
  • now it's done with Vue approach - refs + public methods

---

🚧 Tasks

• Code review
• Manual testing

🏁 Checklist

• ⛑️ Tests (unit and/or integration) are included or not required
• 📘 API documentation in docs/ has been updated or is not required
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required
• 🔖 Capability is added or not needed

[Antreesy]

/backport to stable27

[Antreesy]

Converted to draft to solve #6046 and backport together, because of related changes (message focus)

[ShGKme]

Changes requested at least to search behavior changes.

---

This PR of solve-type-errors branch includes:

• 3 (probably 4) different bug fixes (without bugs' descriptions)
• 3 visual changes (although there is "🖼 Screenshots No visual changes" in the description)
• 1 UX change (search behavior)
• 1 performance update (according to the title)
• Refactorings
• And other minor changes

For me, it is hard to review and keep discussions about so many (sometimes not obvious and not small) changes in one PR. I'd prefer to have them in separated PRs in future.

Separating the changes also makes it easier to backport them to different stables when necessary.

[nickvergessen]

JFYI: I canceled the backport request to 26.

Also I'm very hesitant to backport this at all.

[Antreesy]

Rebased onto master, fixups are squashed into original commits to keep PR clean
@ShGKme sorry for the mess 👀

[ShGKme]

Looks good from the code, but I haven't tested it yet after updates

[ShGKme]

Tested, looks like it works fine 😃

[ShGKme]

For future. Generate and send 1000 messages with text 1..1000 from the console

const START = 1
const MESSAGES_PER_SECOND = 5
const END = 1000

let i = START

const input = document.querySelector('[contenteditable]')
const getSend = () => document.querySelector('[aria-label="Send message"]')

const id = setInterval(async () => {
  input.innerHTML = i++;
  input.dispatchEvent(new InputEvent('input'));
  await Promise.resolve()
  getSend().click()
  if (i > END) {
    clearInterval(id)
  }
}, ~~(1000 / MESSAGES_PER_SECOND))    

[Antreesy]

So, this PR should be backported as well to resolve conflicts (cc @nickvergessen):

• chore(deps): Bump @nextcloud/axios from 2.3.0 to 2.4.0 #9919

[Antreesy]

/backport to stable27

[Antreesy]

follow-up: although groups are now compared and updated softly during fetching, Message components inside are still re-rendered (probably some store mutations are causing it)