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>
+    </>
   )
 }

resources/js/Search/SearchOverlay.jsx

@@ -0,0 +1,190 @@
+import React from 'react'
+
+const OPENING_OR_OPEN = new Set(['opening', 'open'])
+
+export default function SearchOverlay({
+  phase,
+  query,
+  inputRef,
+  loading,
+  artworks,
+  users,
+  tags,
+  activeIdx,
+  onQueryChange,
+  onClose,
+  onSubmit,
+  onKeyDown,
+  onNavigate,
+}) {
+  if (phase === 'closed') return null
+
+  const hasResults = artworks.length > 0 || users.length > 0 || tags.length > 0
+  const isVisible = OPENING_OR_OPEN.has(phase)
+
+  return (
+    <div
+      className={`fixed inset-0 z-[1000] md:hidden transition-opacity ${isVisible ? 'opacity-100' : 'opacity-0'} ${phase === 'closing' ? 'duration-150' : 'duration-200'} ease-out`}
+      aria-modal="true"
+      role="dialog"
+      aria-label="Search overlay"
+    >
+      <div className="absolute inset-0 bg-nova/95 backdrop-blur-sm" onClick={onClose} aria-hidden="true" />
+
+      <div className={`relative h-full w-full bg-nova border-t border-white/[0.06] transform transition-transform ${isVisible ? 'translate-y-0' : '-translate-y-3'} ${phase === 'closing' ? 'duration-150' : 'duration-200'} ease-out`}>
+        <form onSubmit={onSubmit} role="search" className="h-full">
+          <div className="h-[72px] px-3 border-b border-white/[0.08] flex items-center gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Back"
+              className="w-11 h-11 rounded-lg inline-flex items-center justify-center text-white/80 hover:bg-white/10 hover:text-white transition-colors"
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.25">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15 18l-6-6 6-6" />
+              </svg>
+            </button>
+
+            <div className="relative flex-1">
+              <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-soft pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="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>
+              <input
+                ref={inputRef}
+                type="search"
+                value={query}
+                onChange={(e) => onQueryChange(e.target.value)}
+                onKeyDown={onKeyDown}
+                placeholder="Search artworks, creators, tags..."
+                aria-label="Search"
+                aria-autocomplete="list"
+                aria-controls="sb-mobile-suggestions"
+                aria-activedescendant={activeIdx >= 0 ? `sb-mobile-item-${activeIdx}` : undefined}
+                autoComplete="off"
+                className="w-full h-11 bg-white/[0.06] border border-white/[0.12] rounded-lg py-0 pl-9 pr-9 text-sm text-white placeholder-soft outline-none focus:border-accent focus:ring-1 focus:ring-accent/30 transition-colors"
+              />
+              {loading && (
+                <svg className="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 animate-spin text-soft" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
+                </svg>
+              )}
+            </div>
+
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Close search"
+              className="w-11 h-11 rounded-lg inline-flex items-center justify-center text-white/80 hover:bg-white/10 hover:text-white transition-colors"
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.25">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div className="overflow-y-auto overscroll-contain" style={{ height: 'calc(100vh - 72px)' }}>
+            {hasResults ? (
+              <ul
+                id="sb-mobile-suggestions"
+                role="listbox"
+                aria-label="Search suggestions"
+                className="mx-2 my-2 px-2 py-2 rounded-xl border border-white/[0.10] bg-nova-900/95 backdrop-blur-sm shadow-2xl"
+              >
+                {artworks.length > 0 && (
+                  <>
+                    <li role="presentation" className="px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/35 select-none">Artworks</li>
+                    {artworks.map((item, i) => (
+                      <li key={item.slug ?? i} role="option" id={`sb-mobile-item-${i}`} aria-selected={activeIdx === i}>
+                        <button
+                          type="button"
+                          onClick={() => onNavigate({ type: 'artwork', ...item })}
+                          className={`w-full min-h-12 flex items-center gap-3 px-3 py-2 text-left rounded-lg transition-colors ${activeIdx === i ? 'bg-white/[0.14]' : 'hover:bg-white/[0.08]'}`}
+                        >
+                          {item.thumbnail_url ? (
+                            <img src={item.thumbnail_url} alt="" aria-hidden="true" className="w-10 h-10 rounded-lg object-cover shrink-0" loading="lazy" />
+                          ) : (
+                            <span className="w-10 h-10 rounded-lg bg-white/[0.04] border border-white/[0.08] shrink-0" aria-hidden="true" />
+                          )}
+                          <div className="min-w-0">
+                            <div className="text-sm font-medium text-white truncate">{item.title}</div>
+                            {item.author?.name && <div className="text-xs text-neutral-400 truncate">by {item.author.name}</div>}
+                          </div>
+                        </button>
+                      </li>
+                    ))}
+                  </>
+                )}
+
+                {users.length > 0 && (
+                  <>
+                    <li role="presentation" className={`px-3 pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/35 select-none ${artworks.length > 0 ? 'pt-2 border-t border-white/[0.06]' : 'pt-2'}`}>Creators</li>
+                    {users.map((user, j) => {
+                      const flatIdx = artworks.length + j
+                      return (
+                        <li key={user.username} role="option" id={`sb-mobile-item-${flatIdx}`} aria-selected={activeIdx === flatIdx}>
+                          <button
+                            type="button"
+                            onClick={() => onNavigate({ type: 'user', ...user })}
+                            className={`w-full min-h-12 flex items-center gap-3 px-3 py-2 text-left rounded-lg transition-colors ${activeIdx === flatIdx ? 'bg-white/[0.14]' : 'hover:bg-white/[0.08]'}`}
+                          >
+                            <img src={user.avatar_url} alt="" aria-hidden="true" className="w-10 h-10 rounded-full object-cover shrink-0 bg-white/[0.04] border border-white/[0.08]" loading="lazy" />
+                            <div className="min-w-0">
+                              <div className="text-sm font-medium text-white truncate">@{user.username}</div>
+                              {user.uploads > 0 && <div className="text-xs text-neutral-400">{user.uploads.toLocaleString()} uploads</div>}
+                            </div>
+                          </button>
+                        </li>
+                      )
+                    })}
+                  </>
+                )}
+
+                {tags.length > 0 && (
+                  <>
+                    <li role="presentation" className={`px-3 pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/35 select-none ${artworks.length > 0 || users.length > 0 ? 'pt-2 border-t border-white/[0.06]' : 'pt-2'}`}>Tags</li>
+                    {tags.map((tag, j) => {
+                      const flatIdx = artworks.length + users.length + j
+                      return (
+                        <li key={tag.slug ?? tag.name ?? j} role="option" id={`sb-mobile-item-${flatIdx}`} aria-selected={activeIdx === flatIdx}>
+                          <button
+                            type="button"
+                            onClick={() => onNavigate({ type: 'tag', ...tag })}
+                            className={`w-full min-h-12 flex items-center gap-3 px-3 py-2 text-left rounded-lg transition-colors ${activeIdx === flatIdx ? 'bg-white/[0.14]' : 'hover:bg-white/[0.08]'}`}
+                          >
+                            <span className="w-10 h-10 rounded-lg bg-white/[0.04] border border-white/[0.07] inline-flex items-center justify-center shrink-0" aria-hidden="true">
+                              <svg className="w-4 h-4 text-white/45" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
+                              </svg>
+                            </span>
+                            <div className="min-w-0">
+                              <div className="text-sm font-medium text-white truncate">#{tag.name ?? tag.slug}</div>
+                              {tag.artworks_count != null && <div className="text-xs text-neutral-400">{tag.artworks_count.toLocaleString()} artworks</div>}
+                            </div>
+                          </button>
+                        </li>
+                      )
+                    })}
+                  </>
+                )}
+
+                <li role="presentation" className="px-3 pt-3 pb-2 border-t border-white/[0.06] mt-2">
+                  <a href={`/search?q=${encodeURIComponent(query)}`} className="min-h-12 inline-flex items-center gap-1.5 text-sm text-accent hover:text-accent/80 transition-colors">
+                    See all results for <span className="font-semibold">"{query}"</span>
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"/>
+                    </svg>
+                  </a>
+                </li>
+              </ul>
+            ) : (
+              <div className="mx-2 my-2 px-6 py-10 rounded-xl border border-white/[0.10] bg-nova-900/95 backdrop-blur-sm shadow-2xl text-sm text-white/60">
+                {query.trim().length >= 2 ? 'No results found.' : 'Start typing to search artworks, creators, and tags.'}
+              </div>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}