Add a globe icon to public rooms

For https://github.com/vector-im/riot-web/issues/14039

res/css/views/rooms/_RoomTile2.scss

@@ -32,6 +32,31 @@ limitations under the License.
 
     .mx_RoomTile2_avatarContainer {
         margin-right: 8px;
+        position: relative;
+
+        .mx_RoomTile2_publicRoom {
+            width: 12px;
+            height: 12px;
+            border-radius: 12px;
+            background-color: $roomlist2-bg-color; // to match the room list itself
+            position: absolute;
+            bottom: 0;
+            right: 0;
+
+            &::before {
+                content: '';
+                width: 8px;
+                height: 8px;
+                top: 2px;
+                left: 2px;
+                position: absolute;
+                mask-position: center;
+                mask-size: contain;
+                mask-repeat: no-repeat;
+                background: $primary-fg-color;
+                mask-image: url('$(res)/img/globe.svg');
+            }
+        }
     }
 
     .mx_RoomTile2_nameContainer {

res/img/globe.svg

@@ -0,0 +1,6 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<path id="sea" fill-rule="evenodd" clip-rule="evenodd" d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM4.6693 2.43613C4.8306 2.64728 4.94732 2.80007 4.45289 2.80007C4.14732 2.80007 3.84175 2.74171 3.58076 2.69186C3.15847 2.61121 2.85289 2.55285 2.85289 2.80007C2.85289 3.00007 3.65289 3.40007 4.45289 3.80007C5.25289 4.20007 6.05289 4.60007 6.05289 4.80007C6.05289 5.20007 6.05289 7.60007 5.25289 7.20007C4.45289 6.80007 2.45289 5.20007 2.45289 4.80007C2.45289 4.65277 2.18168 4.39698 1.85897 4.09263C1.30535 3.57051 0.600192 2.90547 0.852893 2.40007C1.25289 1.60007 2.85289 6.51479e-05 5.25289 0.800065C4.98623 1.06673 4.45289 1.68007 4.45289 2.00007C4.45289 2.15285 4.56961 2.30564 4.6693 2.43613Z" fill="#2E2F32"/>
+<path id="earth" d="M4.45294 2.80007C5.25294 2.80007 4.45294 2.40007 4.45294 2.00007C4.45294 1.68007 4.98627 1.06673 5.25294 0.800065C2.85294 6.51479e-05 1.25294 1.60007 0.852941 2.40007C0.452941 3.20007 2.45294 4.40007 2.45294 4.80007C2.45294 5.20007 4.45294 6.80007 5.25294 7.20007C6.05294 7.60007 6.05294 5.20007 6.05294 4.80007C6.05294 4.40007 2.85294 3.20007 2.85294 2.80007C2.85294 2.40007 3.65294 2.80007 4.45294 2.80007Z" />
+</g>
+</svg>

src/components/views/rooms/RoomSublist2.tsx

@@ -145,6 +145,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                         key={`room-${room.roomId}`}
                         showMessagePreview={this.props.layout.showPreviews}
                         isMinimized={this.props.isMinimized}
+                        tag={this.props.layout.tagId}
                     />
                 );
             }

src/components/views/rooms/RoomTile2.tsx

@@ -44,6 +44,7 @@ interface IProps {
     room: Room;
     showMessagePreview: boolean;
     isMinimized: boolean;
+    tag: TagID;
 
     // TODO: Allow falsifying counts (for invites and stuff)
     // TODO: Transparency? Was this ever used?
@@ -85,6 +86,12 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
     }
 
+    private get isPublicRoom(): boolean {
+        const joinRules = this.props.room.currentState.getStateEvents("m.room.join_rules", "");
+        const joinRule = joinRules && joinRules.getContent().join_rule;
+        return joinRule === 'public';
+    }
+
     public componentWillUnmount() {
         if (this.props.room) {
             ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
@@ -287,6 +294,11 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         );
         if (this.props.isMinimized) nameContainer = null;
 
+        let globe = null;
+        if (this.isPublicRoom && this.props.tag !== DefaultTagID.DM) {
+            globe = <span className='mx_RoomTile2_publicRoom' />; // sizing and such set by CSS
+        }
+
         const avatarSize = 32;
         return (
             <React.Fragment>
@@ -304,6 +316,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
                         >
                             <div className="mx_RoomTile2_avatarContainer">
                                 <RoomAvatar room={this.props.room} width={avatarSize} height={avatarSize}/>
+                                {globe}
                             </div>
                             {nameContainer}
                             <div className="mx_RoomTile2_badgeContainer">