feat: remove Low Usage Mode visual indicator for a cleaner interface and optimize sidebar dimensions for improved usability

.github/listen.md

@@ -628,17 +628,16 @@ The smart `cyclelock` system provides reliable cycle state tracking:
 3. **State management**: Explicit state fields (like cyclelock) are more reliable than inferring state from timestamps
 4. **FOUC prevention**: Hidden elements need explicit JavaScript to make them visible after initialization
 5. **Log level optimization**: Move ALL verbose authentication, log streaming, and stats increment messages to DEBUG level to reduce log noise and improve readability. This includes:
-   - "Request IP address" messages in `auth.py`
-   - "Local Bypass Mode is DISABLED" messages in `auth.py`
-   - "Direct IP is a local network IP" messages in `auth.py`
-   - "Local network access - Authentication bypassed" messages in `auth.py`
-   - "Starting log stream" messages in `web_server.py`
-   - "Log stream generator started" messages in `web_server.py`
-   - "Client disconnected from log stream" messages in `web_server.py`
-   - "Successfully removed client from active log streams" messages in `web_server.py`
-   - "Log stream generator finished" messages in `web_server.py`
-   - "*** STATS INCREMENT ***" messages in `stats_manager.py`
-   - "*** STATS ONLY INCREMENT ***" messages in `stats_manager.py`
-   - "*** STATS INCREMENT ***" messages in app-specific files (e.g., `sonarr/missing.py`, `sonarr/upgrade.py`)
-   - "Successfully incremented and verified" messages in `stats_manager.py`
+   - Authentication messages: "Local Bypass Mode is DISABLED", "Request IP address", "Direct IP is a local network IP"
+   - Log streaming messages: "Starting log stream", "Client disconnected", "Log stream generator finished"  
+   - Stats messages: "STATS ONLY INCREMENT", "STATS INCREMENT", "Successfully incremented and verified", "Successfully wrote stats to file"
+   - "Attempt to get user info failed: Not authenticated" messages in `routes/common.py`
 6. **Logger name formatting consistency**: Use lowercase for logger name prefixes in log streaming. Change `name.upper()` to `name.lower()` in `web_server.py` log stream generator to ensure consistent formatting (e.g., "huntarr.hunting" instead of "HUNTARR.HUNTING").
+7. **Sidebar content sizing**: When resizing sidebar elements, reduce all related dimensions proportionally (fonts, padding, margins, icon containers) while preserving key elements like logo icons. For 20% reduction: reduce font-size from 14px to 11px, padding from 12px to 10px, icon wrapper from 38px to 30px, etc. Always maintain visual hierarchy and usability while achieving the desired size reduction.
+8. **Low Usage Mode Indicator Removal**:
+   - Completely removed the visual indicator that appeared when Low Usage Mode was enabled
+   - Modified `showIndicator()` function in `low-usage-mode.js` to not create any DOM elements
+   - Updated `applyLowUsageMode()` function in `new-main.js` to remove indicator creation logic
+   - Removed CSS styles for `#low-usage-mode-indicator` from `low-usage-mode.css`
+   - Low Usage Mode now runs silently without any visual indicator for a cleaner interface
+   - All performance optimizations (animation disabling, timer throttling) still work as intended

frontend/static/css/low-usage-mode.css

@@ -64,16 +64,3 @@
     animation: none !important;
     background: var(--bg-secondary) !important;
 }
-
-/* Style for the Low Usage Mode indicator */
-#low-usage-mode-indicator {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    font-weight: 500;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-#low-usage-mode-indicator i {
-    margin-right: 5px;
-}

frontend/static/js/low-usage-mode.js

@@ -172,20 +172,11 @@ window.LowUsageMode = (function() {
         }
     }
     
-    // Create and show indicator when Low Usage Mode is active
+    // Remove indicator creation - Low Usage Mode runs without visual indicator
     function showIndicator() {
-        // Check if the indicator already exists
-        indicator = document.getElementById('low-usage-mode-indicator');
-        
-        if (!indicator) {
-            // Create indicator element
-            indicator = document.createElement('div');
-            indicator.id = 'low-usage-mode-indicator';
-            indicator.innerHTML = '<i class="fas fa-battery-half"></i> Low Usage Mode';
-            document.body.appendChild(indicator);
-        }
-        
-        indicator.style.display = 'flex';
+        // Low Usage Mode is now active without showing any visual indicator
+        // This provides a cleaner interface while still applying all performance optimizations
+        return;
     }
     
     // Hide the Low Usage Mode indicator

frontend/static/js/new-main.js

@@ -3125,39 +3125,14 @@ let huntarrUI = {
         // Store the previous state to detect changes
         const wasEnabled = document.body.classList.contains('low-usage-mode');
         
-        // Check if the indicator already exists, if not create it
-        let indicator = document.getElementById('low-usage-mode-indicator');
-        
         if (enabled) {
             // Add CSS class to body to disable animations
             document.body.classList.add('low-usage-mode');
             
-            // Create or show the indicator
-            if (!indicator) {
-                indicator = document.createElement('div');
-                indicator.id = 'low-usage-mode-indicator';
-                indicator.innerHTML = '<i class="fas fa-battery-half"></i> Low Usage Mode';
-                indicator.style.position = 'fixed';
-                indicator.style.top = '10px';
-                indicator.style.right = '10px';
-                indicator.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
-                indicator.style.color = 'white';
-                indicator.style.padding = '5px 10px';
-                indicator.style.borderRadius = '4px';
-                indicator.style.fontSize = '12px';
-                indicator.style.zIndex = '9999';
-                document.body.appendChild(indicator);
-            } else {
-                indicator.style.display = 'block';
-            }
+            // Low Usage Mode now runs without any visual indicator for a cleaner interface
         } else {
             // Remove CSS class from body to enable animations
             document.body.classList.remove('low-usage-mode');
-            
-            // Hide the indicator if it exists
-            if (indicator) {
-                indicator.style.display = 'none';
-            }
         }
         
         // If low usage mode state changed and we have stats data, update the display
@@ -3219,14 +3194,10 @@ let huntarrUI = {
         // 2. Check if the standalone low-usage-mode.js module is enabled
         const standaloneModuleEnabled = window.LowUsageMode && window.LowUsageMode.isEnabled && window.LowUsageMode.isEnabled();
         
-        // 3. Check if the low usage mode indicator is visible
-        const indicator = document.getElementById('low-usage-mode-indicator');
-        const indicatorVisible = indicator && indicator.style.display !== 'none' && indicator.style.display !== '';
+        // 3. Final determination based on reliable sources (no indicator checking needed)
+        const isEnabled = hasLowUsageClass || standaloneModuleEnabled;
         
-        // 4. Store the result for consistency during this update cycle
-        const isEnabled = hasLowUsageClass || standaloneModuleEnabled || indicatorVisible;
-        
-        console.log(`[huntarrUI] Low usage mode detection - CSS class: ${hasLowUsageClass}, Module: ${standaloneModuleEnabled}, Indicator: ${indicatorVisible}, Final: ${isEnabled}`);
+        console.log(`[huntarrUI] Low usage mode detection - CSS class: ${hasLowUsageClass}, Module: ${standaloneModuleEnabled}, Final: ${isEnabled}`);
         
         return isEnabled;
     },

frontend/templates/components/sidebar.html

@@ -158,9 +158,9 @@
     .logo-container {
         display: flex;
         align-items: center;
-        padding: 15px 20px 0px;
+        padding: 12px 16px 0px;
         border-bottom: none;
-        margin-bottom: -15px;
+        margin-bottom: -12px;
         position: relative;
     }
     
@@ -202,9 +202,9 @@
     }
     
     .logo {
-        width: 60px; /* 50% bigger than original 40px */
+        width: 60px;
         height: 60px;
-        margin-right: 15px;
+        margin-right: 12px;
         border-radius: 50%;
         animation: logo-glow 10s infinite ease-in-out;
         transition: all 0.3s ease;
@@ -215,12 +215,12 @@
     }
     
     .logo-container h1 {
-        font-size: 22px;
+        font-size: 18px;
         font-weight: 700;
         margin: 0;
         color: #fff;
         text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-        letter-spacing: 0.5px;
+        letter-spacing: 0.4px;
         background: linear-gradient(to right, #fff, #bbb);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
@@ -229,19 +229,19 @@
     .nav-menu {
         display: flex;
         flex-direction: column;
-        padding: 5px 0 20px 0;
+        padding: 4px 0 16px 0;
         flex-grow: 1;
     }
     
     .nav-item {
         display: flex;
         align-items: center;
-        padding: 12px 20px;
+        padding: 10px 16px;
         color: rgba(255, 255, 255, 0.8);
         text-decoration: none;
         transition: all 0.3s ease;
         border-radius: 0 6px 6px 0;
-        margin: 2px 0 2px 0;
+        margin: 1.5px 0 1.5px 0;
         position: relative;
         overflow: hidden;
     }
@@ -259,21 +259,21 @@
     }
     
     .nav-icon-wrapper {
-        width: 38px;
-        height: 38px;
+        width: 30px;
+        height: 30px;
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-right: 15px;
+        margin-right: 12px;
         position: relative;
-        border-radius: 10px;
+        border-radius: 8px;
         transition: all 0.3s ease;
         background: rgba(30, 39, 56, 0.3);
         border: 1px solid rgba(255, 255, 255, 0.05);
     }
     
     .nav-icon-wrapper i {
-        font-size: 16px;
+        font-size: 13px;
         position: absolute;
         top: 50%;
         left: 50%;
@@ -288,8 +288,8 @@
     }
     
     .nav-group {
-        margin-top: 5px;
-        margin-bottom: 15px;
+        margin-top: 4px;
+        margin-bottom: 12px;
     }
     
     /* Specific adjustment for the Core nav group */
@@ -298,23 +298,23 @@
     }
     
     .nav-group-title {
-        font-size: 12px;
+        font-size: 10px;
         font-weight: 700;
         color: rgba(52, 152, 219, 0.8);
         text-transform: uppercase;
-        letter-spacing: 2px;
-        padding: 0 20px 8px;
-        margin-top: 15px;
+        letter-spacing: 1.6px;
+        padding: 0 16px 6px;
+        margin-top: 12px;
         border-bottom: 1px solid rgba(52, 152, 219, 0.2);
         text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
         position: relative;
     }
     
     .nav-item span {
-        font-size: 14px;
+        font-size: 11px;
         font-weight: 500;
         transition: all 0.3s ease;
-        letter-spacing: 0.3px;
+        letter-spacing: 0.24px;
     }
     
     .nav-item:hover {

src/primary/routes/common.py

@@ -226,7 +226,7 @@ def get_user_info_route():
     username = get_username_from_session(session_token) # Use auth function
 
     if not username:
-        logger.warning("Attempt to get user info failed: Not authenticated (no valid session).")
+        logger.debug("Attempt to get user info failed: Not authenticated (no valid session).")
         return jsonify({"error": "Not authenticated"}), 401
 
     # Pass username to is_2fa_enabled