more fixes

resources/js/Search/SearchBar.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react'
+import SearchOverlay from './SearchOverlay'
 
 const ARTWORKS_API = '/api/search/artworks'
 const TAGS_API     = '/api/tags/search'
 const USERS_API    = '/api/search/users'
-const DEBOUNCE_MS  = 280
+const DEBOUNCE_MS  = 300
 
 function useDebounce(value, delay) {
   const [debounced, setDebounced] = useState(value)
@@ -25,15 +26,20 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
   const [loading, setLoading]   = useState(false)
   const [open, setOpen]         = useState(false)
   const [activeIdx, setActiveIdx] = useState(-1)
+  const [mobileOverlayPhase, setMobileOverlayPhase] = useState('closed') // closed | opening | open | closing
 
   const inputRef      = useRef(null)
+  const mobileInputRef = useRef(null)
   const wrapperRef    = useRef(null)
   const abortRef      = useRef(null)
   const openTimerRef  = useRef(null)
   const closeTimerRef = useRef(null)
+  const mobileOpenTimerRef = useRef(null)
+  const mobileCloseTimerRef = useRef(null)
 
   const debouncedQuery = useDebounce(query, DEBOUNCE_MS)
   const isExpanded     = phase === 'opening' || phase === 'open'
+  const isMobileOverlayVisible = mobileOverlayPhase !== 'closed'
 
   // flat list of navigable items: artworks → users → tags
   const allItems = [
@@ -67,6 +73,31 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
     }, 160)
   }
 
+  function openMobileOverlay() {
+    clearTimeout(mobileCloseTimerRef.current)
+    setMobileOverlayPhase('opening')
+    mobileOpenTimerRef.current = setTimeout(() => {
+      setMobileOverlayPhase('open')
+      mobileInputRef.current?.focus()
+    }, 20)
+  }
+
+  function closeMobileOverlay() {
+    if (mobileOverlayPhase === 'closed' || mobileOverlayPhase === 'closing') return
+    clearTimeout(mobileOpenTimerRef.current)
+    setMobileOverlayPhase('closing')
+    clearTimeout(mobileCloseTimerRef.current)
+    mobileCloseTimerRef.current = setTimeout(() => {
+      setMobileOverlayPhase('closed')
+      setQuery('')
+      setActiveIdx(-1)
+      setOpen(false)
+      setArtworks([])
+      setTags([])
+      setUsers([])
+    }, 150)
+  }
+
   // ── Ctrl/Cmd+K ───────────────────────────────────────────────────────────
   useEffect(() => {
     function onKey(e) {
@@ -86,6 +117,33 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
     return () => document.removeEventListener('mousedown', onMouse)
   }, [isExpanded, phase])
 
+  useEffect(() => {
+    if (!isMobileOverlayVisible) {
+      document.body.style.overflow = ''
+      return
+    }
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [isMobileOverlayVisible])
+
+  useEffect(() => {
+    if (!isMobileOverlayVisible) return
+    function onEscape(e) {
+      if (e.key === 'Escape') closeMobileOverlay()
+    }
+    document.addEventListener('keydown', onEscape)
+    return () => document.removeEventListener('keydown', onEscape)
+  }, [isMobileOverlayVisible, mobileOverlayPhase])
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(mobileOpenTimerRef.current)
+      clearTimeout(mobileCloseTimerRef.current)
+    }
+  }, [])
+
   // ── fetch (parallel artworks + tags) ────────────────────────────────────
   const fetchSuggestions = useCallback(async (q) => {
     const bare = q?.replace(/^@+/, '') ?? ''
@@ -160,16 +218,45 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
   const formOpacity = phase === 'open'  ? 1 : 0
 
   return (
-    <div
-      ref={wrapperRef}
-      style={{
-        position:   'relative',
-        height:     '40px',
-        width:      isExpanded ? '100%'  : '168px',
-        maxWidth:   isExpanded ? '560px' : '168px',
-        transition: 'width 340ms cubic-bezier(0.16,1,0.3,1), max-width 340ms cubic-bezier(0.16,1,0.3,1)',
-      }}
-    >
+    <>
+      <button
+        type="button"
+        onClick={openMobileOverlay}
+        aria-label="Open search"
+        className="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg text-soft hover:text-white hover:bg-white/5 transition-colors"
+      >
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.2" aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
+        </svg>
+      </button>
+
+      <SearchOverlay
+        phase={mobileOverlayPhase}
+        query={query}
+        inputRef={mobileInputRef}
+        loading={loading}
+        artworks={artworks}
+        users={users}
+        tags={tags}
+        activeIdx={activeIdx}
+        onQueryChange={(next) => { setQuery(next); setActiveIdx(-1) }}
+        onClose={closeMobileOverlay}
+        onSubmit={handleSubmit}
+        onKeyDown={handleKeyDown}
+        onNavigate={navigate}
+      />
+
+      <div
+        className="hidden md:block"
+        ref={wrapperRef}
+        style={{
+          position:   'relative',
+          height:     '40px',
+          width:      isExpanded ? '100%'  : '168px',
+          maxWidth:   isExpanded ? '560px' : '168px',
+          transition: 'width 340ms cubic-bezier(0.16,1,0.3,1), max-width 340ms cubic-bezier(0.16,1,0.3,1)',
+        }}
+      >
       {/* ── COLLAPSED PILL ── */}
       <button
         type="button"
@@ -330,6 +417,7 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
           </li>
         </ul>
       )}
-    </div>
+      </div>
+    </>
   )
 }