Merge pull request #66 from koloml/feature/property-icons-in-autocomplete

Added icon for the properties to differentiate between properties & tags

manifest.json

@@ -39,6 +39,9 @@
             ],
             "js": [
                 "src/content/header.js"
+            ],
+            "css": [
+                "src/styles/content/header.scss"
             ]
         },
         {

src/lib/components/SearchWrapper.js

@@ -289,6 +289,10 @@ export class SearchWrapper extends BaseComponent {
     suggestionItem.dataset.value = suggestedTerm;
     suggestionItem.innerText = suggestedTerm;
 
+    const propertyIcon = document.createElement('i');
+    propertyIcon.classList.add('fa', 'fa-info-circle');
+    suggestionItem.insertAdjacentElement('afterbegin', propertyIcon);
+
     suggestionItem.addEventListener('mouseover', () => {
       SearchWrapper.#findAndResetSelectedSuggestion(suggestionItem);
       suggestionItem.classList.add('autocomplete__item--selected');

src/styles/content/header.scss

@@ -0,0 +1,9 @@
+.autocomplete {
+  &__item {
+    &--property {
+      i {
+        margin-right: .5em;
+      }
+    }
+  }
+}