Fix: fixed mentions not being clickable when colored mentions are tur…

…ned off (#1088)
SevenTV · Oct 2, 2024 · 9538e2c · 9538e2c
1 parent d0b2e0a
commit 9538e2c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 20 deletions.
diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
@@ -3,6 +3,7 @@
 -   Fixed some settings on kick
 -   Added more drop shadow settings
 -   Added link to creators 7TV profile to emote cards of 7TV emotes
+-   Fixed mentions not being clickable when colred mentions are turned off
 
 ### 3.1.2.1000
 

diff --git a/src/app/chat/MessageTokenMention.vue b/src/app/chat/MessageTokenMention.vue
@@ -1,22 +1,18 @@
 <template>
 	<span class="mention-token">
-		<span v-if="shouldRenderColoredMentions" :style="{ color: token.content.user?.color }">
-			<UserTag
-				:user="
-					token.content.user ?? {
-						id: uuid(),
-						username: tag.toLowerCase(),
-						displayName: tag,
-						color: '',
-					}
-				"
-				:as-mention="asMention"
-				:hide-badges="true"
-			/>
-		</span>
-		<span v-else>
-			{{ token.content.displayText }}
-		</span>
+		<UserTag
+			:user="
+				token.content.user ?? {
+					id: uuid(),
+					username: tag.toLowerCase(),
+					displayName: tag,
+					color: '',
+				}
+			"
+			:as-mention="asMention"
+			:hide-badges="true"
+			:style="shouldRenderColoredMentions ? { color: token.content.user?.color } : null"
+		/>
 	</span>
 </template>
 
@@ -31,7 +27,7 @@ const props = defineProps<{
 	msg?: ChatMessage;
 }>();
 
-const shouldRenderColoredMentions = useConfig("chat.colored_mentions");
+const shouldRenderColoredMentions = useConfig<boolean>("chat.colored_mentions");
 
 const asMention = props.token.content.displayText.charAt(0) === "@";
 const tag = asMention ? props.token.content.displayText.slice(1) : props.token.content.displayText;

diff --git a/src/app/chat/UserTag.vue b/src/app/chat/UserTag.vue
@@ -35,11 +35,17 @@
 
 		<!-- Message Author -->
 		<span
-			v-tooltip="paint && paint.data ? `Paint: ${paint.data.name}` : ''"
+			v-tooltip="
+				paint && paint.data && !(asMention && !shouldRenderColoredMentions) ? `Paint: ${paint.data.name}` : ''
+			"
 			class="seventv-chat-user-username"
 			@click="handleClick($event)"
 		>
-			<span v-cosmetic-paint="shouldRenderPaint && paint ? paint.id : null">
+			<span
+				v-cosmetic-paint="
+					shouldRenderPaint && !(asMention && !shouldRenderColoredMentions) && paint ? paint.id : null
+				"
+			>
 				<span v-if="asMention">@</span>
 				<span>{{ user.displayName }}</span>
 				<span v-if="user.intl"> ({{ user.username }})</span>
@@ -101,6 +107,7 @@ const shouldRender7tvBadges = useConfig("vanity.7tv_Badges");
 const betterUserCardEnabled = useConfig("chat.user_card");
 const twitchBadges = ref<Twitch.ChatBadge[]>([]);
 const twitchBadgeSets = toRef(properties, "twitchBadgeSets");
+const shouldRenderColoredMentions = useConfig("chat.colored_mentions");
 
 const tagRef = ref<HTMLDivElement>();
 const showUserCard = ref(false);