finishing touches, all seems to work

src/views/messages-view.jsx

@@ -362,7 +362,6 @@ class MessagesView extends React.Component {
             peerMessagingDisabled: false
           });
         }
-        console.log("getDerivedStateFromProps", nextProps.topic, prevState.topic);
         Object.assign(nextState, {
           minSeqId: topic.minMsgSeq(),
           maxSeqId: topic.maxMsgSeq(),
@@ -1634,13 +1633,16 @@ class MessagesView extends React.Component {
                 }<ContactBadges badges={icon_badges} /></div>
                 <div id="topic-last-seen">{lastSeen}</div>
               </div>
-              <PinnedMessages
-                tinode={this.props.tinode}
-                messages={pinnedMessages}
-                selected={this.state.selectedPin}
-                setSelected={index => this.setState({selectedPin: index})}
-                onSelected={this.handleQuoteClick}
-                onCancel={this.handleUnpinMessage} />
+              {!this.props.displayMobile ?
+                <PinnedMessages
+                  tinode={this.props.tinode}
+                  messages={pinnedMessages}
+                  selected={this.state.selectedPin}
+                  isAdmin={this.state.isAdmin}
+                  setSelected={index => this.setState({selectedPin: index})}
+                  onSelected={this.handleQuoteClick}
+                  onCancel={this.handleUnpinMessage} />
+                : null}
               {groupTopic ?
                 <GroupSubs
                   tinode={this.props.tinode}
@@ -1654,10 +1656,20 @@ class MessagesView extends React.Component {
               </div>
             </div>
             {this.props.displayMobile ?
-              <ErrorPanel
-                level={this.props.errorLevel}
-                text={this.props.errorText}
-                onClearError={this.props.onError} />
+              <>
+                <PinnedMessages
+                  tinode={this.props.tinode}
+                  messages={pinnedMessages}
+                  selected={this.state.selectedPin}
+                  isAdmin={this.state.isAdmin}
+                  setSelected={index => this.setState({selectedPin: index})}
+                  onSelected={this.handleQuoteClick}
+                  onCancel={this.handleUnpinMessage} />
+                <ErrorPanel
+                  level={this.props.errorLevel}
+                  text={this.props.errorText}
+                  onClearError={this.props.onError} />
+              </>
               : null}
             <LoadSpinner show={this.state.fetchingMessages} />
             {messagesComponent}

src/widgets/pinned-messages.jsx

@@ -36,7 +36,6 @@ class PinnedMessages extends React.PureComponent {
     e.stopPropagation();
     const idx = Math.max(this.props.selected - 1, 0);
     if (idx != this.props.selected) {
-      console.log("Move selection to ", idx);
       this.props.setSelected(idx);
     }
   }
@@ -46,7 +45,6 @@ class PinnedMessages extends React.PureComponent {
     e.stopPropagation();
     const idx = Math.min(this.props.selected + 1, (this.props.messages || []).length - 1);
     if (idx != this.props.selected) {
-      console.log("Move selection to ", idx);
       this.props.setSelected(idx);
     }
   }
@@ -67,9 +65,12 @@ class PinnedMessages extends React.PureComponent {
 
     return shown ?
       (<div id="pinned-wrapper">
-        <div className="cancel">
-          <a href="#" onClick={this.handleCancel}><i className="material-icons gray">close</i></a>
-        </div>
+        {this.props.isAdmin ?
+          <div className="cancel">
+            <a href="#" onClick={this.handleCancel}><i className="material-icons gray">close</i></a>
+          </div> :
+          <div><i className="material-icons gray">push_pin</i></div>
+        }
         <div className="pinned-scroll">{dots}</div>
         <div className="pinned" onClick={this.handleSelected}>{shown}</div>
         {selected > 0 ?