web/timeline: disable event menu options until event is sent

web/src/ui/timeline/menu/EventExtraMenu.tsx

@@ -88,6 +88,8 @@ const EventExtraMenu = ({ evt, room, style }: EventExtraMenuProps) => {
 			.catch(err => window.alert(`Failed to unpin message: ${err}`))
 	}, [closeModal, client, room, evt.event_id])
 
+	const isPending = evt.event_id.startsWith("~")
+	const pendingTitle = isPending ? "Can't action messages that haven't been sent yet" : undefined
 	const plEvent = useRoomState(room, "m.room.power_levels", "")
 	// We get pins from getPinnedEvents, but use the hook anyway to subscribe to changes
 	useRoomState(room, "m.room.pinned_events", "")
@@ -103,9 +105,14 @@ const EventExtraMenu = ({ evt, room, style }: EventExtraMenuProps) => {
 		<button onClick={onClickViewSource}><ViewSourceIcon/>View source</button>
 		{ownPL >= pinPL && (pins.includes(evt.event_id)
 			? <button onClick={onClickUnpin}><UnpinIcon/>Unpin message</button>
-			: <button onClick={onClickPin}><PinIcon/>Pin message</button>)}
+			: <button onClick={onClickPin} title={pendingTitle} disabled={isPending}><PinIcon/>Pin message</button>)}
-		<button onClick={onClickReport}><ReportIcon/>Report</button>
+		<button onClick={onClickReport} disabled={isPending} title={pendingTitle}><ReportIcon/>Report</button>
-		{canRedact && <button onClick={onClickRedact} className="redact-button"><DeleteIcon/>Remove</button>}
+		{canRedact && <button
+			onClick={onClickRedact}
+			disabled={isPending}
+			title={pendingTitle}
+			className="redact-button"
+		><DeleteIcon/>Remove</button>}
 	</div>
 }
 

web/src/ui/timeline/menu/EventMenu.tsx

@@ -84,15 +84,17 @@ const EventMenu = ({ evt, setForceOpen }: EventHoverMenuProps) => {
 		})
 	}, [evt, roomCtx, setForceOpen, openModal])
 	const isEditing = useEventAsState(roomCtx.isEditing)
+	const isPending = evt.event_id.startsWith("~")
+	const pendingTitle = isPending ? "Can't action messages that haven't been sent yet" : undefined
 	return <div className="event-hover-menu" ref={contextMenuRef}>
-		<button onClick={onClickReact}><ReactIcon/></button>
+		<button disabled={isPending} title={pendingTitle} onClick={onClickReact}><ReactIcon/></button>
 		<button
-			disabled={isEditing}
+			disabled={isEditing || isPending}
-			title={isEditing ? "Can't reply to messages while editing a message" : undefined}
+			title={isEditing ? "Can't reply to messages while editing a message" : pendingTitle}
 			onClick={onClickReply}
 		><ReplyIcon/></button>
 		{evt.sender === userID && evt.type === "m.room.message" && evt.relation_type !== "m.replace" && !evt.redacted_by
-			&& <button onClick={onClickEdit}><EditIcon/></button>}
+			&& <button onClick={onClickEdit} disabled={isPending} title={pendingTitle}><EditIcon/></button>}
 		<button onClick={onClickMore}><MoreIcon/></button>
 	</div>
 }