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/hooks/useMediaVisible-test.tsx

@@ -35,6 +35,11 @@ describe("useMediaVisible", () => {
             withClientContextRenderOptions(matrixClient),
         );
     }
+
+    function renderWithoutEvent() {
+        return renderHook(() => useMediaVisible(), withClientContextRenderOptions(matrixClient));
+    }
+
     beforeEach(() => {
         matrixClient = createTestClient();
         room = mkStubRoom(ROOM_ID, undefined, matrixClient);
@@ -57,6 +62,14 @@ describe("useMediaVisible", () => {
         expect(visible).toEqual(true);
     });
 
+    it("should use the global rule when no event is provided", () => {
+        mediaPreviewConfig.media_previews = MediaPreviewValue.Off;
+        expect(renderWithoutEvent().result.current[0]).toEqual(false);
+
+        mediaPreviewConfig.media_previews = MediaPreviewValue.On;
+        expect(renderWithoutEvent().result.current[0]).toEqual(true);
+    });
+
     it("should hide media when media previews are Off", () => {
         mediaPreviewConfig.media_previews = MediaPreviewValue.Off;
         const [visible] = render().result.current;