✨ feat(appfilter.vue): add categories filter

src/components/AppFilter/AppFilter.vue

@@ -8,8 +8,9 @@ const { categories } = useDBStore()
 
 const dropdown = ref(false)
 const categorySearch = ref(null)
+const filterValue = ref('')
+const categoriesList = ref(categories)
 const selectedValue: Ref<Category | null> = ref(null)
-
 const toggleDropdown = () => {
   dropdown.value = !dropdown.value
 
@@ -23,6 +24,15 @@ const selectCategory = (category: Category) => {
   selectedValue.value = category
   closeDropdown()
 }
+const filterCategories = () => {
+  if (filterValue.value) {
+    categoriesList.value = categoriesList.value.filter((category) =>
+      category.name.toLowerCase().includes(filterValue.value.toLowerCase())
+    )
+    return
+  }
+  categoriesList.value = categories
+}
 </script>
 
 <template>
@@ -36,7 +46,9 @@ const selectCategory = (category: Category) => {
         name="category-dropdown"
         placeholder="Filter by Categories"
         aria-haspopup="true"
+        @input="filterCategories"
         @focusin="openDropdown"
+        v-model="filterValue"
       />
       <button
         @click="toggleDropdown"
@@ -58,7 +70,7 @@ const selectCategory = (category: Category) => {
       aria-labelledby="category-dropdown-btn"
     >
       <li
-        v-for="(category, index) in categories"
+        v-for="(category, index) in categoriesList"
         :key="index"
         @click="selectCategory(category)"
         role="option"

src/components/AppFilter/_AppFilter.scss

@@ -14,7 +14,7 @@
   }
 
   &__dropdown {
-    @apply absolute top-10 z-10 bg-white border p-3 left-0 max-h-80 shadow-2xl rounded-lg overflow-y-scroll;
+    @apply absolute top-10 z-10 bg-white border p-3 left-0 max-h-80 shadow-2xl rounded-lg overflow-y-scroll w-full;
     li {
       @apply p-2 transition-all flex;
       &:hover {