Offer a filter for app compatibility

# AGENTS Methods Log

- # AGENTS Methods Log

- 2025-12-06: Simplified the `/devices` compatibility column to show only the computed level label while keeping the compatibility span for filtering.

- 2025-12-07: Taught `htdocs/assets/js/code.js` to respect the `data-compatibility-level` attribute so the Apps compatibility selector actually filters the table rows instead of depending on visible text.

- 2025-12-05: Added the “Apps compatibility” selector inside the `/devices` search options, tied it to the hidden `compatibility-level` span, and kept the descriptive level display while hiding the raw score.

- 2025-12-04: Reworked the `/devices` compatibility column to show a descriptive level (Generally/Highly compatible) while keeping the scoring logic hidden; the thresholds are now documented in `README.md`.

- 2025-12-04: Implemented the compatibility scoring table inside `htdocs/_i18n/en/pages/devices.html`, scoring each device on bootloader state, build type, certification status, Play Integrity, Rootbeer results, and channel weight, while FP6 and Sunfish now expose the input map.

- 2025-12-04: Centralized install-mode metadata in `htdocs/_data/install_modes.yml`, normalized the string keys in `devices.html`, and let the template honor shared URLs/labels plus per-device overrides instead of duplicating the logic.

| `<= 5` | Generally compatible |

| `> 5` | Highly compatible |

The `/devices` table shows only the computed level label (Generally/Highly compatible) so visitors see a clear classification while the individual point contributions remain internal to the template.

The search/filter panel on the `/devices` page includes an “Apps compatibility” selector that lets readers restrict devices by these three levels, keeping the table aligned with the scoring logic.

Example data for FP6 and Sunfish are already present inside their respective YAML files. Devices without the map still render a score (using the defaults above) so the column never breaks.

## File Layout

                <option value="Community install doc">Community install doc</option>

              </select>

            </div>

            <div class="col-sm-2">

              <label for="app-compatibility" class="label-selector"><b>Apps compatibility</b></label>

              <select class="custom-select" id="app-compatibility" multiple>

                <option value="-1">All</option>

                <option value="Generally compatible">Generally compatible</option>

                <option value="Highly compatible">Highly compatible</option>

              </select>

            </div>

          </div>

          <div class="row">

            <div class="col-sm-2" id="battery">

          {%- endif -%}

          <tr data-device-type="{{ device.type }}" data-legacy="{{ device.legacy }}"

            data-verified-boot="{{ isVerifiedBoot }}">

            data-verified-boot="{{ isVerifiedBoot }}" data-compatibility-level="{{ level_label }}">

            <td class="brand">{{ vendor.name }}</td>

            {% if device.models %}

      })

      continue;

    }

    if (column === "compatibility-level") {

      $(".smartphone-table tbody tr").each((_, el) => {

        const rowValue = ($(el).attr("data-compatibility-level") || "").toLowerCase();

        if (value != "-1" && rowValue !== value) {

          $(el).toggle(false);

        }

      });

      continue;

    }

    $(".smartphone-table tr ." + column).filter(function () {

      var lineValue = $(this).text().toLowerCase().replaceAll(/\s/g, ' ');

      if (selectedFilters[column].type == "truncate") {

  addFilterSelector("release", "release");

  addFilterSelector("channel", "channel");

  addFilterSelector("install", "install");

  addFilterSelector("app-compatibility", "compatibility-level");

  addFilterSelector("device-type", "device-type", "device-type");

  addFilterSelector("legacy", "legacy", "legacy");