feat: restructure list

app/components/content/tools/list.vue

@@ -2,8 +2,8 @@
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import AppToolsEntryForm from '~/components/app/tools/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import AppToolsEntryForm from '~/components/app/tools/entry-form.vue'
 
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
@@ -60,8 +60,8 @@ const headerPrep: HeaderPrep = {
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
-    onInput: (_val: string) => {
-      // Handle search input - this will be triggered by the header component
+    onInput: (value: string) => {
+      searchInput.value = value
     },
     onClick: () => {
       // Handle search button click if needed
@@ -131,7 +131,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    @search="handleSearch"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
   <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
   <Dialog