feat: add haptic feedback to all action buttons

components/home/BookshelfToolbar.vue

@@ -8,7 +8,7 @@
         <p v-show="!selectedSeriesName" class="font-book pt-1">{{ totalEntities }} {{ entityTitle }}</p>
         <p v-show="selectedSeriesName" class="ml-2 font-book pt-1">{{ selectedSeriesName }} ({{ totalEntities }})</p>
         <div class="flex-grow" />
-        <span v-if="page == 'library' || seriesBookPage" class="material-icons px-2" @click="bookshelfListView = !bookshelfListView">{{ !bookshelfListView ? 'view_list' : 'grid_view' }}</span>
+        <span v-if="page == 'library' || seriesBookPage" class="material-icons px-2" @click="changeView()">{{ !bookshelfListView ? 'view_list' : 'grid_view' }}</span>
         <template v-if="page === 'library'">
           <div class="relative flex items-center px-2">
             <span class="material-icons" @click="showFilterModal = true">filter_alt</span>
@@ -25,6 +25,8 @@
 </template>
 
 <script>
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+
 export default {
   data() {
     return {
@@ -102,6 +104,10 @@ export default {
     },
     setTotalEntities(total) {
       this.totalEntities = total
+    },
+    async changeView() {
+      this.bookshelfListView = !this.bookshelfListView
+      await Haptics.impact({ style: ImpactStyle.Medium });
     }
   },
   mounted() {
@@ -120,4 +126,4 @@ export default {
 #bookshelf-toolbar {
   box-shadow: 0px 5px 5px #11111155;
 }
-</style>
+</style>