Merge pull request #75 from element-hq/florianduros/room-list-header-sc

Author: florianduros

src/App.tsx

@@ -6,16 +6,15 @@ import {
     I18nContext,
     useViewModel,
 } from "@element-hq/web-shared-components";
-import { InlineSpinner } from "@vector-im/compound-web";
+import { TooltipProvider } from "@vector-im/compound-web";
 import { Client } from "./Client.tsx";
+import { useClientStoreContext } from "./context/ClientStoreContext";
+import { useClientStoresContext } from "./context/ClientStoresContext";
+import { useSessionStoreContext } from "./context/SessionStoreContext";
 import { Encryption } from "./Encryption.tsx";
 import { LoadingScreen } from "./LoadingScreen/LoadingScreen.tsx";
 import { Login } from "./Login.tsx";
 import { OidcCallback } from "./OidcCallback.tsx";
-import { I18nTest } from "./components/I18nTest.tsx";
-import { useClientStoreContext } from "./context/ClientStoreContext";
-import { useClientStoresContext } from "./context/ClientStoresContext";
-import { useSessionStoreContext } from "./context/SessionStoreContext";
 import { createI18nApi } from "./utils/i18nApi.ts";
 import { ClientViewModel } from "./viewmodel/ClientViewModel";
 import { ClientState } from "./viewmodel/client-view.types";
@@ -93,7 +92,7 @@ const App: React.FC = () => {
     return (
         <div className="mx_App">
             <I18nContext.Provider value={i18nApi}>
-                {component}
+                <TooltipProvider>{component}</TooltipProvider>
             </I18nContext.Provider>
         </div>
     );

src/Client.tsx

@@ -1,19 +1,13 @@
 import type React from "react";
-import { useEffect } from "react";
 import "./App.css";
 import { useViewModel } from "@element-hq/web-shared-components";
-import { Composer } from "./Composer.tsx";
-import MemberListView from "./MemberList/MemberListView.tsx";
-import { RoomHeaderView } from "./RoomHeaderView";
-import { RoomListSearch } from "./RoomList";
+import { useClientStoreContext } from "./context/ClientStoreContext";
+import { RoomListHeader, RoomListSearch } from "./RoomList";
 import { RoomListFiltersView } from "./RoomListFiltersView";
-import { RoomListHeaderView } from "./RoomListHeaderView";
 import { RoomListView } from "./RoomListView";
 import { RoomView } from "./RoomView";
 import { SidePanelView } from "./SidePanelView.tsx";
 import { SplashView } from "./SplashView.tsx";
-import { Timeline } from "./Timeline.tsx";
-import { useClientStoreContext } from "./context/ClientStoreContext";
 
 console.log("running Client.tsx");
 
@@ -50,7 +44,7 @@ export const Client: React.FC<ClientProps> = ({ onAddAccount }) => {
                     <RoomListSearch />
                     {
                         <>
-                            <RoomListHeaderView />
+                            <RoomListHeader />
                             <RoomListFiltersView vm={roomListViewModel} />
                             <RoomListView
                                 vm={roomListViewModel}

src/RoomList/RoomListHeader.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+import {
+    RoomListHeaderView,
+    useCreateAutoDisposedViewModel,
+} from "@element-hq/web-shared-components";
+import { RoomListHeaderViewModel } from "./RoomListHeaderViewModel";
+
+export function RoomListHeader() {
+    const vm = useCreateAutoDisposedViewModel(
+        () => new RoomListHeaderViewModel(),
+    );
+
+    return <RoomListHeaderView vm={vm} />;
+}

src/RoomList/RoomListHeaderViewModel.ts

@@ -0,0 +1,67 @@
+/*
+ * 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.
+ */
+
+import {
+    BaseViewModel,
+    type RoomListHeaderViewModel as RoomListHeaderViewModelInterface,
+    type RoomListHeaderViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+export class RoomListHeaderViewModel
+    extends BaseViewModel<RoomListHeaderViewSnapshot, null>
+    implements RoomListHeaderViewModelInterface
+{
+    constructor() {
+        super(null, {
+            title: "Chats",
+            displayComposeMenu: true,
+            displaySpaceMenu: false,
+            canCreateRoom: true,
+            canCreateVideoRoom: true,
+            canInviteInSpace: true,
+            canAccessSpaceSettings: false,
+            activeSortOption: "recent",
+            isMessagePreviewEnabled: false,
+        });
+    }
+
+    createChatRoom(): void {
+        // TODO: Implement create chat room logic here
+    }
+
+    createRoom(): void {
+        // TODO: Implement create room logic here
+    }
+
+    createVideoRoom(): void {
+        // TODO: Implement create video room logic here
+    }
+
+    openSpaceHome(): void {
+        // TODO: Implement open space home logic here
+    }
+
+    inviteInSpace(): void {
+        // TODO: Implement invite in space logic here
+    }
+
+    openSpacePreferences(): void {
+        // TODO: Implement open space preferences logic here
+    }
+
+    openSpaceSettings(): void {
+        // TODO: Implement open space settings logic here
+    }
+
+    sort(): void {
+        // TODO: Implement sort logic here
+    }
+
+    toggleMessagePreview(): void {
+        // TODO: Implement toggle message preview logic here
+    }
+}

src/RoomList/index.ts

@@ -5,4 +5,5 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+export { RoomListHeader } from "./RoomListHeader";
 export { RoomListSearch } from "./RoomListSearch";