[DOCS] Add search and filter bar to board selection page (#2291)

Add a search input and filter chips to the web-install board grid,
allowing users to quickly find boards by name, MCU family (ESP32,
ESP32-S3, ESP32-C3, ESP8266), or gateway type (BLE, RF, IR, LoRa,
RTL_433, Pilight). Filters are derived dynamically from the board
data. Shows result count and a clear-all button when filters are
active.

Co-authored-by: Florian <1technophile@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

docs/.vuepress/components/BoardEnvironmentTable.vue

@@ -12,14 +12,74 @@
       <p>{{ error }}</p>
     </div>
 
-    <div v-if="!loading && !error" class="boards-grid">
+    <div v-if="!loading && !error">
+      <!-- Search and Filter Bar -->
+      <div class="filter-bar">
+        <div class="search-box">
+          <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="Search by name, description, module..."
+            class="search-input"
+            aria-label="Search boards">
+          <button
+            v-if="searchQuery"
+            class="search-clear"
+            @click="searchQuery = ''"
+            aria-label="Clear search">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+
+        <div class="filter-groups">
+          <div class="filter-group">
+            <span class="filter-group__label">MCU:</span>
+            <div class="filter-chips">
+              <button
+                v-for="mcu in mcuFilters"
+                :key="mcu"
+                :class="['filter-chip', { 'filter-chip--active': activeMcuFilter === mcu }]"
+                @click="toggleMcuFilter(mcu)">
+                {{ mcu }}
+              </button>
+            </div>
+          </div>
+          <div class="filter-group">
+            <span class="filter-group__label">Gateway:</span>
+            <div class="filter-chips">
+              <button
+                v-for="gw in gatewayFilters"
+                :key="gw.key"
+                :class="['filter-chip', { 'filter-chip--active': activeGatewayFilter === gw.key }]"
+                @click="toggleGatewayFilter(gw.key)">
+                {{ gw.label }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="hasActiveFilters" class="filter-status">
+          <span>Showing {{ filteredBoards.length }} of {{ boards.length }} boards</span>
+          <button class="filter-clear" @click="clearFilters">Clear all filters</button>
+        </div>
+      </div>
+
+      <!-- No Results -->
+      <div v-if="filteredBoards.length === 0" class="no-results">
+        <p>No boards match your filters.</p>
+        <button class="filter-clear" @click="clearFilters">Clear all filters</button>
+      </div>
+
+      <div class="boards-grid">
       <article
-        v-for="board in boards"
+        v-for="board in filteredBoards"
         :key="board.environment"
         class="board-card"
         @click="openSelector(board.environment)">
         
         <div class="board-card__image">
+          <span v-if="popularEnvironments.indexOf(board.environment) !== -1" class="popular-badge">Popular</span>
           <img
             :src="getBoardImageUrl(board)"
             :alt="board.environment"
@@ -98,6 +158,7 @@
           </div>
         </div>
       </article>
+      </div>
     </div>
   </div>
 </template>
@@ -121,7 +182,17 @@ export default {
       loading: false,
       error: null,
       expandedModules: {},
-      expandedLibraries: {}
+      expandedLibraries: {},
+      searchQuery: '',
+      activeMcuFilter: null,
+      activeGatewayFilter: null,
+      popularEnvironments: [
+        'esp32dev-ble',
+        'theengs-bridge-v11',
+        'lilygo-rtl_433',
+        'lilygo-rtl_433-fsk',
+        'esp32dev-ir'
+      ]
     };
   },
   computed: {
@@ -130,9 +201,89 @@ export default {
     },
     resolvedSelectorUrl() {
       return this.buildUrl(this.selectorPath);
+    },
+    mcuFilters() {
+      var families = {};
+      this.boards.forEach(function(b) {
+        var family = this.getMcuFamily(b.microcontroller);
+        if (family) families[family] = true;
+      }.bind(this));
+      return Object.keys(families).sort();
+    },
+    gatewayFilters() {
+      var gateways = {
+        BT: 'BLE',
+        RF: 'RF',
+        IR: 'IR',
+        LORA: 'LoRa',
+        RTL_433: 'RTL_433',
+        Pilight: 'Pilight'
+      };
+      var result = [];
+      var self = this;
+      Object.keys(gateways).forEach(function(key) {
+        var hasBoards = self.boards.some(function(b) {
+          return Array.isArray(b.modules) && b.modules.some(function(m) {
+            return m.toLowerCase().indexOf(key.toLowerCase()) !== -1;
+          });
+        });
+        if (hasBoards) {
+          result.push({ key: key, label: gateways[key] });
+        }
+      });
+      return result;
+    },
+    hasActiveFilters() {
+      return this.searchQuery || this.activeMcuFilter || this.activeGatewayFilter;
+    },
+    filteredBoards() {
+      var self = this;
+      return this.boards.filter(function(board) {
+        if (self.searchQuery) {
+          var q = self.searchQuery.toLowerCase();
+          var haystack = [
+            board.environment,
+            board.description || '',
+            board.microcontroller || '',
+            (board.modules || []).join(' ')
+          ].join(' ').toLowerCase();
+          if (haystack.indexOf(q) === -1) return false;
+        }
+        if (self.activeMcuFilter) {
+          var family = self.getMcuFamily(board.microcontroller);
+          if (family !== self.activeMcuFilter) return false;
+        }
+        if (self.activeGatewayFilter) {
+          var key = self.activeGatewayFilter.toLowerCase();
+          if (!Array.isArray(board.modules) || !board.modules.some(function(m) {
+            return m.toLowerCase().indexOf(key) !== -1;
+          })) return false;
+        }
+        return true;
+      });
     }
   },
   methods: {
+    getMcuFamily(mcu) {
+      if (!mcu) return null;
+      var m = mcu.toLowerCase();
+      if (m.indexOf('esp32-s3') !== -1 || m.indexOf('esp32s3') !== -1 || m.indexOf('atoms3') !== -1 || m.indexOf('lilygo-t3-s3') !== -1) return 'ESP32-S3';
+      if (m.indexOf('esp32-c3') !== -1 || m.indexOf('esp32c3') !== -1 || m.indexOf('lolin_c3') !== -1 || m.indexOf('airm2m') !== -1) return 'ESP32-C3';
+      if (m.indexOf('esp32') !== -1 || m.indexOf('m5st') !== -1 || m.indexOf('heltec') !== -1 || m.indexOf('ttgo') !== -1 || m.indexOf('lolin32') !== -1 || m.indexOf('pico32') !== -1 || m.indexOf('tinypico') !== -1 || m.indexOf('feather') !== -1) return 'ESP32';
+      if (m.indexOf('esp8') !== -1 || m.indexOf('nodemcu') !== -1) return 'ESP8266';
+      return 'Other';
+    },
+    toggleMcuFilter(mcu) {
+      this.activeMcuFilter = this.activeMcuFilter === mcu ? null : mcu;
+    },
+    toggleGatewayFilter(gw) {
+      this.activeGatewayFilter = this.activeGatewayFilter === gw ? null : gw;
+    },
+    clearFilters() {
+      this.searchQuery = '';
+      this.activeMcuFilter = null;
+      this.activeGatewayFilter = null;
+    },
     buildUrl(path) {
       const base = this.$site?.base || '/';
       const cleanBase = base.endsWith('/') ? base.slice(0, -1) : base;
@@ -151,9 +302,16 @@ export default {
         if (!Array.isArray(data)) {
           throw new Error('boards-info.json must be an array');
         }
+        var self = this;
         this.boards = data
           .filter(board => board && typeof board.environment === 'string')
-          .sort((a, b) => a.environment.localeCompare(b.environment));
+          .sort(function(a, b) {
+            var aPopular = self.popularEnvironments.indexOf(a.environment) !== -1;
+            var bPopular = self.popularEnvironments.indexOf(b.environment) !== -1;
+            if (aPopular && !bPopular) return -1;
+            if (!aPopular && bPopular) return 1;
+            return a.environment.localeCompare(b.environment);
+          });
       } catch (err) {
         console.error('Failed to load boards-info:', err);
         this.error = err.message || 'Unable to load board information';
@@ -196,10 +354,154 @@ export default {
   margin: 2rem 0;
 }
 
+/* Search and Filter Bar */
+.filter-bar {
+  margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.search-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 12px;
+  color: var(--text-color-secondary, #666);
+  pointer-events: none;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.6rem 2.2rem 0.6rem 2.4rem;
+  border: 1px solid var(--border-color, #eaecef);
+  border-radius: 8px;
+  font-size: 0.9rem;
+  background: #ffffff;
+  color: var(--text-color, #2c3e50);
+  transition: border-color 0.2s;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--accent-color, #3eaf7c);
+  box-shadow: 0 0 0 3px rgba(62, 175, 124, 0.15);
+}
+
+.search-input::placeholder {
+  color: var(--text-color-secondary, #999);
+}
+
+.search-clear {
+  position: absolute;
+  right: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: var(--text-color-secondary, #666);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+}
+
+.search-clear:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.filter-groups {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.filter-group__label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-color-secondary, #666);
+  white-space: nowrap;
+}
+
+.filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.filter-chip {
+  background: var(--code-bg-color, #f6f8fa);
+  color: var(--text-color, #2c3e50);
+  border: 1px solid var(--border-color, #eaecef);
+  padding: 0.25rem 0.7rem;
+  border-radius: 16px;
+  font-size: 0.78rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.filter-chip:hover {
+  border-color: var(--accent-color, #3eaf7c);
+  color: var(--accent-color, #3eaf7c);
+}
+
+.filter-chip--active {
+  background: var(--accent-color, #3eaf7c);
+  color: #ffffff;
+  border-color: var(--accent-color, #3eaf7c);
+}
+
+.filter-chip--active:hover {
+  color: #ffffff;
+  opacity: 0.9;
+}
+
+.filter-status {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.85rem;
+  color: var(--text-color-secondary, #666);
+}
+
+.filter-clear {
+  background: none;
+  border: none;
+  color: var(--accent-color, #3eaf7c);
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 500;
+  padding: 0;
+}
+
+.filter-clear:hover {
+  text-decoration: underline;
+}
+
+.no-results {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--text-color-secondary, #666);
+}
+
+.no-results p {
+  margin-bottom: 1rem;
+}
+
 /* Grid Layout */
 .boards-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 1.5rem;
   margin-top: 1.5rem;
 }
@@ -232,6 +534,21 @@ export default {
   justify-content: center;
   min-height: 120px;
   border-bottom: 1px solid var(--border-color, #eaecef);
+  position: relative;
+}
+
+.popular-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: #ff9800;
+  color: #ffffff;
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
 }
 
 .board-card__image img {
@@ -374,6 +691,15 @@ export default {
 
 /* Responsive */
 @media (max-width: 768px) {
+  .filter-groups {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .filter-group {
+    flex-wrap: wrap;
+  }
+
   .boards-grid {
     grid-template-columns: 1fr;
     gap: 1rem;