Improved whisper menu

assets/chat/css/menus/_whispers-list.scss

@@ -1,78 +1,84 @@
 @use '../abstracts/' as a;
 
 #chat-whisper-users {
-  .content > ul {
-    margin: 0;
-    padding: a.$gutter-md 0;
-  }
-
-  .unread-0 {
-    .badge {
-      display: none;
-    }
+  .section {
+    margin-block: 1.5em 0.5em;
 
-    .user,
-    .user:hover {
-      color: a.$text-color1;
+    &__title {
+      padding: 0em 0em 0.2em 1em;
+      font-weight: 600;
+      border-bottom: 1px solid;
     }
   }
 
-  .empty {
-    color: a.$text-color1;
-    margin: a.$gutter-lg;
-  }
-}
+  .conversation {
+    cursor: pointer;
+    padding-inline: a.$gutter-lg;
+    align-items: center;
+    display: flex;
 
-.conversation {
-  list-style: none;
-  position: relative;
-  cursor: pointer;
-  padding-left: a.$gutter-md;
-  display: flex;
-  align-items: center;
+    &__online-icon {
+      width: 8px;
+      height: 8px;
+      margin-right: a.$gutter-sm;
+      border-radius: 100%;
+    }
 
-  .user {
-    color: a.$color-accent;
-    display: block;
+    &__username {
+      flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
 
-    &:hover {
-      color: a.$color-accent-light;
+    &__unread {
+      white-space: nowrap;
+      font-size: 0.8rem;
+      padding-inline: a.$gutter-md;
+      background: a.$color-surface-dark4;
+      border-radius: 1rem;
+      margin-block: a.$gutter-xs;
+      color: a.$color-chat-text2;
+      margin-inline-end: a.$gutter-md;
+    }
+
+    &__time {
+      white-space: nowrap;
+    }
 
-      .badge {
-        color: a.$color-chat-text1;
+    &--online {
+      .conversation {
+        &__online-icon {
+          background-color: a.$color-green;
+        }
       }
     }
-  }
 
-  .badge,
-  .remove {
-    float: right;
-    margin-right: a.$gutter-md;
-  }
+    &--offline {
+      .conversation {
+        &__online-icon {
+          background-color: a.$color-black;
+        }
+      }
+    }
 
-  .badge {
-    font-size: 0.8em;
-    padding: 0 a.$gutter-md;
-    display: inline-block;
-    background: a.$color-surface-dark4;
-    border-radius: 50%;
-    margin: a.$gutter-xs 0;
-    color: a.$color-chat-text2;
+    &:hover {
+      background: #282828;
+    }
   }
 
-  .remove {
-    opacity: 0.25;
-    display: inline-block;
-    text-decoration: none;
-    text-align: center;
-    line-height: 1.3em;
-    width: 1.3em;
-    height: 1.3em;
-
-    @include a.icon-background('../img/icon-close.svg');
+  &.search-in .conversation {
+    display: none;
 
-    &:hover {
-      opacity: 1;
+    &.found {
+      display: flex;
     }
   }
+
+  input {
+    padding: a.$gutter-lg a.$gutter-lg;
+    border: none;
+    background: none;
+    border-radius: 0;
+  }
 }

assets/chat/js/chat.js

@@ -612,21 +612,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,23 +1,52 @@
-import $ from 'jquery';
+import moment from 'moment';
+import { debounce } from 'throttle-debounce';
+import tippy, { roundArrow } from 'tippy.js';
 import ChatMenu from './ChatMenu';
-import ChatUser from '../user';
 
 export default class ChatWhisperUsers extends ChatMenu {
   constructor(ui, btn, chat) {
     super(ui, btn, chat);
+
+    this.whisperElements = new Map();
     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.ui.on('click', '.conversation', (e) =>
+      chat.openConversation(e.currentTarget.getAttribute('data-username')),
     );
-    this.usersEl.on('click', '.remove', (e) =>
-      this.removeConversation(e.target.getAttribute('data-username')),
+    this.chat.source.on('JOIN', (data) => this.updateOnline(data, true));
+    this.chat.source.on('QUIT', (data) => this.updateOnline(data, false));
+    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) {
     const normalized = nick.toLowerCase();
     this.chat.whispers.delete(normalized);
@@ -27,8 +56,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,35 +75,87 @@ 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.username}" class="user">${user.displayName}</a>
-                <span class="badge">${unread}</span>
-                <a data-username="${user.username}" title="Hide" class="remove"></a>
-            </li>
-        `);
+  addConversation(whisper) {
+    const ui = this.createElement(whisper);
+    this.whisperElements.set(whisper.nick.toLowerCase(), { ...whisper, ui });
+
+    const readOrUnreadList = whisper.unread > 0 ? this.unreadEl : this.readEl;
+    readOrUnreadList.append(ui);
+    readOrUnreadList
+      .find('[data-tippy-content]')
+      .each(function registerTippy() {
+        tippy(this, {
+          content: this.getAttribute('data-tippy-content'),
+          arrow: roundArrow,
+          duration: 0,
+          maxWidth: 250,
+          hideOnClick: false,
+          theme: 'dgg',
+        });
+      });
+  }
+
+  createElement(whisper) {
+    const time = moment.utc(whisper.time).local();
+
+    const entry = document.createElement('div');
+    entry.classList.add('conversation');
+    entry.classList.add(
+      this.chat.users.has(whisper.nick.toLowerCase())
+        ? 'conversation--online'
+        : 'conversation--offline',
+    );
+    if (whisper.found && this.searchterm.length > 0) {
+      entry.classList.add('found');
+    }
+    entry.setAttribute('data-username', whisper.nick.toLowerCase());
+
+    const onlineIcon = document.createElement('div');
+    onlineIcon.classList.add('conversation__online-icon');
+    entry.appendChild(onlineIcon);
+
+    const user = document.createElement('div');
+    user.classList.add('conversation__username');
+    user.textContent = whisper.nick;
+    entry.appendChild(user);
+
+    const right = document.createElement('div');
+
+    if (whisper.unread > 0) {
+      const unread = document.createElement('span');
+      unread.classList.add('conversation__unread');
+      unread.textContent = `${whisper.unread} new`;
+      right.appendChild(unread);
+    }
+
+    const timeElement = document.createElement('time');
+    timeElement.classList.add('conversation__time');
+    timeElement.setAttribute('datetime', time);
+    timeElement.setAttribute('data-tippy-content', time.format('LLL'));
+    timeElement.textContent = time.fromNow();
+    right.appendChild(timeElement);
+
+    entry.appendChild(right);
+
+    return entry;
+  }
+
+  updateOnline(data, join) {
+    if (this.whisperElements.has(data.nick.toLowerCase())) {
+      const whisper = this.whisperElements.get(data.nick.toLowerCase());
+      whisper.ui.classList.toggle('offline', !join);
+      whisper.ui.classList.toggle('online', join);
+    }
   }
 }

assets/views/embed.html

@@ -62,6 +62,7 @@
           data-tippy-content="Whispers"
         >
           <i class="btn-icon"></i>
+          <span id="chat-whisper-unread-indicator"></span>
         </a>
       </div>
       <div class="chat-tools-group">
@@ -403,9 +404,19 @@ <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="section__title">Unread</p>
+            <div class="whispers"></div>
+          </div>
+          <div class="section whispers-read">
+            <p class="section__title">Read</p>
+            <div class="whispers"></div>
+          </div>
         </div>
       </div>
+      <div id="chat-whisper-users-search">
+        <input class="form-control" placeholder="Username search ..." />
+      </div>
     </div>
   </div>