Add Wishlist search

src/views/Wishlist.vue

 <template>
   <TableView title="Wishlist">
-    <Table
-      v-if="!isEmpty"
-      :loading="loading"
-      :data="filteredMovies"
-      :adminFunc="deleteWish"
-      isWishlist
+    <input
+      type="search"
+      placeholder="Title, year or genre"
+      v-model="searchQuery"
+      class="mb-4 w-1/2 self-center"
     />
+    <div v-if="!isEmpty">
+      <Table :loading="loading" :data="filteredMovies" :adminFunc="deleteWish" isWishlist />
+      <Button v-if="hasMore" class="mx-auto" @click="loadMore">Load more</Button>
+    </div>
     <div v-else>
       <h3>No movies in wishlist</h3>
       <Button @click="redirect">Add new movies</Button>
@@ -15,14 +18,20 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { useWishlistMovies, useMovies, useWishlist } from "../hooks";
+import { useWishlistMovies, useMovies, useWishlist, useMatchedMovies } from "../hooks";
 import Button from "../components/Button.vue";
 import Table from "../components/Table.vue";
 import TableView from "../components/TableView.vue";
 
 const { movies, loading } = useMovies();
 const { wishlist, deleteWish, isEmpty } = useWishlist();
-const { wishlistFilteredMovies: filteredMovies } = useWishlistMovies(movies, wishlist, true);
+const { wishlistFilteredMovies } = useWishlistMovies(movies, wishlist, true);
+const {
+  searchQuery,
+  loadMore,
+  hasMore,
+  moviesMatchingSearchQuery: filteredMovies,
+} = useMatchedMovies(wishlistFilteredMovies);
 const router = useRouter();
 
 const redirect = () => router.push({ name: "movies" });