From 215e884bdee5bbab7c763ba4e0ce29866bf550ca Mon Sep 17 00:00:00 2001
From: Guneev Pannu <guneevpannu@outlook.com>
Date: Mon, 7 Sep 2026 14:26:54 -0400
Subject: [PATCH 1/5] Added a 3 state volume icon for browser notifications

---
 src/app/room/classChat/ChatHeader.tsx | 43 ++++++++++++++++++++++++++-
 src/app/room/classChat/index.tsx      |  9 ++++++
 src/app/room/page.tsx                 |  4 +--
 3 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/app/room/classChat/ChatHeader.tsx b/src/app/room/classChat/ChatHeader.tsx
index 324267b..5301af3 100644
--- a/src/app/room/classChat/ChatHeader.tsx
+++ b/src/app/room/classChat/ChatHeader.tsx
@@ -2,7 +2,18 @@
 
 import { Input } from "@/components/ui/input";
 import { useContext, useState } from "react";
-import { PanelRightClose, Users, GraduationCap, Search, X, UserPlus, Undo2 } from "lucide-react";
+import {
+  PanelRightClose,
+  Users,
+  GraduationCap,
+  Search,
+  X,
+  UserPlus,
+  Undo2,
+  VolumeOff,
+  Volume2,
+  BellRing,
+} from "lucide-react";
 import ManageTAsModal from "./ManageTAsModal";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { SlideUpdateContext } from "../SlideUpdateContext";
@@ -15,6 +26,8 @@ const TITLE_MAX_CHARS = 6;
 interface ChatHeaderProps {
   role: Role;
   answerMode: "all" | "instructors_only";
+  notificationMode: "off" | "sound" | "browser";
+  onToggleNotificationMode: () => void;
   onToggleAnswerMode: () => void;
   searchQuery: string;
   onSearchChange: (value: string) => void;
@@ -55,6 +68,8 @@ function SlideToggle() {
 export default function ChatHeader({
   role,
   answerMode,
+  notificationMode,
+  onToggleNotificationMode,
   onToggleAnswerMode,
   searchQuery,
   onSearchChange,
@@ -63,6 +78,24 @@ export default function ChatHeader({
   const { isSlidesVisible } = useContext(SlideUpdateContext);
   const [isSearchExpanded, setIsSearchExpanded] = useState(false);
   const [showTAModal, setShowTAModal] = useState(false);
+  const notificationButton =
+    notificationMode === "off"
+      ? {
+          Icon: VolumeOff,
+          title: "Notifications off",
+          className: "bg-red-100 text-red-700 hover:bg-red-200",
+        }
+      : notificationMode === "sound"
+        ? {
+            Icon: Volume2,
+            title: "Beep notifications on",
+            className: "bg-stone-200 text-stone-600 hover:bg-stone-300",
+          }
+        : {
+            Icon: BellRing,
+            title: "Browser notifications on",
+            className: "bg-amber-100 text-amber-700 hover:bg-amber-200",
+          };
 
   return (
     <>
@@ -126,6 +159,14 @@ export default function ChatHeader({
               </div>
 
               <div className="flex items-center gap-2 shrink-0 animate-in fade-in duration-200">
+                <button
+                  onClick={onToggleNotificationMode}
+                  title={`${notificationButton.title} - click to cycle`}
+                  className={`w-9 h-9 flex items-center justify-center rounded-md transition-colors ${notificationButton.className}`}
+                  aria-label={notificationButton.title}
+                >
+                  <notificationButton.Icon className="w-4 h-4" />
+                </button>
                 <button
                   onClick={() => setIsSearchExpanded(true)}
                   className={`w-9 h-9 flex items-center justify-center rounded-md transition-colors ${
diff --git a/src/app/room/classChat/index.tsx b/src/app/room/classChat/index.tsx
index befb391..9116916 100644
--- a/src/app/room/classChat/index.tsx
+++ b/src/app/room/classChat/index.tsx
@@ -131,6 +131,7 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
   const [commentView, setCommentView] = useState<"all" | "unresolved" | "resolved">("all");
   const [questions, setQuestions] = useState<Question[]>([]);
   const [answerMode, setAnswerMode] = useState<"all" | "instructors_only">("instructors_only");
+  const [notificationMode, setNotificationMode] = useState<"off" | "sound" | "browser">("off");
   const [globalIsAnonymous, setGlobalIsAnonymous] = useState(false);
   const [includeSlideContext, setIncludeSlideContext] = useState(true);
   const [isLoading, setIsLoading] = useState(true);
@@ -556,6 +557,12 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
     setAnswerMode(newMode); // Optimistic update
   };
 
+  const handleToggleNotificationMode = () => {
+    setNotificationMode((current) =>
+      current === "off" ? "sound" : current === "sound" ? "browser" : "off"
+    );
+  };
+
   const handleDeleteQuestion = (questionId: string) => {
     if (!socket) return;
     socket.emit("question:delete", { questionId, sessionId });
@@ -643,6 +650,8 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
       <ChatHeader
         role={role}
         answerMode={answerMode}
+        notificationMode={notificationMode}
+        onToggleNotificationMode={handleToggleNotificationMode}
         onToggleAnswerMode={handleToggleAnswerMode}
         searchQuery={searchQuery}
         onSearchChange={setSearchQuery}
diff --git a/src/app/room/page.tsx b/src/app/room/page.tsx
index c71499b..e5b1ddd 100644
--- a/src/app/room/page.tsx
+++ b/src/app/room/page.tsx
@@ -150,7 +150,7 @@ function RoomInner() {
 
   const isMdSize = useMediaQuery("(min-width: 1024px)");
   const [isSlidesVisible, setIsSlidesVisible] = useState(true);
-  const [resizableWidth, setResizableWidth] = useState(30);
+  const [resizableWidth, setResizableWidth] = useState(32);
 
   const [userId, setUserId] = useState("");
   const [role, setRole] = useState<Role>("STUDENT");
@@ -409,7 +409,7 @@ function RoomInner() {
                   />
                 </ResizablePanel>
                 <ResizableHandle withHandle />
-                <ResizablePanel defaultSize={resizableWidth} minSize={30}>
+                <ResizablePanel defaultSize={resizableWidth} minSize={32}>
                   <ClassChat chatHistoryRef={chatHistoryRef} />
                 </ResizablePanel>
               </ResizablePanelGroup>

From d8c91b77992df0aa594588a0aa4d74d27f962ce2 Mon Sep 17 00:00:00 2001
From: Guneev Pannu <guneevpannu@outlook.com>
Date: Mon, 7 Sep 2026 14:46:03 -0400
Subject: [PATCH 2/5] Added a small beep when a question is created

---
 src/app/room/classChat/index.tsx | 37 ++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/app/room/classChat/index.tsx b/src/app/room/classChat/index.tsx
index 9116916..a0358ab 100644
--- a/src/app/room/classChat/index.tsx
+++ b/src/app/room/classChat/index.tsx
@@ -144,6 +144,32 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
   // Separate history that keeps deleted messages (marked as [deleted]) for the
   // session export. Never removes items — deletions are marked in-place.
   const historyRef = useRef<Question[]>([]);
+  const audioContextRef = useRef<AudioContext | null>(null);
+
+  const playQuestionBeep = (mode = notificationMode) => {
+    if (mode === "off" || typeof window === "undefined") return;
+
+    const audioContext = audioContextRef.current ?? new window.AudioContext();
+    audioContextRef.current = audioContext;
+    if (audioContext.state === "suspended") {
+      void audioContext.resume().catch(() => {});
+    }
+
+    const oscillator = audioContext.createOscillator();
+    const gainNode = audioContext.createGain();
+    const now = audioContext.currentTime;
+
+    oscillator.type = "sine";
+    oscillator.frequency.setValueAtTime(880, now);
+    gainNode.gain.setValueAtTime(0.0001, now);
+    gainNode.gain.exponentialRampToValueAtTime(0.14, now + 0.01);
+    gainNode.gain.exponentialRampToValueAtTime(0.0001, now + 0.18);
+
+    oscillator.connect(gainNode);
+    gainNode.connect(audioContext.destination);
+    oscillator.start(now);
+    oscillator.stop(now + 0.18);
+  };
 
   // -------------------------------------------------------------------------
   // Initial data fetch
@@ -244,6 +270,7 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
 
       setQuestions((prev) => [...prev, newQuestion]);
       historyRef.current = [...historyRef.current, { ...newQuestion, replies: [] }];
+      playQuestionBeep();
       if (payload.isMine) setScrollTargetId(payload.id);
     };
 
@@ -466,7 +493,7 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
       socket.off("question:author:revealed", onQuestionAuthorRevealed);
       socket.off("answer:author:revealed", onAnswerAuthorRevealed);
     };
-  }, [socket, sessionId, chatHistoryRef, role, userId]);
+  }, [socket, sessionId, chatHistoryRef, role, userId, notificationMode]);
 
   // Keep chatHistoryRef in sync whenever historyRef is updated via data load
   // or new questions/answers arriving (deletions update it inline above).
@@ -558,9 +585,11 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
   };
 
   const handleToggleNotificationMode = () => {
-    setNotificationMode((current) =>
-      current === "off" ? "sound" : current === "sound" ? "browser" : "off"
-    );
+    setNotificationMode((current) => {
+      const nextMode = current === "off" ? "sound" : current === "sound" ? "browser" : "off";
+      if (nextMode !== "off") playQuestionBeep(nextMode);
+      return nextMode;
+    });
   };
 
   const handleDeleteQuestion = (questionId: string) => {

From e54eedd1887031725886caa77321da0215b88f59 Mon Sep 17 00:00:00 2001
From: Guneev Pannu <guneevpannu@outlook.com>
Date: Mon, 7 Sep 2026 14:56:12 -0400
Subject: [PATCH 3/5] Added browser notifications

---
 src/app/room/classChat/index.tsx | 44 +++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/app/room/classChat/index.tsx b/src/app/room/classChat/index.tsx
index a0358ab..7f74144 100644
--- a/src/app/room/classChat/index.tsx
+++ b/src/app/room/classChat/index.tsx
@@ -126,7 +126,7 @@ interface ClassChatProps {
 }
 
 export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
-  const { socket, sessionId, userId, role, slideContextRef } = useRoom();
+  const { socket, sessionId, userId, role, slideContextRef, sessionTitle } = useRoom();
 
   const [commentView, setCommentView] = useState<"all" | "unresolved" | "resolved">("all");
   const [questions, setQuestions] = useState<Question[]>([]);
@@ -171,6 +171,33 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
     oscillator.stop(now + 0.18);
   };
 
+  const requestBrowserNotificationPermission = async () => {
+    if (typeof window === "undefined" || !("Notification" in window)) return false;
+    if (Notification.permission === "granted") return true;
+    if (Notification.permission === "denied") return false;
+
+    try {
+      return (await Notification.requestPermission()) === "granted";
+    } catch {
+      return false;
+    }
+  };
+
+  const showBrowserNotification = (question: Question, mode = notificationMode) => {
+    if (mode !== "browser" || typeof window === "undefined" || !("Notification" in window)) return;
+    if (Notification.permission !== "granted") return;
+    if (document.visibilityState === "visible" && document.hasFocus()) return;
+
+    const author =
+      question.isAnonymous || !question.user?.username ? "Anonymous" : question.user.username;
+    const notification = new Notification(sessionTitle || "New question", {
+      body: `${author}: ${question.content}`,
+      tag: `question-${question.id}`,
+    });
+
+    setTimeout(() => notification.close(), 5000);
+  };
+
   // -------------------------------------------------------------------------
   // Initial data fetch
   // -------------------------------------------------------------------------
@@ -271,6 +298,9 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
       setQuestions((prev) => [...prev, newQuestion]);
       historyRef.current = [...historyRef.current, { ...newQuestion, replies: [] }];
       playQuestionBeep();
+      if (!payload.isMine) {
+        showBrowserNotification(newQuestion);
+      }
       if (payload.isMine) setScrollTargetId(payload.id);
     };
 
@@ -585,11 +615,13 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
   };
 
   const handleToggleNotificationMode = () => {
-    setNotificationMode((current) => {
-      const nextMode = current === "off" ? "sound" : current === "sound" ? "browser" : "off";
-      if (nextMode !== "off") playQuestionBeep(nextMode);
-      return nextMode;
-    });
+    const nextMode =
+      notificationMode === "off" ? "sound" : notificationMode === "sound" ? "browser" : "off";
+    setNotificationMode(nextMode);
+    if (nextMode !== "off") playQuestionBeep(nextMode);
+    if (nextMode === "browser") {
+      void requestBrowserNotificationPermission();
+    }
   };
 
   const handleDeleteQuestion = (questionId: string) => {

From e31a9fea42f88aa650ae654d1c340042cc5cb586 Mon Sep 17 00:00:00 2001
From: Guneev Pannu <guneevpannu@outlook.com>
Date: Mon, 7 Sep 2026 15:14:23 -0400
Subject: [PATCH 4/5] Expanded scope of notification system so it triggers on
 replies to your thread and threads you've responded in, in addition to just
 new questions

---
 src/app/room/classChat/index.tsx | 40 +++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/app/room/classChat/index.tsx b/src/app/room/classChat/index.tsx
index 7f74144..34ce543 100644
--- a/src/app/room/classChat/index.tsx
+++ b/src/app/room/classChat/index.tsx
@@ -183,17 +183,17 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
     }
   };
 
-  const showBrowserNotification = (question: Question, mode = notificationMode) => {
+  const showBrowserNotification = (
+    title: string,
+    body: string,
+    tag: string,
+    mode = notificationMode
+  ) => {
     if (mode !== "browser" || typeof window === "undefined" || !("Notification" in window)) return;
     if (Notification.permission !== "granted") return;
     if (document.visibilityState === "visible" && document.hasFocus()) return;
 
-    const author =
-      question.isAnonymous || !question.user?.username ? "Anonymous" : question.user.username;
-    const notification = new Notification(sessionTitle || "New question", {
-      body: `${author}: ${question.content}`,
-      tag: `question-${question.id}`,
-    });
+    const notification = new Notification(title, { body, tag });
 
     setTimeout(() => notification.close(), 5000);
   };
@@ -297,9 +297,17 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
 
       setQuestions((prev) => [...prev, newQuestion]);
       historyRef.current = [...historyRef.current, { ...newQuestion, replies: [] }];
-      playQuestionBeep();
       if (!payload.isMine) {
-        showBrowserNotification(newQuestion);
+        const author =
+          newQuestion.isAnonymous || !newQuestion.user?.username
+            ? "Anonymous"
+            : newQuestion.user.username;
+        playQuestionBeep();
+        showBrowserNotification(
+          sessionTitle || "New question",
+          `${author}: ${newQuestion.content}`,
+          `question-${newQuestion.id}`
+        );
       }
       if (payload.isMine) setScrollTargetId(payload.id);
     };
@@ -356,6 +364,12 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
         isMine: payload.isMine,
       };
       const newReply = apiAnswerToPost(apiAnswer);
+      const question = historyRef.current.find((q) => q.id === payload.questionId);
+      const isFollowUpOnMyThread =
+        !payload.isMine &&
+        (question?.isMine === true || question?.replies.some((reply) => isOwnPost(reply)) === true);
+      const replyAuthor =
+        newReply.isAnonymous || !newReply.user?.username ? "Anonymous" : newReply.user.username;
 
       setQuestions((prev) =>
         prev.map((q) =>
@@ -365,6 +379,14 @@ export default function ClassChat({ chatHistoryRef }: ClassChatProps) {
       historyRef.current = historyRef.current.map((q) =>
         q.id === payload.questionId ? { ...q, replies: [...q.replies, { ...newReply }] } : q
       );
+      if (isFollowUpOnMyThread) {
+        playQuestionBeep();
+        showBrowserNotification(
+          sessionTitle || "New reply",
+          `${replyAuthor} replied: ${newReply.content}`,
+          `answer-${newReply.id}`
+        );
+      }
     };
 
     const onAnswerUpdated = (payload: { id: string; questionId: string; upvoteCount: number }) => {

From 9f46315574492233e743dcd45ca85fdec4c443c7 Mon Sep 17 00:00:00 2001
From: Guneev Pannu <guneevpannu@outlook.com>
Date: Mon, 7 Sep 2026 15:28:51 -0400
Subject: [PATCH 5/5] Clarified tooltips on chat header

---
 src/app/room/classChat/ChatHeader.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/room/classChat/ChatHeader.tsx b/src/app/room/classChat/ChatHeader.tsx
index 5301af3..07163b4 100644
--- a/src/app/room/classChat/ChatHeader.tsx
+++ b/src/app/room/classChat/ChatHeader.tsx
@@ -93,7 +93,7 @@ export default function ChatHeader({
           }
         : {
             Icon: BellRing,
-            title: "Browser notifications on",
+            title: "Browser and beep notifications on",
             className: "bg-amber-100 text-amber-700 hover:bg-amber-200",
           };
 
@@ -169,6 +169,7 @@ export default function ChatHeader({
                 </button>
                 <button
                   onClick={() => setIsSearchExpanded(true)}
+                  title="Search questions and answers"
                   className={`w-9 h-9 flex items-center justify-center rounded-md transition-colors ${
                     searchQuery
                       ? "bg-stone-800 text-stone-50 hover:bg-stone-700"
@@ -188,8 +189,8 @@ export default function ChatHeader({
                     onClick={onToggleAnswerMode}
                     title={
                       answerMode === "all"
-                        ? "Anyone can answer — click to restrict to TAs/Professors"
-                        : "TAs/Professors only — click to allow everyone"
+                        ? "Anyone can answer - click to restrict to TAs/Professors"
+                        : "TAs/Professors only - click to allow everyone"
                     }
                     className={`flex items-center gap-1.5 h-9 px-3 rounded-md text-sm font-medium transition-colors shrink-0 cursor-pointer ${
                       answerMode === "all"