Move the local time display to a dedicated banner

src/app/organisms/room/RoomBanner.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+import Text from '../../atoms/text/Text';
+
+import './RoomBanner.scss';
+import RawIcon from '../../atoms/system-icons/RawIcon';
+
+import RecentClockIC from '../../../../public/res/ic/outlined/recent-clock.svg';
+
+import { twemojify } from '../../../util/twemojify';
+import { getUsernameOfRoomMember } from '../../../util/matrixUtil';
+
+function RoomBanner({ roomId }) {
+  const mx = initMatrix.matrixClient;
+  const isDM = initMatrix.roomList.directs.has(roomId);
+  const room = mx.getRoom(roomId);
+
+  let partnerLocalTime = null;
+  let partner = null;
+
+  if (isDM) {
+    partner = room.getAvatarFallbackMember();
+    const timezone = room.currentState.getStateEvents('in.cinny.share_timezone', partner.userId)?.event?.content?.user_timezone;
+    const date = new Date();
+
+    try {
+      partnerLocalTime = date.toLocaleTimeString([], { timeZone: timezone, hour: '2-digit', minute: '2-digit' });
+      const userTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+      // if the partner time and user time are the same, its not worth showing
+      if (userTime === partnerLocalTime) { partnerLocalTime = null; }
+    } catch {
+      partnerLocalTime = null;
+    }
+  }
+
+  return (
+    <div>
+      { isDM && partnerLocalTime ? (
+        <div className="room-view__banner">
+          <RawIcon src={RecentClockIC} size="small" />
+          <Text>
+            <b>{ twemojify(getUsernameOfRoomMember(partner)) }</b>
+            {'\'s local time is: '}
+            <b>
+              {partnerLocalTime}
+            </b>
+          </Text>
+        </div>
+      )
+        : null }
+    </div>
+  );
+}
+
+RoomBanner.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomBanner;

src/app/organisms/room/RoomBanner.scss

@@ -0,0 +1,28 @@
+@use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
+
+.room-view {
+  &__banner {
+    background-color: var(--bg-surface-low);
+    width: calc(100% - var(--sp-extra-loose));
+
+    padding: var(--sp-ultra-tight);
+    border-radius: var(--bo-radius);
+    align-items: center;
+
+    position: relative;
+    @include dir.prop(left, var(--sp-normal), unset);
+    @include dir.prop(right, unset, var(--sp-normal));
+    display: flex;
+    z-index: 999;
+    transform: translate(0%, 10%);
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 20%);
+
+    & .ic-raw {
+      opacity: 0.4;
+      margin: 0 var(--sp-extra-tight);
+    }
+    
+  }
+}

src/app/organisms/room/RoomView.jsx

@@ -12,6 +12,7 @@ import RoomViewContent from './RoomViewContent';
 import RoomViewFloating from './RoomViewFloating';
 import RoomViewInput from './RoomViewInput';
 import RoomViewCmdBar from './RoomViewCmdBar';
+import RoomBanner from './RoomBanner';
 
 const viewEvent = new EventEmitter();
 
@@ -42,6 +43,7 @@ function RoomView({ roomTimeline, eventId }) {
   return (
     <div className="room-view" ref={roomViewRef}>
       <RoomViewHeader roomId={roomId} />
+      <RoomBanner roomId={roomId} />
       <div className="room-view__content-wrapper">
         <div className="room-view__scrollable">
           <RoomViewContent

src/app/organisms/room/RoomViewHeader.jsx

@@ -36,7 +36,6 @@ function RoomViewHeader({ roomId }) {
   let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
   avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
   const roomName = mx.getRoom(roomId).name;
-  let partnerLocalTime = null;
 
   const roomHeaderBtnRef = useRef(null);
   useEffect(() => {
@@ -73,19 +72,6 @@ function RoomViewHeader({ roomId }) {
     );
   };
 
-  if (isDM) {
-    const room = mx.getRoom(roomId);
-    const partner = room.getAvatarFallbackMember();
-    const timezone = room.currentState.getStateEvents('in.cinny.share_timezone', partner.userId)?.event?.content?.user_timezone;
-    const date = new Date();
-
-    try {
-      partnerLocalTime = date.toLocaleTimeString([], { timeZone: timezone, hour: '2-digit', minute: '2-digit' });
-    } catch {
-      partnerLocalTime = null;
-    }
-  }
-
   return (
     <Header>
       <IconButton
@@ -107,7 +93,6 @@ function RoomViewHeader({ roomId }) {
         </TitleWrapper>
         <RawIcon src={ChevronBottomIC} />
       </button>
-      <Text>{partnerLocalTime}</Text>
       <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />
       <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton className="room-header__members-btn" onClick={() => toggleRoomSettings(tabText.MEMBERS)} tooltip="Members" src={UserIC} />