feat/block-chat-phrases: Add blocked phrases feature

CHANGELOG-nightly.md

@@ -92,6 +92,7 @@
 -   Added icons for emoji sets in the Emote Menu
 -   Added an option to choose chat timestamp format
 -   Fixed tooltips of nametag paints appearing even if they are disabled
+-   Added an option to ignore messages in chat settings
 -   Reinstated functionality on youtube.com
 
 ### Version 3.0.6.1000

src/app/settings/SettingsConfigHighlights.vue

@@ -5,10 +5,10 @@
 			<div class="item heading">
 				<div>Pattern</div>
 				<div>Label</div>
-				<div class="centered">Flash Title</div>
 				<div class="centered">RegExp</div>
 				<div>Case Sensitive</div>
-				<div>Color</div>
+				<div v-if="!useIgnores" class="centered">Flash Title</div>
+				<div v-if="!useIgnores">Color</div>
 			</div>
 
 			<UiScrollable>
@@ -34,11 +34,6 @@
 							/>
 						</div>
 
-						<!-- Checkbox: Flash Title -->
-						<div name="flash-title" class="centered">
-							<FormCheckbox :checked="!!h.flashTitle" @update:checked="onFlashTitleChange(h, $event)" />
-						</div>
-
 						<!-- Checkbox: RegExp -->
 						<div name="is-regexp" class="centered">
 							<FormCheckbox :checked="!!h.regexp" @update:checked="onRegExpStateChange(h, $event)" />
@@ -52,12 +47,27 @@
 							/>
 						</div>
 
+						<!-- Checkbox: Flash Title -->
+						<div name="flash-title" class="centered">
+							<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
+								v-if="!useIgnores && isHighlight(h)"
 								ref="soundEffectButton"
 								class="sound-button"
 								:class="{ 'has-sound': !!h.soundFile }"
@@ -96,7 +106,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 +116,13 @@
 <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,
+	HighlightType,
+	IgnoreDef,
+	isHighlight,
+	useChatHighlights,
+} from "@/composable/chat/useChatHighlights";
 import FormCheckbox from "@/site/global/components/FormCheckbox.vue";
 import FormInput from "@/site/global/components/FormInput.vue";
 import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
@@ -115,29 +131,33 @@ import UiFloating from "@/ui/UiFloating.vue";
 import UiScrollable from "@/ui/UiScrollable.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();
 }
 
@@ -147,12 +167,12 @@ 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();
 }
 
-function onCaseSensitiveChange(h: HighlightDef, checked: boolean): void {
+function onCaseSensitiveChange(h: HighlightType, checked: boolean): void {
 	h.caseSensitive = checked;
 	highlights.save();
 }
@@ -210,7 +230,7 @@ function onRemoveSound(h: HighlightDef): void {
 	highlights.save();
 }
 
-function onDeleteHighlight(h: HighlightDef): void {
+function onDeleteHighlight(h: HighlightType): void {
 	highlights.remove(h.id);
 	highlights.save();
 }
@@ -220,13 +240,18 @@ function onDeleteHighlight(h: HighlightDef): 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(
-		"new-highlight",
-		{
-			color: "#8803fc",
-			label: "",
-			pattern: val,
-		},
+		props.useIgnores ? "new-ignore" : "new-highlight",
+		props.useIgnores ? ignoreDef : highlightDef,
 		true,
 	);
 
@@ -265,7 +290,7 @@ 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;
 

src/app/settings/SettingsConfigIgnoresWrapper.vue

@@ -0,0 +1,7 @@
+<template>
+	<SettingsConfigHighlights :use-ignores="true" />
+</template>
+
+<script setup lang="ts">
+import SettingsConfigHighlights from "./SettingsConfigHighlights.vue";
+</script>