Add Screen control features: Screen tab in sidebar, Kivy script, and backend logic

html/assets/js/topbar-logo.js

@@ -1,19 +1,57 @@
-// Switch topbar logo based on device_type config
-// Uses MutationObserver to detect when topbar is dynamically loaded
-(function() {
-    var observer = new MutationObserver(function() {
-        var logo = document.getElementById('topbar-logo');
-        if (logo) {
-            observer.disconnect();
-            fetch('launcher.php?type=get_config_sqlite')
-                .then(function(r) { return r.json(); })
-                .then(function(config) {
-                    if (config.device_type === 'moduleair_pro') {
-                        logo.src = 'assets/img/logoModuleAir.png';
-                    }
-                })
-                .catch(function() {});
-        }
+
+/**
+ * Global configuration handler for UI elements
+ * - Updates Topbar Logo based on device type
+ * - Shows/Hides "Screen" sidebar tab based on device type
+ */
+document.addEventListener('DOMContentLoaded', () => {
+    let config = null;
+
+    // Fetch config once
+    fetch('launcher.php?type=get_config_sqlite')
+        .then(response => response.json())
+        .then(data => {
+            config = data;
+            applyConfig(); // Apply immediately if elements are ready
+        })
+        .catch(error => console.error('Error loading config:', error));
+
+    // Observe DOM changes to handle dynamically loaded elements (sidebar, topbar)
+    const observer = new MutationObserver(() => {
+        if (config) applyConfig();
     });
-    observer.observe(document.body || document.documentElement, { childList: true, subtree: true });
-})();
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    function applyConfig() {
+        if (!config) return;
+
+        const isModuleAirPro = (config.device_type === 'moduleair_pro' || config.type === 'moduleair_pro');
+
+        // 1. Topbar Logo Logic
+        const logo = document.getElementById('topbar-logo');
+        if (logo && isModuleAirPro) {
+            // prevent unnecessary re-assignments
+            if (!logo.src.includes('logoModuleAir.png')) {
+                logo.src = 'assets/img/logoModuleAir.png';
+            }
+        }
+
+        // 2. Sidebar Screen Tab Logic
+        const navScreen = document.getElementById('nav-screen');
+        if (navScreen) {
+            if (isModuleAirPro) {
+                // Ensure it's visible (bootstrap nav-link usually block or flex)
+                // Using removeProperty to let CSS/Bootstrap handle it, or force display
+                if (navScreen.style.display === 'none') {
+                    navScreen.style.display = 'flex';
+                }
+            } else {
+                // Hide if not pro
+                if (navScreen.style.display !== 'none') {
+                    navScreen.style.display = 'none';
+                }
+            }
+        }
+    }
+});