https://clipchat.ai/dist/assets/EffectsListPage-CHbh7XwE.js

1var e=Object.defineProperty,t=Object.defineProperties,r=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable,o=(t,r,n)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[r]=n;import{j as l}from"./vendor-mui-CBxi4-UE.js";import{f as s,a as d}from"./vendor-react-DJCar8wk.js";import{u as c,a as g,g as p}from"./main-fFbGxLEq.js";import"./index-Cc7IhL_s.js";import"./vendor-utils-hGafao2v.js";const u=p`
2  query EffectsAdminListMirror {
3    effectsAdminList {
4      id slug name tagline category pipeline isActive isNew
5      displayOrder creditsEstimate tintColors thumbnailUrl previewVideoUrl
6      interests currentVersionNumber draftVersionNumber broken runs7d updatedAt
7    }
8    effectCategoriesAdminList {
9      id slug label emoji displayOrder aspect hero subtitle isActive seed effectCount
10    }
11  }
12`,f=p`
13  mutation EffectAdminToggleActive($slug: String!, $isActive: Boolean!) {
14    effectAdminToggleActive(input: { slug: $slug, isActive: $isActive }) {
15      effect { slug isActive }
16      errors
17    }
18  }
19`,h=p`
20  mutation EffectCategoryAdminSaveQuick(
21    $slug: String!, $label: String, $emoji: String, $aspect: String, $hero: Boolean
22  ) {
23    effectCategoryAdminSave(input: {
24      slug: $slug, label: $label, emoji: $emoji, aspect: $aspect, hero: $hero
25    }) {
26      category { slug label emoji aspect hero displayOrder isActive }
27      errors
28    }
29  }
30`,m=["kid_birthday","kid_space","kid_ocean","kid_dino","viral_dragon_rider","viral_pixar_dance","viral_phoenix_rise","kbo_stadium_spotted"],v=["dance_nyc_pug","dance_bin_day_banger","dance_gym_pump","dance_kitchen_baby","dance_snow_bear","kbo_stadium_spotted","viral_galaxy_walk","viral_time_freeze"],b=[{id:"PERSONAL",label:"Personalized for you",emoji:"⭐",hero:!0,aspect:"9/16",virtual:"personalized",afterSlug:"STYLE_STARTER"},{id:"TRENDS",label:"Trends",emoji:"🔥",hero:!0,aspect:"9/16",virtual:"trends",afterSlug:"PERSONAL"}];function x(e){const l=[];return e.forEach(e=>{var s,d;l.push((s=((e,t)=>{for(var r in t||(t={}))i.call(t,r)&&o(e,r,t[r]);if(n)for(var r of n(t))a.call(t,r)&&o(e,r,t[r]);return e})({},e),d={id:e.slug},t(s,r(d)))),b.forEach(t=>{t.afterSlug===e.slug&&l.push(t)})}),l}function y(e){return e.broken?{id:"broken",label:"BROKEN",bg:"rgba(255,59,48,.95)",fg:"white"}:e.isActive?"workflow_v1"===e.pipeline?{id:"canary",label:"CANARY",bg:"rgba(255,149,0,.92)",fg:"white"}:{id:"live",label:"LIVE",bg:"rgba(52,199,89,.92)",fg:"white"}:{id:"hidden",label:"HIDDEN",bg:"rgba(0,0,0,.72)",fg:"rgba(255,255,255,.9)"}}function j({effect:e}){const t=y(e),r=[];return r.push(l.jsx("span",{style:{position:"absolute",top:8,right:8,padding:"3px 9px",background:t.bg,color:t.fg,borderRadius:980,fontSize:10,fontWeight:800,letterSpacing:".04em",zIndex:2},children:t.label},"served")),!e.isNew||"live"!==t.id&&"canary"!==t.id||r.push(l.jsx("span",{style:{position:"absolute",top:8,left:8,padding:"3px 8px",background:"var(--accent)",color:"white",borderRadius:980,fontSize:10,fontWeight:800,letterSpacing:".04em",zIndex:2},children:"NEW"},"new")),e.draftVersionNumber&&r.push(l.jsxs("span",{style:{position:"absolute",bottom:8,left:8,padding:"3px 8px",background:"rgba(0,0,0,.72)",color:"var(--orange-500)",borderRadius:980,fontSize:10,fontWeight:700,letterSpacing:".04em",zIndex:2},children:["● DRAFT v",e.draftVersionNumber]},"draft")),r}function S({effect:e,aspect:t}){var r,n;return l.jsxs("div",{style:{position:"relative",width:"100%",aspectRatio:t,borderRadius:14,overflow:"hidden",background:`linear-gradient(135deg, ${(null==(r=e.tintColors)?void 0:r[0])||"#FF3D2E"}, ${(null==(n=e.tintColors)?void 0:n[1])||"#FF5C3D"})`,boxShadow:"0 4px 16px rgba(0,0,0,.32)"},children:[e.previewVideoUrl?l.jsx("video",{src:e.previewVideoUrl,autoPlay:!0,loop:!0,muted:!0,playsInline:!0,preload:"metadata",style:{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover"}}):e.thumbnailUrl?l.jsx("img",{src:e.thumbnailUrl,alt:e.name,loading:"lazy",style:{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover"}}

30):null,l.jsx(j,{effect:e})]})}function k({effect:e,onToggle:t,toggling:r}){const[n,i]=d.useState(!1);return l.jsxs("div",{style:{position:"absolute",bottom:8,right:8,zIndex:3},onClick:e=>{e.stopPropagation()},children:[l.jsx("button",{type:"button",onClick:()=>i(e=>!e),style:{background:"rgba(0,0,0,.6)",color:"white",border:"none",borderRadius:"50%",width:26,height:26,fontSize:14,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",lineHeight:1},"aria-label":"Effect actions",children:"⋯"}),n&&l.jsx("div",{onMouseLeave:()=>i(!1),style:{position:"absolute",right:0,top:30,minWidth:180,padding:4,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:8,boxShadow:"0 8px 24px rgba(0,0,0,.4)"},children:l.jsxs("button",{type:"button",disabled:r||e.broken,onClick:()=>{t(),i(!1)},style:{display:"block",width:"100%",padding:"8px 10px",background:"transparent",border:"none",color:e.broken?"var(--fg-muted)":"var(--fg)",textAlign:"left",fontSize:13,cursor:e.broken?"not-allowed":"pointer",borderRadius:6},onMouseEnter:t=>{e.broken||(t.currentTarget.style.background="var(--gray-100)")},onMouseLeave:e=>{e.currentTarget.style.background="transparent"},children:[e.isActive?"○ Hide from iOS":"● Show in iOS",e.broken&&l.jsx("div",{className:"text-muted",style:{fontSize:10.5,marginTop:2},children:"Fix compile_lint first"})]})})]})}function w({effect:e,onClick:t,onToggle:r,toggling:n}){var i;return l.jsxs("div",{onClick:t,style:{cursor:"pointer",minWidth:180,maxWidth:180,flexShrink:0,transition:"transform .15s var(--ease)",position:"relative"},children:[l.jsx(S,{effect:e,aspect:"9/16"}),l.jsx(k,{effect:e,onToggle:r,toggling:n}),l.jsxs("div",{style:{marginTop:8},children:[l.jsx("div",{style:{fontSize:14,fontWeight:600,color:"var(--fg)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:e.name}),l.jsxs("div",{style:{fontSize:10.5,color:"var(--fg-muted)",fontFamily:"var(--font-mono)",marginTop:2,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:[e.slug," · #",null!=(i=e.displayOrder)?i:"?"]})]})]})}function C({effect:e,onClick:t,onToggle:r,toggling:n}){return l.jsxs("div",{onClick:t,style:{cursor:"pointer",minWidth:140,maxWidth:140,flexShrink:0,transition:"transform .15s var(--ease)",position:"relative"},children:[l.jsx(S,{effect:e,aspect:"1/1"}),l.jsx(k,{effect:e,onToggle:r,toggling:n}),l.jsx("div",{style:{marginTop:8,fontSize:13,fontWeight:600,color:"var(--fg)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",textAlign:"center"},children:e.name})]})}function A({section:e,effects:t,onCardClick:r,onCardToggle:n,togglingSlug:i,onCreateInCategory:a}){const o=d.useRef(null),s=d.useMemo(()=>{const e={live:0,hidden:0,broken:0,canary:0};return t.forEach(t=>{const r=y(t).id;"live"===r?e.live++:"hidden"===r?e.hidden++:"broken"===r?e.broken++:"canary"===r&&e.canary++}),e},[t]),c="1/1"===e.aspect?C:w,g=e.hero||e.virtual,p=!t.length,u="personalized"===e.virtual?"VIRTUAL · computed per user":"trends"===e.virtual?"VIRTUAL · hand-curated":null;return l.jsxs("section",{style:{marginBottom:32},children:[l.jsxs("div",{style:{display:"flex",alignItems:"baseline",gap:8,marginBottom:12,padding:"0 4px",flexWrap:"wrap"},children:[g?l.jsxs("h2",{style:{margin:0,fontFamily:"var(--font-display)",fontSize:22,fontWeight:800,letterSpacing:"-.01em",color:e.virtual?"var(--accent)":"var(--fg)"},children:[e.label," ",l.jsx("span",{style:{marginLeft:2},children:e.emoji})]}):l.jsxs("h2",{style:{margin:0,fontFamily:"var(--font-utility)",fontSize:12.5,fontWeight:700,letterSpacing:".12em",color:"var(--fg-muted)",textTransform:"uppercase"},children:[e.label," ",l.jsx("span",{style:{marginLeft:2},children:e.emoji})]}),u&&l.jsx("span",{style:{padding:"2px 7px",background:"rgba(255, 61, 46,.16)",color:"var(--accent)",borderRadius:980,fontSize:9.5,fontWeight:700,letterSpacing:".06em",textTransform:"uppercase"},children:u}),e.subtitle&&l.jsxs("span",{style:{color:"var(--fg-muted)",fontSize:13,fontWeight:500},children:["· ",e.subtitle]}),l.jsxs("span",{style:{marginLeft:"auto",color:"var(--fg-muted)",fontFamily:"var(--font-mono)",fontSize:11,display:"inline-flex",alignItems:"center",gap:8},children:[s.live>0&&l.jsxs("span",{style:{color:"var(--green-500)"},children:["● ",s.live," live"]}),s.canary>0&&l.jsxs("span",{style:{color:"var(--orange-500)"},children:["● ",s.canary," canary"]}),s.broken>0&&l.jsxs("span",{style:{color:"var(--red-500)"},children:["● ",s.broken," broken"]}),s.hidden>0&&l.jsxs("span",{style:{color:"var(--fg-muted)"},children:["○ ",s.hidden," hidden"]}),p&&l.jsx("span",{style:{color:"var(--fg-muted)"},children:"empty"}),!e.virtual&&l.jsx("button",{type:"button",onClick:t=>{t.stopPropagation(),a(e.id)},title:`Add a new effect to ${e.label}`,style:{marginLeft:4,padding:"3px 10px",background:"transparent",color:"var(--accent)",border:"1px solid var(--accent)",borderRadius:980,fontSize:11,fontWeight:700,cursor:"pointer",fontFamily:"var(--font-utility)",letterSpacing:".04em",transition:"all .15s var(--ease)"},onMouseEnter:e=>{e.currentTarget.style.background="var(--accent)",e.currentTarget.style.color="white"},onMouseLeave:e=>{e.currentTarget.style.background="transparent",e.currentTarget.style.color="var(--accent)"},children:"+ ADD"})]})]}),p?l.jsxs("div",{onClick:()=>a(e.id),style:{border:"1.5px dashed var(--border)",borderRadius:14,padding:"20px 16px",color:"var(--fg-muted)",fontSize:13,cursor:"pointer",transition:"border-color .15s var(--ease)",background:"rgba(255,255,255,.02)"},onMouseEnter:e=>{e.currentTarget.style.borderColor="var(--accent)"},onMouseLeave:e=>{e.currentTarget.style.borderColor="var(--border)"},children:["No effects in ",l.jsx("strong",{style:{color:"var(--fg)"},children:e.label})," yet.",e.virtual?" Update the curated slug array in EffectsListPage.jsx.":l.jsxs(l.Fragment,{children:[" Click to ",l.jsx("span",{style:{color:"var(--accent)"},children:"create one →"})]})]}):l.jsx("div",{ref:o,style:{display:"flex",gap:12,overflowX:"auto",padding:"4px 4px 12px",scrollSnapType:"x proximity",WebkitOverflowScrolling:"touch"},children:t.map(e=>l.jsx("div",{style:{scrollSnapAlign:"start"},children:l.jsx(c,{effect:e,onClick:()=>r(e),onToggle:()=>n(e),toggling:i===e.slug})},e.slug))})]})}function T(){const e=s(),{data:t,loading:r,error:n,refetch:i}=c(u,{fetchPolicy:"cache-and-network"}),[a,o]=d.useState(null),[p]=g(f,{onCompleted:()=>{o(null),i()},onError:()=>o(null)}),[b,{loading:y}]=g(h,{awaitRefetchQueries:!0,onCompleted:()=>{S(!1),W(),i()}}

30),[j,S]=d.useState(!1),[k,w]=d.useState(""),[C,T]=d.useState(""),[N,E]=d.useState("✨"),[O,_]=d.useState("9/16"),[z,L]=d.useState(null),W=()=>{w(""),T(""),E("✨"),_("9/16"),L(null)},R=e=>{o(e.slug),p({variables:{slug:e.slug,isActive:!e.isActive}})},I=d.useMemo(()=>x(((null==t?void 0:t.effectCategoriesAdminList)||[]).slice().sort((e,t)=>{var r,n;return(null!=(r=e.displayOrder)?r:9999)-(null!=(n=t.displayOrder)?n:9999)})),[t]),P=d.useMemo(()=>{const e=(null==t?void 0:t.effectsAdminList)||[],r=Object.fromEntries(e.map(e=>[e.slug,e])),n={};I.forEach(e=>{n[e.id]=[]}),e.forEach(e=>{const t=e.category;n[t]||(n[t]=[]),n[t].push(e)}),Object.entries(n).forEach(([e,t])=>{I.find(t=>t.id===e&&t.virtual)||t.sort((e,t)=>{var r,n;return(null!=(r=e.displayOrder)?r:9999)-(null!=(n=t.displayOrder)?n:9999)})});const i=e=>e.map(e=>r[e]).filter(e=>e&&e.isActive&&!e.broken);return n.PERSONAL=i(m),n.TRENDS=i(v),n},[t,I]),$=d.useMemo(()=>{const e=(null==t?void 0:t.effectsAdminList)||[];return{active:e.filter(e=>e.isActive&&!e.broken).length,hidden:e.filter(e=>!e.isActive).length,broken:e.filter(e=>e.broken).length,total:e.length}},[t]);return n?l.jsx("div",{className:"page",children:l.jsxs("div",{className:"card",style:{padding:24,borderColor:"var(--red-500)"},children:[l.jsx("strong",{style:{color:"var(--red-500)"},children:"GraphQL error"}),l.jsx("div",{className:"text-muted",style:{marginTop:8,fontFamily:"var(--font-mono)",fontSize:12},children:n.message})]})}):l.jsxs("div",{className:"page",children:[l.jsxs("div",{style:{display:"flex",alignItems:"flex-end",justifyContent:"space-between",marginBottom:24,gap:16,flexWrap:"wrap"},children:[l.jsxs("div",{children:[l.jsx("h1",{style:{margin:0,fontFamily:"var(--font-display)",fontSize:32,fontWeight:800,letterSpacing:"-.02em",color:"var(--fg)"},children:"Effects"}),l.jsxs("div",{className:"text-muted",style:{marginTop:6,fontSize:13},children:[l.jsx("strong",{style:{color:"var(--fg)"},children:$.active})," active",l.jsx("span",{style:{margin:"0 6px"},children:"·"}),l.jsx("strong",{children:$.hidden})," hidden",l.jsx("span",{style:{margin:"0 6px"},children:"·"}),l.jsx("strong",{style:{color:"var(--red-500)"},children:$.broken})," broken",l.jsx("span",{style:{margin:"0 6px"},children:"·"}),l.jsx("span",{children:"laid out exactly as the iOS Effects tab renders them"})]})]}),l.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:[l.jsx("button",{className:"btn",onClick:()=>S(e=>!e),title:"Create a new top-level category row (Halloween, Sport, etc.)",children:"+ New section"}),l.jsx("button",{className:"btn",onClick:()=>e("/admin/effects/layout"),title:"Drag-and-drop reorder mode — move sections up/down and effects within sections",children:"▦ Arrange layout"}),l.jsx("button",{className:"btn btn--primary",onClick:()=>e("/admin/effects/new"),children:"+ New effect"})]})]}),j&&l.jsxs("div",{className:"card",style:{padding:16,marginBottom:20,border:"1.5px solid var(--accent)"},children:[l.jsxs("div",{style:{display:"flex",alignItems:"baseline",gap:12,marginBottom:12},children:[l.jsx("h3",{style:{margin:0,fontSize:15,fontWeight:700},children:"New section"}),l.jsx("span",{className:"text-muted",style:{fontSize:12},children:"Creates a new category row. iOS will pick it up on next launch (auto-fetched)."}),l.jsx("button",{type:"button",onClick:()=>{S(!1),W()},className:"btn btn--ghost btn--sm",style:{marginLeft:"auto"},children:"Cancel"})]}),l.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 2fr 80px 120px auto",gap:10,alignItems:"end"},children:[l.jsxs("div",{children:[l.jsx("label",{style:{fontSize:10.5,fontWeight:700,textTransform:"uppercase",letterSpacing:".08em",color:"var(--fg-muted)",display:"block",marginBottom:4},children:"Slug"}),l.jsx("input",{className:"input",value:k,onChange:e=>w(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g,"_")),placeholder:"HALLOWEEN",style:{fontFamily:"var(--font-mono)",fontSize:13}})]}),l.jsxs("div",{children:[l.jsx("label",{style:{fontSize:10.5,fontWeight:700,textTransform:"uppercase",letterSpacing:".08em",color:"var(--fg-muted)",display:"block",marginBottom:4},children:"Label"}),l.jsx("input",{className:"input",value:C,onChange:e=>T(e.target.value),placeholder:"Halloween Spooky"})]}),l.jsxs("div",{children:[l.jsx("label",{style:{fontSize:10.5,fontWeight:700,textTransform:"uppercase",letterSpacing:".08em",color:"var(--fg-muted)",display:"block",marginBottom:4},children:"Emoji"}),l.jsx("input",{className:"input",value:N,onChange:e=>E(e.target.value.slice(0,4)),style:{textAlign:"center",fontSize:18}})]}),l.jsxs("div",{children:[l.jsx("label",{style:{fontSize:10.5,fontWeight:700,textTransform:"uppercase",letterSpacing:".08em",color:"var(--fg-muted)",display:"block",marginBottom:4},children:"Aspect"}),l.jsxs("select",{className:"select",value:O,onChange:e=>_(e.target.value),children:[l.jsx("option",{value:"9/16",children:"9:16 (vertical)"}),l.jsx("option",{value:"1/1",children:"1:1 (square)"})]})]}),l.jsx("button",{className:"btn btn--primary",disabled:y||!k,onClick:()=>{L(null),/^[A-Z][A-Z0-9_]*$/.test(k)?b({variables:{slug:k,label:C||k,emoji:N,aspect:O,hero:!0}}).then(e=>{var t,r;const n=(null==(r=null==(t=null==e?void 0:e.data)?void 0:t.effectC

30ategoryAdminSave)?void 0:r.errors)||[];n.length&&L(n.join(" · "))}):L("Slug must be UPPER_SNAKE_CASE (e.g. HALLOWEEN, BACK_TO_SCHOOL).")},children:y?"Creating…":"Create section"})]}),z&&l.jsx("div",{style:{marginTop:10,padding:8,background:"rgba(255,59,48,.12)",color:"var(--red-500)",borderRadius:6,fontSize:12},children:z})]}),r&&!t&&l.jsx("div",{className:"card",style:{padding:24},children:"Loading…"}),I.map(t=>l.jsx(A,{section:t,effects:P[t.id]||[],onCardClick:t=>e("/admin/effects/"+t.slug),onCardToggle:R,togglingSlug:a,onCreateInCategory:t=>e("/admin/effects/new?category="+t)},t.id)),(()=>{const r=new Set(I.map(e=>e.id)),n=((null==t?void 0:t.effectsAdminList)||[]).filter(e=>!r.has(e.category));return n.length?l.jsx(A,{section:{id:"UNKNOWN",label:"Unknown category — not shown in iOS",emoji:"❓",hero:!1,aspect:"9/16",subtitle:"fix the category field on these to bring them into iOS"},effects:n.sort((e,t)=>{var r,n;return(null!=(r=e.displayOrder)?r:9999)-(null!=(n=t.displayOrder)?n:9999)}),onCardClick:t=>e("/admin/effects/"+t.slug),onCardToggle:R,togglingSlug:a}):null})(),l.jsxs("div",{className:"text-muted",style:{marginTop:32,padding:16,background:"var(--gray-100)",borderRadius:"var(--radius-md)",fontSize:12.5,lineHeight:1.6},children:[l.jsx("strong",{children:"How this maps to iOS:"})," categories render in the same order, cards sorted by ",l.jsx("code",{children:"display_order ASC"}),"."," ",l.jsx("span",{style:{color:"var(--accent)",fontWeight:600},children:"Personalized for you"})," and"," ",l.jsx("span",{style:{color:"var(--accent)",fontWeight:600},children:"Trends"})," are virtual rows — iOS picks per-user via interests overlap; admin sees a hand-curated slug list (edit ",l.jsx("code",{children:"PERSONALIZED_SLUGS"})," ","and ",l.jsx("code",{children:"TRENDS_SLUGS"})," in EffectsListPage.jsx to update). To reorder real categories, click ",l.jsx("strong",{children:"Arrange layout"})," ↑."]})]})}export{T as default};