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

css/base.css

@@ -37,6 +37,7 @@
   --clr-background-light-gray: light-dark(#f0f0f0, #0f0f0f); /* HR background, action button hover */
   --clr-background-extra-light-gray: light-dark(#eee, #222); /* Flat button faux bg, tabbar bg, chip bg */
   --clr-background-blue-gray-50: light-dark(#edf0f2, #202c33); /* Contact hover, messages panel, send message panel */
+  --clr-background-blue-gray-75: light-dark(#e1e8eb, #212c30); /* Contact pinned */
   --clr-background-blue-gray-100: light-dark(#cfd8dc, #20272a); /* Contact selected, uploader bar */
   --clr-background-blue-gray-300: light-dark(#b0bec5, #354146); /* Topic/Info caption panel bg, some lettertiles */
   --clr-blue-wash-light: light-dark(#f0f0ff, #224); /* bot form button bg, badge bg (blue) */
@@ -1318,6 +1319,9 @@ i.search {
 .contact-box > li.selected {
   background-color: var(--clr-background-blue-gray-100); /* blue-gray 100 highlight */
 }
+.contact-box > li.pinned {
+  background-color: var(--clr-background-blue-gray-100); /* blue-gray 100 highlight */
+}
 .contact-box > li.action {
   min-height: 2.5rem;
   border-bottom: none;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.25.0",
+  "version": "0.25.0-rc1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tinode/webapp.git"
@@ -75,7 +75,7 @@
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-intl": "^7.0.0",
-    "tinode-sdk": "^0.24.4",
+    "tinode-sdk": "^0.25.0-rc1",
     "webm-duration-fix": "^1.0.4"
   },
   "devDependencies": {

src/i18n/ar.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/de.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "Pin",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": false,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "Unpin",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -820,6 +820,10 @@
     "defaultMessage": "phone",
     "description": "Dative case of 'phone', i.e. 'phone' in 'by phone'"
   },
+  "pin_chat": {
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top."
+  },
   "pin_message": {
     "defaultMessage": "Pin",
     "description": "Menu item [Pin] for pinning message to the top."
@@ -1020,6 +1024,10 @@
     "defaultMessage": "Unnamed",
     "description": "Title shown when the topic has no name"
   },
+  "unpin_chat": {
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat."
+  },
   "unpin_message": {
     "defaultMessage": "Unpin",
     "description": "Menu item [Unpin] for un-pinning the message."

src/i18n/fr.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/it.json

@@ -1822,5 +1822,19 @@
     "description": "Label adjusting text size",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ko.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/th.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/uk.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1822,5 +1822,19 @@
     "description": "Label for send on enter settings",
     "missing": false,
     "obsolete": false
+  },
+  "pin_chat": {
+    "translation": "",
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning chat to the top.",
+    "missing": true,
+    "obsolete": false
+  },
+  "unpin_chat": {
+    "translation": "",
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the chat.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/lib/strformat.js

@@ -108,3 +108,18 @@ export function flagEmoji(countryCode) {
     .map(char => 0x1F1A5 + char.charCodeAt());
   return String.fromCodePoint(...codePoints);
 }
+
+// Truncate a string to a specific length and add ellipsis if needed.
+// Support both LTR and RTL languages.
+export function truncateString(str, maxLength) {
+  if (typeof str !== 'string') {
+    return str;
+  }
+  if (str.length <= maxLength) {
+    return str;
+  }
+
+  // Detect RTL characters in the string and truncate accordingly.
+  const isRTL = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/.test(str);
+  return isRTL ? '…' + str.slice(0, maxLength - 1) : str.slice(0, maxLength - 1) + '…';
+}

src/lib/strformat.test.js

@@ -5,7 +5,8 @@ import {
   bytesToHumanSize,
   shortenFileName,
   idToColorClass,
-  flagEmoji
+  flagEmoji,
+  truncateString
 } from './strformat.js';
 
 describe('shortDateFormat', () => {
@@ -152,3 +153,37 @@ describe('flagEmoji', () => {
     expect(flagEmoji('jp')).toBe('🇯🇵');
   });
 });
+
+describe('truncateString', () => {
+  test('should not truncate if not needed', () => {
+    expect(truncateString('short', 10)).toBe('short');
+  });
+
+  test('should truncate and add ellipsis for long strings', () => {
+    expect(truncateString('this is a long string', 10)).toBe('this is a…');
+  });
+
+  test('should handle RTL strings (Arabic)', () => {
+    expect(truncateString('هذا مثال لنص عربي طويل يحتاج.', 10)).toBe('…هذا مثال ');
+  });
+
+  test('should handle RTL strings (Hebrew)', () => {
+    expect(truncateString('זה דוגמה לטקסט עברי ארוך', 10)).toBe('…זה דוגמה ');
+  });
+
+  test('should handle RTL strings (Persian/Farsi)', () => {
+    expect(truncateString('این یک نمونه متن فارسی طولانی است', 10)).toBe('…این یک نم');
+  });
+
+  test('should handle RTL strings (Urdu)', () => {
+    expect(truncateString('یہ اردو زبان کا ایک طویل جملہ ہے', 10)).toBe('…یہ اردو ز');
+  });
+
+  test('should handle RTL strings (Arabic with mixed punctuation)', () => {
+    expect(truncateString('النص العربي الطويل! متحف الفن', 10)).toBe('…النص العر');
+  });
+
+  test('should handle RTL strings (Hebrew with English mixed)', () => {
+    expect(truncateString('טקסט עברי עם English מעורב', 10)).toBe('…טקסט עברי');
+  });
+});

src/lib/utils.js

@@ -248,7 +248,3 @@ export function cancelablePromise(promise) {
   };
 };
 
-// Clips string to the specified length.
-export function clipStr(str, length) {
-  return str && str.substring(0, length);
-}

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.25.0";
+export const PACKAGE_VERSION = "0.25.0-rc1";

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'
     ];

src/widgets/call-incoming.jsx

@@ -8,7 +8,7 @@ import { MAX_TITLE_LENGTH, MAX_PEER_TITLE_LENGTH } from '../config.js';
 import { CALL_STATE_INCOMING_RECEIVED } from '../constants.js';
 
 import { makeImageUrl } from '../lib/blob-helpers.js';
-import { clipStr } from '../lib/utils.js'
+import { truncateString } from '../lib/strformat.js';
 
 const RING_SOUND = new Audio('audio/call-in.m4a');
 
@@ -88,7 +88,7 @@ export default class CallIncoming extends React.Component {
     }
 
     this.setState({
-      fullName: clipStr(topic.public ? topic.public.fn : undefined, MAX_TITLE_LENGTH),
+      fullName: truncateString(topic.public ? topic.public.fn : undefined, MAX_TITLE_LENGTH),
       avatar: makeImageUrl(topic.public ? topic.public.photo : null),
       trustedBadges: badges,
     });
@@ -127,7 +127,7 @@ export default class CallIncoming extends React.Component {
                 topic={this.props.topic}
                 title={this.state.fullName} />
             </div>
-            <div className="caller-name">{clipStr(this.state.fullName, MAX_PEER_TITLE_LENGTH)}
+            <div className="caller-name">{truncateString(this.state.fullName, MAX_PEER_TITLE_LENGTH)}
               <BadgeList short={true} trustedBadges={this.state.trustedBadges} /></div>
           </div>
           <div className="controls">

src/widgets/call-panel.jsx

@@ -6,8 +6,7 @@ import LetterTile from './letter-tile.jsx';
 
 import { MAX_PEER_TITLE_LENGTH } from '../config.js';
 import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../constants.js';
-
+import { truncateString } from '../lib/strformat.js';
-import { clipStr } from '../lib/utils.js'
 
 const RING_SOUND = new Audio('audio/call-out.m4a');
 RING_SOUND.loop = true;
@@ -584,7 +583,7 @@ class CallPanel extends React.PureComponent {
     const disabled = !this.state.pc || !this.state.dataChannel || !(audioTracks && audioTracks[0]);
     const audioIcon = audioTracks && audioTracks[0] && audioTracks[0].enabled ? 'mic' : 'mic_off';
     const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled && videoTracks[0].readyState == 'live' ? 'videocam' : 'videocam_off';
-    const peerTitle = clipStr(this.props.title, MAX_PEER_TITLE_LENGTH);
+    const peerTitle = truncateString(this.props.title, MAX_PEER_TITLE_LENGTH);
     const pulseAnimation = this.state.waitingForPeer ? ' pulse' : '';
 
     let remoteActive = false;

src/widgets/contact.jsx

@@ -12,6 +12,7 @@ import { Drafty } from 'tinode-sdk';
 
 import { previewFormatter } from '../lib/formatters.js';
 import { deliveryMarker } from '../lib/utils.js';
+import { truncateString } from '../lib/strformat.js';
 
 const messages = defineMessages({
   self_topic_name: {
@@ -65,8 +66,8 @@ class Contact extends React.Component {
           description="Title shown when the topic has no name" /></i>;
       }
     } else if (title.length > 30) {
-      // FIXME: this is probably wrong for RTL languages.
+      // Have to support RTL languages too.
-      title = title.substring(0, 28) + '…';
+      title = truncateString(title, 30);
     }
     const online = this.props.now ? 'online' : 'offline';
     const avatar = this.props.avatar ? this.props.avatar : true;
@@ -115,8 +116,10 @@ class Contact extends React.Component {
 
     const comment = preview || this.props.comment ||
       (self ? this.props.intl.formatMessage(messages.self_topic_comment) : '\u00A0');
+    const bgColor = this.props.showCheckmark ? null :
+      (this.props.selected ? 'selected' : (this.props.pinned ? 'pinned' : null));
     return (
-      <li className={!this.props.showCheckmark && this.props.selected ? 'selected' : null} onClick={this.handleClick}>
+      <li className={bgColor} onClick={this.handleClick}>
         <div className="avatar-box">
           <LetterTile
             tinode={this.props.tinode}

src/widgets/context-menu.jsx

@@ -126,6 +126,16 @@ const messages = defineMessages({
     defaultMessage: 'Unpin',
     description: 'Menu item [Unpin] for un-pinning the message.'
   },
+  pin_chat: {
+    id: 'pin_chat',
+    defaultMessage: 'Pin',
+    description: 'Menu item [Pin] for pinning chat to the top.'
+  },
+  unpin_chat: {
+    id: 'unpin_chat',
+    defaultMessage: 'Unpin',
+    description: 'Menu item [Unpin] for un-pinning the chat.'
+  },
 });
 
 class ContextMenu extends React.Component {
@@ -326,6 +336,38 @@ class ContextMenu extends React.Component {
           });
         }
       },
+      'topic_pin': {
+        id: 'topic_pin',
+        title: formatMessage(messages.pin_chat),
+        handler: (params, errorHandler) => {
+          const me = this.props.tinode.getMeTopic();
+          if (!me) {
+            console.warn("'me' topic not found");
+            return;
+          }
+          return me.pinTopic(params.topicName, true).catch(err => {
+            if (errorHandler) {
+              errorHandler(err.message, 'err');
+            }
+          });
+        }
+      },
+      'topic_unpin': {
+        id: 'topic_unpin',
+        title: formatMessage(messages.unpin_chat),
+        handler: (params, errorHandler) => {
+          const me = this.props.tinode.getMeTopic();
+          if (!me) {
+            console.warn("'me' topic not found");
+            return;
+          }
+          return me.pinTopic(params.topicName, false).catch(err => {
+            if (errorHandler) {
+              errorHandler(err.message, 'err');
+            }
+          });
+        }
+      },
       // menu_item_edit_permissions is defined elsewhere.
       'permissions': {
         id: 'permissions',

src/widgets/new-topic-group.jsx

@@ -9,6 +9,7 @@ import TagManager from './tag-manager.jsx';
 import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE, MAX_TITLE_LENGTH,
   MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
 import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
+import { truncateString } from '../lib/strformat.js';
 
 export default class NewTopicGroup extends React.PureComponent {
   constructor(props) {
@@ -100,9 +101,9 @@ export default class NewTopicGroup extends React.PureComponent {
   handleSubmit(e) {
     e.preventDefault();
 
-    const fn = this.state.fullName.trim().substring(0, MAX_TITLE_LENGTH);
+    const fn = truncateString(this.state.fullName.trim(), MAX_TITLE_LENGTH);
-    const comment = this.state.private.trim().substring(0, MAX_TITLE_LENGTH);
+    const comment = truncateString(this.state.private.trim(), MAX_TITLE_LENGTH);
-    const description = this.state.description.trim().substring(0, MAX_TOPIC_DESCRIPTION_LENGTH);
+    const description = truncateString(this.state.description.trim(), MAX_TOPIC_DESCRIPTION_LENGTH);
     if (fn) {
       this.props.onSubmit(fn, description, this.state.imageUrl, comment, this.state.tags, this.state.isChannel);
     }

src/widgets/topic-desc-edit.jsx

@@ -13,6 +13,7 @@ import TagManager from './tag-manager.jsx';
 import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE, MAX_TITLE_LENGTH,
   MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
 import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
+import { truncateString } from '../lib/strformat.js';
 import { arrayEqual, theCard } from '../lib/utils.js';
 
 const messages = defineMessages({
@@ -98,7 +99,7 @@ class TopicDescEdit extends React.Component {
   }
 
   handleFullNameUpdate(fn) {
-    fn = fn.trim().substring(0, MAX_TITLE_LENGTH);
+    fn = truncateString(fn.trim(), MAX_TITLE_LENGTH);
     if (fn && this.state.fullName !== fn) {
       this.setState({fullName: fn});
       this.props.onUpdateTopicDesc(this.props.topic, theCard(fn, null));

umd/index.dev.js

@@ -8346,7 +8346,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   relativeDateFormat: function() { return /* binding */ relativeDateFormat; },
 /* harmony export */   secondsToTime: function() { return /* binding */ secondsToTime; },
 /* harmony export */   shortDateFormat: function() { return /* binding */ shortDateFormat; },
-/* harmony export */   shortenFileName: function() { return /* binding */ shortenFileName; }
+/* harmony export */   shortenFileName: function() { return /* binding */ shortenFileName; },
+/* harmony export */   truncateString: function() { return /* binding */ truncateString; }
 /* harmony export */ });
 function shortDateFormat(then, locale) {
   locale = locale || window.navigator.userLanguage || window.navigator.language;
@@ -8437,6 +8438,16 @@ function flagEmoji(countryCode) {
   const codePoints = countryCode.toUpperCase().split('').map(char => 0x1F1A5 + char.charCodeAt());
   return String.fromCodePoint(...codePoints);
 }
+function truncateString(str, maxLength) {
+  if (typeof str !== 'string') {
+    return str;
+  }
+  if (str.length <= maxLength) {
+    return str;
+  }
+  const isRTL = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/.test(str);
+  return isRTL ? '…' + str.slice(0, maxLength - 1) : str.slice(0, maxLength - 1) + '…';
+}
 
 /***/ }),
 
@@ -8452,7 +8463,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   asEmail: function() { return /* binding */ asEmail; },
 /* harmony export */   asPhone: function() { return /* binding */ asPhone; },
 /* harmony export */   cancelablePromise: function() { return /* binding */ cancelablePromise; },
-/* harmony export */   clipStr: function() { return /* binding */ clipStr; },
 /* harmony export */   deliveryMarker: function() { return /* binding */ deliveryMarker; },
 /* harmony export */   isUrlRelative: function() { return /* binding */ isUrlRelative; },
 /* harmony export */   sanitizeUrl: function() { return /* binding */ sanitizeUrl; },
@@ -8645,9 +8655,6 @@ function cancelablePromise(promise) {
   };
 }
 ;
-function clipStr(str, length) {
-  return str && str.substring(0, length);
-}
 
 /***/ }),
 
@@ -8661,7 +8668,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   PACKAGE_VERSION: function() { return /* binding */ PACKAGE_VERSION; }
 /* harmony export */ });
-const PACKAGE_VERSION = "0.25.0";
+const PACKAGE_VERSION = "0.25.0-rc1";
 
 /***/ }),
 
@@ -9156,8 +9163,10 @@ class ContactsView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     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);
       if (blocked && props.blocked) {
         contacts.push(c);
       }
@@ -9176,7 +9185,8 @@ class ContactsView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       }
     });
     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) {
       contacts.push({
@@ -12659,7 +12669,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     if (!this.state.ready) {
       newState.ready = true;
     }
-    this.tinode.getMeTopic().contacts(c => {
+    const me = this.tinode.getMeTopic();
+    me.contacts(c => {
       if (!c.topic && !c.user) {
         c.topic = c.name;
       }
@@ -12671,7 +12682,11 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     });
     const past = new Date(0);
     newState.chatList.sort((a, b) => {
-      return (a.touched || past).getTime() - (b.touched || past).getTime();
+      const pins = me.pinnedTopicRank(b.topic) - me.pinnedTopicRank(a.topic);
+      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));
     });
     newState.searchableContacts = TinodeWeb.prepareSearchableContacts(newState.chatList, this.state.searchResults);
     this.setState(newState);
@@ -13278,12 +13293,14 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     if (topic._deleted) {
       return ['topic_delete'];
     }
+    const me = this.tinode.getMeTopic();
     let muted = false,
       blocked = false,
       self_blocked = false,
       subscribed = false,
       deleter = false,
       archived = false,
+      pinned = false,
       webrtc = false,
       writer = false,
       p2p = false,
@@ -13291,6 +13308,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     if (topic) {
       subscribed = topic.isSubscribed();
       archived = topic.isArchived();
+      pinned = me.pinnedTopicRank(topicName) > 0;
       const acs = topic.getAccessMode();
       if (acs) {
         muted = acs.isMuted();
@@ -13312,7 +13330,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     } : null, subscribed && p2p && webrtc ? {
       title: this.props.intl.formatMessage(messages.menu_item_video_call),
       handler: this.handleStartVideoCall
-    } : null, subscribed ? 'messages_clear' : null, subscribed && deleter && !self ? 'messages_clear_hard' : null, self ? null : muted ? blocked ? null : 'topic_unmute' : 'topic_mute', self ? null : self_blocked ? 'topic_unblock' : 'topic_block', archived ? 'topic_restore' : 'topic_archive', 'topic_delete'];
+    } : null, subscribed ? 'messages_clear' : null, 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'];
   }
   handleHideContextMenu() {
     this.setState({
@@ -14731,7 +14749,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
 /* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants.js */ "./src/constants.js");
 /* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
-/* harmony import */ var _lib_utils_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../lib/utils.js */ "./src/lib/utils.js");
+/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
 
 
 
@@ -14810,7 +14828,7 @@ class CallIncoming extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       }
     }
     this.setState({
-      fullName: (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_6__.clipStr)(topic.public ? topic.public.fn : undefined, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_TITLE_LENGTH),
+      fullName: (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_6__.truncateString)(topic.public ? topic.public.fn : undefined, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_TITLE_LENGTH),
       avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_5__.makeImageUrl)(topic.public ? topic.public.photo : null),
       trustedBadges: badges
     });
@@ -14848,7 +14866,7 @@ class CallIncoming extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       title: this.state.fullName
     })), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "caller-name"
-    }, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_6__.clipStr)(this.state.fullName, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_PEER_TITLE_LENGTH), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_badge_list_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
+    }, (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_6__.truncateString)(this.state.fullName, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_PEER_TITLE_LENGTH), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_badge_list_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
       short: true,
       trustedBadges: this.state.trustedBadges
     }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -14985,7 +15003,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _letter_tile_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./letter-tile.jsx */ "./src/widgets/letter-tile.jsx");
 /* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
 /* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants.js */ "./src/constants.js");
-/* harmony import */ var _lib_utils_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../lib/utils.js */ "./src/lib/utils.js");
+/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
 
 
 
@@ -15490,7 +15508,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     const disabled = !this.state.pc || !this.state.dataChannel || !(audioTracks && audioTracks[0]);
     const audioIcon = audioTracks && audioTracks[0] && audioTracks[0].enabled ? 'mic' : 'mic_off';
     const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled && videoTracks[0].readyState == 'live' ? 'videocam' : 'videocam_off';
-    const peerTitle = (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_5__.clipStr)(this.props.title, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_PEER_TITLE_LENGTH);
+    const peerTitle = (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_5__.truncateString)(this.props.title, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_PEER_TITLE_LENGTH);
     const pulseAnimation = this.state.waitingForPeer ? ' pulse' : '';
     let remoteActive = false;
     if (this.remoteRef.current && this.remoteRef.current.srcObject && this.state.remoteVideoLive) {
@@ -16447,6 +16465,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _unread_badge_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./unread-badge.jsx */ "./src/widgets/unread-badge.jsx");
 /* harmony import */ var _lib_formatters_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../lib/formatters.js */ "./src/lib/formatters.js");
 /* harmony import */ var _lib_utils_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../lib/utils.js */ "./src/lib/utils.js");
+/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
+
 
 
 
@@ -16511,7 +16531,7 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
         }));
       }
     } else if (title.length > 30) {
-      title = title.substring(0, 28) + '…';
+      title = (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_8__.truncateString)(title, 30);
     }
     const online = this.props.now ? 'online' : 'offline';
     const avatar = this.props.avatar ? this.props.avatar : true;
@@ -16580,8 +16600,9 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
     }, icon.name) : null;
     const titleClass = 'contact-title' + (this.props.deleted ? ' deleted' : '');
     const comment = preview || this.props.comment || (self ? this.props.intl.formatMessage(messages.self_topic_comment) : '\u00A0');
+    const bgColor = this.props.showCheckmark ? null : this.props.selected ? 'selected' : this.props.pinned ? 'pinned' : null;
     return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
-      className: !this.props.showCheckmark && this.props.selected ? 'selected' : null,
+      className: bgColor,
       onClick: this.handleClick
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "avatar-box"
@@ -16813,6 +16834,20 @@ const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
       "type": 0,
       "value": "Unpin"
     }]
+  },
+  pin_chat: {
+    id: "pin_chat",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Pin"
+    }]
+  },
+  unpin_chat: {
+    id: "unpin_chat",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Unpin"
+    }]
   }
 });
 class ContextMenu extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
@@ -16985,6 +17020,38 @@ class ContextMenu extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
           });
         }
       },
+      'topic_pin': {
+        id: 'topic_pin',
+        title: formatMessage(messages.pin_chat),
+        handler: (params, errorHandler) => {
+          const me = this.props.tinode.getMeTopic();
+          if (!me) {
+            console.warn("'me' topic not found");
+            return;
+          }
+          return me.pinTopic(params.topicName, true).catch(err => {
+            if (errorHandler) {
+              errorHandler(err.message, 'err');
+            }
+          });
+        }
+      },
+      'topic_unpin': {
+        id: 'topic_unpin',
+        title: formatMessage(messages.unpin_chat),
+        handler: (params, errorHandler) => {
+          const me = this.props.tinode.getMeTopic();
+          if (!me) {
+            console.warn("'me' topic not found");
+            return;
+          }
+          return me.pinTopic(params.topicName, false).catch(err => {
+            if (errorHandler) {
+              errorHandler(err.message, 'err');
+            }
+          });
+        }
+      },
       'permissions': {
         id: 'permissions',
         title: formatMessage(messages.edit_permissions),
@@ -18761,6 +18828,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _tag_manager_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./tag-manager.jsx */ "./src/widgets/tag-manager.jsx");
 /* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
 /* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
+/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
+
 
 
 
@@ -18864,9 +18933,9 @@ class NewTopicGroup extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
   }
   handleSubmit(e) {
     e.preventDefault();
-    const fn = this.state.fullName.trim().substring(0, _config_js__WEBPACK_IMPORTED_MODULE_6__.MAX_TITLE_LENGTH);
+    const fn = (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_8__.truncateString)(this.state.fullName.trim(), _config_js__WEBPACK_IMPORTED_MODULE_6__.MAX_TITLE_LENGTH);
-    const comment = this.state.private.trim().substring(0, _config_js__WEBPACK_IMPORTED_MODULE_6__.MAX_TITLE_LENGTH);
+    const comment = (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_8__.truncateString)(this.state.private.trim(), _config_js__WEBPACK_IMPORTED_MODULE_6__.MAX_TITLE_LENGTH);
-    const description = this.state.description.trim().substring(0, _config_js__WEBPACK_IMPORTED_MODULE_6__.MAX_TOPIC_DESCRIPTION_LENGTH);
+    const description = (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_8__.truncateString)(this.state.description.trim(), _config_js__WEBPACK_IMPORTED_MODULE_6__.MAX_TOPIC_DESCRIPTION_LENGTH);
     if (fn) {
       this.props.onSubmit(fn, description, this.state.imageUrl, comment, this.state.tags, this.state.isChannel);
     }
@@ -20036,7 +20105,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _tag_manager_jsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./tag-manager.jsx */ "./src/widgets/tag-manager.jsx");
 /* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
 /* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
-/* harmony import */ var _lib_utils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../lib/utils.js */ "./src/lib/utils.js");
+/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
+/* harmony import */ var _lib_utils_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../lib/utils.js */ "./src/lib/utils.js");
+
 
 
 
@@ -20129,12 +20200,12 @@ class TopicDescEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
     });
   }
   handleFullNameUpdate(fn) {
-    fn = fn.trim().substring(0, _config_js__WEBPACK_IMPORTED_MODULE_7__.MAX_TITLE_LENGTH);
+    fn = (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_9__.truncateString)(fn.trim(), _config_js__WEBPACK_IMPORTED_MODULE_7__.MAX_TITLE_LENGTH);
     if (fn && this.state.fullName !== fn) {
       this.setState({
         fullName: fn
       });
-      this.props.onUpdateTopicDesc(this.props.topic, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_9__.theCard)(fn, null));
+      this.props.onUpdateTopicDesc(this.props.topic, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_10__.theCard)(fn, null));
     }
   }
   handlePrivateUpdate(comment) {
@@ -20152,7 +20223,7 @@ class TopicDescEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
       this.setState({
         description: desc
       });
-      this.props.onUpdateTopicDesc(this.props.topic, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_9__.theCard)(null, null, null, desc));
+      this.props.onUpdateTopicDesc(this.props.topic, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_10__.theCard)(null, null, null, desc));
     }
   }
   handleImageUpdated(mime, img) {
@@ -20164,7 +20235,7 @@ class TopicDescEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
       this.setState({
         avatar: null
       });
-      this.props.onUpdateTopicDesc(this.props.topic, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_9__.theCard)(null, tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.DEL_CHAR));
+      this.props.onUpdateTopicDesc(this.props.topic, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_10__.theCard)(null, tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.DEL_CHAR));
     }
   }
   handleAvatarCropped(mime, blob, width, height) {
@@ -20186,7 +20257,7 @@ class TopicDescEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
       } = image;
       if (blob.size > _config_js__WEBPACK_IMPORTED_MODULE_7__.MAX_AVATAR_BYTES) {
         const uploader = this.props.tinode.getLargeFileHelper();
-        uploader.upload(blob).then(url => this.props.onUpdateTopicDesc(this.props.topic, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_9__.theCard)(null, url))).catch(err => this.props.onError(err.message, 'err'));
+        uploader.upload(blob).then(url => this.props.onUpdateTopicDesc(this.props.topic, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_10__.theCard)(null, url))).catch(err => this.props.onError(err.message, 'err'));
       } else {
         (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_8__.blobToBase64)(blob).then(b64 => {
           const du = (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_8__.makeImageUrl)({
@@ -20196,7 +20267,7 @@ class TopicDescEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
           this.setState({
             source: du
           });
-          this.props.onUpdateTopicDesc(this.props.topic, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_9__.theCard)(null, du));
+          this.props.onUpdateTopicDesc(this.props.topic, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_10__.theCard)(null, du));
         });
       }
     };
@@ -20277,7 +20348,7 @@ class TopicDescEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
     }
   }
   handleTagsUpdated(tags) {
-    if ((0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_9__.arrayEqual)(this.state.tags.slice(0), tags.slice(0))) {
+    if ((0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_10__.arrayEqual)(this.state.tags.slice(0), tags.slice(0))) {
       return;
     }
     this.props.onUpdateTags(tags);

umd/src_views_account-settings-view_jsx.dev.js

@@ -28,9 +28,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var libphonenumber_js_mobile__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! libphonenumber-js/mobile */ "./node_modules/libphonenumber-js/mobile/exports/parsePhoneNumberWithError.js");
 /* harmony import */ var _widgets_avatar_upload_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../widgets/avatar-upload.jsx */ "./src/widgets/avatar-upload.jsx");
 /* harmony import */ var _widgets_badge_list_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../widgets/badge-list.jsx */ "./src/widgets/badge-list.jsx");
-/* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
+/* harmony import */ var _widgets_credential_edit_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../widgets/credential-edit.jsx */ "./src/widgets/credential-edit.jsx");
-/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
+/* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
-/* harmony import */ var _widgets_credential_edit_jsx__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../widgets/credential-edit.jsx */ "./src/widgets/credential-edit.jsx");
+/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
+/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
+
 
 
 
@@ -40,16 +42,16 @@ __webpack_require__.r(__webpack_exports__);
 
 
 function _clip(str, length) {
-  return str && str.substring(0, length);
+  return (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_7__.truncateString)(str, length);
 }
 class AccountSettingsView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
   constructor(props) {
     super(props);
     const me = this.props.tinode.getMeTopic();
     this.state = {
-      fullName: _clip(me.public ? me.public.fn : undefined, _config_js__WEBPACK_IMPORTED_MODULE_6__.MAX_TITLE_LENGTH),
+      fullName: _clip(me.public ? me.public.fn : undefined, _config_js__WEBPACK_IMPORTED_MODULE_8__.MAX_TITLE_LENGTH),
-      description: _clip(me.public ? me.public.note : undefined, _config_js__WEBPACK_IMPORTED_MODULE_6__.MAX_TOPIC_DESCRIPTION_LENGTH),
+      description: _clip(me.public ? me.public.note : undefined, _config_js__WEBPACK_IMPORTED_MODULE_8__.MAX_TOPIC_DESCRIPTION_LENGTH),
-      avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_5__.makeImageUrl)(me.public ? me.public.photo : null),
+      avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_6__.makeImageUrl)(me.public ? me.public.photo : null),
       credentials: me.getCredentials() || [],
       credEdit: undefined,
       alias: ((me.tags() || []).find(tag => tag.startsWith('alias:')) || '').substring(6)
@@ -67,7 +69,7 @@ class AccountSettingsView extends (react__WEBPACK_IMPORTED_MODULE_0___default().
   }
   render() {
     if (this.state.credEdit) {
-      return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_credential_edit_jsx__WEBPACK_IMPORTED_MODULE_7__["default"], {
+      return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_credential_edit_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], {
         method: this.state.credEdit.meth,
         val: this.state.credEdit.val,
         done: this.state.credEdit.done,

umd/src_views_create-account-view_jsx.dev.js

@@ -33,7 +33,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../lib/local-storage.js */ "./src/lib/local-storage.js");
 /* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
 /* harmony import */ var _lib_utils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../lib/utils.js */ "./src/lib/utils.js");
-/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
+/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
+/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
+
 
 
 
@@ -124,7 +126,7 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
   }
   handleSubmit(e) {
     e.preventDefault();
-    this.props.onCreateAccount(this.state.login.trim(), this.state.password.trim(), (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_9__.theCard)(this.state.fn.trim().substring(0, _config_js__WEBPACK_IMPORTED_MODULE_10__.MAX_TITLE_LENGTH), this.state.uploadUrl), {
+    this.props.onCreateAccount(this.state.login.trim(), this.state.password.trim(), (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_9__.theCard)((0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_10__.truncateString)(this.state.fn.trim(), _config_js__WEBPACK_IMPORTED_MODULE_11__.MAX_TITLE_LENGTH), this.state.uploadUrl), {
       'meth': this.state.meth,
       'val': this.state.meth == 'email' ? this.state.email : this.state.meth == 'tel' ? this.state.tel : null
     });
@@ -155,7 +157,7 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
         imageUrl: URL.createObjectURL(blob),
         buttonDisabled: true
       });
-      if (blob.size > _config_js__WEBPACK_IMPORTED_MODULE_10__.MAX_AVATAR_BYTES) {
+      if (blob.size > _config_js__WEBPACK_IMPORTED_MODULE_11__.MAX_AVATAR_BYTES) {
         const uploader = this.props.tinode.getLargeFileHelper();
         uploader.upload(blob, 'newacc').then(url => this.setState({
           uploadUrl: url
@@ -173,8 +175,8 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
         }));
       }
     };
-    if (width > _config_js__WEBPACK_IMPORTED_MODULE_10__.AVATAR_SIZE || height > _config_js__WEBPACK_IMPORTED_MODULE_10__.AVATAR_SIZE || width != height) {
+    if (width > _config_js__WEBPACK_IMPORTED_MODULE_11__.AVATAR_SIZE || height > _config_js__WEBPACK_IMPORTED_MODULE_11__.AVATAR_SIZE || width != height) {
-      (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_8__.imageScaled)(blob, _config_js__WEBPACK_IMPORTED_MODULE_10__.AVATAR_SIZE, _config_js__WEBPACK_IMPORTED_MODULE_10__.AVATAR_SIZE, _config_js__WEBPACK_IMPORTED_MODULE_10__.MAX_EXTERN_ATTACHMENT_SIZE, true).then(scaled => readyToUpload(scaled)).catch(err => this.props.onError(err.message, 'err'));
+      (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_8__.imageScaled)(blob, _config_js__WEBPACK_IMPORTED_MODULE_11__.AVATAR_SIZE, _config_js__WEBPACK_IMPORTED_MODULE_11__.AVATAR_SIZE, _config_js__WEBPACK_IMPORTED_MODULE_11__.MAX_EXTERN_ATTACHMENT_SIZE, true).then(scaled => readyToUpload(scaled)).catch(err => this.props.onError(err.message, 'err'));
     } else {
       readyToUpload({
         mime: mime,

umd/src_views_info-view_jsx.dev.js

@@ -28,6 +28,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
 /* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
 /* harmony import */ var _lib_utils_js__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../lib/utils.js */ "./src/lib/utils.js");
+/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
+
 
 
 
@@ -270,11 +272,11 @@ class InfoView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       sharer: acs && acs.isSharer(),
       deleter: acs && acs.isDeleter(),
       muted: acs && acs.isMuted(),
-      fullName: isSelf ? props.intl.formatMessage(messages.self_topic_name) : (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_16__.clipStr)(topic.public && topic.public.fn, _config_js__WEBPACK_IMPORTED_MODULE_14__.MAX_TITLE_LENGTH),
+      fullName: isSelf ? props.intl.formatMessage(messages.self_topic_name) : (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_17__.truncateString)(topic.public && topic.public.fn, _config_js__WEBPACK_IMPORTED_MODULE_14__.MAX_TITLE_LENGTH),
-      description: isSelf ? props.intl.formatMessage(messages.self_topic_comment) : (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_16__.clipStr)(topic.public && topic.public.note, _config_js__WEBPACK_IMPORTED_MODULE_14__.MAX_TOPIC_DESCRIPTION_LENGTH),
+      description: isSelf ? props.intl.formatMessage(messages.self_topic_comment) : (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_17__.truncateString)(topic.public && topic.public.note, _config_js__WEBPACK_IMPORTED_MODULE_14__.MAX_TOPIC_DESCRIPTION_LENGTH),
       avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_15__.makeImageUrl)(topic.public ? topic.public.photo : null),
       trustedBadges: badges,
-      private: (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_16__.clipStr)(topic.private && topic.private.comment, _config_js__WEBPACK_IMPORTED_MODULE_14__.MAX_TITLE_LENGTH),
+      private: (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_17__.truncateString)(topic.private && topic.private.comment, _config_js__WEBPACK_IMPORTED_MODULE_14__.MAX_TITLE_LENGTH),
       archived: topic.isArchived(),
       address: topic.name,
       groupTopic: topic.isGroupType(),

umd/tinode.dev.js

@@ -3753,6 +3753,38 @@ class TopicMe extends _topic_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
   getCredentials() {
     return this._credentials;
   }
+  pinTopic(topic, pin) {
+    if (!this._attached) {
+      return Promise.reject(new Error("Cannot pin topic in inactive 'me' topic"));
+    }
+    if (!_topic_js__WEBPACK_IMPORTED_MODULE_2__["default"].isCommTopicName(topic)) {
+      return Promise.reject(new Error("Invalid topic to pin"));
+    }
+    const tpin = Array.isArray(this.private && this.private.tpin) ? this.private.tpin : [];
+    const found = tpin.includes(topic);
+    if (pin && found || !pin && !found) {
+      return Promise.resolve(tpin);
+    }
+    if (pin) {
+      tpin.unshift(topic);
+    } else {
+      tpin.splice(tpin.indexOf(topic), 1);
+    }
+    return this.setMeta({
+      desc: {
+        private: {
+          tpin: tpin.length > 0 ? tpin : _config_js__WEBPACK_IMPORTED_MODULE_1__.DEL_CHAR
+        }
+      }
+    });
+  }
+  pinnedTopicRank(topic) {
+    if (!this.private || !this.private.tpin) {
+      return 0;
+    }
+    const idx = this.private.tpin.indexOf(topic);
+    return idx < 0 ? 0 : this.private.tpin.length - idx;
+  }
 }
 
 /***/ }),
@@ -4315,6 +4347,12 @@ class Topic {
     }
     return Promise.resolve();
   }
+  pinTopic(topic, pin) {
+    return Promise.reject(new Error("Pinning topics is not supported here"));
+  }
+  pinnedTopicRank(topic) {
+    return 0;
+  }
   delMessages(ranges, hard) {
     if (!this._attached) {
       return Promise.reject(new Error("Cannot delete messages in inactive topic"));
@@ -5400,7 +5438,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   PACKAGE_VERSION: () => (/* binding */ PACKAGE_VERSION)
 /* harmony export */ });
-const PACKAGE_VERSION = "0.24.4";
+const PACKAGE_VERSION = "0.25.0-rc1";
 
 /***/ })
 

version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-const PACKAGE_VERSION = "0.25.0";
+const PACKAGE_VERSION = "0.25.0-rc1";