Shared Components Restructure, Cherry Picked | Restructure Room-List Tree (#32915)

* refactor(shared-components): restructure room-list tree

* refactor(web): rename room-list parent viewmodel

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

* fix(room-list): address review feedback

* Fix Prettier

* Move AvatarWithDetails from avatar folder to core

* Update stories title to reflect correct path

* Fix AvatarWithDetails barrel export path

* Remove stale DateSeparatorView barrel export

* Move AvatarWithDetails visual baseline

* Shorten shared-components visual snapshot paths

* Revert "Shorten shared-components visual snapshot paths"

This reverts commit 91880ff5fb10408aa0091175b53ce3c86c6975a9.

* Move room list notification decoration files up a level

packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.stories.tsx

@@ -11,7 +11,7 @@ import { type Meta, type StoryObj } from "@storybook/react-vite";
 import { AvatarWithDetails } from "./AvatarWithDetails";
 
 const meta = {
-    title: "Avatar/AvatarWithDetails",
+    title: "core/AvatarWithDetails",
     component: AvatarWithDetails,
     tags: ["autodocs"],
     args: {

packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.tsx

@@ -10,7 +10,7 @@ import React from "react";
 import classNames from "classnames";
 
 import styles from "./AvatarWithDetails.module.css";
-import { Flex } from "../../utils/Flex";
+import { Flex } from "../utils/Flex";
 
 export type AvatarWithDetailsProps<C extends ElementType> = {
     /**

packages/shared-components/src/index.ts

@@ -9,7 +9,7 @@
 export * from "./audio/Clock";
 export * from "./audio/PlayPauseButton";
 export * from "./audio/SeekBar";
-export * from "./core/avatar/AvatarWithDetails";
+export * from "./core/AvatarWithDetails";
 export * from "./composer/Banner";
 export * from "./crypto/SasEmoji";
 export * from "./event-tiles/UrlPreviewGroupView";
@@ -43,12 +43,12 @@ export * from "./core/rich-list/RichItem";
 export * from "./core/rich-list/RichList";
 export * from "./room-list/RoomListHeaderView";
 export * from "./room-list/RoomListSearchView";
-export * from "./room-list/RoomListSectionHeaderView";
 export * from "./room-list/RoomListView";
-export * from "./room-list/RoomListItemView";
-export * from "./room-list/RoomListItemAccessibilityWrapper";
+export * from "./room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
 export * from "./room-list/RoomListPrimaryFilters";
 export * from "./room-list/VirtualizedRoomListView";
+export * from "./room-list/VirtualizedRoomListView/RoomListSectionHeaderView";
+export * from "./room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper";
 export * from "./core/utils/Box";
 export * from "./core/utils/Flex";
 export * from "./core/utils/LinkedText";

packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/index.tsx

@@ -1,9 +0,0 @@
-/*
- * Copyright 2026 Element Creations Ltd.
- *
- * 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.
- */
-
-export { NotificationDecoration } from "./NotificationDecoration";
-export type { NotificationDecorationProps, NotificationDecorationData } from "./NotificationDecoration";

packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx

@@ -9,9 +9,9 @@ import React, { type JSX } from "react";
 import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { Room } from "../RoomListItemView";
 import type { FilterId } from "../RoomListPrimaryFilters";
 import { RoomListView, type RoomListViewSnapshot, type RoomListViewActions } from "./RoomListView";
+import type { Room } from "../VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
 import { useMockedViewModel } from "../../core/viewmodel";
 import { withViewDocs } from "../../../.storybook/withViewDocs";
 import {

packages/shared-components/src/room-list/RoomListView/RoomListView.tsx

@@ -12,8 +12,11 @@ import { RoomListPrimaryFilters, type FilterId } from "../RoomListPrimaryFilters
 import { RoomListLoadingSkeleton } from "./RoomListLoadingSkeleton";
 import { RoomListEmptyStateView } from "./RoomListEmptyStateView";
 import { VirtualizedRoomListView, type RoomListViewState } from "../VirtualizedRoomListView";
-import { type Room, type RoomListItemViewModel } from "../RoomListItemView";
-import { type RoomListSectionHeaderViewModel } from "../RoomListSectionHeaderView";
+import {
+    type Room,
+    type RoomListItemViewModel,
+} from "../VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
+import { type RoomListSectionHeaderViewModel } from "../VirtualizedRoomListView/RoomListSectionHeaderView";
 
 export type RoomListSection = {
     /** Unique identifier for the section */

packages/shared-components/src/room-list/RoomListView/index.tsx

@@ -16,3 +16,4 @@ export type {
 export { RoomListLoadingSkeleton } from "./RoomListLoadingSkeleton";
 export { RoomListEmptyStateView } from "./RoomListEmptyStateView";
 export type { RoomListEmptyStateViewProps } from "./RoomListEmptyStateView";
+export * from "../VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx

@@ -10,7 +10,7 @@ import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWrapper";
-import { createMockRoomItemViewModel, renderAvatar } from "../story-mocks";
+import { createMockRoomItemViewModel, renderAvatar } from "../../story-mocks";
 
 const meta = {
     title: "Room List/RoomListItemAccessibiltyWrapper",

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.tsx

@@ -7,8 +7,8 @@
 
 import React, { memo, type JSX } from "react";
 
-import { RoomListItemView, type RoomListItemViewProps } from "../RoomListItemView";
-import { getItemAccessibleProps } from "../../core/VirtualizedList";
+import { RoomListItemView, type RoomListItemViewProps } from "./RoomListItemView";
+import { getItemAccessibleProps } from "../../../core/VirtualizedList";
 
 export interface RoomListItemAccessibilityWrapperPros extends RoomListItemViewProps {
     /** Index of this room in the list */

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.tsx

@@ -16,7 +16,7 @@ import {
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { UnreadCounter, Unread } from "@vector-im/compound-web";
 
-import { Flex } from "../../../core/utils/Flex";
+import { Flex } from "../../../../core/utils/Flex";
 
 /**
  * Data representing the notification state for a room or item.

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemContextMenu.tsx

@@ -8,7 +8,7 @@
 import React, { type JSX, type PropsWithChildren } from "react";
 import { ContextMenu } from "@vector-im/compound-web";
 
-import { _t } from "../../core/i18n/i18n";
+import { _t } from "../../../../core/i18n/i18n";
 import { MoreOptionContent, type RoomListItemViewModel } from "./RoomListItemMoreOptionsMenu";
 
 /**

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemHoverMenu.tsx

@@ -7,7 +7,7 @@
 
 import React, { type JSX } from "react";
 
-import { Flex } from "../../core/utils/Flex";
+import { Flex } from "../../../../core/utils/Flex";
 import { RoomListItemMoreOptionsMenu, type RoomListItemViewModel } from "./RoomListItemMoreOptionsMenu";
 import { RoomListItemNotificationMenu } from "./RoomListItemNotificationMenu";
 import styles from "./RoomListItemView.module.css";

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx

@@ -11,7 +11,7 @@ import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi } from "vitest";
 
 import { RoomListItemMoreOptionsMenu } from "./RoomListItemMoreOptionsMenu";
-import { useMockedViewModel } from "../../core/viewmodel";
+import { useMockedViewModel } from "../../../../core/viewmodel";
 import type { RoomListItemViewSnapshot } from "./RoomListItemView";
 import { defaultSnapshot } from "./default-snapshot";
 

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx

@@ -18,8 +18,8 @@ import {
     OverflowHorizontalIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { _t } from "../../core/i18n/i18n";
-import { useViewModel, type ViewModel } from "../../core/viewmodel";
+import { _t } from "../../../../core/i18n/i18n";
+import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
 import type { RoomListItemViewSnapshot, RoomListItemViewActions } from "./RoomListItemView";
 
 /**

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.test.tsx

@@ -12,7 +12,7 @@ import { describe, it, expect, vi } from "vitest";
 
 import { RoomListItemNotificationMenu } from "./RoomListItemNotificationMenu";
 import { RoomNotifState } from "./RoomNotifs";
-import { useMockedViewModel } from "../../core/viewmodel";
+import { useMockedViewModel } from "../../../../core/viewmodel";
 import type { RoomListItemViewSnapshot } from "./RoomListItemView";
 import { defaultSnapshot } from "./default-snapshot";
 

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.tsx

@@ -13,9 +13,9 @@ import {
     CheckIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { _t } from "../../core/i18n/i18n";
+import { _t } from "../../../../core/i18n/i18n";
 import { RoomNotifState } from "./RoomNotifs";
-import { useViewModel, type ViewModel } from "../../core/viewmodel";
+import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
 import type { RoomListItemViewSnapshot, RoomListItemViewActions } from "./RoomListItemView";
 
 /**

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx

@@ -11,10 +11,10 @@ import { fn } from "storybook/test";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { Room } from "./RoomListItemView";
 import { RoomListItemView, type RoomListItemViewSnapshot, type RoomListItemViewActions } from "./RoomListItemView";
-import { useMockedViewModel } from "../../core/viewmodel";
-import { withViewDocs } from "../../../.storybook/withViewDocs";
+import { useMockedViewModel } from "../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../.storybook/withViewDocs";
 import { defaultSnapshot } from "./default-snapshot";
-import { renderAvatar } from "../story-mocks";
+import { renderAvatar } from "../../../story-mocks";
 import { mockedActions } from "./mocked-actions";
 
 type RoomListItemProps = RoomListItemViewSnapshot &

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.tsx

@@ -9,14 +9,14 @@ import React, { type JSX, memo, useEffect, useRef, type ReactNode } from "react"
 import classNames from "classnames";
 import { Text } from "@vector-im/compound-web";
 
-import { Flex } from "../../core/utils/Flex";
+import { Flex } from "../../../../core/utils/Flex";
 import { NotificationDecoration, type NotificationDecorationData } from "./NotificationDecoration";
 import { RoomListItemHoverMenu } from "./RoomListItemHoverMenu";
 import { RoomListItemContextMenu } from "./RoomListItemContextMenu";
 import { type RoomNotifState } from "./RoomNotifs";
 import styles from "./RoomListItemView.module.css";
-import { useViewModel, type ViewModel } from "../../core/viewmodel";
-import { _t } from "../../core/i18n/i18n";
+import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
+import { _t } from "../../../../core/i18n/i18n";
 
 /**
  * Opaque type representing a Room object from the parent application

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx

@@ -15,8 +15,8 @@ import {
     type RoomListSectionHeaderActions,
     type RoomListSectionHeaderViewProps,
 } from "./RoomListSectionHeaderView";
-import { useMockedViewModel } from "../../core/viewmodel";
-import { withViewDocs } from "../../../.storybook/withViewDocs";
+import { useMockedViewModel } from "../../../core/viewmodel";
+import { withViewDocs } from "../../../../.storybook/withViewDocs";
 
 type RoomListSectionHeaderProps = RoomListSectionHeaderViewSnapshot &
     RoomListSectionHeaderActions &

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx

@@ -9,11 +9,11 @@ import React, { memo, type JSX, type FocusEvent, type MouseEventHandler } from "
 import ChevronRightIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-right";
 import classNames from "classnames";
 
-import { useViewModel, type ViewModel } from "../../core/viewmodel";
+import { useViewModel, type ViewModel } from "../../../core/viewmodel";
 import styles from "./RoomListSectionHeaderView.module.css";
-import { Flex } from "../../core/utils/Flex";
-import { useI18n } from "../../core/i18n/i18nContext";
-import { getGroupHeaderAccessibleProps } from "../../core/VirtualizedList";
+import { Flex } from "../../../core/utils/Flex";
+import { useI18n } from "../../../core/i18n/i18nContext";
+import { getGroupHeaderAccessibleProps } from "../../../core/VirtualizedList";
 
 /**
  * The observable state snapshot for a room list section header.

packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx

@@ -9,7 +9,7 @@ import React, { type JSX } from "react";
 import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { Room } from "../RoomListItemView";
+import type { Room } from "./RoomListItemAccessibilityWrapper/RoomListItemView";
 import { VirtualizedRoomListView, type RoomListViewState } from "./VirtualizedRoomListView";
 import type { RoomListViewSnapshot, RoomListViewActions } from "../RoomListView";
 import { useMockedViewModel } from "../../core/viewmodel";

packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx

@@ -9,7 +9,7 @@ import React, { useCallback, useMemo, useRef, type JSX, type ReactNode } from "r
 import { type ScrollIntoViewLocation } from "react-virtuoso";
 import { isEqual } from "lodash";
 
-import { type Room } from "../RoomListItemView";
+import { type Room } from "./RoomListItemAccessibilityWrapper/RoomListItemView";
 import { useViewModel } from "../../core/viewmodel";
 import { _t } from "../../core/i18n/i18n";
 import {
@@ -19,8 +19,8 @@ import {
 } from "../../core/VirtualizedList";
 import type { RoomListViewSnapshot, RoomListViewModel } from "../RoomListView";
 import { GroupedVirtualizedList } from "../../core/VirtualizedList";
-import { RoomListSectionHeaderView } from "../RoomListSectionHeaderView";
-import { RoomListItemAccessibilityWrapper } from "../RoomListItemAccessibilityWrapper";
+import { RoomListSectionHeaderView } from "./RoomListSectionHeaderView";
+import { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWrapper";
 
 /**
  * Filter key type - opaque string type for filter identifiers

packages/shared-components/src/room-list/VirtualizedRoomListView/index.ts

@@ -7,3 +7,5 @@
 
 export { VirtualizedRoomListView } from "./VirtualizedRoomListView";
 export type { VirtualizedRoomListViewProps, RoomListViewState, FilterKey } from "./VirtualizedRoomListView";
+export * from "./RoomListSectionHeaderView";
+export * from "./RoomListItemAccessibilityWrapper";

packages/shared-components/src/room-list/story-mocks.tsx

@@ -13,8 +13,8 @@ import {
     type RoomListItemViewModel,
     type RoomListItemViewSnapshot,
     RoomNotifState,
-} from "./RoomListItemView";
-import { type RoomListSectionHeaderViewModel } from "./RoomListSectionHeaderView";
+} from "./VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
+import { type RoomListSectionHeaderViewModel } from "./VirtualizedRoomListView/RoomListSectionHeaderView";
 import { MockViewModel } from "../core/viewmodel";
 
 /**