refactor: enhance MarketSearchBar by statically importing features for improved performance

- Replaced dynamic imports of SearchSuggestions and useSearchKeyboardShortcuts with static imports to optimize loading times.
- Simplified recent searches handling by directly assigning values instead of using nested references.
- Updated keyboard shortcut handling to remove unnecessary checks, streamlining the functionality.

These changes improve the performance and clarity of the MarketSearchBar component, enhancing the overall user experience.

src/modules/market/components/MarketSearchBar.vue

@@ -93,8 +93,8 @@ import { useLocalStorage, useBreakpoints, breakpointsTailwind, useDebounceFn } f
 import type { Product } from '../types/market'
 
 // Conditional imports for enhanced mode
-const SearchSuggestions = ref()
+import SearchSuggestions from './SearchSuggestions.vue'
-const useSearchKeyboardShortcuts = ref()
+import { useSearchKeyboardShortcuts } from '../composables/useSearchKeyboardShortcuts'
 
 interface Props {
   /**
@@ -159,20 +159,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-// Dynamically import enhanced features only when needed
+// Enhanced features imported statically for better performance
-const initializeEnhancements = async () => {
-  if (props.showEnhancements) {
-    const [suggestionModule, shortcutModule] = await Promise.all([
-      import('./SearchSuggestions.vue'),
-      import('../composables/useSearchKeyboardShortcuts')
-    ])
-    SearchSuggestions.value = suggestionModule.default
-    useSearchKeyboardShortcuts.value = shortcutModule.useSearchKeyboardShortcuts
-  }
-}
-
-// Initialize enhancements
-initializeEnhancements()
 
 // Create reactive data ref for the composable
 const dataRef = computed(() => props.data)
@@ -192,9 +179,9 @@ const searchInputRef = ref()
 const isFocused = ref(false)
 
 // Enhanced features state (only initialized if showEnhancements is true)
-const recentSearches = computed(() =>
+const recentSearches = props.showEnhancements
-  props.showEnhancements ? useLocalStorage<string[]>('market-recent-searches', []) : ref([])
+  ? useLocalStorage<string[]>('market-recent-searches', [])
-)
+  : ref<string[]>([])
 
 // Responsive breakpoints (only for enhanced mode)
 const breakpoints = computed(() =>
@@ -319,7 +306,7 @@ const handleKeydown = (event: KeyboardEvent) => {
   }
 
   // Use enhanced keyboard shortcuts if available
-  if (useSearchKeyboardShortcuts.value && handleSearchKeydown) {
+  if (handleSearchKeydown) {
     const shouldClear = handleSearchKeydown(event)
     if (shouldClear) {
       if (internalQuery.value || searchQuery.value) {
@@ -381,8 +368,8 @@ let handleSearchKeydown = (_event: KeyboardEvent) => false
 
 // Initialize keyboard shortcuts for enhanced mode
 watch(() => props.showEnhancements, async (showEnhancements) => {
-  if (showEnhancements && useSearchKeyboardShortcuts.value) {
+  if (showEnhancements && useSearchKeyboardShortcuts) {
-    const shortcuts = useSearchKeyboardShortcuts.value(searchInputRef)
+    const shortcuts = useSearchKeyboardShortcuts(searchInputRef)
     focusSearchInput = shortcuts.focusSearchInput
     blurSearchInput = shortcuts.blurSearchInput
     handleSearchKeydown = shortcuts.handleSearchKeydown