From a4f14ba52cd38de4ad72f3d29b1fcbe58b3741cf Mon Sep 17 00:00:00 2001 From: Rye Date: Tue, 10 Mar 2026 17:45:31 +0100 Subject: [PATCH 1/6] added phosphor icons dependency --- package-lock.json | 23 +++++++++++++++++++++-- package.json | 1 + 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3c3f248ca..9fec3fccc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,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", @@ -3949,6 +3950,19 @@ "win32" ] }, + "node_modules/@phosphor-icons/react": { + "version": "2.1.10", + "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz", + "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">= 16.8", + "react-dom": ">= 16.8" + } + }, "node_modules/@pkgr/core": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz", @@ -18916,6 +18930,11 @@ "dev": true, "optional": true }, + "@phosphor-icons/react": { + "version": "2.1.10", + "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz", + "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==" + }, "@pkgr/core": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz", @@ -24408,7 +24427,7 @@ "jwt-decode": "^4.0.0", "loglevel": "^1.9.2", "matrix-events-sdk": "0.0.1", - "matrix-widget-api": "^1.10.0", + "matrix-widget-api": "1.13.0", "oidc-client-ts": "^3.0.1", "p-retry": "7", "sdp-transform": "^2.14.1", @@ -26905,4 +26924,4 @@ "dev": true } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 3ca4beea9..ba441b3bf 100644 --- a/package.json +++ b/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", From bef4904485f1c0f8f47014c3550f64dadbb47bf2 Mon Sep 17 00:00:00 2001 From: Rye Date: Tue, 10 Mar 2026 18:25:12 +0100 Subject: [PATCH 2/6] add posibility for silent reply --- src/app/features/room/RoomInput.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index 026227dbc..eed0234b0 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/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( ); const [scheduleMenuAnchor, setScheduleMenuAnchor] = useState(); 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( [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( body, }; - if (replyDraft && replyDraft.userId !== mx.getUserId()) { + if (replyDraft && !silentReply) { mentionData.users.add(replyDraft.userId); } @@ -581,6 +589,7 @@ export const RoomInput = forwardRef( mx, roomId, replyDraft, + silentReply, scheduledTime, editingScheduledDelayId, handleQuickReact, @@ -848,6 +857,15 @@ export const RoomInput = forwardRef( gap="300" style={{ padding: `${config.space.S200} ${config.space.S300} 0` }} > + setSilentReply(!silentReply)} + > + {!silentReply && } + {silentReply && } + setReplyDraft(undefined)} variant="SurfaceVariant" From 45762a7862757aae2b611dd2eb0ae476752d7f81 Mon Sep 17 00:00:00 2001 From: Rye Date: Tue, 10 Mar 2026 18:31:39 +0100 Subject: [PATCH 3/6] added title and label for a11y --- src/app/features/room/RoomInput.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index eed0234b0..7e5e3566c 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -861,6 +861,13 @@ export const RoomInput = forwardRef( 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 && } From 16475867509cbb97ede5d743206c336b82c45b55 Mon Sep 17 00:00:00 2001 From: Rye Date: Tue, 10 Mar 2026 18:31:48 +0100 Subject: [PATCH 4/6] added changeset --- .changeset/add_silent_reply_functionality.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/add_silent_reply_functionality.md diff --git a/.changeset/add_silent_reply_functionality.md b/.changeset/add_silent_reply_functionality.md new file mode 100644 index 000000000..9cca467c4 --- /dev/null +++ b/.changeset/add_silent_reply_functionality.md @@ -0,0 +1,5 @@ +--- +sable: minor +--- + +add silent replies when clicking the bell icon during composing a reply From e0b173c754e26a49b279277a9c6c340ac10e856e Mon Sep 17 00:00:00 2001 From: Rye Date: Tue, 10 Mar 2026 19:17:56 +0100 Subject: [PATCH 5/6] removed dep --- package-lock.json | 19 ------------------- package.json | 1 - 2 files changed, 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9fec3fccc..84f8d4a88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,6 @@ "@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", @@ -3950,19 +3949,6 @@ "win32" ] }, - "node_modules/@phosphor-icons/react": { - "version": "2.1.10", - "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz", - "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==", - "license": "MIT", - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "react": ">= 16.8", - "react-dom": ">= 16.8" - } - }, "node_modules/@pkgr/core": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz", @@ -18930,11 +18916,6 @@ "dev": true, "optional": true }, - "@phosphor-icons/react": { - "version": "2.1.10", - "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz", - "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==" - }, "@pkgr/core": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz", diff --git a/package.json b/package.json index ba441b3bf..3ca4beea9 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,6 @@ "@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", From eccea72bd1a97554683f4768d39e325d079626f9 Mon Sep 17 00:00:00 2001 From: Rye Date: Tue, 10 Mar 2026 19:19:24 +0100 Subject: [PATCH 6/6] moved the bell icon to the right --- src/app/features/room/RoomInput.tsx | 79 +++++++++++++++++------------ 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index 7e5e3566c..5828366d4 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -77,7 +77,6 @@ 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, @@ -857,22 +856,6 @@ export const RoomInput = forwardRef( gap="300" style={{ padding: `${config.space.S200} ${config.space.S300} 0` }} > - setSilentReply(!silentReply)} - > - {!silentReply && } - {silentReply && } - setReplyDraft(undefined)} variant="SurfaceVariant" @@ -881,24 +864,56 @@ export const RoomInput = forwardRef( > - - {replyDraft.relation?.rel_type === RelationType.Thread && } - - - {getMemberDisplayName(room, replyDraft.userId, nicknames) ?? - getMxIdLocalPart(replyDraft.userId) ?? - replyDraft.userId} - + + + {replyDraft.relation?.rel_type === RelationType.Thread && ( + + )} + + + {getMemberDisplayName(room, replyDraft.userId, nicknames) ?? + getMxIdLocalPart(replyDraft.userId) ?? + replyDraft.userId} + + + } + > + + {replyBodyJSX} + + + setSilentReply(!silentReply)} > - - {replyBodyJSX} - - + {!silentReply && } + {silentReply && } +