feat: TextStats + better searchbar

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

src/components/SearchBar.vue

@@ -6,10 +6,13 @@
             color="white"
             hide-details
             :items="items"
-            item-text="component.name"
+            item-text="text"
             item-value="path"
             solo-inverted
             @change="choose"
+            :filter="filter"
+            clearable
+            cache-items
     >
         <template v-slot:no-data>
             <v-list-item>
@@ -22,23 +25,36 @@
 </template>
 
 <script>
+    import {toolsComponentsFlat} from '../router'
 
-    import {toolsRoutes} from '../router'
-
+    console.log(toolsComponentsFlat);
     export default {
         name: "SearchBar",
-        data(){
+        data() {
             const vm = this;
             return {
-                items:toolsRoutes,
-                choose(path){
-                    vm.$router.push(path)
+                items: toolsComponentsFlat,
+                choose(path) {
+                    vm.$router.push(path).catch(() => {
+                    })
                 }
             }
         },
+        methods: {
+            filter(item, queryText, itemText) {
+                const query = queryText.trim().toLowerCase();
+                const nameContainsText = itemText.toLowerCase().includes(query);
+                const keywordContainsText = item.keywords ? item.keywords.some(keyword => keyword.toLowerCase().includes(query)) : false;
+                return nameContainsText || keywordContainsText;
+            }
+        }
     }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+    ::v-deep .v-list-item__mask{
+        color: inherit !important;
+        background: inherit !important;
+    }
 
 </style>