Improve UI for contextual chat and add warning message

customize.dist/src/less2/include/messenger.less

@@ -266,6 +266,24 @@
                     color: darken(@bg-color, 5%);
                 }
             }
+
+            .cp-app-contacts-header-title {
+                padding: 10px;
+                flex: 1;
+            }
+        }
+        .cp-app-contacts-tips {
+            margin: 1em;
+            background-color: lighten(@bg-color, 15%);
+            font-size: 14px;
+            padding: 10px;
+            position: relative;
+            .cp-app-contacts-tips-close {
+                cursor: pointer;
+                position: absolute;
+                top: 2px;
+                right: 2px;
+            }
         }
         .cp-app-contacts-chat {
             height: 100%;

customize.dist/src/less2/include/toolbar.less

@@ -150,8 +150,8 @@
         background-color: @toolbar-bg-color;
         background-color: var(--toolbar-bg-color);
         font: @colortheme_app-font-size @colortheme_font;
-        width: 30%;
+        width: 20%;
-        min-width: 400px;
+        min-width: 200px;
         display: block;
         overflow-y: auto;
         overflow-x: hidden;

customize.dist/translations/messages.fr.js

@@ -365,6 +365,8 @@ define(function () {
     out.contacts_remove = 'Supprimer ce contact';
     out.contacts_confirmRemove = 'Êtes-vous sûr de vouloir supprimer <em>{0}</em> de vos contacts ?';
     out.contacts_typeHere = "Entrez un message ici...";
+    out.contacts_warning = "Tout ce que vous tapez ici est permanent et visible par tous les utilisateurs actuels et futurs de ce pad. Soyez prudent avec vos données confidentielles !";
+    out.contacts_padTitle = "Chat";
 
     out.contacts_info1 = "Voici vos contacts. Ici, vous pouvez :";
     out.contacts_info2 = "Cliquer sur le nom d'un contact pour discuter avec lui";
@@ -380,6 +382,8 @@ define(function () {
     out.contacts_rooms = "Salons";
     out.contacts_leaveRoom = "Quitter ce salon";
 
+    out.contacts_online = "Un autre utilisateur est en ligne dans ce salon";
+
     // File manager
 
     out.fm_rootName = "Documents";

customize.dist/translations/messages.js

@@ -367,12 +367,11 @@ define(function () {
     out.contacts_remove = 'Remove this contact';
     out.contacts_confirmRemove = 'Are you sure you want to remove <em>{0}</em> from your contacts?';
     out.contacts_typeHere = "Type a message here...";
+    out.contacts_warning = "Everything you type here is persistent and available to all the existing and future users of this pad. Be careful with sensitive information!";
+    out.contacts_padTitle = "Chat";
 
-    out.contacts_info1_new = "Here is CryptPad messaging. From here, you can:";
+    out.contacts_info1 = "These are your contacts. From here, you can:";
-    out.contacts_info2_new = "Click the top icon to chat with members of this pad";
+    out.contacts_info2 = "Click your contact's icon to chat with them";
-    out.contacts_info2a_new = "Editors and viewers can use the chat";
-    out.contacts_info3_new = "Click on your friend's icon to chat with them";
-    out.contacts_info3a_new = "You can add a friend by joining the same pad and using the userlist";
     out.contacts_info3 = "Double-click their icon to view their profile";
     out.contacts_info4 = "Either participant can clear permanently a chat history";
 

www/contacts/messenger-ui.js

@@ -52,23 +52,12 @@ define([
         var messaging = h('div#cp-app-contacts-messaging', [
             h('span.fa.fa-spinner.fa-pulse.fa-4x.fa-fw.cp-app-contacts-spinner'),
             h('div.cp-app-contacts-info', [
-                h('h2', Messages.contacts_info1_new),
+                h('h2', Messages.contacts_info1),
                 h('ul', [
-                    isApp ? h('li', [
+                    h('li', Messages.contacts_info2),
-                        Messages.contacts_info2_new,
-                        h('ul', [
-                            h('li', Messages.contacts_info2a_new)
-                        ])
-                    ]) : undefined, // Display the pad chat info only if we're in a pad
-                    h('li', [
-                        Messages.contacts_info3_new,
-                        h('ul', [
-                            h('li', Messages.contacts_info3a_new),
                     h('li', Messages.contacts_info3),
                     h('li', Messages.contacts_info4),
                 ])
-                    ]),
-                ])
             ])
         ]);
 
@@ -300,11 +289,31 @@ define([
             });
 
             var avatar = h('div.cp-avatar');
-            var header = h('div.cp-app-contacts-header', [
+
-                avatar,
+            var headerContent = [avatar, moreHistory, data.isFriendCHat ? removeHistory : undefined];
-                moreHistory,
+            if (isApp) {
-                data.isFriendChat ? removeHistory: undefined,
+                headerContent = [
+                    h('div.cp-app-contacts-header-title', Messages.contacts_padTitle),
+                    moreHistory
+                ];
+            }
+            var header = h('div.cp-app-contacts-header', headerContent);
+
+            var priv = metadataMgr.getPrivateData();
+
+            var closeTips = h('span.fa.fa-window-close.cp-app-contacts-tips-close');
+            var tips;
+            if (isApp && Util.find(priv.settings, ['general', 'hidetips', 'chat']) !== true) {
+                tips = h('div.cp-app-contacts-tips', [
+                    closeTips,
+                    Messages.contacts_warning
                 ]);
+            }
+            $(closeTips).click(function () {
+                $(tips).hide();
+                common.setAttribute(['general', 'hidetips', 'chat'], true);
+            });
+
             var messages = h('div.cp-app-contacts-messages');
             var input = h('textarea', {
                 placeholder: Messages.contacts_typeHere
@@ -386,6 +395,7 @@ define([
                 'data-user': data.isFriendChat && curvePublic
             }, [
                 header,
+                tips,
                 messages,
                 h('div.cp-app-contacts-input', [
                     input,