Improved whisper menu

assets/chat/css/style.scss

@@ -1285,66 +1285,84 @@ hr {
 }
 
 #chat-whisper-users {
-  .content > ul {
-    margin: 0;
-    padding: $gutter-md 0;
-  }
-  .conversation {
-    list-style: none;
-    position: relative;
-    cursor: pointer;
-    padding-left: $gutter-md;
-    display: flex;
-    align-items: center;
-    .user {
-      color: $color-accent;
-      display: block;
-    }
-    .user:hover {
-      color: $color-accent-light;
-      .badge {
-        color: $color-chat-text1;
+  .section {
+    margin: 1.5em 0em 0.5em;
+    .title {
+      padding: 0em 0em 0.2em 1em;
+      font-weight: 600;
+      border-bottom: 1px solid;
+      .features {
+        float: right;
+        display: inline-flex;
+        vertical-align: text-top;
+        align-items: center;
+        margin-right: $gutter-md;
+        .flair {
+          cursor: pointer;
+          margin-right: $gutter-xs;
+        }
       }
     }
-    .badge {
-      font-size: 0.8em;
-      padding: 0 $gutter-md;
-      display: inline-block;
-      background: $color-surface-dark4;
-      border-radius: 50%;
-      margin: $gutter-xs 0;
-      color: $color-chat-text2;
-    }
-    .badge,
-    .remove {
-      float: right;
-      margin-right: $gutter-md;
-    }
-    .remove {
-      opacity: 0.25;
-      background: transparent url(../img/icon-close.svg) no-repeat center center;
-      background-size: contain;
-      display: inline-block;
+    .user-entry {
+      margin: 0;
+      cursor: pointer;
+      padding: 0 $gutter-lg;
       text-decoration: none;
-      text-align: center;
-      line-height: 1.3em;
-      width: 1.3em;
-      height: 1.3em;
-    }
-    .remove:hover {
-      opacity: 1;
+      visibility: visible;
+      align-items: center;
+      display: flex;
+      .right {
+        position: absolute;
+        right: $gutter-md;
+        .unread {
+          font-size: 0.8em;
+          padding: 0 $gutter-md;
+          display: inline-block;
+          background: $color-surface-dark4;
+          border-radius: 1em;
+          margin: $gutter-xs 0;
+          color: $color-chat-text2;
+          margin-right: $gutter-md;
+        }
+      }
+      &:hover {
+        background: #282828;
+      }
+      &::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        margin-right: $gutter-sm;
+        -moz-border-radius: 7.5px;
+        -webkit-border-radius: 7.5px;
+        border-radius: 7.5px;
+      }
+      &.online::before {
+        background-color: $color-green;
+      }
+      &.offline::before {
+        background-color: $color-black;
+      }
     }
   }
-  .unread-0 .badge {
+  .content {
+    margin-top: -$gutter-md;
+    padding-bottom: $gutter-lg;
+  }
+  .scrollable {
+    max-height: calc(100% - 3em);
+  }
+  &.search-in .user-entry {
     display: none;
   }
-  .unread-0 .user,
-  .unread-0 .user:hover {
-    color: $text-color1;
+  &.search-in .user-entry.found {
+    display: flex;
   }
-  .empty {
-    color: $text-color1;
-    margin: $gutter-lg;
+  input {
+    padding: $gutter-lg $gutter-lg;
+    border: none;
+    background: none;
+    border-radius: 0;
   }
 }
 

assets/chat/js/chat.js

@@ -541,21 +541,24 @@ class Chat {
   }
 
   async loadWhispers() {
-    fetch(`${this.config.api.base}/api/messages/unread`, {
+    fetch(`${this.config.api.base}/api/messages/inbox`, {
       credentials: 'include',
     })
       .then((res) => res.json())
-      .then((d) => {
-        d.forEach((e) =>
-          this.whispers.set(e.username.toLowerCase(), {
-            id: e.messageid,
-            nick: e.username,
+      .then((data) => {
+        data.forEach((e) =>
+          this.whispers.set(e.user.toLowerCase(), {
+            id: e.id,
+            nick: e.user,
+            time: e.timestamp,
             unread: Number(e.unread),
+            read: Number(e.read),
             open: false,
+            found: false,
           }),
         );
+        this.menus.get('whisper-users').redraw();
       })
-      .then(() => this.menus.get('whisper-users').redraw())
       .catch(() => {});
   }
 

assets/chat/js/menus/ChatWhisperUsers.js

@@ -1,21 +1,45 @@
-import $ from 'jquery';
+import moment from 'moment';
+import { debounce } from 'throttle-debounce';
 import ChatMenu from './ChatMenu';
-import ChatUser from '../user';
 
 export default class ChatWhisperUsers extends ChatMenu {
   constructor(ui, btn, chat) {
     super(ui, btn, chat);
     this.unread = 0;
-    this.empty = $(`<span class="empty">No new whispers :(</span>`);
-    this.notif = $(`<span id="chat-whisper-unread-indicator"></span>`);
-    this.btn.append(this.notif);
-    this.usersEl = ui.find('ul:first');
-    this.usersEl.on('click', '.user', (e) =>
-      chat.openConversation(e.target.getAttribute('data-username')),
+    this.searchterm = '';
+    this.notif = this.chat.ui.find('#chat-whisper-unread-indicator');
+    this.unreadEl = this.ui.find('.whispers-unread .whispers');
+    this.readEl = this.ui.find('.whispers-read .whispers');
+    this.searchinput = this.ui.find(
+      '#chat-whisper-users-search .form-control:first',
     );
-    this.usersEl.on('click', '.remove', (e) =>
-      this.removeConversation(e.target.getAttribute('data-username')),
+    this.ui.on('click', '.user-entry', (e) =>
+      chat.openConversation(e.currentTarget.getAttribute('data-username')),
     );
+    this.searchinput.on(
+      'keyup',
+      debounce(
+        100,
+        () => {
+          this.searchterm = this.searchinput.val();
+          this.filter();
+          this.redraw();
+        },
+        { atBegin: false },
+      ),
+    );
+  }
+
+  filter() {
+    [...this.chat.whispers.values()].forEach((whisper) => {
+      if (
+        whisper.nick.toLowerCase().indexOf(this.searchterm.toLowerCase()) >= 0
+      ) {
+        whisper.found = true;
+      } else {
+        whisper.found = false;
+      }
+    });
   }
 
   removeConversation(nick) {
@@ -27,8 +51,8 @@ export default class ChatWhisperUsers extends ChatMenu {
 
   updateNotification() {
     const wasunread = this.unread;
-    this.unread = [...this.chat.whispers.entries()]
-      .map((e) => parseInt(e[1].unread, 10))
+    this.unread = [...this.chat.whispers.values()]
+      .map((e) => parseInt(e.unread, 10))
       .reduce((a, b) => a + b, 0);
     if (wasunread < this.unread) {
       this.btn.addClass('ping');
@@ -46,33 +70,35 @@ export default class ChatWhisperUsers extends ChatMenu {
 
   redraw() {
     this.updateNotification(); // its always visible
-    if (this.visible) {
-      this.usersEl.empty();
-      if (this.chat.whispers.size === 0) {
-        this.usersEl.append(this.empty);
-      } else {
-        [...this.chat.whispers.entries()]
-          .sort((a, b) => {
-            if (a[1].unread === 0) return 1;
-            if (b[1].unread === 0) return -1;
-            return 0;
-          })
-          .forEach((e) => this.addConversation(e[0], e[1].unread));
-      }
+    this.unreadEl.empty();
+    this.readEl.empty();
+    if (this.chat.whispers.size > 0) {
+      [...this.chat.whispers.values()]
+        .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+        .forEach((whisper) => this.addConversation(whisper));
     }
+    this.ui.toggleClass('search-in', this.searchterm.length > 0);
     super.redraw();
   }
 
-  addConversation(nick, unread) {
-    const user = this.chat.users.get(nick.toLowerCase()) || new ChatUser(nick);
-    this.usersEl.append(`
-            <li class="conversation unread-${unread}">
-                <a style="flex: 1;" data-username="${user.nick.toLowerCase()}" class="user">${
-                  user.nick
-                }</a>
-                <span class="badge">${unread}</span>
-                <a data-username="${user.nick.toLowerCase()}" title="Hide" class="remove"></a>
-            </li>
-        `);
+  addConversation(whisper) {
+    const time = moment.utc(whisper.time).local();
+    const found = whisper.found && this.searchterm.length > 0 ? ' found' : '';
+    const online = this.chat.users.has(whisper.nick.toLowerCase())
+      ? 'online'
+      : 'offline';
+    const unread =
+      whisper.unread > 0
+        ? `<span class="unread">${whisper.unread} new</span>`
+        : '';
+
+    (whisper.unread > 0 ? this.unreadEl : this.readEl).append(`
+    <div class="user-entry ${online}${found}" title="${online}" data-username="${whisper.nick.toLowerCase()}">
+      <span class="user">${whisper.nick}</span>
+      <div class="right">
+        ${unread}
+        <span class="time">${time.format('DD/MM/YY')}</span>
+      </div>
+    </div>`);
   }
 }

assets/views/embed.html

@@ -48,6 +48,7 @@
         </a>
         <a id="chat-whisper-btn" class="chat-tool-btn" title="Whispers">
           <i class="btn-icon"></i>
+          <span id="chat-whisper-unread-indicator"></span>
         </a>
       </div>
       <div class="chat-tools-group">
@@ -317,9 +318,24 @@ <h5><span>Whispers</span> <i class="chat-menu-close"></i></h5>
       </div>
       <div class="scrollable">
         <div class="content">
-          <ul></ul>
+          <div class="section whispers-unread">
+            <p class="title">Unread</p>
+            <div class="whispers"></div>
+          </div>
+          <div class="section whispers-read">
+            <p class="title">Read</p>
+            <div class="whispers"></div>
+          </div>
         </div>
       </div>
+      <div id="chat-whisper-users-search">
+        <input
+          type="text"
+          class="form-control"
+          value=""
+          placeholder="Username search ..."
+        />
+      </div>
     </div>
   </div>