Redesign widget pip and move into shared component (#32654)

* redesign widget pip and move into shared component

* fix onBackClick handler

* fix ci

* Update README.md prepare -> prepack

* add vm tests

* Update WidgetPipView.stories.tsx

* fix tests

* playwright tests

* fix test id

* remove unused files (reappeared after rebase)

* update storybook screenshot tests

* update playwright tests

* adjust padding

* review

* comment and docstring corrections

* fix imports and `this.props`

* fix double `complementary` item

* add WidgetPipView tests and revmoe `setViewingRoom` from
WidgetPipViewModelInterface.

* add doc sting to `setViewingRoom`

* Update RoomStatusBarView.test.tsx

* fix copyright

* Update RoomView-test.tsx.snap

* revert accidental Copyright year changes

* update snapshot RoomView-test

apps/web/res/css/_components.pcss

@@ -34,7 +34,6 @@
 @import "./components/views/location/_ZoomButtons.pcss";
 @import "./components/views/messages/_MBeaconBody.pcss";
 @import "./components/views/messages/shared/_MediaProcessingError.pcss";
-@import "./components/views/pips/_WidgetPip.pcss";
 @import "./components/views/polls/_PollOption.pcss";
 @import "./components/views/settings/_AddRemoveThreepids.pcss";
 @import "./components/views/settings/devices/_CurrentDeviceSection.pcss";

apps/web/res/css/components/views/pips/_WidgetPip.pcss

@@ -1,73 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-$width: 320px;
-$height: 220px;
-
-.mx_WidgetPip {
-    width: $width;
-    height: $height;
-}
-
-.mx_WidgetPip_overlay {
-    width: $width;
-    height: $height;
-    position: absolute;
-    top: 0;
-    border-radius: 8px;
-    overflow: hidden;
-    color: $call-primary-content;
-    cursor: pointer;
-}
-
-.mx_WidgetPip_header,
-.mx_WidgetPip_footer {
-    position: absolute;
-    left: 0;
-    height: 60px;
-    width: 100%;
-    box-sizing: border-box;
-    transition: opacity ease 0.15s;
-}
-
-.mx_WidgetPip_overlay:not(:hover) {
-    .mx_WidgetPip_header,
-    .mx_WidgetPip_footer {
-        opacity: 0;
-    }
-}
-
-.mx_WidgetPip_header {
-    top: 0;
-    padding: $spacing-12;
-    display: flex;
-    font-size: $font-12px;
-    font-weight: var(--cpd-font-weight-semibold);
-    background: linear-gradient(rgb(0, 0, 0, 0.9), rgb(0, 0, 0, 0));
-}
-
-.mx_WidgetPip_backButton {
-    height: $spacing-24;
-    display: flex;
-    align-items: center;
-    gap: $spacing-12;
-
-    > .mx_Icon {
-        color: $call-light-quaternary-content;
-        padding: 0;
-    }
-}
-
-.mx_WidgetPip_footer {
-    bottom: 0;
-    padding: $spacing-12 $spacing-8;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.9));
-}

apps/web/res/css/views/rooms/_AppsDrawer.pcss

@@ -7,10 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-:root {
-    --AppTile_mini-height: 220px;
-}
-
 .mx_AppsDrawer {
     --minWidth: 240px; /* TODO this should be 300px but that's too large */
 
@@ -168,11 +164,11 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_AppTile_mini {
     width: 100%;
+    height: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
-    height: var(--AppTile_mini-height);
 }
 
 .mx_AppTile .mx_AppTile_persistedWrapper,
@@ -276,8 +272,8 @@ Please see LICENSE files in the repository root for full details.
     &.mx_AppTileBody--large,
     &.mx_AppTileBody--mini {
         width: 100%;
+        height: 100%;
         overflow: hidden;
-        height: var(--AppTileBody-height);
 
         iframe {
             border: none;
@@ -299,10 +295,6 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    &.mx_AppTileBody--mini {
-        --AppTileBody-height: var(--AppTile_mini-height);
-    }
-
     &.mx_AppTileBody--loading {
         display: flex;
         flex-direction: column;