Update app.py

app.py

@@ -554,7 +554,7 @@ HTML_TEMPLATE = """
                 </div>
                 <ul class="translation-list">
                 {% for trans in marian %}
-                    <li class="translation-item" onclick="selectTranslation(this, {{ trans | tojson }})">
+                    <li class="translation-item" data-text="{{ trans }}" data-kind="translation">
                         <span class="translation-text">{{ trans }}</span>
                         <svg class="check-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                             <polyline points="20 6 9 17 4 12"></polyline>
@@ -584,7 +584,7 @@ HTML_TEMPLATE = """
                 <div class="variant-grid">
                 {% for variant_name, variant_data in libre.items() %}
                     {% if variant_data.success %}
-                    <div class="variant-item" onclick="selectVariant(this, {{ variant_data.text | tojson }})">
+                    <div class="variant-item" data-text="{{ variant_data.text }}" data-kind="variant">
                         <div class="variant-header">
                             <span class="variant-name">{{ variant_name }}</span>
                             <span class="variant-code">{{ variant_data.code }}</span>
@@ -624,27 +624,7 @@ HTML_TEMPLATE = """
     <div class="toast" id="toast">Copied to clipboard!</div>
 
     <script>
-        let selectedText = '';
-
-        function selectTranslation(element, text) {
-            element.parentElement.querySelectorAll('.translation-item').forEach(item => {
-                item.classList.remove('selected');
-            });
-            element.classList.add('selected');
-            selectedText = text;
-            copyText(text, true);
-        }
-
-        function selectVariant(element, text) {
-            document.querySelectorAll('.variant-item').forEach(item => {
-                item.classList.remove('selected');
-            });
-            element.classList.add('selected');
-            selectedText = text;
-            copyText(text, true);
-        }
-
-        async function copyText(text, showToast = true) {
+        async function copyText(text) {
             let copied = false;
 
             if (navigator.clipboard && window.isSecureContext) {
@@ -672,12 +652,7 @@ HTML_TEMPLATE = """
                 }
             }
 
-            if (showToast) {
-                showToastMessage(
-                    copied ? 'Copied to clipboard!' : 'Copy failed — please copy manually',
-                    !copied
-                );
-            }
+            return copied;
         }
 
         function showToastMessage(message, isError = false) {
@@ -688,11 +663,44 @@ HTML_TEMPLATE = """
             setTimeout(() => toast.classList.remove('show'), 2000);
         }
 
-        document.getElementById('translateForm').addEventListener('submit', function() {
-            const btn = document.getElementById('submitBtn');
-            btn.disabled = true;
-            btn.innerHTML = '<span class="loading"></span> Translating...';
-        });
+        function setupClickToCopy() {
+            // MarianMT translation items
+            document.querySelectorAll('.translation-item[data-text]').forEach(item => {
+                item.addEventListener('click', async function() {
+                    document.querySelectorAll('.translation-item').forEach(el => el.classList.remove('selected'));
+                    this.classList.add('selected');
+                    const copied = await copyText(this.dataset.text);
+                    showToastMessage(
+                        copied ? 'Copied to clipboard!' : 'Copy failed — please copy manually',
+                        !copied
+                    );
+                });
+            });
+
+            // LibreTranslate variant items (error ones have no data-text, so they're skipped)
+            document.querySelectorAll('.variant-item[data-text]').forEach(item => {
+                item.addEventListener('click', async function() {
+                    document.querySelectorAll('.variant-item').forEach(el => el.classList.remove('selected'));
+                    this.classList.add('selected');
+                    const copied = await copyText(this.dataset.text);
+                    showToastMessage(
+                        copied ? 'Copied to clipboard!' : 'Copy failed — please copy manually',
+                        !copied
+                    );
+                });
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', setupClickToCopy);
+
+        const translateForm = document.getElementById('translateForm');
+        if (translateForm) {
+            translateForm.addEventListener('submit', function() {
+                const btn = document.getElementById('submitBtn');
+                btn.disabled = true;
+                btn.innerHTML = '<span class="loading"></span> Translating...';
+            });
+        }
     </script>
 </body>
 </html>