Add suggested room label in manage rooms

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

diff --git a/src/app/organisms/space-manage/SpaceManage.jsx b/src/app/organisms/space-manage/SpaceManage.jsx
index c7675882e08092354c19575b2186535a030975c3..dd669d0376211cf96c383ccd24fce3ed358f78b9 100644 (file)
--- 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 6592d4842635c5c3d6e7d7842739bbbb840bf359..40b60656b7ec416fb8b35c60f305114cf51c2e01 100644 (file)
--- 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 {