From 09e92773945a41761afe7ea0b7b7154d57a5b25c Mon Sep 17 00:00:00 2001
From: pimothyxd <29018740+pimothyxd@users.noreply.github.com>
Date: Tue, 23 Dec 2025 22:14:57 +0100
Subject: [PATCH 1/7] feat(twitch/chat): add mod action reasons

---
 .../settings/SettingsConfigActionReasons.vue  | 186 ++++++++++++++++++
 src/common/Constant.ts                        |   1 +
 src/composable/chat/useChatProperties.ts      |   2 +
 src/composable/useCosmetics.ts                |   4 +-
 src/site/global/components/FormInput.vue      |   1 +
 .../twitch.tv/modules/chat/ChatController.vue |   1 +
 .../twitch.tv/modules/chat/ChatModule.vue     |  63 ++++++
 .../chat/components/mod/ModActionReasons.vue  | 106 ++++++++++
 .../modules/chat/components/mod/ModIcons.vue  |  84 +++++++-
 .../modules/custom-commands/Commands/Nuke.vue |   3 +-
 10 files changed, 445 insertions(+), 6 deletions(-)
 create mode 100644 src/app/settings/SettingsConfigActionReasons.vue
 create mode 100644 src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue

diff --git a/src/app/settings/SettingsConfigActionReasons.vue b/src/app/settings/SettingsConfigActionReasons.vue
new file mode 100644
index 00000000..38b4d344
--- /dev/null
+++ b/src/app/settings/SettingsConfigActionReasons.vue
@@ -0,0 +1,186 @@
+<template>
+	<main class="seventv-settings-action-reasons">
+		<div class="create-new">
+			<FormInput label="New Reason..." :onkeydown="onNewReason" />
+		</div>
+
+		<UiScrollable>
+			<div class="seventv-settings-action-reason-item" v-for="(reason, index) in reasons">
+				<div class="controls">
+					<div class="control" @click="onReasonMove(index, 'up')">
+						<ArrowIcon for="exit-icon" direction="up" />
+					</div>
+					<div class="control" @click="onReasonMove(index, 'down')">
+						<ArrowIcon for="exit-icon" direction="down" />
+					</div>
+				</div>
+				<div class="content">
+					<div class="use-virtual-input" tabindex="0" @click="onInputFocus(index)">
+						<span>{{ reason }}</span>
+						<FormInput
+							@blur="onInputBlur(index)"
+							:model-value="reason"
+							:ref="(n) => virtualInputs.set(index, n as InstanceType<typeof FormInput>)"
+						/>
+					</div>
+					<div v-tooltip="'Remove'" class="control" @click="onReasonRemove(index)">
+						<CloseIcon tabindex="0" />
+					</div>
+				</div>
+			</div>
+		</UiScrollable>
+	</main>
+</template>
+
+<script setup lang="ts">
+import { clamp } from "@vueuse/core";
+import { useConfig } from "@/composable/useSettings";
+import FormInput from "@/site/global/components/FormInput.vue";
+import ArrowIcon from "@/assets/svg/icons/ArrowIcon.vue";
+import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
+import UiScrollable from "@/ui/UiScrollable.vue";
+
+const reasons = useConfig<string[]>("chat.mod_action_reasons.list");
+
+const virtualInputs = new Map<number, InstanceType<typeof FormInput>>();
+
+function onNewReason(event: KeyboardEvent) {
+	if (event.target instanceof HTMLInputElement === false) return;
+	if (event.target.value.length === 0) return;
+
+	if (event.key !== "Enter") return;
+
+	reasons.value = [...reasons.value, event.target.value];
+	event.target.value = "";
+}
+
+function onReasonRemove(index: number) {
+	reasons.value.splice(index, 1);
+	reasons.value = [...reasons.value];
+}
+
+function onReasonMove(index: number, direction: "up" | "down") {
+	const newIndex = clamp(direction === "up" ? index - 1 : index + 1, 0, reasons.value.length);
+
+	const [reason] = reasons.value.splice(index, 1);
+	reasons.value.splice(newIndex, 0, reason);
+	reasons.value = [...reasons.value];
+}
+
+function onInputFocus(index: number) {
+	const input = virtualInputs.get(index);
+
+	input?.focus();
+}
+
+function onInputBlur(index: number) {
+	const input = virtualInputs.get(index);
+
+	if (!input) return;
+
+	const value = input.value();
+
+	// if the input is now empty, we shall delete the reason
+	if (!value || value.length === 0) {
+		reasons.value.splice(index, 1);
+	} else {
+		reasons.value.splice(index, 1, value);
+	}
+
+	reasons.value = [...reasons.value];
+}
+</script>
+
+<style scoped lang="scss">
+.seventv-settings-action-reasons {
+	display: grid;
+	grid-template-rows: min-content 1fr;
+	max-height: 35vh;
+	gap: 1rem;
+
+	.create-new {
+		display: flex;
+		flex-direction: row;
+
+		input {
+			width: 100%;
+		}
+	}
+}
+
+.control {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 3rem;
+	height: 3rem;
+
+	&:hover {
+		background: hsla(0deg, 0%, 30%, 32%);
+		border-radius: 0.25rem;
+		cursor: pointer;
+	}
+}
+
+.seventv-settings-action-reason-item {
+	display: flex;
+	flex-direction: row;
+	padding: 0.5rem;
+	width: 100%;
+	align-items: center;
+	gap: 1rem;
+
+	&:hover,
+	&:focus-within {
+		background-color: #3333;
+	}
+
+	&:nth-child(odd) {
+		background-color: var(--seventv-background-shade-2);
+	}
+
+	.controls {
+		display: flex;
+		justify-content: center;
+		color: var(--seventv-input-border);
+	}
+
+	.content {
+		display: grid;
+		grid-template-columns: 1fr min-content;
+		align-items: center;
+		width: 100%;
+		gap: 1rem;
+		height: 3.5rem;
+	}
+
+	.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;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/common/Constant.ts b/src/common/Constant.ts
index be82e12e..c039fd2d 100644
--- a/src/common/Constant.ts
+++ b/src/common/Constant.ts
@@ -21,6 +21,7 @@ export const UNICODE_TAG_0 = "\u{34f}";
 export const UNICODE_TAG_0_REGEX = new RegExp(UNICODE_TAG_0, "g");
 
 export const TWITCH_PROFILE_IMAGE_REGEX = /(\d+x\d+)(?=\.\w{3,4}$)/;
+export const TWITCH_TIMEOUT_REGEX = new RegExp("^[0-9]+[dhms]$", "i");
 
 export const HOSTNAME_SUPPORTED_REGEXP = /([a-z0-9]+[.])*(youtube|kick)[.]com/;
 export const SEVENTV_EMOTE_LINK = new RegExp(
diff --git a/src/composable/chat/useChatProperties.ts b/src/composable/chat/useChatProperties.ts
index a0f7f0c6..0b0bc217 100644
--- a/src/composable/chat/useChatProperties.ts
+++ b/src/composable/chat/useChatProperties.ts
@@ -14,6 +14,7 @@ interface ChatProperties {
 	imageFormat: SevenTV.ImageFormat;
 	twitchBadgeSets: Twitch.BadgeSets | null;
 	blockedUsers: Set<string>;
+	chatRules: string[];
 }
 
 type ChatPauseReason = "MOUSEOVER" | "SCROLL" | "ALTKEY";
@@ -36,6 +37,7 @@ export function useChatProperties(ctx: ChannelContext) {
 			twitchBadgeSets: {} as Twitch.BadgeSets | null,
 			blockedUsers: new Set<string>(),
 			fontAprilFools: "unset",
+			chatRules: [],
 		});
 
 		m.set(ctx, data);
diff --git a/src/composable/useCosmetics.ts b/src/composable/useCosmetics.ts
index 92027df7..e55473ef 100644
--- a/src/composable/useCosmetics.ts
+++ b/src/composable/useCosmetics.ts
@@ -324,12 +324,12 @@ db.ready().then(async () => {
 						break;
 				}
 
-				log.debug("<Cosmetics>", "Assigned", ents.length.toString(), "stored entitlements");
-
 				if (assigned) {
 					data.staticallyAssigned[ent.user_id] = {};
 				}
 			}
+
+			log.debug("<Cosmetics>", "Assigned", ents.length.toString(), "stored entitlements");
 		})
 		.then(flush);
 });
diff --git a/src/site/global/components/FormInput.vue b/src/site/global/components/FormInput.vue
index 4215c3f0..282e7a74 100644
--- a/src/site/global/components/FormInput.vue
+++ b/src/site/global/components/FormInput.vue
@@ -44,6 +44,7 @@ const inputEl = ref<HTMLInputElement | null>(null);
 
 defineExpose({
 	focus: () => inputEl.value?.focus(),
+	value: () => inputEl.value?.value,
 });
 
 onMounted(() => {
diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue
index 90b7c204..fd7cf5b3 100644
--- a/src/site/twitch.tv/modules/chat/ChatController.vue
+++ b/src/site/twitch.tv/modules/chat/ChatController.vue
@@ -241,6 +241,7 @@ definePropertyHook(controller.value.component, "props", {
 
 		// Keep track of chat props
 		properties.isDarkTheme = v.theme;
+		properties.chatRules = v.chatRules ?? [];
 
 		// Send presence upon message sent
 		messages.sendMessage = v.chatConnectionAPI.sendMessage;
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index 87d9606c..113e7c97 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -128,8 +128,10 @@ defineExpose({
 </script>
 
 <script lang="ts">
+import { TWITCH_TIMEOUT_REGEX } from "@/common/Constant";
 import { HighlightDef } from "@/composable/chat/useChatHighlights";
 import { declareConfig, useConfig } from "@/composable/useSettings";
+import SettingsConfigActionReasons from "@/app/settings/SettingsConfigActionReasons.vue";
 import SettingsConfigHighlights from "@/app/settings/SettingsConfigHighlights.vue";
 
 export type TimestampFormatKey = "infer" | "12" | "24";
@@ -167,6 +169,61 @@ export const config = [
 		hint: "If enabled, messages will be kept intact when a moderator clears the chat",
 		defaultValue: true,
 	}),
+	declareConfig("chat.mod_action_reasons", "TOGGLE", {
+		path: ["Chat", "Moderation", 100],
+		label: "Show Moderation Action Reasons",
+		hint: "Show a list of reasons when clicking on an action button",
+		defaultValue: true,
+	}),
+	declareConfig("chat.mod_action_reasons.list", "CUSTOM", {
+		path: ["Chat", "Moderation", 101],
+		custom: {
+			component: markRaw(SettingsConfigActionReasons),
+			gridMode: "new-row",
+		},
+		label: "Custom Action Reasons",
+		hint: "A list of custom action reasons",
+		defaultValue: [],
+		disabledIf: () => !useConfig("chat.mod_action_reasons").value,
+	}),
+	declareConfig("chat.mod_action_reasons.include_rules", "TOGGLE", {
+		path: ["Chat", "Moderation", 102],
+		label: "Include Chat Rules",
+		hint: "Add current channel's chat rules to the list of reasons",
+		defaultValue: true,
+		disabledIf: () => !useConfig("chat.mod_action_reasons").value,
+	}),
+	declareConfig("chat.mod_action_reasons.ban", "DROPDOWN", {
+		path: ["Chat", "Moderation", 104],
+		label: "Moderation Action for Ban",
+		hint: "Which button is used to show mod action reasons for ban",
+		options: [
+			["Off", 0],
+			["Left-Click", 1],
+			["Right-Click", 2],
+		],
+		defaultValue: 2,
+		disabledIf: () => !useConfig("chat.mod_action_reasons").value,
+	}),
+	declareConfig("chat.mod_action_reasons.timeout", "DROPDOWN", {
+		path: ["Chat", "Moderation", 105],
+		label: "Moderation Action for Timeout",
+		hint: "Which button is used to show mod action reasons for timeout",
+		options: [
+			["Off", 0],
+			["Left-Click", 1],
+			["Right-Click", 2],
+		],
+		defaultValue: 2,
+		disabledIf: () => !useConfig("chat.mod_action_reasons").value,
+	}),
+	declareConfig("chat.mod_action.timeout_duration", "INPUT", {
+		path: ["Chat", "Moderation", 106],
+		label: "Moderation Action Timeout Duration",
+		hint: "The default amount of time someone is timed out for (min. 1s, max. 14d)",
+		defaultValue: "600s",
+		predicate: (v) => TWITCH_TIMEOUT_REGEX.test(v),
+	}),
 	declareConfig("chat.slash_me_style", "DROPDOWN", {
 		path: ["Chat", "Style"],
 		label: "/me Style",
@@ -354,6 +411,12 @@ export const config = [
 		hint: "Show a 'Copy' icon when hovering over a chat message to copy the message",
 		defaultValue: true,
 	}),
+	declareConfig("chat.pin_prompt_toggle", "TOGGLE", {
+		path: ["Chat", "Tools"],
+		label: "Pin Prompt",
+		hint: "Show a pin confirmation prompt prior to pinning a message",
+		defaultValue: true,
+	}),
 	declareConfig<boolean>("highlights.basic.mention", "TOGGLE", {
 		path: ["Highlights", "Built-In"],
 		label: "Show Mention Highlights",
diff --git a/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue b/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
new file mode 100644
index 00000000..36562367
--- /dev/null
+++ b/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
@@ -0,0 +1,106 @@
+<template>
+	<span class="seventv-chat-mod-action-reasons">
+		<span v-if="action === 'ban' || !duration" class="title"
+			>{{ action }} {{ msg.author?.displayName ?? "???" }} for:</span
+		>
+		<span v-else-if="action === 'timeout'" class="title"
+			>{{ action }} {{ msg.author?.displayName ?? "???" }} for {{ duration }} for:</span
+		>
+
+		<UiScrollable>
+			<span
+				class="reason"
+				v-for="(reason, index) of reasons.length === 0 ? defaultReasons : reasons"
+				:key="index"
+				v-on:click="emit('select', action, reason, duration)"
+			>
+				{{ reason }}
+			</span>
+
+			<template v-if="showChatRules && properties.chatRules.length > 0">
+				<hr />
+				<span
+					class="reason"
+					v-for="(reason, index) of properties.chatRules"
+					:key="index"
+					v-on:click="emit('select', action, reason, duration)"
+				>
+					{{ reason }}
+				</span>
+			</template>
+		</UiScrollable>
+	</span>
+</template>
+
+<script setup lang="ts">
+import type { ChatMessage } from "@/common/chat/ChatMessage";
+import { useChannelContext } from "@/composable/channel/useChannelContext";
+import { useChatProperties } from "@/composable/chat/useChatProperties";
+import { useConfig } from "@/composable/useSettings";
+import UiScrollable from "@/ui/UiScrollable.vue";
+
+const props = defineProps<{
+	action: "timeout" | "ban";
+	msg: ChatMessage;
+	duration?: string;
+	showChatRules?: boolean;
+}>();
+
+const ctx = useChannelContext();
+const properties = useChatProperties(ctx);
+
+const emit = defineEmits<{
+	(event: "select", action: "timeout" | "ban", reason: string, duration?: string): void;
+}>();
+
+const reasons = useConfig<string[]>("chat.mod_action_reasons.list");
+
+const defaultReasons: string[] = [
+	"Spamming",
+	"Harassment",
+	"Ban Evasion",
+	"Impersonation",
+	"Botted / Automated Account",
+	"Self-promotion",
+];
+</script>
+
+<style scoped lang="scss">
+.seventv-chat-mod-action-reasons {
+	display: grid;
+	grid-template-rows: min-content 1fr;
+	max-height: 45vh;
+	border-radius: 0.33rem;
+	background-color: var(--seventv-background-transparent-3);
+	outline: 0.1em solid var(--seventv-border-transparent-1);
+
+	@at-root .seventv-transparent & {
+		backdrop-filter: blur(0.5em);
+	}
+
+	.title {
+		&::first-letter {
+			text-transform: capitalize;
+		}
+
+		border-bottom: 0.1em solid var(--seventv-border-transparent-1);
+		padding: 0.5em;
+	}
+
+	.reason {
+		display: block;
+		padding: 0.3em 0.5em;
+
+		&:hover {
+			background: hsla(0deg, 0%, 90%, 15%);
+			cursor: pointer;
+		}
+	}
+
+	hr {
+		height: 0.05em;
+		background: var(--seventv-border-transparent-1);
+		border: none;
+	}
+}
+</style>
diff --git a/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue b/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
index f716b4f9..61da149c 100644
--- a/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
+++ b/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
@@ -1,9 +1,10 @@
 <template>
-	<span class="seventv-chat-mod-buttons">
+	<span ref="buttonsRef" class="seventv-chat-mod-buttons">
 		<span
 			v-if="msg.author && !msg.author.isActor"
 			ref="banRef"
-			@click="banUserFromChat(null)"
+			@click="onMouseClick('ban', $event)"
+			@contextmenu="onMouseClick('ban', $event)"
 			@mouseenter="banTooltip.show(banRef)"
 			@mouseleave="banTooltip.hide()"
 		>
@@ -13,7 +14,8 @@
 		<span
 			v-if="msg.author && !msg.author.isActor"
 			ref="timeoutRef"
-			@click="banUserFromChat('10m')"
+			@click="onMouseClick('timeout', $event)"
+			@contextmenu="onMouseClick('timeout', $event)"
 			@mouseenter="timeoutTooltip.show(timeoutRef)"
 			@mouseleave="timeoutTooltip.hide()"
 		>
@@ -39,19 +41,47 @@
 			<TwChatModDelete />
 		</span>
 	</span>
+	<template v-if="modActionType">
+		<Teleport to="#seventv-float-context">
+			<UiFloating
+				class="seventv-mod-action-reasons-float"
+				:anchor="buttonsRef"
+				:middleware="[
+					offset({ mainAxis: 10 }),
+					autoPlacement({ allowedPlacements: ['top-start', 'bottom-start'] }),
+				]"
+				:emit-clickout="true"
+				:once="true"
+				@clickout="modActionType = null"
+			>
+				<ModActionReasons
+					:msg="msg"
+					:action="modActionType"
+					:duration="defaultTimeoutDuration"
+					:show-chat-rules="includeChatRules"
+					v-on:select="onActionSelect"
+				/>
+			</UiFloating>
+		</Teleport>
+	</template>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { log } from "@/common/Logger";
 import type { ChatMessage } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatModeration } from "@/composable/chat/useChatModeration";
 import { useChatTools } from "@/composable/chat/useChatTools";
+import { useConfig } from "@/composable/useSettings";
 import { useTooltip } from "@/composable/useTooltip";
 import TwChatModBan from "@/assets/svg/twitch/TwChatModBan.vue";
 import TwChatModDelete from "@/assets/svg/twitch/TwChatModDelete.vue";
 import TwChatModTimeout from "@/assets/svg/twitch/TwChatModTimeout.vue";
 import TwChatModWarn from "@/assets/svg/twitch/TwChatModWarn.vue";
+import ModActionReasons from "./ModActionReasons.vue";
+import UiFloating from "@/ui/UiFloating.vue";
+import { autoPlacement, offset } from "@floating-ui/dom";
 
 const props = defineProps<{
 	msg: ChatMessage;
@@ -61,6 +91,54 @@ const ctx = useChannelContext();
 const tools = useChatTools(ctx);
 const { banUserFromChat, deleteChatMessage } = useChatModeration(ctx, props.msg.author?.username ?? "");
 
+const buttonsRef = ref<HTMLSpanElement>();
+const modActionType = ref<"timeout" | "ban" | null>(null);
+
+const showReasons = useConfig<boolean>("chat.mod_action_reasons");
+const includeChatRules = useConfig<boolean>("chat.mod_action_reasons.include_rules");
+
+const defaultTimeoutDuration = useConfig<string>("chat.mod_action.timeout_duration");
+
+const modActionBan = useConfig<0 | 1 | 2>("chat.mod_action_reasons.ban");
+const modActionTimeout = useConfig<0 | 1 | 2>("chat.mod_action_reasons.timeout");
+
+function onMouseClick(action: "ban" | "timeout", event: MouseEvent) {
+	const setting = action === "ban" ? modActionBan : modActionTimeout;
+	const isSettingButton = (event.button === 0 && setting.value === 1) || (event.button === 2 && setting.value === 2);
+
+	if (!showReasons.value) {
+		if (event.button === 0) onActionSelect(action);
+		return;
+	}
+
+	// if the setting of the button that is left-clicked was not set to 'left-click'
+	if (event.button === 0 && setting.value !== 1) {
+		onActionSelect(action);
+		return;
+	}
+
+	if (isSettingButton) {
+		modActionType.value = action;
+
+		event.preventDefault();
+	}
+}
+
+function onActionSelect(action: "timeout" | "ban", reason?: string, duration: string = defaultTimeoutDuration.value) {
+	switch (action) {
+		case "ban": {
+			banUserFromChat(null, reason).catch((err) => log.error("failed to ban user", err));
+			break;
+		}
+		case "timeout": {
+			banUserFromChat(duration, reason).catch((err) => log.error("failed to timeout user", err));
+			break;
+		}
+	}
+
+	modActionType.value = null;
+}
+
 function showWarnPopover() {
 	if (!props.msg.author) return;
 	tools.openViewerWarnPopover(props.msg.author.id, props.msg.author.username, 0);
diff --git a/src/site/twitch.tv/modules/custom-commands/Commands/Nuke.vue b/src/site/twitch.tv/modules/custom-commands/Commands/Nuke.vue
index 4e704472..7e6d082d 100644
--- a/src/site/twitch.tv/modules/custom-commands/Commands/Nuke.vue
+++ b/src/site/twitch.tv/modules/custom-commands/Commands/Nuke.vue
@@ -2,6 +2,7 @@
 <script setup lang="ts">
 import { onUnmounted, watch } from "vue";
 import { useIntervalFn } from "@vueuse/core";
+import { TWITCH_TIMEOUT_REGEX } from "@/common/Constant";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
 import { declareConfig, useConfig, useSettings } from "@/composable/useSettings";
@@ -309,7 +310,7 @@ const re = {
 		"^(?<pattern>(\\/.+\\/|.+?))(((\\s(?<action>(delete|ban|[0-9]+[dhms])))( (?<before>[0-9]+[dhms]))?(:(?<after>([0-9]+[dhms])))?)( (?<reason>.+?))?)?\\s?$",
 		"i",
 	),
-	duration: new RegExp("^[0-9]+[dhms]$", "i"),
+	duration: TWITCH_TIMEOUT_REGEX,
 };
 
 interface NukeArgs {

From 222c76638a6ba40c8bf6c284fdb35102a53ce60a Mon Sep 17 00:00:00 2001
From: pimothyxd <29018740+pimothyxd@users.noreply.github.com>
Date: Tue, 23 Dec 2025 22:15:10 +0100
Subject: [PATCH 2/7] chore: update changelog

---
 CHANGELOG-nightly.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index 5e304946..44237f69 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -1,3 +1,9 @@
+### 3.1.15.2000
+
+-   Added custom moderation action reasons
+-   Added an option to select the default timeout duration
+-   Added an option to hide the pin confirmation prompt
+
 ### 3.1.15.1000
 
 -   Added required Firefox built-in consent metadata to the manifest

From 6e0ca913f651644cc4131b2fa71499626fc1b436 Mon Sep 17 00:00:00 2001
From: pimothyxd <29018740+pimothyxd@users.noreply.github.com>
Date: Tue, 23 Dec 2025 22:15:38 +0100
Subject: [PATCH 3/7] feat(twitch/chat): add option to hide pin confirmation
 prompt

---
 src/app/chat/UserMessageButtons.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/chat/UserMessageButtons.vue b/src/app/chat/UserMessageButtons.vue
index dc5c07ad..238e43ff 100644
--- a/src/app/chat/UserMessageButtons.vue
+++ b/src/app/chat/UserMessageButtons.vue
@@ -14,11 +14,11 @@
 			ref="pinButtonRef"
 			v-tooltip="'Pin'"
 			class="seventv-button"
-			@click="pinPrompt = true"
+			@click="onPinPrompt"
 		>
 			<PinIcon />
 		</div>
-		<div v-tooltip="'Reply'" class="seventv-button" @click="openReplyTray">
+		<div v-if="!msg.moderation.deleted" v-tooltip="'Reply'" class="seventv-button" @click="openReplyTray">
 			<component :is="msg.parent ? TwChatReply : ReplyIcon" />
 		</div>
 	</div>
@@ -95,7 +95,9 @@ const tray = useTray("Reply", () => ({
 		: {}),
 }));
 
+const showPinPrompt = useConfig<boolean>("chat.pin_prompt_toggle");
 const showCopyIcon = useConfig<boolean>("chat.copy_icon_toggle");
+
 const copyToastOpen = ref(false);
 const copyButtonRef = ref<HTMLElement>();
 const copyToastContainer = useFloatScreen(copyButtonRef, {
@@ -125,6 +127,14 @@ function openReplyTray(): void {
 	tray.open();
 }
 
+function onPinPrompt(): void {
+	if (showPinPrompt.value) {
+		pinPrompt.value = true;
+	} else {
+		emit("pin");
+	}
+}
+
 function onPinAnswer(answer: string): void {
 	if (answer !== "yes") return;
 

From cb90bde27ef2475ad571d21c5124f222174489b7 Mon Sep 17 00:00:00 2001
From: pimothyxd <29018740+pimothyxd@users.noreply.github.com>
Date: Tue, 23 Dec 2025 22:25:53 +0100
Subject: [PATCH 4/7] chore: fix lint issues

---
 src/app/settings/SettingsConfigActionReasons.vue       |  4 ++--
 .../modules/chat/components/mod/ModActionReasons.vue   | 10 +++++-----
 .../twitch.tv/modules/chat/components/mod/ModIcons.vue |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/settings/SettingsConfigActionReasons.vue b/src/app/settings/SettingsConfigActionReasons.vue
index 38b4d344..573a6598 100644
--- a/src/app/settings/SettingsConfigActionReasons.vue
+++ b/src/app/settings/SettingsConfigActionReasons.vue
@@ -5,7 +5,7 @@
 		</div>
 
 		<UiScrollable>
-			<div class="seventv-settings-action-reason-item" v-for="(reason, index) in reasons">
+			<div v-for="(reason, index) in reasons" :key="index" class="seventv-settings-action-reason-item">
 				<div class="controls">
 					<div class="control" @click="onReasonMove(index, 'up')">
 						<ArrowIcon for="exit-icon" direction="up" />
@@ -18,9 +18,9 @@
 					<div class="use-virtual-input" tabindex="0" @click="onInputFocus(index)">
 						<span>{{ reason }}</span>
 						<FormInput
-							@blur="onInputBlur(index)"
 							:model-value="reason"
 							:ref="(n) => virtualInputs.set(index, n as InstanceType<typeof FormInput>)"
+							@blur="onInputBlur(index)"
 						/>
 					</div>
 					<div v-tooltip="'Remove'" class="control" @click="onReasonRemove(index)">
diff --git a/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue b/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
index 36562367..3a98a677 100644
--- a/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
+++ b/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
@@ -9,10 +9,10 @@
 
 		<UiScrollable>
 			<span
-				class="reason"
 				v-for="(reason, index) of reasons.length === 0 ? defaultReasons : reasons"
+				class="reason"
 				:key="index"
-				v-on:click="emit('select', action, reason, duration)"
+				@on:click="emit('select', action, reason, duration)"
 			>
 				{{ reason }}
 			</span>
@@ -20,10 +20,10 @@
 			<template v-if="showChatRules && properties.chatRules.length > 0">
 				<hr />
 				<span
-					class="reason"
 					v-for="(reason, index) of properties.chatRules"
+					class="reason"
 					:key="index"
-					v-on:click="emit('select', action, reason, duration)"
+					@on:click="emit('select', action, reason, duration)"
 				>
 					{{ reason }}
 				</span>
@@ -39,7 +39,7 @@ import { useChatProperties } from "@/composable/chat/useChatProperties";
 import { useConfig } from "@/composable/useSettings";
 import UiScrollable from "@/ui/UiScrollable.vue";
 
-const props = defineProps<{
+defineProps<{
 	action: "timeout" | "ban";
 	msg: ChatMessage;
 	duration?: string;
diff --git a/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue b/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
index 61da149c..5ce0d49a 100644
--- a/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
+++ b/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
@@ -59,7 +59,7 @@
 					:action="modActionType"
 					:duration="defaultTimeoutDuration"
 					:show-chat-rules="includeChatRules"
-					v-on:select="onActionSelect"
+					@on:select="onActionSelect"
 				/>
 			</UiFloating>
 		</Teleport>

From f8abc27d31ee91e7526fd40d96461e8cd9d87701 Mon Sep 17 00:00:00 2001
From: pimothyxd <29018740+pimothyxd@users.noreply.github.com>
Date: Tue, 23 Dec 2025 22:28:27 +0100
Subject: [PATCH 5/7] chore: fix lint issues

---
 src/app/settings/SettingsConfigActionReasons.vue              | 2 +-
 .../modules/chat/components/mod/ModActionReasons.vue          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/settings/SettingsConfigActionReasons.vue b/src/app/settings/SettingsConfigActionReasons.vue
index 573a6598..4d65666d 100644
--- a/src/app/settings/SettingsConfigActionReasons.vue
+++ b/src/app/settings/SettingsConfigActionReasons.vue
@@ -18,8 +18,8 @@
 					<div class="use-virtual-input" tabindex="0" @click="onInputFocus(index)">
 						<span>{{ reason }}</span>
 						<FormInput
-							:model-value="reason"
 							:ref="(n) => virtualInputs.set(index, n as InstanceType<typeof FormInput>)"
+							:model-value="reason"
 							@blur="onInputBlur(index)"
 						/>
 					</div>
diff --git a/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue b/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
index 3a98a677..99139d12 100644
--- a/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
+++ b/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
@@ -10,8 +10,8 @@
 		<UiScrollable>
 			<span
 				v-for="(reason, index) of reasons.length === 0 ? defaultReasons : reasons"
-				class="reason"
 				:key="index"
+				class="reason"
 				@on:click="emit('select', action, reason, duration)"
 			>
 				{{ reason }}
@@ -21,8 +21,8 @@
 				<hr />
 				<span
 					v-for="(reason, index) of properties.chatRules"
-					class="reason"
 					:key="index"
+					class="reason"
 					@on:click="emit('select', action, reason, duration)"
 				>
 					{{ reason }}

From cb1ee37390130ec53b91b4ebbb82688abe6ce34b Mon Sep 17 00:00:00 2001
From: pimothyxd <29018740+pimothyxd@users.noreply.github.com>
Date: Wed, 24 Dec 2025 12:13:27 +0100
Subject: [PATCH 6/7] refactor: add max-width to action reasons float

---
 .../twitch.tv/modules/chat/components/mod/ModActionReasons.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue b/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
index 99139d12..0100ceae 100644
--- a/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
+++ b/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
@@ -70,6 +70,7 @@ const defaultReasons: string[] = [
 	display: grid;
 	grid-template-rows: min-content 1fr;
 	max-height: 45vh;
+	max-width: 35rem;
 	border-radius: 0.33rem;
 	background-color: var(--seventv-background-transparent-3);
 	outline: 0.1em solid var(--seventv-border-transparent-1);

From 76a93264c1bc0c1409ef17578bbcdcb65ccc7077 Mon Sep 17 00:00:00 2001
From: pimothyxd <29018740+pimothyxd@users.noreply.github.com>
Date: Mon, 26 Jan 2026 15:09:08 +0100
Subject: [PATCH 7/7] fix: vue event handlers

---
 .../modules/chat/components/mod/ModActionReasons.vue          | 4 ++--
 src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue b/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
index 0100ceae..0cd2a61f 100644
--- a/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
+++ b/src/site/twitch.tv/modules/chat/components/mod/ModActionReasons.vue
@@ -12,7 +12,7 @@
 				v-for="(reason, index) of reasons.length === 0 ? defaultReasons : reasons"
 				:key="index"
 				class="reason"
-				@on:click="emit('select', action, reason, duration)"
+				@click="emit('select', action, reason, duration)"
 			>
 				{{ reason }}
 			</span>
@@ -23,7 +23,7 @@
 					v-for="(reason, index) of properties.chatRules"
 					:key="index"
 					class="reason"
-					@on:click="emit('select', action, reason, duration)"
+					@click="emit('select', action, reason, duration)"
 				>
 					{{ reason }}
 				</span>
diff --git a/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue b/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
index 5ce0d49a..7a6b5c8c 100644
--- a/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
+++ b/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
@@ -59,7 +59,7 @@
 					:action="modActionType"
 					:duration="defaultTimeoutDuration"
 					:show-chat-rules="includeChatRules"
-					@on:select="onActionSelect"
+					@select="onActionSelect"
 				/>
 			</UiFloating>
 		</Teleport>