Add room topic

src/app/organisms/room/RoomViewHeader.scss

@@ -3,9 +3,8 @@
 @use "../../partials/screen";
 
 .room-header__btn {
-  min-width: 0;
   @extend .cp-fx__row--s-c;
-  @include dir.side(margin, 0, auto);
+  @include dir.side(margin, 0, var(--sp-extra-tight));
   border-radius: var(--bo-radius);
   cursor: pointer;
 
@@ -27,21 +26,54 @@
   }
 }
 
+.room-header__topic {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  @include dir.side(margin, 0, auto);
+
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
 .room-header__drawer-btn {
+  flex: 0;
+
   @include screen.smallerThan(tabletBreakpoint) {
     display: none;
   }
 }
+
 .room-header__members-btn {
+  flex: 0;
+
   @include screen.biggerThan(tabletBreakpoint) {
     display: none;
   }
 }
 
 .room-header__back-btn {
+  flex: 0;
+
   @include dir.side(margin, 0, var(--sp-tight));
 
   @include screen.biggerThan(mobileBreakpoint) {
     display: none;
   }
 }
+
+.room-header__left {
+  display: flex;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.room-header__right {
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+  min-width: 0;
+}

src/app/organisms/room/RoomViewHeader.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef } from "react";
-import PropTypes from "prop-types";
 import "./RoomViewHeader.scss";
 
 import { twemojify } from "../../../util/twemojify";
@@ -33,16 +32,26 @@ import BackArrowIC from "../../../../public/res/ic/outlined/chevron-left.svg";
 
 import { useForceUpdate } from "../../hooks/useForceUpdate";
 
-function RoomViewHeader({ roomId }) {
+interface RoomViewHeaderProps {
+  roomId: string;
+}
+
+function RoomViewHeader({ roomId }: RoomViewHeaderProps) {
   const [, forceUpdate] = useForceUpdate();
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
   const room = mx.getRoom(roomId);
   let avatarSrc = room.getAvatarUrl(mx.baseUrl, 36, 36, "crop");
   avatarSrc = isDM
-    ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, "crop")
+    ? room
+        .getAvatarFallbackMember()
+        ?.getAvatarUrl(mx.baseUrl, 36, 36, "crop", true, false)
     : avatarSrc;
-  const roomName = room.name;
+  const { name: roomName, currentState } = room;
+
+  const roomTopic = currentState
+    .getStateEvents("m.room.topic")[0]
+    ?.getContent().topic;
 
   const roomHeaderBtnRef = useRef(null);
   useEffect(() => {
@@ -89,6 +98,7 @@ function RoomViewHeader({ roomId }) {
 
   return (
     <Header>
+      <div class="room-header__left">
         <IconButton
           src={BackArrowIC}
           className="room-header__back-btn"
@@ -115,6 +125,15 @@ function RoomViewHeader({ roomId }) {
           </TitleWrapper>
           <RawIcon src={ChevronBottomIC} />
         </button>
+
+        <div className="room-header__topic">
+          {roomTopic && (
+            <Text variant="b2">{twemojify(roomTopic, undefined, true)}</Text>
+          )}
+        </div>
+      </div>
+
+      <div class="room-header__right">
         {mx.isRoomEncrypted(roomId) === false && (
           <IconButton
             onClick={() => toggleRoomSettings(tabText.SEARCH)}
@@ -139,11 +158,9 @@ function RoomViewHeader({ roomId }) {
           tooltip="Options"
           src={VerticalMenuIC}
         />
+      </div>
     </Header>
   );
 }
-RoomViewHeader.propTypes = {
-  roomId: PropTypes.string.isRequired,
-};
 
 export default RoomViewHeader;

tsconfig.json

@@ -7,7 +7,12 @@
     "esModuleInterop": true,
     "moduleResolution": "Node",
     "outDir": "dist",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@": ["src/*"]
+    }
   },
   "exclude": ["node_modules", "dist"],
   "include": ["src"]

vite.config.js

@@ -5,6 +5,7 @@ import { viteStaticCopy } from "vite-plugin-static-copy";
 import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
 import inject from "@rollup/plugin-inject";
 import { svgLoader } from "./viteSvgLoader";
+import path from "path";
 
 const copyFiles = {
   targets: [
@@ -35,6 +36,11 @@ export default defineConfig({
     port: 8080,
     host: true,
   },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
   plugins: [viteStaticCopy(copyFiles), svgLoader(), wasm(), react()],
   optimizeDeps: {
     esbuildOptions: {