GKaszewski/k-notes
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement copy note to clipboard button on note card with i18n support

Browse Source
This commit is contained in:
Gabriel Kaszewski
2025-12-26 16:08:44 +01:00
parent d4327108ee
commit 198b324646
6 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
k-notes-frontend/src/components/note-card.tsx
View File

@@ -2,7 +2,7 @@ import { type Note, useDeleteNote, useUpdateNote } from "@/hooks/use-notes";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Pin, Archive, Trash2, Edit, History } from "lucide-react";
import { Pin, Archive, Trash2, Edit, History, Copy } from "lucide-react";
import { format } from "date-fns";
import { toast } from "sonner";
import { useState } from "react";
@@ -64,6 +64,17 @@ export function NoteCard({ note }: NoteCardProps) {
}
}
const handleCopy = async (e: React.MouseEvent) => {
e.stopPropagation();
try {
const textToCopy = `${note.title}\n\n${note.content}`;
await navigator.clipboard.writeText(textToCopy);
toast.success(t("Note copied to clipboard"));
} catch (err) {
toast.error(t("Failed to copy note"));
}
}
const handleEdit = (data: any) => {
const tags = data.tags
? data.tags.split(",").map((t: string) => t.trim()).filter(Boolean)
@@ -134,6 +145,9 @@ export function NoteCard({ note }: NoteCardProps) {
<Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-black/5 dark:hover:bg-white/10" onClick={(e) => { e.stopPropagation(); setHistoryOpen(true); }} title={t("History")}>
<History className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-black/5 dark:hover:bg-white/10" onClick={handleCopy} title={t("Copy note")}>
<Copy className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-black/5 dark:hover:bg-white/10" onClick={(e) => { e.stopPropagation(); setEditing(true); }}>
<Edit className="h-4 w-4" />
</Button>