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
9.6 KiB
JavaScript
1 line
9.6 KiB
JavaScript
import{a,j as e}from"./vendor-react-Dkpvlwai.js";import{t as v}from"./trackService-BilERhFT.js";import{m as j,l as N,C as p,B as f,S as h}from"./index-jE2AGx2y.js";import{aJ as y,x as w,a1 as k,Z as S,F as C,D as T,i as E,a2 as F,b2 as V,L as A,ac as L}from"./vendor-icons-CbmLcMl-.js";import{A as I}from"./avatar-DSgu46M3.js";import{y as g,x as P}from"./vendor-CAoAb3tF.js";import"./vendor-router-4bycex72.js";import"./vendor-tanstack-BoI3DtL9.js";import"./vendor-utils-CDFfoeXY.js";function z(){const{playTrack:s}=j(),[t,r]=a.useState("feed"),[n,o]=a.useState([]),[c,i]=a.useState(!0),[m,d]=a.useState(!1),u=a.useCallback(async()=>{i(!0),d(!1);try{const l=await v.list({limit:10,sort_by:"created_at"});o(l.tracks)}catch(l){N.error("Error loading feed tracks",{error:l instanceof Error?l.message:String(l),stack:l instanceof Error?l.stack:void 0}),d(!0)}finally{i(!1)}},[]);return a.useEffect(()=>{u()},[u]),{activeTab:t,setActiveTab:r,feedTracks:n,loading:c,error:m,retry:u,playTrack:s}}function H({activeTab:s,onTabChange:t,onProfileClick:r}){return e.jsxs("div",{className:"hidden lg:block lg:col-span-3 space-y-8",children:[e.jsxs(p,{variant:"glass",className:"p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]",children:[e.jsx("div",{className:"h-20 bg-gradient-gaming"}),e.jsxs("div",{className:"px-4 pb-4",children:[e.jsx("div",{className:"relative -mt-10 mb-3 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-full",onClick:r,onKeyDown:n=>n.key==="Enter"&&r(),role:"button",tabIndex:0,children:e.jsx("div",{className:"w-20 h-20 rounded-full border-4 border-border overflow-hidden bg-muted",children:e.jsx("img",{src:"https://picsum.photos/id/237/200/200",alt:"",className:"w-full h-full object-cover"})})}),e.jsx("h3",{className:"font-bold text-foreground text-lg tracking-tight",children:"My Profile"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-4",children:"View your stats"})]})]}),e.jsx(p,{variant:"glass",className:"p-2 border-white/5 bg-black/20 backdrop-blur-xl",children:e.jsxs("nav",{className:"space-y-1",children:[e.jsxs(f,{variant:s==="feed"?"outline":"ghost",size:"sm",className:"w-full justify-start",onClick:()=>t("feed"),children:[e.jsx(y,{className:"w-4 h-4"})," Fresh Tracks"]}),e.jsxs(f,{variant:"ghost",size:"sm",className:"w-full justify-start",onClick:()=>t("communities"),children:[e.jsx(w,{className:"w-4 h-4"})," Communities"]})]})})]})}function U({track:s,onPlay:t}){const[r,n]=a.useState(!1),[o,c]=a.useState(s.like_count??0),[i,m]=a.useState(!1),[d,u]=a.useState(!1),l=a.useCallback(()=>{n(x=>!x),c(x=>r?x-1:x+1),r||(m(!0),setTimeout(()=>m(!1),400))},[r]),b=a.useCallback(()=>{u(!0),setTimeout(()=>u(!1),1500)},[]);return e.jsx(g.div,{whileHover:{scale:1.005},transition:{duration:.2},className:"mb-4",children:e.jsxs(p,{variant:"glass",className:"p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl hover:border-primary/20 transition-all duration-[var(--sumi-duration-normal)]",children:[e.jsxs("div",{className:"p-4 flex items-center gap-3",children:[e.jsx(I,{src:s.coverUrl,alt:s.artist,fallback:s.artist,size:"md",status:"online"}),e.jsxs("div",{children:[e.jsx("button",{className:"font-bold text-foreground text-sm hover:underline transition-colors text-left",children:s.artist}),e.jsx("div",{className:"text-xs text-muted-foreground",children:"uploaded a new track"})]}),e.jsx(f,{variant:"ghost",size:"sm",className:"ml-auto text-muted-foreground hover:text-foreground",children:e.jsx(k,{className:"w-4 h-4"})})]}),e.jsx("div",{className:"px-4 pb-4",children:e.jsxs("div",{className:"bg-card p-4 rounded-xl flex items-center gap-4 border border-border hover:border-primary/20 group cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",onClick:()=>t(s),onKeyDown:x=>x.key==="Enter"&&t(s),role:"button",tabIndex:0,children:[e.jsxs("div",{className:"w-16 h-16 rounded-lg overflow-hidden relative",children:[e.jsx("img",{src:s.coverUrl,alt:"",className:"w-full h-full object-cover transition-transform duration-[var(--sumi-duration-normal)] group-hover:scale-110"}),e.jsx("div",{className:"absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",children:e.jsx(S,{className:"w-6 h-6 text-foreground fill-current"})})]}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("h4",{className:"font-bold text-foreground tracking-tight truncate",children:s.title}),e.jsx("p",{className:"text-xs text-muted-foreground",children:s.genre||"Electronic"})]}),e.jsx("div",{className:"text-xs text-muted-foreground font-mono pr-2",children:s.duration})]})}),e.jsxs("div",{className:"px-4 py-3 border-t border-border flex gap-2 text-xs text-muted-foreground",children:[e.jsxs("button",{onClick:l,className:`flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 transition-colors hover:bg-destructive/10 hover:text-destructive ${r?"text-destructive":""}`,children:[e.jsx(C,{className:`w-3.5 h-3.5 ${r?"fill-current":""} ${i?"animate-like-bounce":""}`}),e.jsx("span",{className:"tabular-nums",children:o})]}),e.jsxs("button",{className:"flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 transition-colors hover:bg-primary/10 hover:text-primary",children:[e.jsx(T,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Comment"})]}),e.jsx("button",{onClick:b,className:`flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 transition-colors ${d?"text-success":"hover:bg-primary/10 hover:text-primary"}`,children:d?e.jsxs(e.Fragment,{children:[e.jsx(E,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Shared!"})]}):e.jsxs(e.Fragment,{children:[e.jsx(F,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Share"})]})})]})]})})}const D={visible:{transition:{staggerChildren:.06,delayChildren:.02}}},M={hidden:{opacity:0,y:12},visible:{opacity:1,y:0,transition:{duration:.3}}};function R({tracks:s,loading:t,onPlayTrack:r}){const[n,o]=a.useState(!1);a.useEffect(()=>{const i=setTimeout(()=>{s.length>0&&o(!0)},45e3);return()=>clearTimeout(i)},[s.length]);const c=a.useCallback(()=>{o(!1),window.scrollTo({top:0,behavior:"smooth"})},[]);return e.jsxs("div",{className:"col-span-1 lg:col-span-6 space-y-6",children:[e.jsxs("div",{className:"mb-4",children:[e.jsx("h2",{className:"text-2xl font-bold text-foreground mb-1 tracking-tight",children:"Community Feed"}),e.jsx("p",{className:"text-muted-foreground text-xs",children:"New uploads from the network"})]}),e.jsx(P,{children:n&&e.jsxs(g.button,{initial:{opacity:0,y:-12},animate:{opacity:1,y:0},exit:{opacity:0,y:-12},onClick:c,className:"w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-primary/10 text-primary text-sm font-medium border border-primary/20 hover:bg-primary/20 transition-all cursor-pointer",children:[e.jsx(V,{className:"w-4 h-4"}),"New posts available"]})}),t?null:e.jsxs(e.Fragment,{children:[s.length>0?e.jsx(g.div,{className:"space-y-4",variants:D,initial:"hidden",animate:"visible",children:s.map(i=>e.jsx(g.div,{variants:M,children:e.jsx(U,{track:i,onPlay:r})},i.id))}):e.jsx("div",{className:"text-center py-24 text-muted-foreground",children:"No recent activity."}),s.length>0&&e.jsx("div",{className:"text-center py-6",children:e.jsxs(f,{variant:"ghost",className:"gap-2 text-muted-foreground hover:text-foreground",children:[e.jsx(A,{className:"w-4 h-4"}),"Load More"]})})]})]})}const _=["#Techno","#Synthwave","#NewGear","#Tutorial"];function $(){return e.jsx("div",{className:"hidden lg:block lg:col-span-3 space-y-8",children:e.jsxs(p,{variant:"glass",className:"border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]",children:[e.jsxs("h3",{className:"font-bold text-sm text-foreground uppercase tracking-wider mb-4 flex items-center gap-2",children:[e.jsx(L,{className:"w-4 h-4 text-primary"})," Trending Tags"]}),e.jsx("div",{className:"flex flex-wrap gap-2",children:_.map(s=>e.jsx("span",{className:"text-xs bg-muted px-2 py-1 rounded text-muted-foreground cursor-pointer hover:text-foreground hover:bg-muted/80 transition-all duration-[var(--duration-fast)]",children:s},s))})]})})}function G(){return e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-12 gap-8 animate-fadeIn pb-20 min-h-layout-page",children:[e.jsxs("div",{className:"hidden lg:block lg:col-span-3 space-y-8",children:[e.jsx(h,{className:"h-48 rounded-xl"}),e.jsx(h,{className:"h-32 rounded-xl"})]}),e.jsxs("div",{className:"col-span-1 lg:col-span-6 space-y-8",children:[e.jsxs("div",{className:"mb-4",children:[e.jsx(h,{className:"h-8 w-48 mb-2"}),e.jsx(h,{className:"h-4 w-64"})]}),[1,2,3].map(s=>e.jsx(h,{className:"h-44 rounded-xl"},s))]}),e.jsx("div",{className:"hidden lg:block lg:col-span-3",children:e.jsx(h,{className:"h-40 rounded-xl"})})]})}function B({onRetry:s}){return e.jsxs("div",{className:"flex flex-col items-center justify-center min-h-layout-page-sm text-center px-4",children:[e.jsx("p",{className:"text-destructive font-medium mb-2",children:"Failed to load feed"}),e.jsx("p",{className:"text-muted-foreground text-sm mb-4",children:"We couldn't load the community feed. Please try again."}),s!=null&&e.jsx(f,{variant:"outline",onClick:s,children:"Retry"})]})}function ee({onViewProfile:s}){const{activeTab:t,setActiveTab:r,feedTracks:n,loading:o,error:c,retry:i,playTrack:m}=z();return o?e.jsx(G,{}):c?e.jsx(B,{onRetry:i}):e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-12 gap-8 animate-fadeIn pb-20 min-h-layout-page",children:[e.jsx(H,{activeTab:t,onTabChange:d=>r(d),onProfileClick:()=>s(null)}),e.jsx(R,{tracks:n,loading:!1,onPlayTrack:m}),e.jsx($,{})]})}export{ee as SocialView};
|