diff --git a/web/src/icons/share.svg b/web/src/icons/share.svg index 9d1a7d3..f86fdd4 100644 --- a/web/src/icons/share.svg +++ b/web/src/icons/share.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/web/src/ui/timeline/menu/ConfirmWithMessageModal.tsx b/web/src/ui/timeline/menu/ConfirmWithMessageModal.tsx index d8699a1..9028a32 100644 --- a/web/src/ui/timeline/menu/ConfirmWithMessageModal.tsx +++ b/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 = ({ } -export const ConfirmWithoutMessageModal = ({ - evt, title, description, confirmButton, onConfirm, -}: Omit) => { - const closeModal = use(ModalCloseContext) - const onConfirmWrapped = (evt: React.FormEvent) => { - evt.preventDefault() - closeModal() - onConfirm("") - } - return
-

{title}

-
- -
-
- {description} -
-
- - -
-
-} - export default ConfirmWithMessageModal diff --git a/web/src/ui/timeline/menu/ShareModal.tsx b/web/src/ui/timeline/menu/ShareModal.tsx new file mode 100644 index 0000000..b30c802 --- /dev/null +++ b/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
+

{title}

+
+ +
+ + + + + + + + + + + +
Use matrix.to link + setUseMatrixTo(evt.target.checked)} + /> +
Link to this specific event + setIncludeEvent(evt.target.checked)} + /> +
+
+ Share: {link} +
+
+ + +
+
+} + +export default ShareModal diff --git a/web/src/ui/timeline/menu/useSecondaryItems.tsx b/web/src/ui/timeline/menu/useSecondaryItems.tsx index e3f1934..0bbe635 100644 --- a/web/src/ui/timeline/menu/useSecondaryItems.tsx +++ b/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: - {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}`)) + confirmButton="Copy to clipboard" + onConfirm={(useMatrixTo: boolean, includeEvent: boolean) => { + navigator.clipboard.writeText(generateLink(useMatrixTo, includeEvent)).catch( + err => window.alert(`Failed to copy link: ${err}`), + ) }} + generateLink={generateLink} /> , })