Add global search, update filters for new filter model

pages/index.vue

@@ -2,7 +2,9 @@
   <div class="w-full h-full">
     <div class="w-full h-12 relative z-20">
       <div id="toolbar" class="asolute top-0 left-0 w-full h-full bg-bg flex items-center px-2">
+        <span class="material-icons px-2" @click="showSearchModal = true">search</span>
         <p class="font-book">{{ numAudiobooks }} Audiobooks</p>
+
         <div class="flex-grow" />
         <span class="material-icons px-2" @click="showFilterModal = true">filter_alt</span>
         <span class="material-icons px-2" @click="showSortModal = true">sort</span>
@@ -12,6 +14,7 @@
 
     <modals-order-modal v-model="showSortModal" :order-by.sync="settings.orderBy" :descending.sync="settings.orderDesc" @change="updateOrder" />
     <modals-filter-modal v-model="showFilterModal" :filter-by.sync="settings.filterBy" @change="updateFilter" />
+    <modals-search-modal v-model="showSearchModal" />
   </div>
 </template>
 
@@ -21,6 +24,7 @@ export default {
     return {
       showSortModal: false,
       showFilterModal: false,
+      showSearchModal: false,
       settings: {}
     }
   },