Merge pull request #76 from element-hq/langley/use-sc-room-list

Use the shared components room list

Author: langleyd

package.json

@@ -20,10 +20,10 @@
         "biome:format": "yarn biome format --write ."
     },
     "dependencies": {
-        "@element-hq/web-shared-components": "0.0.1",
+        "@element-hq/web-shared-components": "0.0.2",
         "@tauri-apps/api": "^1.5.2",
         "@vector-im/compound-design-tokens": "^6.0.0",
-        "@vector-im/compound-web": "^8.2.1",
+        "@vector-im/compound-web": "^8.3.6",
         "async-mutex": "^0.4.1",
         "classnames": "^2.5.1",
         "lodash-es": "^4.17.21",

src/App.css

@@ -68,60 +68,11 @@ body {
     display: flex;
     /* this is important, to stop roomlist pushing the composer off the bottom */
     flex-direction: column;
-    flex: 0 0 auto;
+    flex: 0 0 320px;
+    width: 320px;
     border-right: 1px solid #262628;
 }
 
-.mx_RoomList ol {
-    overflow: scroll;
-    /* this is important, to stop roomlist pushing the composer off the bottom */
-    flex: 1 1 0;
-    margin: 0px;
-    padding: 0px;
-}
-
-.mx_RoomList li {
-    list-style-type: none;
-}
-
-.mx_RoomTile {
-    position: relative;
-    max-width: 300px;
-    cursor: pointer;
-    background-color: #0f0f12bf;
-    padding-top: var(--cpd-space-2x);
-    padding-bottom: var(--cpd-space-2x);
-    border-bottom: 1px solid #262628;
-}
-
-.mx_RoomTile_selected {
-    background-color: #a0a0a088;
-}
-
-.mx_RoomTile_avatar {
-    top: var(--cpd-space-2x);
-    left: var(--cpd-space-4x);
-    position: absolute;
-}
-
-.mx_RoomTile_name {
-    margin-left: var(--cpd-space-14x);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: var(--cpd-font-size-body-sm);
-    font-weight: var(--cpd-font-weight-semibold);
-    white-space: nowrap;
-}
-
-.mx_RoomTile_preview {
-    margin-left: var(--cpd-space-14x);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: var(--cpd-font-size-body-xs);
-    font-weight: var(--cpd-font-weight-normal);
-    white-space: nowrap;
-}
-
 .mx_MainPanel {
     flex: 1 1 auto;
     display: flex;

src/Client.tsx

@@ -2,9 +2,7 @@ import type React from "react";
 import "./App.css";
 import { useViewModel } from "@element-hq/web-shared-components";
 import { useClientStoreContext } from "./context/ClientStoreContext";
-import { RoomListHeader, RoomListSearch } from "./RoomList";
-import { RoomListFiltersView } from "./RoomListFiltersView";
-import { RoomListView } from "./RoomListView";
+import { RoomListHeader, RoomListSearch, RoomListView } from "./RoomList";
 import { RoomView } from "./RoomView";
 import { SidePanelView } from "./SidePanelView.tsx";
 import { SplashView } from "./SplashView.tsx";
@@ -19,17 +17,9 @@ export const Client: React.FC<ClientProps> = ({ onAddAccount }) => {
     const [clientViewModel] = useClientStoreContext();
     const { roomListViewModel, roomViewModel } = useViewModel(clientViewModel);
 
-    // Handle room changes
-    const handleRoomSelected = (roomId: string) => {
-        clientViewModel.setCurrentRoom(roomId);
-    };
-
+    // Room list view model must be available to render
     if (!roomListViewModel) return null;
 
-    console.log(
-        `roomListViewModel: ${roomListViewModel}, roomViewModel: ${roomViewModel}`,
-    );
-
     return (
         <>
             <header className="mx_Header"> </header>
@@ -42,16 +32,8 @@ export const Client: React.FC<ClientProps> = ({ onAddAccount }) => {
                 </nav>
                 <nav className="mx_RoomList">
                     <RoomListSearch />
-                    {
-                        <>
-                            <RoomListHeader />
-                            <RoomListFiltersView vm={roomListViewModel} />
-                            <RoomListView
-                                vm={roomListViewModel}
-                                onRoomSelected={handleRoomSelected}
-                            />
-                        </>
-                    }
+                    <RoomListHeader />
+                    <RoomListView vm={roomListViewModel} />
                 </nav>
                 {roomViewModel ? (
                     <RoomView roomViewModel={roomViewModel} />

src/Filter.ts

@@ -9,7 +9,7 @@ import "./RoomHeaderView.css";
 import "./viewmodel/TimelineViewModel";
 import { Avatar } from "@vector-im/compound-web";
 import type React from "react";
-import type { RoomSummary } from "./viewmodel/RoomSummary";
+import type { RoomSummary } from "./RoomList/RoomSummary";
 
 type RoomHeaderViewProps = {
     roomHeaderViewModel?: RoomSummary;