Perf: Eliminate Per-Render Array Reversal and Memoize Permission Sets

Problem 1: Expensive sorting/reversing in MessageList render

packages/react/src/views/MessageList/MessageList.js currently does:

• messages.filter(...).slice().reverse().map(...)

This clones + reverses the array on every render, which is costly for long message lists and increases GC pressure.

Proposed fix

• Store messages in display order upstream (store/selector) so the component can render via a simple .map(...).
• Keep filtering/mapping in render minimal.

Acceptance criteria

• No .slice().reverse() (or equivalent full-array reversal) in MessageList render path.
• Message ordering remains correct (oldest→newest or whatever the UI expects) including unread divider placement and sequential grouping.

Problem 2: Message.js recreates Sets every render

packages/react/src/views/Message/Message.js creates Set objects for permissions/roles on each render (around lines ~104–108), e.g.:

• new Set(pinPermissions) etc.

This causes avoidable allocations and prevents referential stability for downstream props.

Proposed fix

• Use useMemo for any derived Set constructions:
  • useMemo(() => new Set(pinPermissions), [pinPermissions]) etc.

Acceptance criteria

• Permission/role Set are memoized and only recreated when the underlying arrays change.

Start with packages/react/src/views/MessageList/MessageList.js and packages/react/src/views/Message/Message.js, then trace the upstream store or selector that supplies message ordering. Verify the current ordering, unread divider placement, and sequential grouping before changing the render path; done means no per-render reversal and permission or role Sets are recreated only when their arrays change.