From 4a63057336eb3d01a497a003732f7247f888236c Mon Sep 17 00:00:00 2001
From: plate <plate.email@proton.me>
Date: Sat, 2 Nov 2024 04:05:59 +0000
Subject: [PATCH] add a copy button in the view source modal

---
 web/src/icons/copy.svg                       | 1 +
 web/src/ui/timeline/menu/ViewSourceModal.tsx | 9 +++++++++
 2 files changed, 10 insertions(+)
 create mode 100644 web/src/icons/copy.svg

diff --git a/web/src/icons/copy.svg b/web/src/icons/copy.svg
new file mode 100644
index 0000000..c8abe8e
--- /dev/null
+++ b/web/src/icons/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-520q0-17 11.5-28.5T160-720q17 0 28.5 11.5T200-680v520h400q17 0 28.5 11.5T640-120q0 17-11.5 28.5T600-80H200Zm160-240v-480 480Z"/></svg>
diff --git a/web/src/ui/timeline/menu/ViewSourceModal.tsx b/web/src/ui/timeline/menu/ViewSourceModal.tsx
index 630929a..fa1840d 100644
--- a/web/src/ui/timeline/menu/ViewSourceModal.tsx
+++ b/web/src/ui/timeline/menu/ViewSourceModal.tsx
@@ -15,13 +15,22 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { MemDBEvent } from "@/api/types"
 import JSONView from "../../util/JSONView.tsx"
+import CopyIcon from "@/icons/copy.svg?react"
 
 interface ViewSourceModalProps {
 	evt: MemDBEvent
 }
 
+// TODO: change the copy button's text on copy, without having typescript scream at me.
+// will i need to make a component for the copy button and change its state? hmm
+const copyButtonOnClick = (evt: MemDBEvent) => {
+	navigator.clipboard.writeText(JSON.stringify(evt, null, 4))
+}
+
+// TODO check with tulir that he in fact uses material design icons. i got the copy icon from google's site
 const ViewSourceModal = ({ evt }: ViewSourceModalProps) => {
 	return <div className="view-source-modal">
+		<button onClick={() => {copyButtonOnClick(evt)}}><CopyIcon/> Copy</button>
 		<JSONView data={evt} />
 	</div>
 }