Refactor MessageActionBar using MVVM and move to shared-components (#32784)

* Refactor MessageActionBar into MVVM ActionBarView

* Adding tooltips for menu items and correct i18n strings

* Layout changes

* Renaming some properties

* Rename property

* Create a first version of the view model and refactor media visibility logic

* Refactor view to take options and rections menu as optional properties

* Cleaner interface between view and view model

* Refactor view properties and replace Menu and MenuItem

* Bugfixes and switching to ActionBarView instead of MessageActionBar in element-web

* Avoid creating view models and render toolbar until it is actually shown

* Added unit and playwright tests and documented the view

* Added view model unit tests and updated snapshots of dependant tests

* Remove unused components and unnecessary css

* Remove unused language tags

* Fix for handling join-rules correctly

* Prettier

* Add handling of stale view model in async calls

* Prettier

* Split the element-web css into two different. One for legacy components and one for the ActionBarView

* Missing variables used for linting

* Fix for showing ActionBarView when using keyboard for navigation

* Handle visibility on context menu closing

* ThreadPanel uses the ActionBarView so restore css rule

* Fix for visibility of the ActionBarView in Thread panel

* Fix for ActionBarVuew visibility when closing right-click context menu and not still hovering

* Add roving index to function as a toolbar

* Adjust the RoomView test to send hover to the EventTile instead of the message text

* Fix SonarCloud issues

* Fix for SonarCloud issue

* Merge fix

* Rename mx_LegacyActionBar to mx_ThreadActionBar

* Added documentation and simplified join rules

* Generalize the ActionBarView and move logic to view model

* Add the four new buttons to the ActionBarView

* Update view model and tests to use the updated ActionBarView

* Refactor element-web to use ActionBarView

* Clean up styling in element-web

* Clean up and updating snaps and screenshots

* Added unit-tests for better coverage

* Moving ActionBarView to the correct folder in shared components

* Update snaps in element-web

* Better documentation in stories

* Merge fixes

* Updates after review comments

* Review comment fixes

* Added documentation to view models and updated snaps

* Hide button had the wrong label

* Replace createRef with useRef

apps/web/test/unit-tests/components/structures/RoomView-test.tsx

@@ -948,7 +948,10 @@ describe("RoomView", () => {
                 expect(container.querySelector(".mx_RoomView_searchResultsPanel")).toBeVisible();
             });
 
-            await userEvent.hover(getByText("search term"));
+            const searchResultTile = getByText("search term").closest(".mx_EventTile");
+            expect(searchResultTile).not.toBeNull();
+
+            await userEvent.hover(searchResultTile!);
             await userEvent.click(await findByLabelText("Edit"));
 
             await waitFor(() => {
@@ -1014,7 +1017,10 @@ describe("RoomView", () => {
             });
             const prom = untilDispatch(Action.ViewRoom, defaultDispatcher);
 
-            await userEvent.hover(getByText("search term"));
+            const searchResultTile = getByText("search term").closest(".mx_EventTile");
+            expect(searchResultTile).not.toBeNull();
+
+            await userEvent.hover(searchResultTile!);
             await userEvent.click(await findByLabelText("Edit"));
 
             await expect(prom).resolves.toEqual(expect.objectContaining({ room_id: room2.roomId }));