add silent replies

.changeset/add_silent_reply_functionality.md

@@ -0,0 +1,5 @@
+---
+sable: minor
+---
+
+add silent replies when clicking the bell icon during composing a reply

package.json

@@ -31,6 +31,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@fontsource-variable/nunito": "5.2.7",
     "@fontsource/space-mono": "5.2.9",
+    "@phosphor-icons/react": "^2.0.0",
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-query-devtools": "^5.91.3",
     "@tanstack/react-virtual": "^3.13.19",

src/app/features/room/RoomInput.tsx

@@ -77,6 +77,7 @@ import {
 } from '$components/editor';
 import { EmojiBoard, EmojiBoardTab } from '$components/emoji-board';
 import { UseStateProvider } from '$components/UseStateProvider';
+import { BellSimpleIcon, BellSimpleSlashIcon } from '@phosphor-icons/react';
 import {
   TUploadContent,
   encryptFile,
@@ -285,6 +286,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     );
     const [scheduleMenuAnchor, setScheduleMenuAnchor] = useState<RectCords>();
     const [showSchedulePicker, setShowSchedulePicker] = useState(false);
+    const [silentReply, setSilentReply] = useState(false);
     const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
     const isEncrypted = room.hasEncryptionStateEvent();
 
@@ -344,6 +346,12 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       [roomId, editor, setMsgDraft]
     );
 
+    useEffect(() => {
+      if (replyDraft !== undefined) {
+        setSilentReply(replyDraft.userId === mx.getUserId());
+      }
+    }, [mx, replyDraft]);
+
     const handleFileMetadata = useCallback(
       (fileItem: TUploadItem, metadata: TUploadMetadata) => {
         setSelectedFiles({
@@ -517,7 +525,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         body,
       };
 
-      if (replyDraft && replyDraft.userId !== mx.getUserId()) {
+      if (replyDraft && !silentReply) {
         mentionData.users.add(replyDraft.userId);
       }
 
@@ -581,6 +589,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       mx,
       roomId,
       replyDraft,
+      silentReply,
       scheduledTime,
       editingScheduledDelayId,
       handleQuickReact,
@@ -848,6 +857,22 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                     gap="300"
                     style={{ padding: `${config.space.S200} ${config.space.S300} 0` }}
                   >
+                    <IconButton
+                      variant="SurfaceVariant"
+                      size="300"
+                      radii="300"
+                      title={
+                        silentReply ? 'Unmute reply notifications' : 'Mute reply notifications'
+                      }
+                      aria-pressed={silentReply}
+                      aria-label={
+                        silentReply ? 'Unmute reply notifications' : 'Mute reply notifications'
+                      }
+                      onClick={() => setSilentReply(!silentReply)}
+                    >
+                      {!silentReply && <BellSimpleIcon size="20" />}
+                      {silentReply && <BellSimpleSlashIcon size="20" />}
+                    </IconButton>
                     <IconButton
                       onClick={() => setReplyDraft(undefined)}
                       variant="SurfaceVariant"