Sidebar improvements

.env.dev

@@ -1,7 +1,7 @@
 NODE_ENV=development
-VITE_APP_SITE="http://localhost:4200"
-VITE_APP_API="http://localhost:3100/v3"
-VITE_APP_API_GQL="http://localhost:3000/v3/gql"
-VITE_APP_API_EVENTS="ws://localhost:3700/v3"
-VITE_APP_API_EGVAULT="http://localhost:3444/v1"
-VITE_APP_HOST="http://localhost:8080"
+VITE_APP_SITE="https://7tv.app"
+VITE_APP_API="https://7tv.io/v3"
+VITE_APP_API_GQL="https://7tv.io/v3/gql"
+VITE_APP_API_EVENTS="wss://events.7tv.io/v3"
+VITE_APP_API_EGVAULT="https://egvault.7tv.io/v1"
+VITE_APP_HOST="https://extension.7tv.gg"

.old.env.dev

@@ -0,0 +1,7 @@
+NODE_ENV=development
+VITE_APP_SITE="http://localhost:4200"
+VITE_APP_API="http://localhost:3100/v3"
+VITE_APP_API_GQL="http://localhost:3000/v3/gql"
+VITE_APP_API_EVENTS="ws://localhost:3700/v3"
+VITE_APP_API_EGVAULT="http://localhost:3444/v1"
+VITE_APP_HOST="http://localhost:8080"

CHANGELOG-nightly.md

@@ -1,3 +1,48 @@
+### 3.1.2.3000
+
+-   Added an option to expand sidebar on twitch when hovering
+-   Fixed mentions not being clickable when colred mentions are turned off
+-   Added link to creators 7TV profile to emote cards of 7TV emotes
+
+### 3.1.2.2000
+
+-   Fixed some settings on kick
+-   Added more drop shadow settings
+
+### 3.1.2.1000
+
+-   **Implement support for the new Kick site:**
+    -   Chat emotes
+    -   Emote menu
+    -   Emote auto-completion
+    -   Cosmetics
+-   Added option to settings to hide Stories from the sidebar
+-   Fixed settings to hide recommended channels and viewers also watch channels
+-   Fixed an issue where history navigation is accidentally triggered during IME composition
+-   Added option to highlight messages of specific usernames
+-   Added option to highlight messages based on badges
+-   Added button to user card to toggle highlighting for a users messages
+-   Added mod icon for warning users to chat mod icons and user card
+-   Added an option to limit the drop shadows on paints
+
+### 3.1.1.3000
+
+-   Added support for animated FFZ emotes
+-   Added option to hide whispers
+-   Added tooltip to error messages in /search
+
+### 3.1.1.2100
+
+-   Fixed an issue where certain hooks would not work properly
+
+### 3.1.1.2000
+
+-   Added option to hide 7TV badges from chat
+-   Added option to hide bits from community button
+-   Fixed an issue where twitch emotes were displayed larger after hovering over them
+-   Fixed an issue causing VOD messages to display two timestamps
+-   Fixed an issue where the chat would keep rendering emotes of the previous channel
+
 ### 3.1.0.3000
 
 -   Fixed video player stats not showing

locale/en_US.yaml

@@ -21,7 +21,10 @@ user_card:
     previously_subscription_length: Previously subscribed for {length} months
     hidden_subscription_status: Status hidden
     native: Open Native User Card
+    highlight: Highlight messages of this user
+    stop_highlight: Stop highlighting of this user
     no_messages: "{user} has not chatted here"
+    no_warnings: "{user} has not been warned before"
     no_timeouts: "{user} hasn't been timed out before"
     no_bans: "{user} hasn't been banned before"
     no_comments: "No mod comments have been written for {user}"
@@ -30,6 +33,7 @@ user_card:
     unban_button: Unban
     mod_button: Mod
     unmod_button: Unmod
+    warn_button: Warn
 
 # Emote Menu
 # This interface allows the user to pick from available emotes

package.json

@@ -3,8 +3,8 @@
 	"displayName": "7TV",
 	"description": "Improve your viewing experience on Twitch & YouTube with new features, emotes, vanity and performance.",
 	"private": true,
-	"version": "3.1.1",
-	"dev_version": "1.0",
+	"version": "3.1.2",
+	"dev_version": "3.0",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.mts",

src/app/chat/Badge.vue

@@ -6,6 +6,7 @@
 			:alt="alt"
 			:style="{
 				backgroundColor,
+				borderRadius,
 			}"
 			@mouseenter="show(imgRef)"
 			@mouseleave="hide()"
@@ -20,16 +21,19 @@ import BadgeTooltip from "./BadgeTooltip.vue";
 
 const props = defineProps<{
 	alt: string;
-	type: "twitch" | "app";
-	badge: Twitch.ChatBadge | SevenTV.Cosmetic<"BADGE">;
+	type: "twitch" | "picture" | "app";
+	badge: Twitch.ChatBadge | Twitch.SharedChat | SevenTV.Cosmetic<"BADGE">;
 }>();
 
 const backgroundColor = ref("");
+const borderRadius = ref("");
 const srcset = {
 	twitch: (badge: Twitch.ChatBadge) => `${badge.image1x} 1x, ${badge.image2x} 2x, ${badge.image4x} 4x`,
+	picture: (badge: Twitch.SharedChat) =>
+		`${badge.profileImageURL.slice(0, -9)}28x28.png 1.6x, ${badge.profileImageURL.slice(0, -9)}70x70.png 3.8x`,
 	app: (badge: SevenTV.Cosmetic<"BADGE">) =>
 		badge.data.host.files.map((fi, i) => `https:${badge.data.host.url}/${fi.name} ${i + 1}x`).join(", "),
-}[props.type](props.badge as SevenTV.Cosmetic<"BADGE"> & Twitch.ChatBadge);
+}[props.type](props.badge as SevenTV.Cosmetic<"BADGE"> & Twitch.SharedChat & Twitch.ChatBadge);
 
 const imgRef = ref<HTMLElement>();
 
@@ -44,6 +48,10 @@ function isApp(badge: typeof props.badge): badge is SevenTV.Cosmetic<"BADGE"> {
 if (isApp(props.badge)) {
 	backgroundColor.value = props.badge.data.backgroundColor ?? "";
 }
+
+if (typeof props.badge == "string") {
+	borderRadius.value = "25%";
+}
 </script>
 
 <style scoped lang="scss">

src/app/chat/MessageTokenMention.vue

@@ -1,28 +1,23 @@
 <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: '',
+				}
+			"
+			is-mention
+			:hide-at="!hasAt"
+			hide-badges
+		/>
 	</span>
 </template>
 
 <script setup lang="ts">
 import type { ChatMessage, MentionToken } from "@/common/chat/ChatMessage";
-import { useConfig } from "@/composable/useSettings";
 import UserTag from "./UserTag.vue";
 import { v4 as uuid } from "uuid";
 
@@ -31,10 +26,8 @@ const props = defineProps<{
 	msg?: ChatMessage;
 }>();
 
-const shouldRenderColoredMentions = useConfig("chat.colored_mentions");
-
-const asMention = props.token.content.displayText.charAt(0) === "@";
-const tag = asMention ? props.token.content.displayText.slice(1) : props.token.content.displayText;
+const hasAt = props.token.content.displayText.charAt(0) === "@";
+const tag = hasAt ? props.token.content.displayText.slice(1) : props.token.content.displayText;
 </script>
 
 <style scoped lang="scss">

src/app/chat/UserCard.vue

@@ -5,6 +5,12 @@
 				<!--Identity (avatar, nametag, badges) -->
 				<div ref="dragHandle" class="seventv-user-card-identity">
 					<div class="seventv-user-card-menuactions">
+						<BellSlashIcon
+							v-if="data.targetUser.username in chatHighlights.getAllUsernameHighlights()"
+							v-tooltip="t('user_card.stop_highlight')"
+							@click="highlightUserMessages"
+						/>
+						<BellIcon v-else v-tooltip="t('user_card.highlight')" @click="highlightUserMessages" />
 						<LogoTwitch v-tooltip="t('user_card.native')" @click="openNativeCard" />
 						<CloseIcon class="close-button" @click="emit('close')" />
 					</div>
@@ -96,6 +102,7 @@
 					v-if="ctx.actor.roles.has('MODERATOR')"
 					:active-tab="data.activeTab"
 					:message-count="data.count.messages"
+					:warning-count="data.count.warnings"
 					:ban-count="data.count.bans"
 					:timeout-count="data.count.timeouts"
 					:comment-count="data.count.comments"
@@ -125,6 +132,7 @@ import { convertTwitchMessage } from "@/common/Transform";
 import { convertTwitchBadge } from "@/common/Transform";
 import { ChatMessage, ChatUser } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
+import { useChatHighlights } from "@/composable/chat/useChatHighlights";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
 import { useChatTools } from "@/composable/chat/useChatTools";
 import { useApollo } from "@/composable/useApollo";
@@ -135,6 +143,8 @@ import {
 	twitchUserCardModLogsQuery,
 	twitchUserCardQuery,
 } from "@/assets/gql/tw.user-card.gql";
+import BellIcon from "@/assets/svg/icons/BellIcon.vue";
+import BellSlashIcon from "@/assets/svg/icons/BellSlashIcon.vue";
 import CakeIcon from "@/assets/svg/icons/CakeIcon.vue";
 import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
 import HeartIcon from "@/assets/svg/icons/HeartIcon.vue";
@@ -165,6 +175,7 @@ const messages = useChatMessages(ctx);
 const { identity } = storeToRefs(useStore());
 const cosmetics = useCosmetics(props.target.id);
 const tools = useChatTools(ctx);
+const chatHighlights = useChatHighlights(ctx);
 
 const apollo = useApollo();
 const { t } = useI18n();
@@ -205,12 +216,14 @@ const data = reactive({
 	messageCursors: new WeakMap<ChatMessage, string>(),
 	timelines: {
 		messages: {} as Record<string, ChatMessage[]>,
+		warnings: {} as Record<string, ChatMessage[]>,
 		bans: {} as Record<string, ChatMessage[]>,
 		timeouts: {} as Record<string, ChatMessage[]>,
 		comments: {} as Record<string, ChatMessage[]>,
 	} as Record<UserCardTabName, Record<string, ChatMessage[]>>,
 	count: {
 		messages: 0,
+		warnings: 0,
 		bans: 0,
 		timeouts: 0,
 		comments: 0,
@@ -267,6 +280,7 @@ async function fetchModeratorData(): Promise<void> {
 	if (!resp || resp.errors?.length || !resp.data.channelUser) return;
 
 	data.count.messages = resp.data.viewerCardModLogs.messages.count ?? 0;
+	data.count.warnings = resp.data.viewerCardModLogs.warnings.count ?? 0;
 	data.count.bans = resp.data.viewerCardModLogs.bans.count ?? 0;
 	data.count.timeouts = resp.data.viewerCardModLogs.timeouts.count ?? 0;
 	data.count.comments = resp.data.viewerCardModLogs.comments.edges.length ?? 0;
@@ -275,11 +289,13 @@ async function fetchModeratorData(): Promise<void> {
 
 	const timeouts = resp.data.viewerCardModLogs.timeouts.edges;
 	const bans = resp.data.viewerCardModLogs.bans.edges;
+	const warnings = resp.data.viewerCardModLogs.warnings.edges;
 
-	// Add timeouts and bans to the timeline
+	// Add warnings, timeouts and bans to the timeline
 	for (const [tabName, a] of [
 		["timeouts", timeouts] as [UserCardTabName, typeof timeouts],
 		["bans", bans] as [UserCardTabName, typeof bans],
+		["warnings", warnings] as [UserCardTabName, typeof warnings],
 	]) {
 		const result = [] as ChatMessage[];
 
@@ -388,6 +404,31 @@ function openNativeCard(ev: MouseEvent): void {
 	emit("close");
 }
 
+function highlightUserMessages(): void {
+	if (!data.targetUser.username) return;
+	let ok = false;
+	if (data.targetUser.username in chatHighlights.getAllUsernameHighlights()) {
+		chatHighlights.remove(data.targetUser.username);
+		ok = true;
+	} else {
+		chatHighlights.define(
+			data.targetUser.username,
+			{
+				pattern: data.targetUser.username,
+				label: "Messages by " + data.targetUser.username,
+				color: "#8803fc",
+				flashTitle: false,
+				username: true,
+			},
+			true,
+		);
+		ok = true;
+	}
+
+	if (!ok) return;
+	chatHighlights.save();
+}
+
 function getProfileURL(): string {
 	return window.location.origin + "/" + props.target.username;
 }
@@ -507,7 +548,7 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
-$card-width: 32rem;
+$card-width: 37rem;
 $card-height: 48rem;
 
 main.seventv-user-card-container {
@@ -587,6 +628,7 @@ main.seventv-user-card-container {
 		right: 0.5rem;
 		top: 0.5rem;
 		height: 2rem;
+		width: 8rem;
 		display: flex;
 		column-gap: 0.25rem;
 
@@ -683,7 +725,7 @@ main.seventv-user-card-container {
 			// grid: position each badge next to the other on the same row, wrapping if necessary
 			display: flex;
 			flex-wrap: wrap;
-			max-width: 18rem;
+			max-width: 22rem;
 			gap: 0.5rem;
 			align-self: start;
 			z-index: 1;

src/app/chat/UserCardMod.vue

@@ -8,6 +8,13 @@
 			/>
 		</div>
 
+		<div class="seventv-user-card-mod-side seventv-user-card-mod-warn">
+			<WarningIcon
+				v-tooltip="t('user_card.warn_button')"
+				@click="tools.openViewerWarnPopover(target.id, target.username, 0)"
+			/>
+		</div>
+
 		<div v-show="!ban" class="seventv-user-card-mod-timeout-options">
 			<button
 				v-for="opt of timeoutOptions"
@@ -38,9 +45,11 @@ import { useI18n } from "vue-i18n";
 import type { ChatUser } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatModeration } from "@/composable/chat/useChatModeration";
+import { useChatTools } from "@/composable/chat/useChatTools";
 import { TwTypeChatBanStatus } from "@/assets/gql/tw.gql";
 import GavelIcon from "@/assets/svg/icons/GavelIcon.vue";
 import ShieldIcon from "@/assets/svg/icons/ShieldIcon.vue";
+import WarningIcon from "@/assets/svg/icons/WarningIcon.vue";
 
 const props = defineProps<{
 	target: ChatUser;
@@ -59,6 +68,7 @@ const { t } = useI18n();
 
 const ctx = useChannelContext();
 const mod = useChatModeration(ctx, props.target.username);
+const tools = useChatTools(ctx);
 
 async function banUser(duration: string): Promise<void> {
 	const resp = await mod.banUserFromChat(duration).catch(() => void 0);
@@ -87,9 +97,9 @@ const timeoutOptions = ["1s", "30s", "1m", "10m", "30m", "1h", "4h", "12h", "1d"
 <style scoped lang="scss">
 .seventv-user-card-mod {
 	display: grid;
-	grid-template-columns: 3em 1fr 3em;
+	grid-template-columns: 3em 3em 1fr 3em;
 	grid-template-rows: 1fr;
-	grid-template-areas: ". . .";
+	grid-template-areas: ". . . .";
 	height: 3rem;
 	align-items: center;
 	border-top: 0.1rem solid hsla(0deg, 0%, 100%, 10%);
@@ -127,5 +137,9 @@ const timeoutOptions = ["1s", "30s", "1m", "10m", "30m", "1h", "4h", "12h", "1d"
 	.seventv-user-card-mod-ban[is-banned="1"]:hover {
 		color: var(--seventv-accent);
 	}
+
+	.seventv-user-card-mod-warn:hover {
+		color: #fd0;
+	}
 }
 </style>