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

Author: florianduros

package.json

@@ -20,7 +20,7 @@
         "biome:format": "yarn biome format --write ."
     },
     "dependencies": {
-        "@element-hq/web-shared-components": "0.0.0-test.12",
+        "@element-hq/web-shared-components": "0.0.1",
         "@tauri-apps/api": "^1.5.2",
         "@vector-im/compound-design-tokens": "^6.0.0",
         "@vector-im/compound-web": "^8.2.1",

src/App.css

@@ -24,15 +24,6 @@ body {
     color: var(--cpd-color-text-primary);
 }
 
-.mx_LoadingSession {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-}
-
 /* room for the tauri window header */
 .mx_Header {
     flex: 0 0 auto;

src/App.tsx

@@ -1,24 +1,32 @@
 import type React from "react";
-import type { ReactNode } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 import "./App.css";
+import {
+    type I18nApi,
+    I18nContext,
+    useViewModel,
+} from "@element-hq/web-shared-components";
 import { InlineSpinner } from "@vector-im/compound-web";
-import { useViewModel } from "@element-hq/web-shared-components";
 import { Client } from "./Client.tsx";
 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 { ClientState } from "./viewmodel/client-view.types";
+import { createI18nApi } from "./utils/i18nApi.ts";
 import { ClientViewModel } from "./viewmodel/ClientViewModel";
+import { ClientState } from "./viewmodel/client-view.types";
 
 console.log("running App.tsx");
 
 const App: React.FC = () => {
     const [clientViewModel, setClientViewModel] = useClientStoreContext();
     const [, addClientStore] = useClientStoresContext();
     const sessionStore = useSessionStoreContext();
+    const i18nApi = useI18nApi();
 
     // Check if we're on the OIDC callback route
     const isOidcCallback = window.location.pathname === "/oidc/callback";
@@ -38,10 +46,9 @@ const App: React.FC = () => {
         clientState === ClientState.LoadingSession
     ) {
         component = (
-            <div className="mx_LoadingSession">
-                <InlineSpinner size={32} />
+            <LoadingScreen>
                 <h2>Loading Session...</h2>
-            </div>
+            </LoadingScreen>
         );
     } else if (clientState === ClientState.SettingUpEncryption) {
         component = encryptionViewModel ? (
@@ -76,7 +83,34 @@ const App: React.FC = () => {
         ) : null;
     }
 
-    return <div className="mx_App">{component}</div>;
+    if (!i18nApi) {
+        return (
+            <div className="mx_App">
+                <LoadingScreen>Loading translations</LoadingScreen>
+            </div>
+        );
+    }
+    return (
+        <div className="mx_App">
+            <I18nContext.Provider value={i18nApi}>
+                {component}
+            </I18nContext.Provider>
+        </div>
+    );
 };
 
 export default App;
+
+/**
+ * A  hook that initializes and provides an I18n API instance.
+ * @returns
+ */
+function useI18nApi(): I18nApi | undefined {
+    const [i18nApi, setI18nApi] = useState<I18nApi>();
+
+    useEffect(() => {
+        createI18nApi().then((api) => setI18nApi(api));
+    }, []);
+
+    return i18nApi;
+}

src/Client.tsx

@@ -5,10 +5,10 @@ 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 { RoomListFiltersView } from "./RoomListFiltersView";
 import { RoomListHeaderView } from "./RoomListHeaderView";
 import { RoomListView } from "./RoomListView";
-import { RoomSearchView } from "./RoomSearchView";
 import { RoomView } from "./RoomView";
 import { SidePanelView } from "./SidePanelView.tsx";
 import { SplashView } from "./SplashView.tsx";
@@ -47,7 +47,7 @@ export const Client: React.FC<ClientProps> = ({ onAddAccount }) => {
                     />
                 </nav>
                 <nav className="mx_RoomList">
-                    <RoomSearchView />
+                    <RoomListSearch />
                     {
                         <>
                             <RoomListHeaderView />

src/LoadingScreen/LoadingScreen.module.css

@@ -0,0 +1,4 @@
+.container {
+    width: 100%;
+    height: 100%;
+}

src/LoadingScreen/LoadingScreen.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 { Flex } from "@element-hq/web-shared-components";
+import { InlineSpinner } from "@vector-im/compound-web";
+import type { PropsWithChildren } from "react";
+import styles from "./LoadingScreen.module.css";
+
+export function LoadingScreen({ children }: PropsWithChildren) {
+    return (
+        <Flex
+            className={styles.container}
+            direction="column"
+            align="center"
+            justify="center"
+        >
+            <InlineSpinner size={32} />
+            {children}
+        </Flex>
+    );
+}

src/RoomList/RoomListSearch.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 {
+    RoomListSearchView,
+    useCreateAutoDisposedViewModel,
+} from "@element-hq/web-shared-components";
+import { RoomListSearchViewModel } from "./RoomListSearchViewModel";
+
+export function RoomListSearch() {
+    const vm = useCreateAutoDisposedViewModel(
+        () => new RoomListSearchViewModel(),
+    );
+
+    return <RoomListSearchView vm={vm} />;
+}

src/RoomList/RoomListSearchViewModel.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 RoomListSearchViewSnapshot,
+    type RoomListSearchViewModel as RoomListSearchViewModelInterface,
+} from "@element-hq/web-shared-components";
+
+export class RoomListSearchViewModel
+    extends BaseViewModel<RoomListSearchViewSnapshot, null>
+    implements RoomListSearchViewModelInterface
+{
+    constructor() {
+        super(null, {
+            displayDialButton: true,
+            displayExploreButton: true,
+            searchShortcut: "⌘ K",
+        });
+    }
+
+    onSearchClick(): void {
+        // Implement search click handling logic here
+    }
+
+    onExploreClick(): void {
+        // Implement explore click handling logic here
+    }
+
+    onDialPadClick(): void {
+        // Implement dial pad click handling logic here
+    }
+}

src/RoomList/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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 { RoomListSearch } from "./RoomListSearch";