From eea02896b0c6846cc20df0414f2878da0e40ef56 Mon Sep 17 00:00:00 2001
From: zeeshaun <1766264+zeeshaun@users.noreply.github.com>
Date: Sun, 31 May 2026 19:23:59 -0500
Subject: [PATCH 1/3] Add chat sound mute toggle
---
components/chat/ChatLobby.vue | 63 ++++++++++++++++++++++++++++++++---
components/hub/ChatPanel.vue | 43 ++++++++++++++++++++++++
composables/useSound.ts | 54 ++++++++++++++++++++++++++++--
3 files changed, 152 insertions(+), 8 deletions(-)
diff --git a/components/chat/ChatLobby.vue b/components/chat/ChatLobby.vue
index 8f805f04..e6a85c34 100644
--- a/components/chat/ChatLobby.vue
+++ b/components/chat/ChatLobby.vue
@@ -4,10 +4,16 @@ import ChatMessages from "~/components/chat/ChatMessages.vue";
import ChatInput from "~/components/chat/ChatInput.vue";
import ChatMatchHeader from "~/components/chat/ChatMatchHeader.vue";
import Empty from "~/components/ui/empty/Empty.vue";
+import { Volume2, VolumeX } from "lucide-vue-next";
+
+defineOptions({
+ inheritAttrs: false,
+});
-
+
-
-
+
@@ -293,7 +320,12 @@ import { useSound } from "~/composables/useSound";
import { useMatchLobbyStore } from "~/stores/MatchLobbyStore";
const { rightSidebarOpen } = useRightSidebar();
-const { playNotificationSound } = useSound();
+const {
+ isEnabled: chatSoundState,
+ isAutoMutedForInGame: chatSoundAutoMutedForInGame,
+ playNotificationSound: playChatNotificationSound,
+ updateSettings: updateSoundSettings,
+} = useSound();
interface ChatMessagesRef {
scrollToBottom: (force?: boolean) => void;
@@ -397,6 +429,24 @@ export default {
participantsCount() {
return this.participants.length;
},
+ chatSoundEnabled() {
+ return chatSoundState.value;
+ },
+ chatSoundActive() {
+ return chatSoundState.value && !chatSoundAutoMutedForInGame.value;
+ },
+ chatSoundToggleLabel() {
+ if (chatSoundAutoMutedForInGame.value) {
+ return this.$t(
+ "ui_extras.auto_muted_in_game",
+ "Auto-muted while in game",
+ );
+ }
+
+ return chatSoundState.value
+ ? this.$t("ui_extras.mute")
+ : this.$t("ui_extras.unmute");
+ },
matchInfo() {
if (this.type !== "match") {
return null;
@@ -510,6 +560,9 @@ export default {
direction: "outbound",
});
},
+ toggleChatSound() {
+ updateSoundSettings(!chatSoundState.value);
+ },
handleBottomStateChange(atBottom: boolean) {
this.isAtBottom = atBottom;
},
@@ -583,7 +636,7 @@ export default {
this.lastReadMessageCount = this.messages.length;
}
if (this.playNotificationSound && !isOwnMessage) {
- playNotificationSound();
+ playChatNotificationSound();
}
this.$emit("message-received", {
diff --git a/components/hub/ChatPanel.vue b/components/hub/ChatPanel.vue
index f81394eb..d909c079 100644
--- a/components/hub/ChatPanel.vue
+++ b/components/hub/ChatPanel.vue
@@ -9,6 +9,8 @@ import {
Shield,
MessageSquare,
ExternalLink,
+ Volume2,
+ VolumeX,
} from "lucide-vue-next";
import { useRouter } from "#app";
import ChatLobby from "~/components/chat/ChatLobby.vue";
@@ -17,6 +19,7 @@ import TooltipProvider from "~/components/ui/tooltip/TooltipProvider.vue";
import TooltipTrigger from "~/components/ui/tooltip/TooltipTrigger.vue";
import TooltipContent from "~/components/ui/tooltip/TooltipContent.vue";
import { useMatchLobbyStore } from "~/stores/MatchLobbyStore";
+import { useSound } from "~/composables/useSound";
const props = defineProps<{
isSidebarOpen: boolean;
@@ -30,6 +33,11 @@ const { tabs, unreadCounts, setActiveTab, resetUnread, incrementUnread } =
useChatTabs();
const matchLobbyStore = useMatchLobbyStore();
+const {
+ isEnabled: chatSoundEnabled,
+ isAutoMutedForInGame: chatSoundAutoMutedForInGame,
+ updateSettings: updateSoundSettings,
+} = useSound();
const isMobile = useMediaQuery("(max-width: 768px)");
const activeChatId = ref(null);
@@ -65,6 +73,18 @@ const activeParticipantsCount = computed(() => {
return map.size;
});
+const chatSoundActive = computed(
+ () => chatSoundEnabled.value && !chatSoundAutoMutedForInGame.value,
+);
+
+const chatSoundToggleLabel = computed(() => {
+ if (chatSoundAutoMutedForInGame.value) {
+ return t("ui_extras.auto_muted_in_game", "Auto-muted while in game");
+ }
+
+ return chatSoundEnabled.value ? t("ui_extras.mute") : t("ui_extras.unmute");
+});
+
const activeParticipants = computed<
{ steam_id: string; name: string; avatar_url?: string }[]
>(() => {
@@ -224,6 +244,10 @@ function handlePopOut() {
].join(",");
window.open(route.href, "_blank", features);
}
+
+function toggleChatSound() {
+ updateSoundSettings(!chatSoundEnabled.value);
+}
@@ -351,6 +375,25 @@ function handlePopOut() {
+
+
+
+
+
+ {{ chatSoundToggleLabel }}
+
+
-
-