refactor(ui): remove redundant VLANs sidebar item and dedicated section in favor of Interfaces management

internal/web/static/app.js

@@ -76,6 +76,10 @@ function navigate(tabName) {
     navigate('bgp');
     return;
   }
+  if (tabName === 'vlans') {
+    navigate('interfaces');
+    return;
+  }
 
   state.activeTab = tabName;
   window.location.hash = tabName;
@@ -667,13 +671,14 @@ function renderInterfacesList() {
 // Render VLANs Dedicated View
 function renderVlansList() {
   const tbody = document.getElementById('vlans-table-body');
+  if (!tbody) return;
   const emptyState = document.getElementById('vlans-empty-state');
   const countBadge = document.getElementById('vlans-table-count');
   const query = (document.getElementById('vlan-search')?.value || '').toLowerCase();
 
   tbody.innerHTML = '';
   const allVlans = state.vlans || [];
-  countBadge.innerText = allVlans.length;
+  if (countBadge) countBadge.innerText = allVlans.length;
 
   const filtered = allVlans.filter(v => {
     if (!query) return true;

internal/web/static/index.html

@@ -113,17 +113,6 @@
           <span id="badge-bridge-count" class="text-[10px] bg-sky-950 text-sky-300 border border-sky-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
         </a>
 
-        <a href="#vlans" onclick="navigate('vlans')" id="nav-vlans"
-           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
-          <div class="flex items-center space-x-2.5">
-            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-            </svg>
-            <span>VLANs (802.1Q)</span>
-          </div>
-          <span id="badge-vlans-count" class="text-[10px] bg-cyan-950 text-cyan-400 border border-cyan-800/50 px-1.5 py-0.2 rounded-full font-mono">0</span>
-        </a>
-
         <a href="#firewall" onclick="navigate('firewall')" id="nav-firewall"
            class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
           <div class="flex items-center space-x-2.5">
@@ -730,52 +719,6 @@
           </div>
         </section>
 
-        <!-- ================= SECTION: VLANS (802.1Q) ================= -->
-        <section id="section-vlans" class="hidden space-y-6">
-          <div class="bg-gradient-to-r from-cyan-950/60 via-slate-900 to-slate-900 border border-cyan-800/40 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
-            <div class="max-w-xl">
-              <div class="flex items-center gap-2 mb-1">
-                <span class="px-2 py-0.5 rounded text-[11px] font-mono bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 font-semibold">IEEE 802.1Q</span>
-                <h2 class="text-base font-bold text-white">VLAN Virtual Sub-interfaces</h2>
-              </div>
-              <p class="text-xs text-slate-400 leading-relaxed">
-                Tagged sub-interfaces on physical parent interfaces (e.g. <code class="text-cyan-300">eth0.10</code>).
-              </p>
-            </div>
-            <button onclick="openVlanModal()" class="flex items-center space-x-2 bg-gradient-to-r from-brand-600 to-cyan-600 hover:from-brand-500 hover:to-cyan-500 text-white font-semibold text-xs px-4 py-2.5 rounded-lg shadow-lg shadow-cyan-500/20 transition">
-              <span>+ Create VLAN Sub-interface</span>
-            </button>
-          </div>
-
-          <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
-            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
-              <h3 class="text-sm font-bold text-white">Configured VLANs</h3>
-              <input type="text" id="vlan-search" oninput="renderVlansList()" placeholder="Filter VLAN ID..."
-                     class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1 text-xs text-white focus:outline-none focus:border-cyan-500 w-52">
-            </div>
-            <div class="overflow-x-auto">
-              <table class="w-full text-left text-xs font-mono">
-                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[11px] font-sans">
-                  <tr>
-                    <th class="py-3 px-4 font-semibold">VLAN ID</th>
-                    <th class="py-3 px-4 font-semibold">Device</th>
-                    <th class="py-3 px-4 font-semibold">Parent</th>
-                    <th class="py-3 px-4 font-semibold">Subnet (CIDR)</th>
-                    <th class="py-3 px-4 font-semibold">Role</th>
-                    <th class="py-3 px-4 font-semibold">MTU</th>
-                    <th class="py-3 px-4 font-semibold">Status</th>
-                    <th class="py-3 px-4 font-semibold text-right">Actions</th>
-                  </tr>
-                </thead>
-                <tbody id="vlans-table-body" class="divide-y divide-slate-800"></tbody>
-              </table>
-            </div>
-            <div id="vlans-empty-state" class="hidden p-12 text-center text-slate-500">
-              No VLANs configured. Click "+ Create VLAN" to add one.
-            </div>
-          </div>
-        </section>
-
         <!-- ================= SECTION: PPPoE CLIENTS (MikroTik style) ================= -->
         <section id="section-pppoe" class="hidden space-y-6">
           <div class="bg-gradient-to-r from-blue-950/40 via-slate-900 to-slate-900 border border-blue-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
@@ -4609,6 +4552,6 @@
     </div>
   </div>
 
-  <script src="app.js?v=3.5"></script>
+  <script src="app.js?v=3.6"></script>
 </body>
 </html>