Skip to content

add silent replies #153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
7w1 merged 7 commits into from
Mar 11, 2026
+61 −16
Merged

add silent replies #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a4f14ba
added phosphor icons dependency
dozro Mar 10, 2026
bef4904
add posibility for silent reply
dozro Mar 10, 2026
45762a7
added title and label for a11y
dozro Mar 10, 2026
1647586
added changeset
dozro Mar 10, 2026
e0b173c
removed dep
dozro Mar 10, 2026
eccea72
moved the bell icon to the right
dozro Mar 10, 2026
44e7bf0
Merge branch 'dev' into feat/silent-replies
7w1 Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/add_silent_reply_functionality.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
sable: minor
---

add silent replies when clicking the bell icon during composing a reply
72 changes: 56 additions & 16 deletions src/app/features/room/RoomInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,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();

Expand Down Expand Up @@ -344,6 +345,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({
Expand Down Expand Up @@ -517,7 +524,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
body,
};

if (replyDraft && replyDraft.userId !== mx.getUserId()) {
if (replyDraft && !silentReply) {
mentionData.users.add(replyDraft.userId);
}

Expand Down Expand Up @@ -581,6 +588,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
mx,
roomId,
replyDraft,
silentReply,
scheduledTime,
editingScheduledDelayId,
handleQuickReact,
Expand Down Expand Up @@ -859,24 +867,56 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
>
<Icon src={Icons.Cross} size="50" />
</IconButton>
<Box direction="Row" gap="200" alignItems="Center">
{replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
<ReplyLayout
userColor={replyUsernameColor}
username={
<Text size="T300" truncate style={{ fontFamily: replyUsernameFont }}>
<b>
{getMemberDisplayName(room, replyDraft.userId, nicknames) ??
getMxIdLocalPart(replyDraft.userId) ??
replyDraft.userId}
</b>
<Box
direction="Row"
gap="200"
alignItems="Center"
grow="Yes"
style={{ minWidth: 0 }}
>
<Box
direction="Row"
gap="200"
alignItems="Center"
grow="Yes"
style={{ minWidth: 0 }}
>
{replyDraft.relation?.rel_type === RelationType.Thread && (
<ThreadIndicator />
)}
<ReplyLayout
userColor={replyUsernameColor}
username={
<Text size="T300" truncate style={{ fontFamily: replyUsernameFont }}>
<b>
{getMemberDisplayName(room, replyDraft.userId, nicknames) ??
getMxIdLocalPart(replyDraft.userId) ??
replyDraft.userId}
</b>
</Text>
}
>
<Text size="T300" truncate>
{replyBodyJSX}
</Text>
</ReplyLayout>
</Box>
<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)}
>
<Text size="T300" truncate>
{replyBodyJSX}
</Text>
</ReplyLayout>
{!silentReply && <Icon src={Icons.BellPing} />}
{silentReply && <Icon src={Icons.BellMute} />}
</IconButton>
</Box>
</Box>
</div>
Expand Down
Loading