Add Prowlarr integration with settings management and UI enhancements

- Introduced Prowlarr section in the main UI and sidebar for navigation.
- Implemented settings form for Prowlarr, including manual save functionality and auto-detection for connection status.
- Updated settings manager to recognize Prowlarr as a known app type.
- Enhanced SettingsForms to handle Prowlarr-specific settings and ensure proper state management.
- Added necessary API routes and blueprints for Prowlarr integration.
- Improved user experience with dynamic UI updates and error handling for Prowlarr settings.

Author: Admin9705

frontend/static/js/new-main.js

@@ -681,6 +681,21 @@ let huntarrUI = {
 
             // Initialize notifications settings if not already done
             this.initializeNotifications();
+        } else if (section === 'prowlarr' && document.getElementById('prowlarrSection')) {
+            document.getElementById('prowlarrSection').classList.add('active');
+            document.getElementById('prowlarrSection').style.display = 'block';
+            if (document.getElementById('settingsProwlarrNav')) document.getElementById('settingsProwlarrNav').classList.add('active');
+            newTitle = 'Prowlarr';
+            this.currentSection = 'prowlarr';
+            
+            // Switch to Settings sidebar for prowlarr
+            this.showSettingsSidebar();
+            
+            // Set localStorage to maintain Settings sidebar preference
+            localStorage.setItem('huntarr-settings-sidebar', 'true');
+            
+            // Initialize prowlarr settings if not already done
+            this.initializeProwlarr();
         } else if (section === 'user' && document.getElementById('userSection')) {
             document.getElementById('userSection').classList.add('active');
             document.getElementById('userSection').style.display = 'block';
@@ -1086,6 +1101,7 @@ let huntarrUI = {
                     window.swaparrSettings = data.swaparr;
                     this.populateSettingsForm('swaparr', data.swaparr);
                 }
+                if (data.prowlarr) this.populateSettingsForm('prowlarr', data.prowlarr);
                 if (data.general) this.populateSettingsForm('general', data.general);
 
                 // Update duration displays (like sleep durations)
@@ -4317,6 +4333,53 @@ let huntarrUI = {
             });
     },
 
+    initializeProwlarr: function() {
+        console.log('[huntarrUI] initializeProwlarr called');
+        
+        // Check if prowlarr is already initialized
+        const prowlarrContainer = document.getElementById('prowlarrContainer');
+        if (!prowlarrContainer) {
+            console.error('[huntarrUI] prowlarrContainer element not found!');
+            return;
+        }
+        
+        console.log('[huntarrUI] prowlarrContainer found:', prowlarrContainer);
+        console.log('[huntarrUI] Current container content:', prowlarrContainer.innerHTML.trim());
+        
+        // Check if prowlarr is actually initialized (ignore HTML comments)
+        const currentContent = prowlarrContainer.innerHTML.trim();
+        if (currentContent !== '' && !currentContent.includes('<!-- Prowlarr content will be loaded here -->')) {
+            console.log('[huntarrUI] Prowlarr already initialized, skipping');
+            return; // Already initialized
+        }
+
+        console.log('[huntarrUI] Loading prowlarr settings from API...');
+        
+        // Load settings from API and generate the prowlarr form
+        fetch('./api/settings')
+            .then(response => response.json())
+            .then(settings => {
+                console.log('[huntarrUI] Loaded settings for prowlarr:', settings);
+                console.log('[huntarrUI] Prowlarr settings:', settings.prowlarr);
+                console.log('[huntarrUI] SettingsForms available:', typeof SettingsForms !== 'undefined');
+                console.log('[huntarrUI] generateProwlarrForm available:', typeof SettingsForms !== 'undefined' && SettingsForms.generateProwlarrForm);
+                
+                // Generate the prowlarr form
+                if (typeof SettingsForms !== 'undefined' && SettingsForms.generateProwlarrForm) {
+                    console.log('[huntarrUI] Calling SettingsForms.generateProwlarrForm...');
+                    SettingsForms.generateProwlarrForm(prowlarrContainer, settings.prowlarr || {});
+                    console.log('[huntarrUI] Prowlarr form generated successfully');
+                } else {
+                    console.error('[huntarrUI] SettingsForms.generateProwlarrForm not available');
+                    prowlarrContainer.innerHTML = '<p>Error: Prowlarr forms not loaded</p>';
+                }
+            })
+            .catch(error => {
+                console.error('[huntarrUI] Error loading prowlarr settings:', error);
+                prowlarrContainer.innerHTML = '<p>Error loading prowlarr settings</p>';
+            });
+    },
+
     initializeUser: function() {
         console.log('[huntarrUI] initializeUser called');
 

frontend/static/js/settings_forms.js

@@ -3403,7 +3403,7 @@ const SettingsForms = {
         const appType = container.getAttribute('data-app-type') || 'general';
 
         // Skip auto-save for all forms - they now use manual save
-        const manualSaveApps = ['swaparr', 'general', 'notifications', 'sonarr', 'radarr', 'lidarr', 'readarr', 'whisparr', 'eros'];
+        const manualSaveApps = ['swaparr', 'general', 'notifications', 'sonarr', 'radarr', 'lidarr', 'readarr', 'whisparr', 'eros', 'prowlarr'];
         if (manualSaveApps.includes(appType)) {
             console.log(`[SettingsForms] Skipping auto-save setup for ${appType} - using manual save`);
             return;
@@ -4111,6 +4111,15 @@ const SettingsForms = {
                 settings.quality_based_removal = getInputValue('#swaparr_quality_based_removal', false);
                 settings.blocked_quality_patterns = this.getTagsFromContainer('swaparr_quality_patterns_tags');
             }
+            else if (appType === 'prowlarr') {
+                // Prowlarr doesn't use instances array, store directly
+                settings.instances = [];
+                
+                settings.enabled = getInputValue('#prowlarr-enabled-0', true);
+                settings.name = getInputValue('#prowlarr-name-0', 'Prowlarr');
+                settings.api_url = getInputValue('#prowlarr-url-0', '');
+                settings.api_key = getInputValue('#prowlarr-key-0', '');
+            }
         }
 
         console.log('Collected settings for', appType, settings);
@@ -5142,7 +5151,7 @@ const SettingsForms = {
 
     // Check connection status for an instance
     checkConnectionStatus: function(app, instanceIndex) {
-        const supportedApps = ['radarr', 'sonarr', 'lidarr', 'readarr', 'whisparr', 'eros'];
+        const supportedApps = ['radarr', 'sonarr', 'lidarr', 'readarr', 'whisparr', 'eros', 'prowlarr'];
         if (!supportedApps.includes(app)) return;
 
         const urlInput = document.getElementById(`${app}-url-${instanceIndex}`);
@@ -5640,7 +5649,7 @@ const SettingsForms = {
         // Only remove if all sections have no unsaved changes
         if (!window.swaparrUnsavedChanges && !window.settingsUnsavedChanges && !window.notificationsUnsavedChanges &&
             !window.sonarrUnsavedChanges && !window.radarrUnsavedChanges && !window.lidarrUnsavedChanges &&
-            !window.readarrUnsavedChanges && !window.whisparrUnsavedChanges && !window.erosUnsavedChanges) {
+            !window.readarrUnsavedChanges && !window.whisparrUnsavedChanges && !window.erosUnsavedChanges && !window.prowlarrUnsavedChanges) {
             // Remove beforeunload event listener
             if (window.huntarrBeforeUnloadListener) {
                 window.removeEventListener('beforeunload', window.huntarrBeforeUnloadListener);
@@ -5712,7 +5721,7 @@ const SettingsForms = {
         }
 
         // Check each app instance for unsaved changes
-        const appTypes = ['sonarr', 'radarr', 'lidarr', 'readarr', 'whisparr', 'eros'];
+        const appTypes = ['sonarr', 'radarr', 'lidarr', 'readarr', 'whisparr', 'eros', 'prowlarr'];
         for (const appType of appTypes) {
             const unsavedChangesVar = `${appType}UnsavedChanges`;
             if (window[unsavedChangesVar]) {
@@ -5738,6 +5747,136 @@ const SettingsForms = {
         }
 
         return true; // No unsaved changes, can proceed
+    },
+
+    // Generate Prowlarr settings form
+    generateProwlarrForm: function(container, settings = {}) {
+        // Ensure settings is a valid object
+        if (!settings || typeof settings !== 'object') {
+            settings = {};
+        }
+        
+        // Add data-app-type attribute to container
+        container.setAttribute('data-app-type', 'prowlarr');
+        
+        // Add save button at the top
+        let prowlarrSaveButtonHtml = `
+            <div style="margin-bottom: 20px;">
+                <button type="button" id="prowlarr-save-button" disabled style="
+                    background: #6b7280;
+                    color: #9ca3af;
+                    border: 1px solid #4b5563;
+                    padding: 8px 16px;
+                    border-radius: 6px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    cursor: not-allowed;
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    transition: all 0.2s ease;
+                ">
+                    <i class="fas fa-save"></i>
+                    Save Changes
+                </button>
+            </div>
+        `;
+
+        // Create the Prowlarr configuration container
+        let prowlarrHtml = `
+            <div class="settings-group" style="
+                background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
+                border: 2px solid rgba(90, 109, 137, 0.3);
+                border-radius: 12px;
+                padding: 20px;
+                margin: 15px 0 25px 0;
+                box-shadow: 0 4px 12px rgba(90, 109, 137, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+            ">
+                <h3>Prowlarr Configuration</h3>
+                <div class="prowlarr-container">
+                    <div class="prowlarr-item" data-instance-id="0">
+                        <div class="prowlarr-header">
+                            <h4>Prowlarr</h4>
+                            <div class="prowlarr-actions">
+                                <span class="connection-status" id="prowlarr-status-0" style="margin-left: 10px; font-weight: bold; font-size: 0.9em;"></span>
+                            </div>
+                        </div>
+                        <div class="prowlarr-content">
+                            <div class="setting-item">
+                                <label for="prowlarr-enabled-0">Enabled:</label>
+                                <label class="toggle-switch" style="width:40px; height:20px; display:inline-block; position:relative;">
+                                    <input type="checkbox" id="prowlarr-enabled-0" name="enabled" ${settings.enabled !== false ? 'checked' : ''}>
+                                    <span class="toggle-slider" style="position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#3d4353; border-radius:20px; transition:0.4s;"></span>
+                                </label>
+                                <p class="setting-help">Enable or disable Prowlarr integration</p>
+                            </div>
+                            <div class="setting-item">
+                                <label for="prowlarr-name-0">Name:</label>
+                                <input type="text" id="prowlarr-name-0" name="name" value="${settings.name || 'Prowlarr'}" placeholder="Friendly name for Prowlarr">
+                                <p class="setting-help">Friendly name for this Prowlarr instance</p>
+                            </div>
+                            <div class="setting-item">
+                                <label for="prowlarr-url-0">URL:</label>
+                                <input type="text" id="prowlarr-url-0" name="api_url" value="${settings.api_url || ''}" placeholder="Base URL for Prowlarr (e.g., http://localhost:9696)" data-instance-index="0">
+                                <p class="setting-help">Base URL for Prowlarr (e.g., http://localhost:9696)</p>
+                            </div>
+                            <div class="setting-item">
+                                <label for="prowlarr-key-0">API Key:</label>
+                                <input type="text" id="prowlarr-key-0" name="api_key" value="${settings.api_key || ''}" placeholder="API key for Prowlarr" data-instance-index="0">
+                                <p class="setting-help">API key for Prowlarr</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Set the content with save button at the top
+        container.innerHTML = prowlarrSaveButtonHtml + prowlarrHtml;
+
+        // Setup auto-detection (like Sonarr)
+        this.setupProwlarrAutoDetection(container);
+
+        // Set up manual save functionality for Prowlarr
+        this.setupAppManualSave(container, 'prowlarr', settings);
+    },
+
+    // Setup auto-detection for Prowlarr (similar to Sonarr)
+    setupProwlarrAutoDetection: function(container) {
+        console.log('[SettingsForms] Setting up Prowlarr auto-detection');
+        
+        // Find URL and API key inputs
+        const urlInput = container.querySelector('#prowlarr-url-0');
+        const apiKeyInput = container.querySelector('#prowlarr-key-0');
+        
+        if (urlInput) {
+            urlInput.addEventListener('input', () => {
+                setTimeout(() => {
+                    this.checkConnectionStatus('prowlarr', 0);
+                }, 1000); // 1 second delay to prevent spam while typing
+            });
+            urlInput.addEventListener('blur', () => {
+                this.checkConnectionStatus('prowlarr', 0);
+            });
+        }
+        
+        if (apiKeyInput) {
+            apiKeyInput.addEventListener('input', () => {
+                setTimeout(() => {
+                    this.checkConnectionStatus('prowlarr', 0);
+                }, 1000); // 1 second delay to prevent spam while typing
+            });
+            apiKeyInput.addEventListener('blur', () => {
+                this.checkConnectionStatus('prowlarr', 0);
+            });
+        }
+        
+        // Initial status check if URL and key are provided
+        if (urlInput && apiKeyInput && urlInput.value.trim() && apiKeyInput.value.trim()) {
+            setTimeout(() => {
+                this.checkConnectionStatus('prowlarr', 0);
+            }, 500);
+        }
     }
 };
 

frontend/templates/components/prowlarr_section.html

@@ -0,0 +1,5 @@
+<section id="prowlarrSection" class="content-section">
+    <div id="prowlarrContainer" class="settings-container">
+        <!-- Prowlarr content will be loaded here -->
+    </div>
+</section> 

frontend/templates/components/sidebar.html

@@ -203,6 +203,12 @@ <h1>Huntarr</h1>
                 </div>
                 <span>Notifications</span>
             </a>
+            <a href="./#prowlarr" class="nav-item" id="settingsProwlarrNav">
+                <div class="nav-icon-wrapper">
+                    <i class="fas fa-search"></i>
+                </div>
+                <span>Prowlarr</span>
+            </a>
             <a href="./user" class="nav-item" id="settingsUserNav">
                 <div class="nav-icon-wrapper">
                     <i class="fas fa-user"></i>

frontend/templates/index.html

@@ -58,6 +58,9 @@
             <!-- Notifications Section -->
             {% include 'components/notifications_section.html' %}
 
+            <!-- Prowlarr Section -->
+            {% include 'components/prowlarr_section.html' %}
+            
             <!-- User Section -->
             {% include 'components/user_section.html' %}
 

src/primary/apps/blueprints.py

@@ -13,6 +13,7 @@
 from src.primary.apps.eros_routes import eros_bp
 from src.primary.apps.swaparr_routes import swaparr_bp
 from src.primary.apps.requestarr_routes import requestarr_bp
+from src.primary.apps.prowlarr_routes import prowlarr_bp
 
 __all__ = [
     "sonarr_bp",
@@ -22,5 +23,6 @@
     "whisparr_bp",
     "eros_bp",
     "swaparr_bp",
-    "requestarr_bp"
+    "requestarr_bp",
+    "prowlarr_bp"
 ]