Add a "share event" button

web/src/icons/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm480-280q17 0 28.5-11.5T720-760q0-17-11.5-28.5T680-800q-17 0-28.5 11.5T640-760q0 17 11.5 28.5T680-720Zm0 520ZM200-480Zm480-280Z"/></svg>

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

@@ -28,7 +28,7 @@ interface ConfirmWithMessageProps {
 	onConfirm: (reason: string) => void
 }
 
-const ConfirmWithMessageModal = ({
+export const ConfirmWithMessageModal = ({
 	evt, title, description, placeholder, confirmButton, onConfirm,
 }: ConfirmWithMessageProps) => {
 	const [reason, setReason] = useState("")
@@ -60,4 +60,28 @@ const ConfirmWithMessageModal = ({
 	</form>
 }
 
+export const ConfirmWithoutMessageModal = ({
+	evt, title, description, confirmButton, onConfirm,
+}: Omit<ConfirmWithMessageProps, "placeholder">) => {
+	const closeModal = use(ModalCloseContext)
+	const onConfirmWrapped = (evt: React.FormEvent) => {
+		evt.preventDefault()
+		closeModal()
+		onConfirm("")
+	}
+	return <form onSubmit={onConfirmWrapped}>
+		<h3>{title}</h3>
+		<div className="timeline-event-container">
+			<TimelineEvent evt={evt} prevEvt={null} disableMenu={true}/>
+		</div>
+		<div className="confirm-description">
+			{description}
+		</div>
+		<div className="confirm-buttons">
+			<button type="button" onClick={closeModal}>Cancel</button>
+			<button type="submit">{confirmButton}</button>
+		</div>
+	</form>
+}
+
 export default ConfirmWithMessageModal

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

@@ -20,12 +20,13 @@ import { MemDBEvent } from "@/api/types"
 import { ModalCloseContext, ModalContext } from "../../modal"
 import { RoomContext, RoomContextData } from "../../roomview/roomcontext.ts"
 import JSONView from "../../util/JSONView.tsx"
-import ConfirmWithMessageModal from "./ConfirmWithMessageModal.tsx"
+import { ConfirmWithMessageModal, ConfirmWithoutMessageModal } from "./ConfirmWithMessageModal.tsx"
 import { getPending, getPowerLevels } from "./util.ts"
 import ViewSourceIcon from "@/icons/code.svg?react"
 import DeleteIcon from "@/icons/delete.svg?react"
 import PinIcon from "@/icons/pin.svg?react"
 import ReportIcon from "@/icons/report.svg?react"
+import ShareIcon from "@/icons/share.svg?react"
 import UnpinIcon from "@/icons/unpin.svg?react"
 
 export const useSecondaryItems = (
@@ -89,6 +90,26 @@ export const useSecondaryItems = (
 			.catch(err => window.alert(`Failed to ${pin ? "pin" : "unpin"} message: ${err}`))
 	}
 
+	const onClickShareEvent = () => {
+		openModal({
+			dimmed: true,
+			boxed: true,
+			innerBoxClass: "confirm-message-modal",
+			content: <RoomContext value={roomCtx}>
+				<ConfirmWithoutMessageModal
+					evt={evt}
+					title="Share Message"
+					description="Copy a share link to the clipboard?"
+					confirmButton="Share"
+					onConfirm={() => {navigator.clipboard.writeText(
+						`matrix:roomid/${evt.room_id.slice(1)}/e/${evt.event_id.slice(1)}`)
+						.catch(err => window.alert(`Failed to copy link: ${err}`))
+					}}
+				/>
+			</RoomContext>,
+		})
+	}
+
 	const [isPending, pendingTitle] = getPending(evt)
 	useRoomState(roomCtx.store, "m.room.power_levels", "")
 	// We get pins from getPinnedEvents, but use the hook anyway to subscribe to changes
@@ -104,6 +125,7 @@ export const useSecondaryItems = (
 
 	return <>
 		<button onClick={onClickViewSource}><ViewSourceIcon/>{names && "View source"}</button>
+		<button onClick={onClickShareEvent}><ShareIcon/>{names && "Share"}</button>
 		{ownPL >= pinPL && (pins.includes(evt.event_id)
 			? <button onClick={onClickPin(false)}>
 				<UnpinIcon/>{names && "Unpin message"}