From ecb7186e3c5845e9b67068123480948e255d1ab3 Mon Sep 17 00:00:00 2001
From: Chris <chrisvel@users.noreply.github.com>
Date: Sat, 25 Apr 2026 01:31:05 +0300
Subject: [PATCH] fix: add copy button to note details page (#1068)

- Added DocumentDuplicateIcon from Heroicons
- Implemented handleCopyNote function to copy note content to clipboard
- Added copy button in top right of note details view
- Copy button appears before edit and delete buttons
- Shows success toast when content is copied
- Fixes issue where users expected a copy button but it was missing

Fixes #1061
---
 frontend/components/Note/NoteDetails.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/frontend/components/Note/NoteDetails.tsx b/frontend/components/Note/NoteDetails.tsx
index fc4bb68..29518cf 100644
--- a/frontend/components/Note/NoteDetails.tsx
+++ b/frontend/components/Note/NoteDetails.tsx
@@ -7,6 +7,7 @@ import {
     TagIcon,
     FolderIcon,
 } from '@heroicons/react/24/solid';
+import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
 import { useToast } from '../Shared/ToastContext';
 import ConfirmDialog from '../Shared/ConfirmDialog';
 import NoteModal from './NoteModal';
@@ -93,6 +94,16 @@ const NoteDetails: React.FC = () => {
         setIsNoteModalOpen(true);
     };
 
+    const handleCopyNote = async () => {
+        if (!note) return;
+        try {
+            await navigator.clipboard.writeText(note.content);
+            showSuccessToast(t('notes.copiedToClipboard', 'Note content copied to clipboard'));
+        } catch (err) {
+            console.error('Error copying to clipboard:', err);
+        }
+    };
+
     const handleCreateProject = async (name: string) => {
         try {
             const newProject = await createProject({
@@ -209,6 +220,14 @@ const NoteDetails: React.FC = () => {
                     </div>
                     {/* Action Buttons */}
                     <div className="flex space-x-2">
+                        <button
+                            onClick={handleCopyNote}
+                            className="text-gray-500 hover:text-green-700 dark:hover:text-green-300 focus:outline-none"
+                            aria-label={t('notes.copyContent', 'Copy note content')}
+                            title={t('notes.copyContent', 'Copy note content')}
+                        >
+                            <DocumentDuplicateIcon className="h-5 w-5" />
+                        </button>
                         <button
                             onClick={handleEditNote}
                             className="text-gray-500 hover:text-blue-700 dark:hover:text-blue-300 focus:outline-none"