Show protocol badges per tab: all in chain builder, VLESS/Trojan only in enhancer

Author: Hidden-Node

index.html

@@ -30,13 +30,13 @@ <h1>Proxy Builder</h1>
             <p class="subtitle">Enhance proxy URLs (fragment & fingerprint) or chain two proxy configs into Xray &
                 Sing-box configurations</p>
             <div class="protocol-badges">
-                <span class="badge badge-vless">VLESS</span>
-                <span class="badge badge-vmess">VMess</span>
-                <span class="badge badge-trojan">Trojan</span>
-                <span class="badge badge-ss">Shadowsocks</span>
-                <span class="badge badge-socks">SOCKS</span>
-                <span class="badge badge-http">HTTP</span>
-                <span class="badge badge-ssh">SSH <sup class="singbox-only-sup">sing-box</sup></span>
+                <span class="badge badge-vless" data-protocol="vless">VLESS</span>
+                <span class="badge badge-vmess" data-protocol="vmess">VMess</span>
+                <span class="badge badge-trojan" data-protocol="trojan">Trojan</span>
+                <span class="badge badge-ss" data-protocol="ss">Shadowsocks</span>
+                <span class="badge badge-socks" data-protocol="socks">SOCKS</span>
+                <span class="badge badge-http" data-protocol="http">HTTP</span>
+                <span class="badge badge-ssh" data-protocol="ssh">SSH <sup class="singbox-only-sup">sing-box</sup></span>
             </div>
         </header>
 

script.js

@@ -1627,12 +1627,19 @@
         });
         viewChain.style.display = viewName === 'chain' ? '' : 'none';
         viewEnhancer.style.display = viewName === 'enhancer' ? '' : 'none';
+        document.querySelectorAll('.protocol-badges .badge').forEach(badge => {
+            const show = viewName === 'chain' || ['vless', 'trojan'].includes(badge.dataset.protocol);
+            badge.style.display = show ? '' : 'none';
+        });
     }
 
     mainTabs.forEach(tab => {
         tab.addEventListener('click', () => switchMainTab(tab.dataset.view));
     });
 
+    // Apply badge visibility for the initial view (enhancer is active by default)
+    switchMainTab('enhancer');
+
     // ===== Tab switching =====
     function switchTab(tabName) {
         [tabXray, tabSingbox].forEach(t => t.classList.remove('active'));