a ton more refactoring

css/base.css

@@ -909,7 +909,7 @@ i.search {
 
 .contact-box .contact-comment {
   text-overflow: ellipsis;
-  overflow: hidden;
+  overflow-x: hidden;
   white-space: nowrap;
   font-weight: lighter;
 }
@@ -2066,6 +2066,15 @@ ul.tabbar li.active > a {
   background-color: #eee;
   white-space: nowrap;
   font-size: 90%;
+  max-width: 12rem;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.chip > span {
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 }
 
 .chip.invalid {
@@ -2080,6 +2089,7 @@ ul.tabbar li.active > a {
   border-radius: 50%;
   margin: 0.3rem;
   width: 1.175rem;
+  min-width: 1.175rem;
   height: 1.175rem;
   line-height: 1.15;
   text-decoration: none;

src/i18n/de.json

@@ -1180,7 +1180,7 @@
     "missing": false,
     "obsolete": false
   },
-  "title_info": {
+  "panel_title_info": {
     "translation": "Info",
     "defaultMessage": "Info",
     "description": "Title for InfoView",
@@ -1273,7 +1273,7 @@
   },
   "description_editing_placeholder": {
     "translation": "",
-    "defaultMessage": "Optional description",
+    "defaultMessage": "Description (optional)",
     "description": "Placeholder for editing topic description",
     "missing": true,
     "obsolete": false
@@ -1292,18 +1292,18 @@
     "missing": false,
     "obsolete": false
   },
-  "panel_title_acc_general": {
+  "panel_title_general": {
     "translation": "",
     "defaultMessage": "General",
-    "description": "Title for TopicCommonView.",
+    "description": "Title for TopicCommon.",
     "missing": true,
     "obsolete": false
   },
-  "panel_title_acc_security": {
+  "panel_title_security": {
-    "translation": "",
+    "translation": "Sicherheit",
     "defaultMessage": "Security",
-    "description": "Title for TopicSecirityView and AccSecurityView.",
+    "description": "Title for TopicSecirity and AccSecurity.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "panel_title_crop": {
@@ -1312,5 +1312,12 @@
     "description": "Title for AvatarCropView.",
     "missing": true,
     "obsolete": false
+  },
+  "panel_title_members": {
+    "translation": "Mitglieder",
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view.",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1185,7 +1185,7 @@
     "defaultMessage": "Info",
     "description": "Title for InfoView",
     "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "title_manage_tags": {
     "translation": "Manage",
@@ -1273,7 +1273,7 @@
   },
   "description_editing_placeholder": {
     "translation": "Optional description",
-    "defaultMessage": "Optional description",
+    "defaultMessage": "Description (optional)",
     "description": "Placeholder for editing topic description",
     "missing": false,
     "obsolete": false
@@ -1297,14 +1297,14 @@
     "defaultMessage": "General",
     "description": "Title for TopicCommonView.",
     "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_acc_security": {
     "translation": "Security",
     "defaultMessage": "Security",
     "description": "Title for TopicSecirityView and AccSecurityView.",
     "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_crop": {
     "translation": "Drag to Adjust",
@@ -1312,5 +1312,33 @@
     "description": "Title for AvatarCropView.",
     "missing": false,
     "obsolete": false
+  },
+  "panel_title_general": {
+    "translation": "General",
+    "defaultMessage": "General",
+    "description": "Title for TopicCommon.",
+    "missing": false,
+    "obsolete": false
+  },
+  "panel_title_members": {
+    "translation": "Members",
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view.",
+    "missing": false,
+    "obsolete": false
+  },
+  "panel_title_security": {
+    "translation": "Security",
+    "defaultMessage": "Security",
+    "description": "Title for TopicSecirity and AccSecurity.",
+    "missing": false,
+    "obsolete": false
+  },
+  "panel_title_info": {
+    "translation": "Info",
+    "defaultMessage": "Info",
+    "description": "Title for InfoView",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1185,7 +1185,7 @@
     "defaultMessage": "Info",
     "description": "Title for InfoView",
     "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "title_manage_tags": {
     "translation": "Gestionar",
@@ -1273,7 +1273,7 @@
   },
   "description_editing_placeholder": {
     "translation": "",
-    "defaultMessage": "Optional description",
+    "defaultMessage": "Description (optional)",
     "description": "Placeholder for editing topic description",
     "missing": true,
     "obsolete": false
@@ -1296,15 +1296,15 @@
     "translation": "",
     "defaultMessage": "General",
     "description": "Title for TopicCommonView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_acc_security": {
     "translation": "",
     "defaultMessage": "Security",
     "description": "Title for TopicSecirityView and AccSecurityView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_crop": {
     "translation": "",
@@ -1312,5 +1312,33 @@
     "description": "Title for AvatarCropView.",
     "missing": true,
     "obsolete": false
+  },
+  "panel_title_general": {
+    "translation": "",
+    "defaultMessage": "General",
+    "description": "Title for TopicCommon.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_members": {
+    "translation": "",
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_security": {
+    "translation": "",
+    "defaultMessage": "Security",
+    "description": "Title for TopicSecirity and AccSecurity.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_info": {
+    "translation": "",
+    "defaultMessage": "Info",
+    "description": "Title for InfoView",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -184,7 +184,7 @@
     "description": "Shown when messages are deleted"
   },
   "description_editing_placeholder": {
-    "defaultMessage": "Optional description",
+    "defaultMessage": "Description (optional)",
     "description": "Placeholder for editing topic description"
   },
   "download_action": {
@@ -497,18 +497,26 @@
     "defaultMessage": "online now",
     "description": "Indicator that the user or topic is currently online"
   },
-  "panel_title_acc_general": {
-    "defaultMessage": "General",
-    "description": "Title for TopicCommonView."
-  },
-  "panel_title_acc_security": {
-    "defaultMessage": "Security",
-    "description": "Title for TopicSecirityView and AccSecurityView."
-  },
   "panel_title_crop": {
     "defaultMessage": "Drag to Adjust",
     "description": "Title for AvatarCropView."
   },
+  "panel_title_general": {
+    "defaultMessage": "General",
+    "description": "Title for TopicCommon."
+  },
+  "panel_title_info": {
+    "defaultMessage": "Info",
+    "description": "Title for InfoView"
+  },
+  "panel_title_members": {
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view."
+  },
+  "panel_title_security": {
+    "defaultMessage": "Security",
+    "description": "Title for TopicSecirity and AccSecurity."
+  },
   "password_prompt": {
     "defaultMessage": "Password",
     "description": "Placeholder/prompt for entering password"
@@ -677,10 +685,6 @@
     "defaultMessage": "Group Members",
     "description": "Section title"
   },
-  "title_info": {
-    "defaultMessage": "Info",
-    "description": "Title for InfoView"
-  },
   "title_manage_tags": {
     "defaultMessage": "Manage",
     "description": "Section title for the list of tags"

src/i18n/ko.json

@@ -1185,7 +1185,7 @@
     "defaultMessage": "Info",
     "description": "Title for InfoView",
     "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "title_manage_tags": {
     "translation": "관리",
@@ -1283,7 +1283,7 @@
   },
   "description_editing_placeholder": {
     "translation": "",
-    "defaultMessage": "Optional description",
+    "defaultMessage": "Description (optional)",
     "description": "Placeholder for editing topic description",
     "missing": true,
     "obsolete": false
@@ -1306,15 +1306,15 @@
     "translation": "",
     "defaultMessage": "General",
     "description": "Title for TopicCommonView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_acc_security": {
     "translation": "",
     "defaultMessage": "Security",
     "description": "Title for TopicSecirityView and AccSecurityView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_crop": {
     "translation": "",
@@ -1322,5 +1322,33 @@
     "description": "Title for AvatarCropView.",
     "missing": true,
     "obsolete": false
+  },
+  "panel_title_general": {
+    "translation": "",
+    "defaultMessage": "General",
+    "description": "Title for TopicCommon.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_members": {
+    "translation": "",
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_security": {
+    "translation": "",
+    "defaultMessage": "Security",
+    "description": "Title for TopicSecirity and AccSecurity.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_info": {
+    "translation": "",
+    "defaultMessage": "Info",
+    "description": "Title for InfoView",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1185,7 +1185,7 @@
     "defaultMessage": "Info",
     "description": "Title for InfoView",
     "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "title_manage_tags": {
     "translation": "Administrează",
@@ -1273,7 +1273,7 @@
   },
   "description_editing_placeholder": {
     "translation": "",
-    "defaultMessage": "Optional description",
+    "defaultMessage": "Description (optional)",
     "description": "Placeholder for editing topic description",
     "missing": true,
     "obsolete": false
@@ -1296,15 +1296,15 @@
     "translation": "",
     "defaultMessage": "General",
     "description": "Title for TopicCommonView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_acc_security": {
     "translation": "",
     "defaultMessage": "Security",
     "description": "Title for TopicSecirityView and AccSecurityView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_crop": {
     "translation": "",
@@ -1312,5 +1312,33 @@
     "description": "Title for AvatarCropView.",
     "missing": true,
     "obsolete": false
+  },
+  "panel_title_general": {
+    "translation": "",
+    "defaultMessage": "General",
+    "description": "Title for TopicCommon.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_members": {
+    "translation": "",
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_security": {
+    "translation": "",
+    "defaultMessage": "Security",
+    "description": "Title for TopicSecirity and AccSecurity.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_info": {
+    "translation": "",
+    "defaultMessage": "Info",
+    "description": "Title for InfoView",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1185,7 +1185,7 @@
     "defaultMessage": "Info",
     "description": "Title for InfoView",
     "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "title_manage_tags": {
     "translation": "Редактировать",
@@ -1273,7 +1273,7 @@
   },
   "description_editing_placeholder": {
     "translation": "",
-    "defaultMessage": "Optional description",
+    "defaultMessage": "Description (optional)",
     "description": "Placeholder for editing topic description",
     "missing": true,
     "obsolete": false
@@ -1296,15 +1296,15 @@
     "translation": "",
     "defaultMessage": "General",
     "description": "Title for TopicCommonView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_acc_security": {
     "translation": "",
     "defaultMessage": "Security",
     "description": "Title for TopicSecirityView and AccSecurityView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_crop": {
     "translation": "",
@@ -1312,5 +1312,33 @@
     "description": "Title for AvatarCropView.",
     "missing": true,
     "obsolete": false
+  },
+  "panel_title_general": {
+    "translation": "",
+    "defaultMessage": "General",
+    "description": "Title for TopicCommon.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_members": {
+    "translation": "",
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_security": {
+    "translation": "",
+    "defaultMessage": "Security",
+    "description": "Title for TopicSecirity and AccSecurity.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_info": {
+    "translation": "",
+    "defaultMessage": "Info",
+    "description": "Title for InfoView",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1179,7 +1179,7 @@
     "defaultMessage": "Info",
     "description": "Title for InfoView",
     "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "title_manage_tags": {
     "translation": "管理",
@@ -1272,7 +1272,7 @@
   },
   "description_editing_placeholder": {
     "translation": "",
-    "defaultMessage": "Optional description",
+    "defaultMessage": "Description (optional)",
     "description": "Placeholder for editing topic description",
     "missing": true,
     "obsolete": false
@@ -1295,15 +1295,15 @@
     "translation": "",
     "defaultMessage": "General",
     "description": "Title for TopicCommonView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_acc_security": {
     "translation": "",
     "defaultMessage": "Security",
     "description": "Title for TopicSecirityView and AccSecurityView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_crop": {
     "translation": "",
@@ -1311,5 +1311,33 @@
     "description": "Title for AvatarCropView.",
     "missing": true,
     "obsolete": false
+  },
+  "panel_title_general": {
+    "translation": "",
+    "defaultMessage": "General",
+    "description": "Title for TopicCommon.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_members": {
+    "translation": "",
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_security": {
+    "translation": "",
+    "defaultMessage": "Security",
+    "description": "Title for TopicSecirity and AccSecurity.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_info": {
+    "translation": "",
+    "defaultMessage": "Info",
+    "description": "Title for InfoView",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1185,7 +1185,7 @@
     "defaultMessage": "Info",
     "description": "Title for InfoView",
     "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "title_manage_tags": {
     "translation": "管理标签",
@@ -1273,7 +1273,7 @@
   },
   "description_editing_placeholder": {
     "translation": "",
-    "defaultMessage": "Optional description",
+    "defaultMessage": "Description (optional)",
     "description": "Placeholder for editing topic description",
     "missing": true,
     "obsolete": false
@@ -1296,15 +1296,15 @@
     "translation": "",
     "defaultMessage": "General",
     "description": "Title for TopicCommonView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_acc_security": {
     "translation": "",
     "defaultMessage": "Security",
     "description": "Title for TopicSecirityView and AccSecurityView.",
-    "missing": true,
+    "missing": false,
-    "obsolete": false
+    "obsolete": true
   },
   "panel_title_crop": {
     "translation": "",
@@ -1312,5 +1312,33 @@
     "description": "Title for AvatarCropView.",
     "missing": true,
     "obsolete": false
+  },
+  "panel_title_general": {
+    "translation": "",
+    "defaultMessage": "General",
+    "description": "Title for TopicCommon.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_members": {
+    "translation": "",
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_security": {
+    "translation": "",
+    "defaultMessage": "Security",
+    "description": "Title for TopicSecirity and AccSecurity.",
+    "missing": true,
+    "obsolete": false
+  },
+  "panel_title_info": {
+    "translation": "",
+    "defaultMessage": "Info",
+    "description": "Title for InfoView",
+    "missing": true,
+    "obsolete": false
   }
 }

src/lib/blob-helpers.js

@@ -8,7 +8,7 @@ export const MIME_EXTENSIONS         = ['jpg',        'gif',       'png',
 
 // Get an URL from a theCard photo: either create a data: URL or return reference URL.
 export function makeImageUrl(photo) {
-  if (typeof photo == 'object') {
+  if (photo && typeof photo == 'object') {
     if (photo.data && photo.type) {
       const mime = photo.type.startsWith('image/') ? photo.type : ('image/' + photo.type);
       return 'data:' + mime + ';base64,' + photo.data;

src/views/info-view.jsx

@@ -4,9 +4,6 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import Tinode from 'tinode-sdk';
 
-import TopicCommonView from './topic-common-view.jsx';
-import TopicSecurityView from './topic-security-view.jsx';
-
 import AvatarUpload from '../widgets/avatar-upload.jsx';
 import BadgeList from '../widgets/badge-list.jsx';
 import CheckBox from '../widgets/checkbox.jsx';
@@ -18,6 +15,8 @@ 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';
 
 import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH, NO_ACCESS_MODE } from '../config.js';
 
@@ -26,20 +25,25 @@ import { arrayEqual, theCard } from '../lib/utils.js';
 
 const messages = defineMessages({
   info: {
-    id: 'title_info',
+    id: 'panel_title_info',
     description: 'Title for InfoView',
     defaultMessage: 'Info'
   },
   general: {
-    id: 'panel_title_acc_general',
+    id: 'panel_title_general',
-    description: 'Title for TopicCommonView.',
+    description: 'Title for TopicCommon.',
     defaultMessage: 'General'
   },
   security: {
-    id: 'panel_title_acc_security',
+    id: 'panel_title_security',
-    description: 'Title for TopicSecirityView and AccSecurityView.',
+    description: 'Title for TopicSecirity and AccSecurity.',
     defaultMessage: 'Security'
   },
+  members: {
+    id: 'panel_title_members',
+    description: 'Title for managing group members view.',
+    defaultMessage: 'Members'
+  },
   crop: {
     id: 'panel_title_crop',
     description: 'Title for AvatarCropView.',
@@ -75,7 +79,6 @@ class InfoView extends React.Component {
       owner: false,
       admin: false,
       sharer: false,
-      deleter: false,
       muted: false,
       address: null,
       groupTopic: undefined,
@@ -94,7 +97,6 @@ class InfoView extends React.Component {
       anon: null,
       contactList: [],
       trustedBadges: [],
-      showMemberPanel: false,
       showPermissionEditorFor: undefined,
       previousMetaDesc: undefined,
       previousSubsUpdated: undefined,
@@ -112,7 +114,6 @@ class InfoView extends React.Component {
     this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
     this.handleHidePermissionsEditor = this.handleHidePermissionsEditor.bind(this);
     this.handleShowAddMembers = this.handleShowAddMembers.bind(this);
-    this.handleHideAddMembers = this.handleHideAddMembers.bind(this);
     this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);
     this.handleMemberSelected = this.handleMemberSelected.bind(this);
     this.handleContextMenu = this.handleContextMenu.bind(this);
@@ -189,7 +190,6 @@ class InfoView extends React.Component {
       owner: acs && acs.isOwner(),
       admin: acs && acs.isAdmin(),
       sharer: acs && acs.isSharer(),
-      deleter: acs && acs.isDeleter(),
       muted: acs && acs.isMuted(),
 
       fullName: _clip(topic.public ? topic.public.fn : undefined, MAX_TITLE_LENGTH),
@@ -200,7 +200,6 @@ class InfoView extends React.Component {
       address: topic.name,
       groupTopic: topic.isGroupType(),
       channel: topic.isChannelType(),
-      showMemberPanel: false,
       access: acs ? acs.getMode() : undefined,
       modeGiven: acs ? acs.getGiven() : undefined,
       modeWant: acs ? acs.getWant() : undefined,
@@ -264,8 +263,8 @@ class InfoView extends React.Component {
     this.props.onChangePermissions(this.props.topic, checked ? '-P' : '+P');
   }
 
-  handlePermissionsChanged(perm) {
+  handlePermissionsChanged(which, perm) {
-    switch (this.state.showPermissionEditorFor) {
+    switch (which) {
       case 'auth':
         this.props.onTopicDescUpdate(this.props.topic, null, null, {auth: perm});
         break;
@@ -348,10 +347,9 @@ class InfoView extends React.Component {
       }
       default:
         console.log("Unknown permission editing mode '" + which + "'");
-        break;
+        return;
     }
     this.setState({
-      showPermissionEditorFor: which,
       userPermissionsEdited: uid,
       userPermissionsTitle: userTitle,
       userPermissionsAvatar: userAvatar,
@@ -361,25 +359,22 @@ class InfoView extends React.Component {
       immutablePermissionsTitle: titleCompare,
       editedPermissionsSkipped: toSkip,
     });
+    this.props.onNavigate(`perm/${which}`);
   }
 
   handleHidePermissionsEditor() {
-    this.setState({showPermissionEditorFor: undefined});
+    this.props.onNavigate('info');
   }
 
   handleShowAddMembers(e) {
     e.preventDefault();
     this.props.onInitFind();
-    this.setState({showMemberPanel: true});
+    this.props.onNavigate('members');
-  }
-
-  handleHideAddMembers() {
-    this.setState({showMemberPanel: false});
   }
 
   handleMemberUpdateRequest(members, added, removed) {
     this.props.onMemberUpdateRequest(this.props.topic, added, removed);
-    this.setState({showMemberPanel: false});
+    this.props.onNavigate('info');
   }
 
   handleMemberSelected(uid) {
@@ -389,6 +384,8 @@ class InfoView extends React.Component {
   handleBackNavigate() {
     if (this.props.panel == 'info') {
       this.props.onNavigate(null);
+    } else if ((this.props.panel || '').startsWith('perm/')) {
+      this.props.onNavigate('security');
     } else {
       this.props.onNavigate('info');
     }
@@ -422,7 +419,10 @@ class InfoView extends React.Component {
   }
 
   render() {
-    const view = this.props.panel || 'info';
+    const args = (this.props.panel || 'info').split('/');
+    const view = args[0];
+    args.shift();
+
     const {formatMessage} = this.props.intl;
     const panelTitle = formatMessage(messages[view] || messages['info']);
 
@@ -439,17 +439,17 @@ class InfoView extends React.Component {
             level={this.props.errorLevel}
             text={this.props.errorText}
             onClearError={this.props.onError} /> : null}
-        {this.state.showMemberPanel ?
+        {view == 'members' ?
           <GroupManager
             members={this.state.contactList}
             requiredMember={this.props.myUserId}
             keepInitialMembers={!this.state.admin && !this.state.owner}
             myUserId={this.props.myUserId}
             contacts={this.props.searchableContacts}
-            onCancel={this.handleHideAddMembers}
+            onCancel={this.handleBackNavigate}
             onSubmit={this.handleMemberUpdateRequest} />
           :
-        this.state.showPermissionEditorFor ?
+        view == 'perm' && args.length > 0 ?
           <PermissionsEditor
             mode={this.state.editedPermissions}
             compare={this.state.immutablePermissions}
@@ -459,21 +459,31 @@ class InfoView extends React.Component {
             userTitle={this.state.userPermissionsTitle}
             item={this.state.userPermissionsEdited}
             userAvatar={this.state.userPermissionsAvatar}
-            onSubmit={this.handlePermissionsChanged}
+            onSubmit={this.handlePermissionsChanged.bind(...args)}
-            onCancel={this.handleHidePermissionsEditor}
+            onCancel={this.handleHidePermissionsEditor} />
-            />
           :
-        this.props.panel == 'general' ?
+        view == 'general' ?
-          <TopicCommonView
+          <TopicCommon
             tinode={this.props.tinode}
             topic={this.props.topic}
-            />
+            onCredAdd={this.props.onCredAdd}
+            onTopicTagsUpdate={this.props.onTopicTagsUpdate}
+            onCredConfirm={this.props.onCredConfirm}
+            onCredDelete={this.props.onCredDelete}
+            onUpdateTopicDesc={this.props.onUpdateTopicDesc}
+            onUpdateTags={this.props.onUpdateTags}
+            onError={this.props.onError} />
           :
-        this.props.panel == 'security' ?
+        view == 'security' ?
-          <TopicSecurityView
+          <TopicSecurity
             tinode={this.props.tinode}
             topic={this.props.topic}
-            />
+            onShowAlert={this.props.onShowAlert}
+            onDeleteMessages={this.props.onDeleteMessages}
+            onLeaveTopic={this.props.onLeaveTopic}
+            onBlockTopic={this.props.onBlockTopic}
+            onReportTopic={this.props.onReportTopic}
+            onNavigate={this.props.onNavigate} />
           :
           <div id="info-view-content" className="scrollable-panel">
             <div className="panel-form-column">

src/views/new-topic-view.jsx

@@ -63,9 +63,9 @@ class NewTopicView extends React.Component {
     }
   }
 
-  handleNewGroupSubmit(name, dataUrl, priv, tags, isChannel) {
+  handleNewGroupSubmit(name, description, dataUrl, priv, tags, isChannel) {
     HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
-    this.props.onCreateTopic(undefined, theCard(name, dataUrl), priv, tags, isChannel);
+    this.props.onCreateTopic(undefined, theCard(name, dataUrl, null, description), priv, tags, isChannel);
   }
 
   handleGroupByID(topicName) {

src/views/sidepanel-view.jsx

@@ -4,11 +4,11 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ErrorPanel from '../widgets/error-panel.jsx';
 import LoadSpinner from '../widgets/load-spinner.jsx';
 import SideNavbar from '../widgets/side-navbar.jsx';
+import TopicCommon from '../widgets/topic-common.jsx';
 
 import AccountSettingsView from './account-settings-view.jsx';
 import ContactsView from './contacts-view.jsx';
 import CreateAccountView from './create-account-view.jsx';
-import TopicCommonView from './topic-common-view.jsx';
 import AccNotificationsView from './acc-notifications-view.jsx';
 import AccSecurityView from './acc-security-view.jsx';
 import AccSupportView from './acc-support-view.jsx';
@@ -41,13 +41,13 @@ const messages = defineMessages({
     defaultMessage: 'Account Settings'
   },
   general: {
-    id: 'panel_title_acc_general',
+    id: 'panel_title_general',
-    description: 'Title for TopicCommonView.',
+    description: 'Title for TopicCommon.',
     defaultMessage: 'General'
   },
   security: {
-    id: 'panel_title_acc_security',
+    id: 'panel_title_security',
-    description: 'Title for TopicSecirityView and AccSecurityView.',
+    description: 'Title for TopicSecirity and AccSecurity.',
     defaultMessage: 'Security'
   },
   crop: {
@@ -176,7 +176,7 @@ class SidepanelView extends React.Component {
             onNavigate={this.props.onNavigate} /> :
 
           (view === 'general' || view === 'crop') ?
-          <TopicCommonView
+          <TopicCommon
             topic="me"
             tinode={this.props.tinode}
             myUserId={this.props.myUserId}

src/widgets/chip-input.jsx

@@ -131,6 +131,7 @@ export default class ChipInput extends React.Component {
       count++;
     });
     const className = "chip-input" + (this.state.focused ? ' focused' : '');
+    const autoFocus = !(this.props.tabIndex > 0);
     return (
       <div className={className}>
         {chips}
@@ -141,7 +142,8 @@ export default class ChipInput extends React.Component {
           onBlur={this.handleFocusLost}
           onKeyDown={this.handleKeyDown}
           value={this.state.input}
-          autoFocus />
+          tabIndex={this.props.tabIndex}
+          autoFocus={autoFocus} />
       </div>
     );
   }

src/widgets/group-manager.jsx

@@ -188,12 +188,12 @@ class GroupManager extends React.Component {
           showUnread={false}
           onTopicSelected={this.handleContactSelected} />
         <div id="group-manager-buttons" className="panel-form-row">
-          <button className="primary" onClick={this.handleSubmit}>
-            <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
-          </button>
           <button className="secondary" onClick={this.handleCancel}>
             <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
           </button>
+          <button className="primary" onClick={this.handleSubmit}>
+            <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
+          </button>
         </div>
       </div>
     );

src/widgets/new-topic-group.jsx

@@ -5,34 +5,36 @@ import AvatarUpload from './avatar-upload.jsx';
 import CheckBox from './checkbox.jsx';
 import TagManager from './tag-manager.jsx';
 
-import { MAX_TITLE_LENGTH } from '../config.js';
+import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
 
 export default class NewTopicGroup extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    this.fullName = React.createRef();
+
     this.state = {
-      fn: '', // full/formatted name
+      fullName: '', // full/formatted name
       private: '',
+      description: '',
       imageDataUrl: null,
       tags: [],
       isChannel: false
     };
 
-    this.handleFnChange = this.handleFnChange.bind(this);
+    this.handleFieldEdit = this.handleFieldEdit.bind(this);
-    this.handlePrivateChange = this.handlePrivateChange.bind(this);
     this.handleImageChanged = this.handleImageChanged.bind(this);
     this.handleTagsChanged = this.handleTagsChanged.bind(this);
     this.handleChannelToggle = this.handleChannelToggle.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  handleFnChange(e) {
+  componentDidMount() {
-    this.setState({fn: e.target.value});
+    // this.fullName.current.focus();
   }
 
-  handlePrivateChange(e) {
+  handleFieldEdit(name, e) {
-    this.setState({private: e.target.value});
+    this.setState({[name]: e.target.value});
   }
 
   handleImageChanged(img) {
@@ -50,10 +52,11 @@ export default class NewTopicGroup extends React.PureComponent {
   handleSubmit(e) {
     e.preventDefault();
 
-    const fn = this.state.fn.trim().substring(0, MAX_TITLE_LENGTH);
+    const fn = this.state.fullName.trim().substring(0, MAX_TITLE_LENGTH);
     const comment = this.state.private.trim().substring(0, MAX_TITLE_LENGTH);
+    const description = this.state.description.trim().substring(0, MAX_TOPIC_DESCRIPTION_LENGTH);
     if (fn) {
-      this.props.onSubmit(fn, this.state.imageDataUrl, comment, this.state.tags, this.state.isChannel);
+      this.props.onSubmit(fn, description, this.state.imageDataUrl, comment, this.state.tags, this.state.isChannel);
     }
   }
 
@@ -64,8 +67,14 @@ export default class NewTopicGroup extends React.PureComponent {
     }
     return (
       <form className="panel-form" onSubmit={this.handleSubmit}>
-        <div className="panel-form-row">
+        <div className="panel-form-column">
-          <div className="panel-form-column">
+          <center>
+            <AvatarUpload
+              tinode={this.props.tinode}
+              onError={this.props.onError}
+              onImageChanged={this.handleImageChanged} />
+          </center>
+          <div className="group">
             <label className="small" htmlFor="new-topic-fn">
               <FormattedMessage id="label_topic_name" defaultMessage="Name"
                 description="Label for editing topic name" />
@@ -73,9 +82,11 @@ export default class NewTopicGroup extends React.PureComponent {
             <FormattedMessage id="topic_name_editing_placeholder" defaultMessage="Freeform name of the group"
               description="Prompt for entering topic name">{
               (placeholder) => <input type="text" id="new-topic-fn" placeholder={placeholder}
-                value={this.state.fn} onChange={this.handleFnChange} autoFocus required />
+                ref={this.fullName} value={this.state.fullName} onChange={this.handleFieldEdit.bind('fullName')}
+                autoFocus required tabIndex={0} />
             }</FormattedMessage>
-            <br />
+          </div>
+          <div className="group">
             <label className="small" htmlFor="new-topic-priv">
               <FormattedMessage id="label_private" defaultMessage="Private comment"
                 description="Label for editing 'private'" />
@@ -83,16 +94,23 @@ export default class NewTopicGroup extends React.PureComponent {
             <FormattedMessage id="private_editing_placeholder" defaultMessage="Visible to you only"
               description="Placeholder for editing 'private'">{
               (placeholder) => <input type="text" id="new-topic-priv" placeholder={placeholder}
-                value={this.state.private} onChange={this.handlePrivateChange} />
+                value={this.state.private} onChange={this.handleFieldEdit.bind('private')} tabIndex={1} />
+            }</FormattedMessage>
+          </div>
+          <div className="group">
+            <label className="small" htmlFor="new-topic-desc">
+              <FormattedMessage id="label_description" defaultMessage="Description"
+                description="Label for editing topic description" />
+            </label>
+            <FormattedMessage id="description_editing_placeholder" defaultMessage="Description (optional)"
+              description="Placeholder for editing topic description">{
+              (placeholder) => <input type="text" id="new-topic-desc" placeholder={placeholder}
+                value={this.state.description} onChange={this.handleFieldEdit.bind('description')} tabIndex={2} />
             }</FormattedMessage>
           </div>
-          <AvatarUpload
-            tinode={this.props.tinode}
-            onError={this.props.onError}
-            onImageChanged={this.handleImageChanged} />
         </div>
         <div className="panel-form-row">
-          <CheckBox checked={this.state.isChannel} onChange={this.handleChannelToggle}/>&nbsp;
+          <CheckBox checked={this.state.isChannel} tabIndex={3} onChange={this.handleChannelToggle} />&nbsp;
           <label onClick={this.handleChannelToggle}><FormattedMessage id="channel_prompt"
             defaultMessage="This is a channel"
             description="Checkbox label when creating a channel" /></label>
@@ -104,6 +122,7 @@ export default class NewTopicGroup extends React.PureComponent {
             activated={true}
             onTagsChanged={this.handleTagsChanged}
             tinode={this.props.tinode}
+            tabIndex={4}
             title={title} />
         }</FormattedMessage>
         <div className="dialog-buttons">

src/widgets/tag-manager.jsx

@@ -119,6 +119,7 @@ export default class TagManager extends React.Component {
               chips={tags}
               avatarDisabled={true}
               prompt={add_tags_prompt}
+              tabIndex={this.props.tabIndex}
               onEnter={this.handleAddTag}
               onFocusLost={this.handleAddTag}
               onCancel={this.handleCancel}

src/widgets/topic-common.jsx

@@ -15,18 +15,19 @@ import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE,
 import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
 import { arrayEqual, asEmail, asPhone, theCard } from '../lib/utils.js';
 
-export default class TopicCommonView extends React.Component {
+export default class TopicCommon extends React.Component {
   constructor(props) {
     super(props);
 
     const topic = this.props.tinode.getTopic(this.props.topic);
     const acs = topic.getAccessMode();
     this.state = {
-      isMe: this.props.tinode.isMe(this.props.topic),
+      isMe: this.props.topic == 'me',
       owner: acs && acs.isOwner(),
-      credentials: topic.getCredentials() || [],
+      credentials: (topic.getCredentials ? topic.getCredentials() : null) || [],
       addCredActive: false,
       addCredInvalid: false,
+      newCred: '',
       tags: [],
       previousTagsUpdated: undefined
     };

src/widgets/topic-desc-edit.jsx

@@ -211,7 +211,7 @@ export default class TopicDescEdit extends React.Component {
               <div>
                 <InPlaceEdit
                   placeholder={this.state.groupTopic ? "Group name" : <i>Unknown</i>}
-                  readOnly={!this.state.owner}
+                  readOnly={editable}
                   value={this.state.fullName}
                   required={true}
                   onFinished={this.handleFullNameUpdate} />
@@ -237,24 +237,27 @@ export default class TopicDescEdit extends React.Component {
             </div>
           </>
         }
-        <div className="group">
+        {editable || this.state.description ?
-          <div><label className="small">
+          <div className="group">
-            <FormattedMessage id="label_description" defaultMessage="Description"
+            <div><label className="small">
-              description="Label for editing topic description" />
+              <FormattedMessage id="label_description" defaultMessage="Description"
-          </label></div>
+                description="Label for editing topic description" />
-          <div>
+            </label></div>
-            <FormattedMessage id="description_editing_placeholder"
+            <div>
-              defaultMessage="Optional description"
+              <FormattedMessage id="description_editing_placeholder"
-              description="Placeholder for editing topic description">{
+                defaultMessage="Description (optional)"
-              (private_placeholder) => <InPlaceEdit
+                description="Placeholder for editing topic description">{
-                placeholder={private_placeholder}
+                (private_placeholder) => <InPlaceEdit
-                readOnly={!editable}
+                  placeholder={private_placeholder}
-                value={this.state.description}
+                  readOnly={!editable}
-                multiline={2}
+                  value={this.state.description}
-                onFinished={this.handleDescriptionUpdate} />
+                  multiline={2}
-            }</FormattedMessage>
+                  onFinished={this.handleDescriptionUpdate} />
+              }</FormattedMessage>
+            </div>
           </div>
-        </div>
+          : null
+        }
       </div>
       {editable ?
         <>

src/widgets/topic-security.jsx

@@ -2,8 +2,7 @@
 import React from 'react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import InPlaceEdit from '../widgets/in-place-edit.jsx';
+import InPlaceEdit from './in-place-edit.jsx';
-import PermissionsEditor from '../widgets/permissions-editor.jsx';
 
 const messages = defineMessages({
   clear_messages: {
@@ -63,7 +62,7 @@ const messages = defineMessages({
   },
 });
 
-class TopicSecurityView extends React.Component {
+class TopicSecurity extends React.Component {
   constructor(props) {
     super(props);
 
@@ -82,14 +81,16 @@ class TopicSecurityView extends React.Component {
       deleter: acs && acs.isDeleter(),
       muted: acs && acs.isMuted(),
 
+      groupTopic: topic.isGroupType(),
+      channel: topic.isChannelType(),
+      access: acs ? acs.getMode() : undefined,
+      modeGiven: acs ? acs.getGiven() : undefined,
+      modeWant: acs ? acs.getWant() : undefined,
       auth: defacs ? defacs.auth : null,
       anon: defacs ? defacs.anon : null,
-      showPermissionEditorFor: undefined
     };
 
     this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
-    this.handleHidePermissionsEditor = this.handleHidePermissionsEditor.bind(this);
-    this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);
     this.handleDeleteMessages = this.handleDeleteMessages.bind(this);
     this.handleLeave = this.handleLeave.bind(this);
     this.handleBlock = this.handleBlock.bind(this);
@@ -97,25 +98,9 @@ class TopicSecurityView extends React.Component {
   }
 
   handleLaunchPermissionsEditor(which) {
-    this.setState({
+    this.props.onNavigate(`perm/${which}/${this.state[which] || ''}`);
-      showPermissionEditorFor: which,
-      editedPermissions: this.state[which]
-    });
   }
 
-  handleHidePermissionsEditor() {
-    this.setState({showPermissionEditorFor: undefined});
-  }
-
-  handlePermissionsChanged(perm) {
-    let defacs = {};
-    defacs[this.state.showPermissionEditorFor] = perm;
-    this.props.onUpdateAccountDesc('me', undefined, undefined, defacs);
-
-    let newState = {showPermissionEditorFor: undefined};
-    newState[this.state.showPermissionEditorFor] = perm;
-    this.setState(newState);
-  }
 
   handleDeleteMessages(e) {
     e.preventDefault();
@@ -172,96 +157,88 @@ class TopicSecurityView extends React.Component {
   render() {
     const {formatMessage} = this.props.intl;
     return (
-      this.state.showPermissionEditorFor ?
+      <div className="scrollable-panel">
-        <PermissionsEditor
+        <div className="panel-form-column">
-          mode={this.state.editedPermissions}
+          {!this.state.channel ?
-          skip="O"
+            <a href="#" className="flat-button" onClick={this.handleDeleteMessages}>
-          onSubmit={this.handlePermissionsChanged}
+              <i className="material-icons">delete_outline</i> &nbsp;{
-          onCancel={this.handleHidePermissionsEditor} />
+                formatMessage(this.state.deleter ? messages.delete_messages : messages.clear_messages)
-        :
+              }
-        <div className="scrollable-panel">
-          <div className="panel-form-column">
-            {!this.state.channel ?
-              <a href="#" className="flat-button" onClick={this.handleDeleteMessages}>
-                <i className="material-icons">delete_outline</i> &nbsp;{
-                  formatMessage(this.state.deleter ? messages.delete_messages : messages.clear_messages)
-                }
-              </a>
-              :
-              null
-            }
-            <a href="#" className="danger flat-button" onClick={this.handleLeave}>
-              <i className="material-icons">exit_to_app</i> &nbsp;{formatMessage(messages.leave_chat)}
             </a>
-            {!this.state.groupTopic ?
+            :
-              <a href="#" className="danger flat-button" onClick={this.handleBlock}>
+            null
-                <i className="material-icons">block</i> &nbsp;{formatMessage(messages.block_contact)}
+          }
-              </a>
+          <a href="#" className="danger flat-button" onClick={this.handleLeave}>
-              :
+            <i className="material-icons">exit_to_app</i> &nbsp;{formatMessage(messages.leave_chat)}
-              null
+          </a>
-            }
+          {!this.state.groupTopic ?
-            {!this.state.owner ?
+            <a href="#" className="danger flat-button" onClick={this.handleBlock}>
-              <a href="#" className="danger flat-button" onClick={this.handleReport}>
+              <i className="material-icons">block</i> &nbsp;{formatMessage(messages.block_contact)}
-                <i className="material-icons">report</i> &nbsp;{formatMessage(messages.report_chat)}
+            </a>
-              </a>
+            :
-              :
+            null
-              null
+          }
-            }
+          {!this.state.owner ?
-          </div>
+            <a href="#" className="danger flat-button" onClick={this.handleReport}>
-          <div className="hr" />
+              <i className="material-icons">report</i> &nbsp;{formatMessage(messages.report_chat)}
-          <div className="panel-form-column">
+            </a>
-            {this.state.groupTopic ?
+            :
-              <div className="group">
+            null
-                <label>
+          }
-                  <FormattedMessage id="label_your_permissions" defaultMessage="Your permissions:"
+        </div>
-                    description="Label for current user permissions" />
+        <div className="hr" />
-                </label>
+        <div className="panel-form-column">
-                <tt className="clickable"
+          {this.state.groupTopic ?
-                  onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
+            <div className="group">
-                  {this.state.access}
+              <label>
-                </tt>
+                <FormattedMessage id="label_your_permissions" defaultMessage="Your permissions:"
-              </div>
+                  description="Label for current user permissions" />
-              :
+              </label> <tt className="clickable"
-              <div className="group">
+                onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
-                <div>
+                {this.state.access}
-                  <label className="small">
+              </tt>
-                    <FormattedMessage id="label_permissions" defaultMessage="Permissions:"
+            </div>
-                      description="Section title" />
+            :
-                  </label>
-                </div>
-                <div className="quoted">
-                  <div>
-                    <FormattedMessage id="label_you" defaultMessage="You:"
-                      description="Label for the current user" /> &nbsp;<tt className="clickable"
-                    onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
-                    {this.state.access}
-                  </tt></div>
-                  <div>{this.state.fullName ? this.state.fullName : formatMessage(messages.other_user)}:
-                    &nbsp;<tt className="clickable" onClick={this.handleLaunchPermissionsEditor.bind(this, '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:"
+                  <FormattedMessage id="label_permissions" defaultMessage="Permissions:"
-                  description="Label for default access mode" />
+                    description="Section title" />
                 </label>
               </div>
               <div className="quoted">
-                <div>Auth: <tt className="clickable"
+                <div>
-                  onClick={this.handleLaunchPermissionsEditor.bind(this, 'auth')}>{this.state.auth}</tt></div>
+                  <FormattedMessage id="label_you" defaultMessage="You:"
-                <div>Anon: <tt className="clickable"
+                    description="Label for the current user" /> <tt className="clickable"
-                  onClick={this.handleLaunchPermissionsEditor.bind(this, 'anon')}>{this.state.anon}</tt></div>
+                  onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
+                  {this.state.access}
+                </tt></div>
+                <div>{this.state.fullName ? this.state.fullName : formatMessage(messages.other_user)}:
+                  &nbsp;<tt className="clickable" onClick={this.handleLaunchPermissionsEditor.bind(this, '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>
     );
   }
 };
 
-export default injectIntl(TopicSecurityView);
+export default injectIntl(TopicSecurity);