```
// ==UserScript==
// @name         Concept Search
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  A userscript to search concepts on a webpage
// @author       You
// @match        https://example.com/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=example.com
// @grant        none
// @require      https://cdnjs.cloudflare.com/ajax/libs/fuse.js/7.0.0/fuse.min.js
// ==/UserScript==

(function () {
  "use strict";

  // Helper function to debounce an action
  function debounce(fn, delay) {
    let timer;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => fn.apply(this, args), delay);
    };
  }

  // Apply styles to the page
  function applyStyles() {
    const css = `
    #searchIcon {
       position: fixed;
       z-index: 2147483647;
       top: 10px;
       right: 10px;
       font-size: 24px;
       cursor: pointer;
     }

     #search-popup {
       display: none;
       position: fixed;
       z-index: 999;
       top: 14px;
       right: 40px;
     }

     #search-popup input[type="text"] {
       display: block;
       margin-bottom: 10px;
       position: fixed;
       top: 10px;
       right: 40px;
     }

     #results {
       display: none;
       position: fixed;
       top: 50px;
       right: 25px;
       margin: 0;
       padding: 10px;
       background-color: #f8f9fa;
       border: 1px solid #ced4da;
       width: 650px;
       height: 800px;
       font-family: monospace;
       overflow-y: scroll;
       overflow-x: scroll;
     }

     #no-matches-message {
       display: none;
       position: fixed;
       top: 40px;
       right: 30px;
       font-size: 16px;
       color: #ff0000;
       margin-top: 10px;
     }
   ;
`
    let style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);
  }

  function createSearchIcon() {
    const searchIcon = document.createElement('div');
    searchIcon.id = 'searchIcon';
    searchIcon.innerHTML = '🔍'; // Using emoji for simplicity
    document.body.appendChild(searchIcon);
    return searchIcon;
  }

  function createSearchPopup() {
    const searchPopup = document.createElement('div');
    searchPopup.id = 'search-popup';
    document.body.appendChild(searchPopup);
    return searchPopup;
  }

  function togglePopupVisibility(isPopupVisible, searchPopup) {
    searchPopup.style.display = isPopupVisible ? 'none' : 'block';
    return !isPopupVisible;
  }

  function createSearchElements(searchPopup) {
    const searchField = document.createElement('input');
    searchField.id = 'query';
    searchField.type = 'text';
    searchField.placeholder = 'Enter your query here';
    searchField.setAttribute('aria-label', 'Search');
    searchField.size = 45;

    const searchResults = document.createElement('pre');
    searchResults.id = 'results';

    const noMatchesMessage = document.createElement('div');
    noMatchesMessage.id = 'no-matches-message';
    noMatchesMessage.textContent = 'No matches found.';

    searchPopup.appendChild(searchField);
    searchPopup.appendChild(noMatchesMessage);
    searchPopup.appendChild(searchResults);

    return { searchField, searchResults, noMatchesMessage };
  }

  function performSearch(fuse) {
    const query = document.getElementById('query').value.trim();
    const resultsDiv = document.getElementById('results');
    const noMatchesMessage = document.getElementById('no-matches-message');

    if (query !== '') {
      const matches = fuse.search(query);
      if (matches.length > 0) {
        resultsDiv.style.display = 'block';
        noMatchesMessage.style.display = 'none';
        resultsDiv.textContent = JSON.stringify(matches, null, 2);
      } else {
        resultsDiv.style.display = 'none';
        noMatchesMessage.style.display = 'block';
      }
    } else {
      resultsDiv.style.display = 'none';
      noMatchesMessage.style.display = 'none';
    }
  }

  applyStyles();

  const searchIcon = createSearchIcon();
  const searchPopup = createSearchPopup();
  const { searchField, searchResults, noMatchesMessage } = createSearchElements(searchPopup);

  let isPopupVisible = false;

  searchIcon.addEventListener('click', () => {
    isPopupVisible = togglePopupVisibility(isPopupVisible, searchPopup);
  });


    // Load the JSON data from a file or a string
  const data = [
    {
      id: 62,
      marker: "th_langue_africain",
      comment: "Marqueur de langue - africain",
      concepts: "origine/films d'afrique",
    },
    {
      id: 70,
      marker: "th_langue_chinois",
      comment: "Marqueur de langue - chinois",
      concepts: "origine/films d'asie",
    },
];

  const options = {
    keys: ['marker', 'comment', 'concepts'],
    threshold: 0.3,
    useExtendedSearch: true,
  };
  const fuse = new Fuse(data, options);

  // Bind the debounced search function to the 'input' event
  searchField.addEventListener('input', debounce(() => performSearch(fuse), 250));
  searchField.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      performSearch(fuse);
    }
  });

})();
````
Expert: Javascript, HTML, CSS, UX
Give me a plan to improve this userscript