Add status legend to Prowlarr UI for improved indexer status visibility

- Introduced a new status legend in the home section to display the current status of indexers, including 'Active', 'Throttled', and 'Failed'.
- Enhanced the styling of the legend for better visual clarity and organization.
- Updated responsive design for legend items to ensure usability on mobile devices.

Author: Admin9705

frontend/templates/components/home_section.html

@@ -734,6 +734,39 @@ <h3><i class="fas fa-download"></i> Swaparr Status</h3>
                 color: var(--text-tertiary);
             }
 
+            /* Status Legend */
+            .prowlarr-legend {
+                margin-top: 15px;
+                padding: 12px 15px;
+                background-color: rgba(16, 20, 28, 0.6);
+                border-radius: 6px;
+                border: 1px solid rgba(90, 109, 137, 0.1);
+            }
+            
+            .legend-title {
+                font-size: 0.85em;
+                font-weight: 600;
+                color: var(--text-primary);
+                margin-bottom: 8px;
+            }
+            
+            .legend-items {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 15px;
+            }
+            
+            .legend-item {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+            
+            .legend-description {
+                font-size: 0.75em;
+                color: var(--text-secondary);
+            }
+            
             /* Mobile responsive */
             @media (max-width: 768px) {
                 .prowlarr-subcards {
@@ -749,6 +782,15 @@ <h3><i class="fas fa-download"></i> Swaparr Status</h3>
                 .indexers-list {
                     max-height: 150px;
                 }
+                
+                .legend-items {
+                    flex-direction: column;
+                    gap: 8px;
+                }
+                
+                .legend-item {
+                    justify-content: center;
+                }
             }
         </style>
 
@@ -795,6 +837,25 @@ <h5><i class="fas fa-clock"></i> Statistics</h5>
                     </div>
                 </div>
             </div>
+
+            <!-- Status Legend -->
+            <div class="prowlarr-legend">
+                <div class="legend-title">Status Legend:</div>
+                <div class="legend-items">
+                    <div class="legend-item">
+                        <span class="indexer-status active">Active</span>
+                        <span class="legend-description">Indexer is working normally</span>
+                    </div>
+                    <div class="legend-item">
+                        <span class="indexer-status throttled">Throttled</span>
+                        <span class="legend-description">Rate limited - reduce search frequency</span>
+                    </div>
+                    <div class="legend-item">
+                        <span class="indexer-status failed">Failed</span>
+                        <span class="legend-description">Disabled or not responding</span>
+                    </div>
+                </div>
+            </div>
         </div>
 
     </div>