klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

optimizations

Browse Source
This commit is contained in:
Gregor Klevže
2026-03-28 19:15:39 +01:00
parent 0b25d9570a
commit cab4fbd83e
509 changed files with 1016804 additions and 1605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
resources/js/Search/SearchBar.jsx
View File

@@ -40,6 +40,8 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
const debouncedQuery = useDebounce(query, DEBOUNCE_MS)
const isExpanded = phase === 'opening' || phase === 'open'
const isMobileOverlayVisible = mobileOverlayPhase !== 'closed'
const hasSuggestions = artworks.length > 0 || users.length > 0 || tags.length > 0
const suggestionListId = open && hasSuggestions ? 'sb-suggestions' : undefined
// flat list of navigable items: artworks → users → tags
const allItems = [
@@ -216,6 +218,8 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
// ── widths / opacities ───────────────────────────────────────────────────
const pillOpacity = phase === 'idle' ? 1 : 0
const formOpacity = (phase === 'opening' || phase === 'open' || phase === 'closing') ? 1 : 0
const collapsedWidth = 'clamp(8.75rem, 8vw + 4rem, 10.5rem)'
const expandedWidth = 'min(100%, clamp(15rem, 42vw, 28rem))'
return (
<>
@@ -252,8 +256,9 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
style={{
position: 'relative',
height: '40px',
width: isExpanded ? '100%' : '168px',
maxWidth: isExpanded ? '560px' : '168px',
width: isExpanded ? expandedWidth : collapsedWidth,
maxWidth: '100%',
minWidth: '0',
transition: 'width 340ms cubic-bezier(0.16,1,0.3,1), max-width 340ms cubic-bezier(0.16,1,0.3,1)',
}}
>
@@ -261,7 +266,7 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
<button
type="button"
onClick={expand}
aria-label="Open search"
aria-label="Search"
style={{ position: 'absolute', inset: 0, opacity: pillOpacity, pointerEvents: phase === 'idle' ? 'auto' : 'none', transition: 'opacity 120ms ease' }}
className="w-full h-full flex items-center gap-2.5 px-3.5 rounded-lg
bg-white/[0.05] border border-white/[0.09]
@@ -271,7 +276,7 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
<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>
<span className="text-sm flex-1 text-left truncate">Search</span>
<kbd className="shrink-0 inline-flex items-center gap-0.5 text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-white/[0.06] border border-white/[0.10] text-white/30">
<kbd className="hidden lg:inline-flex shrink-0 items-center gap-0.5 text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-white/[0.06] border border-white/[0.10] text-white/30">
{isMac ? '\u2318' : 'Ctrl'}K
</kbd>
</button>
@@ -292,16 +297,17 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
type="search"
value={query}
onChange={e => { setQuery(e.target.value); setActiveIdx(-1) }}
onFocus={() => (artworks.length > 0 || tags.length > 0) && setOpen(true)}
onFocus={() => hasSuggestions && setOpen(true)}
onKeyDown={handleKeyDown}
placeholder={placeholder}
aria-label="Search"
aria-autocomplete="list"
aria-controls="sb-suggestions"
aria-expanded={open}
aria-controls={suggestionListId}
aria-activedescendant={activeIdx >= 0 ? `sb-item-${activeIdx}` : undefined}
autoComplete="off"
className="w-full h-full bg-white/[0.06] border border-white/[0.12] rounded-lg
py-0 pl-10 pr-16 text-sm text-white placeholder-soft outline-none
py-0 pl-10 pr-11 lg:pr-16 text-sm text-white placeholder-soft outline-none
focus:border-accent focus:ring-1 focus:ring-accent/30 transition-colors"
/>
<div className="absolute right-2.5 top-1/2 -translate-y-1/2 flex items-center gap-1.5">
@@ -311,7 +317,7 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
</svg>
)}
<kbd className="text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-white/[0.06] border border-white/[0.10] text-white/30 pointer-events-none select-none">Esc</kbd>
<kbd className="hidden lg:inline-flex text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-white/[0.06] border border-white/[0.10] text-white/30 pointer-events-none select-none">Esc</kbd>
<button type="button" onClick={collapse} aria-label="Close search"
className="w-5 h-5 flex items-center justify-center rounded-md text-white/30 hover:text-white hover:bg-white/10 transition-colors">
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
@@ -323,7 +329,7 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
</form>
{/* ── SUGGESTIONS DROPDOWN ── */}
{open && (artworks.length > 0 || tags.length > 0) && (
{open && hasSuggestions && (
<ul
id="sb-suggestions"
role="listbox"