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
This commit is contained in:
Chris 2026-04-25 01:31:05 +03:00 committed by GitHub
parent dd9c298089
commit ecb7186e3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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"