add copy-on-click for the note id

src/main/resources/static/index.html

@@ -16,7 +16,7 @@
 <div class="header">
     <div class="title" onclick="window.location.href='/'" style="cursor: pointer;"><img src="logo.png" alt="kNotes logo"/> kNotes</div>
     <div class="header-right">
-        <span class="note-id" id="noteIdDisplay" style="display: none;"></span>
+        <span class="note-id" id="noteIdDisplay" style="display: none; cursor: pointer;" onclick="copyNoteLink()" title="Click to copy note link"></span>
         <div class="theme-switch" id="themeSwitch" onclick="toggleTheme()" title="Toggle dark/light theme"></div>
         <button class="new-btn" onclick="showIdInput()">Open</button>
         <button class="new-btn" onclick="newNote()">New</button>

src/main/resources/static/script.js

@@ -279,6 +279,46 @@ function hideNoteId() {
     }
 }
 
+async function copyNoteLink() {
+    try {
+        const noteIdDisplay = document.getElementById('noteIdDisplay');
+        if (!noteIdDisplay) {
+            console.error('Element with ID "noteIdDisplay" not found');
+            return;
+        }
+
+        // Get the current URL
+        const currentUrl = window.location.href;
+
+        // Copy to clipboard
+        await navigator.clipboard.writeText(currentUrl);
+
+        // Visual feedback - temporarily show "Copied!" text
+        const originalText = noteIdDisplay.textContent;
+        noteIdDisplay.textContent = 'Copied!';
+        noteIdDisplay.style.color = 'var(--accent-primary)';
+
+        // Restore original text after 2 seconds
+        setTimeout(() => {
+            noteIdDisplay.textContent = originalText;
+            noteIdDisplay.style.color = '';
+        }, 2000);
+
+    } catch (error) {
+        console.error('Failed to copy note link:', error);
+
+        // Fallback for older browsers - try to select the URL
+        const noteIdDisplay = document.getElementById('noteIdDisplay');
+        if (noteIdDisplay) {
+            const originalText = noteIdDisplay.textContent;
+            noteIdDisplay.textContent = 'Copy failed';
+            setTimeout(() => {
+                noteIdDisplay.textContent = originalText;
+            }, 2000);
+        }
+    }
+}
+
 async function newNote() {
     try {
         const response = await fetch(API_BASE, {

src/main/resources/static/style.css

@@ -100,6 +100,17 @@ body {
     background: var(--bg-tertiary);
     padding: 4px 8px;
     border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.note-id:hover {
+    background: var(--accent-primary);
+    color: white;
+}
+
+.note-id:active {
+    background: var(--accent-primary-hover);
+    color: white;
 }
 
 .header-right {