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.
This commit is contained in:
padreug 2025-09-26 10:40:58 +02:00
parent f3504b7df5
commit a82360b283

View file

@ -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