mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-09-13 22:32:26 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add button to start thread on reply (#2320)

Browse source 
* add simple button to start a thread on reply

* force build

* remove useless actions

* add actions back

* change icon to ThreadPlus

* add button to context menu

* fix capital T

---------

Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>
This commit is contained in:
Filipe Medeiros 2025-07-23 16:17:17 +01:00 • committed by GitHub
parent 3cdb5c2fe6
commit 9073dee986
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 42 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/features/room/RoomTimeline.tsx
View file

@ -933,7 +933,7 @@ export function RoomTimeline({
); );
const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback( const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback(
(evt) => { (evt, startThread = false) => {
const replyId = evt.currentTarget.getAttribute('data-event-id'); const replyId = evt.currentTarget.getAttribute('data-event-id');
if (!replyId) { if (!replyId) {
console.warn('Button should have "data-event-id" attribute!'); console.warn('Button should have "data-event-id" attribute!');
@ -944,7 +944,9 @@ export function RoomTimeline({
const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet()); const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet());
const content: IContent = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent(); const content: IContent = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
const { body, formatted_body: formattedBody } = content; const { body, formatted_body: formattedBody } = content;
const { 'm.relates_to': relation } = replyEvt.getWireContent(); const { 'm.relates_to': relation } = startThread
? { 'm.relates_to': { rel_type: 'm.thread', event_id: replyId } }
: replyEvt.getWireContent();
const senderId = replyEvt.getSender(); const senderId = replyEvt.getSender();
if (senderId && typeof body === 'string') { if (senderId && typeof body === 'string') {
setReplyDraft({ setReplyDraft({

39
src/app/features/room/message/Message.tsx
View file

@ -669,7 +669,10 @@ export type MessageProps = {
messageSpacing: MessageSpacing; messageSpacing: MessageSpacing;
onUserClick: MouseEventHandler<HTMLButtonElement>; onUserClick: MouseEventHandler<HTMLButtonElement>;
onUsernameClick: MouseEventHandler<HTMLButtonElement>; onUsernameClick: MouseEventHandler<HTMLButtonElement>;
onReplyClick: MouseEventHandler<HTMLButtonElement>; onReplyClick: (
ev: Parameters<MouseEventHandler<HTMLButtonElement>>[0],
startThread?: boolean
) => void;
onEditId?: (eventId?: string) => void; onEditId?: (eventId?: string) => void;
onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void; onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
reply?: ReactNode; reply?: ReactNode;
@ -859,6 +862,8 @@ export const Message = as<'div', MessageProps>(
}, 100); }, 100);
}; };
const isThreadedMessage = mEvent.threadRootId !== undefined;
return ( return (
<MessageBase <MessageBase
className={classNames(css.MessageBase, className)} className={classNames(css.MessageBase, className)}
@ -921,6 +926,17 @@ export const Message = as<'div', MessageProps>(
> >
<Icon src={Icons.ReplyArrow} size="100" /> <Icon src={Icons.ReplyArrow} size="100" />
</IconButton> </IconButton>
{!isThreadedMessage && (
<IconButton
onClick={(ev) => onReplyClick(ev, true)}
data-event-id={mEvent.getId()}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon src={Icons.ThreadPlus} size="100" />
</IconButton>
)}
{canEditEvent(mx, mEvent) && onEditId && ( {canEditEvent(mx, mEvent) && onEditId && (
<IconButton <IconButton
onClick={() => onEditId(mEvent.getId())} onClick={() => onEditId(mEvent.getId())}
@ -1000,6 +1016,27 @@ export const Message = as<'div', MessageProps>(
Reply Reply
</Text> </Text>
</MenuItem> </MenuItem>
{!isThreadedMessage && (
<MenuItem
size="300"
after={<Icon src={Icons.ThreadPlus} size="100" />}
radii="300"
data-event-id={mEvent.getId()}
onClick={(evt: any) => {
onReplyClick(evt, true);
closeMenu();
}}
>
<Text
className={css.MessageMenuItemText}
as="span"
size="T300"
truncate
>
Reply in Thread
</Text>
</MenuItem>
)}
{canEditEvent(mx, mEvent) && onEditId && ( {canEditEvent(mx, mEvent) && onEditId && (
<MenuItem <MenuItem
size="300" size="300"