Refactor ModalManager to conditionally register modals based on their existence

- Updated ModalManager to check for the presence of modals before registration, improving performance and preventing errors on pages without certain modals.
- Added support for closing modals when clicking outside of them, enhancing user experience.
- Ensured consistent handling of modal display properties across various modal types.

static/js/managers/ModalManager.js

@@ -10,85 +10,114 @@ export class ModalManager {
         
         this.boundHandleEscape = this.handleEscape.bind(this);
         
-        // Register all modals
+        // Register all modals - only if they exist in the current page
-        this.registerModal('loraModal', {
+        const loraModal = document.getElementById('loraModal');
-            element: document.getElementById('loraModal'),
+        if (loraModal) {
-            onClose: () => {
+            this.registerModal('loraModal', {
-                this.getModal('loraModal').element.style.display = 'none';
+                element: loraModal,
-                document.body.classList.remove('modal-open');
+                onClose: () => {
-            }
+                    this.getModal('loraModal').element.style.display = 'none';
-        });
+                    document.body.classList.remove('modal-open');
+                },
+                closeOnOutsideClick: true
+            });
+        }
         
-        this.registerModal('deleteModal', {
+        const deleteModal = document.getElementById('deleteModal');
-            element: document.getElementById('deleteModal'),
+        if (deleteModal) {
-            onClose: () => {
+            this.registerModal('deleteModal', {
-                this.getModal('deleteModal').element.classList.remove('show');
+                element: deleteModal,
-                document.body.classList.remove('modal-open');
+                onClose: () => {
-            }
+                    this.getModal('deleteModal').element.classList.remove('show');
-        });
+                    document.body.classList.remove('modal-open');
+                }
+            });
+        }
 
         // Add downloadModal registration
-        this.registerModal('downloadModal', {
+        const downloadModal = document.getElementById('downloadModal');
-            element: document.getElementById('downloadModal'),
+        if (downloadModal) {
-            onClose: () => {
+            this.registerModal('downloadModal', {
-                this.getModal('downloadModal').element.style.display = 'none';
+                element: downloadModal,
-                document.body.classList.remove('modal-open');
+                onClose: () => {
-            }
+                    this.getModal('downloadModal').element.style.display = 'none';
-        });
+                    document.body.classList.remove('modal-open');
+                }
+            });
+        }
 
         // Add settingsModal registration
-        this.registerModal('settingsModal', {
+        const settingsModal = document.getElementById('settingsModal');
-            element: document.getElementById('settingsModal'),
+        if (settingsModal) {
-            onClose: () => {
+            this.registerModal('settingsModal', {
-                this.getModal('settingsModal').element.style.display = 'none';
+                element: settingsModal,
-                document.body.classList.remove('modal-open');
+                onClose: () => {
-            }
+                    this.getModal('settingsModal').element.style.display = 'none';
-        });
+                    document.body.classList.remove('modal-open');
+                }
+            });
+        }
 
         // Add moveModal registration
-        this.registerModal('moveModal', {
+        const moveModal = document.getElementById('moveModal');
-            element: document.getElementById('moveModal'),
+        if (moveModal) {
-            onClose: () => {
+            this.registerModal('moveModal', {
-                this.getModal('moveModal').element.style.display = 'none';
+                element: moveModal,
-                document.body.classList.remove('modal-open');
+                onClose: () => {
-            }
+                    this.getModal('moveModal').element.style.display = 'none';
-        });
+                    document.body.classList.remove('modal-open');
+                }
+            });
+        }
         
         // Add supportModal registration
-        this.registerModal('supportModal', {
+        const supportModal = document.getElementById('supportModal');
-            element: document.getElementById('supportModal'),
+        if (supportModal) {
-            onClose: () => {
+            this.registerModal('supportModal', {
-                this.getModal('supportModal').element.style.display = 'none';
+                element: supportModal,
-                document.body.classList.remove('modal-open');
+                onClose: () => {
-            }
+                    this.getModal('supportModal').element.style.display = 'none';
-        });
+                    document.body.classList.remove('modal-open');
+                }
+            });
+        }
 
         // Add updateModal registration
-        this.registerModal('updateModal', {
+        const updateModal = document.getElementById('updateModal');
-            element: document.getElementById('updateModal'),
+        if (updateModal) {
-            onClose: () => {
+            this.registerModal('updateModal', {
-                this.getModal('updateModal').element.style.display = 'none';
+                element: updateModal,
-                document.body.classList.remove('modal-open');
+                onClose: () => {
-            }
+                    this.getModal('updateModal').element.style.display = 'none';
-        });
+                    document.body.classList.remove('modal-open');
+                }
+            });
+        }
 
         // Add importModal registration
-        this.registerModal('importModal', {
+        const importModal = document.getElementById('importModal');
-            element: document.getElementById('importModal'),
+        if (importModal) {
-            onClose: () => {
+            this.registerModal('importModal', {
-                this.getModal('importModal').element.style.display = 'none';
+                element: importModal,
-                document.body.classList.remove('modal-open');   
+                onClose: () => {
-            }
+                    this.getModal('importModal').element.style.display = 'none';
-        });
+                    document.body.classList.remove('modal-open');   
+                }
+            });
+        }
 
         // Add recipeModal registration
-        this.registerModal('recipeModal', {
+        const recipeModal = document.getElementById('recipeModal');
-            element: document.getElementById('recipeModal'),
+        if (recipeModal) {
-            onClose: () => {
+            this.registerModal('recipeModal', {
-                this.getModal('recipeModal').element.style.display = 'none';
+                element: recipeModal,
-                document.body.classList.remove('modal-open');
+                onClose: () => {
-            }
+                    this.getModal('recipeModal').element.style.display = 'none';
-        });
+                    document.body.classList.remove('modal-open');
+                },
+                closeOnOutsideClick: true
+            });
+        }
 
         // Set up event listeners for modal toggles
         const supportToggle = document.getElementById('supportToggleBtn');
@@ -107,8 +136,8 @@ export class ModalManager {
             isOpen: false
         });
 
-        // Only add click outside handler if it's the lora modal
+        // Add click outside handler if specified in config
-        if (id == 'loraModal') {
+        if (config.closeOnOutsideClick) {
             config.element.addEventListener('click', (e) => {
                 if (e.target === config.element) {
                     this.closeModal(id);

templates/recipes.html

@@ -92,6 +92,7 @@
         const importModal = document.getElementById('importModal');
         if (importModal) {
             importModal.classList.remove('hidden');
+            importModal.style.display = 'block';
         }
     }
 </script>