support for pinning topics; truncate text with support for RTL languages

src/views/account-settings-view.jsx

@@ -5,13 +5,14 @@ import { parsePhoneNumber } from 'libphonenumber-js/mobile';
 
 import AvatarUpload from '../widgets/avatar-upload.jsx';
 import BadgeList from '../widgets/badge-list.jsx';
-
-import { makeImageUrl } from '../lib/blob-helpers.js';
-import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
 import CredentialEdit from '../widgets/credential-edit.jsx';
 
+import { makeImageUrl } from '../lib/blob-helpers.js';
+import { truncateString } from '../lib/strformat.js';
+import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
+
 function _clip(str, length) {
-  return str && str.substring(0, length);
+  return truncateString(str, length);
 }
 
 export default class AccountSettingsView extends React.Component {

src/views/contacts-view.jsx

@@ -27,8 +27,12 @@ export default class ContactsView extends React.Component {
     const contacts = [];
     let unreadThreads = 0;
     let archivedCount = 0;
+
+    const me = props.tinode.getMeTopic();
     props.chatList.forEach(c => {
       const blocked = c.acs && !c.acs.isJoiner();
+      c.pinned = me.pinnedTopicRank(c.topic);
+
       // Show only blocked contacts only when props.blocked == true.
       if (blocked && props.blocked) {
         contacts.push(c);
@@ -50,7 +54,8 @@ export default class ContactsView extends React.Component {
     });
 
     contacts.sort((a, b) => {
-      return (b.touched || 0) - (a.touched || 0);
+      const pin = b.pinned - a.pinned;
+      return pin != 0 ? pin : (b.touched || 0) - (a.touched || 0);
     });
 
     if (archivedCount > 0) {

src/views/create-account-view.jsx

@@ -11,6 +11,7 @@ import VisiblePassword from '../widgets/visible-password.jsx';
 import LocalStorageUtil from '../lib/local-storage.js';
 import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
 import { theCard } from '../lib/utils.js';
+import { truncateString } from '../lib/strformat.js';
 
 import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE,
   MAX_TITLE_LENGTH } from '../config.js';
@@ -91,7 +92,7 @@ export default class CreateAccountView extends React.PureComponent {
     this.props.onCreateAccount(
       this.state.login.trim(),
       this.state.password.trim(),
-      theCard(this.state.fn.trim().substring(0, MAX_TITLE_LENGTH), this.state.uploadUrl),
+      theCard(truncateString(this.state.fn.trim(), MAX_TITLE_LENGTH), this.state.uploadUrl),
       {
         'meth': this.state.meth,
         'val': this.state.meth == 'email' ?

src/views/info-view.jsx

@@ -20,7 +20,8 @@ import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH,
   NO_ACCESS_MODE, TOAST_DURATION } from '../config.js';
 
 import { makeImageUrl } from '../lib/blob-helpers.js';
-import { theCard, clipStr } from '../lib/utils.js';
+import { theCard } from '../lib/utils.js';
+import { truncateString } from '../lib/strformat.js';
 
 const messages = defineMessages({
   info: {
@@ -231,13 +232,13 @@ class InfoView extends React.Component {
 
       fullName: isSelf ?
         props.intl.formatMessage(messages.self_topic_name) :
-        clipStr(topic.public && topic.public.fn, MAX_TITLE_LENGTH),
+        truncateString(topic.public && topic.public.fn, MAX_TITLE_LENGTH),
       description: isSelf ?
         props.intl.formatMessage(messages.self_topic_comment) :
-        clipStr(topic.public && topic.public.note, MAX_TOPIC_DESCRIPTION_LENGTH),
+        truncateString(topic.public && topic.public.note, MAX_TOPIC_DESCRIPTION_LENGTH),
       avatar: makeImageUrl(topic.public ? topic.public.photo : null),
       trustedBadges: badges,
-      private: clipStr(topic.private && topic.private.comment, MAX_TITLE_LENGTH),
+      private: truncateString(topic.private && topic.private.comment, MAX_TITLE_LENGTH),
       archived: topic.isArchived(),
       address: topic.name,
       groupTopic: topic.isGroupType(),

src/views/tinode-web.jsx

@@ -963,7 +963,8 @@ class TinodeWeb extends React.Component {
       newState.ready = true;
     }
 
-    this.tinode.getMeTopic().contacts(c => {
+    const me = this.tinode.getMeTopic();
+    me.contacts(c => {
       if (!c.topic && !c.user) {
         // Contacts expect c.topic to be set.
         c.topic = c.name;
@@ -978,7 +979,14 @@ class TinodeWeb extends React.Component {
 
     const past = new Date(0);
     newState.chatList.sort((a, b) => {
-      return (a.touched || past).getTime() - (b.touched || past).getTime();
+      // Pinned topics take precedence.
+      const pins = me.pinnedTopicRank(b.topic) - me.pinnedTopicRank(a.topic);
+      // Then sort by last touched time.
+      return pins != 0 ? pins : (b.touched || past).getTime() - (a.touched || past).getTime();
+    });
+
+    newState.chatList.forEach(c => {
+      console.log("sorted:", c.topic, me.pinnedTopicRank(c.topic));
     });
 
     // Merge search results and chat list.
@@ -1643,11 +1651,13 @@ class TinodeWeb extends React.Component {
       ];
     }
 
+    const me = this.tinode.getMeTopic();
     let muted = false, blocked = false, self_blocked = false, subscribed = false, deleter = false,
-      archived = false, webrtc = false, writer = false, p2p = false, self = false;
+      archived = false, pinned = false, webrtc = false, writer = false, p2p = false, self = false;
     if (topic) {
       subscribed = topic.isSubscribed();
       archived = topic.isArchived();
+      pinned = me.pinnedTopicRank(topicName) > 0;
 
       const acs = topic.getAccessMode();
       if (acs) {
@@ -1680,6 +1690,7 @@ class TinodeWeb extends React.Component {
       subscribed && deleter && !self ? 'messages_clear_hard' : null,
       self ? null : (muted ? (blocked ? null : 'topic_unmute') : 'topic_mute'),
       self ? null : (self_blocked ? 'topic_unblock' : 'topic_block'),
+      subscribed ? (pinned ? 'topic_unpin' : 'topic_pin') : null,
       archived ? 'topic_restore' : 'topic_archive',
       'topic_delete'
     ];