hghdf

public/s/js/settings.js

@@ -137,10 +137,13 @@
     const statusDiv = document.getElementById('avatar-upload-status');
     const preview = document.getElementById('avatar-preview');
 
-    const showStatus = (msg, type) => {
+    const showStatus = (msg, type = 'info') => {
+        if (msg && window.flashMessage) {
+            window.flashMessage(msg, 2500, type);
+        }
         if (statusDiv) {
             statusDiv.textContent = msg;
-            statusDiv.className = 'avatar-status ' + type;
+            statusDiv.className = 'avatar-status ' + (type || '');
         }
     };
 
@@ -177,6 +180,7 @@
             filenameSpan.textContent = file.name;
             uploadBtn.disabled = false;
             showStatus('', '');
+            uploadBtn.click();
         });
     }
 
@@ -1674,8 +1678,11 @@
 
     // Two-way sync: swatch → text input
     if (colorPicker && colorHex) {
+        const colorBadge = document.getElementById('color-picker-badge');
+        
         colorPicker.addEventListener('input', () => {
             colorHex.value = colorPicker.value;
+            if (colorBadge) colorBadge.style.background = colorPicker.value;
             const liveBox = document.getElementById('live-profile-preview-box');
             if (liveBox) {
                 liveBox.style.setProperty('--author-accent', colorPicker.value);
@@ -1683,6 +1690,11 @@
             }
         });
 
+        colorPicker.addEventListener('change', () => {
+            if (colorBadge) colorBadge.style.background = colorPicker.value;
+            if (saveColorBtn) saveColorBtn.click();
+        });
+
         // Text input → swatch (validate on each keystroke)
         colorHex.addEventListener('input', () => {
             const val = colorHex.value.trim();
@@ -1852,7 +1864,9 @@
                 const data = await res.json();
                 if (data.success) {
                     await applyFontLive(font);
-                    showStatus('Website font updated!', 'success');
+                    if (window.flashMessage) {
+                        window.flashMessage('Website font updated!', 2500, 'success');
+                    }
                 } else {
                     alert(data.msg || 'Error saving font preference');
                 }
@@ -1868,6 +1882,35 @@
     const saveDescriptionBtn = document.getElementById('btn-save-description');
     const descriptionStatus = document.getElementById('description-status');
 
+    const liveDesc = document.getElementById('live-preview-description');
+    const descControls = document.getElementById('desc-edit-controls');
+
+    if (liveDesc && descriptionTextarea) {
+        liveDesc.addEventListener('focus', () => {
+            if (descControls) descControls.style.display = 'flex';
+        });
+
+        liveDesc.addEventListener('input', () => {
+            descriptionTextarea.value = liveDesc.innerText.trim();
+        });
+
+        liveDesc.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                e.preventDefault();
+                liveDesc.blur();
+                if (saveDescriptionBtn) saveDescriptionBtn.click();
+            }
+        });
+    }
+
+    if (descriptionTextarea) {
+        descriptionTextarea.addEventListener('input', () => {
+            if (liveDesc && document.activeElement !== liveDesc) {
+                liveDesc.textContent = descriptionTextarea.value || '';
+            }
+        });
+    }
+
     if (saveDescriptionBtn && descriptionTextarea) {
         saveDescriptionBtn.addEventListener('click', async () => {
             const description = descriptionTextarea.value;
@@ -1948,10 +1991,13 @@
     const emailStatus = document.getElementById('email-status');
     const displayEmail = document.getElementById('display-email');
 
-    const showAccountStatus = (el, msg, type) => {
+    const showAccountStatus = (el, msg, type = 'info') => {
+        if (msg && window.flashMessage) {
+            window.flashMessage(msg, 2500, type);
+        }
         if (el) {
             el.textContent = msg;
-            el.className = 'avatar-status ' + type;
+            el.className = 'avatar-status ' + (type || '');
             if (type === 'success') {
                 setTimeout(() => { el.textContent = ''; el.className = 'avatar-status'; }, 5000);
             }
@@ -2037,11 +2083,36 @@
     const displayNameBtn = document.getElementById('btn-update-display-name');
     const displayNameInput = document.getElementById('display_name_input');
     const displayNameStatus = document.getElementById('display-name-status');
+    const liveUsernameEl = document.getElementById('live-preview-username');
+
+    if (liveUsernameEl && displayNameInput && displayNameBtn) {
+        liveUsernameEl.addEventListener('input', () => {
+            displayNameInput.value = liveUsernameEl.textContent.trim();
+        });
+
+        liveUsernameEl.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                liveUsernameEl.blur();
+            }
+        });
+
+        liveUsernameEl.addEventListener('blur', () => {
+            const val = liveUsernameEl.textContent.trim();
+            if (!val) {
+                liveUsernameEl.textContent = window.f0ckSession?.user || 'Username';
+                displayNameInput.value = window.f0ckSession?.user || '';
+            } else {
+                displayNameInput.value = val;
+            }
+            displayNameBtn.click();
+        });
+    }
+
     if (displayNameBtn && displayNameInput) {
         displayNameInput.addEventListener('input', () => {
-            const liveName = document.getElementById('live-preview-username');
-            if (liveName) {
-                liveName.textContent = displayNameInput.value.trim() || window.f0ckSession?.user || 'Username';
+            if (liveUsernameEl && document.activeElement !== liveUsernameEl) {
+                liveUsernameEl.textContent = displayNameInput.value.trim() || window.f0ckSession?.user || 'Username';
             }
         });