Merge HeaderButtons.tsx and RoomHeaderButtons.tsx

[luixxiul]

Your use case

What would you like to do?

I would like to see HeaderButtons.tsx and RoomHeaderButtons.tsx merged, if they essentially do the same thing.

Why would you like to do it?

There are several components which seem to be related to display buttons on the room header: RoomHeader, RoomHeaderButtons, HeaderButtons, and HeaderButton.

Currently HeaderButton and HeaderButtons are used on RoomHeaderButtons.tsx only, and since RoomHeaderButtons is used on RoomHeader.tsx only, it means that there is a simple hierarchy as below:

RoomHeader
  - …
  - RoomHeaderButtons
    - HeaderButtons
      - HeaderButton 

HeaderButtons has been used to render buttons which display content inside BaseCard if they are clicked, for example, pinned message card, a thread, and a room information card, which I think is because those buttons are were tagged with ARIA tab role instead of button (the tab role had been in fact not effective, because there was not an associated element tagged with tabpanel. Please see here for more information: #25016).

Because HeaderButtons are used only on the room header, it should be fine to merge HeaderButtons.tsx with RoomHeaderButtons.tsx to simplify the structure such as below:

RoomHeader
  - …
  - RoomHeaderButtons
      - RoomHeaderButton 

Now the the ARIA "tablist" role has been removed from HeaderButtons by matrix-org/matrix-react-sdk#10628, there is no point of keeping HeaderButtons besides RoomHeaderButtons, unless there would be something like "SpaceHeader".

How would you like to achieve it?

Have you considered any alternatives?

No response

Additional context

No response

[luixxiul]

There are also some components on RoomHeader.tsx for displaying buttons on the room header, so the code to display them scatters over those four files.