diff --git a/frontend/app.js b/frontend/app.js
index 2e7b692..43d55ba 100644
--- a/frontend/app.js
+++ b/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 = `
-
- `;
- button.title = 'Copy to clipboard';
+ const displayText = language || this.t('common.copy_to_clipboard').split(' ')[0]; // Use first word as fallback
+ button.innerHTML = `${displayText}`;
+ button.dataset.originalText = displayText; // Store for restore after copy
+ button.title = this.t('common.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
- button.innerHTML = `
-
- `;
+ // Visual feedback - show localized "Copied!"
+ button.innerHTML = `${copiedText}`;
button.style.backgroundColor = 'rgba(34, 197, 94, 0.8)';
- button.title = 'Copied!';
+ button.title = copiedText;
// Reset after 2 seconds
setTimeout(() => {
- button.innerHTML = `
-
- `;
+ button.innerHTML = `${originalText}`;
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 = `${copiedText}`;
button.style.backgroundColor = 'rgba(34, 197, 94, 0.8)';
setTimeout(() => {
- button.innerHTML = `
-
- `;
+ button.innerHTML = `${originalText}`;
button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
}, 2000);
} catch (fallbackErr) {
diff --git a/locales/de-DE.json b/locales/de-DE.json
index 7b1307b..746b4c9 100644
--- a/locales/de-DE.json
+++ b/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."
},
diff --git a/locales/en-GB.json b/locales/en-GB.json
index 0880747..b5bc797 100644
--- a/locales/en-GB.json
+++ b/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."
},
diff --git a/locales/en-US.json b/locales/en-US.json
index 10ede19..9c35a5c 100644
--- a/locales/en-US.json
+++ b/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."
},
diff --git a/locales/es-ES.json b/locales/es-ES.json
index 6d3fe51..bb29a64 100644
--- a/locales/es-ES.json
+++ b/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."
},
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index 34009d5..26c35e9 100644
--- a/locales/fr-FR.json
+++ b/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."
},
diff --git a/locales/sl-SI.json b/locales/sl-SI.json
index ad72096..2e115f8 100644
--- a/locales/sl-SI.json
+++ b/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."
},
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index f4daae1..d298624 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -23,7 +23,8 @@
"loading": "加载中...",
"saved": "✓ 已保存",
"saving": "保存中...",
- "copied": "✓ 已复制!",
+ "copied": "已复制!",
+ "copy_to_clipboard": "复制到剪贴板",
"failed": "{{action}} 失败。请重试。"
},