more or less complete

css/base.css

@@ -332,6 +332,10 @@ li:hover .menuTrigger a {
   color: #757575;
 }
 
+ul.contact-box .menuTrigger {
+  background-image: radial-gradient(#eceff1 40%, transparent 75%);
+}
+
 li.left:hover .menuTrigger {
   background-image: radial-gradient(#c5e1a5 40%, transparent 75%);
 }
@@ -339,6 +343,10 @@ li.right:hover .menuTrigger {
   background-image: radial-gradient(#fafafa 40%, transparent 75%);
 }
 
+li.selected .menuTrigger {
+  background-image: radial-gradient(#cfd8dc 40%, transparent 75%);
+}
+
 /* END popup/dropdown menu */
 
 /* Begin Alert: modal window with message and buttons. */
@@ -610,6 +618,7 @@ div.trusted-badge {
 .in-place-edit.disabled {
   border-bottom: none;
   cursor: default;
+  color: #888;
 }
 
 .in-place-edit.placeholder {
@@ -881,6 +890,12 @@ i.search {
   background: linear-gradient(to right, transparent 3.5rem, #eee 1px, #eee 100%) 0 100% / 100% 1px no-repeat, #fff;
   overflow-x: hidden;
 }
+
+.contact-box.small > li {
+  padding: 0.25rem 0.25rem 0.35rem 0.35rem;
+  min-height: 2.5rem;
+}
+
 .contact-box > li:last-child {
   /* remove border from the last contact */
   background: #fff;
@@ -939,6 +954,19 @@ i.search {
   height: 3rem;
   border-radius: 50%;
 }
+
+.contact-box.small .avatar-box {
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  font-size: 1.2rem;
+}
+.contact-box.small .avatar {
+  width: 2rem;
+  height: 2rem;
+}
+
 .contact-box .avatar-box > .material-icons {
   display: flex;
   flex-direction: column;
@@ -946,6 +974,10 @@ i.search {
   font-size: 2.4rem;
   line-height: 3rem;
 }
+.contact-box.small .avatar-box > .material-icons {
+  font-size: 1.6rem;
+  line-height: 2rem;
+}
 .contact-box .text-box {
   display: flex;
   flex-direction: column;
@@ -965,13 +997,19 @@ i.search {
   cursor: pointer;
 }
 
-.contact-box img.channel {
+img.channel {
   width: 1rem;
   height: 1rem;
   vertical-align: middle;
   margin-left: 0.3rem;
 }
 
+.large img.channel {
+  width: 1.35rem;
+  height: 1.35rem;
+  margin-left: 0.5rem;
+}
+
 /* Online-offline indicator positioned inside avatar-box */
 .avatar-box .online, .offline {
   position: absolute;

src/i18n/de.json

@@ -1210,7 +1210,7 @@
   },
   "title_tag_manager": {
     "translation": "Schlagworte (Nutzer entdecken)",
-    "defaultMessage": "Tags (user discovery)",
+    "defaultMessage": "Tags (search & discovery)",
     "description": "Section title for TagManager",
     "missing": false,
     "obsolete": false
@@ -1319,5 +1319,19 @@
     "description": "Title for managing group members view.",
     "missing": false,
     "obsolete": false
+  },
+  "permissions_anonymous": {
+    "translation": "",
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions",
+    "missing": true,
+    "obsolete": false
+  },
+  "permissions_authenticated": {
+    "translation": "",
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1209,8 +1209,8 @@
     "obsolete": false
   },
   "title_tag_manager": {
-    "translation": "Tags (user discovery)",
+    "translation": "Tags (search & discovery)",
-    "defaultMessage": "Tags (user discovery)",
+    "defaultMessage": "Tags (search & discovery)",
     "description": "Section title for TagManager",
     "missing": false,
     "obsolete": false
@@ -1340,5 +1340,19 @@
     "description": "Title for InfoView",
     "missing": false,
     "obsolete": false
+  },
+  "permissions_anonymous": {
+    "translation": "Anonymous",
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions",
+    "missing": false,
+    "obsolete": false
+  },
+  "permissions_authenticated": {
+    "translation": "Authenticated",
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1210,7 +1210,7 @@
   },
   "title_tag_manager": {
     "translation": "Etiquetas (descubrimiento de usuarios)",
-    "defaultMessage": "Tags (user discovery)",
+    "defaultMessage": "Tags (search & discovery)",
     "description": "Section title for TagManager",
     "missing": false,
     "obsolete": false
@@ -1340,5 +1340,19 @@
     "description": "Title for InfoView",
     "missing": true,
     "obsolete": false
+  },
+  "permissions_anonymous": {
+    "translation": "",
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions",
+    "missing": true,
+    "obsolete": false
+  },
+  "permissions_authenticated": {
+    "translation": "",
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -561,6 +561,14 @@
     "defaultMessage": "Write ({val})",
     "description": "Name of W permission"
   },
+  "permissions_anonymous": {
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions"
+  },
+  "permissions_authenticated": {
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions"
+  },
   "phone_dative": {
     "defaultMessage": "phone",
     "description": "Dative case of 'phone', i.e. 'phone' in 'by phone'"
@@ -698,7 +706,7 @@
     "description": "Section title"
   },
   "title_tag_manager": {
-    "defaultMessage": "Tags (user discovery)",
+    "defaultMessage": "Tags (search & discovery)",
     "description": "Section title for TagManager"
   },
   "topic_block_warning": {

src/i18n/ko.json

@@ -1210,7 +1210,7 @@
   },
   "title_tag_manager": {
     "translation": "태그(사용자검색)",
-    "defaultMessage": "Tags (user discovery)",
+    "defaultMessage": "Tags (search & discovery)",
     "description": "Section title for TagManager",
     "missing": false,
     "obsolete": false
@@ -1350,5 +1350,19 @@
     "description": "Title for InfoView",
     "missing": true,
     "obsolete": false
+  },
+  "permissions_anonymous": {
+    "translation": "",
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions",
+    "missing": true,
+    "obsolete": false
+  },
+  "permissions_authenticated": {
+    "translation": "",
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1210,7 +1210,7 @@
   },
   "title_tag_manager": {
     "translation": "Tag-uri (user discovery)",
-    "defaultMessage": "Tags (user discovery)",
+    "defaultMessage": "Tags (search & discovery)",
     "description": "Section title for TagManager",
     "missing": false,
     "obsolete": false
@@ -1340,5 +1340,19 @@
     "description": "Title for InfoView",
     "missing": true,
     "obsolete": false
+  },
+  "permissions_anonymous": {
+    "translation": "",
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions",
+    "missing": true,
+    "obsolete": false
+  },
+  "permissions_authenticated": {
+    "translation": "",
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1210,7 +1210,7 @@
   },
   "title_tag_manager": {
     "translation": "Теги для поиска",
-    "defaultMessage": "Tags (user discovery)",
+    "defaultMessage": "Tags (search & discovery)",
     "description": "Section title for TagManager",
     "missing": false,
     "obsolete": false
@@ -1340,5 +1340,19 @@
     "description": "Title for InfoView",
     "missing": true,
     "obsolete": false
+  },
+  "permissions_anonymous": {
+    "translation": "",
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions",
+    "missing": true,
+    "obsolete": false
+  },
+  "permissions_authenticated": {
+    "translation": "",
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1204,7 +1204,7 @@
   },
   "title_tag_manager": {
     "translation": "標籤 (使用者探索)",
-    "defaultMessage": "Tags (user discovery)",
+    "defaultMessage": "Tags (search & discovery)",
     "description": "Section title for TagManager",
     "missing": false,
     "obsolete": false
@@ -1339,5 +1339,19 @@
     "description": "Title for InfoView",
     "missing": true,
     "obsolete": false
+  },
+  "permissions_anonymous": {
+    "translation": "",
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions",
+    "missing": true,
+    "obsolete": false
+  },
+  "permissions_authenticated": {
+    "translation": "",
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1210,7 +1210,7 @@
   },
   "title_tag_manager": {
     "translation": "标签（用户发现）",
-    "defaultMessage": "Tags (user discovery)",
+    "defaultMessage": "Tags (search & discovery)",
     "description": "Section title for TagManager",
     "missing": false,
     "obsolete": false
@@ -1340,5 +1340,19 @@
     "description": "Title for InfoView",
     "missing": true,
     "obsolete": false
+  },
+  "permissions_anonymous": {
+    "translation": "",
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions",
+    "missing": true,
+    "obsolete": false
+  },
+  "permissions_authenticated": {
+    "translation": "",
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions",
+    "missing": true,
+    "obsolete": false
   }
 }

src/views/info-view.jsx

@@ -10,11 +10,8 @@ import CheckBox from '../widgets/checkbox.jsx';
 import ContactList from '../widgets/contact-list.jsx';
 import ErrorPanel from '../widgets/error-panel.jsx';
 import GroupManager from '../widgets/group-manager.jsx';
-import InPlaceEdit from '../widgets/in-place-edit.jsx';
 import MenuCancel from '../widgets/menu-cancel.jsx';
-import MoreButton from '../widgets/more-button.jsx';
 import PermissionsEditor from '../widgets/permissions-editor.jsx';
-import TagManager from '../widgets/tag-manager.jsx';
 import TopicCommon from '../widgets/topic-common.jsx';
 import TopicSecurity from '../widgets/topic-security.jsx';
 
@@ -49,16 +46,26 @@ const messages = defineMessages({
     description: 'Title for AvatarCropView.',
     defaultMessage: 'Drag to Adjust'
   },
-  requested: {
+  perm_want: {
     id: 'requested_permissions',
     defaultMessage: 'Requested',
     description: 'Title for permissions'
   },
-  granted: {
+  perm_given: {
     id: 'granted_permissions',
     defaultMessage: 'Granted',
     description: 'Title for permissions'
   },
+  perm_auth: {
+    id: 'permissions_authenticated',
+    defaultMessage: 'Authenticated',
+    description: 'Title for editing default authenticated permissions'
+  },
+  perm_anon: {
+    id: 'permissions_anonymous',
+    defaultMessage: 'Anonymous',
+    description: 'Title for editing default anonymous permissions'
+  },
   edit_permissions: {
     id: 'menu_item_edit_permissions',
     defaultMessage: 'Edit permissions',
@@ -97,7 +104,6 @@ class InfoView extends React.Component {
       anon: null,
       contactList: [],
       trustedBadges: [],
-      showPermissionEditorFor: undefined,
       previousMetaDesc: undefined,
       previousSubsUpdated: undefined,
     };
@@ -106,13 +112,10 @@ class InfoView extends React.Component {
     this.resetDesc = this.resetDesc.bind(this);
     this.onMetaDesc = this.onMetaDesc.bind(this);
     this.onSubsUpdated = this.onSubsUpdated.bind(this);
-    this.handleFullNameUpdate = this.handleFullNameUpdate.bind(this);
-    this.handlePrivateUpdate = this.handlePrivateUpdate.bind(this);
     this.handleImageChanged = this.handleImageChanged.bind(this);
     this.handleMuted = this.handleMuted.bind(this);
     this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);
     this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
-    this.handleHidePermissionsEditor = this.handleHidePermissionsEditor.bind(this);
     this.handleShowAddMembers = this.handleShowAddMembers.bind(this);
     this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);
     this.handleMemberSelected = this.handleMemberSelected.bind(this);
@@ -186,6 +189,7 @@ class InfoView extends React.Component {
         }
       }
     }
+
     this.setState({
       owner: acs && acs.isOwner(),
       admin: acs && acs.isAdmin(),
@@ -199,7 +203,7 @@ class InfoView extends React.Component {
       private: _clip(topic.private ? topic.private.comment : null, MAX_TITLE_LENGTH),
       address: topic.name,
       groupTopic: topic.isGroupType(),
-      channel: topic.isChannelType(),
+      channel: topic.isChannelType() || topic.chan,
       access: acs ? acs.getMode() : undefined,
       modeGiven: acs ? acs.getGiven() : undefined,
       modeWant: acs ? acs.getWant() : undefined,
@@ -237,22 +241,6 @@ class InfoView extends React.Component {
     }
   }
 
-  handleFullNameUpdate(fn) {
-    fn = fn.trim().substring(0, MAX_TITLE_LENGTH);
-    if (this.state.fullName !== fn) {
-      this.setState({fullName: fn});
-      this.props.onTopicDescUpdate(this.props.topic, theCard(fn, null), null);
-    }
-  }
-
-  handlePrivateUpdate(comment) {
-    comment = comment.trim().substring(0, MAX_TITLE_LENGTH);
-    if (this.state.private !== comment) {
-      this.setState({private: comment});
-      this.props.onTopicDescUpdate(this.props.topic, null, comment || Tinode.DEL_CHAR);
-    }
-  }
-
   handleImageChanged(img) {
     this.setState({avatar: img});
     this.props.onTopicDescUpdate(this.props.topic, theCard(null, img || Tinode.DEL_CHAR), null);
@@ -282,11 +270,10 @@ class InfoView extends React.Component {
         this.props.onChangePermissions(this.props.topic, perm, this.state.userPermissionsEdited);
         break;
     }
-
-    this.setState({showPermissionEditorFor: undefined});
   }
 
   handleLaunchPermissionsEditor(which, uid) {
+    console.log(which, uid);
     const {formatMessage} = this.props.intl;
     let toEdit, toCompare, toSkip, titleEdit, titleCompare, userTitle, userAvatar;
     switch (which) {
@@ -307,15 +294,15 @@ class InfoView extends React.Component {
             toSkip += 'W';
           }
         }
-        titleEdit = formatMessage(messages.requested);
+        titleEdit = formatMessage(messages.perm_want);
-        titleCompare = formatMessage(messages.granted);
+        titleCompare = formatMessage(messages.perm_given);
         break;
       case 'given':
         toEdit = this.state.modeGiven2;
         toCompare = this.state.modeWant2;
         toSkip = this.state.groupTopic ? (this.state.owner ? '' : 'O') : 'ASDO';
-        titleEdit = formatMessage(messages.granted);
+        titleEdit = formatMessage(messages.perm_given);
-        titleCompare = formatMessage(messages.requested);
+        titleCompare = formatMessage(messages.perm_want);
         break;
       case 'auth':
         toEdit = this.state.auth;
@@ -337,8 +324,8 @@ class InfoView extends React.Component {
         toEdit = user.acs.getGiven();
         toCompare = user.acs.getWant();
         toSkip = this.state.owner ? '' : 'O';
-        titleEdit = formatMessage(messages.granted);
+        titleEdit = formatMessage(messages.perm_given);
-        titleCompare = formatMessage(messages.requested);
+        titleCompare = formatMessage(messages.perm_want);
         if (user.public) {
           userTitle = user.public.fn;
           userAvatar = user.public.photo;
@@ -362,10 +349,6 @@ class InfoView extends React.Component {
     this.props.onNavigate(`perm/${which}`);
   }
 
-  handleHidePermissionsEditor() {
-    this.props.onNavigate('info');
-  }
-
   handleShowAddMembers(e) {
     e.preventDefault();
     this.props.onInitFind();
@@ -382,10 +365,15 @@ class InfoView extends React.Component {
   }
 
   handleBackNavigate() {
-    if (this.props.panel == 'info') {
+    const args = (this.props.panel || 'info').split('/');
+    if (args[0] == 'info') {
       this.props.onNavigate(null);
-    } else if ((this.props.panel || '').startsWith('perm/')) {
+    } else if (args[0] == 'perm') {
-      this.props.onNavigate('security');
+      if (args[1] == 'user') {
+        this.props.onNavigate('info');
+      } else {
+        this.props.onNavigate('security');
+      }
     } else {
       this.props.onNavigate('info');
     }
@@ -393,7 +381,6 @@ class InfoView extends React.Component {
 
   handleContextMenu(params) {
     const {formatMessage} = this.props.intl;
-    const instance = this;
     const topic = this.props.tinode.getTopic(this.props.topic);
     if (!topic) {
       return;
@@ -404,8 +391,8 @@ class InfoView extends React.Component {
     }
 
     const menuItems = [
-      {title: formatMessage(messages.edit_permissions), handler: function() {
+      {title: formatMessage(messages.edit_permissions), handler: () => {
-        instance.handleLaunchPermissionsEditor('user', params.topicName);
+        this.handleLaunchPermissionsEditor('user', params.topicName);
       }},
       'member_delete',
       user.acs.isMuted() ? 'member_unmute' : 'member_mute',
@@ -424,7 +411,8 @@ class InfoView extends React.Component {
     args.shift();
 
     const {formatMessage} = this.props.intl;
-    const panelTitle = formatMessage(messages[view] || messages['info']);
+    const panelTitle = formatMessage((view == 'perm' ? messages['perm_' + args[0]] : messages[view])
+      || messages['info']);
 
     return (
       <div id="info-view">
@@ -460,7 +448,7 @@ class InfoView extends React.Component {
             item={this.state.userPermissionsEdited}
             userAvatar={this.state.userPermissionsAvatar}
             onSubmit={this.handlePermissionsChanged.bind(...args)}
-            onCancel={this.handleHidePermissionsEditor} />
+            onCancel={this.handleBackNavigate} />
           :
         view == 'general' ?
           <TopicCommon
@@ -470,7 +458,7 @@ class InfoView extends React.Component {
             onTopicTagsUpdate={this.props.onTopicTagsUpdate}
             onCredConfirm={this.props.onCredConfirm}
             onCredDelete={this.props.onCredDelete}
-            onUpdateTopicDesc={this.props.onUpdateTopicDesc}
+            onUpdateTopicDesc={this.props.onTopicDescUpdate}
             onUpdateTags={this.props.onUpdateTags}
             onError={this.props.onError} />
           :
@@ -483,6 +471,7 @@ class InfoView extends React.Component {
             onLeaveTopic={this.props.onLeaveTopic}
             onBlockTopic={this.props.onBlockTopic}
             onReportTopic={this.props.onReportTopic}
+            onLaunchPermissionsEditor={this.handleLaunchPermissionsEditor}
             onNavigate={this.props.onNavigate} />
           :
           <div id="info-view-content" className="scrollable-panel">
@@ -504,7 +493,8 @@ class InfoView extends React.Component {
                   <FormattedMessage id="label_topic_name" defaultMessage="Name"
                     description="Label for editing topic name" />
                 </label></div>
-                <div className="large ellipsized">{this.state.fullName}</div>
+                <div className="large ellipsized">{this.state.fullName}
+                {this.state.channel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}</div>
               </div>
               {this.state.private ?
                 <div className="group">

src/widgets/contact.jsx

@@ -114,7 +114,7 @@ class Contact extends React.Component {
           </div>
           {this.props.showMode ?
             <span><ContactBadges badges={badges} /></span> :
-            <div className="contact-comment">{marker}{subtitle || '\u00A0'}</div>}
+            this.props.small ? null : <div className="contact-comment">{marker}{subtitle || '\u00A0'}</div>}
         </div>
         {this.props.showContextMenu ?
           <span className="menuTrigger">

src/widgets/in-place-edit.jsx

@@ -97,7 +97,6 @@ export default class InPlaceEdit extends React.Component {
 
     let element;
     const attr = {};
-    let value = null;
     if (this.props.type == 'password') {
       element = VisiblePassword;
       attr.onFinished = this.handlePasswordFinished;
@@ -106,12 +105,11 @@ export default class InPlaceEdit extends React.Component {
         element = 'textarea';
         attr.rows = this.props.multiline;
         attr.className = 'inplace-edit';
-        value = this.state.value;
       } else {
         element = 'input';
         attr.type = this.props.type || 'text';
-        attr.value = this.state.value;
       }
+      attr.value = this.state.value;
       attr.onChange = this.handeTextChange;
       attr.onKeyDown = this.handleKeyDown;
       attr.onBlur = this.handleEditingFinished;
@@ -122,6 +120,6 @@ export default class InPlaceEdit extends React.Component {
     attr.autoFocus = true;
     attr.ref = this.selfRef;
 
-    return React.createElement(element, attr, value);
+    return React.createElement(element, attr, null);
   }
 };

src/widgets/more-button.jsx

@@ -1,29 +0,0 @@
-// Toggle [Title text >] -> [Title text v]
-
-import React from 'react';
-
-export default class MoreButton extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      open: props.open
-    };
-    this.handleToggle = this.handleToggle.bind(this);
-  }
-
-  handleToggle() {
-    const open = !this.state.open;
-    this.setState({open: open});
-    if (this.props.onToggle) {
-      this.props.onToggle(open);
-    }
-  }
-
-  render() {
-    return (<label className="small clean-clickable" onClick={this.handleToggle}>{this.props.title}...
-      {this.state.open ? <i className="material-icons">expand_more</i> :
-        <i className="material-icons">chevron_right</i>}
-      </label>);
-  }
-}

src/widgets/new-topic-group.jsx

@@ -115,7 +115,7 @@ export default class NewTopicGroup extends React.PureComponent {
             defaultMessage="This is a channel"
             description="Checkbox label when creating a channel" /></label>
         </div>
-        <FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
+        <FormattedMessage id="title_tag_manager" defaultMessage="Tags (search & discovery)"
           description="Section title for TagManager">{
           (title) => <TagManager
             tags={this.state.tags}

src/widgets/permissions-editor.jsx

@@ -132,9 +132,10 @@ class PermissionsEditor extends React.Component {
     return (
       <div className="panel-form-column">
         {this.props.userTitle ?
-          <ul className="contact-box"><Contact
+          <ul className="contact-box small"><Contact
             item={this.props.item}
             title={this.props.userTitle}
+            small={true}
             avatar={makeImageUrl(this.props.userAvatar ? this.props.userAvatar : null)} /></ul> : null}
         <label className="small"><FormattedMessage id="title_permissions"
           defaultMessage="Permissions" description="Section title"/></label>

src/widgets/topic-common.jsx

@@ -3,17 +3,10 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Tinode from 'tinode-sdk';
-
 import AvatarUpload from '../widgets/avatar-upload.jsx';
-import InPlaceEdit from '../widgets/in-place-edit.jsx';
-import TagManager from '../widgets/tag-manager.jsx';
 import TopicDescEdit from '../widgets/topic-desc-edit.jsx';
 
-import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE,
+import { arrayEqual, asEmail, asPhone } from '../lib/utils.js';
-  MAX_INBAND_ATTACHMENT_SIZE, MAX_TITLE_LENGTH } from '../config.js';
-import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
-import { arrayEqual, asEmail, asPhone, theCard } from '../lib/utils.js';
 
 export default class TopicCommon extends React.Component {
   constructor(props) {
@@ -178,22 +171,6 @@ export default class TopicCommon extends React.Component {
           </>
         : null
       }
-      {this.state.owner ?
-        <>
-          <div className="hr" />
-          <FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
-            description="Section title for TagManager">{
-            (tags) => <TagManager
-              title={tags}
-              tags={this.state.tags}
-              activated={false}
-              tinode={this.props.tinode}
-              onSubmit={this.handleTagsUpdated} />
-          }</FormattedMessage>
-        </>
-        :
-        null
-      }
       </div>
     );
   }

src/widgets/topic-desc-edit.jsx

@@ -71,7 +71,7 @@ export default class TopicDescEdit extends React.Component {
     comment = comment.trim().substring(0, MAX_TITLE_LENGTH);
     if (this.state.private !== comment) {
       this.setState({private: comment});
-      this.props.onTopicDescUpdate(this.props.topic, null, comment || Tinode.DEL_CHAR);
+      this.props.onUpdateTopicDesc(this.props.topic, null, comment || Tinode.DEL_CHAR);
     }
   }
 
@@ -211,7 +211,7 @@ export default class TopicDescEdit extends React.Component {
               <div>
                 <InPlaceEdit
                   placeholder={this.state.groupTopic ? "Group name" : <i>Unknown</i>}
-                  readOnly={editable}
+                  readOnly={!editable}
                   value={this.state.fullName}
                   required={true}
                   onFinished={this.handleFullNameUpdate} />
@@ -262,7 +262,7 @@ export default class TopicDescEdit extends React.Component {
       {editable ?
         <>
           <div className="hr" />
-          <FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
+          <FormattedMessage id="title_tag_manager" defaultMessage="Tags (search & discovery)"
             description="Section title for TagManager">{
               (title_tag_manager) => <TagManager
                 title={title_tag_manager}

src/widgets/topic-security.jsx

@@ -4,6 +4,8 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import InPlaceEdit from './in-place-edit.jsx';
 
+import { NO_ACCESS_MODE } from '../config.js';
+
 const messages = defineMessages({
   clear_messages: {
     id: 'action_clear_messages',
@@ -74,6 +76,18 @@ class TopicSecurity extends React.Component {
     const defacs = topic.getDefaultAccess() || {};
     const acs = topic.getAccessMode();
 
+    let modeGiven2 = NO_ACCESS_MODE;
+    let modeWant2 = NO_ACCESS_MODE;
+    if (topic.getType() == 'p2p') {
+      // Fetch the other party in the p2p conversation.
+      // Topic may not be ready yet, so check if user is found.
+      const user2 = topic.subscriber(props.topic);
+      if (user2 && user2.acs) {
+        modeGiven2 = user2.acs.getGiven();
+        modeWant2 = user2.acs.getWant();
+      }
+    }
+
     this.state = {
       owner: acs && acs.isOwner(),
       admin: acs && acs.isAdmin(),
@@ -86,22 +100,18 @@ class TopicSecurity extends React.Component {
       access: acs ? acs.getMode() : undefined,
       modeGiven: acs ? acs.getGiven() : undefined,
       modeWant: acs ? acs.getWant() : undefined,
+      modeGiven2: modeGiven2, // P2P topic, the other user mode given
+      modeWant2: modeWant2,  // P2P topic, the other user mode want
       auth: defacs ? defacs.auth : null,
       anon: defacs ? defacs.anon : null,
     };
 
-    this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
     this.handleDeleteMessages = this.handleDeleteMessages.bind(this);
     this.handleLeave = this.handleLeave.bind(this);
     this.handleBlock = this.handleBlock.bind(this);
     this.handleReport = this.handleReport.bind(this);
   }
 
-  handleLaunchPermissionsEditor(which) {
-    this.props.onNavigate(`perm/${which}/${this.state[which] || ''}`);
-  }
-
-
   handleDeleteMessages(e) {
     e.preventDefault();
     const {formatMessage} = this.props.intl;
@@ -189,15 +199,33 @@ class TopicSecurity extends React.Component {
         <div className="hr" />
         <div className="panel-form-column">
           {this.state.groupTopic ?
-            <div className="group">
+            <>
-              <label>
+              <div className="group">
-                <FormattedMessage id="label_your_permissions" defaultMessage="Your permissions:"
+                <label>
-                  description="Label for current user permissions" />
+                  <FormattedMessage id="label_your_permissions" defaultMessage="Your permissions:"
-              </label> <tt className="clickable"
+                    description="Label for current user permissions" />
-                onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
+                </label> <tt className="clickable"
-                {this.state.access}
+                  onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('want')}}>
-              </tt>
+                  {this.state.access}
-            </div>
+                </tt>
+              </div>
+              <div className="group">
+                <div>
+                  <label className="small">
+                    <FormattedMessage id="label_default_access_mode" defaultMessage="Default access mode:"
+                    description="Label for default access mode" />
+                  </label>
+                </div>
+                <div className="quoted">
+                  <div>Auth: <tt className="clickable"
+                    onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('auth')}}>{this.state.auth}</tt>
+                  </div>
+                  <div>Anon: <tt className="clickable"
+                    onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('anon')}}>{this.state.anon}</tt>
+                  </div>
+                </div>
+              </div>
+            </>
             :
             <div className="group">
               <div>
@@ -210,31 +238,19 @@ class TopicSecurity extends React.Component {
                 <div>
                   <FormattedMessage id="label_you" defaultMessage="You:"
                     description="Label for the current user" /> <tt className="clickable"
-                  onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
+                    onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('want')}}>
-                  {this.state.access}
+                    {this.state.access}
-                </tt></div>
+                  </tt>
+                </div>
                 <div>{this.state.fullName ? this.state.fullName : formatMessage(messages.other_user)}:
-                  &nbsp;<tt className="clickable" onClick={this.handleLaunchPermissionsEditor.bind(this, 'given')}>
+                  &nbsp;<tt className="clickable"
-                  {this.state.modeGiven2}
+                    onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('given')}}>
+                    {this.state.modeGiven2}
                   </tt>
                 </div>
               </div>
             </div>
           }
-          <div className="group">
-            <div>
-              <label className="small">
-                <FormattedMessage id="label_default_access_mode" defaultMessage="Default access mode:"
-                description="Label for default access mode" />
-              </label>
-            </div>
-            <div className="quoted">
-              <div>Auth: <tt className="clickable"
-                onClick={this.handleLaunchPermissionsEditor.bind(this, 'auth')}>{this.state.auth}</tt></div>
-              <div>Anon: <tt className="clickable"
-                onClick={this.handleLaunchPermissionsEditor.bind(this, 'anon')}>{this.state.anon}</tt></div>
-            </div>
-          </div>
         </div>
       </div>
     );