From ceedcc799f1a21f2bcaefae18acf50da1fb73341 Mon Sep 17 00:00:00 2001
From: Ehsan Kia <contact@ehsankia.com>
Date: Sun, 28 May 2017 18:15:03 -0700
Subject: [PATCH] Fix anon chat, tab completion and other small stuff (#2477)

Fixes #2402
Fixes #2397
Fixes #2390
Fixes #2333
---
 src/css/betterttv.css                   |  3 ++-
 src/modules/anon_chat/index.js          |  2 +-
 src/modules/better_viewer_list/index.js |  7 +++--
 src/modules/chat/index.js               |  2 +-
 src/modules/tab_completion/index.js     | 34 +++++++++++++++----------
 5 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/css/betterttv.css b/src/css/betterttv.css
index d134590693..9a5cf6a5e1 100644
--- a/src/css/betterttv.css
+++ b/src/css/betterttv.css
@@ -1025,7 +1025,8 @@ input, textarea, select {
     box-shadow: none;
     border-radius: 0;
     margin: 6px;
-    width: calc(100% - 10px);
+    padding: 6px;
+    width: calc(100% - 12px);
     display: none;
 }
 
diff --git a/src/modules/anon_chat/index.js b/src/modules/anon_chat/index.js
index 138d3c8c69..089e791b34 100644
--- a/src/modules/anon_chat/index.js
+++ b/src/modules/anon_chat/index.js
@@ -15,7 +15,7 @@ class AnonChatModule {
         });
 
         this.enabled = false;
-        watcher.on('load.chat', () => this.load());
+        watcher.on('load.chat_settings', () => this.load());
         watcher.on('chat.message', ($el, msgObj) => this.onMessage($el, msgObj));
         settings.on('changed.anonChat', () => this.load(true));
     }
diff --git a/src/modules/better_viewer_list/index.js b/src/modules/better_viewer_list/index.js
index 094049e56e..2060da73c7 100644
--- a/src/modules/better_viewer_list/index.js
+++ b/src/modules/better_viewer_list/index.js
@@ -12,6 +12,10 @@ let viewList;
 let chatterList;
 let chatterCount;
 
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
 class BetterViewerListModule {
     constructor() {
         settings.add({
@@ -108,8 +112,7 @@ class BetterViewerListModule {
                 results.push({
                     tag: 'li',
                     text: users[j],
-                    display: users[j]
-                    // TODO(ehsankia): Replace display name
+                    display: capitalize(users[j])
                 });
             }
 
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index f063233a8f..1b3107bf68 100644
--- a/src/modules/chat/index.js
+++ b/src/modules/chat/index.js
@@ -12,7 +12,7 @@ const channelEmotesTip = require('../channel_emotes_tip');
 const legacySubscribers = require('../legacy_subscribers');
 
 const EMOTE_STRIP_SYMBOLS_REGEX = /(^[~!@#$%\^&\*\(\)]+|[~!@#$%\^&\*\(\)]+$)/g;
-const MENTION_REGEX = /@\b(.*)\b/;
+const MENTION_REGEX = /^@([a-zA-Z\d_]+)$/;
 
 const badgeTemplate = (url, description) => `
     <span class="balloon-wrapper float-left">
diff --git a/src/modules/tab_completion/index.js b/src/modules/tab_completion/index.js
index cc6c473a45..074c960701 100644
--- a/src/modules/tab_completion/index.js
+++ b/src/modules/tab_completion/index.js
@@ -24,6 +24,13 @@ class TabCompletionModule {
             description: 'Shows a tooltip with suggested names when using @ completion'
         });
 
+        settings.add({
+            id: 'tabCompletionEmotePriority',
+            name: 'Tab Completion Emote Priority',
+            description: 'Prioritize emotes over usernames when using tab completion',
+            default: false,
+        });
+
         this.load();
         watcher.on('chat.message', ($el, msg) => this.storeUser($el, msg));
         watcher.on('load.chat', () => this.resetChannelData());
@@ -106,7 +113,7 @@ class TabCompletionModule {
             if (this.suggestions.length > 0) {
                 this.tabTries += e.shiftKey ? -1 : 1; // shift key iterates backwards
                 if (this.tabTries >= this.suggestions.length) this.tabTries = 0;
-                if (this.tabTries < 0) this.tabTries = this.suggestions.length + this.tabTries;
+                if (this.tabTries < 0) this.tabTries = this.suggestions.length - 1;
                 if (!this.suggestions[this.tabTries]) return;
 
                 let cursorOffset = 0;
@@ -154,25 +161,26 @@ class TabCompletionModule {
     }
 
     getSuggestions(prefix, includeUsers = true, includeEmotes = true) {
-        const suggestions = [];
+        let userList = [];
+        let emoteList = [];
 
         if (includeEmotes) {
-            // BTTV Emotes
-            suggestions.push(...emotes.getEmotes().map(emote => emote.code));
-
-            // Twitch emotes
-            suggestions.push(...this.getTwitchEmotes().map(emote => emote.code));
+            emoteList.push(...emotes.getEmotes().map(emote => emote.code));
+            emoteList.push(...this.getTwitchEmotes().map(emote => emote.code));
+            emoteList = emoteList.filter(word => word.toLowerCase().indexOf(prefix.toLowerCase()) === 0);
+            emoteList.sort();
         }
 
         if (includeUsers) {
-            // Users
-            suggestions.push(...this.userList);
+            userList = Array.from(this.userList).filter(word => word.toLowerCase().indexOf(prefix.toLowerCase()) === 0);
+            userList.sort();
         }
 
-        // Filter and sort emotes
-        return suggestions.filter(word => (
-            word.toLowerCase().indexOf(prefix.toLowerCase()) === 0
-        )).sort();
+        if (settings.get('tabCompletionEmotePriority') === true) {
+            return [ ...emoteList, ...userList];
+        } else {
+            return [...userList, ...emoteList];
+        }
     }
 
     getTwitchEmotes() {