4.22.2

* Added: Option to display debugging information in chat when highlight filters are applied to a message.
* Changed: Treat a completely transparent highlight color as removing highlights from a message. This allows rules such as preventing messages from bots (Bot Badge) from being highlighted.
* Fixed: Detect an invalid IndexedDB database and recreate it when necessary.
* API Added: `applyHighlight(msg, priority, color, reason)` method for tokenizers.

src/std-components/color-picker.vue

@@ -31,7 +31,11 @@
 				<chrome-picker :disable-alpha="! alpha" :value="colors" @input="onPick" />
 			</div>
 		</div>
-		<div v-else class="tw-relative">
+		<div
+			v-else
+			:class="{'tw-tooltip__container': hasTooltip}"
+			class="tw-relative"
+		>
 			<button
 				class="tw-button tw-button--text ffz-color-preview"
 				@click="togglePicker"
@@ -51,6 +55,15 @@
 			>
 				<chrome-picker :disable-alpha="! alpha" :value="colors" @input="onPick" />
 			</div>
+			<div
+				v-if="! open && hasTooltip"
+				class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"
+			>
+				{{ tooltip }}
+				<div v-if="nullable" class="tw-regular">
+					{{ t('setting.color.nullable', 'Right-Click to Reset') }}
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
@@ -88,6 +101,10 @@ export default {
 			type: Boolean,
 			default: true
 		},
+		tooltip: {
+			type: String,
+			default: null
+		},
 		openUp: {
 			type: Boolean,
 			default: false
@@ -103,6 +120,10 @@ export default {
 	},
 
 	computed: {
+		hasTooltip() {
+			return this.tooltip?.length > 0 || this.nullable
+		},
+
 		colors() {
 			try {
 				return Color.RGBA.fromCSS(this.color || this.default)