Add Civitai link and icon styles, enhance modal management

static/css/components/modal.css

@@ -1342,4 +1342,21 @@ input:checked + .toggle-slider:before {
     color: var(--text-color);
 }
 
+/* Civitai link styles */
+.civitai-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.civitai-icon {
+    width: 20px;
+    height: 20px;
+    color: #1b98e4; /* Civitai brand blue color */
+}
+
+.social-link:hover .civitai-icon {
+    color: white; /* Icon color changes to white on hover */
+}
+
 /* ...existing code... */

static/js/managers/ModalManager.js

@@ -2,6 +2,7 @@ export class ModalManager {
     constructor() {
         this.modals = new Map();
         this.scrollPosition = 0;
+        this.currentOpenModal = null; // Track currently open modal
     }
 
     initialize() {
@@ -73,9 +74,6 @@ export class ModalManager {
 
         document.addEventListener('keydown', this.boundHandleEscape);
         this.initialized = true;
-        
-        // Initialize corner controls
-        this.initCornerControls();
     }
 
     registerModal(id, config) {
@@ -99,10 +97,26 @@ export class ModalManager {
         return this.modals.get(id);
     }
 
+    // Check if any modal is currently open
+    isAnyModalOpen() {
+        for (const [id, modal] of this.modals) {
+            if (modal.isOpen) {
+                return id;
+            }
+        }
+        return null;
+    }
+
     showModal(id, content = null, onCloseCallback = null) {
         const modal = this.getModal(id);
         if (!modal) return;
 
+        // Close any open modal before showing the new one
+        const openModalId = this.isAnyModalOpen();
+        if (openModalId && openModalId !== id) {
+            this.closeModal(openModalId);
+        }
+
         if (content) {
             modal.element.innerHTML = content;
         }
@@ -122,6 +136,7 @@ export class ModalManager {
         }
 
         modal.isOpen = true;
+        this.currentOpenModal = id; // Update currently open modal
         document.body.style.top = `-${this.scrollPosition}px`;
         document.body.classList.add('modal-open');
     }
@@ -133,6 +148,11 @@ export class ModalManager {
         modal.onClose();
         modal.isOpen = false;
 
+        // Clear current open modal if this is the one being closed
+        if (this.currentOpenModal === id) {
+            this.currentOpenModal = null;
+        }
+
         // Remove fixed positioning and restore scroll position
         document.body.classList.remove('modal-open');
         document.body.style.top = '';
@@ -147,28 +167,12 @@ export class ModalManager {
 
     handleEscape(e) {
         if (e.key === 'Escape') {
-            // Close the last opened modal
+            // Close the current open modal if it exists
-            for (const [id, modal] of this.modals) {
+            if (this.currentOpenModal) {
-                if (modal.isOpen) {
+                this.closeModal(this.currentOpenModal);
-                    this.closeModal(id);
-                    break;
-                }
             }
         }
     }
-
-    // Keep only the corner controls initialization
-    initCornerControls() {
-        const cornerControls = document.querySelector('.corner-controls');
-        const cornerControlsToggle = document.querySelector('.corner-controls-toggle');
-        
-        if(cornerControls && cornerControlsToggle) {
-            // Toggle corner controls visibility
-            cornerControlsToggle.addEventListener('click', () => {
-                cornerControls.classList.toggle('expanded');
-            });
-        }
-    }
 }
 
 // Create and export a singleton instance

templates/components/modals.html

@@ -194,9 +194,21 @@
                         <i class="fab fa-youtube"></i>
                         <span>YouTube Channel</span>
                     </a>
-                    <a href="https://discord.gg/KK3dn4Jx" class="social-link" target="_blank">
+                    <a href="https://civitai.com/user/PixelPawsAI" class="social-link civitai-link" target="_blank">
-                        <i class="fab fa-discord"></i>
+                        <svg class="civitai-icon" viewBox="0 0 225 225" width="20" height="20">
-                        <span>Discord Community</span>
+                            <g transform="translate(0,225) scale(0.1,-0.1)" fill="currentColor">
+                                <path d="M950 1899 c-96 -55 -262 -150 -367 -210 -106 -61 -200 -117 -208
+                                -125 -13 -13 -15 -76 -15 -443 0 -395 1 -429 18 -443 9 -9 116 -73 237 -143
+                                121 -70 283 -163 359 -208 76 -45 146 -80 155 -80 9 1 183 98 386 215 l370
+                                215 2 444 3 444 -376 215 c-206 118 -378 216 -382 217 -4 1 -86 -43 -182 -98z
+                                m346 -481 l163 -93 1 -57 0 -58 -89 0 c-87 0 -91 1 -166 44 l-78 45 -51 -30
+                                c-28 -17 -61 -35 -73 -41 -21 -10 -23 -18 -23 -99 l0 -87 71 -41 c39 -23 73
+                                -41 76 -41 3 0 37 18 75 40 68 39 72 40 164 40 l94 0 0 -53 c0 -60 23 -41
+                                -198 -168 l-133 -77 -92 52 c-51 29 -126 73 -167 97 l-75 45 0 193 0 192 164
+                                95 c91 52 167 94 169 94 2 0 78 -42 168 -92z"/>
+                            </g>
+                        </svg>
+                        <span>Civitai Profile</span>
                     </a>
                 </div>
             </div>