From 2a790ad7cdec4c0a52bd340c1861f5f6e9875d19 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Thu, 31 May 2018 18:34:15 -0400
Subject: [PATCH] 4.0.0-rc2. Add basic custom highlight terms and blocked
 terms. Change the socket cluster setting because users are users. Open
 settings in a new window if clicking the chat menu link with ctrl or shift.
 Hide the Get Bits button in the site navigation. Add an additional socket
 server.

---
 changelog.html                                |   9 ++
 src/main.js                                   |   2 +-
 src/modules/chat/components/chat-blocked.vue  |   9 ++
 .../chat/components/chat-highlight.vue        |   5 +
 src/modules/chat/index.js                     |  96 ++++++++++++-
 src/modules/chat/tokenizers.jsx               | 132 ++++++++++++++++++
 .../main_menu/components/basic-terms.vue      | 121 ++++++++++++++++
 .../main_menu/components/color-picker.vue     |  86 ++++++++----
 .../main_menu/components/term-editor.vue      | 129 +++++++++++++++++
 .../twitch-twilight/modules/chat/index.js     |   2 +-
 .../twitch-twilight/modules/chat/line.js      |  16 ++-
 .../modules/chat/settings_menu.jsx            |  10 +-
 .../styles/chat-mention-bg-alt.scss           |   2 +-
 .../css_tweaks/styles/chat-mention-bg.scss    |   2 +-
 .../css_tweaks/styles/chat-mention-token.scss |   1 +
 .../modules/css_tweaks/styles/chat-rows.scss  |  12 +-
 .../modules/css_tweaks/styles/hide-bits.scss  |   1 +
 src/socket.js                                 |   7 +-
 src/utilities/color.js                        |   2 +-
 src/utilities/constants.js                    |   3 +-
 src/utilities/object.js                       |  59 ++++++++
 styles/widgets.scss                           |  11 ++
 22 files changed, 669 insertions(+), 48 deletions(-)
 create mode 100644 src/modules/chat/components/chat-blocked.vue
 create mode 100644 src/modules/chat/components/chat-highlight.vue
 create mode 100644 src/modules/main_menu/components/basic-terms.vue
 create mode 100644 src/modules/main_menu/components/term-editor.vue

diff --git a/changelog.html b/changelog.html
index fb2cc2de..37544ca9 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,12 @@
+<div class="list-header">4.0.0-rc2<span>@377f701926189263186b</span> <time datetime="2018-05-31">(2018-05-31)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Basic support for custom highlight terms and blocked terms in chat. This system will later be replaced with a more powerful chat filtering system.</li>
+	<li>Changed: Reset the Socket Cluster debugging setting to default for all users and make it clear that it isn't something that should be changed.</li>
+	<li>Changed: Allow opening settings in a new window by holding Ctrl or Shift when clicking the link.</li>
+	<li>Changed: Hide the <code>Get Bits</code> button in the site navigation bar when hiding bits is enabled.</li>
+	<li>Changed: Add the YooHoo server to the production socket server pool.</li>
+</ul>
+
 <div class="list-header">4.0.0-rc1.12<span>@b04d3c600e5260fcd7cd</span> <time datetime="2018-05-25">(2018-05-25)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: Disable including user IDs in error reports by default.</li>
diff --git a/src/main.js b/src/main.js
index 7a0eba77..3a429d91 100644
--- a/src/main.js
+++ b/src/main.js
@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc1.12',
+	major: 4, minor: 0, revision: 0, extra: '-rc2',
 	build: __webpack_hash__,
 	toString: () =>
 		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
diff --git a/src/modules/chat/components/chat-blocked.vue b/src/modules/chat/components/chat-blocked.vue
new file mode 100644
index 00000000..879c9e27
--- /dev/null
+++ b/src/modules/chat/components/chat-blocked.vue
@@ -0,0 +1,9 @@
+<template functional>
+	<strong
+		:data-text="props.token.text"
+		data-tooltip-type="blocked"
+		class="ffz-tooltip ffz--blocked ffz-i-cancel"
+	>
+		&times;&times;&times;
+	</strong>
+</template>
\ No newline at end of file
diff --git a/src/modules/chat/components/chat-highlight.vue b/src/modules/chat/components/chat-highlight.vue
new file mode 100644
index 00000000..246aa448
--- /dev/null
+++ b/src/modules/chat/components/chat-highlight.vue
@@ -0,0 +1,5 @@
+<template functional>
+	<strong class="ffz--highlight">
+		{{ props.token.text }}
+	</strong>
+</template>
\ No newline at end of file
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index b566aa08..4ae2dc16 100644
--- a/src/modules/chat/index.js
+++ b/src/modules/chat/index.js
@@ -6,7 +6,7 @@
 
 import Module from 'utilities/module';
 import {createElement, ManagedStyle} from 'utilities/dom';
-import {timeout, has} from 'utilities/object';
+import {timeout, has, glob_to_regex, escape_regex} from 'utilities/object';
 
 import Badges from './badges';
 import Emotes from './emotes';
@@ -108,6 +108,100 @@ export default class Chat extends Module {
 		});
 
 
+		this.settings.add('chat.filtering.highlight-basic-terms', {
+			default: [],
+			type: 'array_merge',
+			ui: {
+				path: 'Chat > Filtering >> Highlight Terms',
+				component: 'basic-terms',
+				colored: true
+			}
+		});
+
+
+		this.settings.add('chat.filtering.highlight-basic-terms--color-regex', {
+			requires: ['chat.filtering.highlight-basic-terms'],
+			process(ctx) {
+				const val = ctx.get('chat.filtering.highlight-basic-terms');
+				if ( ! val || ! val.length )
+					return null;
+
+				const colors = new Map;
+
+				for(const item of val) {
+					let list;
+					const c = item.c || null,
+						t = item.t;
+
+					let v = item.v;
+
+					if ( t === 'glob' )
+						v = glob_to_regex(v);
+
+					else if ( t !== 'raw' )
+						v = escape_regex(v);
+
+					if ( ! v || ! v.length )
+						continue;
+
+					if ( colors.has(c) )
+						colors.get(c).push(v);
+					else
+						colors.set(c, [v]);
+				}
+
+
+				for(const [key, list] of colors)
+					colors.set(key, new RegExp(`\\b(${list.join('|')})\\b`, 'gi'));
+
+				return colors;
+			}
+		});
+
+
+		this.settings.add('chat.filtering.highlight-basic-blocked', {
+			default: [],
+			type: 'array_merge',
+			ui: {
+				path: 'Chat > Filtering >> Blocked Terms',
+				component: 'basic-terms'
+			}
+		});
+
+
+		this.settings.add('chat.filtering.highlight-basic-blocked--regex', {
+			requires: ['chat.filtering.highlight-basic-blocked'],
+			process(ctx) {
+				const val = ctx.get('chat.filtering.highlight-basic-blocked');
+				if ( ! val || ! val.length )
+					return null;
+
+				const out = [];
+
+				for(const item of val) {
+					const t = item.t;
+					let v = item.v;
+
+					if ( t === 'glob' )
+						v = glob_to_regex(v);
+
+					else if ( t !== 'raw' )
+						v = escape_regex(v);
+
+					if ( ! v || ! v.length )
+						continue;
+
+					out.push(v);
+				}
+
+				if ( ! out.length )
+					return;
+
+				return new RegExp(`\\b(${out.join('|')})\\b`, 'gi');
+			}
+		});
+
+
 		this.settings.add('chat.filtering.highlight-mentions', {
 			default: false,
 			ui: {
diff --git a/src/modules/chat/tokenizers.jsx b/src/modules/chat/tokenizers.jsx
index 4dc67ab3..544afab1 100644
--- a/src/modules/chat/tokenizers.jsx
+++ b/src/modules/chat/tokenizers.jsx
@@ -260,6 +260,138 @@ export const Mentions = {
 }
 
 
+// ============================================================================
+// Custom Highlight Terms
+// ============================================================================
+
+export const CustomHighlights = {
+	type: 'highlight',
+	priority: 100,
+
+	component: () => import(/* webpackChunkName: 'vue-chat' */ './components/chat-highlight.vue'),
+
+	render(token, createElement) {
+		return (<strong class="ffz--highlight">{token.text}</strong>);
+	},
+
+	process(tokens, msg) {
+		if ( ! tokens || ! tokens.length )
+			return tokens;
+
+		const colors = this.context.get('chat.filtering.highlight-basic-terms--color-regex');
+		if ( ! colors || ! colors.size )
+			return tokens;
+
+		for(const [color, regex] of colors) {
+			const out = [];
+			for(const token of tokens) {
+				if ( token.type !== 'text' ) {
+					out.push(token);
+					continue;
+				}
+
+				regex.lastIndex = 0;
+				const text = token.text;
+				let idx = 0, match;
+
+				while((match = regex.exec(text))) {
+					const nix = match.index;
+
+					if ( idx !== nix )
+						out.push({type: 'text', text: text.slice(idx, nix)});
+
+					msg.mentioned = true;
+					msg.mention_color = color;
+
+					out.push({
+						type: 'highlight',
+						text: match[1]
+					});
+
+					idx = nix + match[1].length;
+				}
+
+				if ( idx < text.length )
+					out.push({type: 'text', text: text.slice(idx)});
+			}
+
+			tokens = out;
+		}
+
+		return tokens;
+	}
+}
+
+
+export const BlockedTerms = {
+	type: 'blocked',
+	priority: 99,
+
+	component: () => import(/* webpackChunkName: 'vue-chat' */ './components/chat-blocked.vue'),
+
+	render(token, createElement) {
+		return (<strong
+			data-text={token.text}
+			data-tooltip-type="blocked"
+			class="ffz-tooltip ffz--blocked"
+		>
+			&times;&times;&times;
+		</strong>);
+	},
+
+	tooltip(target) {
+		const ds = target.dataset;
+		return [
+			(<div class="tw-border-b tw-mg-b-05">{ // eslint-disable-line react/jsx-key
+				this.i18n.t('chat.filtering.blocked-term', 'Blocked Term')
+			}</div>),
+			ds.text
+		]
+	},
+
+	process(tokens) {
+		if ( ! tokens || ! tokens.length )
+			return tokens;
+
+		const regex = this.context.get('chat.filtering.highlight-basic-blocked--regex');
+		if ( ! regex )
+			return tokens;
+
+		const out = [];
+		for(const token of tokens) {
+			if ( token.type !== 'text' ) {
+				out.push(token);
+				continue;
+			}
+
+			regex.lastIndex = 0;
+			const text = token.text;
+			let idx = 0, match;
+
+			while((match = regex.exec(text))) {
+				const nix = match.index;
+
+				if ( idx !== nix )
+					out.push({type: 'text', text: text.slice(idx, nix)});
+
+				out.push({
+					type: 'blocked',
+					text: match[1]
+				});
+
+				idx = nix + match[1].length;
+			}
+
+			if ( idx < text.length )
+				out.push({type: 'text', text: text.slice(idx)});
+		}
+
+		return out;
+	}
+}
+
+
+
 // ============================================================================
 // Cheers
 // ============================================================================
diff --git a/src/modules/main_menu/components/basic-terms.vue b/src/modules/main_menu/components/basic-terms.vue
new file mode 100644
index 00000000..40da673f
--- /dev/null
+++ b/src/modules/main_menu/components/basic-terms.vue
@@ -0,0 +1,121 @@
+<template lang="html">
+	<section class="ffz--widget ffz--basic-terms">
+		<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width tw-pd-b-1">
+			<div class="tw-flex-grow-1">
+				<input
+					v-model="new_term"
+					:placeholder="t('setting.terms.add-placeholder', 'Add a new term')"
+					type="text"
+					class="tw-input"
+					autocapitalize="off"
+					autocorrect="off"
+				>
+			</div>
+			<div v-if="item.colored" class="tw-flex-shrink-0 tw-mg-l-05">
+				<color-picker v-model="new_color" :nullable="true" :show-input="false" />
+			</div>
+			<div class="tw-flex-shrink-0 tw-mg-x-05">
+				<select v-model="new_type" class="tw-select ffz-min-width-unset">
+					<option value="text">{{ t('setting.terms.type.text', 'Text') }}</option>
+					<option value="raw">{{ t('setting.terms.type.regex', 'Regex') }}</option>
+					<option value="glob">{{ t('setting.terms.type.glob', 'Glob') }}</option>
+				</select>
+			</div>
+			<div class="tw-flex-shrink-0">
+				<button class="tw-button" @click="add">
+					<span class="tw-button__text">
+						{{ t('setting.terms.add-term', 'Add') }}
+					</span>
+				</button>
+			</div>
+		</div>
+		<div v-if="! val.length || val.length === 1 && hasInheritance" class="tw-c-text-alt-2 tw-font-size-4 tw-align-center tw-c-text-alt-2 tw-pd-05">
+			{{ t('setting.terms.no-terms', 'no terms are defined in this profile') }}
+		</div>
+		<ul v-else class="ffz--term-list">
+			<term-editor
+				v-for="term in val"
+				v-if="term.t !== 'inherit'"
+				:key="term.id"
+				:term="term.v"
+				:colored="item.colored"
+				@remove="remove(term)"
+				@save="save(term, $event)"
+			/>
+		</ul>
+	</section>
+</template>
+
+<script>
+
+import SettingMixin from '../setting-mixin';
+import {deep_copy} from 'utilities/object';
+
+let last_id = 0;
+
+export default {
+	mixins: [SettingMixin],
+	props: ['item', 'context'],
+
+	data() {
+		return {
+			new_term: '',
+			new_type: 'text',
+			new_color: ''
+		}
+	},
+
+	computed: {
+		hasInheritance() {
+			for(const val of this.val)
+				if ( val.t === 'inherit' )
+					return true;
+		},
+
+		val() {
+			if ( ! this.has_value )
+				return [];
+
+			return this.value.map(x => {
+				x.id = x.id || `${Date.now()}-${Math.random()}-${last_id++}`;
+				return x;
+			})
+		}
+	},
+
+	methods: {
+		add() {
+			const vals = Array.from(this.val);
+			vals.push({
+				v: {
+					t: this.new_type,
+					v: this.new_term,
+					c: typeof this.new_color === 'string' ? this.new_color : null
+				}
+			});
+
+			this.new_term = '';
+			this.set(deep_copy(vals));
+		},
+
+		remove(val) {
+			const vals = Array.from(this.val),
+				idx = vals.indexOf(val);
+
+			if ( idx !== -1 ) {
+				vals.splice(idx, 1);
+				if ( vals.length )
+					this.set(deep_copy(vals));
+				else
+					this.clear();
+			}
+		},
+
+		save(val, new_val) {
+			val.v = new_val;
+			this.set(deep_copy(this.val));
+		}
+	}
+}
+
+</script>
\ No newline at end of file
diff --git a/src/modules/main_menu/components/color-picker.vue b/src/modules/main_menu/components/color-picker.vue
index 34e2e0cc..3efa4f1d 100644
--- a/src/modules/main_menu/components/color-picker.vue
+++ b/src/modules/main_menu/components/color-picker.vue
@@ -1,27 +1,46 @@
 <template lang="html">
-	<div class="ffz--color-widget tw-relative tw-full-width tw-mg-y-05">
-		<input
-			ref="input"
-			v-bind="$attrs"
-			v-model="color"
-			type="text"
-			class="tw-input tw-pd-r-3"
-			autocapitalize="off"
-			autocorrect="off"
-			autocomplete="off"
-			@input="onChange"
-		>
+	<div class="ffz--color-widget">
+		<div v-if="showInput" class="tw-relative tw-full-width tw-mg-y-05">
+			<input
+				v-if="showInput"
+				ref="input"
+				v-bind="$attrs"
+				v-model="color"
+				type="text"
+				class="tw-input tw-pd-r-3"
+				autocapitalize="off"
+				autocorrect="off"
+				autocomplete="off"
+				@input="onChange"
+			>
 
-		<button
-			class="ffz-color-preview tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-border-l tw-z-default"
-			@click="togglePicker"
-		>
-			<figure v-if="! valid" class="ffz-i-attention tw-c-text-alert" />
-			<figure v-else-if="color" :style="`background-color: ${color}`" />
-			<figure v-else class="ffz-i-eyedropper" />
-		</button>
-		<div v-on-clickaway="closePicker" v-if="open" class="tw-absolute tw-z-default tw-right-0">
-			<chrome-picker :value="colors" @input="onPick" />
+			<button
+				class="ffz-color-preview tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-border-l tw-z-default"
+				@click="togglePicker"
+			>
+				<figure v-if="! valid" class="ffz-i-attention tw-c-text-alert" />
+				<figure v-else-if="color" :style="`background-color: ${color}`" />
+				<figure v-else class="ffz-i-eyedropper" />
+			</button>
+			<div v-on-clickaway="closePicker" v-if="open" class="tw-absolute tw-z-default tw-right-0">
+				<chrome-picker :value="colors" @input="onPick" />
+			</div>
+		</div>
+		<div v-else class="tw-relative">
+			<button
+				class="tw-button tw-button--hollow ffz-color-preview"
+				@click="togglePicker"
+				@contextmenu.prevent="maybeResetColor"
+			>
+				<figure v-if="! valid" class="ffz-i-attention tw-c-text-alert" />
+				<figure v-else-if="color" :style="`background-color: ${color}`">
+					&nbsp;
+				</figure>
+				<figure v-else class="ffz-i-eyedropper" />
+			</button>
+			<div v-on-clickaway="closePicker" v-if="open" class="tw-absolute tw-z-default tw-right-0">
+				<chrome-picker :value="colors" @input="onPick" />
+			</div>
 		</div>
 	</div>
 </template>
@@ -30,12 +49,12 @@
 
 import {Color} from 'utilities/color';
 
-import {Chrome} from 'vue-color';
+import {Sketch} from 'vue-color';
 import {mixin as clickaway} from 'vue-clickaway';
 
 export default {
 	components: {
-		'chrome-picker': Chrome
+		'chrome-picker': Sketch
 	},
 
 	mixins: [clickaway],
@@ -46,9 +65,17 @@ export default {
 			type: String,
 			default: '#000'
 		},
+		nullable: {
+			type: Boolean,
+			default: false
+		},
 		validate: {
 			type: Boolean,
 			default: true
+		},
+		showInput: {
+			type: Boolean,
+			default: false
 		}
 	},
 
@@ -84,6 +111,17 @@ export default {
 	},
 
 	methods: {
+		maybeResetColor() {
+			if ( this.open )
+				return this.open = false;
+
+			if ( this.nullable ) {
+				this.color = '';
+				this._validate();
+				this.emit();
+			}
+		},
+
 		openPicker() {
 			this.open = true;
 		},
diff --git a/src/modules/main_menu/components/term-editor.vue b/src/modules/main_menu/components/term-editor.vue
new file mode 100644
index 00000000..908a66d6
--- /dev/null
+++ b/src/modules/main_menu/components/term-editor.vue
@@ -0,0 +1,129 @@
+<template lang="html">
+	<li class="ffz--term">
+		<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width">
+			<div class="tw-flex-grow-1">
+				<h4 v-if="! editing" class="ffz-monospace">
+					<pre>{{ term.v }}</pre>
+				</h4>
+				<input
+					v-else
+					v-model="edit_data.v"
+					:placeholder="edit_data.v"
+					type="text"
+					class="tw-input"
+					autocapitalize="off"
+					autocorrect="off"
+				>
+			</div>
+			<div v-if="colored" class="tw-flex-shrink-0 tw-mg-l-05">
+				<color-picker v-if="editing" v-model="edit_data.c" :nullable="true" :show-input="false" />
+				<div v-else-if="term.c" class="ffz-color-preview">
+					<figure :style="`background-color: ${term.c}`">
+						&nbsp;
+					</figure>
+				</div>
+			</div>
+			<div class="tw-flex-shrink-0 tw-mg-x-05">
+				<span v-if="! editing">{{ term_type }}</span>
+				<select v-else v-model="edit_data.t" class="tw-select ffz-min-width-unset">
+					<option value="text">{{ t('setting.terms.type.text', 'Text') }}</option>
+					<option value="raw">{{ t('setting.terms.type.regex', 'Regex') }}</option>
+					<option value="glob">{{ t('setting.terms.type.glob', 'Glob') }}</option>
+				</select>
+			</div>
+			<div v-if="editing" class="tw-flex-shrink-0">
+				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="save">
+					<span class="tw-button__text ffz-i-floppy" />
+					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+						{{ t('setting.save', 'Save') }}
+					</div>
+				</button>
+				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="cancel">
+					<span class="tw-button__text ffz-i-cancel" />
+					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+						{{ t('setting.cancel', 'Cancel') }}
+					</div>
+				</button>
+			</div>
+			<div v-else-if="deleting" class="tw-flex-shrink-0">
+				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="$emit('remove', term)">
+					<span class="tw-button__text ffz-i-trash" />
+					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+						{{ t('setting.delete', 'Delete') }}
+					</div>
+				</button>
+				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = false">
+					<span class="tw-button__text ffz-i-cancel" />
+					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+						{{ t('setting.cancel', 'Cancel') }}
+					</div>
+				</button>
+			</div>
+			<div v-else class="tw-flex-shrink-0">
+				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="edit">
+					<span class="tw-button__text ffz-i-cog" />
+					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+						{{ t('setting.edit', 'Edit') }}
+					</div>
+				</button>
+				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = true">
+					<span class="tw-button__text ffz-i-trash" />
+					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+						{{ t('setting.delete', 'Delete') }}
+					</div>
+				</button>
+			</div>
+		</div>
+	</li>
+</template>
+
+<script>
+
+import {deep_copy} from 'utilities/object';
+
+export default {
+	props: ['term', 'colored'],
+
+	data() {
+		return {
+			deleting: false,
+			editing: false,
+			edit_data: null
+		}
+	},
+
+	computed: {
+		term_type() {
+			const t = this.term && this.term.t;
+			if ( t === 'text' )
+				return this.t('setting.terms.type.text', 'Text');
+
+			else if ( t === 'raw' )
+				return this.t('setting.terms.type.raw', 'Regex');
+
+			else if ( t === 'glob' )
+				return this.t('setting.terms.type.glob', 'Glob');
+
+			return this.t('setting.unknown', 'Unknown Value');
+		}
+	},
+
+	methods: {
+		edit() {
+			this.editing = true;
+			this.edit_data = deep_copy(this.term);
+		},
+
+		cancel() {
+			this.editing = false;
+			this.edit_data = null;
+		},
+
+		save() {
+			this.$emit('save', this.edit_data);
+			this.cancel();
+		}
+	}
+}
+
+</script>
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js
index 6a05a869..04ba4c95 100644
--- a/src/sites/twitch-twilight/modules/chat/index.js
+++ b/src/sites/twitch-twilight/modules/chat/index.js
@@ -285,7 +285,7 @@ export default class ChatHook extends Module {
 
 		ic._base = is_dark ? '#dad8de' : '#19171c';
 		ic.mode = mode;
-		ic.contrast = is_dark ? 13 : 16;
+		ic.contrast = contrast;
 
 		this.updateChatLines();
 	}
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index aed9d0f7..5e701f9e 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/src/sites/twitch-twilight/modules/chat/line.js
@@ -55,6 +55,8 @@ export default class ChatLine extends Module {
 		this.chat.context.on('changed:chat.rich.hide-tokens', this.updateLines, this);
 		this.chat.context.on('changed:chat.actions.inline', this.updateLines, this);
 		this.chat.context.on('changed:chat.filtering.show-deleted', this.updateLines, this);
+		this.chat.context.on('changed:chat.filtering.highlight-basic-terms--color-regex', this.updateLines, this);
+		this.chat.context.on('changed:chat.filtering.highlight-basic-blocked--regex', this.updateLines, this);
 
 		const t = this,
 			React = await this.web_munch.findModule('react');
@@ -195,7 +197,6 @@ export default class ChatLine extends Module {
 
 				const user = msg.user,
 					color = t.parent.colors.process(user.color),
-					bg_css = null, //Math.random() > .7 ? t.parent.inverse_colors.process(user.color) : null,
 					show_deleted = t.chat.context.get('chat.filtering.show-deleted');
 
 				let show, show_class;
@@ -228,7 +229,8 @@ export default class ChatLine extends Module {
 				}
 
 				const tokens = msg.ffz_tokens = msg.ffz_tokens || t.chat.tokenizeMessage(msg, u, r),
-					rich_content = FFZRichContent && t.chat.pluckRichContent(tokens, msg);
+					rich_content = FFZRichContent && t.chat.pluckRichContent(tokens, msg),
+					bg_css = msg.mentioned && msg.mention_color ? t.parent.inverse_colors.process(msg.mention_color) : null;
 
 				if ( ! this.ffz_user_click_handler )
 					this.ffz_user_click_handler = event => event.ctrlKey ? this.usernameClickHandler(event) : t.viewer_cards.openCard(r, user, event);
@@ -342,7 +344,7 @@ export default class ChatLine extends Module {
 					return null;
 
 				return e('div', {
-					className: `${cls}${msg.mentioned ? ' ffz-mentioned' : ''}`,
+					className: `${cls}${msg.mentioned ? ' ffz-mentioned' : ''}${bg_css ? ' ffz-custom-color' : ''}`,
 					style: {backgroundColor: bg_css},
 					'data-room-id': this.props.channelID,
 					'data-room': room,
@@ -361,14 +363,18 @@ export default class ChatLine extends Module {
 	updateLines() {
 		for(const inst of this.ChatLine.instances) {
 			const msg = inst.props.message;
-			if ( msg )
+			if ( msg ) {
 				msg.ffz_tokens = null;
+				msg.mentioned = msg.mention_color = null;
+			}
 		}
 
 		for(const inst of this.ChatRoomLine.instances) {
 			const msg = inst.props.message;
-			if ( msg )
+			if ( msg ) {
 				msg.ffz_tokens = null;
+				msg.mentioned = msg.mention_color = null;
+			}
 		}
 
 		this.ChatLine.forceUpdate();
diff --git a/src/sites/twitch-twilight/modules/chat/settings_menu.jsx b/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
index 4ea0e71b..b59476f8 100644
--- a/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
+++ b/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
@@ -69,15 +69,17 @@ export default class SettingsMenu extends Module {
 		});
 	}
 
-	click(inst) {
-		// Pop-out chat check
-		const twMinimalRoot = document.querySelector('.twilight-minimal-root');
-		if (twMinimalRoot) {
+	click(inst, event) {
+		// If we're on a page with minimal root, we want to open settings
+		// in a popout as we're almost certainly within Popout Chat.
+		const minimal_root = document.querySelector('.twilight-minimal-root');
+		if ( minimal_root || (event && (event.ctrlKey || event.shiftKey)) ) {
 			const win = window.open(
 				'https://twitch.tv/popout/frankerfacez/chat?ffz-settings',
 				'_blank',
 				'resizable=yes,scrollbars=yes,width=850,height=600'
 			);
+
 			if ( win )
 				win.focus();
 			else {
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss
index 4a525813..741d99f1 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss
@@ -1,6 +1,6 @@
 .chat-line__message:not(.chat-line--inline),
 .user-notice-line {
-	&.ffz-mentioned:nth-child(2n+0) {
+	&.ffz-mentioned:not(.ffz-custom-color):nth-child(2n+0) {
 		background-color: rgba(255,127,127,.4) !important;
 
 		.tw-theme--dark & {
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss
index c259ac80..7ce2602a 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss
@@ -1,6 +1,6 @@
 .chat-line__message:not(.chat-line--inline),
 .user-notice-line {
-	&.ffz-mentioned {
+	&.ffz-mentioned:not(.ffz-custom-color) {
 		background-color: rgba(255,127,127,.2) !important;
 
 		.tw-theme--dark & {
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-token.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-token.scss
index a5ec7bc1..f41a3d03 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-token.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-token.scss
@@ -1,3 +1,4 @@
+.ffz--highlight,
 .ffz--mention-me {
 	border-radius: .5rem;
 	padding: .3rem;
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss
index 5ba72ddf..d3ce8966 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss
@@ -8,13 +8,15 @@
 .chat-list__lines .chat-line__bits-charity,
 .user-notice-line,
 .chat-line__message:not(.chat-line--inline) {
-	background-color: transparent !important;
+	&:not(.ffz-custom-color) {
+		background-color: transparent !important;
 
-	&:nth-child(2n+0) {
-		background-color: rgba(0,0,0,0.1) !important;
+		&:nth-child(2n+0) {
+			background-color: rgba(0,0,0,0.1) !important;
 
-		.tw-theme--dark & {
-			background-color: rgba(255,255,255,0.05) !important;
+			.tw-theme--dark & {
+				background-color: rgba(255,255,255,0.05) !important;
+			}
 		}
 	}
 }
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-bits.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-bits.scss
index 0b734198..e164d944 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-bits.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-bits.scss
@@ -1,3 +1,4 @@
+.get-bits-button,
 .chat-input button[data-a-target="bits-button"],
 .channel-header__right > .tw-mg-l-1 > div > div > button:not([data-a-target]) {
 	display: none;
diff --git a/src/socket.js b/src/socket.js
index cd218604..f34e8656 100644
--- a/src/socket.js
+++ b/src/socket.js
@@ -22,12 +22,13 @@ export default class SocketClient extends Module {
 
 		this.inject('settings');
 
-		this.settings.add('socket.cluster', {
+		this.settings.add('socket.use-cluster', {
 			default: 'Production',
 
 			ui: {
 				path: 'Debugging @{"expanded": false, "sort": 9999} > Socket >> General',
 				title: 'Server Cluster',
+				description: 'Which server cluster to connect to. Do not change this unless you are actually doing development work on the socket server backend. Doing so will break all features relying on the socket server, including emote information lookups, link tooltips, and live data updates.',
 
 				component: 'setting-select-box',
 
@@ -59,7 +60,7 @@ export default class SocketClient extends Module {
 		this._host_pool = -1;
 
 
-		this.settings.on(':changed:socket.cluster', () => {
+		this.settings.on(':changed:socket.use-cluster', () => {
 			this._host = null;
 			if ( this.disconnected)
 				this.connect();
@@ -113,7 +114,7 @@ export default class SocketClient extends Module {
 	// ========================================================================
 
 	selectHost() {
-		const cluster_id = this.settings.get('socket.cluster'),
+		const cluster_id = this.settings.get('socket.use-cluster'),
 			cluster = WS_CLUSTERS[cluster_id],
 			l = cluster && cluster.length;
 
diff --git a/src/utilities/color.js b/src/utilities/color.js
index fc1da217..c3c6b274 100644
--- a/src/utilities/color.js
+++ b/src/utilities/color.js
@@ -657,7 +657,7 @@ export class ColorAdjuster {
 					rgb = rgb.brighten(-1);
 		}
 
-		const out = rgb.toHex();
+		const out = rgb.toCSS();
 		this._cache.set(color, out);
 		return out;
 	}
diff --git a/src/utilities/constants.js b/src/utilities/constants.js
index 2e04969f..40831891 100644
--- a/src/utilities/constants.js
+++ b/src/utilities/constants.js
@@ -65,7 +65,8 @@ export const WS_CLUSTERS = {
 		['wss://catbag.frankerfacez.com/', 0.25],
 		['wss://andknuckles.frankerfacez.com/', 1],
 		['wss://tuturu.frankerfacez.com/', 1],
-		['wss://lilz.frankerfacez.com/', 1]
+		['wss://lilz.frankerfacez.com/', 1],
+		['wss://yoohoo.frankerfacez.com/', 1]
 	],
 
 	Development: [
diff --git a/src/utilities/object.js b/src/utilities/object.js
index 7776dbcf..746d88d8 100644
--- a/src/utilities/object.js
+++ b/src/utilities/object.js
@@ -251,6 +251,65 @@ export const escape_regex = RegExp.escape || function escape_regex(str) {
 }
 
 
+const CONTROL_CHARS = '/$^+.()=!|';
+
+export function glob_to_regex(input) {
+	if ( typeof input !== 'string' )
+		throw new TypeError('input must be a string');
+
+	let output = '',
+		groups = 0;
+
+	for(let i=0, l=input.length; i<l; i++) {
+		const char = input[i];
+
+		if ( CONTROL_CHARS.includes(char) )
+			output += `\\${char}`;
+
+		else if ( char === '?' )
+			output += '.';
+
+		else if ( char === '[' || char === ']' )
+			output += char;
+
+		else if ( char === '{' ) {
+			output += '(?:';
+			groups++;
+
+		} else if ( char === '}' ) {
+			if ( groups > 0 ) {
+				output += ')';
+				groups--;
+			}
+
+		} else if ( char === ',' && groups > 0 )
+			output += '|';
+
+		else if ( char === '*' ) {
+			let count = 1;
+			while(input[i+1] === '*') {
+				count++;
+				i++;
+			}
+
+			if ( count > 1 )
+				output += '.*?';
+			else
+				output += '[^ ]*?';
+
+		} else
+			output += char;
+	}
+
+	while(groups > 0) {
+		output += ')';
+		groups--;
+	}
+
+	return output;
+}
+
+
 export class SourcedSet {
 	constructor() {
 		this._cache = [];
diff --git a/styles/widgets.scss b/styles/widgets.scss
index bf6728ea..35bc6cdd 100644
--- a/styles/widgets.scss
+++ b/styles/widgets.scss
@@ -11,6 +11,12 @@
 .tw-display-inline { display: inline !important }
 .tw-width-auto { width: auto !important }
 
+
+.ffz-monospace {
+	font-family: monospace;
+}
+
+
 .ffz--widget {
 	input, select {
 		min-width: 20rem;
@@ -22,6 +28,11 @@
 }
 
 
+.ffz-min-width-unset {
+	min-width: unset !important;
+}
+
+
 .ffz--color-widget input,
 .ffz--inline label {
 	min-width: unset;