Add primary reactions to action bar

[jryans]

This adds the primary reactions to the action bar. They act as toggles where you
can only select one from each group at a time.

Note that currently we aren't actually sending the reaction at all. That's left
for a separate task.

Fixes element-hq/element-web#9576

[turt2live]

generally lgtm - we may want to consider splitting out the action buttons themselves into simple components to reduce the size of the MessageActionBar component, however that's not really a concern yet.

[turt2live]

why not use the dimension here and bind an onClick to toggleDimensionValue instead of having several pointer functions?

Something like:

{
  key: "disagree",
  content: "👎",
  dimension: "agreeDimension",
}

then in renderReactionDimensionItems:

<span ... onClick={this.toggleDimensionValue.bind(this, option.dimension, option.key)}> ...

[jryans]

I thought about that, but it's generally suggested that you avoid using inline callbacks or bind in React render methods, since that would create a new function every time, and if that were passed to lower components, it could trigger unnecessary re-rendering.

In this case, we are just rendering spans, not React components for now, so we wouldn't have this issue, but I tend to just avoid doing it everywhere with React, especially since you might later extract some code to a component and not think about this issue.

I think if MessageActionBar gets too complex and/or these functions feel like too much noise, then I think pulling out the reaction dimensions to a new component as you suggested is the correct thing to do.