Update -> refactor and optimize UI , code ,...

public/assets/js/app.js

@@ -1,38 +1,106 @@
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener('DOMContentLoaded', () => {
 
-    const form = document.getElementById("pasteForm");
-    const resultBox = document.getElementById("result");
+    /* ── Create-paste page ── */
+    const pasteForm  = document.getElementById('pasteForm');
+    const resultBox  = document.getElementById('result');
+    const pasteText  = document.getElementById('pasteText');
+    const charCount  = document.getElementById('charCount');
+    const submitBtn  = document.getElementById('submitBtn');
 
-    form.addEventListener("submit", async (e) => {
-        e.preventDefault();
+    if (pasteText && charCount) {
+        const update = () => {
+            charCount.textContent = pasteText.value.length.toLocaleString();
+            pasteText.style.height = 'auto';
+            pasteText.style.height = Math.max(280, pasteText.scrollHeight) + 'px';
+        };
+        pasteText.addEventListener('input', update);
+        update();
+    }
 
-        const formData = new FormData(form);
+    if (pasteForm) {
+        pasteForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
 
-        const response = await fetch("/index.php?action=save", {
-            method: "POST",
-            body: formData
+            if (!pasteText || pasteText.value.trim() === '') {
+                pasteText.focus();
+                pasteText.style.borderColor = 'var(--error)';
+                setTimeout(() => pasteText.style.borderColor = '', 1200);
+                return;
+            }
+
+            submitBtn.classList.add('loading');
+            submitBtn.querySelector('span').textContent = 'Creating...';
+
+            try {
+                const res  = await fetch('/index.php?action=save', {
+                    method: 'POST',
+                    body: new FormData(pasteForm),
+                });
+                const data = await res.json();
+
+                if (!data.success) {
+                    showError(data.message || 'Something went wrong.');
+                    return;
+                }
+
+                const linkInput = document.getElementById('pasteLink');
+                const viewLink  = document.getElementById('viewLink');
+                linkInput.value = data.url;
+                viewLink.href   = data.url;
+                resultBox.removeAttribute('hidden');
+                resultBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+                pasteText.value = '';
+                if (charCount) charCount.textContent = '0';
+
+            } catch {
+                showError('Network error. Please try again.');
+            } finally {
+                submitBtn.classList.remove('loading');
+                submitBtn.querySelector('span').textContent = 'Create Secure Link';
+            }
         });
 
-        const data = await response.json();
-
-        if (!data.success) {
-            resultBox.innerHTML = "<div class='error'>" + data.message + "</div>";
-            return;
+        function showError(msg) {
+            resultBox.removeAttribute('hidden');
+            resultBox.style.borderLeftColor = 'var(--error)';
+            resultBox.innerHTML = `
+                <div class="alert alert-error">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                    ${msg}
+                </div>`;
         }
+    }
 
-        resultBox.innerHTML = `
-            <h3>Paste Created</h3>
-
-            <input type="text" id="pasteLink" value="${data.url}" readonly style="width:100%; padding:8px;">
-
-            <button id="copyBtn">Copy Link</button>
-        `;
-
-        document.getElementById("copyBtn").addEventListener("click", () => {
-            const input = document.getElementById("pasteLink");
-            navigator.clipboard.writeText(input.value);
-            alert("Link copied!");
-        });
+    /* ── Copy link button (result box) ── */
+    document.addEventListener('click', (e) => {
+        const btn = e.target.closest('#copyLinkBtn');
+        if (!btn) return;
+        const val = document.getElementById('pasteLink')?.value;
+        if (!val) return;
+        copyToClipboard(val, btn, 'Copied!', 'Copy');
     });
 
+    /* ── View-paste page: copy content ── */
+    const copyBtn = document.getElementById('copyBtn');
+    if (copyBtn) {
+        copyBtn.addEventListener('click', () => {
+            const content = document.getElementById('pasteContent')?.innerText;
+            if (!content) return;
+            copyToClipboard(content, copyBtn, 'Copied!', 'Copy');
+        });
+    }
+
+    /* ── Shared helper ── */
+    function copyToClipboard(text, btn, successLabel, defaultLabel) {
+        navigator.clipboard.writeText(text).then(() => {
+            const span = btn.querySelector('span') || btn;
+            btn.classList.add('copied');
+            span.textContent = successLabel;
+            setTimeout(() => {
+                btn.classList.remove('copied');
+                span.textContent = defaultLabel;
+            }, 2000);
+        });
+    }
 });