added language to copy to clipboard/localize messages

frontend/app.js

@@ -3909,22 +3909,35 @@ function noteApp() {
         
         // Add copy button to code block
         addCopyButtonToCodeBlock(preElement) {
-            // Create copy button
+            // Extract language from code element class (e.g., "language-toml" -> "TOML")
+            const codeElement = preElement.querySelector('code');
+            let language = '';
+            if (codeElement && codeElement.className) {
+                const match = codeElement.className.match(/language-(\w+)/);
+                if (match) {
+                    const langMap = {
+                        'js': 'JavaScript', 'ts': 'TypeScript', 'py': 'Python',
+                        'rb': 'Ruby', 'cs': 'C#', 'cpp': 'C++', 'sh': 'Shell',
+                        'bash': 'Bash', 'zsh': 'Zsh', 'yml': 'YAML', 'md': 'Markdown'
+                    };
+                    const rawLang = match[1].toLowerCase();
+                    language = langMap[rawLang] || match[1].toUpperCase();
+                }
+            }
+            
+            // Create copy button with language label
             const button = document.createElement('button');
             button.className = 'copy-code-button';
-            button.innerHTML = `
+            const displayText = language || this.t('common.copy_to_clipboard').split(' ')[0]; // Use first word as fallback
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            button.innerHTML = `<span>${displayText}</span>`;
-                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+            button.dataset.originalText = displayText; // Store for restore after copy
-                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            button.title = this.t('common.copy_to_clipboard');
-                </svg>
-            `;
-            button.title = 'Copy to clipboard';
             
             // Style the button
             button.style.position = 'absolute';
             button.style.top = '8px';
             button.style.right = '8px';
-            button.style.padding = '6px';
+            button.style.padding = '4px 10px';
             button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
             button.style.border = 'none';
             button.style.borderRadius = '4px';
@@ -3936,6 +3949,11 @@ function noteApp() {
             button.style.alignItems = 'center';
             button.style.justifyContent = 'center';
             button.style.zIndex = '10';
+            button.style.fontSize = '11px';
+            button.style.fontWeight = '600';
+            button.style.fontFamily = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace';
+            button.style.textTransform = 'uppercase';
+            button.style.letterSpacing = '0.5px';
             
             // Style the pre element to be relative
             preElement.style.position = 'relative';
@@ -3959,28 +3977,23 @@ function noteApp() {
                 
                 const code = codeElement.textContent;
                 
+                const originalText = button.dataset.originalText;
+                const copiedText = this.t('common.copied');
+                const copyTitle = this.t('common.copy_to_clipboard');
+                
                 try {
                     await navigator.clipboard.writeText(code);
                     
-                    // Visual feedback - change icon to checkmark
+                    // Visual feedback - show localized "Copied!"
-                    button.innerHTML = `
+                    button.innerHTML = `<span>${copiedText}</span>`;
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <polyline points="20 6 9 17 4 12"></polyline>
-                        </svg>
-                    `;
                     button.style.backgroundColor = 'rgba(34, 197, 94, 0.8)';
-                    button.title = 'Copied!';
+                    button.title = copiedText;
                     
                     // Reset after 2 seconds
                     setTimeout(() => {
-                        button.innerHTML = `
+                        button.innerHTML = `<span>${originalText}</span>`;
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                            </svg>
-                        `;
                         button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
-                        button.title = 'Copy to clipboard';
+                        button.title = copyTitle;
                     }, 2000);
                 } catch (err) {
                     console.error('Failed to copy code:', err);
@@ -3995,19 +4008,10 @@ function noteApp() {
                     
                     try {
                         document.execCommand('copy');
-                        button.innerHTML = `
+                        button.innerHTML = `<span>${copiedText}</span>`;
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <polyline points="20 6 9 17 4 12"></polyline>
-                            </svg>
-                        `;
                         button.style.backgroundColor = 'rgba(34, 197, 94, 0.8)';
                         setTimeout(() => {
-                            button.innerHTML = `
+                            button.innerHTML = `<span>${originalText}</span>`;
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                                </svg>
-                            `;
                             button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
                         }, 2000);
                     } catch (fallbackErr) {

locales/de-DE.json

@@ -23,7 +23,8 @@
     "loading": "Laden...",
     "saved": "✓ Gespeichert",
     "saving": "Speichern...",
-    "copied": "✓ Kopiert!",
+    "copied": "Kopiert!",
+    "copy_to_clipboard": "In Zwischenablage kopieren",
     "failed": "{{action}} fehlgeschlagen. Bitte versuche es erneut."
   },
 

locales/en-GB.json

@@ -23,7 +23,8 @@
     "loading": "Loading...",
     "saved": "✓ Saved",
     "saving": "Saving...",
-    "copied": "✓ Copied!",
+    "copied": "Copied!",
+    "copy_to_clipboard": "Copy to clipboard",
     "failed": "Failed to {{action}}. Please try again."
   },
 

locales/en-US.json

@@ -23,7 +23,8 @@
     "loading": "Loading...",
     "saved": "✓ Saved",
     "saving": "Saving...",
-    "copied": "✓ Copied!",
+    "copied": "Copied!",
+    "copy_to_clipboard": "Copy to clipboard",
     "failed": "Failed to {{action}}. Please try again."
   },
 

locales/es-ES.json

@@ -23,7 +23,8 @@
     "loading": "Cargando...",
     "saved": "✓ Guardado",
     "saving": "Guardando...",
-    "copied": "✓ ¡Copiado!",
+    "copied": "¡Copiado!",
+    "copy_to_clipboard": "Copiar al portapapeles",
     "failed": "Error al {{action}}. Por favor, inténtalo de nuevo."
   },
 

locales/fr-FR.json

@@ -23,7 +23,8 @@
     "loading": "Chargement...",
     "saved": "✓ Enregistré",
     "saving": "Enregistrement...",
-    "copied": "✓ Copié !",
+    "copied": "Copié !",
+    "copy_to_clipboard": "Copier dans le presse-papiers",
     "failed": "Échec de {{action}}. Veuillez réessayer."
   },
 

locales/sl-SI.json

@@ -23,7 +23,8 @@
     "loading": "Nalaganje...",
     "saved": "✓ Shranjeno",
     "saving": "Shranjevanje...",
-    "copied": "✓ Kopirano!",
+    "copied": "Kopirano!",
+    "copy_to_clipboard": "Kopiraj v odložišče",
     "failed": "Napaka pri {{action}}. Prosimo, poskusite znova."
   },
 

locales/zh-CN.json

@@ -23,7 +23,8 @@
     "loading": "加载中...",
     "saved": "✓ 已保存",
     "saving": "保存中...",
-    "copied": "✓ 已复制!",
+    "copied": "已复制!",
+    "copy_to_clipboard": "复制到剪贴板",
     "failed": "{{action}} 失败。请重试。"
   },