From 19709f749a08d94fbc3f779594d9826d9cdce686 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 14 Dec 2025 22:50:26 +0200
Subject: [PATCH] feat(layout): integrate copy reference to clipboard button

---
 .../client/src/widgets/ribbon/NoteActions.tsx |  4 +-
 .../src/widgets/ribbon/NoteActionsCustom.tsx  | 37 ++++++++++++++-----
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/widgets/ribbon/NoteActions.tsx b/apps/client/src/widgets/ribbon/NoteActions.tsx
index 685549afc..6d2f46bda 100644
--- a/apps/client/src/widgets/ribbon/NoteActions.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActions.tsx
@@ -29,10 +29,10 @@ import NoteActionsCustom from "./NoteActionsCustom";
 const isNewLayout = isExperimentalFeatureEnabled("new-layout");
 
 export default function NoteActions() {
-    const { note, noteContext } = useNoteContext();
+    const { note, ntxId, noteContext } = useNoteContext();
     return (
         <div className="ribbon-button-container" style={{ contain: "none" }}>
-            {note && <NoteActionsCustom note={note} />}
+            {note && <NoteActionsCustom note={note} ntxId={ntxId} />}
             <MovePaneButton direction="left" />
             <MovePaneButton direction="right" />
             <ClosePaneButton />
diff --git a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
index 40a5b5892..8549020bb 100644
--- a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
@@ -1,24 +1,28 @@
+import { useContext } from "preact/hooks";
+
 import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { downloadFileNote, openNoteExternally } from "../../services/open";
 import protected_session_holder from "../../services/protected_session_holder";
 import ActionButton from "../react/ActionButton";
 import { FormFileUploadActionButton } from "../react/FormFileUpload";
+import { ParentComponent } from "../react/react_utils";
 import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
 import { buildUploadNewImageRevisionListener } from "./ImagePropertiesTab";
 
 interface NoteActionsCustomProps {
     note: FNote;
+    ntxId: string;
 }
 
 /**
  * Part of {@link NoteActions} on the new layout, but are rendered with a slight spacing
  * from the rest of the note items and the buttons differ based on the note type.
  */
-export default function NoteActionsCustom({ note }: NoteActionsCustomProps) {
+export default function NoteActionsCustom(props: NoteActionsCustomProps) {
     return (
         <div className="note-actions-custom">
-            <NoteActionsCustomInner note={note} />
+            <NoteActionsCustomInner {...props} />
         </div>
     );
 }
@@ -33,22 +37,23 @@ function NoteActionsCustomInner(props: NoteActionsCustomProps) {
     }
 }
 
-function FileActions({ note }: NoteActionsCustomProps) {
+function FileActions(props: NoteActionsCustomProps) {
     return (
         <>
-            <UploadNewRevisionButton note={note} onChange={buildUploadNewFileRevisionListener(note)} />
-            <OpenExternallyButton note={note} />
-            <DownloadFileButton note={note} />
+            <UploadNewRevisionButton {...props} onChange={buildUploadNewFileRevisionListener(props.note)} />
+            <OpenExternallyButton {...props} />
+            <DownloadFileButton {...props} />
         </>
     );
 }
 
-function ImageActions({ note }: NoteActionsCustomProps) {
+function ImageActions(props: NoteActionsCustomProps) {
     return (
         <>
-            <UploadNewRevisionButton note={note} onChange={buildUploadNewImageRevisionListener(note)} />
-            <OpenExternallyButton note={note} />
-            <DownloadFileButton note={note} />
+            <CopyReferenceToClipboardButton {...props} />
+            <UploadNewRevisionButton {...props} onChange={buildUploadNewImageRevisionListener(props.note)} />
+            <OpenExternallyButton {...props} />
+            <DownloadFileButton {...props} />
         </>
     );
 }
@@ -93,4 +98,16 @@ function DownloadFileButton({ note }: NoteActionsCustomProps) {
         />
     );
 }
+
+function CopyReferenceToClipboardButton({ ntxId }: NoteActionsCustomProps) {
+    const parentComponent = useContext(ParentComponent);
+
+    return (
+        <ActionButton
+            text={t("image_properties.copy_reference_to_clipboard")}
+            icon="bx bx-copy"
+            onClick={() => parentComponent?.triggerEvent("copyImageReferenceToClipboard", { ntxId })}
+        />
+    );
+}
 //#endregion