Add GeneralSettings component

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/room/PeopleDrawer.jsx

@@ -61,6 +61,7 @@ function PeopleDrawer({ roomId }) {
   const PER_PAGE_MEMBER = 50;
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
+  const canInvite = room?.canInvite(mx.getUserId());
 
   const [itemCount, setItemCount] = useState(PER_PAGE_MEMBER);
   const [membership, setMembership] = useState('join');
@@ -148,7 +149,7 @@ function PeopleDrawer({ roomId }) {
             <Text className="people-drawer__member-count" variant="b3">{`${room.getJoinedMemberCount()} members`}</Text>
           </Text>
         </TitleWrapper>
-        <IconButton onClick={() => openInviteUser(roomId)} tooltip="Invite" src={AddUserIC} />
+        <IconButton onClick={() => openInviteUser(roomId)} tooltip="Invite" src={AddUserIC} disabled={!canInvite} />
       </Header>
       <div className="people-drawer__content-wrapper">
         <div className="people-drawer__scrollable">

src/app/organisms/room/RoomSettings.jsx

@@ -1,21 +1,28 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './RoomSettings.scss';
 
+import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
+import { openInviteUser } from '../../../client/action/navigation';
+import * as roomActions from '../../../client/action/room';
 
 import Text from '../../atoms/text/Text';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import ScrollView from '../../atoms/scroll/ScrollView';
 import Tabs from '../../atoms/tabs/Tabs';
+import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
 import RoomProfile from '../../molecules/room-profile/RoomProfile';
+import RoomNotification from '../../molecules/room-notification/RoomNotification';
 
 import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
 import InfoIC from '../../../../public/res/ic/outlined/info.svg';
+import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
+import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
 
@@ -41,16 +48,53 @@ const tabItems = [{
   disabled: false,
 }];
 
+function GeneralSettings({ roomId }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const canInvite = room.canInvite(mx.getUserId());
+
+  return (
+    <>
+      <div className="room-settings__card">
+        <MenuHeader>Notification</MenuHeader>
+        <RoomNotification roomId={roomId} />
+      </div>
+      <div className="room-settings__card">
+        <MenuItem
+          disabled={!canInvite}
+          onClick={() => openInviteUser(roomId)}
+          iconSrc={AddUserIC}
+        >
+          Invite
+        </MenuItem>
+        <MenuItem variant="danger" onClick={() => roomActions.leave(roomId)} iconSrc={LeaveArrowIC}>Leave</MenuItem>
+      </div>
+    </>
+  );
+}
+
+GeneralSettings.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
 function RoomSettings({ roomId }) {
   const [, forceUpdate] = useForceUpdate();
+  const [selectedTab, setSelectedTab] = useState(tabItems[0]);
+
+  const handleTabChange = (tabItem) => {
+    setSelectedTab(tabItem);
+  };
 
   useEffect(() => {
+    let mounted = true;
     const settingsToggle = (isVisible) => {
+      if (!mounted) return;
       if (isVisible) forceUpdate();
       else setTimeout(() => forceUpdate(), 200);
     };
     navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     return () => {
+      mounted = false;
       navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     };
   }, []);
@@ -67,10 +111,9 @@ function RoomSettings({ roomId }) {
             </TitleWrapper>
           </Header>
           <RoomProfile roomId={roomId} />
-          <Tabs items={tabItems} onSelect={() => false} />
+          <Tabs items={tabItems} onSelect={handleTabChange} />
           <div className="room-settings__cards-wrapper">
-            {/* <div className="room-settings__card">
-            </div> */}
+            {selectedTab.text === tabItems[0].text && <GeneralSettings roomId={roomId} />}
           </div>
         </div>
       </ScrollView>

src/app/organisms/room/RoomSettings.scss

@@ -2,10 +2,12 @@
 
 .room-settings {
   height: 100%;
+  & .scrollbar {
+    position: relative;
+  }
 
   &__content {
     padding-bottom: calc(2 * var(--sp-extra-loose));
-    position: relative;
 
     & .room-profile {
       margin: var(--sp-extra-loose);
@@ -15,6 +17,7 @@
   & .tabs {
     position: sticky;
     top: 0;
+    z-index: 999;
     width: 100%;
     background-color: var(--bg-surface-low);
     box-shadow: 0 -4px 0 var(--bg-surface-low),
@@ -26,14 +29,19 @@
   }
   
   &__cards-wrapper {
-    padding: var(--sp-normal);
+    padding: 0 var(--sp-normal);
     @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   }
 
   &__card {
+    margin: var(--sp-normal) 0;
     background-color: var(--bg-surface);
     border-radius: var(--bo-radius);
     box-shadow: var(--bs-surface-border);
-    padding: 16px;
+    overflow: hidden;
+
+    & > .context-menu__header:first-child {
+      margin-top: 2px;
+    }
   }
 }

src/app/organisms/room/RoomView.scss

@@ -7,16 +7,15 @@
   width: 100%;
   position: absolute;
   top: 0;
-  z-index: 99;
+  z-index: 999;
   box-shadow: none;
 
-  transition: transform 200ms var(--fluid-slide-down),
-    box-shadow 200ms var(--fluid-slide-down);
+  transition: transform 200ms var(--fluid-slide-down);
 
   &--dropped {
     transform: translateY(calc(100% - var(--header-height)));
     border-radius: var(--bo-radius) var(--bo-radius) 0 0;
-    box-shadow: var(--bs-popup);
+    box-shadow: 0 0 0 1px var(--bg-surface-border);
   }
 
   &__content-wrapper {