Migrate all Vue components from Options API to <script setup>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/AccountMenu/SearchBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full 
+    <div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full
         justify-between">
         <input id="input_search" class="w-full outline-0" :placeholder="i18next.t('AcctMgmt.Search')"
             v-model="inputQuery" @keypress="handleKeyPressOfSearch"
@@ -9,30 +9,22 @@
     </div>
 </template>
 
-<script>
-import { ref, } from 'vue';
+<script setup>
+import { ref } from 'vue';
 import i18next from '@/i18n/i18n.js';
-export default {
-    setup(props, { emit, }) {
-        const inputQuery = ref("");
 
-        const onSearchClick = (event) => {
-            event.preventDefault();
-            emit('on-search-account-button-click', inputQuery.value);
-        };
+const emit = defineEmits(['on-search-account-button-click']);
 
-        const handleKeyPressOfSearch = (event) => {
-            if (event.key === 'Enter') {
-                emit('on-search-account-button-click', inputQuery.value);
-            }
-        }
+const inputQuery = ref("");
 
-        return {
-            inputQuery,
-            onSearchClick,
-            handleKeyPressOfSearch,
-            i18next,
-        };
-    },
+const onSearchClick = (event) => {
+    event.preventDefault();
+    emit('on-search-account-button-click', inputQuery.value);
 };
-</script>
+
+const handleKeyPressOfSearch = (event) => {
+    if (event.key === 'Enter') {
+        emit('on-search-account-button-click', inputQuery.value);
+    }
+};
+</script>