refactor: prefer useTemplateRef (#749)

Author: 9romise

app/components/AppHeader.vue

@@ -19,7 +19,7 @@ const showMobileMenu = shallowRef(false)
 const route = useRoute()
 const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
-const searchBoxRef = shallowRef<{ focus: () => void } | null>(null)
+const searchBoxRef = useTemplateRef('searchBoxRef')
 
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')

app/components/Header/SearchBox.vue

@@ -80,7 +80,7 @@ function handleSearchFocus() {
 }
 
 // Expose focus method for parent components
-const inputRef = shallowRef<HTMLInputElement | null>(null)
+const inputRef = useTemplateRef('inputRef')
 function focus() {
   inputRef.value?.focus()
 }

app/components/Modal.client.vue

@@ -3,7 +3,7 @@ const props = defineProps<{
   modalTitle: string
 }>()
 
-const dialogRef = ref<HTMLDialogElement>()
+const dialogRef = useTemplateRef('dialogRef')
 
 const modalTitleId = computed(() => {
   const id = getCurrentInstance()?.attrs.id

app/components/Package/ClaimPackageModal.vue

@@ -96,7 +96,7 @@ async function handleClaim() {
   }
 }
 
-const dialogRef = ref<HTMLDialogElement>()
+const dialogRef = useTemplateRef('dialogRef')
 
 function open() {
   // Reset state and check availability each time modal is opened