Add member list in space settings

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

src/app/organisms/room/PeopleDrawer.scss

@@ -30,7 +30,7 @@
       --search-input-height: 40px;
       min-height: var(--search-input-height);
   
-      margin: 0 var(--sp-normal);
+      margin: 0 var(--sp-extra-tight);
 
       position: relative;
       bottom: var(--sp-normal);
@@ -54,7 +54,7 @@
         flex: 1;
       }
       & .input {
-        padding: 0 calc(var(--sp-loose) + var(--sp-normal));
+        padding: 0 44px;
         height: var(--search-input-height);
       }
     }
@@ -65,6 +65,12 @@
   padding-top: var(--sp-extra-tight);
   padding-bottom: calc(2 * var(--sp-normal));
   
+  & .people-selector {
+    padding: var(--sp-extra-tight);
+    border-radius: var(--bo-radius);
+    @include dir.side(margin, var(--sp-extra-tight), 0);
+  }
+  
   & .segmented-controls {
     display: flex;
     margin-bottom: var(--sp-extra-tight);

src/app/organisms/room/RoomSettings.jsx

@@ -24,7 +24,9 @@ import RoomAliases from '../../molecules/room-aliases/RoomAliases';
 import RoomHistoryVisibility from '../../molecules/room-history-visibility/RoomHistoryVisibility';
 import RoomEncryption from '../../molecules/room-encryption/RoomEncryption';
 import RoomPermissions from '../../molecules/room-permissions/RoomPermissions';
+import RoomMembers from '../../molecules/room-members/RoomMembers';
 
+import UserIC from '../../../../public/res/ic/outlined/user.svg';
 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';
@@ -38,6 +40,7 @@ import { useForceUpdate } from '../../hooks/useForceUpdate';
 const tabText = {
   GENERAL: 'General',
   SEARCH: 'Search',
+  MEMBERS: 'Members',
   PERMISSIONS: 'Permissions',
   SECURITY: 'Security',
 };
@@ -50,6 +53,10 @@ const tabItems = [{
   iconSrc: SearchIC,
   text: tabText.SEARCH,
   disabled: false,
+}, {
+  iconSrc: UserIC,
+  text: tabText.MEMBERS,
+  disabled: false,
 }, {
   iconSrc: ShieldUserIC,
   text: tabText.PERMISSIONS,
@@ -182,6 +189,7 @@ function RoomSettings({ roomId }) {
           <div className="room-settings__cards-wrapper">
             {selectedTab.text === tabText.GENERAL && <GeneralSettings roomId={roomId} />}
             {selectedTab.text === tabText.SEARCH && <RoomSearch roomId={roomId} />}
+            {selectedTab.text === tabText.MEMBERS && <RoomMembers roomId={roomId} />}
             {selectedTab.text === tabText.PERMISSIONS && <RoomPermissions roomId={roomId} />}
             {selectedTab.text === tabText.SECURITY && <SecuritySettings roomId={roomId} />}
           </div>

src/app/organisms/room/RoomSettings.scss

@@ -75,6 +75,7 @@
 
 .room-settings .room-permissions__card,
 .room-settings .room-search__form,
-.room-settings .room-search__result-item {
+.room-settings .room-search__result-item ,
+.room-settings .room-members {
   @extend .room-settings__card;
 }

src/app/organisms/space-settings/SpaceSettings.jsx

@@ -18,7 +18,9 @@ import RoomProfile from '../../molecules/room-profile/RoomProfile';
 import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
 import RoomAliases from '../../molecules/room-aliases/RoomAliases';
 import RoomPermissions from '../../molecules/room-permissions/RoomPermissions';
+import RoomMembers from '../../molecules/room-members/RoomMembers';
 
+import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
@@ -30,6 +32,7 @@ import { useForceUpdate } from '../../hooks/useForceUpdate';
 
 const tabText = {
   GENERAL: 'General',
+  MEMBERS: 'Members',
   PERMISSIONS: 'Permissions',
 };
 
@@ -37,6 +40,10 @@ const tabItems = [{
   iconSrc: SettingsIC,
   text: tabText.GENERAL,
   disabled: false,
+}, {
+  iconSrc: UserIC,
+  text: tabText.MEMBERS,
+  disabled: false,
 }, {
   iconSrc: ShieldUserIC,
   text: tabText.PERMISSIONS,
@@ -144,6 +151,7 @@ function SpaceSettings() {
           />
           <div className="space-settings__cards-wrapper">
             {selectedTab.text === tabText.GENERAL && <GeneralSettings roomId={roomId} />}
+            {selectedTab.text === tabText.MEMBERS && <RoomMembers roomId={roomId} />}
             {selectedTab.text === tabText.PERMISSIONS && <RoomPermissions roomId={roomId} />}
           </div>
         </div>

src/app/organisms/space-settings/SpaceSettings.scss

@@ -35,6 +35,7 @@
   }
 }
 
-.space-settings .room-permissions__card {
+.space-settings .room-permissions__card,
+.space-settings .room-members {
   @extend .space-settings__card;
 }