From a82360b283f17de2dc72dacc1f30e07d285f1e8f Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 26 Sep 2025 10:40:58 +0200
Subject: [PATCH] Enhance MarketFuzzySearch component with responsive keyboard
 hints

- Updated the keyboard shortcuts hint to display only on desktop devices, improving usability for users on larger screens.
- Introduced responsive breakpoints to manage the visibility of the enhanced placeholder, ensuring a better user experience across different device sizes.

These changes refine the search component by tailoring the interface to the user's device, enhancing accessibility and interaction.
---
 src/modules/market/components/MarketFuzzySearch.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/modules/market/components/MarketFuzzySearch.vue b/src/modules/market/components/MarketFuzzySearch.vue
index ec367f7..5054398 100644
--- a/src/modules/market/components/MarketFuzzySearch.vue
+++ b/src/modules/market/components/MarketFuzzySearch.vue
@@ -20,7 +20,7 @@
 
       <!-- Keyboard Shortcuts Hint -->
       <div class="absolute inset-y-0 right-0 pr-3 flex items-center gap-2">
-        <div v-if="showKeyboardHints && !searchQuery" class="text-xs text-muted-foreground hidden sm:flex items-center gap-1">
+        <div v-if="showKeyboardHints && !searchQuery && isDesktop" class="text-xs text-muted-foreground flex items-center gap-1">
           <Badge variant="outline" class="px-1 py-0 text-xs">⌘ K</Badge>
         </div>
 
@@ -118,7 +118,7 @@ import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Search, X, History } from 'lucide-vue-next'
-import { useLocalStorage } from '@vueuse/core'
+import { useLocalStorage, useBreakpoints, breakpointsTailwind } from '@vueuse/core'
 import type { Product } from '../types/market'
 
 interface Props {
@@ -199,9 +199,13 @@ const isFocused = ref(false)
 // Persistent recent searches (stored in localStorage)
 const recentSearches = useLocalStorage<string[]>('market-recent-searches', [])
 
-// Enhanced placeholder with keyboard shortcut
+// Responsive breakpoints
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isDesktop = breakpoints.greaterOrEqual('lg')
+
+// Enhanced placeholder with keyboard shortcut (only on desktop)
 const enhancedPlaceholder = computed(() => {
-  if (props.showKeyboardHints) {
+  if (props.showKeyboardHints && isDesktop.value) {
     return `${props.placeholder} (⌘K to focus)`
   }
   return props.placeholder