Add options to copy matrix.to and with/out event, +preview

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

@@ -28,7 +28,7 @@ interface ConfirmWithMessageProps {
 	onConfirm: (reason: string) => void
 }
 
-export const ConfirmWithMessageModal = ({
+const ConfirmWithMessageModal = ({
 	evt, title, description, placeholder, confirmButton, onConfirm,
 }: ConfirmWithMessageProps) => {
 	const [reason, setReason] = useState("")
@@ -60,28 +60,4 @@ export 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/ShareModal.tsx

@@ -0,0 +1,65 @@
+import React, { use, useState } from "react"
+import { MemDBEvent } from "@/api/types"
+import { ModalCloseContext } from "@/ui/modal"
+import TimelineEvent from "@/ui/timeline/TimelineEvent.tsx"
+import Toggle from "@/ui/util/Toggle.tsx"
+
+interface ConfirmWithMessageProps {
+	evt: MemDBEvent
+	title: string
+	confirmButton: string
+	onConfirm: (useMatrixTo: boolean, includeEvent: boolean) => void
+	generateLink: (useMatrixTo: boolean, includeEvent: boolean) => string
+}
+
+const ShareModal = ({ evt, title, confirmButton, onConfirm, generateLink }: ConfirmWithMessageProps) => {
+	const [useMatrixTo, setUseMatrixTo] = useState(false)
+	const [includeEvent, setIncludeEvent] = useState(true)
+	const closeModal = use(ModalCloseContext)
+	const onConfirmWrapped = (evt: React.FormEvent) => {
+		evt.preventDefault()
+		closeModal()
+		onConfirm(useMatrixTo, includeEvent)
+	}
+
+	const link = generateLink(useMatrixTo, includeEvent)
+	return <form onSubmit={onConfirmWrapped}>
+		<h3>{title}</h3>
+		<div className="timeline-event-container">
+			<TimelineEvent evt={evt} prevEvt={null} disableMenu={true}/>
+		</div>
+		<table>
+			<tbody>
+				<tr>
+					<td>Use matrix.to link</td>
+					<td>
+						<Toggle
+							id="useMatrixTo"
+							checked={useMatrixTo}
+							onChange={evt => setUseMatrixTo(evt.target.checked)}
+						/>
+					</td>
+				</tr>
+				<tr>
+					<td>Link to this specific event</td>
+					<td>
+						<Toggle
+							id="shareEvent"
+							checked={includeEvent}
+							onChange={evt => setIncludeEvent(evt.target.checked)}
+						/>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<div className="description">
+			Share: <a href={link} target="_blank" rel="noreferrer">{link}</a>
+		</div>
+		<div className="confirm-buttons">
+			<button type="button" onClick={closeModal}>Cancel</button>
+			<button type="submit">{confirmButton}</button>
+		</div>
+	</form>
+}
+
+export default ShareModal

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

@@ -17,10 +17,11 @@ import { use } from "react"
 import Client from "@/api/client.ts"
 import { useRoomState } from "@/api/statestore"
 import { MemDBEvent } from "@/api/types"
+import ShareModal from "@/ui/timeline/menu/ShareModal.tsx"
 import { ModalCloseContext, ModalContext } from "../../modal"
 import { RoomContext, RoomContextData } from "../../roomview/roomcontext.ts"
 import JSONView from "../../util/JSONView.tsx"
-import { ConfirmWithMessageModal, ConfirmWithoutMessageModal } from "./ConfirmWithMessageModal.tsx"
+import ConfirmWithMessageModal from "./ConfirmWithMessageModal.tsx"
 import { getPending, getPowerLevels } from "./util.ts"
 import ViewSourceIcon from "@/icons/code.svg?react"
 import DeleteIcon from "@/icons/delete.svg?react"
@@ -91,20 +92,38 @@ export const useSecondaryItems = (
 	}
 
 	const onClickShareEvent = () => {
+		const generateLink = (useMatrixTo: boolean, includeEvent: boolean) => {
+			let generatedUrl = useMatrixTo ? "https://matrix.to/#/" : "matrix:roomid/"
+			if(useMatrixTo) {
+				generatedUrl += evt.room_id
+			} else {
+				generatedUrl += `!${evt.room_id.slice(1)}`
+			}
+			if(includeEvent) {
+				if(useMatrixTo) {
+					generatedUrl += `/${evt.event_id}`
+				}
+				else {
+					generatedUrl += `/e/${evt.event_id.slice(1)}`
+				}
+			}
+			return generatedUrl
+		}
 		openModal({
 			dimmed: true,
 			boxed: true,
 			innerBoxClass: "confirm-message-modal",
 			content: <RoomContext value={roomCtx}>
-				<ConfirmWithoutMessageModal
+				<ShareModal
 					evt={evt}
 					title="Share Message"
-					description="Copy a share link to the clipboard?"
+					confirmButton="Copy to clipboard"
-					confirmButton="Share"
+					onConfirm={(useMatrixTo: boolean, includeEvent: boolean) => {
-					onConfirm={() => {navigator.clipboard.writeText(
+						navigator.clipboard.writeText(generateLink(useMatrixTo, includeEvent)).catch(
-						`matrix:roomid/${evt.room_id.slice(1)}/e/${evt.event_id.slice(1)}`)
+							err => window.alert(`Failed to copy link: ${err}`),
-						.catch(err => window.alert(`Failed to copy link: ${err}`))
+						)
 					}}
+					generateLink={generateLink}
 				/>
 			</RoomContext>,
 		})