collection search added

src/views/CollectionView.vue

@@ -1,7 +1,7 @@
 <script setup>
 import CollectionToolbar from '@/views/CollectionView/CollectionToolbar.vue'
 import CollectionMerchCard from '@/views/CollectionView/CollectionMerchCard.vue'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useMerchApi } from '@/api/merch.js'
 
 const merchList = ref(null)
@@ -25,12 +25,25 @@ const fetchMerch = async () => {
 onMounted(() => {
   fetchMerch()
 })
+
+const searchQuery = ref('');
+
+
+const filteredMerch = computed(() => {
+  if (!searchQuery.value.trim()) {
+    return merchList.value;
+  }
+  const q = searchQuery.value.toLowerCase();
+  return merchList.value.filter(item =>
+    item.name.toLowerCase().includes(q)
+  );
+});
 </script>
 
 <template>
-  <CollectionToolbar />
+  <CollectionToolbar v-model="searchQuery" />
   <n-grid responsive="screen" cols="2 s:3 m:4 l:5 xl:6 2xl:7" class="grid-main">
-    <n-gi class="grid-item" v-for="item in merchList" :key="item.merch_uuid">
+    <n-gi class="grid-item" v-for="item in filteredMerch" :key="item.merch_uuid">
       <router-link :to="`/details/${item.merch_uuid}`" class="card-link">
         <CollectionMerchCard :merch="item" />
       </router-link>

src/views/CollectionView/CollectionToolbar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import router from '@/router/index.js'
 
 
@@ -12,6 +12,28 @@ const options = [
 const addMerch = () => {
   router.push({ name: 'addMerch' })
 }
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const localValue = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    localValue.value = newVal
+  }
+)
+
+watch(localValue, (newVal) => {
+  emit('update:modelValue', newVal)
+})
 </script>
 
 <template>
@@ -19,7 +41,7 @@ const addMerch = () => {
     <n-button type="primary" class="toolbar-item" @click="addMerch"> Add merch </n-button>
 
     <div class="search-wrapper toolbar-item">
-      <n-input placeholder="Search..." clearable />
+      <n-input v-model:value="localValue" placeholder="Search..." clearable />
     </div>
 
     <div class="selector toolbar-item">