Extension list UI improvements (#769)

* Extensions list is now sorted alphabetically

* Added extension list search

* Prettified changes

* Removed console.log

* Code improvements based on motorina0 feedback

* Remove console.log from lnbits/templates/base.html

Run prettier

lnbits/core/static/js/extensions.js

@@ -1,4 +1,36 @@
 new Vue({
   el: '#vue',
+  data: function () {
+    return {
+      searchTerm: '',
+      filteredExtensions: null
+    }
+  },
+  mounted() {
+    this.filteredExtensions = this.g.extensions
+  },
+  watch: {
+    searchTerm(term) {
+      // Reset the filter
+      this.filteredExtensions = this.g.extensions
+      if (term !== '') {
+        // Filter the extensions list
+        function extensionNameContains(searchTerm) {
+          return function (extension) {
+            return (
+              extension.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+              extension.shortDescription
+                .toLowerCase()
+                .includes(searchTerm.toLowerCase())
+            )
+          }
+        }
+
+        this.filteredExtensions = this.filteredExtensions.filter(
+          extensionNameContains(term)
+        )
+      }
+    }
+  },
   mixins: [windowMixin]
 })

lnbits/core/templates/core/extensions.html

@@ -2,10 +2,23 @@
 %} {% block scripts %} {{ window_vars(user) }}
 <script src="/core/static/js/extensions.js"></script>
 {% endblock %} {% block page %}
+<div class="row q-col-gutter-md q-mb-md">
+  <div class="col-sm-3 col-xs-8 q-ml-auto">
+    <q-input v-model="searchTerm" label="Search extensions">
+      <q-icon
+        v-if="searchTerm !== ''"
+        name="close"
+        @click="searchTerm = ''"
+        class="cursor-pointer q-mt-lg"
+      />
+    </q-input>
+  </div>
+</div>
+
 <div class="row q-col-gutter-md">
   <div
     class="col-6 col-md-4 col-lg-3"
-    v-for="extension in g.extensions"
+    v-for="extension in filteredExtensions"
     :key="extension.code"
   >
     <q-card>