Shared Components Restructure, Cherry Picked | Room Shell Structure (#32917)

* refactor(shared-components): move composer and right-panel tree

* refactor: cleanup remaining structure leftovers

* test(shared-components): add room shell visual baselines

* Correct Path

apps/web/src/components/views/elements/AppTile.tsx

@@ -63,7 +63,7 @@ import { toWidgetDescriptor } from "../../../modules/WidgetLifecycleApi";
 import { parseUrl } from "../../../utils/UrlUtils";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore.ts";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases.ts";
-import { WidgetContextMenu } from "../../../viewmodels/right-panel/WidgetContextMenuViewModel.tsx";
+import { WidgetContextMenu } from "../../../viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx";
 
 // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
 // because that would allow the iframe to programmatically remove the sandbox attribute, but

apps/web/src/components/views/right_panel/ExtensionsCard.tsx

@@ -31,7 +31,7 @@ import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import EmptyState from "./EmptyState";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents.ts";
 import { UIComponent } from "../../../settings/UIFeature.ts";
-import { WidgetContextMenu } from "../../../viewmodels/right-panel/WidgetContextMenuViewModel.tsx";
+import { WidgetContextMenu } from "../../../viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx";
 
 interface Props {
     room: Room;

apps/web/src/components/views/right_panel/WidgetCard.tsx

@@ -18,7 +18,7 @@ import { ContextMenuButton, useContextMenu } from "../../structures/ContextMenu"
 import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import Heading from "../typography/Heading";
-import { WidgetContextMenu } from "../../../viewmodels/right-panel/WidgetContextMenuViewModel";
+import { WidgetContextMenu } from "../../../viewmodels/room/right-panel/WidgetContextMenuViewModel";
 
 interface IProps {
     room: Room;

apps/web/src/viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx

@@ -17,22 +17,22 @@ import {
 } from "@element-hq/web-shared-components";
 import { type ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
 
-import ErrorDialog from "../../components/views/dialogs/ErrorDialog";
-import QuestionDialog from "../../components/views/dialogs/QuestionDialog";
-import MatrixClientContext from "../../contexts/MatrixClientContext";
-import { useScopedRoomContext } from "../../contexts/ScopedRoomContext";
-import { _t } from "../../languageHandler";
-import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../Livestream";
-import Modal from "../../Modal";
-import SettingsStore from "../../settings/SettingsStore";
-import { WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
-import { WidgetMessagingStore } from "../../stores/widgets/WidgetMessagingStore";
-import { isAppWidget } from "../../stores/WidgetStore";
-import WidgetUtils from "../../utils/WidgetUtils";
-import { WidgetType } from "../../widgets/WidgetType";
-import { ModuleRunner } from "../../modules/ModuleRunner";
-import { ElementWidget, type WidgetMessaging } from "../../stores/widgets/WidgetMessaging";
-import dis from "../../dispatcher/dispatcher";
+import ErrorDialog from "../../../components/views/dialogs/ErrorDialog";
+import QuestionDialog from "../../../components/views/dialogs/QuestionDialog";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext";
+import { _t } from "../../../languageHandler";
+import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream";
+import Modal from "../../../Modal";
+import SettingsStore from "../../../settings/SettingsStore";
+import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
+import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
+import { isAppWidget } from "../../../stores/WidgetStore";
+import WidgetUtils from "../../../utils/WidgetUtils";
+import { WidgetType } from "../../../widgets/WidgetType";
+import { ModuleRunner } from "../../../modules/ModuleRunner";
+import { ElementWidget, type WidgetMessaging } from "../../../stores/widgets/WidgetMessaging";
+import dis from "../../../dispatcher/dispatcher";
 
 const checkRevokeButtonState = (
     cli: MatrixClient,

apps/web/test/viewmodels/room/right-panel/WidgetContextMenuViewModel-test.tsx

@@ -12,18 +12,18 @@ import { type MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import {
     WidgetContextMenuViewModel,
     type WidgetContextMenuViewModelProps,
-} from "../../../src/viewmodels/right-panel/WidgetContextMenuViewModel";
-import { stubClient } from "../../test-utils";
-import WidgetUtils from "../../../src/utils/WidgetUtils";
-import { type IApp } from "../../../src/utils/WidgetUtils-types";
-import { WidgetLayoutStore } from "../../../src/stores/widgets/WidgetLayoutStore";
-import * as livestream from "../../../src/Livestream";
-import Modal from "../../../src/Modal";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { SettingLevel } from "../../../src/settings/SettingLevel";
-import * as widgetStore from "../../../src/stores/WidgetStore";
-import { WidgetMessagingStore } from "../../../src/stores/widgets/WidgetMessagingStore";
-import { type WidgetMessaging } from "../../../src/stores/widgets/WidgetMessaging";
+} from "../../../../src/viewmodels/room/right-panel/WidgetContextMenuViewModel";
+import { stubClient } from "../../../test-utils";
+import WidgetUtils from "../../../../src/utils/WidgetUtils";
+import { type IApp } from "../../../../src/utils/WidgetUtils-types";
+import { WidgetLayoutStore } from "../../../../src/stores/widgets/WidgetLayoutStore";
+import * as livestream from "../../../../src/Livestream";
+import Modal from "../../../../src/Modal";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import * as widgetStore from "../../../../src/stores/WidgetStore";
+import { WidgetMessagingStore } from "../../../../src/stores/widgets/WidgetMessagingStore";
+import { type WidgetMessaging } from "../../../../src/stores/widgets/WidgetMessaging";
 
 describe("WidgetContextMenuViewModel", () => {
     const widgetId = "w1";

packages/shared-components/src/index.ts

@@ -10,7 +10,7 @@ export * from "./audio/Clock";
 export * from "./audio/PlayPauseButton";
 export * from "./audio/SeekBar";
 export * from "./core/AvatarWithDetails";
-export * from "./composer/Banner";
+export * from "./room/composer/Banner";
 export * from "./crypto/SasEmoji";
 export * from "./event-tiles/UrlPreviewGroupView";
 export * from "./room/timeline/ReadMarker";
@@ -25,6 +25,7 @@ export * from "./core/pill-input/PillInput";
 export * from "./room/RoomStatusBar";
 export * from "./room/WidgetPip";
 export * from "./room/HistoryVisibilityBadge";
+export * from "./room/right-panel/WidgetContextMenuView";
 export * from "./room/timeline/DateSeparatorView";
 export * from "./room/timeline/TimelineSeparator";
 export * from "./room/timeline/event-tile/actions/ActionBarView";
@@ -53,7 +54,6 @@ export * from "./room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrap
 export * from "./core/utils/Box";
 export * from "./core/utils/Flex";
 export * from "./core/utils/LinkedText";
-export * from "./right-panel/WidgetContextMenu";
 export * from "./core/VirtualizedList";
 export * from "./resize";
 

packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.tsx

@@ -12,7 +12,7 @@ import { Button, InlineSpinner, Text } from "@vector-im/compound-web";
 import styles from "./RoomStatusBarView.module.css";
 import { type ViewModel, useViewModel } from "../../core/viewmodel";
 import { useI18n } from "../../core/i18n/i18nContext";
-import { Banner } from "../../composer/Banner";
+import { Banner } from "../composer/Banner";
 export interface RoomStatusBarViewActions {
     /**
      * Called when the user clicks on the 'resend all' button in the 'unsent messages' bar.

packages/shared-components/src/room/composer/Banner/Banner.tsx

@@ -20,7 +20,7 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"
 import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
 
 import styles from "./Banner.module.css";
-import { _t } from "../../core/i18n/i18n";
+import { _t } from "../../../core/i18n/i18n";
 
 interface BannerProps {
     /**

packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx

@@ -16,8 +16,8 @@ import {
     type WidgetContextMenuViewSnapshot,
     WidgetContextMenuView,
 } from "./WidgetContextMenuView";
-import { useMockedViewModel } from "../../core/viewmodel/useMockedViewModel";
-import { withViewDocs } from "../../../.storybook/withViewDocs";
+import { useMockedViewModel } from "../../../core/viewmodel/useMockedViewModel";
+import { withViewDocs } from "../../../../.storybook/withViewDocs";
 
 type WidgetContextMenuViewModelProps = WidgetContextMenuViewSnapshot & WidgetContextMenuViewActions;
 

packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.test.tsx

@@ -19,9 +19,9 @@ import {
     WidgetContextMenuView,
 } from "./WidgetContextMenuView";
 import * as stories from "./WidgetContextMenuView.stories.tsx";
-import { MockViewModel } from "../../core/viewmodel/MockViewModel.ts";
-import { I18nApi } from "../../core/i18n/I18nApi.ts";
-import { I18nContext } from "../../core/i18n/i18nContext.ts";
+import { MockViewModel } from "../../../core/viewmodel/MockViewModel.ts";
+import { I18nApi } from "../../../core/i18n/I18nApi.ts";
+import { I18nContext } from "../../../core/i18n/i18nContext.ts";
 
 const { Default, OnlyBasicModification } = composeStories(stories);
 

packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.tsx

@@ -9,9 +9,9 @@ import React, { type ReactNode, type JSX } from "react";
 import { IconButton, Menu, MenuItem } from "@vector-im/compound-web";
 import TriggerIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
 
-import { type ViewModel } from "../../core/viewmodel/ViewModel.ts";
-import { useI18n } from "../../core/i18n/i18nContext.ts";
-import { useViewModel } from "../../core/viewmodel/useViewModel.ts";
+import { type ViewModel } from "../../../core/viewmodel/ViewModel.ts";
+import { useI18n } from "../../../core/i18n/i18nContext.ts";
+import { useViewModel } from "../../../core/viewmodel/useViewModel.ts";
 
 export interface WidgetContextMenuViewSnapshot {
     /**