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/res/css/views/messages/_MessageActionBar.pcss

@@ -9,19 +9,8 @@ Please see LICENSE files in the repository root for full details.
 .mx_MessageActionBar {
     --MessageActionBar-size-button: 28px;
     --MessageActionBar-size-margin: 3px;
-    --MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
-    --MessageActionBar-item-hover-borderRadius: 6px;
-    --MessageActionBar-item-hover-zIndex: 1;
 
     position: absolute;
-    visibility: hidden;
-    cursor: pointer;
-    display: flex;
-    gap: var(--cpd-space-0-5x);
-    line-height: $font-24px;
-    border-radius: 8px;
-    background: $background;
-    border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
     top: calc(
         -1 *
             (
@@ -75,51 +64,4 @@ Please see LICENSE files in the repository root for full details.
             left: 0;
         }
     }
-
-    > * {
-        white-space: nowrap;
-        display: inline-block;
-        position: relative;
-        margin: var(--MessageActionBar-size-margin);
-
-        &:hover {
-            background: var(--MessageActionBar-item-hover-background);
-            border-radius: var(--MessageActionBar-item-hover-borderRadius);
-            z-index: var(--MessageActionBar-item-hover-zIndex);
-        }
-    }
-
-    .mx_MessageActionBar_iconButton {
-        --MessageActionBar-icon-size: 20px;
-        width: var(--MessageActionBar-size-button);
-        height: var(--MessageActionBar-size-button);
-        color: var(--cpd-color-icon-secondary);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        svg {
-            height: var(--MessageActionBar-icon-size);
-            width: var(--MessageActionBar-icon-size);
-            flex: 0 0 var(--MessageActionBar-icon-size);
-        }
-
-        &:disabled,
-        &[disabled] {
-            cursor: not-allowed;
-            opacity: 0.75;
-        }
-
-        &:hover {
-            color: var(--cpd-color-icon-primary);
-        }
-
-        &.mx_MessageActionBar_downloadButton {
-            &.mx_MessageActionBar_downloadSpinnerButton {
-                svg {
-                    display: none; /* hide the download icon */
-                }
-            }
-        }
-    }
 }