From d87e40ada5a0d7189acead3f79befc67ee36b3b7 Mon Sep 17 00:00:00 2001
From: ajbura <ajbura@gmail.com>
Date: Sat, 19 Feb 2022 13:40:32 +0530
Subject: [PATCH] Add suggested room label in manage rooms

Signed-off-by: ajbura <ajbura@gmail.com>
---
 src/app/organisms/space-manage/SpaceManage.jsx  |  6 ++++--
 src/app/organisms/space-manage/SpaceManage.scss | 11 ++++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/app/organisms/space-manage/SpaceManage.jsx b/src/app/organisms/space-manage/SpaceManage.jsx
index c767588..dd669d0 100644
--- a/src/app/organisms/space-manage/SpaceManage.jsx
+++ b/src/app/organisms/space-manage/SpaceManage.jsx
@@ -69,10 +69,11 @@ function SpaceManageItem({
   const { directs } = initMatrix.roomList;
   const mx = initMatrix.matrixClient;
   const parentRoom = mx.getRoom(parentId);
-  const canManage = parentRoom?.currentState.maySendStateEvent('m.space.child', mx.getUserId()) || false;
-
   const isSpace = roomInfo.room_type === 'm.space';
   const roomId = roomInfo.room_id;
+  const canManage = parentRoom?.currentState.maySendStateEvent('m.space.child', mx.getUserId()) || false;
+  const isSuggested = parentRoom?.currentState.getStateEvents('m.space.child', roomId)?.getContent().suggested === true;
+
   const room = mx.getRoom(roomId);
   const isJoined = !!(room?.getMyMembership() === 'join' || null);
   const name = room?.name || roomInfo.name || roomInfo.canonical_alias || roomId;
@@ -135,6 +136,7 @@ function SpaceManageItem({
         >
           {roomAvatarJSX}
           {roomNameJSX}
+          {isSuggested && <Text variant="b2">Suggested</Text>}
         </button>
         {roomInfo.topic && expandBtnJsx}
         {
diff --git a/src/app/organisms/space-manage/SpaceManage.scss b/src/app/organisms/space-manage/SpaceManage.scss
index 6592d48..40b6065 100644
--- a/src/app/organisms/space-manage/SpaceManage.scss
+++ b/src/app/organisms/space-manage/SpaceManage.scss
@@ -106,15 +106,24 @@
   &__btn {
     @extend .cp-fx__item-one;
     display: flex;
+    align-items: center;
 
     & .avatar__border--active {
       box-shadow: none;
     }
-    & .text {
+    & > .text-b1 {
+      @extend .cp-fx__item-one;
       @extend .cp-txt__ellipsis;
       min-width: 0;
       margin: 0 var(--sp-extra-tight);
     }
+    & > .text-b2 {
+      margin: 0 var(--sp-extra-tight);
+      padding: 1px var(--sp-ultra-tight);
+      color: var(--bg-positive);
+      box-shadow: var(--bs-positive-border);
+      border-radius: 4px;
+    }
   }
 
   & .ic-btn {