203cb5d5e5
- DESIGN_TOKENS.md: Complete rewrite to document --sumi-* token system - APP_SHELL.md: Update layout shell docs (glass bg, backdrop-blur, z-index) - DESIGN_DIRECTION.md: Update aesthetic direction to SUMI philosophy - .storybook/preview.tsx: Remove deleted CSS imports, update bg colors - eslint.config.js: Update color rule message from Kodo to SUMI tokens - tailwind.config.ts: Fix comment referencing deleted design-tokens.css Co-authored-by: Cursor <cursoragent@cursor.com>
1 line
13 KiB
JavaScript
1 line
13 KiB
JavaScript
import{a as u,j as e,R as S}from"./vendor-react-Dkpvlwai.js";import{c as E,u as _}from"./vendor-router-4bycex72.js";import{a as C,C as d,k as D,E as $,S as l}from"./index-jE2AGx2y.js";import{u as P}from"./useDebounce-B-QrukTv.js";import{S as T,X as R,a8 as p,aZ as A,U as j,bh as I}from"./vendor-icons-CbmLcMl-.js";import{T as K,a as L,b as x,c as h}from"./Tabs-DcqFJUlH.js";import{A as v}from"./avatar-DSgu46M3.js";import{f as Q}from"./vendor-utils-CDFfoeXY.js";import"./vendor-CAoAb3tF.js";import"./vendor-tanstack-BoI3DtL9.js";const F={search:async r=>(await C.get("/search",{params:{q:r}})).data};function M(){const[r,t]=E(),n=r.get("q")??"",[s,a]=u.useState(n),o=P(s,500),[i,g]=u.useState(null),[N,f]=u.useState(!1),[y,b]=u.useState(null);u.useEffect(()=>{a(n)},[n]),u.useEffect(()=>{(async()=>{if(!o.trim()){g(null);return}f(!0),b(null);try{const m=await F.search(o);g(m)}catch(m){b(m instanceof Error?m:new Error("Search signal interrupted."))}finally{f(!1)}})(),o!==n&&(o?t({q:o},{replace:!0}):t({},{replace:!0}))},[o,t,n]);const w=()=>{a(""),t({}),g(null)},k=!!i&&(i.tracks.length>0||i.artists.length>0||i.playlists.length>0);return{query:s,setQuery:a,results:i,isLoading:N,error:y,clearSearch:w,hasResults:k}}function H({query:r,onQueryChange:t,onClear:n}){return e.jsxs("div",{className:"mb-12 text-center max-w-3xl mx-auto",children:[e.jsxs("h1",{className:"text-display md:text-5xl font-heading mb-6 text-foreground",children:["Explore the"," ",e.jsx("span",{className:"text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary",children:"Nebula"})]}),e.jsxs("div",{className:"relative group",children:[e.jsx("div",{className:"absolute -inset-1 bg-gradient-to-r from-primary to-secondary rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-[var(--sumi-duration-slow)]"}),e.jsxs("div",{className:"relative flex items-center bg-card/80 backdrop-blur-xl border border-border rounded-2xl overflow-hidden shadow-2xl",children:[e.jsx(T,{className:"w-5 h-5 ml-4 text-muted-foreground flex-shrink-0"}),e.jsx("input",{value:r,onChange:s=>t(s.target.value),placeholder:"Search for tracks, artists, signals...",className:"w-full bg-transparent border-none py-4 px-4 text-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-0 font-sans",autoFocus:!0,"aria-label":"Search"}),r&&e.jsx("button",{type:"button",onClick:n,className:"p-2 mr-2 hover:bg-muted/50 rounded-full transition-colors duration-[var(--duration-fast)] text-muted-foreground hover:text-foreground","aria-label":"Clear search",children:e.jsx(R,{className:"w-5 h-5"})})]})]})]})}function U(){return e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6 opacity-80",children:[e.jsxs(d,{variant:"glass",className:"p-6 text-center hover:bg-white/5 transition-colors cursor-pointer group",children:[e.jsx("div",{className:"w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/20 transition-colors",children:e.jsx(p,{className:"w-6 h-6 text-primary"})}),e.jsx("h3",{className:"font-bold text-lg mb-1",children:"New Releases"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Fresh signals from the void"})]}),e.jsxs(d,{variant:"glass",className:"p-6 text-center hover:bg-white/5 transition-colors cursor-pointer group",children:[e.jsx("div",{className:"w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-destructive/20 transition-colors",children:e.jsx(A,{className:"w-6 h-6 text-destructive"})}),e.jsx("h3",{className:"font-bold text-lg mb-1",children:"Curated Mixes"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Hand-picked by the algorithm"})]}),e.jsxs(d,{variant:"glass",className:"p-6 text-center hover:bg-white/5 transition-colors cursor-pointer group",children:[e.jsx("div",{className:"w-12 h-12 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-success/20 transition-colors",children:e.jsx(j,{className:"w-6 h-6 text-success"})}),e.jsx("h3",{className:"font-bold text-lg mb-1",children:"Top Artists"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Trending creators this week"})]})]})}function X(){return e.jsx(D,{variant:"centered",icon:e.jsx(I,{className:"w-full h-full"}),title:"No results found",description:"Try adjusting your search or use different keywords.",size:"lg",className:"py-20"})}function z({error:r,onRetry:t}){return e.jsx($,{error:r,variant:"card",severity:"error",onRetry:t})}function c(r,t){if(!t.trim())return r;const n=t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),s=new RegExp(`(${n})`,"gi"),a=r.split(s);return a.length===1?r:a.map((o,i)=>s.test(o)?e.jsx("mark",{className:"bg-primary/20 text-primary rounded-sm px-0.5",children:o},i):e.jsx(S.Fragment,{children:o},i))}function V({results:r,query:t=""}){const n=_();return e.jsxs(K,{defaultValue:"all",className:"w-full",children:[e.jsxs(L,{className:"bg-transparent border-b border-white/10 w-full justify-start h-auto p-0 gap-8 mb-8",children:[e.jsx(x,{value:"all",className:"rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-primary py-3 px-0 text-lg font-heading bg-transparent",children:"All Results"}),e.jsxs(x,{value:"tracks",className:"rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-primary py-3 px-0 text-lg font-heading bg-transparent",children:["Tracks (",r.tracks.length,")"]}),e.jsxs(x,{value:"artists",className:"rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-primary py-3 px-0 text-lg font-heading bg-transparent",children:["Artists (",r.artists.length,")"]}),e.jsxs(x,{value:"playlists",className:"rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-primary py-3 px-0 text-lg font-heading bg-transparent",children:["Playlists (",r.playlists.length,")"]})]}),e.jsxs(h,{value:"all",className:"space-y-12",children:[r.tracks.length>0&&e.jsxs("section",{children:[e.jsxs("h3",{className:"text-xl font-bold mb-4 flex items-center gap-2",children:[e.jsx(p,{className:"w-5 h-5 text-primary"})," Top Tracks"]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:r.tracks.slice(0,6).map(s=>e.jsxs(d,{variant:"glass",tabIndex:0,role:"button",className:"p-3 flex items-center gap-4 hover:bg-white/5 transition-colors cursor-pointer group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",onClick:()=>n(`/tracks/${s.id}`),onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),n(`/tracks/${s.id}`))},children:[e.jsx("div",{className:"w-16 h-16 rounded-lg bg-black/40 overflow-hidden flex-shrink-0",children:s.cover_art_path?e.jsx("img",{src:s.cover_art_path,alt:"",className:"w-full h-full object-cover group-hover:scale-110 transition-transform"}):e.jsx(p,{className:"w-full h-full p-4 text-white/20"})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("h4",{className:"font-bold truncate group-hover:text-primary transition-colors",children:c(s.title,t)}),e.jsx("p",{className:"text-xs text-muted-foreground truncate",children:c(s.artist,t)})]})]},s.id))})]}),r.artists.length>0&&e.jsxs("section",{children:[e.jsxs("h3",{className:"text-xl font-bold mb-4 flex items-center gap-2",children:[e.jsx(j,{className:"w-5 h-5 text-primary"})," Artists"]}),e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4",children:r.artists.slice(0,5).map(s=>e.jsxs(d,{variant:"glass",tabIndex:0,role:"button",className:"p-4 flex flex-col items-center text-center hover:bg-white/5 transition-colors cursor-pointer group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",onClick:()=>n(`/u/${s.username}`),onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),n(`/u/${s.username}`))},children:[e.jsx(v,{src:s.avatar_url,fallback:s.username[0],className:"w-24 h-24 mb-4 shadow-lg group-hover:scale-105 transition-transform"}),e.jsx("h4",{className:"font-bold truncate w-full group-hover:text-primary transition-colors",children:c(s.username,t)}),e.jsxs("p",{className:"text-xs text-muted-foreground truncate",children:[s.followers_count??0," followers"]})]},s.id))})]})]}),e.jsx(h,{value:"tracks",children:e.jsx("div",{className:"grid grid-cols-1 gap-2",children:r.tracks.map(s=>e.jsxs("div",{role:"button",tabIndex:0,className:"flex items-center gap-4 p-4 rounded-xl border border-white/5 hover:bg-white/5 transition-colors cursor-pointer group bg-black/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",onClick:()=>n(`/tracks/${s.id}`),onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),n(`/tracks/${s.id}`))},children:[e.jsx("div",{className:"w-12 h-12 rounded bg-black/40 overflow-hidden flex-shrink-0",children:s.cover_art_path&&e.jsx("img",{src:s.cover_art_path,alt:"",className:"w-full h-full object-cover"})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("h4",{className:"font-bold group-hover:text-primary",children:c(s.title,t)}),e.jsx("p",{className:"text-muted-foreground text-sm",children:c(s.artist,t)})]}),e.jsx("div",{className:"text-xs font-mono text-muted-foreground flex-shrink-0",children:s.created_at?`${Q(new Date(s.created_at))} ago`:null})]},s.id))})}),e.jsx(h,{value:"artists",children:e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-4 gap-6",children:r.artists.map(s=>e.jsxs(d,{variant:"glass",tabIndex:0,role:"button",className:"p-6 flex flex-col items-center text-center hover:bg-white/5 cursor-pointer group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",onClick:()=>n(`/u/${s.username}`),onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),n(`/u/${s.username}`))},children:[e.jsx(v,{src:s.avatar_url,fallback:s.username[0],className:"w-32 h-32 mb-4 shadow-lg group-hover:scale-105 transition-transform"}),e.jsx("h4",{className:"font-bold text-lg group-hover:text-primary",children:c(s.username,t)})]},s.id))})}),e.jsx(h,{value:"playlists",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:r.playlists.map(s=>e.jsxs(d,{variant:"glass",tabIndex:0,role:"button",className:"p-0 overflow-hidden cursor-pointer group transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",onClick:()=>n(`/playlists/${s.id}`),onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),n(`/playlists/${s.id}`))},children:[e.jsxs("div",{className:"h-32 bg-gradient-to-br from-primary/30 to-background relative",children:[s.cover_url&&e.jsx("img",{src:s.cover_url,alt:"",className:"w-full h-full object-cover"}),e.jsx("div",{className:"absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors"})]}),e.jsxs("div",{className:"p-4",children:[e.jsx("h4",{className:"font-bold group-hover:text-primary",children:c(s.title,t)}),e.jsx("p",{className:"text-xs text-muted-foreground line-clamp-2 mt-1",children:s.description??"No description"})]})]},s.id))})})]})}function Z(){return e.jsxs("div",{className:"space-y-12","aria-busy":"true",children:[e.jsxs("div",{className:"flex gap-8 border-b border-white/10 pb-3",children:[e.jsx(l,{className:"h-6 w-24 rounded"}),e.jsx(l,{className:"h-6 w-20 rounded"}),e.jsx(l,{className:"h-6 w-20 rounded"}),e.jsx(l,{className:"h-6 w-24 rounded"})]}),e.jsxs("section",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(l,{className:"h-5 w-5 rounded"}),e.jsx(l,{className:"h-6 w-28 rounded"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:Array.from({length:6}).map((r,t)=>e.jsxs("div",{className:"flex items-center gap-4 rounded-xl p-3",children:[e.jsx(l,{className:"h-16 w-16 rounded-lg flex-shrink-0"}),e.jsxs("div",{className:"flex-1 space-y-2",children:[e.jsx(l,{className:"h-4 w-3/4 rounded"}),e.jsx(l,{className:"h-3 w-1/2 rounded"})]})]},t))})]}),e.jsxs("section",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(l,{className:"h-5 w-5 rounded"}),e.jsx(l,{className:"h-6 w-20 rounded"})]}),e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4",children:Array.from({length:5}).map((r,t)=>e.jsxs("div",{className:"flex flex-col items-center gap-4 rounded-xl p-4",children:[e.jsx(l,{variant:"circular",className:"h-24 w-24"}),e.jsx(l,{className:"h-4 w-2/3 rounded"}),e.jsx(l,{className:"h-3 w-1/2 rounded"})]},t))})]})]})}function te(){const{query:r,setQuery:t,results:n,isLoading:s,error:a,clearSearch:o,hasResults:i}=M();return e.jsxs("div",{className:"min-h-layout-page pb-24 container mx-auto px-4 py-8 max-w-6xl",children:[e.jsx(H,{query:r,onQueryChange:t,onClear:o}),a&&e.jsx(z,{error:a,onRetry:()=>window.location.reload()}),s?e.jsx(Z,{}):r?i?n?e.jsx(V,{results:n,query:r}):null:e.jsx(X,{}):e.jsx(U,{})]})}export{te as SearchPage};
|