- {viewModel.name}
+
+ {item.name}
- {viewModel.messagePreview && (
-
- {viewModel.messagePreview}
+ {item.messagePreview && (
+
+ {item.messagePreview}
)}
{showHoverMenu ? (
(isOpen ? setIsMenuOpen(true) : closeMenu())}
/>
) : (
<>
{/* aria-hidden because we summarise the unread count/notification status in a11yLabel */}
-
+
)}
@@ -154,7 +180,11 @@ export const RoomListItem = memo(function RoomListItem({
);
return (
-
+
{content}
);
diff --git a/packages/shared-components/src/room-list/RoomListItem/RoomListItemContextMenu.tsx b/packages/shared-components/src/room-list/RoomListItem/RoomListItemContextMenu.tsx
index cd02d59b71..556a787421 100644
--- a/packages/shared-components/src/room-list/RoomListItem/RoomListItemContextMenu.tsx
+++ b/packages/shared-components/src/room-list/RoomListItem/RoomListItemContextMenu.tsx
@@ -9,15 +9,20 @@ import React, { type JSX, type PropsWithChildren } from "react";
import { ContextMenu } from "@vector-im/compound-web";
import { _t } from "../../utils/i18n";
-import { MoreOptionContent } from "./RoomListItemHoverMenu";
-import { type RoomListItemMenuViewModel } from "./RoomListItemMenuViewModel";
+import {
+ MoreOptionContent,
+ type MoreOptionsMenuState,
+ type MoreOptionsMenuCallbacks,
+} from "./RoomListItemMoreOptionsMenu";
/**
* Props for RoomListItemContextMenu component
*/
export interface RoomListItemContextMenuProps {
- /** The view model containing menu data and callbacks */
- viewModel: RoomListItemMenuViewModel;
+ /** More options menu state */
+ state: MoreOptionsMenuState;
+ /** More options menu callbacks */
+ callbacks: MoreOptionsMenuCallbacks;
/** Callback when menu open state changes */
onMenuOpenChange: (isOpen: boolean) => void;
}
@@ -27,7 +32,8 @@ export interface RoomListItemContextMenuProps {
* Wraps the trigger element with a right-click context menu displaying room options.
*/
export const RoomListItemContextMenu: React.FC> = ({
- viewModel,
+ state,
+ callbacks,
onMenuOpenChange,
children,
}): JSX.Element => {
@@ -39,7 +45,7 @@ export const RoomListItemContextMenu: React.FC
-
+
);
};
diff --git a/packages/shared-components/src/room-list/RoomListItem/RoomListItemHoverMenu.tsx b/packages/shared-components/src/room-list/RoomListItem/RoomListItemHoverMenu.tsx
index a829ff1abf..79f26fb7fc 100644
--- a/packages/shared-components/src/room-list/RoomListItem/RoomListItemHoverMenu.tsx
+++ b/packages/shared-components/src/room-list/RoomListItem/RoomListItemHoverMenu.tsx
@@ -5,31 +5,36 @@
* Please see LICENSE files in the repository root for full details.
*/
-import React, { useState, useCallback, type JSX, type ComponentProps } from "react";
-import { IconButton, Menu, MenuItem, Separator, ToggleMenuItem, Tooltip } from "@vector-im/compound-web";
-import MarkAsReadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-read";
-import MarkAsUnreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-unread";
-import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite";
-import ArrowDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-down";
-import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
-import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
-import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
-import OverflowIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
-import NotificationIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-solid";
-import NotificationOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-off-solid";
-import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
+import React, { type JSX } from "react";
import { Flex } from "../../utils/Flex";
-import { _t } from "../../utils/i18n";
-import { RoomNotifState } from "../../notifications/RoomNotifs";
-import { type RoomListItemMenuViewModel } from "./RoomListItemMenuViewModel";
+import {
+ RoomListItemMoreOptionsMenu,
+ type MoreOptionsMenuState,
+ type MoreOptionsMenuCallbacks,
+} from "./RoomListItemMoreOptionsMenu";
+import {
+ RoomListItemNotificationMenu,
+ type NotificationMenuState,
+ type NotificationMenuCallbacks,
+} from "./RoomListItemNotificationMenu";
/**
* Props for RoomListItemHoverMenu component
*/
export interface RoomListItemHoverMenuProps {
- /** The view model containing menu data and callbacks */
- viewModel: RoomListItemMenuViewModel;
+ /** Whether the more options menu should be shown */
+ showMoreOptionsMenu: boolean;
+ /** Whether the notification menu should be shown */
+ showNotificationMenu: boolean;
+ /** More options menu state */
+ moreOptionsState: MoreOptionsMenuState;
+ /** More options menu callbacks */
+ moreOptionsCallbacks: MoreOptionsMenuCallbacks;
+ /** Notification menu state */
+ notificationState: NotificationMenuState;
+ /** Notification menu callbacks */
+ notificationCallbacks: NotificationMenuCallbacks;
/** Callback when menu open state changes */
onMenuOpenChange: (isOpen: boolean) => void;
}
@@ -39,215 +44,34 @@ export interface RoomListItemHoverMenuProps {
* Displays more options and notification settings menus.
*/
export const RoomListItemHoverMenu: React.FC = ({
- viewModel,
+ showMoreOptionsMenu,
+ showNotificationMenu,
+ moreOptionsState,
+ moreOptionsCallbacks,
+ notificationState,
+ notificationCallbacks,
onMenuOpenChange,
}): JSX.Element => {
return (
- {viewModel.showMoreOptionsMenu && (
-
+ {showMoreOptionsMenu && (
+
)}
- {viewModel.showNotificationMenu && (
-
+ {showNotificationMenu && (
+
)}
);
};
-interface MoreOptionsMenuProps {
- viewModel: RoomListItemMenuViewModel;
- onMenuOpenChange: (isOpen: boolean) => void;
-}
-
-function MoreOptionsMenu({ viewModel, onMenuOpenChange }: MoreOptionsMenuProps): JSX.Element {
- const [open, setOpen] = useState(false);
-
- const handleOpenChange = useCallback(
- (isOpen: boolean) => {
- setOpen(isOpen);
- onMenuOpenChange(isOpen);
- },
- [onMenuOpenChange],
- );
-
- return (
- }
- >
-
-
- );
-}
-
-interface MoreOptionContentProps {
- viewModel: RoomListItemMenuViewModel;
-}
-
-export function MoreOptionContent({ viewModel }: MoreOptionContentProps): JSX.Element {
- return (
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
- e.stopPropagation()}>
- {viewModel.canMarkAsRead && (
-
- );
-}
-
-const MoreOptionsButton = function MoreOptionsButton(props: ComponentProps): JSX.Element {
- return (
-
-
-
-
-
- );
-};
-
-interface NotificationMenuProps {
- viewModel: RoomListItemMenuViewModel;
- onMenuOpenChange: (isOpen: boolean) => void;
-}
-
-function NotificationMenu({ viewModel, onMenuOpenChange }: NotificationMenuProps): JSX.Element {
- const [open, setOpen] = useState(false);
-
- const handleOpenChange = useCallback(
- (isOpen: boolean) => {
- setOpen(isOpen);
- onMenuOpenChange(isOpen);
- },
- [onMenuOpenChange],
- );
-
- const checkComponent = ;
-
- return (
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
- e.stopPropagation()}>
-
}
- >
-
-
-
-
-
-
- );
-}
-
-interface NotificationButtonProps extends ComponentProps {
- isRoomMuted: boolean;
-}
-
-const NotificationButton = function NotificationButton({
- isRoomMuted,
- ...props
-}: NotificationButtonProps): JSX.Element {
- return (
-
-
- {isRoomMuted ? : }
-
-
- );
-};
+// Re-export types for convenience
+export type { MoreOptionsMenuState, MoreOptionsMenuCallbacks } from "./RoomListItemMoreOptionsMenu";
+export type { NotificationMenuState, NotificationMenuCallbacks } from "./RoomListItemNotificationMenu";
diff --git a/packages/shared-components/src/room-list/RoomListItem/RoomListItemMoreOptionsMenu.tsx b/packages/shared-components/src/room-list/RoomListItem/RoomListItemMoreOptionsMenu.tsx
new file mode 100644
index 0000000000..08ba087d70
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListItem/RoomListItemMoreOptionsMenu.tsx
@@ -0,0 +1,184 @@
+/*
+ * Copyright 2025 New Vector 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.
+ */
+
+import React, { useState, useCallback, type JSX, type ComponentProps } from "react";
+import { IconButton, Menu, MenuItem, Separator, ToggleMenuItem, Tooltip } from "@vector-im/compound-web";
+import MarkAsReadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-read";
+import MarkAsUnreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-unread";
+import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite";
+import ArrowDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-down";
+import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
+import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
+import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
+import OverflowIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
+
+import { _t } from "../../utils/i18n";
+
+/**
+ * State for the more options menu
+ */
+export interface MoreOptionsMenuState {
+ /** Whether the room is a favourite room */
+ isFavourite: boolean;
+ /** Whether the room is a low priority room */
+ isLowPriority: boolean;
+ /** Can invite other users in the room */
+ canInvite: boolean;
+ /** Can copy the room link */
+ canCopyRoomLink: boolean;
+ /** Can mark the room as read */
+ canMarkAsRead: boolean;
+ /** Can mark the room as unread */
+ canMarkAsUnread: boolean;
+}
+
+/**
+ * Callbacks for the more options menu
+ */
+export interface MoreOptionsMenuCallbacks {
+ /** Mark the room as read */
+ onMarkAsRead: () => void;
+ /** Mark the room as unread */
+ onMarkAsUnread: () => void;
+ /** Toggle the room as favourite */
+ onToggleFavorite: () => void;
+ /** Toggle the room as low priority */
+ onToggleLowPriority: () => void;
+ /** Invite other users in the room */
+ onInvite: () => void;
+ /** Copy the room link to clipboard */
+ onCopyRoomLink: () => void;
+ /** Leave the room */
+ onLeaveRoom: () => void;
+}
+
+/**
+ * Props for RoomListItemMoreOptionsMenu component
+ */
+export interface RoomListItemMoreOptionsMenuProps {
+ /** More options menu state */
+ state: MoreOptionsMenuState;
+ /** More options menu callbacks */
+ callbacks: MoreOptionsMenuCallbacks;
+ /** Callback when menu open state changes */
+ onMenuOpenChange: (isOpen: boolean) => void;
+}
+
+/**
+ * The more options menu for room list items.
+ * Displays additional room actions like mark as read/unread, favorite, invite, etc.
+ */
+export function RoomListItemMoreOptionsMenu({
+ state,
+ callbacks,
+ onMenuOpenChange,
+}: RoomListItemMoreOptionsMenuProps): JSX.Element {
+ const [open, setOpen] = useState(false);
+
+ const handleOpenChange = useCallback(
+ (isOpen: boolean) => {
+ setOpen(isOpen);
+ onMenuOpenChange(isOpen);
+ },
+ [onMenuOpenChange],
+ );
+
+ return (
+ }
+ >
+
+
+ );
+}
+
+interface MoreOptionContentProps {
+ state: MoreOptionsMenuState;
+ callbacks: MoreOptionsMenuCallbacks;
+}
+
+export function MoreOptionContent({ state, callbacks }: MoreOptionContentProps): JSX.Element {
+ return (
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+ e.stopPropagation()}>
+ {state.canMarkAsRead && (
+
+ );
+}
+
+const MoreOptionsButton = function MoreOptionsButton(props: ComponentProps): JSX.Element {
+ return (
+
+
+
+
+
+ );
+};
diff --git a/packages/shared-components/src/room-list/RoomListItem/RoomListItemNotificationMenu.tsx b/packages/shared-components/src/room-list/RoomListItem/RoomListItemNotificationMenu.tsx
new file mode 100644
index 0000000000..19a0d31234
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListItem/RoomListItemNotificationMenu.tsx
@@ -0,0 +1,139 @@
+/*
+ * Copyright 2025 New Vector 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.
+ */
+
+import React, { useState, useCallback, type JSX, type ComponentProps } from "react";
+import { IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web";
+import NotificationIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-solid";
+import NotificationOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-off-solid";
+import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
+
+import { _t } from "../../utils/i18n";
+import { RoomNotifState } from "../../notifications/RoomNotifs";
+
+/**
+ * State for the notification menu
+ */
+export interface NotificationMenuState {
+ /** Whether the notification is set to all messages */
+ isNotificationAllMessage: boolean;
+ /** Whether the notification is set to all messages loud */
+ isNotificationAllMessageLoud: boolean;
+ /** Whether the notification is set to mentions and keywords only */
+ isNotificationMentionOnly: boolean;
+ /** Whether the notification is muted */
+ isNotificationMute: boolean;
+}
+
+/**
+ * Callbacks for the notification menu
+ */
+export interface NotificationMenuCallbacks {
+ /** Set the room notification state */
+ onSetRoomNotifState: (state: RoomNotifState) => void;
+}
+
+/**
+ * Props for RoomListItemNotificationMenu component
+ */
+export interface RoomListItemNotificationMenuProps {
+ /** Notification menu state */
+ state: NotificationMenuState;
+ /** Notification menu callbacks */
+ callbacks: NotificationMenuCallbacks;
+ /** Callback when menu open state changes */
+ onMenuOpenChange: (isOpen: boolean) => void;
+}
+
+/**
+ * The notification settings menu for room list items.
+ * Displays options to change notification settings.
+ */
+export function RoomListItemNotificationMenu({
+ state,
+ callbacks,
+ onMenuOpenChange,
+}: RoomListItemNotificationMenuProps): JSX.Element {
+ const [open, setOpen] = useState(false);
+
+ const handleOpenChange = useCallback(
+ (isOpen: boolean) => {
+ setOpen(isOpen);
+ onMenuOpenChange(isOpen);
+ },
+ [onMenuOpenChange],
+ );
+
+ const checkComponent = ;
+
+ return (
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+ e.stopPropagation()}>
+
}
+ >
+
+
+
+
+
+
+ );
+}
+
+interface NotificationButtonProps extends ComponentProps {
+ isRoomMuted: boolean;
+}
+
+const NotificationButton = function NotificationButton({
+ isRoomMuted,
+ ...props
+}: NotificationButtonProps): JSX.Element {
+ return (
+
+
+ {isRoomMuted ? : }
+
+
+ );
+};
diff --git a/packages/shared-components/src/room-list/RoomListItem/index.ts b/packages/shared-components/src/room-list/RoomListItem/index.ts
index 748211e1d0..7d887eb82b 100644
--- a/packages/shared-components/src/room-list/RoomListItem/index.ts
+++ b/packages/shared-components/src/room-list/RoomListItem/index.ts
@@ -5,5 +5,7 @@
* Please see LICENSE files in the repository root for full details.
*/
-export { RoomListItem } from "./RoomListItem";
-export type { RoomListItemProps, RoomListItemViewModel } from "./RoomListItem";
+export { RoomListItemView } from "./RoomListItem";
+export type { RoomListItem, RoomListItemViewProps, RoomListItemCallbacks } from "./RoomListItem";
+export type { MoreOptionsMenuState, MoreOptionsMenuCallbacks } from "./RoomListItemMoreOptionsMenu";
+export type { NotificationMenuState, NotificationMenuCallbacks } from "./RoomListItemNotificationMenu";
diff --git a/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.stories.tsx b/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.stories.tsx
index 2aaabe7f37..e5a2dbf52c 100644
--- a/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.stories.tsx
@@ -8,21 +8,22 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { NotificationDecorationViewModel } from "../../notifications/NotificationDecoration";
+import type { NotificationDecorationData } from "../../notifications/NotificationDecoration";
import type { RoomsResult } from "../RoomList";
-import type { RoomListItemViewModel } from "../RoomListItem";
+import type { RoomListItem } from "../RoomListItem";
+import type { MoreOptionsMenuState } from "../RoomListItem/RoomListItemMoreOptionsMenu";
+import type { NotificationMenuState } from "../RoomListItem/RoomListItemNotificationMenu";
import { SortOption } from "../RoomListHeader/SortOptionsMenu";
import { RoomListPanel, type RoomListPanelSnapshot } from "./RoomListPanel";
import type { FilterViewModel } from "../RoomListPrimaryFilters/useVisibleFilters";
import { type ViewModel } from "../../viewmodel/ViewModel";
import type { RoomListSearchSnapshot } from "../RoomListSearch";
import type { RoomListHeaderSnapshot, SortOptionsMenuSnapshot } from "../RoomListHeader";
-import type { RoomListViewSnapshot } from "../RoomListView";
+import type { RoomListViewWrapperSnapshot } from "../RoomListView";
import type { RoomListPrimaryFiltersSnapshot } from "../RoomListPrimaryFilters";
-import type { RoomListSnapshot } from "../RoomList";
// Mock avatar component
-const mockAvatar = (roomViewModel: RoomListItemViewModel): React.ReactElement => (
+const mockAvatar = (roomItem: RoomListItem): React.ReactElement => (
fontSize: "12px",
}}
>
- {roomViewModel.name.substring(0, 2).toUpperCase()}
+ {roomItem.name.substring(0, 2).toUpperCase()}
);
// Generate mock rooms
-const generateMockRooms = (count: number): RoomListItemViewModel[] => {
+const generateMockRooms = (count: number): RoomListItem[] => {
return Array.from({ length: count }, (_, i) => {
const unreadCount = Math.random() > 0.7 ? Math.floor(Math.random() * 10) : 0;
const hasNotification = Math.random() > 0.8;
- const notificationViewModel: NotificationDecorationViewModel = {
+ const notificationData: NotificationDecorationData = {
hasAnyNotificationOrActivity: unreadCount > 0,
isUnsentMessage: false,
invited: false,
@@ -58,36 +59,33 @@ const generateMockRooms = (count: number): RoomListItemViewModel[] => {
muted: false,
};
+ const moreOptionsState: MoreOptionsMenuState = {
+ isFavourite: false,
+ isLowPriority: false,
+ canInvite: true,
+ canCopyRoomLink: true,
+ canMarkAsRead: unreadCount > 0,
+ canMarkAsUnread: unreadCount === 0,
+ };
+
+ const notificationState: NotificationMenuState = {
+ isNotificationAllMessage: true,
+ isNotificationAllMessageLoud: false,
+ isNotificationMentionOnly: false,
+ isNotificationMute: false,
+ };
+
return {
id: `!room${i}:server`,
name: `Room ${i + 1}`,
- openRoom: () => console.log(`Opening room: Room ${i + 1}`),
a11yLabel: unreadCount ? `Room ${i + 1}, ${unreadCount} unread messages` : `Room ${i + 1}`,
isBold: unreadCount > 0,
messagePreview: undefined,
- notificationViewModel,
- menuViewModel: {
- showMoreOptionsMenu: true,
- showNotificationMenu: true,
- canMarkAsRead: unreadCount > 0,
- canMarkAsUnread: unreadCount === 0,
- isFavourite: false,
- isLowPriority: false,
- canInvite: true,
- canCopyRoomLink: true,
- isNotificationAllMessage: true,
- isNotificationAllMessageLoud: false,
- isNotificationMentionOnly: false,
- isNotificationMute: false,
- markAsRead: () => console.log(`Mark read: Room ${i + 1}`),
- markAsUnread: () => console.log(`Mark unread: Room ${i + 1}`),
- toggleFavorite: () => console.log(`Toggle favorite: Room ${i + 1}`),
- toggleLowPriority: () => console.log(`Toggle low priority: Room ${i + 1}`),
- invite: () => console.log(`Invite: Room ${i + 1}`),
- copyRoomLink: () => console.log(`Copy link: Room ${i + 1}`),
- leaveRoom: () => console.log(`Leave: Room ${i + 1}`),
- setRoomNotifState: (state) => console.log(`Set notif state: ${state}`),
- },
+ notification: notificationData,
+ showMoreOptionsMenu: true,
+ showNotificationMenu: true,
+ moreOptionsState,
+ notificationState,
};
});
};
@@ -117,13 +115,37 @@ const meta: Meta = {
export default meta;
type Story = StoryObj;
+// Create stable unsubscribe function
+const noop = (): void => {};
+
function createMockViewModel(snapshot: T): ViewModel {
return {
getSnapshot: () => snapshot,
- subscribe: () => () => {},
+ subscribe: () => noop,
};
}
+// Create stable snapshot for RoomListViewModel
+const mockRoomListSnapshot = {
+ roomsResult: mockRoomsResult,
+ activeRoomIndex: 0,
+};
+
+// Create stable RoomListViewModel
+const mockRoomListViewModel = {
+ getSnapshot: () => mockRoomListSnapshot,
+ subscribe: () => noop,
+ onOpenRoom: (roomId: string) => console.log("Open room:", roomId),
+ onMarkAsRead: (roomId: string) => console.log("Mark as read:", roomId),
+ onMarkAsUnread: (roomId: string) => console.log("Mark as unread:", roomId),
+ onToggleFavorite: (roomId: string) => console.log("Toggle favorite:", roomId),
+ onToggleLowPriority: (roomId: string) => console.log("Toggle low priority:", roomId),
+ onInvite: (roomId: string) => console.log("Invite:", roomId),
+ onCopyRoomLink: (roomId: string) => console.log("Copy room link:", roomId),
+ onLeaveRoom: (roomId: string) => console.log("Leave room:", roomId),
+ onSetRoomNotifState: (roomId: string, state: any) => console.log("Set notification:", roomId, state),
+};
+
const baseViewModel: ViewModel = createMockViewModel({
ariaLabel: "Room list navigation",
searchVm: createMockViewModel({
@@ -142,16 +164,13 @@ const baseViewModel: ViewModel = createMockViewModel({
sort: (option) => console.log(`Sort: ${option}`),
}),
}),
- viewVm: createMockViewModel({
+ viewVm: createMockViewModel({
isLoadingRooms: false,
isRoomListEmpty: false,
filtersVm: createMockViewModel({
filters: createFilters(),
}),
- roomListVm: createMockViewModel({
- roomsResult: mockRoomsResult,
- activeRoomIndex: 0,
- }),
+ roomListVm: mockRoomListViewModel,
emptyStateTitle: "No rooms",
emptyStateDescription: "Join a room to get started",
}),
@@ -196,7 +215,7 @@ export const Loading: Story = {
ariaLabel: "Room list navigation",
searchVm: baseViewModel.getSnapshot().searchVm,
headerVm: baseViewModel.getSnapshot().headerVm,
- viewVm: createMockViewModel({
+ viewVm: createMockViewModel({
...baseViewModel.getSnapshot().viewVm.getSnapshot(),
isLoadingRooms: true,
}),
@@ -218,7 +237,7 @@ export const Empty: Story = {
ariaLabel: "Room list navigation",
searchVm: baseViewModel.getSnapshot().searchVm,
headerVm: baseViewModel.getSnapshot().headerVm,
- viewVm: createMockViewModel({
+ viewVm: createMockViewModel({
...baseViewModel.getSnapshot().viewVm.getSnapshot(),
isRoomListEmpty: true,
emptyStateTitle: "No rooms to display",
diff --git a/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.test.tsx b/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.test.tsx
index d83cbdc2f7..6239d17e86 100644
--- a/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.test.tsx
+++ b/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.test.tsx
@@ -11,12 +11,12 @@ import React from "react";
import { RoomListPanel, type RoomListPanelSnapshot } from "./RoomListPanel";
import { type ViewModel } from "../../viewmodel/ViewModel";
import { SortOption } from "../RoomListHeader";
-import type { RoomListItemViewModel } from "../RoomListItem";
+import type { RoomListItem } from "../RoomListItem";
import type { RoomListSearchSnapshot } from "../RoomListSearch";
import type { RoomListHeaderSnapshot } from "../RoomListHeader";
-import type { RoomListViewSnapshot } from "../RoomListView";
+import type { RoomListViewWrapperSnapshot } from "../RoomListView";
import type { RoomListPrimaryFiltersSnapshot } from "../RoomListPrimaryFilters";
-import type { RoomListSnapshot } from "../RoomList";
+import type { RoomListViewModel, RoomListViewSnapshot } from "../RoomList";
import type { SortOptionsMenuSnapshot } from "../RoomListHeader/SortOptionsMenu";
// Mock ResizeObserver which is used by RoomListPrimaryFilters
@@ -34,8 +34,8 @@ describe("RoomListPanel", () => {
};
}
- const mockRenderAvatar = jest.fn((roomViewModel: RoomListItemViewModel) => (
- {roomViewModel.name[0]}
+ const mockRenderAvatar = jest.fn((roomItem: RoomListItem) => (
+ {roomItem.name[0]}
));
const searchSnapshot: RoomListSearchSnapshot = {
@@ -61,22 +61,35 @@ describe("RoomListPanel", () => {
filters: [],
};
- const roomListSnapshot: RoomListSnapshot = {
+ const roomListSnapshot: RoomListViewSnapshot = {
roomsResult: {
spaceId: "!space:server",
filterKeys: undefined,
rooms: [],
},
activeRoomIndex: undefined,
- onKeyDown: undefined,
};
- const viewSnapshot: RoomListViewSnapshot = {
+ const roomListViewModel: RoomListViewModel = {
+ getSnapshot: () => roomListSnapshot,
+ subscribe: () => () => {},
+ onOpenRoom: jest.fn(),
+ onMarkAsRead: jest.fn(),
+ onMarkAsUnread: jest.fn(),
+ onToggleFavorite: jest.fn(),
+ onToggleLowPriority: jest.fn(),
+ onInvite: jest.fn(),
+ onCopyRoomLink: jest.fn(),
+ onLeaveRoom: jest.fn(),
+ onSetRoomNotifState: jest.fn(),
+ };
+
+ const viewSnapshot: RoomListViewWrapperSnapshot = {
isLoadingRooms: false,
isRoomListEmpty: false,
emptyStateTitle: "No rooms",
filtersVm: createMockViewModel(filtersSnapshot),
- roomListVm: createMockViewModel(roomListSnapshot),
+ roomListVm: roomListViewModel,
};
const mockSnapshot: RoomListPanelSnapshot = {
@@ -109,7 +122,7 @@ describe("RoomListPanel", () => {
});
it("renders loading state", () => {
- const loadingViewSnapshot: RoomListViewSnapshot = {
+ const loadingViewSnapshot: RoomListViewWrapperSnapshot = {
...viewSnapshot,
isLoadingRooms: true,
isRoomListEmpty: false,
@@ -129,7 +142,7 @@ describe("RoomListPanel", () => {
});
it("renders empty state", () => {
- const emptyViewSnapshot: RoomListViewSnapshot = {
+ const emptyViewSnapshot: RoomListViewWrapperSnapshot = {
...viewSnapshot,
isLoadingRooms: false,
isRoomListEmpty: true,
diff --git a/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.tsx b/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.tsx
index 1ef5f15910..86f4e7fdf1 100644
--- a/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.tsx
+++ b/packages/shared-components/src/room-list/RoomListPanel/RoomListPanel.tsx
@@ -12,8 +12,8 @@ import { useViewModel } from "../../useViewModel";
import { Flex } from "../../utils/Flex";
import { RoomListSearch, type RoomListSearchSnapshot } from "../RoomListSearch";
import { RoomListHeader, type RoomListHeaderSnapshot } from "../RoomListHeader";
-import { RoomListView, type RoomListViewSnapshot } from "../RoomListView";
-import { type RoomListItemViewModel } from "../RoomListItem";
+import { RoomListView, type RoomListViewWrapperSnapshot } from "../RoomListView";
+import { type RoomListItem } from "../RoomListItem";
import styles from "./RoomListPanel.module.css";
/**
@@ -27,7 +27,7 @@ export type RoomListPanelSnapshot = {
/** Header view model */
headerVm: ViewModel;
/** View model for the main content area */
- viewVm: ViewModel;
+ viewVm: ViewModel;
};
/**
@@ -37,7 +37,7 @@ export interface RoomListPanelProps extends React.HTMLAttributes {
/** The view model containing all data and callbacks */
vm: ViewModel;
/** Render function for room avatar */
- renderAvatar: (roomViewModel: RoomListItemViewModel) => ReactNode;
+ renderAvatar: (roomItem: RoomListItem) => ReactNode;
}
/**
diff --git a/packages/shared-components/src/room-list/RoomListPanel/index.tsx b/packages/shared-components/src/room-list/RoomListPanel/index.tsx
index e6a2d37f7a..69bdf8e06e 100644
--- a/packages/shared-components/src/room-list/RoomListPanel/index.tsx
+++ b/packages/shared-components/src/room-list/RoomListPanel/index.tsx
@@ -6,4 +6,4 @@
*/
export { RoomListPanel } from "./RoomListPanel";
-export type { RoomListPanelProps } from "./RoomListPanel";
+export type { RoomListPanelProps, RoomListPanelSnapshot } from "./RoomListPanel";
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListLoadingSkeleton.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListLoadingSkeleton.tsx
index e5c2aff5de..cf5e1f0953 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListLoadingSkeleton.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListLoadingSkeleton.tsx
@@ -11,7 +11,7 @@ import styles from "./RoomListView.module.css";
/**
* Loading skeleton component for the room list.
- * Displays a simple loading indicator while rooms are being fetched.
+ * Displays a repeating skeleton pattern while rooms are being fetched.
*/
export const RoomListLoadingSkeleton: React.FC = (): JSX.Element => {
return ;
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.module.css b/packages/shared-components/src/room-list/RoomListView/RoomListView.module.css
index 9e77b8023a..6baefec275 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListView.module.css
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.module.css
@@ -12,7 +12,6 @@
flex: 1;
}
-/* Skeleton animation - note: mask-image requires SVG from element-web */
.skeleton::before {
background-color: var(--cpd-color-bg-subtle-secondary);
width: 100%;
@@ -21,9 +20,5 @@
position: absolute;
mask-repeat: repeat-y;
mask-size: auto 96px;
-}
-
-/* Element-web provides the actual mask-image */
-:global(.mx_RoomListSkeleton)::before {
- mask-image: url("$(res)/img/element-icons/roomlist/room-list-item-skeleton.svg");
+ mask-image: url("./assets/skeleton.svg");
}
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx
index b7eee06b28..8a51fa51d3 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx
@@ -12,13 +12,13 @@ import { useViewModel } from "../../useViewModel";
import { RoomListPrimaryFilters, type RoomListPrimaryFiltersSnapshot } from "../RoomListPrimaryFilters";
import { RoomListLoadingSkeleton } from "./RoomListLoadingSkeleton";
import { RoomListEmptyState } from "./RoomListEmptyState";
-import { RoomList, type RoomListSnapshot } from "../RoomList";
-import { type RoomListItemViewModel } from "../RoomListItem";
+import { RoomList, type RoomListViewModel } from "../RoomList";
+import { type RoomListItem } from "../RoomListItem";
/**
* Snapshot for RoomListView
*/
-export type RoomListViewSnapshot = {
+export type RoomListViewWrapperSnapshot = {
/** Whether the rooms are currently loading */
isLoadingRooms: boolean;
/** Whether the room list is empty */
@@ -26,7 +26,7 @@ export type RoomListViewSnapshot = {
/** View model for the primary filters */
filtersVm: ViewModel;
/** View model for the room list */
- roomListVm: ViewModel;
+ roomListVm: RoomListViewModel;
/** Title for the empty state */
emptyStateTitle: string;
/** Optional description for the empty state */
@@ -40,9 +40,9 @@ export type RoomListViewSnapshot = {
*/
export interface RoomListViewProps {
/** The view model containing list data */
- vm: ViewModel;
+ vm: ViewModel;
/** Render function for room avatar */
- renderAvatar: (roomViewModel: RoomListItemViewModel) => ReactNode;
+ renderAvatar: (roomItem: RoomListItem) => ReactNode;
}
/**
diff --git a/packages/shared-components/src/room-list/RoomListView/assets/skeleton.svg b/packages/shared-components/src/room-list/RoomListView/assets/skeleton.svg
new file mode 100644
index 0000000000..adf56e4ed8
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/assets/skeleton.svg
@@ -0,0 +1,14 @@
+
diff --git a/packages/shared-components/src/room-list/RoomListView/index.tsx b/packages/shared-components/src/room-list/RoomListView/index.tsx
index bc1737ee1b..2641e80c49 100644
--- a/packages/shared-components/src/room-list/RoomListView/index.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/index.tsx
@@ -6,7 +6,7 @@
*/
export { RoomListView } from "./RoomListView";
-export type { RoomListViewProps, RoomListViewSnapshot } from "./RoomListView";
+export type { RoomListViewProps, RoomListViewWrapperSnapshot } from "./RoomListView";
export { RoomListLoadingSkeleton } from "./RoomListLoadingSkeleton";
export { RoomListEmptyState } from "./RoomListEmptyState";
export type { RoomListEmptyStateProps } from "./RoomListEmptyState";
diff --git a/packages/shared-components/tsconfig.json b/packages/shared-components/tsconfig.json
index 025901c97d..5d006cc071 100644
--- a/packages/shared-components/tsconfig.json
+++ b/packages/shared-components/tsconfig.json
@@ -1,6 +1,5 @@
{
"compilerOptions": {
- "allowImportingTsExtensions": true,
"experimentalDecorators": false,
"emitDecoratorMetadata": false,
"resolveJsonModule": true,
diff --git a/playwright/tsconfig.json b/playwright/tsconfig.json
index 442e2527b3..5f3083fd57 100644
--- a/playwright/tsconfig.json
+++ b/playwright/tsconfig.json
@@ -6,8 +6,7 @@
"resolveJsonModule": true,
"esModuleInterop": true,
"moduleResolution": "node",
- "module": "es2022",
- "allowImportingTsExtensions": true
+ "module": "es2022"
},
"include": [
"**/*.ts",
diff --git a/tsconfig.json b/tsconfig.json
index ca876bff0b..791e3a292b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,5 @@
{
"compilerOptions": {
- "allowImportingTsExtensions": true,
"experimentalDecorators": false,
"emitDecoratorMetadata": false,
"resolveJsonModule": true,