Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-19 18:13:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

web/timeline: mark thread replies

Browse source
This commit is contained in:
Tulir Asokan 2024-10-22 20:00:15 +03:00
parent c4266fbc22
commit 082e5642aa
4 changed files with 24 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
web/src/ui/composer/MessageComposer.tsx
View file

@ -255,7 +255,12 @@ const MessageComposer = ({ room, scrollToBottomRef, setReplyToRef }: MessageComp
setState={setState}
setAutocomplete={setAutocomplete}
/></div>}
{replyToEvt && <ReplyBody room={room} event={replyToEvt} onClose={closeReply}/>}
{replyToEvt && <ReplyBody
room={room}
event={replyToEvt}
onClose={closeReply}
isThread={replyToEvt.content["m.relates_to"]?.rel_type === "m.thread"}
/>}
{loadingMedia && <div className="composer-media"><ScaleLoader/></div>}
{state.media && <ComposerMedia content={state.media} clearMedia={clearMedia}/>}
<div className="input-area">

6
web/src/ui/timeline/ReplyBody.css
View file

@ -27,6 +27,12 @@ blockquote.reply-body {
color: #666;
}
&.thread > div.reply-sender > span.event-sender::after {
content: " (thread)";
font-size: .75rem;
color: #666;
}
> div.reply-sender {
display: flex;
align-items: center;

10
web/src/ui/timeline/ReplyBody.tsx
View file

@ -25,15 +25,17 @@ import "./ReplyBody.css"
interface ReplyBodyProps {
room: RoomStateStore
event: MemDBEvent
isThread: boolean
onClose?: (evt: React.MouseEvent) => void
}
interface ReplyIDBodyProps {
room: RoomStateStore
eventID: EventID
isThread: boolean
}
export const ReplyIDBody = ({ room, eventID }: ReplyIDBodyProps) => {
export const ReplyIDBody = ({ room, eventID, isThread }: ReplyIDBodyProps) => {
const event = useRoomEvent(room, eventID)
if (!event) {
// This caches whether the event is requested or not, so it doesn't need to be wrapped in an effect.
@ -42,7 +44,7 @@ export const ReplyIDBody = ({ room, eventID }: ReplyIDBodyProps) => {
Reply to unknown event<br/><code>{eventID}</code>
</blockquote>
}
return <ReplyBody room={room} event={event}/>
return <ReplyBody room={room} event={event} isThread={isThread}/>
}
const onClickReply = (evt: React.MouseEvent) => {
@ -62,13 +64,13 @@ const onClickReply = (evt: React.MouseEvent) => {
}
}
export const ReplyBody = ({ room, event, onClose }: ReplyBodyProps) => {
export const ReplyBody = ({ room, event, onClose, isThread }: ReplyBodyProps) => {
const memberEvt = useRoomState(room, "m.room.member", event.sender)
const memberEvtContent = memberEvt?.content as MemberEventContent | undefined
const BodyType = getBodyType(event, true)
return <blockquote
data-reply-to={event.event_id}
className={`reply-body ${onClose ? "composer" : ""}`}
className={`reply-body ${onClose ? "composer" : ""} ${isThread ? "thread" : ""}`}
onClick={onClickReply}
>
<div className="reply-sender">

8
web/src/ui/timeline/TimelineEvent.tsx
View file

@ -92,7 +92,7 @@ const TimelineEvent = ({ room, evt, prevEvt, setReplyToRef }: TimelineEventProps
const fullTime = fullTimeFormatter.format(eventTS)
const shortTime = formatShortTime(eventTS)
const editTime = editEventTS ? `Edited at ${fullTimeFormatter.format(editEventTS)}` : null
const replyTo = (evt.orig_content ?? evt.content)["m.relates_to"]?.["m.in_reply_to"]?.event_id
const replyTo = evt.content["m.relates_to"]?.["m.in_reply_to"]?.event_id
const mainEvent = <div data-event-id={evt.event_id} className={wrapperClassNames.join(" ")}>
<div className="sender-avatar" title={evt.sender}>
<img
@ -114,7 +114,11 @@ const TimelineEvent = ({ room, evt, prevEvt, setReplyToRef }: TimelineEventProps
<span className="event-time" title={editTime ? `${fullTime} - ${editTime}` : fullTime}>{shortTime}</span>
</div>
<div className="event-content">
{isEventID(replyTo) && BodyType !== HiddenEvent ? <ReplyIDBody room={room} eventID={replyTo}/> : null}
{isEventID(replyTo) && BodyType !== HiddenEvent ? <ReplyIDBody
room={room}
eventID={replyTo}
isThread={evt.content["m.relates_to"]?.rel_type === "m.thread"}
/> : null}
<ContentErrorBoundary>
<BodyType room={room} sender={memberEvt} event={evt}/>
</ContentErrorBoundary>