From 1142762a357ff3fecda16bd5e65a5393dafb4677 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Sat, 15 Apr 2023 17:41:40 +0300
Subject: [PATCH 01/20] feat/block-chat-phrases: Add blocked phrases feature

---
 CHANGELOG-nightly.md                          |   1 +
 src/composable/chat/useChatBlocking.ts        | 168 ++++++++++++
 .../settings/SettingsConfigBlocking.vue       | 242 ++++++++++++++++++
 .../modules/chat-input/ChatInputModule.vue    |  15 +-
 .../twitch.tv/modules/chat/ChatController.vue |   6 +
 src/site/twitch.tv/modules/chat/ChatList.vue  |  10 +-
 6 files changed, 440 insertions(+), 2 deletions(-)
 create mode 100644 src/composable/chat/useChatBlocking.ts
 create mode 100644 src/site/global/settings/SettingsConfigBlocking.vue

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index 62963047b..7d012726a 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -4,6 +4,7 @@
 
 -   Links in chat messages now respect known TLDs instead of matching any url-like pattern
 -   Added an option to show timeouts/bans directly in the chat without being a moderator
+-   Added a blocked phrases feature
 
 ### Version 3.0.5.1000
 
diff --git a/src/composable/chat/useChatBlocking.ts b/src/composable/chat/useChatBlocking.ts
new file mode 100644
index 000000000..65ca57f4b
--- /dev/null
+++ b/src/composable/chat/useChatBlocking.ts
@@ -0,0 +1,168 @@
+import { markRaw, reactive, toRaw, watch } from "vue";
+import { toReactive } from "@vueuse/core";
+import { debounceFn } from "@/common/Async";
+import { log } from "@/common/Logger";
+import type { ChatMessage } from "@/common/chat/ChatMessage";
+import { ChannelContext } from "@/composable/channel/useChannelContext";
+import { useConfig } from "../useSettings";
+
+interface ChatBlocking {
+	blockedPhrases: Record<string, BlockedPhraseDef>;
+}
+
+export interface BlockedPhraseDef {
+	id: string;
+
+	pattern?: string;
+	test?: (msg: ChatMessage) => boolean;
+	regexp?: boolean;
+	readonly cachedRegExp?: RegExp;
+
+	label: string;
+	caseSensitive?: boolean;
+	persist?: boolean;
+}
+
+const m = new WeakMap<ChannelContext, ChatBlocking>();
+
+const blockedPhrases = useConfig<Map<string, BlockedPhraseDef>>("chat_input.blocking.phrases");
+
+export function useChatBlocking(ctx: ChannelContext) {
+	let data = m.get(ctx);
+	if (!data) {
+		data = reactive<ChatBlocking>({
+			blockedPhrases: {}
+		});
+
+		watch(
+			blockedPhrases,
+			(h) => {
+				if (!data) return;
+
+				for (const [k, v] of Object.entries(data.blockedPhrases)) {
+					if (!v.persist) continue;
+
+					delete data.blockedPhrases[k];
+				}
+
+				for (const [, v] of h) {
+					data.blockedPhrases[v.id] = v;
+				}
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		m.set(ctx, data);
+	}
+
+	const save = debounceFn(function (): void {
+		if (!data) return;
+
+		const items: [string, BlockedPhraseDef][] = Array.from(Object.values(data.blockedPhrases))
+			.filter((h) => h.persist)
+			.map((h) => [
+				h.id,
+				toRaw(h),
+			]);
+
+		blockedPhrases.value = new Map(items);
+	}, 250);
+
+	function define(id: string, def: Omit<BlockedPhraseDef, "id">, persist?: boolean): BlockedPhraseDef {
+		if (!data) return {} as BlockedPhraseDef;
+
+		const h = (data.blockedPhrases[id] = { ...def, id, persist });
+
+		if (!persist) return h;
+
+		// Store to DB
+		blockedPhrases.value.set(id, markRaw(h));
+		save();
+
+		return h;
+	}
+
+	function remove(id: string): void {
+		if (!data) return;
+
+		delete data.blockedPhrases[id];
+		save();
+	}
+
+	function checkMatch(key: string, msg: ChatMessage): boolean {
+		if (!data) return false;
+
+		const h = data?.blockedPhrases[key];
+
+		if (!h) return false;
+
+		let ok = false;
+
+		if (h.regexp) {
+			let regexp = h.cachedRegExp;
+			if (!regexp) {
+				try {
+					regexp = new RegExp(h.pattern as string, "i");
+					Object.defineProperty(h, "cachedRegExp", { value: regexp });
+				} catch (err) {
+					log.warn("<ChatBlocking>", "Invalid regexp:", h.pattern ?? "");
+
+					msg.setHighlight("#878787", "Error " + (err as Error).message);
+					return false;
+				}
+			}
+
+			ok = regexp.test(msg.body);
+		} else if (h.pattern) {
+			ok = h.caseSensitive
+				? msg.body.includes(h.pattern)
+				: msg.body.toLowerCase().includes(h.pattern.toLowerCase());
+		} else if (typeof h.test === "function") {
+			ok = h.test(msg);
+		}
+
+		return ok;
+	}
+
+	function doesMessageContainBlockedPhrase(message: ChatMessage<ComponentFactory>) {
+		const messageIds: string[] = [];
+		for (const blockedPhraseID in getAll()) {
+			if (checkMatch(blockedPhraseID, message)) {
+				messageIds.push(message.id)
+			}
+		}
+		return messageIds.includes(message.id);
+	}
+
+	function getAll(): Record<string, BlockedPhraseDef> {
+		if (!data) return {};
+
+		return toReactive(data.blockedPhrases);
+	}
+
+	function updateId(oldId: string, newId: string): void {
+		if (!data) return;
+
+		const h = data.blockedPhrases[oldId];
+		if (!h) return;
+
+		data.blockedPhrases[newId] = h;
+		delete data.blockedPhrases[oldId];
+
+		h.id = newId;
+
+		save();
+	}
+
+	return {
+		define,
+		remove,
+		getAll,
+		doesMessageContainBlockedPhrase,
+		save,
+		updateId,
+		checkMatch
+	};
+}
diff --git a/src/site/global/settings/SettingsConfigBlocking.vue b/src/site/global/settings/SettingsConfigBlocking.vue
new file mode 100644
index 000000000..8f330061f
--- /dev/null
+++ b/src/site/global/settings/SettingsConfigBlocking.vue
@@ -0,0 +1,242 @@
+<template>
+	<main class="seventv-settings-blocking">
+		<div class="tabs"></div>
+		<div class="list">
+			<div class="item heading">
+				<div>Pattern</div>
+				<div>Label</div>
+				<div class="centered">RegExp</div>
+				<div>Case Sensitive</div>
+			</div>
+
+			<UiScrollable>
+				<template v-for="(h, _, index) of blockedPhrases.getAll()" :key="h.id">
+					<div class="item">
+						<!-- Pattern -->
+						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
+							<span>{{ h.pattern }}</span>
+							<FormInput
+								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern"
+								@blur="onInputBlur(h, 'pattern')"
+							/>
+						</div>
+
+						<!-- Label -->
+						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
+							<span>{{ h.label }}</span>
+							<FormInput
+								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label"
+								@blur="onInputBlur(h, 'label')"
+							/>
+						</div>
+
+						<!-- Checkbox: RegExp -->
+						<div name="is-regexp" class="centered">
+							<FormCheckbox :checked="!!h.regexp" @update:checked="onRegExpStateChange(h, $event)" />
+						</div>
+
+						<!-- Checkbox: Case Sensitive -->
+						<div name="case-sensitive" class="centered">
+							<FormCheckbox
+								:checked="!!h.caseSensitive"
+								@update:checked="onCaseSensitiveChange(h, $event)"
+							/>
+						</div>
+
+						<div ref="interactRef" name="interact">
+							<CloseIcon v-tooltip="'Remove'" tabindex="0" @click="onDeleteBlockedPhrase(h)" />
+						</div>
+					</div>
+				</template>
+			</UiScrollable>
+
+			<!-- New -->
+			<div class="item create-new">
+				<div name="pattern">
+					<FormInput v-model="newInput" label="New Blocked phrase..." />
+				</div>
+			</div>
+		</div>
+	</main>
+</template>
+
+<script setup lang="ts">
+import { nextTick, reactive, ref, watch } from "vue";
+import { useChannelContext } from "@/composable/channel/useChannelContext";
+import { BlockedPhraseDef, useChatBlocking } from "@/composable/chat/useChatBlocking";
+import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
+import UiScrollable from "@/ui/UiScrollable.vue";
+import FormCheckbox from "../components/FormCheckbox.vue";
+import FormInput from "../components/FormInput.vue";
+import { v4 as uuid } from "uuid";
+
+const ctx = useChannelContext(); // this will be an empty context, as config is not tied to channel
+const blockedPhrases = useChatBlocking(ctx);
+
+const newInput = ref("");
+const inputs = reactive({
+	pattern: new WeakMap<BlockedPhraseDef, InstanceType<typeof FormInput>>(),
+	label: new WeakMap<BlockedPhraseDef, InstanceType<typeof FormInput>>(),
+});
+const interactRef = ref<HTMLElement[]>();
+
+function onInputFocus(h: BlockedPhraseDef, inputName: keyof typeof inputs): void {
+	const input = inputs[inputName].get(h);
+	if (!input) return;
+
+	input.focus();
+}
+
+function onInputBlur(h: BlockedPhraseDef, inputName: keyof typeof inputs): void {
+	const input = inputs[inputName].get(h);
+	if (!input) return;
+
+	const id = uuid();
+	blockedPhrases.updateId("new-blocked-phrase", id);
+	blockedPhrases.save();
+}
+
+function onRegExpStateChange(h: BlockedPhraseDef, checked: boolean): void {
+	h.regexp = checked;
+	blockedPhrases.save();
+}
+
+function onCaseSensitiveChange(h: BlockedPhraseDef, checked: boolean): void {
+	h.caseSensitive = checked;
+	blockedPhrases.save();
+}
+
+function onDeleteBlockedPhrase(h: BlockedPhraseDef): void {
+	blockedPhrases.remove(h.id);
+	blockedPhrases.save();
+}
+
+watch(newInput, (val, old) => {
+	if (!val || old) return;
+
+	const h = blockedPhrases.define(
+		"new-blocked-phrase",
+		{
+			label: "",
+			pattern: val,
+		},
+		true,
+	);
+
+	nextTick(() => {
+		const input = inputs.pattern.get(h);
+		if (!input) return;
+
+		input.focus();
+		newInput.value = "";
+	});
+});
+</script>
+
+<style scoped lang="scss">
+main.seventv-settings-blocking {
+	display: grid;
+	padding: 0.25rem;
+	grid-template-rows: 0 max-content;
+	grid-template-areas:
+		"tabs"
+		"list";
+
+	overflow-x: auto;
+
+	.tabs {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		grid-template-rows: 1fr;
+		grid-area: tabs;
+	}
+	.list {
+		display: grid;
+		grid-area: list;
+		max-height: 36rem;
+
+		.item {
+			display: grid;
+			grid-auto-flow: row dense;
+			grid-template-columns: 20% repeat(4, 1fr);
+			column-gap: 3rem;
+			padding: 1rem;
+
+			> div {
+				align-self: center;
+				&.centered {
+					justify-self: center;
+				}
+			}
+
+			&:nth-child(odd) {
+				background-color: var(--seventv-background-shade-2);
+			}
+
+			&.heading {
+				background-color: var(--seventv-background-shade-3);
+				border-bottom: 0.25rem solid var(--seventv-primary);
+			}
+
+			&:not(.create-new) > .use-virtual-input {
+				cursor: text;
+				padding: 0.5rem;
+				display: block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+
+				input {
+					width: 0;
+					height: 0;
+					opacity: 0;
+				}
+
+				&:focus-within {
+					padding: 0;
+					span {
+						display: none;
+					}
+
+					input {
+						opacity: 1;
+						width: 100%;
+						height: initial;
+					}
+				}
+			}
+
+			[name="color"] > input {
+				&::-webkit-color-swatch-wrapper {
+					padding: 0;
+				}
+				&::-webkit-color-swatch {
+					border: none;
+				}
+			}
+
+			[name="interact"] {
+				display: grid;
+				column-gap: 1rem;
+				grid-auto-flow: column;
+				justify-self: end;
+
+				button {
+					all: unset;
+					cursor: pointer;
+				}
+
+				svg {
+					cursor: pointer;
+					font-size: 2rem;
+					&:hover {
+						color: var(--seventv-primary);
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue b/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue
index 5a2bda003..7824ea2e6 100644
--- a/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue
+++ b/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { markRaw, reactive, ref } from "vue";
 import { HookedInstance, useComponentHook } from "@/common/ReactHooks";
 import { declareModule } from "@/composable/useModule";
 import { declareConfig, useConfig } from "@/composable/useSettings";
@@ -129,6 +129,9 @@ markAsReady();
 </script>
 
 <script lang="ts">
+import { BlockedPhraseDef } from "@/composable/chat/useChatBlocking";
+import SettingsConfigBlocking from "@/site/global/settings/SettingsConfigBlocking.vue";
+
 export const config = [
 	declareConfig("chat_input.autocomplete.colon", "TOGGLE", {
 		path: ["Chat", "Autocompletion"],
@@ -174,5 +177,15 @@ export const config = [
 		hint: "If enabled, you can use the Ctrl+Enter shortcut to keep the current message in the input box after sending",
 		defaultValue: true,
 	}),
+	declareConfig<Map<string, BlockedPhraseDef>>("chat_input.blocking.phrases", "CUSTOM", {
+		path: ["Chat", "Blocking"],
+		custom: {
+			component: markRaw(SettingsConfigBlocking),
+			gridMode: "new-row",
+		},
+		label: "Blocked phrases",
+		hint: "Block specific words or phrases",
+		defaultValue: new Map(),
+	}),
 ];
 </script>
diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue
index c1179eb5b..93a7b85ac 100644
--- a/src/site/twitch.tv/modules/chat/ChatController.vue
+++ b/src/site/twitch.tv/modules/chat/ChatController.vue
@@ -41,6 +41,7 @@ import { HookedInstance, awaitComponents } from "@/common/ReactHooks";
 import { defineFunctionHook, definePropertyHook, unsetPropertyHook } from "@/common/Reflection";
 import { ChatMessage } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
+import { useChatBlocking } from "@/composable/chat/useChatBlocking";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
 import { useChatProperties } from "@/composable/chat/useChatProperties";
@@ -93,6 +94,7 @@ const scroller = useChatScroller(ctx, {
 });
 const properties = useChatProperties(ctx);
 const tools = useChatTools(ctx);
+const chatBlocking = useChatBlocking(ctx);
 
 // line limit
 const lineLimit = useConfig("chat.line_limit", 150);
@@ -253,6 +255,10 @@ watch(messageBufferComponentDbc, (msgBuf, old) => {
 						m.historical = true;
 						chatList.value?.onChatMessage(m, msg as Twitch.ChatMessage, false);
 
+						if (chatBlocking.doesMessageContainBlockedPhrase(m)) {
+							continue;
+						}
+
 						historical.push(m);
 						continue;
 					}
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index 386dd0a05..957d422d2 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -31,6 +31,7 @@ import { convertCheerEmote, convertTwitchEmote } from "@/common/Transform";
 import { ChatMessage, ChatMessageModeration, ChatUser } from "@/common/chat/ChatMessage";
 import { IsChatMessage, IsDisplayableMessage, IsModerationMessage } from "@/common/type-predicates/Messages";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
+import { useChatBlocking } from "@/composable/chat/useChatBlocking";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
 import { useChatHighlights } from "@/composable/chat/useChatHighlights";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
@@ -56,6 +57,7 @@ const displayedMessages = toRef(messages, "displayed");
 const scroller = useChatScroller(ctx);
 const properties = useChatProperties(ctx);
 const chatHighlights = useChatHighlights(ctx);
+const chatBlocking = useChatBlocking(ctx);
 const pageVisibility = useDocumentVisibility();
 const isHovering = toRef(properties, "hovering");
 const pausedByVisibility = ref(false);
@@ -130,7 +132,9 @@ const onMessage = (msgData: Twitch.AnyMessage): boolean => {
 };
 
 function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRender = true) {
+	let shouldRenderMessage = shouldRender;
 	const c = getMessageComponent(msgData.type);
+
 	if (c) {
 		msg.setComponent(c, { msgData: msgData });
 	}
@@ -291,6 +295,10 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 		chatHighlights.checkMatch(highlightID, msg);
 	}
 
+	if (chatBlocking.doesMessageContainBlockedPhrase(msg)) {
+		shouldRenderMessage = false;
+	}
+
 	if (properties.isModerator) {
 		msg.pinnable = true;
 		msg.deletable = true;
@@ -298,7 +306,7 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 
 	// Add message to store
 	// it will be rendered on the next tick
-	if (shouldRender) messages.add(msg);
+	if (shouldRenderMessage) messages.add(msg);
 }
 
 function onModerationMessage(msgData: Twitch.ModerationMessage) {

From 11d27dd15a557617fef231a7b7db92ef42c840f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Sat, 15 Apr 2023 18:05:14 +0300
Subject: [PATCH 02/20] feat/block-chat-phrases: Use Object.values instead of
 for..in

---
 src/composable/chat/useChatBlocking.ts | 38 ++++++++++----------------
 1 file changed, 14 insertions(+), 24 deletions(-)

diff --git a/src/composable/chat/useChatBlocking.ts b/src/composable/chat/useChatBlocking.ts
index 65ca57f4b..a9a93b6a4 100644
--- a/src/composable/chat/useChatBlocking.ts
+++ b/src/composable/chat/useChatBlocking.ts
@@ -91,23 +91,19 @@ export function useChatBlocking(ctx: ChannelContext) {
 		save();
 	}
 
-	function checkMatch(key: string, msg: ChatMessage): boolean {
-		if (!data) return false;
-
-		const h = data?.blockedPhrases[key];
-
-		if (!h) return false;
+	function checkMatch(blockedPhraseDef: BlockedPhraseDef, msg: ChatMessage): boolean {
+		if (!data || !blockedPhraseDef) return false;
 
 		let ok = false;
 
-		if (h.regexp) {
-			let regexp = h.cachedRegExp;
+		if (blockedPhraseDef.regexp) {
+			let regexp = blockedPhraseDef.cachedRegExp;
 			if (!regexp) {
 				try {
-					regexp = new RegExp(h.pattern as string, "i");
-					Object.defineProperty(h, "cachedRegExp", { value: regexp });
+					regexp = new RegExp(blockedPhraseDef.pattern as string, "i");
+					Object.defineProperty(blockedPhraseDef, "cachedRegExp", { value: regexp });
 				} catch (err) {
-					log.warn("<ChatBlocking>", "Invalid regexp:", h.pattern ?? "");
+					log.warn("<ChatBlocking>", "Invalid regexp:", blockedPhraseDef.pattern ?? "");
 
 					msg.setHighlight("#878787", "Error " + (err as Error).message);
 					return false;
@@ -115,25 +111,19 @@ export function useChatBlocking(ctx: ChannelContext) {
 			}
 
 			ok = regexp.test(msg.body);
-		} else if (h.pattern) {
-			ok = h.caseSensitive
-				? msg.body.includes(h.pattern)
-				: msg.body.toLowerCase().includes(h.pattern.toLowerCase());
-		} else if (typeof h.test === "function") {
-			ok = h.test(msg);
+		} else if (blockedPhraseDef.pattern) {
+			ok = blockedPhraseDef.caseSensitive
+				? msg.body.includes(blockedPhraseDef.pattern)
+				: msg.body.toLowerCase().includes(blockedPhraseDef.pattern.toLowerCase());
+		} else if (typeof blockedPhraseDef.test === "function") {
+			ok = blockedPhraseDef.test(msg);
 		}
 
 		return ok;
 	}
 
 	function doesMessageContainBlockedPhrase(message: ChatMessage<ComponentFactory>) {
-		const messageIds: string[] = [];
-		for (const blockedPhraseID in getAll()) {
-			if (checkMatch(blockedPhraseID, message)) {
-				messageIds.push(message.id)
-			}
-		}
-		return messageIds.includes(message.id);
+		return Object.values(getAll()).some((s) => checkMatch(s, message))
 	}
 
 	function getAll(): Record<string, BlockedPhraseDef> {

From 3b46c7e61eab103a3701c5de993c3a3e56a3e705 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Sat, 15 Apr 2023 18:31:03 +0300
Subject: [PATCH 03/20] feat/block-chat-phrases: Fix CI issues

---
 src/composable/chat/useChatBlocking.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/composable/chat/useChatBlocking.ts b/src/composable/chat/useChatBlocking.ts
index a9a93b6a4..7bda9a6e8 100644
--- a/src/composable/chat/useChatBlocking.ts
+++ b/src/composable/chat/useChatBlocking.ts
@@ -31,7 +31,7 @@ export function useChatBlocking(ctx: ChannelContext) {
 	let data = m.get(ctx);
 	if (!data) {
 		data = reactive<ChatBlocking>({
-			blockedPhrases: {}
+			blockedPhrases: {},
 		});
 
 		watch(
@@ -62,10 +62,7 @@ export function useChatBlocking(ctx: ChannelContext) {
 
 		const items: [string, BlockedPhraseDef][] = Array.from(Object.values(data.blockedPhrases))
 			.filter((h) => h.persist)
-			.map((h) => [
-				h.id,
-				toRaw(h),
-			]);
+			.map((h) => [h.id, toRaw(h)]);
 
 		blockedPhrases.value = new Map(items);
 	}, 250);
@@ -123,7 +120,7 @@ export function useChatBlocking(ctx: ChannelContext) {
 	}
 
 	function doesMessageContainBlockedPhrase(message: ChatMessage<ComponentFactory>) {
-		return Object.values(getAll()).some((s) => checkMatch(s, message))
+		return Object.values(getAll()).some((s) => checkMatch(s, message));
 	}
 
 	function getAll(): Record<string, BlockedPhraseDef> {
@@ -153,6 +150,6 @@ export function useChatBlocking(ctx: ChannelContext) {
 		doesMessageContainBlockedPhrase,
 		save,
 		updateId,
-		checkMatch
+		checkMatch,
 	};
 }

From feb3fbaa0a72975b7d7e2198f392dfcdb935acea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Sat, 15 Apr 2023 19:06:46 +0300
Subject: [PATCH 04/20] feat/block-chat-phrases: Remove unnecessary loop keys

---
 src/site/global/settings/SettingsConfigBlocking.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/site/global/settings/SettingsConfigBlocking.vue b/src/site/global/settings/SettingsConfigBlocking.vue
index 8f330061f..132c76882 100644
--- a/src/site/global/settings/SettingsConfigBlocking.vue
+++ b/src/site/global/settings/SettingsConfigBlocking.vue
@@ -10,7 +10,7 @@
 			</div>
 
 			<UiScrollable>
-				<template v-for="(h, _, index) of blockedPhrases.getAll()" :key="h.id">
+				<template v-for="h of blockedPhrases.getAll()" :key="h.id">
 					<div class="item">
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">

From 94e5bdaecc0414f5244948300a263c52a672b6b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Mon, 17 Apr 2023 20:49:38 +0300
Subject: [PATCH 05/20] feat/block-chat-phrases: A highlight can now be blocked

---
 src/composable/chat/useChatBlocking.ts        | 155 -----------
 src/composable/chat/useChatHighlights.ts      |  35 ++-
 .../settings/SettingsConfigBlocking.vue       | 242 ------------------
 .../settings/SettingsConfigHighlights.vue     |  74 +++---
 .../modules/chat-input/ChatInputModule.vue    |  23 +-
 .../twitch.tv/modules/chat/ChatController.vue |  23 +-
 src/site/twitch.tv/modules/chat/ChatList.vue  |  34 ++-
 .../twitch.tv/modules/chat/ChatModule.vue     |  20 +-
 8 files changed, 112 insertions(+), 494 deletions(-)
 delete mode 100644 src/composable/chat/useChatBlocking.ts
 delete mode 100644 src/site/global/settings/SettingsConfigBlocking.vue

diff --git a/src/composable/chat/useChatBlocking.ts b/src/composable/chat/useChatBlocking.ts
deleted file mode 100644
index 7bda9a6e8..000000000
--- a/src/composable/chat/useChatBlocking.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { markRaw, reactive, toRaw, watch } from "vue";
-import { toReactive } from "@vueuse/core";
-import { debounceFn } from "@/common/Async";
-import { log } from "@/common/Logger";
-import type { ChatMessage } from "@/common/chat/ChatMessage";
-import { ChannelContext } from "@/composable/channel/useChannelContext";
-import { useConfig } from "../useSettings";
-
-interface ChatBlocking {
-	blockedPhrases: Record<string, BlockedPhraseDef>;
-}
-
-export interface BlockedPhraseDef {
-	id: string;
-
-	pattern?: string;
-	test?: (msg: ChatMessage) => boolean;
-	regexp?: boolean;
-	readonly cachedRegExp?: RegExp;
-
-	label: string;
-	caseSensitive?: boolean;
-	persist?: boolean;
-}
-
-const m = new WeakMap<ChannelContext, ChatBlocking>();
-
-const blockedPhrases = useConfig<Map<string, BlockedPhraseDef>>("chat_input.blocking.phrases");
-
-export function useChatBlocking(ctx: ChannelContext) {
-	let data = m.get(ctx);
-	if (!data) {
-		data = reactive<ChatBlocking>({
-			blockedPhrases: {},
-		});
-
-		watch(
-			blockedPhrases,
-			(h) => {
-				if (!data) return;
-
-				for (const [k, v] of Object.entries(data.blockedPhrases)) {
-					if (!v.persist) continue;
-
-					delete data.blockedPhrases[k];
-				}
-
-				for (const [, v] of h) {
-					data.blockedPhrases[v.id] = v;
-				}
-			},
-			{
-				immediate: true,
-			},
-		);
-
-		m.set(ctx, data);
-	}
-
-	const save = debounceFn(function (): void {
-		if (!data) return;
-
-		const items: [string, BlockedPhraseDef][] = Array.from(Object.values(data.blockedPhrases))
-			.filter((h) => h.persist)
-			.map((h) => [h.id, toRaw(h)]);
-
-		blockedPhrases.value = new Map(items);
-	}, 250);
-
-	function define(id: string, def: Omit<BlockedPhraseDef, "id">, persist?: boolean): BlockedPhraseDef {
-		if (!data) return {} as BlockedPhraseDef;
-
-		const h = (data.blockedPhrases[id] = { ...def, id, persist });
-
-		if (!persist) return h;
-
-		// Store to DB
-		blockedPhrases.value.set(id, markRaw(h));
-		save();
-
-		return h;
-	}
-
-	function remove(id: string): void {
-		if (!data) return;
-
-		delete data.blockedPhrases[id];
-		save();
-	}
-
-	function checkMatch(blockedPhraseDef: BlockedPhraseDef, msg: ChatMessage): boolean {
-		if (!data || !blockedPhraseDef) return false;
-
-		let ok = false;
-
-		if (blockedPhraseDef.regexp) {
-			let regexp = blockedPhraseDef.cachedRegExp;
-			if (!regexp) {
-				try {
-					regexp = new RegExp(blockedPhraseDef.pattern as string, "i");
-					Object.defineProperty(blockedPhraseDef, "cachedRegExp", { value: regexp });
-				} catch (err) {
-					log.warn("<ChatBlocking>", "Invalid regexp:", blockedPhraseDef.pattern ?? "");
-
-					msg.setHighlight("#878787", "Error " + (err as Error).message);
-					return false;
-				}
-			}
-
-			ok = regexp.test(msg.body);
-		} else if (blockedPhraseDef.pattern) {
-			ok = blockedPhraseDef.caseSensitive
-				? msg.body.includes(blockedPhraseDef.pattern)
-				: msg.body.toLowerCase().includes(blockedPhraseDef.pattern.toLowerCase());
-		} else if (typeof blockedPhraseDef.test === "function") {
-			ok = blockedPhraseDef.test(msg);
-		}
-
-		return ok;
-	}
-
-	function doesMessageContainBlockedPhrase(message: ChatMessage<ComponentFactory>) {
-		return Object.values(getAll()).some((s) => checkMatch(s, message));
-	}
-
-	function getAll(): Record<string, BlockedPhraseDef> {
-		if (!data) return {};
-
-		return toReactive(data.blockedPhrases);
-	}
-
-	function updateId(oldId: string, newId: string): void {
-		if (!data) return;
-
-		const h = data.blockedPhrases[oldId];
-		if (!h) return;
-
-		data.blockedPhrases[newId] = h;
-		delete data.blockedPhrases[oldId];
-
-		h.id = newId;
-
-		save();
-	}
-
-	return {
-		define,
-		remove,
-		getAll,
-		doesMessageContainBlockedPhrase,
-		save,
-		updateId,
-		checkMatch,
-	};
-}
diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index 87827caea..126f93d28 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -22,6 +22,7 @@ export interface HighlightDef {
 
 	color: string;
 	label: string;
+	isBlocked: boolean;
 	caseSensitive?: boolean;
 	flashTitle?: boolean;
 	flashTitleFn?: (msg: ChatMessage) => string;
@@ -38,6 +39,7 @@ export interface HighlightDef {
 const m = new WeakMap<ChannelContext, ChatHighlights>();
 
 const customHighlights = useConfig<Map<string, HighlightDef>>("highlights.custom");
+const blockedPhrases = useConfig<Map<string, HighlightDef>>("highlights.blocked");
 const soundVolume = useConfig<number>("highlights.sound_volume");
 
 export function useChatHighlights(ctx: ChannelContext) {
@@ -80,6 +82,27 @@ export function useChatHighlights(ctx: ChannelContext) {
 		m.set(ctx, data);
 	}
 
+	const saveAsBlocked = debounceFn(function (id: string, isBlocked: boolean): void {
+		if (!data) return;
+
+		// Add blocked highlights to their own config
+		if (isBlocked) {
+			const items: [string, HighlightDef][] = Array.from(Object.values(data.highlights))
+				.filter((h) => h.persist)
+				.filter((h) => h.isBlocked)
+				.map((h) => [
+					h.id,
+					toRaw(h),
+				]);
+			blockedPhrases.value = new Map(items);
+		} else {
+			// Remove as blocked highlight and re-instate as normal highlight
+			blockedPhrases.value.delete(id);
+		}
+
+		save();
+	}, 250);
+
 	const save = debounceFn(function (): void {
 		if (!data) return;
 
@@ -138,10 +161,11 @@ export function useChatHighlights(ctx: ChannelContext) {
 		if (!data) return;
 
 		delete data.highlights[id];
+		blockedPhrases.value.delete(id);
 		save();
 	}
 
-	function checkMatch(key: string, msg: ChatMessage): boolean {
+	function checkMatch(key: string, msg: ChatMessage, skipMatchHighlight?: boolean): boolean {
 		if (!data) return false;
 
 		const h = data?.highlights[key];
@@ -172,7 +196,7 @@ export function useChatHighlights(ctx: ChannelContext) {
 			ok = h.test(msg);
 		}
 
-		if (ok) {
+		if (ok && !skipMatchHighlight) {
 			msg.setHighlight(h.color, h.label);
 
 			if (h.soundDef && !msg.historical) {
@@ -236,14 +260,21 @@ export function useChatHighlights(ctx: ChannelContext) {
 		save();
 	}
 
+	function doesMessageContainBlockedPhrase(message: ChatMessage<ComponentFactory>) {
+		const allBlockedTerms = Object.values(getAll()).filter((f) => f.isBlocked);
+		return allBlockedTerms.some((s) => checkMatch(s.id, message, true));
+	}
+
 	return {
 		define,
 		remove,
 		getAll,
 		save,
+		saveAsBlocked,
 		updateId,
 		checkMatch,
 		updateSoundData,
 		updateFlashTitle,
+		doesMessageContainBlockedPhrase
 	};
 }
diff --git a/src/site/global/settings/SettingsConfigBlocking.vue b/src/site/global/settings/SettingsConfigBlocking.vue
deleted file mode 100644
index 132c76882..000000000
--- a/src/site/global/settings/SettingsConfigBlocking.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<template>
-	<main class="seventv-settings-blocking">
-		<div class="tabs"></div>
-		<div class="list">
-			<div class="item heading">
-				<div>Pattern</div>
-				<div>Label</div>
-				<div class="centered">RegExp</div>
-				<div>Case Sensitive</div>
-			</div>
-
-			<UiScrollable>
-				<template v-for="h of blockedPhrases.getAll()" :key="h.id">
-					<div class="item">
-						<!-- Pattern -->
-						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
-							<span>{{ h.pattern }}</span>
-							<FormInput
-								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern"
-								@blur="onInputBlur(h, 'pattern')"
-							/>
-						</div>
-
-						<!-- Label -->
-						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
-							<span>{{ h.label }}</span>
-							<FormInput
-								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label"
-								@blur="onInputBlur(h, 'label')"
-							/>
-						</div>
-
-						<!-- Checkbox: RegExp -->
-						<div name="is-regexp" class="centered">
-							<FormCheckbox :checked="!!h.regexp" @update:checked="onRegExpStateChange(h, $event)" />
-						</div>
-
-						<!-- Checkbox: Case Sensitive -->
-						<div name="case-sensitive" class="centered">
-							<FormCheckbox
-								:checked="!!h.caseSensitive"
-								@update:checked="onCaseSensitiveChange(h, $event)"
-							/>
-						</div>
-
-						<div ref="interactRef" name="interact">
-							<CloseIcon v-tooltip="'Remove'" tabindex="0" @click="onDeleteBlockedPhrase(h)" />
-						</div>
-					</div>
-				</template>
-			</UiScrollable>
-
-			<!-- New -->
-			<div class="item create-new">
-				<div name="pattern">
-					<FormInput v-model="newInput" label="New Blocked phrase..." />
-				</div>
-			</div>
-		</div>
-	</main>
-</template>
-
-<script setup lang="ts">
-import { nextTick, reactive, ref, watch } from "vue";
-import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { BlockedPhraseDef, useChatBlocking } from "@/composable/chat/useChatBlocking";
-import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
-import UiScrollable from "@/ui/UiScrollable.vue";
-import FormCheckbox from "../components/FormCheckbox.vue";
-import FormInput from "../components/FormInput.vue";
-import { v4 as uuid } from "uuid";
-
-const ctx = useChannelContext(); // this will be an empty context, as config is not tied to channel
-const blockedPhrases = useChatBlocking(ctx);
-
-const newInput = ref("");
-const inputs = reactive({
-	pattern: new WeakMap<BlockedPhraseDef, InstanceType<typeof FormInput>>(),
-	label: new WeakMap<BlockedPhraseDef, InstanceType<typeof FormInput>>(),
-});
-const interactRef = ref<HTMLElement[]>();
-
-function onInputFocus(h: BlockedPhraseDef, inputName: keyof typeof inputs): void {
-	const input = inputs[inputName].get(h);
-	if (!input) return;
-
-	input.focus();
-}
-
-function onInputBlur(h: BlockedPhraseDef, inputName: keyof typeof inputs): void {
-	const input = inputs[inputName].get(h);
-	if (!input) return;
-
-	const id = uuid();
-	blockedPhrases.updateId("new-blocked-phrase", id);
-	blockedPhrases.save();
-}
-
-function onRegExpStateChange(h: BlockedPhraseDef, checked: boolean): void {
-	h.regexp = checked;
-	blockedPhrases.save();
-}
-
-function onCaseSensitiveChange(h: BlockedPhraseDef, checked: boolean): void {
-	h.caseSensitive = checked;
-	blockedPhrases.save();
-}
-
-function onDeleteBlockedPhrase(h: BlockedPhraseDef): void {
-	blockedPhrases.remove(h.id);
-	blockedPhrases.save();
-}
-
-watch(newInput, (val, old) => {
-	if (!val || old) return;
-
-	const h = blockedPhrases.define(
-		"new-blocked-phrase",
-		{
-			label: "",
-			pattern: val,
-		},
-		true,
-	);
-
-	nextTick(() => {
-		const input = inputs.pattern.get(h);
-		if (!input) return;
-
-		input.focus();
-		newInput.value = "";
-	});
-});
-</script>
-
-<style scoped lang="scss">
-main.seventv-settings-blocking {
-	display: grid;
-	padding: 0.25rem;
-	grid-template-rows: 0 max-content;
-	grid-template-areas:
-		"tabs"
-		"list";
-
-	overflow-x: auto;
-
-	.tabs {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		grid-template-rows: 1fr;
-		grid-area: tabs;
-	}
-	.list {
-		display: grid;
-		grid-area: list;
-		max-height: 36rem;
-
-		.item {
-			display: grid;
-			grid-auto-flow: row dense;
-			grid-template-columns: 20% repeat(4, 1fr);
-			column-gap: 3rem;
-			padding: 1rem;
-
-			> div {
-				align-self: center;
-				&.centered {
-					justify-self: center;
-				}
-			}
-
-			&:nth-child(odd) {
-				background-color: var(--seventv-background-shade-2);
-			}
-
-			&.heading {
-				background-color: var(--seventv-background-shade-3);
-				border-bottom: 0.25rem solid var(--seventv-primary);
-			}
-
-			&:not(.create-new) > .use-virtual-input {
-				cursor: text;
-				padding: 0.5rem;
-				display: block;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-
-				input {
-					width: 0;
-					height: 0;
-					opacity: 0;
-				}
-
-				&:focus-within {
-					padding: 0;
-					span {
-						display: none;
-					}
-
-					input {
-						opacity: 1;
-						width: 100%;
-						height: initial;
-					}
-				}
-			}
-
-			[name="color"] > input {
-				&::-webkit-color-swatch-wrapper {
-					padding: 0;
-				}
-				&::-webkit-color-swatch {
-					border: none;
-				}
-			}
-
-			[name="interact"] {
-				display: grid;
-				column-gap: 1rem;
-				grid-auto-flow: column;
-				justify-self: end;
-
-				button {
-					all: unset;
-					cursor: pointer;
-				}
-
-				svg {
-					cursor: pointer;
-					font-size: 2rem;
-					&:hover {
-						color: var(--seventv-primary);
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/src/site/global/settings/SettingsConfigHighlights.vue b/src/site/global/settings/SettingsConfigHighlights.vue
index 615ef1a16..3dc583c92 100644
--- a/src/site/global/settings/SettingsConfigHighlights.vue
+++ b/src/site/global/settings/SettingsConfigHighlights.vue
@@ -5,9 +5,10 @@
 			<div class="item heading">
 				<div>Pattern</div>
 				<div>Label</div>
-				<div class="centered">Flash Title</div>
+				<div>Blocked</div>
 				<div class="centered">RegExp</div>
 				<div>Case Sensitive</div>
+				<div class="centered">Flash Title</div>
 				<div>Color</div>
 			</div>
 
@@ -17,26 +18,19 @@
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
-							<FormInput
-								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern"
-								@blur="onInputBlur(h, 'pattern')"
-							/>
+							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
 						</div>
 
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
-							<FormInput
-								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label"
-								@blur="onInputBlur(h, 'label')"
-							/>
+							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label" @blur="onInputBlur(h, 'label')" />
 						</div>
 
-						<!-- Checkbox: Flash Title -->
-						<div name="flash-title" class="centered">
-							<FormCheckbox :checked="!!h.flashTitle" @update:checked="onFlashTitleChange(h, $event)" />
+						<div name="is-blocked">
+							<FormCheckbox :checked="!!h.isBlocked" @update:checked="onModeChange(h, $event)" />
 						</div>
 
 						<!-- Checkbox: RegExp -->
@@ -46,23 +40,23 @@
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
-							<FormCheckbox
-								:checked="!!h.caseSensitive"
-								@update:checked="onCaseSensitiveChange(h, $event)"
-							/>
+							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
+						</div>
+
+						<!-- Checkbox: Flash Title -->
+						<div name="flash-title" class="centered">
+							<FormCheckbox v-if="!h.isBlocked" :checked="!!h.flashTitle"
+								@update:checked="onFlashTitleChange(h, $event)" />
 						</div>
 
 						<div name="color">
-							<input v-model="h.color" type="color" @input="onColorChange(h, $event as InputEvent)" />
+							<input v-if="!h.isBlocked" v-model="h.color" type="color"
+								@input="onColorChange(h, $event as InputEvent)" />
 						</div>
 
 						<div ref="interactRef" name="interact">
-							<button
-								ref="soundEffectButton"
-								class="sound-button"
-								:class="{ 'has-sound': !!h.soundFile }"
-								tabindex="0"
-							>
+							<button v-if="!h.isBlocked" ref="soundEffectButton" class="sound-button"
+								:class="{ 'has-sound': !!h.soundFile }" tabindex="0">
 								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
 								<div class="sound-options">
 									<UiFloating v-if="interactRef?.[index]" :anchor="interactRef[index]">
@@ -76,11 +70,9 @@
 											<label>
 												Custom Sound{{ h.soundFile ? "" : "..." }}
 												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
-												<input
-													type="file"
+												<input type="file"
 													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
-													@input="onUploadSoundFile(h, $event)"
-												/>
+													@input="onUploadSoundFile(h, $event)" />
 											</label>
 										</button>
 									</UiFloating>
@@ -141,6 +133,11 @@ function onInputBlur(h: HighlightDef, inputName: keyof typeof inputs): void {
 	highlights.save();
 }
 
+function onModeChange(h: HighlightDef, checked: boolean): void {
+	h.isBlocked = checked;
+	highlights.saveAsBlocked(h.id, checked);
+}
+
 function onFlashTitleChange(h: HighlightDef, checked: boolean): void {
 	h.flashTitle = checked;
 	highlights.updateFlashTitle(h);
@@ -226,6 +223,7 @@ watch(newInput, (val, old) => {
 			color: "#8803fc",
 			label: "",
 			pattern: val,
+			isBlocked: false
 		},
 		true,
 	);
@@ -257,6 +255,7 @@ main.seventv-settings-custom-highlights {
 		grid-template-rows: 1fr;
 		grid-area: tabs;
 	}
+
 	.list {
 		display: grid;
 		grid-area: list;
@@ -265,12 +264,13 @@ main.seventv-settings-custom-highlights {
 		.item {
 			display: grid;
 			grid-auto-flow: row dense;
-			grid-template-columns: 20% 9rem 1fr 1fr 1fr 1fr 1fr;
+			grid-template-columns: 20% 9rem repeat(6, 1fr);
 			column-gap: 3rem;
 			padding: 1rem;
 
-			> div {
+			>div {
 				align-self: center;
+
 				&.centered {
 					justify-self: center;
 				}
@@ -285,7 +285,7 @@ main.seventv-settings-custom-highlights {
 				border-bottom: 0.25rem solid var(--seventv-primary);
 			}
 
-			&:not(.create-new) > .use-virtual-input {
+			&:not(.create-new)>.use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
 				display: block;
@@ -301,6 +301,7 @@ main.seventv-settings-custom-highlights {
 
 				&:focus-within {
 					padding: 0;
+
 					span {
 						display: none;
 					}
@@ -313,10 +314,11 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
-			[name="color"] > input {
+			[name="color"]>input {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
+
 				&::-webkit-color-swatch {
 					border: none;
 				}
@@ -348,7 +350,7 @@ main.seventv-settings-custom-highlights {
 					border-radius: 50%;
 				}
 
-				.sound-button:focus-within > .sound-options {
+				.sound-button:focus-within>.sound-options {
 					position: fixed;
 					width: 9rem;
 					display: block;
@@ -357,6 +359,7 @@ main.seventv-settings-custom-highlights {
 					input {
 						display: none;
 					}
+
 					label {
 						cursor: pointer;
 					}
@@ -371,9 +374,11 @@ main.seventv-settings-custom-highlights {
 						p {
 							color: var(--seventv-muted);
 						}
+
 						&:hover {
 							border-color: var(--seventv-primary);
 						}
+
 						&[active="true"] {
 							color: var(--seventv-primary);
 						}
@@ -383,6 +388,7 @@ main.seventv-settings-custom-highlights {
 				svg {
 					cursor: pointer;
 					font-size: 2rem;
+
 					&:hover {
 						color: var(--seventv-primary);
 					}
diff --git a/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue b/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue
index 8033844a7..13ba0e6ba 100644
--- a/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue
+++ b/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue
@@ -1,17 +1,13 @@
 <template>
 	<template v-for="inst in autocompleteProvider.instances" :key="inst.identifier">
 		<ChatInput v-if="shouldMount.get(inst)" :instance="inst" />
-		<ChatSpam
-			v-if="shouldMount.get(inst)"
-			:instance="inst"
-			:suggest="suggestBypassDuplicateCheck || false"
-			@suggest-answer="onBypassSuggestionAnswer"
-		/>
+		<ChatSpam v-if="shouldMount.get(inst)" :instance="inst" :suggest="suggestBypassDuplicateCheck || false"
+			@suggest-answer="onBypassSuggestionAnswer" />
 	</template>
 </template>
 
 <script setup lang="ts">
-import { markRaw, reactive, ref } from "vue";
+import { reactive, ref } from "vue";
 import { HookedInstance, useComponentHook } from "@/common/ReactHooks";
 import { declareModule } from "@/composable/useModule";
 import { declareConfig, useConfig } from "@/composable/useSettings";
@@ -129,9 +125,6 @@ markAsReady();
 </script>
 
 <script lang="ts">
-import { BlockedPhraseDef } from "@/composable/chat/useChatBlocking";
-import SettingsConfigBlocking from "@/site/global/settings/SettingsConfigBlocking.vue";
-
 export const config = [
 	declareConfig("chat_input.autocomplete.colon", "TOGGLE", {
 		path: ["Chat", "Autocompletion"],
@@ -199,15 +192,5 @@ export const config = [
 		hint: "If enabled, you can use the Ctrl+Enter shortcut to keep the current message in the input box after sending",
 		defaultValue: true,
 	}),
-	declareConfig<Map<string, BlockedPhraseDef>>("chat_input.blocking.phrases", "CUSTOM", {
-		path: ["Chat", "Blocking"],
-		custom: {
-			component: markRaw(SettingsConfigBlocking),
-			gridMode: "new-row",
-		},
-		label: "Blocked phrases",
-		hint: "Block specific words or phrases",
-		defaultValue: new Map(),
-	}),
 ];
 </script>
diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue
index 93a7b85ac..fd7e90221 100644
--- a/src/site/twitch.tv/modules/chat/ChatController.vue
+++ b/src/site/twitch.tv/modules/chat/ChatController.vue
@@ -1,14 +1,9 @@
 <!-- eslint-disable no-fallthrough -->
 <template>
 	<Teleport v-if="ctx.id" :to="containerEl">
-		<UiScrollable
-			ref="scrollerRef"
-			class="seventv-chat-scroller"
-			@container-scroll="scroller.onScroll"
-			@container-wheel="scroller.onWheel"
-			@mouseenter="properties.hovering = true"
-			@mouseleave="properties.hovering = false"
-		>
+		<UiScrollable ref="scrollerRef" class="seventv-chat-scroller" @container-scroll="scroller.onScroll"
+			@container-wheel="scroller.onWheel" @mouseenter="properties.hovering = true"
+			@mouseleave="properties.hovering = false">
 			<div id="seventv-message-container" class="seventv-message-container">
 				<ChatList ref="chatList" :list="list" :message-handler="messageHandler" />
 			</div>
@@ -41,12 +36,12 @@ import { HookedInstance, awaitComponents } from "@/common/ReactHooks";
 import { defineFunctionHook, definePropertyHook, unsetPropertyHook } from "@/common/Reflection";
 import { ChatMessage } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { useChatBlocking } from "@/composable/chat/useChatBlocking";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
 import { useChatProperties } from "@/composable/chat/useChatProperties";
 import { useChatScroller } from "@/composable/chat/useChatScroller";
 import { useChatTools } from "@/composable/chat/useChatTools";
+import { useChatHighlights } from "@/composable/chat/useChatHighlights";
 import { getModule } from "@/composable/useModule";
 import { useConfig } from "@/composable/useSettings";
 import { useWorker } from "@/composable/useWorker";
@@ -94,7 +89,7 @@ const scroller = useChatScroller(ctx, {
 });
 const properties = useChatProperties(ctx);
 const tools = useChatTools(ctx);
-const chatBlocking = useChatBlocking(ctx);
+const chatHighlights = useChatHighlights(ctx);
 
 // line limit
 const lineLimit = useConfig("chat.line_limit", 150);
@@ -255,7 +250,7 @@ watch(messageBufferComponentDbc, (msgBuf, old) => {
 						m.historical = true;
 						chatList.value?.onChatMessage(m, msg as Twitch.ChatMessage, false);
 
-						if (chatBlocking.doesMessageContainBlockedPhrase(m)) {
+						if (chatHighlights.doesMessageContainBlockedPhrase(m)) {
 							continue;
 						}
 
@@ -380,7 +375,7 @@ seventv-container.seventv-chat-list {
 	overflow: auto !important;
 	overflow-x: hidden !important;
 
-	> seventv-container {
+	>seventv-container {
 		display: none;
 	}
 
@@ -407,7 +402,7 @@ seventv-container.seventv-chat-list {
 			border-radius: 0.33em;
 			background-color: black;
 
-			> .seventv-scrollbar-thumb {
+			>.seventv-scrollbar-thumb {
 				position: absolute;
 				width: 100%;
 
@@ -461,9 +456,11 @@ seventv-container.seventv-chat-list {
 
 .community-highlight {
 	background-color: var(--seventv-background-transparent-1) !important;
+
 	@at-root .seventv-transparent & {
 		backdrop-filter: blur(1em);
 	}
+
 	transition: background-color 0.25s;
 
 	&:hover {
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index 957d422d2..f64c3d40c 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -2,10 +2,8 @@
 	<main ref="chatListEl" class="seventv-chat-list" :alternating-background="isAlternatingBackground">
 		<div v-for="msg of displayedMessages" :key="msg.sym" :msg-id="msg.id" class="seventv-message">
 			<template v-if="msg.instance">
-				<component
-					:is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
-					v-bind="{ msg }"
-				>
+				<component :is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
+					v-bind="{ msg }">
 					<component :is="msg.instance" v-bind="msg.componentProps" :msg="msg">
 						<UserMessage :msg="msg" :emotes="emotes.active" :chatters="messages.chattersByUsername" />
 					</component>
@@ -31,7 +29,6 @@ import { convertCheerEmote, convertTwitchEmote } from "@/common/Transform";
 import { ChatMessage, ChatMessageModeration, ChatUser } from "@/common/chat/ChatMessage";
 import { IsChatMessage, IsDisplayableMessage, IsModerationMessage } from "@/common/type-predicates/Messages";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { useChatBlocking } from "@/composable/chat/useChatBlocking";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
 import { useChatHighlights } from "@/composable/chat/useChatHighlights";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
@@ -57,7 +54,6 @@ const displayedMessages = toRef(messages, "displayed");
 const scroller = useChatScroller(ctx);
 const properties = useChatProperties(ctx);
 const chatHighlights = useChatHighlights(ctx);
-const chatBlocking = useChatBlocking(ctx);
 const pageVisibility = useDocumentVisibility();
 const isHovering = toRef(properties, "hovering");
 const pausedByVisibility = ref(false);
@@ -207,9 +203,9 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 			const parentMsgAuthor =
 				msgData.reply.parentUserLogin && msgData.reply.parentDisplayName
 					? {
-							username: msgData.reply.parentUserLogin,
-							displayName: msgData.reply.parentDisplayName,
-					  }
+						username: msgData.reply.parentUserLogin,
+						displayName: msgData.reply.parentDisplayName,
+					}
 					: null;
 
 			msg.parent = {
@@ -251,15 +247,15 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 						},
 						data: e.cheerAmount
 							? convertCheerEmote({
-									alt: e.alt,
-									cheerAmount: e.cheerAmount,
-									cheerColor: e.cheerColor,
-									images: e.images,
-							  })
+								alt: e.alt,
+								cheerAmount: e.cheerAmount,
+								cheerColor: e.cheerColor,
+								images: e.images,
+							})
 							: convertTwitchEmote({
-									id: e.emoteID,
-									token: e.alt,
-							  } as Partial<Twitch.TwitchEmote>),
+								id: e.emoteID,
+								token: e.alt,
+							} as Partial<Twitch.TwitchEmote>),
 					};
 					break;
 				}
@@ -295,7 +291,7 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 		chatHighlights.checkMatch(highlightID, msg);
 	}
 
-	if (chatBlocking.doesMessageContainBlockedPhrase(msg)) {
+	if (chatHighlights.doesMessageContainBlockedPhrase(msg)) {
 		shouldRenderMessage = false;
 	}
 
@@ -489,6 +485,7 @@ watch(
 					? (msg: ChatMessage) => `🔔 @${msg.author?.username ?? "A user"} mentioned you`
 					: undefined,
 				flashTitle: true,
+				isBlocked: false
 			});
 
 			chatHighlights.define("~reply", {
@@ -500,6 +497,7 @@ watch(
 					? (msg: ChatMessage) => `🔔 @${msg.author?.username ?? "A user"} replied to you`
 					: undefined,
 				flashTitle: true,
+				isBlocked: false
 			});
 		} else {
 			chatHighlights.remove("~mention");
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index 43edaf974..eda7a71cc 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -1,13 +1,9 @@
 <template>
 	<template v-for="(inst, i) of chatController.instances" :key="inst.identifier">
-		<ChatController
-			v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
-			:list="chatList.instances[0] ?? undefined"
-			:controller="chatController.instances[i]"
-			:room="chatRoom.instances[0] ?? undefined"
-			:buffer="chatBuffer.instances[0] ?? undefined"
-			:events="chatEvents.instances[0] ?? undefined"
-		/>
+		<ChatController v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
+			:list="chatList.instances[0] ?? undefined" :controller="chatController.instances[i]"
+			:room="chatRoom.instances[0] ?? undefined" :buffer="chatBuffer.instances[0] ?? undefined"
+			:events="chatEvents.instances[0] ?? undefined" />
 	</template>
 </template>
 
@@ -365,10 +361,14 @@ export const config = [
 			component: markRaw(SettingsConfigHighlights),
 			gridMode: "new-row",
 		},
-		label: "Custom Highlights",
-		hint: "Create custom highlights for specific words or phrases",
+		label: "Custom Highlights and Blocked terms",
+		hint: "Create custom highlights and blocked terms",
 		defaultValue: new Map(),
 	}),
+	declareConfig<Map<string, string>>("highlights.blocked", "NONE", {
+		defaultValue: new Map(),
+		label: ""
+	}),
 	declareConfig<number>("highlights.sound_volume", "SLIDER", {
 		path: ["Highlights", "Built-In"],
 		label: "Highlight Sound Volume",

From 105667167a1193acd4c26f9d68c6714be0365114 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Mon, 17 Apr 2023 20:52:03 +0300
Subject: [PATCH 06/20] feat/block-chat-phrases: make format

---
 .github/ISSUE_TEMPLATE/bug_report.yml         | 84 +++++++++----------
 .github/ISSUE_TEMPLATE/feature_request.yml    | 38 ++++-----
 src/composable/chat/useChatHighlights.ts      |  7 +-
 .../settings/SettingsConfigHighlights.vue     | 59 +++++++++----
 .../modules/chat-input/ChatInputModule.vue    |  8 +-
 .../twitch.tv/modules/chat/ChatController.vue | 17 ++--
 src/site/twitch.tv/modules/chat/ChatList.vue  | 32 +++----
 .../twitch.tv/modules/chat/ChatModule.vue     | 14 ++--
 8 files changed, 147 insertions(+), 112 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 3549054c5..3a58f01b7 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -3,47 +3,47 @@ description: File a bug report
 title: "[BUG] <title>"
 labels: bug
 body:
-  - type: checkboxes
-    attributes:
-      label: Is there an existing issue for this?
-      description: Please [search here](https://github.com/SevenTV/Extension/issues) to see if an issue already exists for your problem.
-      options:
-        - label: I have searched the existing issues
+    - type: checkboxes
+      attributes:
+          label: Is there an existing issue for this?
+          description: Please [search here](https://github.com/SevenTV/Extension/issues) to see if an issue already exists for your problem.
+          options:
+              - label: I have searched the existing issues
+                required: true
+    - type: checkboxes
+      attributes:
+          label: This issue exists in the latest nightly version
+          description: Please make sure you have installed the latest nightly version and verified it is still an issue.
+          options:
+              - label: I am using the latest nightly version
+                required: true
+    - type: dropdown
+      attributes:
+          label: What browsers are you seeing the problem on?
+          multiple: true
+          options:
+              - Chrome
+              - Firefox
+              - Opera
+              - Microsoft Edge
+              - Other
+      validations:
           required: true
-  - type: checkboxes
-    attributes:
-      label: This issue exists in the latest nightly version
-      description: Please make sure you have installed the latest nightly version and verified it is still an issue.
-      options:
-        - label: I am using the latest nightly version
+    - type: textarea
+      attributes:
+          label: Current Behavior
+          description: A clear & concise description of what you're experiencing.
+      validations:
+          required: true
+    - type: textarea
+      attributes:
+          label: Expected Behavior
+          description: A clear & concise description of what you expected to happen.
+      validations:
+          required: true
+    - type: textarea
+      attributes:
+          label: Steps To Reproduce
+          description: Steps to reproduce the behavior.
+      validations:
           required: true
-  - type: dropdown
-    attributes:
-      label: What browsers are you seeing the problem on?
-      multiple: true
-      options:
-        - Chrome
-        - Firefox
-        - Opera
-        - Microsoft Edge
-        - Other
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Current Behavior
-      description: A clear & concise description of what you're experiencing.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Expected Behavior
-      description: A clear & concise description of what you expected to happen.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Steps To Reproduce
-      description: Steps to reproduce the behavior.
-    validations:
-      required: true
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
index 2e6e94b0f..b84778a13 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -3,23 +3,23 @@ description: File a feature request
 title: "[REQUEST] <title>"
 labels: enhancement
 body:
-  - type: checkboxes
-    attributes:
-      label: Is there an existing issue for this?
-      description: Please [search here](https://github.com/SevenTV/Extension/issues) to see if an issue already exists for your feature.
-      options:
-        - label: I have searched the existing issues
+    - type: checkboxes
+      attributes:
+          label: Is there an existing issue for this?
+          description: Please [search here](https://github.com/SevenTV/Extension/issues) to see if an issue already exists for your feature.
+          options:
+              - label: I have searched the existing issues
+                required: true
+    - type: checkboxes
+      attributes:
+          label: This feature does not exist in the latest nightly version
+          description: Please make sure you have installed the latest nightly version and verified it is not a feature already.
+          options:
+              - label: I have checked the latest nightly version
+                required: true
+    - type: textarea
+      attributes:
+          label: Feature Description
+          description: A clear & concise description of what you're requesting.
+      validations:
           required: true
-  - type: checkboxes
-    attributes:
-      label: This feature does not exist in the latest nightly version
-      description: Please make sure you have installed the latest nightly version and verified it is not a feature already.
-      options:
-        - label: I have checked the latest nightly version
-          required: true
-  - type: textarea
-    attributes:
-      label: Feature Description
-      description: A clear & concise description of what you're requesting.
-    validations:
-      required: true
diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index 126f93d28..f282a3355 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -90,10 +90,7 @@ export function useChatHighlights(ctx: ChannelContext) {
 			const items: [string, HighlightDef][] = Array.from(Object.values(data.highlights))
 				.filter((h) => h.persist)
 				.filter((h) => h.isBlocked)
-				.map((h) => [
-					h.id,
-					toRaw(h),
-				]);
+				.map((h) => [h.id, toRaw(h)]);
 			blockedPhrases.value = new Map(items);
 		} else {
 			// Remove as blocked highlight and re-instate as normal highlight
@@ -275,6 +272,6 @@ export function useChatHighlights(ctx: ChannelContext) {
 		checkMatch,
 		updateSoundData,
 		updateFlashTitle,
-		doesMessageContainBlockedPhrase
+		doesMessageContainBlockedPhrase,
 	};
 }
diff --git a/src/site/global/settings/SettingsConfigHighlights.vue b/src/site/global/settings/SettingsConfigHighlights.vue
index 3dc583c92..d46492130 100644
--- a/src/site/global/settings/SettingsConfigHighlights.vue
+++ b/src/site/global/settings/SettingsConfigHighlights.vue
@@ -18,15 +18,21 @@
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
-							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
+							<FormInput
+								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern"
+								@blur="onInputBlur(h, 'pattern')"
+							/>
 						</div>
 
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
-							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label" @blur="onInputBlur(h, 'label')" />
+							<FormInput
+								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label"
+								@blur="onInputBlur(h, 'label')"
+							/>
 						</div>
 
 						<div name="is-blocked">
@@ -40,23 +46,38 @@
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
-							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
+							<FormCheckbox
+								:checked="!!h.caseSensitive"
+								@update:checked="onCaseSensitiveChange(h, $event)"
+							/>
 						</div>
 
 						<!-- Checkbox: Flash Title -->
 						<div name="flash-title" class="centered">
-							<FormCheckbox v-if="!h.isBlocked" :checked="!!h.flashTitle"
-								@update:checked="onFlashTitleChange(h, $event)" />
+							<FormCheckbox
+								v-if="!h.isBlocked"
+								:checked="!!h.flashTitle"
+								@update:checked="onFlashTitleChange(h, $event)"
+							/>
 						</div>
 
 						<div name="color">
-							<input v-if="!h.isBlocked" v-model="h.color" type="color"
-								@input="onColorChange(h, $event as InputEvent)" />
+							<input
+								v-if="!h.isBlocked"
+								v-model="h.color"
+								type="color"
+								@input="onColorChange(h, $event as InputEvent)"
+							/>
 						</div>
 
 						<div ref="interactRef" name="interact">
-							<button v-if="!h.isBlocked" ref="soundEffectButton" class="sound-button"
-								:class="{ 'has-sound': !!h.soundFile }" tabindex="0">
+							<button
+								v-if="!h.isBlocked"
+								ref="soundEffectButton"
+								class="sound-button"
+								:class="{ 'has-sound': !!h.soundFile }"
+								tabindex="0"
+							>
 								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
 								<div class="sound-options">
 									<UiFloating v-if="interactRef?.[index]" :anchor="interactRef[index]">
@@ -70,9 +91,11 @@
 											<label>
 												Custom Sound{{ h.soundFile ? "" : "..." }}
 												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
-												<input type="file"
+												<input
+													type="file"
 													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
-													@input="onUploadSoundFile(h, $event)" />
+													@input="onUploadSoundFile(h, $event)"
+												/>
 											</label>
 										</button>
 									</UiFloating>
@@ -223,7 +246,7 @@ watch(newInput, (val, old) => {
 			color: "#8803fc",
 			label: "",
 			pattern: val,
-			isBlocked: false
+			isBlocked: false,
 		},
 		true,
 	);
@@ -268,7 +291,7 @@ main.seventv-settings-custom-highlights {
 			column-gap: 3rem;
 			padding: 1rem;
 
-			>div {
+			> div {
 				align-self: center;
 
 				&.centered {
@@ -285,7 +308,7 @@ main.seventv-settings-custom-highlights {
 				border-bottom: 0.25rem solid var(--seventv-primary);
 			}
 
-			&:not(.create-new)>.use-virtual-input {
+			&:not(.create-new) > .use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
 				display: block;
@@ -314,7 +337,7 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
-			[name="color"]>input {
+			[name="color"] > input {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
@@ -350,7 +373,7 @@ main.seventv-settings-custom-highlights {
 					border-radius: 50%;
 				}
 
-				.sound-button:focus-within>.sound-options {
+				.sound-button:focus-within > .sound-options {
 					position: fixed;
 					width: 9rem;
 					display: block;
diff --git a/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue b/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue
index 13ba0e6ba..f825975f5 100644
--- a/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue
+++ b/src/site/twitch.tv/modules/chat-input/ChatInputModule.vue
@@ -1,8 +1,12 @@
 <template>
 	<template v-for="inst in autocompleteProvider.instances" :key="inst.identifier">
 		<ChatInput v-if="shouldMount.get(inst)" :instance="inst" />
-		<ChatSpam v-if="shouldMount.get(inst)" :instance="inst" :suggest="suggestBypassDuplicateCheck || false"
-			@suggest-answer="onBypassSuggestionAnswer" />
+		<ChatSpam
+			v-if="shouldMount.get(inst)"
+			:instance="inst"
+			:suggest="suggestBypassDuplicateCheck || false"
+			@suggest-answer="onBypassSuggestionAnswer"
+		/>
 	</template>
 </template>
 
diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue
index fd7e90221..956a42d57 100644
--- a/src/site/twitch.tv/modules/chat/ChatController.vue
+++ b/src/site/twitch.tv/modules/chat/ChatController.vue
@@ -1,9 +1,14 @@
 <!-- eslint-disable no-fallthrough -->
 <template>
 	<Teleport v-if="ctx.id" :to="containerEl">
-		<UiScrollable ref="scrollerRef" class="seventv-chat-scroller" @container-scroll="scroller.onScroll"
-			@container-wheel="scroller.onWheel" @mouseenter="properties.hovering = true"
-			@mouseleave="properties.hovering = false">
+		<UiScrollable
+			ref="scrollerRef"
+			class="seventv-chat-scroller"
+			@container-scroll="scroller.onScroll"
+			@container-wheel="scroller.onWheel"
+			@mouseenter="properties.hovering = true"
+			@mouseleave="properties.hovering = false"
+		>
 			<div id="seventv-message-container" class="seventv-message-container">
 				<ChatList ref="chatList" :list="list" :message-handler="messageHandler" />
 			</div>
@@ -37,11 +42,11 @@ import { defineFunctionHook, definePropertyHook, unsetPropertyHook } from "@/com
 import { ChatMessage } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
+import { useChatHighlights } from "@/composable/chat/useChatHighlights";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
 import { useChatProperties } from "@/composable/chat/useChatProperties";
 import { useChatScroller } from "@/composable/chat/useChatScroller";
 import { useChatTools } from "@/composable/chat/useChatTools";
-import { useChatHighlights } from "@/composable/chat/useChatHighlights";
 import { getModule } from "@/composable/useModule";
 import { useConfig } from "@/composable/useSettings";
 import { useWorker } from "@/composable/useWorker";
@@ -375,7 +380,7 @@ seventv-container.seventv-chat-list {
 	overflow: auto !important;
 	overflow-x: hidden !important;
 
-	>seventv-container {
+	> seventv-container {
 		display: none;
 	}
 
@@ -402,7 +407,7 @@ seventv-container.seventv-chat-list {
 			border-radius: 0.33em;
 			background-color: black;
 
-			>.seventv-scrollbar-thumb {
+			> .seventv-scrollbar-thumb {
 				position: absolute;
 				width: 100%;
 
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index 9a355d5d3..c7fbf8747 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -2,8 +2,10 @@
 	<main ref="chatListEl" class="seventv-chat-list" :alternating-background="isAlternatingBackground">
 		<div v-for="msg of displayedMessages" :key="msg.sym" :msg-id="msg.id" class="seventv-message">
 			<template v-if="msg.instance">
-				<component :is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
-					v-bind="{ msg }">
+				<component
+					:is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
+					v-bind="{ msg }"
+				>
 					<component :is="msg.instance" v-bind="msg.componentProps" :msg="msg">
 						<UserMessage :msg="msg" :emotes="emotes.active" :chatters="messages.chattersByUsername" />
 					</component>
@@ -204,9 +206,9 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 			const parentMsgAuthor =
 				msgData.reply.parentUserLogin && msgData.reply.parentDisplayName
 					? {
-						username: msgData.reply.parentUserLogin,
-						displayName: msgData.reply.parentDisplayName,
-					}
+							username: msgData.reply.parentUserLogin,
+							displayName: msgData.reply.parentDisplayName,
+					  }
 					: null;
 
 			msg.parent = {
@@ -248,15 +250,15 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 						},
 						data: e.cheerAmount
 							? convertCheerEmote({
-								alt: e.alt,
-								cheerAmount: e.cheerAmount,
-								cheerColor: e.cheerColor,
-								images: e.images,
-							})
+									alt: e.alt,
+									cheerAmount: e.cheerAmount,
+									cheerColor: e.cheerColor,
+									images: e.images,
+							  })
 							: convertTwitchEmote({
-								id: e.emoteID,
-								token: e.alt,
-							} as Partial<Twitch.TwitchEmote>),
+									id: e.emoteID,
+									token: e.alt,
+							  } as Partial<Twitch.TwitchEmote>),
 					};
 					break;
 				}
@@ -486,7 +488,7 @@ watch(
 					? (msg: ChatMessage) => `🔔 @${msg.author?.username ?? "A user"} mentioned you`
 					: undefined,
 				flashTitle: true,
-				isBlocked: false
+				isBlocked: false,
 			});
 
 			chatHighlights.define("~reply", {
@@ -498,7 +500,7 @@ watch(
 					? (msg: ChatMessage) => `🔔 @${msg.author?.username ?? "A user"} replied to you`
 					: undefined,
 				flashTitle: true,
-				isBlocked: false
+				isBlocked: false,
 			});
 		} else {
 			chatHighlights.remove("~mention");
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index 376a5a320..277b82142 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -1,9 +1,13 @@
 <template>
 	<template v-for="(inst, i) of chatController.instances" :key="inst.identifier">
-		<ChatController v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
-			:list="chatList.instances[0] ?? undefined" :controller="chatController.instances[i]"
-			:room="chatRoom.instances[0] ?? undefined" :buffer="chatBuffer.instances[0] ?? undefined"
-			:events="chatEvents.instances[0] ?? undefined" />
+		<ChatController
+			v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
+			:list="chatList.instances[0] ?? undefined"
+			:controller="chatController.instances[i]"
+			:room="chatRoom.instances[0] ?? undefined"
+			:buffer="chatBuffer.instances[0] ?? undefined"
+			:events="chatEvents.instances[0] ?? undefined"
+		/>
 	</template>
 </template>
 
@@ -379,7 +383,7 @@ export const config = [
 	}),
 	declareConfig<Map<string, string>>("highlights.blocked", "NONE", {
 		defaultValue: new Map(),
-		label: ""
+		label: "",
 	}),
 	declareConfig<number>("highlights.sound_volume", "SLIDER", {
 		path: ["Highlights", "Built-In"],

From 3365c30b96a7cd93d8d78159fe7ee2edd43171b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Tue, 18 Apr 2023 15:44:58 +0300
Subject: [PATCH 07/20] feat/block-chat-phrases: Untracked .github issue
 templates

---
 .github/ISSUE_TEMPLATE/bug_report.yml      | 84 +++++++++++-----------
 .github/ISSUE_TEMPLATE/feature_request.yml | 38 +++++-----
 2 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 3a58f01b7..3549054c5 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -3,47 +3,47 @@ description: File a bug report
 title: "[BUG] <title>"
 labels: bug
 body:
-    - type: checkboxes
-      attributes:
-          label: Is there an existing issue for this?
-          description: Please [search here](https://github.com/SevenTV/Extension/issues) to see if an issue already exists for your problem.
-          options:
-              - label: I have searched the existing issues
-                required: true
-    - type: checkboxes
-      attributes:
-          label: This issue exists in the latest nightly version
-          description: Please make sure you have installed the latest nightly version and verified it is still an issue.
-          options:
-              - label: I am using the latest nightly version
-                required: true
-    - type: dropdown
-      attributes:
-          label: What browsers are you seeing the problem on?
-          multiple: true
-          options:
-              - Chrome
-              - Firefox
-              - Opera
-              - Microsoft Edge
-              - Other
-      validations:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please [search here](https://github.com/SevenTV/Extension/issues) to see if an issue already exists for your problem.
+      options:
+        - label: I have searched the existing issues
           required: true
-    - type: textarea
-      attributes:
-          label: Current Behavior
-          description: A clear & concise description of what you're experiencing.
-      validations:
-          required: true
-    - type: textarea
-      attributes:
-          label: Expected Behavior
-          description: A clear & concise description of what you expected to happen.
-      validations:
-          required: true
-    - type: textarea
-      attributes:
-          label: Steps To Reproduce
-          description: Steps to reproduce the behavior.
-      validations:
+  - type: checkboxes
+    attributes:
+      label: This issue exists in the latest nightly version
+      description: Please make sure you have installed the latest nightly version and verified it is still an issue.
+      options:
+        - label: I am using the latest nightly version
           required: true
+  - type: dropdown
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Chrome
+        - Firefox
+        - Opera
+        - Microsoft Edge
+        - Other
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Current Behavior
+      description: A clear & concise description of what you're experiencing.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: A clear & concise description of what you expected to happen.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Steps To Reproduce
+      description: Steps to reproduce the behavior.
+    validations:
+      required: true
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
index b84778a13..2e6e94b0f 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -3,23 +3,23 @@ description: File a feature request
 title: "[REQUEST] <title>"
 labels: enhancement
 body:
-    - type: checkboxes
-      attributes:
-          label: Is there an existing issue for this?
-          description: Please [search here](https://github.com/SevenTV/Extension/issues) to see if an issue already exists for your feature.
-          options:
-              - label: I have searched the existing issues
-                required: true
-    - type: checkboxes
-      attributes:
-          label: This feature does not exist in the latest nightly version
-          description: Please make sure you have installed the latest nightly version and verified it is not a feature already.
-          options:
-              - label: I have checked the latest nightly version
-                required: true
-    - type: textarea
-      attributes:
-          label: Feature Description
-          description: A clear & concise description of what you're requesting.
-      validations:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please [search here](https://github.com/SevenTV/Extension/issues) to see if an issue already exists for your feature.
+      options:
+        - label: I have searched the existing issues
           required: true
+  - type: checkboxes
+    attributes:
+      label: This feature does not exist in the latest nightly version
+      description: Please make sure you have installed the latest nightly version and verified it is not a feature already.
+      options:
+        - label: I have checked the latest nightly version
+          required: true
+  - type: textarea
+    attributes:
+      label: Feature Description
+      description: A clear & concise description of what you're requesting.
+    validations:
+      required: true

From 57a282a124f2b9c83c753bffc11e86c83ad7b36f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Tue, 18 Apr 2023 15:59:19 +0300
Subject: [PATCH 08/20] feat/block-chat-phrases: Change terminology from
 blocked to ignore

---
 CHANGELOG-nightly.md                          |  2 +-
 src/composable/chat/useChatHighlights.ts      | 30 ++++----
 .../settings/SettingsConfigHighlights.vue     | 68 ++++++-------------
 .../twitch.tv/modules/chat/ChatController.vue | 17 ++---
 src/site/twitch.tv/modules/chat/ChatList.vue  | 32 ++++-----
 .../twitch.tv/modules/chat/ChatModule.vue     | 18 ++---
 6 files changed, 65 insertions(+), 102 deletions(-)

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index 063f67767..bd8f25c37 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -4,7 +4,7 @@
 
 -   Links in chat messages now respect known TLDs instead of matching any url-like pattern
 -   Added an option to show timeouts/bans directly in the chat without being a moderator
--   Added a blocked phrases feature
+-   Added an option to ignore messages via highlights
 -   Added options to change what emotes are displayed in the colon list and tab-completion carousel
 -   Added an option to show the text bit for BTTV and FFZ emote modifiers
 -   Added an option to hide monitored suspicious user highlights
diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index f282a3355..91ef2bc8b 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -22,7 +22,7 @@ export interface HighlightDef {
 
 	color: string;
 	label: string;
-	isBlocked: boolean;
+	isIgnored?: boolean;
 	caseSensitive?: boolean;
 	flashTitle?: boolean;
 	flashTitleFn?: (msg: ChatMessage) => string;
@@ -39,7 +39,7 @@ export interface HighlightDef {
 const m = new WeakMap<ChannelContext, ChatHighlights>();
 
 const customHighlights = useConfig<Map<string, HighlightDef>>("highlights.custom");
-const blockedPhrases = useConfig<Map<string, HighlightDef>>("highlights.blocked");
+const ignores = useConfig<Map<string, HighlightDef>>("highlights.ignores");
 const soundVolume = useConfig<number>("highlights.sound_volume");
 
 export function useChatHighlights(ctx: ChannelContext) {
@@ -82,19 +82,19 @@ export function useChatHighlights(ctx: ChannelContext) {
 		m.set(ctx, data);
 	}
 
-	const saveAsBlocked = debounceFn(function (id: string, isBlocked: boolean): void {
+	const saveAsIgnored = debounceFn(function (id: string, isIgnored: boolean): void {
 		if (!data) return;
 
-		// Add blocked highlights to their own config
-		if (isBlocked) {
+		// Add ignored highlights to their own config
+		if (isIgnored) {
 			const items: [string, HighlightDef][] = Array.from(Object.values(data.highlights))
 				.filter((h) => h.persist)
-				.filter((h) => h.isBlocked)
+				.filter((h) => h.isIgnored)
 				.map((h) => [h.id, toRaw(h)]);
-			blockedPhrases.value = new Map(items);
+			ignores.value = new Map(items);
 		} else {
-			// Remove as blocked highlight and re-instate as normal highlight
-			blockedPhrases.value.delete(id);
+			// Remove as ignored highlight and re-instate as normal highlight
+			ignores.value.delete(id);
 		}
 
 		save();
@@ -158,7 +158,7 @@ export function useChatHighlights(ctx: ChannelContext) {
 		if (!data) return;
 
 		delete data.highlights[id];
-		blockedPhrases.value.delete(id);
+		ignores.value.delete(id);
 		save();
 	}
 
@@ -257,9 +257,9 @@ export function useChatHighlights(ctx: ChannelContext) {
 		save();
 	}
 
-	function doesMessageContainBlockedPhrase(message: ChatMessage<ComponentFactory>) {
-		const allBlockedTerms = Object.values(getAll()).filter((f) => f.isBlocked);
-		return allBlockedTerms.some((s) => checkMatch(s.id, message, true));
+	function checkIgnored(message: ChatMessage<ComponentFactory>) {
+		const allIgnores = Object.values(getAll()).filter((f) => f.isIgnored);
+		return allIgnores.some((s) => checkMatch(s.id, message, true));
 	}
 
 	return {
@@ -267,11 +267,11 @@ export function useChatHighlights(ctx: ChannelContext) {
 		remove,
 		getAll,
 		save,
-		saveAsBlocked,
+		saveAsIgnored,
 		updateId,
 		checkMatch,
 		updateSoundData,
 		updateFlashTitle,
-		doesMessageContainBlockedPhrase,
+		checkIgnored,
 	};
 }
diff --git a/src/site/global/settings/SettingsConfigHighlights.vue b/src/site/global/settings/SettingsConfigHighlights.vue
index d46492130..b68c719e6 100644
--- a/src/site/global/settings/SettingsConfigHighlights.vue
+++ b/src/site/global/settings/SettingsConfigHighlights.vue
@@ -5,7 +5,7 @@
 			<div class="item heading">
 				<div>Pattern</div>
 				<div>Label</div>
-				<div>Blocked</div>
+				<div>Ignored</div>
 				<div class="centered">RegExp</div>
 				<div>Case Sensitive</div>
 				<div class="centered">Flash Title</div>
@@ -18,25 +18,19 @@
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
-							<FormInput
-								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern"
-								@blur="onInputBlur(h, 'pattern')"
-							/>
+							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
 						</div>
 
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
-							<FormInput
-								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label"
-								@blur="onInputBlur(h, 'label')"
-							/>
+							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label" @blur="onInputBlur(h, 'label')" />
 						</div>
 
-						<div name="is-blocked">
-							<FormCheckbox :checked="!!h.isBlocked" @update:checked="onModeChange(h, $event)" />
+						<div name="is-ignored">
+							<FormCheckbox :checked="!!h.isIgnored" @update:checked="onModeChange(h, $event)" />
 						</div>
 
 						<!-- Checkbox: RegExp -->
@@ -46,38 +40,23 @@
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
-							<FormCheckbox
-								:checked="!!h.caseSensitive"
-								@update:checked="onCaseSensitiveChange(h, $event)"
-							/>
+							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
 						</div>
 
 						<!-- Checkbox: Flash Title -->
 						<div name="flash-title" class="centered">
-							<FormCheckbox
-								v-if="!h.isBlocked"
-								:checked="!!h.flashTitle"
-								@update:checked="onFlashTitleChange(h, $event)"
-							/>
+							<FormCheckbox v-if="!h.isIgnored" :checked="!!h.flashTitle"
+								@update:checked="onFlashTitleChange(h, $event)" />
 						</div>
 
 						<div name="color">
-							<input
-								v-if="!h.isBlocked"
-								v-model="h.color"
-								type="color"
-								@input="onColorChange(h, $event as InputEvent)"
-							/>
+							<input v-if="!h.isIgnored" v-model="h.color" type="color"
+								@input="onColorChange(h, $event as InputEvent)" />
 						</div>
 
 						<div ref="interactRef" name="interact">
-							<button
-								v-if="!h.isBlocked"
-								ref="soundEffectButton"
-								class="sound-button"
-								:class="{ 'has-sound': !!h.soundFile }"
-								tabindex="0"
-							>
+							<button v-if="!h.isIgnored" ref="soundEffectButton" class="sound-button"
+								:class="{ 'has-sound': !!h.soundFile }" tabindex="0">
 								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
 								<div class="sound-options">
 									<UiFloating v-if="interactRef?.[index]" :anchor="interactRef[index]">
@@ -91,11 +70,9 @@
 											<label>
 												Custom Sound{{ h.soundFile ? "" : "..." }}
 												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
-												<input
-													type="file"
+												<input type="file"
 													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
-													@input="onUploadSoundFile(h, $event)"
-												/>
+													@input="onUploadSoundFile(h, $event)" />
 											</label>
 										</button>
 									</UiFloating>
@@ -157,8 +134,8 @@ function onInputBlur(h: HighlightDef, inputName: keyof typeof inputs): void {
 }
 
 function onModeChange(h: HighlightDef, checked: boolean): void {
-	h.isBlocked = checked;
-	highlights.saveAsBlocked(h.id, checked);
+	h.isIgnored = checked;
+	highlights.saveAsIgnored(h.id, checked);
 }
 
 function onFlashTitleChange(h: HighlightDef, checked: boolean): void {
@@ -246,7 +223,6 @@ watch(newInput, (val, old) => {
 			color: "#8803fc",
 			label: "",
 			pattern: val,
-			isBlocked: false,
 		},
 		true,
 	);
@@ -291,7 +267,7 @@ main.seventv-settings-custom-highlights {
 			column-gap: 3rem;
 			padding: 1rem;
 
-			> div {
+			>div {
 				align-self: center;
 
 				&.centered {
@@ -308,7 +284,7 @@ main.seventv-settings-custom-highlights {
 				border-bottom: 0.25rem solid var(--seventv-primary);
 			}
 
-			&:not(.create-new) > .use-virtual-input {
+			&:not(.create-new)>.use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
 				display: block;
@@ -337,7 +313,7 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
-			[name="color"] > input {
+			[name="color"]>input {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
@@ -373,7 +349,7 @@ main.seventv-settings-custom-highlights {
 					border-radius: 50%;
 				}
 
-				.sound-button:focus-within > .sound-options {
+				.sound-button:focus-within>.sound-options {
 					position: fixed;
 					width: 9rem;
 					display: block;
diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue
index 956a42d57..9aec695c3 100644
--- a/src/site/twitch.tv/modules/chat/ChatController.vue
+++ b/src/site/twitch.tv/modules/chat/ChatController.vue
@@ -1,14 +1,9 @@
 <!-- eslint-disable no-fallthrough -->
 <template>
 	<Teleport v-if="ctx.id" :to="containerEl">
-		<UiScrollable
-			ref="scrollerRef"
-			class="seventv-chat-scroller"
-			@container-scroll="scroller.onScroll"
-			@container-wheel="scroller.onWheel"
-			@mouseenter="properties.hovering = true"
-			@mouseleave="properties.hovering = false"
-		>
+		<UiScrollable ref="scrollerRef" class="seventv-chat-scroller" @container-scroll="scroller.onScroll"
+			@container-wheel="scroller.onWheel" @mouseenter="properties.hovering = true"
+			@mouseleave="properties.hovering = false">
 			<div id="seventv-message-container" class="seventv-message-container">
 				<ChatList ref="chatList" :list="list" :message-handler="messageHandler" />
 			</div>
@@ -255,7 +250,7 @@ watch(messageBufferComponentDbc, (msgBuf, old) => {
 						m.historical = true;
 						chatList.value?.onChatMessage(m, msg as Twitch.ChatMessage, false);
 
-						if (chatHighlights.doesMessageContainBlockedPhrase(m)) {
+						if (chatHighlights.checkIgnored(m)) {
 							continue;
 						}
 
@@ -380,7 +375,7 @@ seventv-container.seventv-chat-list {
 	overflow: auto !important;
 	overflow-x: hidden !important;
 
-	> seventv-container {
+	>seventv-container {
 		display: none;
 	}
 
@@ -407,7 +402,7 @@ seventv-container.seventv-chat-list {
 			border-radius: 0.33em;
 			background-color: black;
 
-			> .seventv-scrollbar-thumb {
+			>.seventv-scrollbar-thumb {
 				position: absolute;
 				width: 100%;
 
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index 6738957d3..ea420ad48 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -2,10 +2,8 @@
 	<main ref="chatListEl" class="seventv-chat-list" :alternating-background="isAlternatingBackground">
 		<div v-for="msg of displayedMessages" :key="msg.sym" :msg-id="msg.id" class="seventv-message">
 			<template v-if="msg.instance">
-				<component
-					:is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
-					v-bind="{ msg }"
-				>
+				<component :is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
+					v-bind="{ msg }">
 					<component :is="msg.instance" v-bind="msg.componentProps" :msg="msg">
 						<UserMessage :msg="msg" :emotes="emotes.active" :chatters="messages.chattersByUsername" />
 					</component>
@@ -207,9 +205,9 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 			const parentMsgAuthor =
 				msgData.reply.parentUserLogin && msgData.reply.parentDisplayName
 					? {
-							username: msgData.reply.parentUserLogin,
-							displayName: msgData.reply.parentDisplayName,
-					  }
+						username: msgData.reply.parentUserLogin,
+						displayName: msgData.reply.parentDisplayName,
+					}
 					: null;
 
 			msg.parent = {
@@ -251,15 +249,15 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 						},
 						data: e.cheerAmount
 							? convertCheerEmote({
-									alt: e.alt,
-									cheerAmount: e.cheerAmount,
-									cheerColor: e.cheerColor,
-									images: e.images,
-							  })
+								alt: e.alt,
+								cheerAmount: e.cheerAmount,
+								cheerColor: e.cheerColor,
+								images: e.images,
+							})
 							: convertTwitchEmote({
-									id: e.emoteID,
-									token: e.alt,
-							  } as Partial<Twitch.TwitchEmote>),
+								id: e.emoteID,
+								token: e.alt,
+							} as Partial<Twitch.TwitchEmote>),
 					};
 					break;
 				}
@@ -295,7 +293,7 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 		chatHighlights.checkMatch(highlightID, msg);
 	}
 
-	if (chatHighlights.doesMessageContainBlockedPhrase(msg)) {
+	if (chatHighlights.checkIgnored(msg)) {
 		shouldRenderMessage = false;
 	}
 
@@ -508,7 +506,6 @@ watch(
 					? (msg: ChatMessage) => `🔔 @${msg.author?.username ?? "A user"} mentioned you`
 					: undefined,
 				flashTitle: true,
-				isBlocked: false,
 			});
 
 			chatHighlights.define("~reply", {
@@ -520,7 +517,6 @@ watch(
 					? (msg: ChatMessage) => `🔔 @${msg.author?.username ?? "A user"} replied to you`
 					: undefined,
 				flashTitle: true,
-				isBlocked: false,
 			});
 		} else {
 			chatHighlights.remove("~mention");
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index 5a9cf91ec..1e418246e 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -1,13 +1,9 @@
 <template>
 	<template v-for="(inst, i) of chatController.instances" :key="inst.identifier">
-		<ChatController
-			v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
-			:list="chatList.instances[0] ?? undefined"
-			:controller="chatController.instances[i]"
-			:room="chatRoom.instances[0] ?? undefined"
-			:buffer="chatBuffer.instances[0] ?? undefined"
-			:events="chatEvents.instances[0] ?? undefined"
-		/>
+		<ChatController v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
+			:list="chatList.instances[0] ?? undefined" :controller="chatController.instances[i]"
+			:room="chatRoom.instances[0] ?? undefined" :buffer="chatBuffer.instances[0] ?? undefined"
+			:events="chatEvents.instances[0] ?? undefined" />
 	</template>
 </template>
 
@@ -389,11 +385,11 @@ export const config = [
 			component: markRaw(SettingsConfigHighlights),
 			gridMode: "new-row",
 		},
-		label: "Custom Highlights and Blocked terms",
-		hint: "Create custom highlights and blocked terms",
+		label: "Custom Highlights and Ignored terms",
+		hint: "Create custom highlights and ignored terms",
 		defaultValue: new Map(),
 	}),
-	declareConfig<Map<string, string>>("highlights.blocked", "NONE", {
+	declareConfig<Map<string, string>>("highlights.ignores", "NONE", {
 		defaultValue: new Map(),
 		label: "",
 	}),

From b380930c53bb3b15266994818e9a11dd57e80d50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Tue, 18 Apr 2023 16:01:01 +0300
Subject: [PATCH 09/20] feat/block-chat-phrases: make format

---
 .../settings/SettingsConfigHighlights.vue     | 57 +++++++++++++------
 .../twitch.tv/modules/chat/ChatController.vue | 15 +++--
 src/site/twitch.tv/modules/chat/ChatList.vue  | 28 ++++-----
 .../twitch.tv/modules/chat/ChatModule.vue     | 12 ++--
 4 files changed, 73 insertions(+), 39 deletions(-)

diff --git a/src/site/global/settings/SettingsConfigHighlights.vue b/src/site/global/settings/SettingsConfigHighlights.vue
index b68c719e6..c9ca400ca 100644
--- a/src/site/global/settings/SettingsConfigHighlights.vue
+++ b/src/site/global/settings/SettingsConfigHighlights.vue
@@ -18,15 +18,21 @@
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
-							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
+							<FormInput
+								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern"
+								@blur="onInputBlur(h, 'pattern')"
+							/>
 						</div>
 
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
-							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label" @blur="onInputBlur(h, 'label')" />
+							<FormInput
+								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label"
+								@blur="onInputBlur(h, 'label')"
+							/>
 						</div>
 
 						<div name="is-ignored">
@@ -40,23 +46,38 @@
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
-							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
+							<FormCheckbox
+								:checked="!!h.caseSensitive"
+								@update:checked="onCaseSensitiveChange(h, $event)"
+							/>
 						</div>
 
 						<!-- Checkbox: Flash Title -->
 						<div name="flash-title" class="centered">
-							<FormCheckbox v-if="!h.isIgnored" :checked="!!h.flashTitle"
-								@update:checked="onFlashTitleChange(h, $event)" />
+							<FormCheckbox
+								v-if="!h.isIgnored"
+								:checked="!!h.flashTitle"
+								@update:checked="onFlashTitleChange(h, $event)"
+							/>
 						</div>
 
 						<div name="color">
-							<input v-if="!h.isIgnored" v-model="h.color" type="color"
-								@input="onColorChange(h, $event as InputEvent)" />
+							<input
+								v-if="!h.isIgnored"
+								v-model="h.color"
+								type="color"
+								@input="onColorChange(h, $event as InputEvent)"
+							/>
 						</div>
 
 						<div ref="interactRef" name="interact">
-							<button v-if="!h.isIgnored" ref="soundEffectButton" class="sound-button"
-								:class="{ 'has-sound': !!h.soundFile }" tabindex="0">
+							<button
+								v-if="!h.isIgnored"
+								ref="soundEffectButton"
+								class="sound-button"
+								:class="{ 'has-sound': !!h.soundFile }"
+								tabindex="0"
+							>
 								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
 								<div class="sound-options">
 									<UiFloating v-if="interactRef?.[index]" :anchor="interactRef[index]">
@@ -70,9 +91,11 @@
 											<label>
 												Custom Sound{{ h.soundFile ? "" : "..." }}
 												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
-												<input type="file"
+												<input
+													type="file"
 													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
-													@input="onUploadSoundFile(h, $event)" />
+													@input="onUploadSoundFile(h, $event)"
+												/>
 											</label>
 										</button>
 									</UiFloating>
@@ -267,7 +290,7 @@ main.seventv-settings-custom-highlights {
 			column-gap: 3rem;
 			padding: 1rem;
 
-			>div {
+			> div {
 				align-self: center;
 
 				&.centered {
@@ -284,7 +307,7 @@ main.seventv-settings-custom-highlights {
 				border-bottom: 0.25rem solid var(--seventv-primary);
 			}
 
-			&:not(.create-new)>.use-virtual-input {
+			&:not(.create-new) > .use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
 				display: block;
@@ -313,7 +336,7 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
-			[name="color"]>input {
+			[name="color"] > input {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
@@ -349,7 +372,7 @@ main.seventv-settings-custom-highlights {
 					border-radius: 50%;
 				}
 
-				.sound-button:focus-within>.sound-options {
+				.sound-button:focus-within > .sound-options {
 					position: fixed;
 					width: 9rem;
 					display: block;
diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue
index 9aec695c3..ee84f5240 100644
--- a/src/site/twitch.tv/modules/chat/ChatController.vue
+++ b/src/site/twitch.tv/modules/chat/ChatController.vue
@@ -1,9 +1,14 @@
 <!-- eslint-disable no-fallthrough -->
 <template>
 	<Teleport v-if="ctx.id" :to="containerEl">
-		<UiScrollable ref="scrollerRef" class="seventv-chat-scroller" @container-scroll="scroller.onScroll"
-			@container-wheel="scroller.onWheel" @mouseenter="properties.hovering = true"
-			@mouseleave="properties.hovering = false">
+		<UiScrollable
+			ref="scrollerRef"
+			class="seventv-chat-scroller"
+			@container-scroll="scroller.onScroll"
+			@container-wheel="scroller.onWheel"
+			@mouseenter="properties.hovering = true"
+			@mouseleave="properties.hovering = false"
+		>
 			<div id="seventv-message-container" class="seventv-message-container">
 				<ChatList ref="chatList" :list="list" :message-handler="messageHandler" />
 			</div>
@@ -375,7 +380,7 @@ seventv-container.seventv-chat-list {
 	overflow: auto !important;
 	overflow-x: hidden !important;
 
-	>seventv-container {
+	> seventv-container {
 		display: none;
 	}
 
@@ -402,7 +407,7 @@ seventv-container.seventv-chat-list {
 			border-radius: 0.33em;
 			background-color: black;
 
-			>.seventv-scrollbar-thumb {
+			> .seventv-scrollbar-thumb {
 				position: absolute;
 				width: 100%;
 
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index ea420ad48..febe2d48b 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -2,8 +2,10 @@
 	<main ref="chatListEl" class="seventv-chat-list" :alternating-background="isAlternatingBackground">
 		<div v-for="msg of displayedMessages" :key="msg.sym" :msg-id="msg.id" class="seventv-message">
 			<template v-if="msg.instance">
-				<component :is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
-					v-bind="{ msg }">
+				<component
+					:is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
+					v-bind="{ msg }"
+				>
 					<component :is="msg.instance" v-bind="msg.componentProps" :msg="msg">
 						<UserMessage :msg="msg" :emotes="emotes.active" :chatters="messages.chattersByUsername" />
 					</component>
@@ -205,9 +207,9 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 			const parentMsgAuthor =
 				msgData.reply.parentUserLogin && msgData.reply.parentDisplayName
 					? {
-						username: msgData.reply.parentUserLogin,
-						displayName: msgData.reply.parentDisplayName,
-					}
+							username: msgData.reply.parentUserLogin,
+							displayName: msgData.reply.parentDisplayName,
+					  }
 					: null;
 
 			msg.parent = {
@@ -249,15 +251,15 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 						},
 						data: e.cheerAmount
 							? convertCheerEmote({
-								alt: e.alt,
-								cheerAmount: e.cheerAmount,
-								cheerColor: e.cheerColor,
-								images: e.images,
-							})
+									alt: e.alt,
+									cheerAmount: e.cheerAmount,
+									cheerColor: e.cheerColor,
+									images: e.images,
+							  })
 							: convertTwitchEmote({
-								id: e.emoteID,
-								token: e.alt,
-							} as Partial<Twitch.TwitchEmote>),
+									id: e.emoteID,
+									token: e.alt,
+							  } as Partial<Twitch.TwitchEmote>),
 					};
 					break;
 				}
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index 1e418246e..bb9af0e90 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -1,9 +1,13 @@
 <template>
 	<template v-for="(inst, i) of chatController.instances" :key="inst.identifier">
-		<ChatController v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
-			:list="chatList.instances[0] ?? undefined" :controller="chatController.instances[i]"
-			:room="chatRoom.instances[0] ?? undefined" :buffer="chatBuffer.instances[0] ?? undefined"
-			:events="chatEvents.instances[0] ?? undefined" />
+		<ChatController
+			v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
+			:list="chatList.instances[0] ?? undefined"
+			:controller="chatController.instances[i]"
+			:room="chatRoom.instances[0] ?? undefined"
+			:buffer="chatBuffer.instances[0] ?? undefined"
+			:events="chatEvents.instances[0] ?? undefined"
+		/>
 	</template>
 </template>
 

From 7d57472a85dc271a47c8553621b7594631ca86f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Wed, 19 Apr 2023 20:44:23 +0300
Subject: [PATCH 10/20] feat/block-chat-phrases: Move ignores into their own
 settings section

---
 src/composable/chat/useChatHighlights.ts      | 171 +++++++----
 .../settings/SettingsConfigHighlights.vue     |  65 +---
 .../global/settings/SettingsConfigIgnores.vue | 290 ++++++++++++++++++
 .../twitch.tv/modules/chat/ChatController.vue |  19 +-
 src/site/twitch.tv/modules/chat/ChatList.vue  |  31 +-
 .../twitch.tv/modules/chat/ChatModule.vue     |  27 +-
 6 files changed, 461 insertions(+), 142 deletions(-)
 create mode 100644 src/site/global/settings/SettingsConfigIgnores.vue

diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index 91ef2bc8b..c60b83c79 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -1,5 +1,5 @@
-import { inject, markRaw, reactive, ref, toRaw, watch } from "vue";
-import { toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
+import { CustomRefFactory, inject, markRaw, reactive, ref, toRaw, watch } from "vue";
+import { IgnoredUpdater, toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
 import { debounceFn } from "@/common/Async";
 import { SITE_ASSETS_URL } from "@/common/Constant";
 import { log } from "@/common/Logger";
@@ -10,9 +10,10 @@ import { useConfig } from "../useSettings";
 
 interface ChatHighlights {
 	highlights: Record<string, HighlightDef>;
+	ignores: Record<string, IgnoreDef>;
 }
 
-export interface HighlightDef {
+export interface IgnoreDef {
 	id: string;
 
 	pattern?: string;
@@ -20,10 +21,13 @@ export interface HighlightDef {
 	regexp?: boolean;
 	readonly cachedRegExp?: RegExp;
 
-	color: string;
 	label: string;
-	isIgnored?: boolean;
 	caseSensitive?: boolean;
+	persist?: boolean;
+}
+
+export interface HighlightDef extends IgnoreDef {
+	color: string;
 	flashTitle?: boolean;
 	flashTitleFn?: (msg: ChatMessage) => string;
 	soundPath?: string;
@@ -33,16 +37,15 @@ export interface HighlightDef {
 		type: string;
 		data: ArrayBuffer;
 	};
-	persist?: boolean;
 }
 
 const m = new WeakMap<ChannelContext, ChatHighlights>();
 
 const customHighlights = useConfig<Map<string, HighlightDef>>("highlights.custom");
-const ignores = useConfig<Map<string, HighlightDef>>("highlights.ignores");
+const ignores = useConfig<Map<string, IgnoreDef>>("chat.ignores");
 const soundVolume = useConfig<number>("highlights.sound_volume");
 
-export function useChatHighlights(ctx: ChannelContext) {
+export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 	const visibility = useDocumentVisibility();
 
 	const assetsBase = inject(SITE_ASSETS_URL, "");
@@ -54,6 +57,7 @@ export function useChatHighlights(ctx: ChannelContext) {
 	if (!data) {
 		data = reactive<ChatHighlights>({
 			highlights: {},
+			ignores: {}
 		});
 
 		watch(
@@ -79,55 +83,96 @@ export function useChatHighlights(ctx: ChannelContext) {
 			},
 		);
 
+		watch(
+			ignores,
+			(h) => {
+				if (!data) return;
+
+				// Clear all custom highlights
+				for (const [k, v] of Object.entries(data.ignores)) {
+					if (!v.persist) continue;
+					delete data.ignores[k];
+				}
+
+				for (const [, v] of h) {
+					data.ignores[v.id] = v;
+				}
+			},
+			{
+				immediate: true,
+			},
+		);
+
 		m.set(ctx, data);
 	}
 
-	const saveAsIgnored = debounceFn(function (id: string, isIgnored: boolean): void {
+	const save = debounceFn(function (): void {
 		if (!data) return;
 
-		// Add ignored highlights to their own config
-		if (isIgnored) {
-			const items: [string, HighlightDef][] = Array.from(Object.values(data.highlights))
+		if (useIgnored) {
+			const items: [string, IgnoreDef][] = Array.from(Object.values(data.ignores))
 				.filter((h) => h.persist)
-				.filter((h) => h.isIgnored)
-				.map((h) => [h.id, toRaw(h)]);
+				.map((h) => [
+					h.id,
+					toRaw({
+						...h
+					}),
+				]);
 			ignores.value = new Map(items);
 		} else {
-			// Remove as ignored highlight and re-instate as normal highlight
-			ignores.value.delete(id);
+			const items: [string, HighlightDef][] = Array.from(Object.values(data.highlights))
+				.filter((h) => h.persist)
+				.map((h) => [
+					h.id,
+					toRaw({
+						...h,
+						soundFile: toRaw(h.soundFile),
+						soundDef: undefined,
+						flashTitleFn: undefined,
+					}),
+				]);
+			customHighlights.value = new Map(items);
 		}
-
-		save();
 	}, 250);
 
-	const save = debounceFn(function (): void {
-		if (!data) return;
+	function define(id: string, def: Omit<HighlightDef | IgnoreDef, "id">, persist?: boolean): HighlightDef | IgnoreDef {
+		if (!data) return {} as HighlightDef | IgnoreDef;
 
-		const items: [string, HighlightDef][] = Array.from(Object.values(data.highlights))
-			.filter((h) => h.persist)
-			.map((h) => [
-				h.id,
-				toRaw({
-					...h,
-					soundFile: toRaw(h.soundFile),
-					soundDef: undefined,
-					flashTitleFn: undefined,
-				}),
-			]);
-
-		customHighlights.value = new Map(items);
-	}, 250);
+		if (isHighlight(def)) {
+			const h = (data.highlights[id] = { ...def, id, persist });
+			updateSoundData(h);
+
+			if (!persist) return h;
+
+			// Store to DB\andymilonakis
+			customHighlights.value.set(id, markRaw(h));
+
+			save();
+
+			return h;
+		} else {
+			const h = (data.ignores[id] = { ...def, id, persist });
+
+			if (!persist) return h;
+
+			// Store to DB\andymilonakis
+			ignores.value.set(id, markRaw(h));
+
+			save();
+
+			return h;
+		}
+	}
 
-	function define(id: string, def: Omit<HighlightDef, "id">, persist?: boolean): HighlightDef {
-		if (!data) return {} as HighlightDef;
+	function defineIgnore(id: string, def: Omit<IgnoreDef, "id">, persist?: boolean): IgnoreDef {
+		if (!data) return {} as IgnoreDef;
 
-		const h = (data.highlights[id] = { ...def, id, persist });
-		updateSoundData(h);
+		const h = (data.ignores[id] = { ...def, id, persist });
 
 		if (!persist) return h;
 
 		// Store to DB
-		customHighlights.value.set(id, markRaw(h));
+		ignores.value.set(id, markRaw(h));
 		save();
 
 		return h;
@@ -157,15 +202,18 @@ export function useChatHighlights(ctx: ChannelContext) {
 	function remove(id: string): void {
 		if (!data) return;
 
-		delete data.highlights[id];
-		ignores.value.delete(id);
+		if (useIgnored) {
+			delete data.ignores[id];
+		} else {
+			delete data.highlights[id];
+		}
 		save();
 	}
 
-	function checkMatch(key: string, msg: ChatMessage, skipMatchHighlight?: boolean): boolean {
+	function checkMatch(key: string, msg: ChatMessage): boolean {
 		if (!data) return false;
 
-		const h = data?.highlights[key];
+		const h = useIgnored ? data?.ignores[key] : data?.highlights[key];
 		if (!h) return false;
 
 		let ok = false;
@@ -193,7 +241,7 @@ export function useChatHighlights(ctx: ChannelContext) {
 			ok = h.test(msg);
 		}
 
-		if (ok && !skipMatchHighlight) {
+		if (ok && !useIgnored && isHighlight(h)) {
 			msg.setHighlight(h.color, h.label);
 
 			if (h.soundDef && !msg.historical) {
@@ -243,31 +291,46 @@ export function useChatHighlights(ctx: ChannelContext) {
 		return toReactive(data.highlights);
 	}
 
+	function getAllIgnored(): Record<string, IgnoreDef> {
+		if (!data) return {};
+
+		return toReactive(data.ignores);
+	}
+
 	function updateId(oldId: string, newId: string): void {
 		if (!data) return;
+		if (useIgnored) {
+			const h = data.ignores[oldId];
+			if (!h) return;
+
+			data.ignores[newId] = h;
+			delete data.ignores[oldId];
 
-		const h = data.highlights[oldId];
-		if (!h) return;
+			h.id = newId;
+		} else {
+			const h = data.highlights[oldId];
+			if (!h) return;
 
-		data.highlights[newId] = h;
-		delete data.highlights[oldId];
+			data.highlights[newId] = h;
+			delete data.highlights[oldId];
 
-		h.id = newId;
+			h.id = newId;
+		}
 
 		save();
 	}
 
 	function checkIgnored(message: ChatMessage<ComponentFactory>) {
-		const allIgnores = Object.values(getAll()).filter((f) => f.isIgnored);
-		return allIgnores.some((s) => checkMatch(s.id, message, true));
+		const allIgnores = Object.values(getAllIgnored());
+		return allIgnores.some((s) => checkMatch(s.id, message));
 	}
 
 	return {
 		define,
 		remove,
 		getAll,
+		getAllIgnored,
 		save,
-		saveAsIgnored,
 		updateId,
 		checkMatch,
 		updateSoundData,
@@ -275,3 +338,7 @@ export function useChatHighlights(ctx: ChannelContext) {
 		checkIgnored,
 	};
 }
+
+const isHighlight = (def: Omit<HighlightDef | IgnoreDef, "id">): def is HighlightDef => {
+	return (def as HighlightDef).color !== undefined;
+}
diff --git a/src/site/global/settings/SettingsConfigHighlights.vue b/src/site/global/settings/SettingsConfigHighlights.vue
index c9ca400ca..3f9f88cc7 100644
--- a/src/site/global/settings/SettingsConfigHighlights.vue
+++ b/src/site/global/settings/SettingsConfigHighlights.vue
@@ -5,7 +5,6 @@
 			<div class="item heading">
 				<div>Pattern</div>
 				<div>Label</div>
-				<div>Ignored</div>
 				<div class="centered">RegExp</div>
 				<div>Case Sensitive</div>
 				<div class="centered">Flash Title</div>
@@ -18,25 +17,15 @@
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
-							<FormInput
-								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern"
-								@blur="onInputBlur(h, 'pattern')"
-							/>
+							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
 						</div>
 
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
-							<FormInput
-								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label"
-								@blur="onInputBlur(h, 'label')"
-							/>
-						</div>
-
-						<div name="is-ignored">
-							<FormCheckbox :checked="!!h.isIgnored" @update:checked="onModeChange(h, $event)" />
+							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label" @blur="onInputBlur(h, 'label')" />
 						</div>
 
 						<!-- Checkbox: RegExp -->
@@ -46,38 +35,21 @@
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
-							<FormCheckbox
-								:checked="!!h.caseSensitive"
-								@update:checked="onCaseSensitiveChange(h, $event)"
-							/>
+							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
 						</div>
 
 						<!-- Checkbox: Flash Title -->
 						<div name="flash-title" class="centered">
-							<FormCheckbox
-								v-if="!h.isIgnored"
-								:checked="!!h.flashTitle"
-								@update:checked="onFlashTitleChange(h, $event)"
-							/>
+							<FormCheckbox :checked="!!h.flashTitle" @update:checked="onFlashTitleChange(h, $event)" />
 						</div>
 
 						<div name="color">
-							<input
-								v-if="!h.isIgnored"
-								v-model="h.color"
-								type="color"
-								@input="onColorChange(h, $event as InputEvent)"
-							/>
+							<input v-model="h.color" type="color" @input="onColorChange(h, $event as InputEvent)" />
 						</div>
 
 						<div ref="interactRef" name="interact">
-							<button
-								v-if="!h.isIgnored"
-								ref="soundEffectButton"
-								class="sound-button"
-								:class="{ 'has-sound': !!h.soundFile }"
-								tabindex="0"
-							>
+							<button ref="soundEffectButton" class="sound-button" :class="{ 'has-sound': !!h.soundFile }"
+								tabindex="0">
 								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
 								<div class="sound-options">
 									<UiFloating v-if="interactRef?.[index]" :anchor="interactRef[index]">
@@ -91,11 +63,9 @@
 											<label>
 												Custom Sound{{ h.soundFile ? "" : "..." }}
 												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
-												<input
-													type="file"
+												<input type="file"
 													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
-													@input="onUploadSoundFile(h, $event)"
-												/>
+													@input="onUploadSoundFile(h, $event)" />
 											</label>
 										</button>
 									</UiFloating>
@@ -156,11 +126,6 @@ function onInputBlur(h: HighlightDef, inputName: keyof typeof inputs): void {
 	highlights.save();
 }
 
-function onModeChange(h: HighlightDef, checked: boolean): void {
-	h.isIgnored = checked;
-	highlights.saveAsIgnored(h.id, checked);
-}
-
 function onFlashTitleChange(h: HighlightDef, checked: boolean): void {
 	h.flashTitle = checked;
 	highlights.updateFlashTitle(h);
@@ -290,7 +255,7 @@ main.seventv-settings-custom-highlights {
 			column-gap: 3rem;
 			padding: 1rem;
 
-			> div {
+			>div {
 				align-self: center;
 
 				&.centered {
@@ -307,7 +272,7 @@ main.seventv-settings-custom-highlights {
 				border-bottom: 0.25rem solid var(--seventv-primary);
 			}
 
-			&:not(.create-new) > .use-virtual-input {
+			&:not(.create-new)>.use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
 				display: block;
@@ -336,7 +301,7 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
-			[name="color"] > input {
+			[name="color"]>input {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
@@ -372,7 +337,7 @@ main.seventv-settings-custom-highlights {
 					border-radius: 50%;
 				}
 
-				.sound-button:focus-within > .sound-options {
+				.sound-button:focus-within>.sound-options {
 					position: fixed;
 					width: 9rem;
 					display: block;
diff --git a/src/site/global/settings/SettingsConfigIgnores.vue b/src/site/global/settings/SettingsConfigIgnores.vue
new file mode 100644
index 000000000..62062773e
--- /dev/null
+++ b/src/site/global/settings/SettingsConfigIgnores.vue
@@ -0,0 +1,290 @@
+<template>
+	<main class="seventv-settings-custom-ignores">
+		<div class="tabs"></div>
+		<div class="list">
+			<div class="item heading">
+				<div>Pattern</div>
+				<div>Label</div>
+				<div class="centered">RegExp</div>
+				<div>Case Sensitive</div>
+			</div>
+
+			<UiScrollable>
+				<template v-for="(h) of ignores.getAllIgnored()" :key="h.id">
+					<div class="item">
+						<!-- Pattern -->
+						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
+							<span>{{ h.pattern }}</span>
+							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
+						</div>
+
+						<!-- Label -->
+						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
+							<span>{{ h.label }}</span>
+							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label" @blur="onInputBlur(h, 'label')" />
+						</div>
+
+						<!-- Checkbox: RegExp -->
+						<div name="is-regexp" class="centered">
+							<FormCheckbox :checked="!!h.regexp" @update:checked="onRegExpStateChange(h, $event)" />
+						</div>
+
+						<!-- Checkbox: Case Sensitive -->
+						<div name="case-sensitive" class="centered">
+							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
+						</div>
+
+						<div ref="interactRef" name="interact">
+							<CloseIcon v-tooltip="'Remove'" tabindex="0" @click="onDeleteIgnore(h)" />
+						</div>
+					</div>
+				</template>
+			</UiScrollable>
+
+			<!-- New -->
+			<div class="item create-new">
+				<div name="pattern">
+					<FormInput v-model="newInput" label="New Ignore..."> hi </FormInput>
+				</div>
+			</div>
+		</div>
+	</main>
+</template>
+
+<script setup lang="ts">
+import { nextTick, reactive, ref, watch } from "vue";
+import { useChannelContext } from "@/composable/channel/useChannelContext";
+import { useChatHighlights, IgnoreDef } from "@/composable/chat/useChatHighlights";
+import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
+import UiScrollable from "@/ui/UiScrollable.vue";
+import FormCheckbox from "../components/FormCheckbox.vue";
+import FormInput from "../components/FormInput.vue";
+import { v4 as uuid } from "uuid";
+
+const ctx = useChannelContext(); // this will be an empty context, as config is not tied to channel
+const ignores = useChatHighlights(ctx, true);
+
+const newInput = ref("");
+const inputs = reactive({
+	pattern: new WeakMap<IgnoreDef, InstanceType<typeof FormInput>>(),
+	label: new WeakMap<IgnoreDef, InstanceType<typeof FormInput>>(),
+});
+const interactRef = ref<HTMLElement[]>();
+
+function onInputFocus(h: IgnoreDef, inputName: keyof typeof inputs): void {
+	const input = inputs[inputName].get(h);
+	if (!input) return;
+
+	input.focus();
+}
+
+function onInputBlur(h: IgnoreDef, inputName: keyof typeof inputs): void {
+	const input = inputs[inputName].get(h);
+	if (!input) return;
+
+	const id = uuid();
+	ignores.updateId("new-ignore", id);
+	ignores.save();
+}
+
+function onRegExpStateChange(h: IgnoreDef, checked: boolean): void {
+	h.regexp = checked;
+	ignores.save();
+}
+
+function onCaseSensitiveChange(h: IgnoreDef, checked: boolean): void {
+	h.caseSensitive = checked;
+	ignores.save();
+}
+
+function onDeleteIgnore(h: IgnoreDef): void {
+	ignores.remove(h.id);
+	ignores.save();
+}
+
+// Watch for user writing to "new ignore" input
+// If they do, we create a new ignore and switch focus
+watch(newInput, (val, old) => {
+	if (!val || old) return;
+
+	const h = ignores.define(
+		"new-ignore",
+		{
+			label: "",
+			pattern: val,
+		},
+		true,
+	);
+
+	nextTick(() => {
+		const input = inputs.pattern.get(h);
+		if (!input) return;
+
+		input.focus();
+		newInput.value = "";
+	});
+});
+</script>
+
+<style scoped lang="scss">
+main.seventv-settings-custom-ignores {
+	display: grid;
+	padding: 0.25rem;
+	grid-template-rows: 0 max-content;
+	grid-template-areas:
+		"tabs"
+		"list";
+
+	overflow-x: auto;
+
+	.tabs {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		grid-template-rows: 1fr;
+		grid-area: tabs;
+	}
+
+	.list {
+		display: grid;
+		grid-area: list;
+		max-height: 36rem;
+
+		.item {
+			display: grid;
+			grid-auto-flow: row dense;
+			grid-template-columns: 20% 9rem repeat(3, 1fr);
+			column-gap: 3rem;
+			padding: 1rem;
+
+			>div {
+				align-self: center;
+
+				&.centered {
+					justify-self: center;
+				}
+			}
+
+			&:nth-child(odd) {
+				background-color: var(--seventv-background-shade-2);
+			}
+
+			&.heading {
+				background-color: var(--seventv-background-shade-3);
+				border-bottom: 0.25rem solid var(--seventv-primary);
+			}
+
+			&:not(.create-new)>.use-virtual-input {
+				cursor: text;
+				padding: 0.5rem;
+				display: block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+
+				input {
+					width: 0;
+					height: 0;
+					opacity: 0;
+				}
+
+				&:focus-within {
+					padding: 0;
+
+					span {
+						display: none;
+					}
+
+					input {
+						opacity: 1;
+						width: 100%;
+						height: initial;
+					}
+				}
+			}
+
+			[name="color"]>input {
+				&::-webkit-color-swatch-wrapper {
+					padding: 0;
+				}
+
+				&::-webkit-color-swatch {
+					border: none;
+				}
+			}
+
+			[name="interact"] {
+				display: grid;
+				column-gap: 1rem;
+				grid-auto-flow: column;
+				justify-self: end;
+
+				button {
+					all: unset;
+					cursor: pointer;
+				}
+
+				.sound-options {
+					display: none;
+				}
+
+				.sound-button.has-sound::after {
+					content: "";
+					position: absolute;
+					width: 0.75rem;
+					height: 0.75rem;
+					margin-left: -0.25rem;
+					margin-top: -0.25rem;
+					background-color: var(--seventv-accent);
+					border-radius: 50%;
+				}
+
+				.sound-button:focus-within>.sound-options {
+					position: fixed;
+					width: 9rem;
+					display: block;
+					z-index: 10000;
+
+					input {
+						display: none;
+					}
+
+					label {
+						cursor: pointer;
+					}
+
+					button {
+						width: 100%;
+						padding: 0.5rem;
+						background-color: var(--seventv-background-shade-2);
+						border: 0.25rem solid var(--seventv-background-shade-3);
+						transition: border-color 90ms ease-in-out;
+
+						p {
+							color: var(--seventv-muted);
+						}
+
+						&:hover {
+							border-color: var(--seventv-primary);
+						}
+
+						&[active="true"] {
+							color: var(--seventv-primary);
+						}
+					}
+				}
+
+				svg {
+					cursor: pointer;
+					font-size: 2rem;
+
+					&:hover {
+						color: var(--seventv-primary);
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue
index ee84f5240..d3ef9705a 100644
--- a/src/site/twitch.tv/modules/chat/ChatController.vue
+++ b/src/site/twitch.tv/modules/chat/ChatController.vue
@@ -1,14 +1,9 @@
 <!-- eslint-disable no-fallthrough -->
 <template>
 	<Teleport v-if="ctx.id" :to="containerEl">
-		<UiScrollable
-			ref="scrollerRef"
-			class="seventv-chat-scroller"
-			@container-scroll="scroller.onScroll"
-			@container-wheel="scroller.onWheel"
-			@mouseenter="properties.hovering = true"
-			@mouseleave="properties.hovering = false"
-		>
+		<UiScrollable ref="scrollerRef" class="seventv-chat-scroller" @container-scroll="scroller.onScroll"
+			@container-wheel="scroller.onWheel" @mouseenter="properties.hovering = true"
+			@mouseleave="properties.hovering = false">
 			<div id="seventv-message-container" class="seventv-message-container">
 				<ChatList ref="chatList" :list="list" :message-handler="messageHandler" />
 			</div>
@@ -94,7 +89,7 @@ const scroller = useChatScroller(ctx, {
 });
 const properties = useChatProperties(ctx);
 const tools = useChatTools(ctx);
-const chatHighlights = useChatHighlights(ctx);
+const ignores = useChatHighlights(ctx, true);
 
 // line limit
 const lineLimit = useConfig("chat.line_limit", 150);
@@ -255,7 +250,7 @@ watch(messageBufferComponentDbc, (msgBuf, old) => {
 						m.historical = true;
 						chatList.value?.onChatMessage(m, msg as Twitch.ChatMessage, false);
 
-						if (chatHighlights.checkIgnored(m)) {
+						if (ignores.checkIgnored(m)) {
 							continue;
 						}
 
@@ -380,7 +375,7 @@ seventv-container.seventv-chat-list {
 	overflow: auto !important;
 	overflow-x: hidden !important;
 
-	> seventv-container {
+	>seventv-container {
 		display: none;
 	}
 
@@ -407,7 +402,7 @@ seventv-container.seventv-chat-list {
 			border-radius: 0.33em;
 			background-color: black;
 
-			> .seventv-scrollbar-thumb {
+			>.seventv-scrollbar-thumb {
 				position: absolute;
 				width: 100%;
 
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index febe2d48b..7f86f921e 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -2,10 +2,8 @@
 	<main ref="chatListEl" class="seventv-chat-list" :alternating-background="isAlternatingBackground">
 		<div v-for="msg of displayedMessages" :key="msg.sym" :msg-id="msg.id" class="seventv-message">
 			<template v-if="msg.instance">
-				<component
-					:is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
-					v-bind="{ msg }"
-				>
+				<component :is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
+					v-bind="{ msg }">
 					<component :is="msg.instance" v-bind="msg.componentProps" :msg="msg">
 						<UserMessage :msg="msg" :emotes="emotes.active" :chatters="messages.chattersByUsername" />
 					</component>
@@ -56,6 +54,7 @@ const displayedMessages = toRef(messages, "displayed");
 const scroller = useChatScroller(ctx);
 const properties = useChatProperties(ctx);
 const chatHighlights = useChatHighlights(ctx);
+const ignores = useChatHighlights(ctx, true);
 const pageVisibility = useDocumentVisibility();
 const isHovering = toRef(properties, "hovering");
 const pausedByVisibility = ref(false);
@@ -207,9 +206,9 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 			const parentMsgAuthor =
 				msgData.reply.parentUserLogin && msgData.reply.parentDisplayName
 					? {
-							username: msgData.reply.parentUserLogin,
-							displayName: msgData.reply.parentDisplayName,
-					  }
+						username: msgData.reply.parentUserLogin,
+						displayName: msgData.reply.parentDisplayName,
+					}
 					: null;
 
 			msg.parent = {
@@ -251,15 +250,15 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 						},
 						data: e.cheerAmount
 							? convertCheerEmote({
-									alt: e.alt,
-									cheerAmount: e.cheerAmount,
-									cheerColor: e.cheerColor,
-									images: e.images,
-							  })
+								alt: e.alt,
+								cheerAmount: e.cheerAmount,
+								cheerColor: e.cheerColor,
+								images: e.images,
+							})
 							: convertTwitchEmote({
-									id: e.emoteID,
-									token: e.alt,
-							  } as Partial<Twitch.TwitchEmote>),
+								id: e.emoteID,
+								token: e.alt,
+							} as Partial<Twitch.TwitchEmote>),
 					};
 					break;
 				}
@@ -295,7 +294,7 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 		chatHighlights.checkMatch(highlightID, msg);
 	}
 
-	if (chatHighlights.checkIgnored(msg)) {
+	if (ignores.checkIgnored(msg)) {
 		shouldRenderMessage = false;
 	}
 
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index bb9af0e90..48dcbff01 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -1,13 +1,9 @@
 <template>
 	<template v-for="(inst, i) of chatController.instances" :key="inst.identifier">
-		<ChatController
-			v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
-			:list="chatList.instances[0] ?? undefined"
-			:controller="chatController.instances[i]"
-			:room="chatRoom.instances[0] ?? undefined"
-			:buffer="chatBuffer.instances[0] ?? undefined"
-			:events="chatEvents.instances[0] ?? undefined"
-		/>
+		<ChatController v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
+			:list="chatList.instances[0] ?? undefined" :controller="chatController.instances[i]"
+			:room="chatRoom.instances[0] ?? undefined" :buffer="chatBuffer.instances[0] ?? undefined"
+			:events="chatEvents.instances[0] ?? undefined" />
 	</template>
 </template>
 
@@ -103,6 +99,7 @@ defineExpose({
 import { HighlightDef } from "@/composable/chat/useChatHighlights";
 import { declareConfig, useConfig } from "@/composable/useSettings";
 import SettingsConfigHighlights from "@/site/global/settings/SettingsConfigHighlights.vue";
+import SettingsConfigIgnored from "@/site/global/settings/SettingsConfigIgnores.vue";
 
 export const config = [
 	declareConfig("general.blur_unlisted_emotes", "TOGGLE", {
@@ -389,13 +386,19 @@ export const config = [
 			component: markRaw(SettingsConfigHighlights),
 			gridMode: "new-row",
 		},
-		label: "Custom Highlights and Ignored terms",
-		hint: "Create custom highlights and ignored terms",
+		label: "Custom Highlights",
+		hint: "Create custom highlights",
 		defaultValue: new Map(),
 	}),
-	declareConfig<Map<string, string>>("highlights.ignores", "NONE", {
+	declareConfig<Map<string, HighlightDef>>("chat.ignores", "CUSTOM", {
+		path: ["Chat", "Ignores"],
+		custom: {
+			component: markRaw(SettingsConfigIgnored),
+			gridMode: "new-row",
+		},
+		label: "Ignores",
+		hint: "Create ignored terms and phrases",
 		defaultValue: new Map(),
-		label: "",
 	}),
 	declareConfig<number>("highlights.sound_volume", "SLIDER", {
 		path: ["Highlights", "Built-In"],

From d8937ea097a285e21f939d760599a0f484949c7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Wed, 19 Apr 2023 20:45:28 +0300
Subject: [PATCH 11/20] feat/block-chat-phrases: make format

---
 src/composable/chat/useChatHighlights.ts      | 12 ++++--
 .../settings/SettingsConfigHighlights.vue     | 41 +++++++++++++------
 .../global/settings/SettingsConfigIgnores.vue | 31 +++++++++-----
 .../twitch.tv/modules/chat/ChatController.vue | 15 ++++---
 src/site/twitch.tv/modules/chat/ChatList.vue  | 28 +++++++------
 .../twitch.tv/modules/chat/ChatModule.vue     | 12 ++++--
 6 files changed, 89 insertions(+), 50 deletions(-)

diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index c60b83c79..feb020f62 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -57,7 +57,7 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 	if (!data) {
 		data = reactive<ChatHighlights>({
 			highlights: {},
-			ignores: {}
+			ignores: {},
 		});
 
 		watch(
@@ -115,7 +115,7 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 				.map((h) => [
 					h.id,
 					toRaw({
-						...h
+						...h,
 					}),
 				]);
 			ignores.value = new Map(items);
@@ -135,7 +135,11 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 		}
 	}, 250);
 
-	function define(id: string, def: Omit<HighlightDef | IgnoreDef, "id">, persist?: boolean): HighlightDef | IgnoreDef {
+	function define(
+		id: string,
+		def: Omit<HighlightDef | IgnoreDef, "id">,
+		persist?: boolean,
+	): HighlightDef | IgnoreDef {
 		if (!data) return {} as HighlightDef | IgnoreDef;
 
 		if (isHighlight(def)) {
@@ -341,4 +345,4 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 
 const isHighlight = (def: Omit<HighlightDef | IgnoreDef, "id">): def is HighlightDef => {
 	return (def as HighlightDef).color !== undefined;
-}
+};
diff --git a/src/site/global/settings/SettingsConfigHighlights.vue b/src/site/global/settings/SettingsConfigHighlights.vue
index 3f9f88cc7..5f7556c37 100644
--- a/src/site/global/settings/SettingsConfigHighlights.vue
+++ b/src/site/global/settings/SettingsConfigHighlights.vue
@@ -17,15 +17,21 @@
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
-							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
+							<FormInput
+								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern"
+								@blur="onInputBlur(h, 'pattern')"
+							/>
 						</div>
 
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
-							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label" @blur="onInputBlur(h, 'label')" />
+							<FormInput
+								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label"
+								@blur="onInputBlur(h, 'label')"
+							/>
 						</div>
 
 						<!-- Checkbox: RegExp -->
@@ -35,7 +41,10 @@
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
-							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
+							<FormCheckbox
+								:checked="!!h.caseSensitive"
+								@update:checked="onCaseSensitiveChange(h, $event)"
+							/>
 						</div>
 
 						<!-- Checkbox: Flash Title -->
@@ -48,8 +57,12 @@
 						</div>
 
 						<div ref="interactRef" name="interact">
-							<button ref="soundEffectButton" class="sound-button" :class="{ 'has-sound': !!h.soundFile }"
-								tabindex="0">
+							<button
+								ref="soundEffectButton"
+								class="sound-button"
+								:class="{ 'has-sound': !!h.soundFile }"
+								tabindex="0"
+							>
 								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
 								<div class="sound-options">
 									<UiFloating v-if="interactRef?.[index]" :anchor="interactRef[index]">
@@ -63,9 +76,11 @@
 											<label>
 												Custom Sound{{ h.soundFile ? "" : "..." }}
 												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
-												<input type="file"
+												<input
+													type="file"
 													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
-													@input="onUploadSoundFile(h, $event)" />
+													@input="onUploadSoundFile(h, $event)"
+												/>
 											</label>
 										</button>
 									</UiFloating>
@@ -255,7 +270,7 @@ main.seventv-settings-custom-highlights {
 			column-gap: 3rem;
 			padding: 1rem;
 
-			>div {
+			> div {
 				align-self: center;
 
 				&.centered {
@@ -272,7 +287,7 @@ main.seventv-settings-custom-highlights {
 				border-bottom: 0.25rem solid var(--seventv-primary);
 			}
 
-			&:not(.create-new)>.use-virtual-input {
+			&:not(.create-new) > .use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
 				display: block;
@@ -301,7 +316,7 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
-			[name="color"]>input {
+			[name="color"] > input {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
@@ -337,7 +352,7 @@ main.seventv-settings-custom-highlights {
 					border-radius: 50%;
 				}
 
-				.sound-button:focus-within>.sound-options {
+				.sound-button:focus-within > .sound-options {
 					position: fixed;
 					width: 9rem;
 					display: block;
diff --git a/src/site/global/settings/SettingsConfigIgnores.vue b/src/site/global/settings/SettingsConfigIgnores.vue
index 62062773e..3ae64ef5b 100644
--- a/src/site/global/settings/SettingsConfigIgnores.vue
+++ b/src/site/global/settings/SettingsConfigIgnores.vue
@@ -10,20 +10,26 @@
 			</div>
 
 			<UiScrollable>
-				<template v-for="(h) of ignores.getAllIgnored()" :key="h.id">
+				<template v-for="h of ignores.getAllIgnored()" :key="h.id">
 					<div class="item">
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
-							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
+							<FormInput
+								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern"
+								@blur="onInputBlur(h, 'pattern')"
+							/>
 						</div>
 
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
-							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label" @blur="onInputBlur(h, 'label')" />
+							<FormInput
+								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label"
+								@blur="onInputBlur(h, 'label')"
+							/>
 						</div>
 
 						<!-- Checkbox: RegExp -->
@@ -33,7 +39,10 @@
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
-							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
+							<FormCheckbox
+								:checked="!!h.caseSensitive"
+								@update:checked="onCaseSensitiveChange(h, $event)"
+							/>
 						</div>
 
 						<div ref="interactRef" name="interact">
@@ -56,7 +65,7 @@
 <script setup lang="ts">
 import { nextTick, reactive, ref, watch } from "vue";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { useChatHighlights, IgnoreDef } from "@/composable/chat/useChatHighlights";
+import { IgnoreDef, useChatHighlights } from "@/composable/chat/useChatHighlights";
 import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
 import UiScrollable from "@/ui/UiScrollable.vue";
 import FormCheckbox from "../components/FormCheckbox.vue";
@@ -158,7 +167,7 @@ main.seventv-settings-custom-ignores {
 			column-gap: 3rem;
 			padding: 1rem;
 
-			>div {
+			> div {
 				align-self: center;
 
 				&.centered {
@@ -175,7 +184,7 @@ main.seventv-settings-custom-ignores {
 				border-bottom: 0.25rem solid var(--seventv-primary);
 			}
 
-			&:not(.create-new)>.use-virtual-input {
+			&:not(.create-new) > .use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
 				display: block;
@@ -204,7 +213,7 @@ main.seventv-settings-custom-ignores {
 				}
 			}
 
-			[name="color"]>input {
+			[name="color"] > input {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
@@ -240,7 +249,7 @@ main.seventv-settings-custom-ignores {
 					border-radius: 50%;
 				}
 
-				.sound-button:focus-within>.sound-options {
+				.sound-button:focus-within > .sound-options {
 					position: fixed;
 					width: 9rem;
 					display: block;
diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue
index d3ef9705a..cb18ddcff 100644
--- a/src/site/twitch.tv/modules/chat/ChatController.vue
+++ b/src/site/twitch.tv/modules/chat/ChatController.vue
@@ -1,9 +1,14 @@
 <!-- eslint-disable no-fallthrough -->
 <template>
 	<Teleport v-if="ctx.id" :to="containerEl">
-		<UiScrollable ref="scrollerRef" class="seventv-chat-scroller" @container-scroll="scroller.onScroll"
-			@container-wheel="scroller.onWheel" @mouseenter="properties.hovering = true"
-			@mouseleave="properties.hovering = false">
+		<UiScrollable
+			ref="scrollerRef"
+			class="seventv-chat-scroller"
+			@container-scroll="scroller.onScroll"
+			@container-wheel="scroller.onWheel"
+			@mouseenter="properties.hovering = true"
+			@mouseleave="properties.hovering = false"
+		>
 			<div id="seventv-message-container" class="seventv-message-container">
 				<ChatList ref="chatList" :list="list" :message-handler="messageHandler" />
 			</div>
@@ -375,7 +380,7 @@ seventv-container.seventv-chat-list {
 	overflow: auto !important;
 	overflow-x: hidden !important;
 
-	>seventv-container {
+	> seventv-container {
 		display: none;
 	}
 
@@ -402,7 +407,7 @@ seventv-container.seventv-chat-list {
 			border-radius: 0.33em;
 			background-color: black;
 
-			>.seventv-scrollbar-thumb {
+			> .seventv-scrollbar-thumb {
 				position: absolute;
 				width: 100%;
 
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index 7f86f921e..2d43dbd47 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -2,8 +2,10 @@
 	<main ref="chatListEl" class="seventv-chat-list" :alternating-background="isAlternatingBackground">
 		<div v-for="msg of displayedMessages" :key="msg.sym" :msg-id="msg.id" class="seventv-message">
 			<template v-if="msg.instance">
-				<component :is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
-					v-bind="{ msg }">
+				<component
+					:is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
+					v-bind="{ msg }"
+				>
 					<component :is="msg.instance" v-bind="msg.componentProps" :msg="msg">
 						<UserMessage :msg="msg" :emotes="emotes.active" :chatters="messages.chattersByUsername" />
 					</component>
@@ -206,9 +208,9 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 			const parentMsgAuthor =
 				msgData.reply.parentUserLogin && msgData.reply.parentDisplayName
 					? {
-						username: msgData.reply.parentUserLogin,
-						displayName: msgData.reply.parentDisplayName,
-					}
+							username: msgData.reply.parentUserLogin,
+							displayName: msgData.reply.parentDisplayName,
+					  }
 					: null;
 
 			msg.parent = {
@@ -250,15 +252,15 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 						},
 						data: e.cheerAmount
 							? convertCheerEmote({
-								alt: e.alt,
-								cheerAmount: e.cheerAmount,
-								cheerColor: e.cheerColor,
-								images: e.images,
-							})
+									alt: e.alt,
+									cheerAmount: e.cheerAmount,
+									cheerColor: e.cheerColor,
+									images: e.images,
+							  })
 							: convertTwitchEmote({
-								id: e.emoteID,
-								token: e.alt,
-							} as Partial<Twitch.TwitchEmote>),
+									id: e.emoteID,
+									token: e.alt,
+							  } as Partial<Twitch.TwitchEmote>),
 					};
 					break;
 				}
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index 48dcbff01..a73b6a1ed 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -1,9 +1,13 @@
 <template>
 	<template v-for="(inst, i) of chatController.instances" :key="inst.identifier">
-		<ChatController v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
-			:list="chatList.instances[0] ?? undefined" :controller="chatController.instances[i]"
-			:room="chatRoom.instances[0] ?? undefined" :buffer="chatBuffer.instances[0] ?? undefined"
-			:events="chatEvents.instances[0] ?? undefined" />
+		<ChatController
+			v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
+			:list="chatList.instances[0] ?? undefined"
+			:controller="chatController.instances[i]"
+			:room="chatRoom.instances[0] ?? undefined"
+			:buffer="chatBuffer.instances[0] ?? undefined"
+			:events="chatEvents.instances[0] ?? undefined"
+		/>
 	</template>
 </template>
 

From faf5544e6f001ab26453516223a09fba13b15c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Wed, 19 Apr 2023 20:47:12 +0300
Subject: [PATCH 12/20] feat/block-chat-phrases: fix js lints

---
 src/composable/chat/useChatHighlights.ts | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index feb020f62..7e2d651a9 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -1,5 +1,5 @@
-import { CustomRefFactory, inject, markRaw, reactive, ref, toRaw, watch } from "vue";
-import { IgnoredUpdater, toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
+import { inject, markRaw, reactive, ref, toRaw, watch } from "vue";
+import { toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
 import { debounceFn } from "@/common/Async";
 import { SITE_ASSETS_URL } from "@/common/Constant";
 import { log } from "@/common/Logger";
@@ -168,20 +168,6 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 		}
 	}
 
-	function defineIgnore(id: string, def: Omit<IgnoreDef, "id">, persist?: boolean): IgnoreDef {
-		if (!data) return {} as IgnoreDef;
-
-		const h = (data.ignores[id] = { ...def, id, persist });
-
-		if (!persist) return h;
-
-		// Store to DB
-		ignores.value.set(id, markRaw(h));
-		save();
-
-		return h;
-	}
-
 	function updateSoundData(h: HighlightDef) {
 		if (!h.soundFile) {
 			if (h.soundPath?.startsWith("#") && systemSounds[h.soundPath.slice(1)]) {

From 9cee1eb8c3dbd84c3ba10ae5db1d658c4916b070 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Wed, 19 Apr 2023 21:04:53 +0300
Subject: [PATCH 13/20] feat/block-chat-phrases: Fix build and update changelog

---
 CHANGELOG-nightly.md                          |  2 +-
 src/composable/chat/useChatHighlights.ts      | 45 +++++++++----------
 .../global/settings/SettingsConfigIgnores.vue |  2 +-
 3 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index 5c1ab7689..716d1d9c6 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -8,7 +8,7 @@
 
 -   Links in chat messages now respect known TLDs instead of matching any url-like pattern
 -   Added an option to show timeouts/bans directly in the chat without being a moderator
--   Added an option to ignore messages via highlights
+-   Added an option to ignore messages in chat settings
 -   Added options to change what emotes are displayed in the colon list and tab-completion carousel
 -   Added an option to show the text bit for BTTV and FFZ emote modifiers
 -   Added an option to hide monitored suspicious user highlights
diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index 7e2d651a9..f705957b4 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -1,5 +1,5 @@
 import { inject, markRaw, reactive, ref, toRaw, watch } from "vue";
-import { toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
+import { IgnoredUpdater, toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
 import { debounceFn } from "@/common/Async";
 import { SITE_ASSETS_URL } from "@/common/Constant";
 import { log } from "@/common/Logger";
@@ -135,37 +135,35 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 		}
 	}, 250);
 
-	function define(
-		id: string,
-		def: Omit<HighlightDef | IgnoreDef, "id">,
-		persist?: boolean,
-	): HighlightDef | IgnoreDef {
-		if (!data) return {} as HighlightDef | IgnoreDef;
+	function define(id: string, def: Omit<HighlightDef, "id">, persist?: boolean): HighlightDef {
+		if (!data) return {} as HighlightDef;
 
-		if (isHighlight(def)) {
-			const h = (data.highlights[id] = { ...def, id, persist });
-			updateSoundData(h);
+		const h = (data.highlights[id] = { ...def, id, persist });
+		updateSoundData(h);
 
-			if (!persist) return h;
+		if (!persist) return h;
 
-			// Store to DB\andymilonakis
-			customHighlights.value.set(id, markRaw(h));
+		// Store to DB\andymilonakis
+		customHighlights.value.set(id, markRaw(h));
 
-			save();
+		save();
 
-			return h;
-		} else {
-			const h = (data.ignores[id] = { ...def, id, persist });
+		return h;
+	}
 
-			if (!persist) return h;
+	function defineIgnore(id: string, def: Omit<IgnoreDef, "id">, persist?: boolean): IgnoreDef {
+		if (!data) return {} as IgnoreDef;
 
-			// Store to DB\andymilonakis
-			ignores.value.set(id, markRaw(h));
+		const h = (data.ignores[id] = { ...def, id, persist });
 
-			save();
+		if (!persist) return h;
 
-			return h;
-		}
+		// Store to DB\andymilonakis
+		ignores.value.set(id, markRaw(h));
+
+		save();
+
+		return h;
 	}
 
 	function updateSoundData(h: HighlightDef) {
@@ -317,6 +315,7 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 
 	return {
 		define,
+		defineIgnore,
 		remove,
 		getAll,
 		getAllIgnored,
diff --git a/src/site/global/settings/SettingsConfigIgnores.vue b/src/site/global/settings/SettingsConfigIgnores.vue
index 3ae64ef5b..bd49eec7d 100644
--- a/src/site/global/settings/SettingsConfigIgnores.vue
+++ b/src/site/global/settings/SettingsConfigIgnores.vue
@@ -118,7 +118,7 @@ function onDeleteIgnore(h: IgnoreDef): void {
 watch(newInput, (val, old) => {
 	if (!val || old) return;
 
-	const h = ignores.define(
+	const h = ignores.defineIgnore(
 		"new-ignore",
 		{
 			label: "",

From c50e09cfb00c4636358cb7b57552256c1d135548 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Wed, 19 Apr 2023 21:06:42 +0300
Subject: [PATCH 14/20] feat/block-chat-phrases: Remove unused import

---
 src/composable/chat/useChatHighlights.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index f705957b4..db63da55a 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -1,5 +1,5 @@
 import { inject, markRaw, reactive, ref, toRaw, watch } from "vue";
-import { IgnoredUpdater, toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
+import { toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
 import { debounceFn } from "@/common/Async";
 import { SITE_ASSETS_URL } from "@/common/Constant";
 import { log } from "@/common/Logger";

From f9de628d139edea27990b311760fe90c45b0f153 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Thu, 20 Apr 2023 16:50:18 +0300
Subject: [PATCH 15/20] feat/block-chat-phrases: Re-use highlight template and
 composable for ignores

---
 src/composable/chat/useChatHighlights.ts      |  89 ++----
 .../settings/SettingsConfigHighlights.vue     |  83 +++--
 .../global/settings/SettingsConfigIgnores.vue | 299 ------------------
 .../twitch.tv/modules/chat/ChatModule.vue     |  21 +-
 4 files changed, 78 insertions(+), 414 deletions(-)
 delete mode 100644 src/site/global/settings/SettingsConfigIgnores.vue

diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index db63da55a..b0df5290d 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -1,5 +1,5 @@
 import { inject, markRaw, reactive, ref, toRaw, watch } from "vue";
-import { toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
+import { IgnoredUpdater, toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
 import { debounceFn } from "@/common/Async";
 import { SITE_ASSETS_URL } from "@/common/Constant";
 import { log } from "@/common/Logger";
@@ -39,13 +39,15 @@ export interface HighlightDef extends IgnoreDef {
 	};
 }
 
+export type HighlightType = HighlightDef | IgnoreDef;
+
 const m = new WeakMap<ChannelContext, ChatHighlights>();
 
 const customHighlights = useConfig<Map<string, HighlightDef>>("highlights.custom");
 const ignores = useConfig<Map<string, IgnoreDef>>("chat.ignores");
 const soundVolume = useConfig<number>("highlights.sound_volume");
 
-export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
+export function useChatHighlights(ctx: ChannelContext, useIgnores?: boolean) {
 	const visibility = useDocumentVisibility();
 
 	const assetsBase = inject(SITE_ASSETS_URL, "");
@@ -106,10 +108,12 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 		m.set(ctx, data);
 	}
 
+	const storeType: Record<string, HighlightType> = useIgnores ? data.ignores : data.highlights;
+
 	const save = debounceFn(function (): void {
 		if (!data) return;
 
-		if (useIgnored) {
+		if (useIgnores) {
 			const items: [string, IgnoreDef][] = Array.from(Object.values(data.ignores))
 				.filter((h) => h.persist)
 				.map((h) => [
@@ -135,31 +139,22 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 		}
 	}, 250);
 
-	function define(id: string, def: Omit<HighlightDef, "id">, persist?: boolean): HighlightDef {
-		if (!data) return {} as HighlightDef;
+	function define(id: string, def: Omit<HighlightType, "id">, persist?: boolean): HighlightType {
+		if (!data) return {} as HighlightType;
 
-		const h = (data.highlights[id] = { ...def, id, persist });
-		updateSoundData(h);
-
-		if (!persist) return h;
-
-		// Store to DB\andymilonakis
-		customHighlights.value.set(id, markRaw(h));
-
-		save();
-
-		return h;
-	}
-
-	function defineIgnore(id: string, def: Omit<IgnoreDef, "id">, persist?: boolean): IgnoreDef {
-		if (!data) return {} as IgnoreDef;
-
-		const h = (data.ignores[id] = { ...def, id, persist });
+		const h: HighlightType = (storeType[id] = { ...def, id, persist });
+		if (!useIgnores && isHighlight(h)) {
+			updateSoundData(h);
+		}
 
 		if (!persist) return h;
 
-		// Store to DB\andymilonakis
-		ignores.value.set(id, markRaw(h));
+		// Store to DB
+		if (!useIgnores && isHighlight(h)) {
+			customHighlights.value.set(id, markRaw(h));
+		} else {
+			ignores.value.set(id, markRaw(h));
+		}
 
 		save();
 
@@ -190,18 +185,15 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 	function remove(id: string): void {
 		if (!data) return;
 
-		if (useIgnored) {
-			delete data.ignores[id];
-		} else {
-			delete data.highlights[id];
-		}
+		delete storeType[id];
+
 		save();
 	}
 
 	function checkMatch(key: string, msg: ChatMessage): boolean {
 		if (!data) return false;
 
-		const h = useIgnored ? data?.ignores[key] : data?.highlights[key];
+		const h = storeType[key];
 		if (!h) return false;
 
 		let ok = false;
@@ -229,7 +221,7 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 			ok = h.test(msg);
 		}
 
-		if (ok && !useIgnored && isHighlight(h)) {
+		if (ok && !useIgnores && isHighlight(h)) {
 			msg.setHighlight(h.color, h.label);
 
 			if (h.soundDef && !msg.historical) {
@@ -273,52 +265,35 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 			});
 	}
 
-	function getAll(): Record<string, HighlightDef> {
-		if (!data) return {};
-
-		return toReactive(data.highlights);
-	}
-
-	function getAllIgnored(): Record<string, IgnoreDef> {
+	function getAll(): Record<string, HighlightType> {
 		if (!data) return {};
 
-		return toReactive(data.ignores);
+		return toReactive(storeType);
 	}
 
 	function updateId(oldId: string, newId: string): void {
 		if (!data) return;
-		if (useIgnored) {
-			const h = data.ignores[oldId];
-			if (!h) return;
 
-			data.ignores[newId] = h;
-			delete data.ignores[oldId];
+		const h = storeType[oldId];
+		if (!h) return;
 
-			h.id = newId;
-		} else {
-			const h = data.highlights[oldId];
-			if (!h) return;
-
-			data.highlights[newId] = h;
-			delete data.highlights[oldId];
+		storeType[newId] = h;
+		delete storeType[oldId];
 
-			h.id = newId;
-		}
+		h.id = newId;
 
 		save();
 	}
 
 	function checkIgnored(message: ChatMessage<ComponentFactory>) {
-		const allIgnores = Object.values(getAllIgnored());
+		const allIgnores = Object.values(getAll());
 		return allIgnores.some((s) => checkMatch(s.id, message));
 	}
 
 	return {
 		define,
-		defineIgnore,
 		remove,
 		getAll,
-		getAllIgnored,
 		save,
 		updateId,
 		checkMatch,
@@ -328,6 +303,6 @@ export function useChatHighlights(ctx: ChannelContext, useIgnored?: boolean) {
 	};
 }
 
-const isHighlight = (def: Omit<HighlightDef | IgnoreDef, "id">): def is HighlightDef => {
+export const isHighlight = (def: Omit<HighlightType, "id">): def is HighlightDef => {
 	return (def as HighlightDef).color !== undefined;
 };
diff --git a/src/site/global/settings/SettingsConfigHighlights.vue b/src/site/global/settings/SettingsConfigHighlights.vue
index 5f7556c37..7c6dd4270 100644
--- a/src/site/global/settings/SettingsConfigHighlights.vue
+++ b/src/site/global/settings/SettingsConfigHighlights.vue
@@ -7,8 +7,8 @@
 				<div>Label</div>
 				<div class="centered">RegExp</div>
 				<div>Case Sensitive</div>
-				<div class="centered">Flash Title</div>
-				<div>Color</div>
+				<div v-if="!useIgnores" class="centered">Flash Title</div>
+				<div v-if="!useIgnores">Color</div>
 			</div>
 
 			<UiScrollable>
@@ -17,21 +17,15 @@
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
-							<FormInput
-								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern"
-								@blur="onInputBlur(h, 'pattern')"
-							/>
+							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
 						</div>
 
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
-							<FormInput
-								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label"
-								@blur="onInputBlur(h, 'label')"
-							/>
+							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label" @blur="onInputBlur(h, 'label')" />
 						</div>
 
 						<!-- Checkbox: RegExp -->
@@ -41,28 +35,23 @@
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
-							<FormCheckbox
-								:checked="!!h.caseSensitive"
-								@update:checked="onCaseSensitiveChange(h, $event)"
-							/>
+							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
 						</div>
 
 						<!-- Checkbox: Flash Title -->
 						<div name="flash-title" class="centered">
-							<FormCheckbox :checked="!!h.flashTitle" @update:checked="onFlashTitleChange(h, $event)" />
+							<FormCheckbox v-if="!useIgnores && isHighlight(h)" :checked="!!h.flashTitle"
+								@update:checked="onFlashTitleChange(h, $event)" />
 						</div>
 
 						<div name="color">
-							<input v-model="h.color" type="color" @input="onColorChange(h, $event as InputEvent)" />
+							<input v-if="!useIgnores && isHighlight(h)" v-model="h.color" type="color"
+								@input="onColorChange(h, $event as InputEvent)" />
 						</div>
 
 						<div ref="interactRef" name="interact">
-							<button
-								ref="soundEffectButton"
-								class="sound-button"
-								:class="{ 'has-sound': !!h.soundFile }"
-								tabindex="0"
-							>
+							<button v-if="!useIgnores && isHighlight(h)" ref="soundEffectButton" class="sound-button"
+								:class="{ 'has-sound': !!h.soundFile }" tabindex="0">
 								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
 								<div class="sound-options">
 									<UiFloating v-if="interactRef?.[index]" :anchor="interactRef[index]">
@@ -76,11 +65,9 @@
 											<label>
 												Custom Sound{{ h.soundFile ? "" : "..." }}
 												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
-												<input
-													type="file"
+												<input type="file"
 													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
-													@input="onUploadSoundFile(h, $event)"
-												/>
+													@input="onUploadSoundFile(h, $event)" />
 											</label>
 										</button>
 									</UiFloating>
@@ -96,7 +83,7 @@
 			<!-- New -->
 			<div class="item create-new">
 				<div name="pattern">
-					<FormInput v-model="newInput" label="New Highlight..."> hi </FormInput>
+					<FormInput v-model="newInput" :label="newLabel"></FormInput>
 				</div>
 			</div>
 		</div>
@@ -106,7 +93,7 @@
 <script setup lang="ts">
 import { nextTick, reactive, ref, watch } from "vue";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { HighlightDef, useChatHighlights } from "@/composable/chat/useChatHighlights";
+import { HighlightDef, useChatHighlights, HighlightType, isHighlight } from "@/composable/chat/useChatHighlights";
 import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
 import CompactDiscIcon from "@/assets/svg/icons/CompactDiscIcon.vue";
 import UiFloating from "@/ui/UiFloating.vue";
@@ -115,29 +102,33 @@ import FormCheckbox from "../components/FormCheckbox.vue";
 import FormInput from "../components/FormInput.vue";
 import { v4 as uuid } from "uuid";
 
-const ctx = useChannelContext(); // this will be an empty context, as config is not tied to channel
-const highlights = useChatHighlights(ctx);
+const props = defineProps<{
+	useIgnores: boolean;
+}>();
 
+const ctx = useChannelContext(); // this will be an empty context, as config is not tied to channel
+const highlights = useChatHighlights(ctx, props.useIgnores);
 const newInput = ref("");
 const inputs = reactive({
-	pattern: new WeakMap<HighlightDef, InstanceType<typeof FormInput>>(),
-	label: new WeakMap<HighlightDef, InstanceType<typeof FormInput>>(),
+	pattern: new WeakMap<HighlightType, InstanceType<typeof FormInput>>(),
+	label: new WeakMap<HighlightType, InstanceType<typeof FormInput>>(),
 });
 const interactRef = ref<HTMLElement[]>();
+const newLabel = `New ${props.useIgnores ? "Ignore" : "Highlight"}`;
 
-function onInputFocus(h: HighlightDef, inputName: keyof typeof inputs): void {
+function onInputFocus(h: HighlightType, inputName: keyof typeof inputs): void {
 	const input = inputs[inputName].get(h);
 	if (!input) return;
 
 	input.focus();
 }
 
-function onInputBlur(h: HighlightDef, inputName: keyof typeof inputs): void {
+function onInputBlur(h: HighlightType, inputName: keyof typeof inputs): void {
 	const input = inputs[inputName].get(h);
 	if (!input) return;
 
 	const id = uuid();
-	highlights.updateId("new-highlight", id);
+	highlights.updateId(props.useIgnores ? "new-ignore" : "new-highlight", id);
 	highlights.save();
 }
 
@@ -152,7 +143,7 @@ function onRegExpStateChange(h: HighlightDef, checked: boolean): void {
 	highlights.save();
 }
 
-function onCaseSensitiveChange(h: HighlightDef, checked: boolean): void {
+function onCaseSensitiveChange(h: HighlightType, checked: boolean): void {
 	h.caseSensitive = checked;
 	highlights.save();
 }
@@ -210,7 +201,7 @@ function onRemoveSound(h: HighlightDef): void {
 	highlights.save();
 }
 
-function onDeleteHighlight(h: HighlightDef): void {
+function onDeleteHighlight(h: HighlightType): void {
 	highlights.remove(h.id);
 	highlights.save();
 }
@@ -221,11 +212,13 @@ watch(newInput, (val, old) => {
 	if (!val || old) return;
 
 	const h = highlights.define(
-		"new-highlight",
+		props.useIgnores ? "new-ignore" : "new-highlight",
 		{
-			color: "#8803fc",
 			label: "",
 			pattern: val,
+			...[props.useIgnores && {
+				color: "#8803fc",
+			}]
 		},
 		true,
 	);
@@ -270,7 +263,7 @@ main.seventv-settings-custom-highlights {
 			column-gap: 3rem;
 			padding: 1rem;
 
-			> div {
+			>div {
 				align-self: center;
 
 				&.centered {
@@ -287,7 +280,7 @@ main.seventv-settings-custom-highlights {
 				border-bottom: 0.25rem solid var(--seventv-primary);
 			}
 
-			&:not(.create-new) > .use-virtual-input {
+			&:not(.create-new)>.use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
 				display: block;
@@ -316,7 +309,7 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
-			[name="color"] > input {
+			[name="color"]>input {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
@@ -352,7 +345,7 @@ main.seventv-settings-custom-highlights {
 					border-radius: 50%;
 				}
 
-				.sound-button:focus-within > .sound-options {
+				.sound-button:focus-within>.sound-options {
 					position: fixed;
 					width: 9rem;
 					display: block;
diff --git a/src/site/global/settings/SettingsConfigIgnores.vue b/src/site/global/settings/SettingsConfigIgnores.vue
deleted file mode 100644
index bd49eec7d..000000000
--- a/src/site/global/settings/SettingsConfigIgnores.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<template>
-	<main class="seventv-settings-custom-ignores">
-		<div class="tabs"></div>
-		<div class="list">
-			<div class="item heading">
-				<div>Pattern</div>
-				<div>Label</div>
-				<div class="centered">RegExp</div>
-				<div>Case Sensitive</div>
-			</div>
-
-			<UiScrollable>
-				<template v-for="h of ignores.getAllIgnored()" :key="h.id">
-					<div class="item">
-						<!-- Pattern -->
-						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
-							<span>{{ h.pattern }}</span>
-							<FormInput
-								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern"
-								@blur="onInputBlur(h, 'pattern')"
-							/>
-						</div>
-
-						<!-- Label -->
-						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
-							<span>{{ h.label }}</span>
-							<FormInput
-								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label"
-								@blur="onInputBlur(h, 'label')"
-							/>
-						</div>
-
-						<!-- Checkbox: RegExp -->
-						<div name="is-regexp" class="centered">
-							<FormCheckbox :checked="!!h.regexp" @update:checked="onRegExpStateChange(h, $event)" />
-						</div>
-
-						<!-- Checkbox: Case Sensitive -->
-						<div name="case-sensitive" class="centered">
-							<FormCheckbox
-								:checked="!!h.caseSensitive"
-								@update:checked="onCaseSensitiveChange(h, $event)"
-							/>
-						</div>
-
-						<div ref="interactRef" name="interact">
-							<CloseIcon v-tooltip="'Remove'" tabindex="0" @click="onDeleteIgnore(h)" />
-						</div>
-					</div>
-				</template>
-			</UiScrollable>
-
-			<!-- New -->
-			<div class="item create-new">
-				<div name="pattern">
-					<FormInput v-model="newInput" label="New Ignore..."> hi </FormInput>
-				</div>
-			</div>
-		</div>
-	</main>
-</template>
-
-<script setup lang="ts">
-import { nextTick, reactive, ref, watch } from "vue";
-import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { IgnoreDef, useChatHighlights } from "@/composable/chat/useChatHighlights";
-import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
-import UiScrollable from "@/ui/UiScrollable.vue";
-import FormCheckbox from "../components/FormCheckbox.vue";
-import FormInput from "../components/FormInput.vue";
-import { v4 as uuid } from "uuid";
-
-const ctx = useChannelContext(); // this will be an empty context, as config is not tied to channel
-const ignores = useChatHighlights(ctx, true);
-
-const newInput = ref("");
-const inputs = reactive({
-	pattern: new WeakMap<IgnoreDef, InstanceType<typeof FormInput>>(),
-	label: new WeakMap<IgnoreDef, InstanceType<typeof FormInput>>(),
-});
-const interactRef = ref<HTMLElement[]>();
-
-function onInputFocus(h: IgnoreDef, inputName: keyof typeof inputs): void {
-	const input = inputs[inputName].get(h);
-	if (!input) return;
-
-	input.focus();
-}
-
-function onInputBlur(h: IgnoreDef, inputName: keyof typeof inputs): void {
-	const input = inputs[inputName].get(h);
-	if (!input) return;
-
-	const id = uuid();
-	ignores.updateId("new-ignore", id);
-	ignores.save();
-}
-
-function onRegExpStateChange(h: IgnoreDef, checked: boolean): void {
-	h.regexp = checked;
-	ignores.save();
-}
-
-function onCaseSensitiveChange(h: IgnoreDef, checked: boolean): void {
-	h.caseSensitive = checked;
-	ignores.save();
-}
-
-function onDeleteIgnore(h: IgnoreDef): void {
-	ignores.remove(h.id);
-	ignores.save();
-}
-
-// Watch for user writing to "new ignore" input
-// If they do, we create a new ignore and switch focus
-watch(newInput, (val, old) => {
-	if (!val || old) return;
-
-	const h = ignores.defineIgnore(
-		"new-ignore",
-		{
-			label: "",
-			pattern: val,
-		},
-		true,
-	);
-
-	nextTick(() => {
-		const input = inputs.pattern.get(h);
-		if (!input) return;
-
-		input.focus();
-		newInput.value = "";
-	});
-});
-</script>
-
-<style scoped lang="scss">
-main.seventv-settings-custom-ignores {
-	display: grid;
-	padding: 0.25rem;
-	grid-template-rows: 0 max-content;
-	grid-template-areas:
-		"tabs"
-		"list";
-
-	overflow-x: auto;
-
-	.tabs {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		grid-template-rows: 1fr;
-		grid-area: tabs;
-	}
-
-	.list {
-		display: grid;
-		grid-area: list;
-		max-height: 36rem;
-
-		.item {
-			display: grid;
-			grid-auto-flow: row dense;
-			grid-template-columns: 20% 9rem repeat(3, 1fr);
-			column-gap: 3rem;
-			padding: 1rem;
-
-			> div {
-				align-self: center;
-
-				&.centered {
-					justify-self: center;
-				}
-			}
-
-			&:nth-child(odd) {
-				background-color: var(--seventv-background-shade-2);
-			}
-
-			&.heading {
-				background-color: var(--seventv-background-shade-3);
-				border-bottom: 0.25rem solid var(--seventv-primary);
-			}
-
-			&:not(.create-new) > .use-virtual-input {
-				cursor: text;
-				padding: 0.5rem;
-				display: block;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-
-				input {
-					width: 0;
-					height: 0;
-					opacity: 0;
-				}
-
-				&:focus-within {
-					padding: 0;
-
-					span {
-						display: none;
-					}
-
-					input {
-						opacity: 1;
-						width: 100%;
-						height: initial;
-					}
-				}
-			}
-
-			[name="color"] > input {
-				&::-webkit-color-swatch-wrapper {
-					padding: 0;
-				}
-
-				&::-webkit-color-swatch {
-					border: none;
-				}
-			}
-
-			[name="interact"] {
-				display: grid;
-				column-gap: 1rem;
-				grid-auto-flow: column;
-				justify-self: end;
-
-				button {
-					all: unset;
-					cursor: pointer;
-				}
-
-				.sound-options {
-					display: none;
-				}
-
-				.sound-button.has-sound::after {
-					content: "";
-					position: absolute;
-					width: 0.75rem;
-					height: 0.75rem;
-					margin-left: -0.25rem;
-					margin-top: -0.25rem;
-					background-color: var(--seventv-accent);
-					border-radius: 50%;
-				}
-
-				.sound-button:focus-within > .sound-options {
-					position: fixed;
-					width: 9rem;
-					display: block;
-					z-index: 10000;
-
-					input {
-						display: none;
-					}
-
-					label {
-						cursor: pointer;
-					}
-
-					button {
-						width: 100%;
-						padding: 0.5rem;
-						background-color: var(--seventv-background-shade-2);
-						border: 0.25rem solid var(--seventv-background-shade-3);
-						transition: border-color 90ms ease-in-out;
-
-						p {
-							color: var(--seventv-muted);
-						}
-
-						&:hover {
-							border-color: var(--seventv-primary);
-						}
-
-						&[active="true"] {
-							color: var(--seventv-primary);
-						}
-					}
-				}
-
-				svg {
-					cursor: pointer;
-					font-size: 2rem;
-
-					&:hover {
-						color: var(--seventv-primary);
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index a73b6a1ed..2ff2b8d0e 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -1,18 +1,14 @@
 <template>
 	<template v-for="(inst, i) of chatController.instances" :key="inst.identifier">
-		<ChatController
-			v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
-			:list="chatList.instances[0] ?? undefined"
-			:controller="chatController.instances[i]"
-			:room="chatRoom.instances[0] ?? undefined"
-			:buffer="chatBuffer.instances[0] ?? undefined"
-			:events="chatEvents.instances[0] ?? undefined"
-		/>
+		<ChatController v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
+			:list="chatList.instances[0] ?? undefined" :controller="chatController.instances[i]"
+			:room="chatRoom.instances[0] ?? undefined" :buffer="chatBuffer.instances[0] ?? undefined"
+			:events="chatEvents.instances[0] ?? undefined" />
 	</template>
 </template>
 
 <script setup lang="ts">
-import { markRaw, reactive, ref, watch } from "vue";
+import { defineCustomElement, markRaw, reactive, ref, watch } from "vue";
 import { refDebounced } from "@vueuse/shared";
 import { HookedInstance, getTrackedNode, useComponentHook } from "@/common/ReactHooks";
 import { declareModule } from "@/composable/useModule";
@@ -100,10 +96,9 @@ defineExpose({
 </script>
 
 <script lang="ts">
-import { HighlightDef } from "@/composable/chat/useChatHighlights";
+import { HighlightDef, IgnoreDef } from "@/composable/chat/useChatHighlights";
 import { declareConfig, useConfig } from "@/composable/useSettings";
 import SettingsConfigHighlights from "@/site/global/settings/SettingsConfigHighlights.vue";
-import SettingsConfigIgnored from "@/site/global/settings/SettingsConfigIgnores.vue";
 
 export const config = [
 	declareConfig("general.blur_unlisted_emotes", "TOGGLE", {
@@ -394,10 +389,10 @@ export const config = [
 		hint: "Create custom highlights",
 		defaultValue: new Map(),
 	}),
-	declareConfig<Map<string, HighlightDef>>("chat.ignores", "CUSTOM", {
+	declareConfig<Map<string, IgnoreDef>>("chat.ignores", "CUSTOM", {
 		path: ["Chat", "Ignores"],
 		custom: {
-			component: markRaw(SettingsConfigIgnored),
+			component: markRaw(SettingsConfigHighlights),
 			gridMode: "new-row",
 		},
 		label: "Ignores",

From 04252a86c5fbbd6d636b4e94a01ab14d5d925e0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Thu, 20 Apr 2023 16:53:44 +0300
Subject: [PATCH 16/20] feat/block-chat-phrases: make format and lint

---
 src/composable/chat/useChatHighlights.ts      |  2 +-
 .../settings/SettingsConfigHighlights.vue     | 67 +++++++++++++------
 .../twitch.tv/modules/chat/ChatModule.vue     | 14 ++--
 3 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index b0df5290d..879301f8c 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -1,5 +1,5 @@
 import { inject, markRaw, reactive, ref, toRaw, watch } from "vue";
-import { IgnoredUpdater, toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
+import { toReactive, until, useDocumentVisibility, useIntervalFn, useTitle } from "@vueuse/core";
 import { debounceFn } from "@/common/Async";
 import { SITE_ASSETS_URL } from "@/common/Constant";
 import { log } from "@/common/Logger";
diff --git a/src/site/global/settings/SettingsConfigHighlights.vue b/src/site/global/settings/SettingsConfigHighlights.vue
index 7c6dd4270..9bb9bdd55 100644
--- a/src/site/global/settings/SettingsConfigHighlights.vue
+++ b/src/site/global/settings/SettingsConfigHighlights.vue
@@ -17,15 +17,21 @@
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
-							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
+							<FormInput
+								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern"
+								@blur="onInputBlur(h, 'pattern')"
+							/>
 						</div>
 
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
-							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label" @blur="onInputBlur(h, 'label')" />
+							<FormInput
+								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label"
+								@blur="onInputBlur(h, 'label')"
+							/>
 						</div>
 
 						<!-- Checkbox: RegExp -->
@@ -35,23 +41,38 @@
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
-							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
+							<FormCheckbox
+								:checked="!!h.caseSensitive"
+								@update:checked="onCaseSensitiveChange(h, $event)"
+							/>
 						</div>
 
 						<!-- Checkbox: Flash Title -->
 						<div name="flash-title" class="centered">
-							<FormCheckbox v-if="!useIgnores && isHighlight(h)" :checked="!!h.flashTitle"
-								@update:checked="onFlashTitleChange(h, $event)" />
+							<FormCheckbox
+								v-if="!useIgnores && isHighlight(h)"
+								:checked="!!h.flashTitle"
+								@update:checked="onFlashTitleChange(h, $event)"
+							/>
 						</div>
 
 						<div name="color">
-							<input v-if="!useIgnores && isHighlight(h)" v-model="h.color" type="color"
-								@input="onColorChange(h, $event as InputEvent)" />
+							<input
+								v-if="!useIgnores && isHighlight(h)"
+								v-model="h.color"
+								type="color"
+								@input="onColorChange(h, $event as InputEvent)"
+							/>
 						</div>
 
 						<div ref="interactRef" name="interact">
-							<button v-if="!useIgnores && isHighlight(h)" ref="soundEffectButton" class="sound-button"
-								:class="{ 'has-sound': !!h.soundFile }" tabindex="0">
+							<button
+								v-if="!useIgnores && isHighlight(h)"
+								ref="soundEffectButton"
+								class="sound-button"
+								:class="{ 'has-sound': !!h.soundFile }"
+								tabindex="0"
+							>
 								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
 								<div class="sound-options">
 									<UiFloating v-if="interactRef?.[index]" :anchor="interactRef[index]">
@@ -65,9 +86,11 @@
 											<label>
 												Custom Sound{{ h.soundFile ? "" : "..." }}
 												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
-												<input type="file"
+												<input
+													type="file"
 													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
-													@input="onUploadSoundFile(h, $event)" />
+													@input="onUploadSoundFile(h, $event)"
+												/>
 											</label>
 										</button>
 									</UiFloating>
@@ -93,7 +116,7 @@
 <script setup lang="ts">
 import { nextTick, reactive, ref, watch } from "vue";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { HighlightDef, useChatHighlights, HighlightType, isHighlight } from "@/composable/chat/useChatHighlights";
+import { HighlightDef, HighlightType, isHighlight, useChatHighlights } from "@/composable/chat/useChatHighlights";
 import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
 import CompactDiscIcon from "@/assets/svg/icons/CompactDiscIcon.vue";
 import UiFloating from "@/ui/UiFloating.vue";
@@ -216,9 +239,11 @@ watch(newInput, (val, old) => {
 		{
 			label: "",
 			pattern: val,
-			...[props.useIgnores && {
-				color: "#8803fc",
-			}]
+			...[
+				props.useIgnores && {
+					color: "#8803fc",
+				},
+			],
 		},
 		true,
 	);
@@ -263,7 +288,7 @@ main.seventv-settings-custom-highlights {
 			column-gap: 3rem;
 			padding: 1rem;
 
-			>div {
+			> div {
 				align-self: center;
 
 				&.centered {
@@ -280,7 +305,7 @@ main.seventv-settings-custom-highlights {
 				border-bottom: 0.25rem solid var(--seventv-primary);
 			}
 
-			&:not(.create-new)>.use-virtual-input {
+			&:not(.create-new) > .use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
 				display: block;
@@ -309,7 +334,7 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
-			[name="color"]>input {
+			[name="color"] > input {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
@@ -345,7 +370,7 @@ main.seventv-settings-custom-highlights {
 					border-radius: 50%;
 				}
 
-				.sound-button:focus-within>.sound-options {
+				.sound-button:focus-within > .sound-options {
 					position: fixed;
 					width: 9rem;
 					display: block;
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index 2ff2b8d0e..b6caa097a 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -1,14 +1,18 @@
 <template>
 	<template v-for="(inst, i) of chatController.instances" :key="inst.identifier">
-		<ChatController v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
-			:list="chatList.instances[0] ?? undefined" :controller="chatController.instances[i]"
-			:room="chatRoom.instances[0] ?? undefined" :buffer="chatBuffer.instances[0] ?? undefined"
-			:events="chatEvents.instances[0] ?? undefined" />
+		<ChatController
+			v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
+			:list="chatList.instances[0] ?? undefined"
+			:controller="chatController.instances[i]"
+			:room="chatRoom.instances[0] ?? undefined"
+			:buffer="chatBuffer.instances[0] ?? undefined"
+			:events="chatEvents.instances[0] ?? undefined"
+		/>
 	</template>
 </template>
 
 <script setup lang="ts">
-import { defineCustomElement, markRaw, reactive, ref, watch } from "vue";
+import { markRaw, reactive, ref, watch } from "vue";
 import { refDebounced } from "@vueuse/shared";
 import { HookedInstance, getTrackedNode, useComponentHook } from "@/common/ReactHooks";
 import { declareModule } from "@/composable/useModule";

From f25d427978ff1c8c4a8631a506dfeb20ea49df98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Sat, 22 Apr 2023 14:18:42 +0300
Subject: [PATCH 17/20] feat/block-chat-phrases: Add wrapper for ignores

---
 .../settings/SettingsConfigHighlights.vue     | 80 +++++++------------
 .../settings/SettingsConfigIgnoresWrapper.vue |  7 ++
 src/site/twitch.tv/modules/chat/ChatList.vue  | 33 ++++----
 .../twitch.tv/modules/chat/ChatModule.vue     | 15 ++--
 4 files changed, 57 insertions(+), 78 deletions(-)
 create mode 100644 src/site/global/settings/SettingsConfigIgnoresWrapper.vue

diff --git a/src/site/global/settings/SettingsConfigHighlights.vue b/src/site/global/settings/SettingsConfigHighlights.vue
index 9bb9bdd55..a23c56e42 100644
--- a/src/site/global/settings/SettingsConfigHighlights.vue
+++ b/src/site/global/settings/SettingsConfigHighlights.vue
@@ -17,21 +17,15 @@
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
-							<FormInput
-								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern"
-								@blur="onInputBlur(h, 'pattern')"
-							/>
+							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
 						</div>
 
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
-							<FormInput
-								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label"
-								@blur="onInputBlur(h, 'label')"
-							/>
+							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label" @blur="onInputBlur(h, 'label')" />
 						</div>
 
 						<!-- Checkbox: RegExp -->
@@ -41,38 +35,23 @@
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
-							<FormCheckbox
-								:checked="!!h.caseSensitive"
-								@update:checked="onCaseSensitiveChange(h, $event)"
-							/>
+							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
 						</div>
 
 						<!-- Checkbox: Flash Title -->
 						<div name="flash-title" class="centered">
-							<FormCheckbox
-								v-if="!useIgnores && isHighlight(h)"
-								:checked="!!h.flashTitle"
-								@update:checked="onFlashTitleChange(h, $event)"
-							/>
+							<FormCheckbox v-if="!useIgnores && isHighlight(h)" :checked="!!h.flashTitle"
+								@update:checked="onFlashTitleChange(h, $event)" />
 						</div>
 
 						<div name="color">
-							<input
-								v-if="!useIgnores && isHighlight(h)"
-								v-model="h.color"
-								type="color"
-								@input="onColorChange(h, $event as InputEvent)"
-							/>
+							<input v-if="!useIgnores && isHighlight(h)" v-model="h.color" type="color"
+								@input="onColorChange(h, $event as InputEvent)" />
 						</div>
 
 						<div ref="interactRef" name="interact">
-							<button
-								v-if="!useIgnores && isHighlight(h)"
-								ref="soundEffectButton"
-								class="sound-button"
-								:class="{ 'has-sound': !!h.soundFile }"
-								tabindex="0"
-							>
+							<button v-if="!useIgnores && isHighlight(h)" ref="soundEffectButton" class="sound-button"
+								:class="{ 'has-sound': !!h.soundFile }" tabindex="0">
 								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
 								<div class="sound-options">
 									<UiFloating v-if="interactRef?.[index]" :anchor="interactRef[index]">
@@ -86,11 +65,9 @@
 											<label>
 												Custom Sound{{ h.soundFile ? "" : "..." }}
 												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
-												<input
-													type="file"
+												<input type="file"
 													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
-													@input="onUploadSoundFile(h, $event)"
-												/>
+													@input="onUploadSoundFile(h, $event)" />
 											</label>
 										</button>
 									</UiFloating>
@@ -116,7 +93,7 @@
 <script setup lang="ts">
 import { nextTick, reactive, ref, watch } from "vue";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { HighlightDef, HighlightType, isHighlight, useChatHighlights } from "@/composable/chat/useChatHighlights";
+import { HighlightDef, HighlightType, IgnoreDef, isHighlight, useChatHighlights } from "@/composable/chat/useChatHighlights";
 import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
 import CompactDiscIcon from "@/assets/svg/icons/CompactDiscIcon.vue";
 import UiFloating from "@/ui/UiFloating.vue";
@@ -126,7 +103,7 @@ import FormInput from "../components/FormInput.vue";
 import { v4 as uuid } from "uuid";
 
 const props = defineProps<{
-	useIgnores: boolean;
+	useIgnores?: boolean;
 }>();
 
 const ctx = useChannelContext(); // this will be an empty context, as config is not tied to channel
@@ -234,17 +211,18 @@ function onDeleteHighlight(h: HighlightType): void {
 watch(newInput, (val, old) => {
 	if (!val || old) return;
 
+	const ignoreDef: Omit<IgnoreDef, "id"> = {
+		label: "",
+		pattern: val,
+	}
+	const highlightDef: Omit<HighlightDef, "id"> = {
+		...ignoreDef,
+		color: "#8803fc",
+	}
+
 	const h = highlights.define(
 		props.useIgnores ? "new-ignore" : "new-highlight",
-		{
-			label: "",
-			pattern: val,
-			...[
-				props.useIgnores && {
-					color: "#8803fc",
-				},
-			],
-		},
+		props.useIgnores ? ignoreDef : highlightDef,
 		true,
 	);
 
@@ -288,7 +266,7 @@ main.seventv-settings-custom-highlights {
 			column-gap: 3rem;
 			padding: 1rem;
 
-			> div {
+			>div {
 				align-self: center;
 
 				&.centered {
@@ -305,7 +283,7 @@ main.seventv-settings-custom-highlights {
 				border-bottom: 0.25rem solid var(--seventv-primary);
 			}
 
-			&:not(.create-new) > .use-virtual-input {
+			&:not(.create-new)>.use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
 				display: block;
@@ -334,7 +312,7 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
-			[name="color"] > input {
+			[name="color"]>input {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
@@ -370,7 +348,7 @@ main.seventv-settings-custom-highlights {
 					border-radius: 50%;
 				}
 
-				.sound-button:focus-within > .sound-options {
+				.sound-button:focus-within>.sound-options {
 					position: fixed;
 					width: 9rem;
 					display: block;
diff --git a/src/site/global/settings/SettingsConfigIgnoresWrapper.vue b/src/site/global/settings/SettingsConfigIgnoresWrapper.vue
new file mode 100644
index 000000000..154022937
--- /dev/null
+++ b/src/site/global/settings/SettingsConfigIgnoresWrapper.vue
@@ -0,0 +1,7 @@
+<template>
+	<SettingsConfigHighlights :use-ignores="true" />
+</template>
+
+<script setup lang="ts">
+import SettingsConfigHighlights from "./SettingsConfigHighlights.vue";
+</script>
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index 2d43dbd47..70fe7c5bd 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -2,10 +2,8 @@
 	<main ref="chatListEl" class="seventv-chat-list" :alternating-background="isAlternatingBackground">
 		<div v-for="msg of displayedMessages" :key="msg.sym" :msg-id="msg.id" class="seventv-message">
 			<template v-if="msg.instance">
-				<component
-					:is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
-					v-bind="{ msg }"
-				>
+				<component :is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
+					v-bind="{ msg }">
 					<component :is="msg.instance" v-bind="msg.componentProps" :msg="msg">
 						<UserMessage :msg="msg" :emotes="emotes.active" :chatters="messages.chattersByUsername" />
 					</component>
@@ -133,7 +131,6 @@ const onMessage = (msgData: Twitch.AnyMessage): boolean => {
 };
 
 function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRender = true) {
-	let shouldRenderMessage = shouldRender;
 	const c = getMessageComponent(msgData.type);
 
 	if (c) {
@@ -208,9 +205,9 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 			const parentMsgAuthor =
 				msgData.reply.parentUserLogin && msgData.reply.parentDisplayName
 					? {
-							username: msgData.reply.parentUserLogin,
-							displayName: msgData.reply.parentDisplayName,
-					  }
+						username: msgData.reply.parentUserLogin,
+						displayName: msgData.reply.parentDisplayName,
+					}
 					: null;
 
 			msg.parent = {
@@ -252,15 +249,15 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 						},
 						data: e.cheerAmount
 							? convertCheerEmote({
-									alt: e.alt,
-									cheerAmount: e.cheerAmount,
-									cheerColor: e.cheerColor,
-									images: e.images,
-							  })
+								alt: e.alt,
+								cheerAmount: e.cheerAmount,
+								cheerColor: e.cheerColor,
+								images: e.images,
+							})
 							: convertTwitchEmote({
-									id: e.emoteID,
-									token: e.alt,
-							  } as Partial<Twitch.TwitchEmote>),
+								id: e.emoteID,
+								token: e.alt,
+							} as Partial<Twitch.TwitchEmote>),
 					};
 					break;
 				}
@@ -297,7 +294,7 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 	}
 
 	if (ignores.checkIgnored(msg)) {
-		shouldRenderMessage = false;
+		shouldRender = false;
 	}
 
 	if (properties.isModerator) {
@@ -307,7 +304,7 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 
 	// Add message to store
 	// it will be rendered on the next tick
-	if (shouldRenderMessage) messages.add(msg);
+	if (shouldRender) messages.add(msg);
 }
 
 function onModerationMessage(msgData: Twitch.ModerationMessage) {
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index b6caa097a..20cfe7221 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -1,13 +1,9 @@
 <template>
 	<template v-for="(inst, i) of chatController.instances" :key="inst.identifier">
-		<ChatController
-			v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
-			:list="chatList.instances[0] ?? undefined"
-			:controller="chatController.instances[i]"
-			:room="chatRoom.instances[0] ?? undefined"
-			:buffer="chatBuffer.instances[0] ?? undefined"
-			:events="chatEvents.instances[0] ?? undefined"
-		/>
+		<ChatController v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
+			:list="chatList.instances[0] ?? undefined" :controller="chatController.instances[i]"
+			:room="chatRoom.instances[0] ?? undefined" :buffer="chatBuffer.instances[0] ?? undefined"
+			:events="chatEvents.instances[0] ?? undefined" />
 	</template>
 </template>
 
@@ -103,6 +99,7 @@ defineExpose({
 import { HighlightDef, IgnoreDef } from "@/composable/chat/useChatHighlights";
 import { declareConfig, useConfig } from "@/composable/useSettings";
 import SettingsConfigHighlights from "@/site/global/settings/SettingsConfigHighlights.vue";
+import SettingsConfigIgnoresWrapper from "@/site/global/settings/SettingsConfigIgnoresWrapper.vue";
 
 export const config = [
 	declareConfig("general.blur_unlisted_emotes", "TOGGLE", {
@@ -396,7 +393,7 @@ export const config = [
 	declareConfig<Map<string, IgnoreDef>>("chat.ignores", "CUSTOM", {
 		path: ["Chat", "Ignores"],
 		custom: {
-			component: markRaw(SettingsConfigHighlights),
+			component: markRaw(SettingsConfigIgnoresWrapper),
 			gridMode: "new-row",
 		},
 		label: "Ignores",

From 50b4a1d24947b662d89fe6a2eb31284508b9649f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Sat, 22 Apr 2023 14:22:13 +0300
Subject: [PATCH 18/20] feat/block-chat-phrases: make format

---
 .../settings/SettingsConfigHighlights.vue     | 69 +++++++++++++------
 src/site/twitch.tv/modules/chat/ChatList.vue  | 28 ++++----
 .../twitch.tv/modules/chat/ChatModule.vue     | 12 ++--
 3 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/src/site/global/settings/SettingsConfigHighlights.vue b/src/site/global/settings/SettingsConfigHighlights.vue
index a23c56e42..60fbd5b6f 100644
--- a/src/site/global/settings/SettingsConfigHighlights.vue
+++ b/src/site/global/settings/SettingsConfigHighlights.vue
@@ -17,15 +17,21 @@
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
-							<FormInput :ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.pattern" @blur="onInputBlur(h, 'pattern')" />
+							<FormInput
+								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern"
+								@blur="onInputBlur(h, 'pattern')"
+							/>
 						</div>
 
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
-							<FormInput :ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.label" @blur="onInputBlur(h, 'label')" />
+							<FormInput
+								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label"
+								@blur="onInputBlur(h, 'label')"
+							/>
 						</div>
 
 						<!-- Checkbox: RegExp -->
@@ -35,23 +41,38 @@
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
-							<FormCheckbox :checked="!!h.caseSensitive" @update:checked="onCaseSensitiveChange(h, $event)" />
+							<FormCheckbox
+								:checked="!!h.caseSensitive"
+								@update:checked="onCaseSensitiveChange(h, $event)"
+							/>
 						</div>
 
 						<!-- Checkbox: Flash Title -->
 						<div name="flash-title" class="centered">
-							<FormCheckbox v-if="!useIgnores && isHighlight(h)" :checked="!!h.flashTitle"
-								@update:checked="onFlashTitleChange(h, $event)" />
+							<FormCheckbox
+								v-if="!useIgnores && isHighlight(h)"
+								:checked="!!h.flashTitle"
+								@update:checked="onFlashTitleChange(h, $event)"
+							/>
 						</div>
 
 						<div name="color">
-							<input v-if="!useIgnores && isHighlight(h)" v-model="h.color" type="color"
-								@input="onColorChange(h, $event as InputEvent)" />
+							<input
+								v-if="!useIgnores && isHighlight(h)"
+								v-model="h.color"
+								type="color"
+								@input="onColorChange(h, $event as InputEvent)"
+							/>
 						</div>
 
 						<div ref="interactRef" name="interact">
-							<button v-if="!useIgnores && isHighlight(h)" ref="soundEffectButton" class="sound-button"
-								:class="{ 'has-sound': !!h.soundFile }" tabindex="0">
+							<button
+								v-if="!useIgnores && isHighlight(h)"
+								ref="soundEffectButton"
+								class="sound-button"
+								:class="{ 'has-sound': !!h.soundFile }"
+								tabindex="0"
+							>
 								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
 								<div class="sound-options">
 									<UiFloating v-if="interactRef?.[index]" :anchor="interactRef[index]">
@@ -65,9 +86,11 @@
 											<label>
 												Custom Sound{{ h.soundFile ? "" : "..." }}
 												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
-												<input type="file"
+												<input
+													type="file"
 													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
-													@input="onUploadSoundFile(h, $event)" />
+													@input="onUploadSoundFile(h, $event)"
+												/>
 											</label>
 										</button>
 									</UiFloating>
@@ -93,7 +116,13 @@
 <script setup lang="ts">
 import { nextTick, reactive, ref, watch } from "vue";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { HighlightDef, HighlightType, IgnoreDef, isHighlight, useChatHighlights } from "@/composable/chat/useChatHighlights";
+import {
+	HighlightDef,
+	HighlightType,
+	IgnoreDef,
+	isHighlight,
+	useChatHighlights,
+} from "@/composable/chat/useChatHighlights";
 import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
 import CompactDiscIcon from "@/assets/svg/icons/CompactDiscIcon.vue";
 import UiFloating from "@/ui/UiFloating.vue";
@@ -214,11 +243,11 @@ watch(newInput, (val, old) => {
 	const ignoreDef: Omit<IgnoreDef, "id"> = {
 		label: "",
 		pattern: val,
-	}
+	};
 	const highlightDef: Omit<HighlightDef, "id"> = {
 		...ignoreDef,
 		color: "#8803fc",
-	}
+	};
 
 	const h = highlights.define(
 		props.useIgnores ? "new-ignore" : "new-highlight",
@@ -266,7 +295,7 @@ main.seventv-settings-custom-highlights {
 			column-gap: 3rem;
 			padding: 1rem;
 
-			>div {
+			> div {
 				align-self: center;
 
 				&.centered {
@@ -283,7 +312,7 @@ main.seventv-settings-custom-highlights {
 				border-bottom: 0.25rem solid var(--seventv-primary);
 			}
 
-			&:not(.create-new)>.use-virtual-input {
+			&:not(.create-new) > .use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
 				display: block;
@@ -312,7 +341,7 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
-			[name="color"]>input {
+			[name="color"] > input {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
@@ -348,7 +377,7 @@ main.seventv-settings-custom-highlights {
 					border-radius: 50%;
 				}
 
-				.sound-button:focus-within>.sound-options {
+				.sound-button:focus-within > .sound-options {
 					position: fixed;
 					width: 9rem;
 					display: block;
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index 70fe7c5bd..8141418ee 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -2,8 +2,10 @@
 	<main ref="chatListEl" class="seventv-chat-list" :alternating-background="isAlternatingBackground">
 		<div v-for="msg of displayedMessages" :key="msg.sym" :msg-id="msg.id" class="seventv-message">
 			<template v-if="msg.instance">
-				<component :is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
-					v-bind="{ msg }">
+				<component
+					:is="isModSliderEnabled && properties.isModerator && msg.author ? ModSlider : 'span'"
+					v-bind="{ msg }"
+				>
 					<component :is="msg.instance" v-bind="msg.componentProps" :msg="msg">
 						<UserMessage :msg="msg" :emotes="emotes.active" :chatters="messages.chattersByUsername" />
 					</component>
@@ -205,9 +207,9 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 			const parentMsgAuthor =
 				msgData.reply.parentUserLogin && msgData.reply.parentDisplayName
 					? {
-						username: msgData.reply.parentUserLogin,
-						displayName: msgData.reply.parentDisplayName,
-					}
+							username: msgData.reply.parentUserLogin,
+							displayName: msgData.reply.parentDisplayName,
+					  }
 					: null;
 
 			msg.parent = {
@@ -249,15 +251,15 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 						},
 						data: e.cheerAmount
 							? convertCheerEmote({
-								alt: e.alt,
-								cheerAmount: e.cheerAmount,
-								cheerColor: e.cheerColor,
-								images: e.images,
-							})
+									alt: e.alt,
+									cheerAmount: e.cheerAmount,
+									cheerColor: e.cheerColor,
+									images: e.images,
+							  })
 							: convertTwitchEmote({
-								id: e.emoteID,
-								token: e.alt,
-							} as Partial<Twitch.TwitchEmote>),
+									id: e.emoteID,
+									token: e.alt,
+							  } as Partial<Twitch.TwitchEmote>),
 					};
 					break;
 				}
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index 20cfe7221..6381da193 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -1,9 +1,13 @@
 <template>
 	<template v-for="(inst, i) of chatController.instances" :key="inst.identifier">
-		<ChatController v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
-			:list="chatList.instances[0] ?? undefined" :controller="chatController.instances[i]"
-			:room="chatRoom.instances[0] ?? undefined" :buffer="chatBuffer.instances[0] ?? undefined"
-			:events="chatEvents.instances[0] ?? undefined" />
+		<ChatController
+			v-if="dependenciesMet && isHookableDbc && shouldMount.get(inst)"
+			:list="chatList.instances[0] ?? undefined"
+			:controller="chatController.instances[i]"
+			:room="chatRoom.instances[0] ?? undefined"
+			:buffer="chatBuffer.instances[0] ?? undefined"
+			:events="chatEvents.instances[0] ?? undefined"
+		/>
 	</template>
 </template>
 

From 5df40d2151689ce61de3a23a46ad40d4c2fae1b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Sat, 22 Apr 2023 14:31:08 +0300
Subject: [PATCH 19/20] feat/block-chat-phrases: fix types

---
 src/composable/chat/useChatHighlights.ts              | 6 +++++-
 src/site/global/settings/SettingsConfigHighlights.vue | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index 879301f8c..7410b6fb8 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -139,7 +139,11 @@ export function useChatHighlights(ctx: ChannelContext, useIgnores?: boolean) {
 		}
 	}, 250);
 
-	function define(id: string, def: Omit<HighlightType, "id">, persist?: boolean): HighlightType {
+	function define(
+		id: string,
+		def: Omit<HighlightDef, "id"> | Omit<IgnoreDef, "id">,
+		persist?: boolean,
+	): HighlightType {
 		if (!data) return {} as HighlightType;
 
 		const h: HighlightType = (storeType[id] = { ...def, id, persist });
diff --git a/src/site/global/settings/SettingsConfigHighlights.vue b/src/site/global/settings/SettingsConfigHighlights.vue
index 60fbd5b6f..e974fe958 100644
--- a/src/site/global/settings/SettingsConfigHighlights.vue
+++ b/src/site/global/settings/SettingsConfigHighlights.vue
@@ -167,7 +167,7 @@ function onFlashTitleChange(h: HighlightDef, checked: boolean): void {
 	highlights.save();
 }
 
-function onRegExpStateChange(h: HighlightDef, checked: boolean): void {
+function onRegExpStateChange(h: HighlightType, checked: boolean): void {
 	h.regexp = checked;
 	highlights.save();
 }

From fc39a41f564604d9d50a1c91e8c5061bcd4b96ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Bergh=C3=A4ll?= <daniel.berghall@gmail.com>
Date: Mon, 24 Apr 2023 17:43:07 +0300
Subject: [PATCH 20/20] feat/block-chat-phrases: Update CHANGELOG

---
 CHANGELOG-nightly.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index d76971cff..cf9568119 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -4,12 +4,12 @@
 
 -   Added a tooltip to show the full message when hovering over replies in chat
 -   Fixed tooltips of nametag paints appearing even if they are disabled
+-   Added an option to ignore messages in chat settings
 
 ### Version 3.0.6.1000
 
 -   Links in chat messages now respect known TLDs instead of matching any url-like pattern
 -   Added an option to show timeouts/bans directly in the chat without being a moderator
--   Added an option to ignore messages in chat settings
 -   Added options to change what emotes are displayed in the colon list and tab-completion carousel
 -   Added an option to show the text bit for BTTV and FFZ emote modifiers
 -   Added an option to hide monitored suspicious user highlights