https://snapio.ai/assets/content-list-masonic-DDP1R6oj.js

1import{r as a,F as we,u as ge,aJ as ve,bm as ye,l as be,a$ as Ne,aa as re,j as e,I as U,C as ee,e as te,m as Ce,n as Se,B,o as Pe,p as ke,q as Ee,s as Te,t as Le,v as Fe,w as oe,x as le,y as ce,z as ie,A as K,a8 as $e,aH as se,X as De,aw as Re,S as de,V as Ie,R as ue,bn as me}from"./index-BSiIgY1-.js";import{a as Ae}from"./download-CIKXiqQX.js";import{P as X}from"./PageHeader-XjiEGSyQ.js";import{F as ze}from"./FilterBar-CX_RGS2u.js";import{M as he,a as pe}from"./index-uIRvuXGK.js";import{F as Me}from"./filter-Bh6Eb6IO.js";import{P as Ue}from"./plus-7p2Vvnv9.js";import{D as qe}from"./download-u0D2HrdS.js";import{P as Ve}from"./pen-line-C0iyvbfh.js";const Oe=s=>{const o=a.useRef(s);return a.useEffect(()=>{o.current=s}),o},He=typeof performance<"u"?performance:Date,Ye=()=>He.now();function Ze(s,o=30,d=!1){const u=Oe(s),w=1e3/o,m=a.useRef(0),f=a.useRef(),S=()=>f.current&&clearTimeout(f.current),i=[o,d,u];function b(){m.current=0,S()}return a.useEffect(()=>b,i),a.useCallback(function(){const p=arguments,x=Ye(),h=()=>{m.current=x,S(),u.current.apply(null,p)},N=m.current;if(d&&N===0)return h();if(x-N>w){if(N>0)return h();m.current=x}S(),f.current=setTimeout(()=>{h(),m.current=0},w)},i)}function Be(s,o,d){const u=a.useState(s);return[u[0],Ze(u[1],o,d)]}function Ke(s,o,d,u){const w=a.useRef(d),m=a.useRef(u);a.useEffect(()=>{w.current=d,m.current=u}),a.useEffect(()=>{const f=s&&"current"in s?s.current:s;if(!f)return;let S=0;function i(...p){S||w.current.apply(this,p)}f.addEventListener(o,i);const b=m.current;return()=>{S=1,f.removeEventListener(o,i),b&&b()}},[s,o])}const G=typeof window>"u"?null:window,fe=()=>G.scrollY!==void 0?G.scrollY:G.pageYOffset===void 0?0:G.pageYOffset,Ge=(s=30)=>{const o=Be(typeof window>"u"?0:fe,s,!0);return Ke(G,"scroll",()=>o[1](fe())),o[0]};function _e({execution:s}){return e.jsx(ee,{className:"overflow-hidden border-2 border-blue-200 bg-blue-50/50",children:e.jsxs(te,{className:"p-0",children:[e.jsxs("div",{className:"aspect-square bg-gradient-to-br from-blue-100 to-blue-200 flex items-center justify-center relative",children:[e.jsx(se,{className:"w-8 h-8 text-blue-600 animate-spin"}),e.jsx("div",{className:"absolute bottom-2 left-2 bg-blue-600 text-white px-2 py-1 rounded text-xs font-medium",children:"Generating..."})]}),e.jsxs("div",{className:"p-3",children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("h3",{className:"font-medium text-sm text-blue-900 truncate",children:s.snapName}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-pulse"})]}),e.jsx("p",{className:"text-xs text-blue-700 mb-2",children:s.message||"Generating content..."}),e.jsx("div",{className:"w-full bg-blue-200 rounded-full h-1.5",children:e.jsx("div",{className:"bg-blue-600 h-1.5 rounded-full animate-pulse",style:{width:"60%"}})})]})]})})}function lt(){const{toast:s}=we();ge(),Ge(5);const{user:o,loading:d}=ve(),{activeExecutions:u}=ye(),w=new URLSearchParams(window.location.search),m=w.get("productId")||"all",f=w.get("search")||"",S=w.get("sort")||"newest",[i,b]=a.useState(f),[p,x]=a.useState(m),[h,N]=a.useState(S),[q,R]=a.useState(!1),[C,I]=a.useState(new Set),[V,O]=a.useState(!1),[y,A]=a.useState(!1),g=a.useRef(null),z=a.useRef([]),_=a.useCallback((t,n,r)=>{var c;if(n&&(n.stopPropagation(),n.preventDefault()),n!=null&&n.shiftKey&&((c=window.getSelection())==null||c.removeAllRanges()),n!=null&&n.shiftKey&&g.current!==null&&r!==void 0){const k=Math.min(g.current,r),E=Math.max(g.current,r);I(Q=>{const Z=new Set(Q),W=z.current;for(let D=k;D<=E;D++)W[D]&&Z.add(W[D].id);return Z}),g.current=r}else I(k=>{const E=new Set(k);return E.has(t)?E.delete(t):E.add(t),E.size===0&&(O(!1),g.current=null),E}),g.current=r??null},[]),ne=a.useCallback(t=>{O(!0),I(new Set([t]))},[]),j=a.useCallback(()=>{I(new Set),O(!1),g.current=null},[]);a.useEffect(()=>{const t=new URLSearchParams;i&&t.set("search",i),p!=="all"&&t.set("productId",p),h!=="newest"&&t.set("sort",h);const n=t.toString(),r=n?`/content?${n}`:"/content";window.location.pathname+window.location.search!==r&&window.history.replaceState({},"",r)},[i,p,h]);const{data:H,isLoading:J,error:Y}=be({queryKey:["/api/products"],...me.PRODUCTS,refetchOnWindowFocus:!1}),F=(H==null?void 0:H.products)||[],{data:P,fetchNextPage:M,hasNextPage:$,isFetchingNextPage:T,isLoading:L,error:l}=Ne({queryKey:["/api/content"],queryFn:async({pageParam:t=1})=>{const n=await fetch(`/api/content?page=${t}&limit=12`);if(!n.ok){if(n.status===401)return{content:[],hasMore:!1};throw new Error("Failed to fetch content")}return n.json()},initialPageParam:1,getNextPageParam:(t,n)=>

1t.hasMore?n.length+1:void 0,enabled:!!o&&!d,...me.CONTENT}),v=re.useMemo(()=>{if(!P||!F)return[];let t=P.pages.flatMap(n=>n.content.filter(r=>r&&typeof r=="object"&&r.id).map(r=>({...r,product:F.find(c=>c.id===r.productId)})));if(p!=="all"){const n=parseInt(p);t=t.filter(r=>r.productId===n)}if(i){const n=i.toLowerCase();t=t.filter(r=>{var c;return r.name.toLowerCase().includes(n)||(((c=r.product)==null?void 0:c.name)||"").toLowerCase().includes(n)})}return t.sort((n,r)=>{var c,k;switch(h){case"oldest":return new Date(n.dateCreated).getTime()-new Date(r.dateCreated).getTime();case"newest":return new Date(r.dateCreated).getTime()-new Date(n.dateCreated).getTime();case"name":return n.name.localeCompare(r.name);case"product":return(((c=n.product)==null?void 0:c.name)||"").localeCompare(((k=r.product)==null?void 0:k.name)||"");default:return new Date(r.dateCreated).getTime()-new Date(n.dateCreated).getTime()}}),t},[P,F,p,i,h]);z.current=v,a.useEffect(()=>{g.current!==null&&(g.current=null)},[p,i,h]);const je=a.useCallback(async()=>{if(C.size!==0){A(!0);try{const t=v.filter(c=>C.has(c.id)),n=[];if(t.forEach(c=>{c.contentUrls&&c.contentUrls.length>0&&c.contentUrls.forEach((k,E)=>{var D;const Q=((D=k.match(/\.(jpg|jpeg|png|gif|webp|mp4|webm|mov)$/i))==null?void 0:D[0])||".jpg",Z=c.name.replace(/[^a-zA-Z0-9]/g,"_").substring(0,30),W=c.contentUrls.length>1?`${Z}_${E+1}${Q}`:`${Z}${Q}`;n.push({url:k,filename:W})})}),n.length===0){s({title:"No images to download",description:"Selected content has no images.",variant:"destructive"});return}const r=await Ae(n,`content-download-${Date.now()}.zip`);r.success?(s({title:"Download Started",description:`Downloading ${n.length} image${n.length>1?"s":""} as ZIP.`}),j()):s({title:"Download Failed",description:r.error||"Failed to download images. Please try again.",variant:"destructive"})}catch(t){console.error("Download error:",t),s({title:"Download Failed",description:"Failed to download images. Please try again.",variant:"destructive"})}finally{A(!1)}}},[C,v,s,j]),ae=re.useMemo(()=>{const t=F.filter(n=>P==null?void 0:P.pages.some(r=>r.content.some(c=>c.productId===n.id)));return[{value:"all",label:"All Products"},...t.map(n=>({value:n.id.toString(),label:n.name}))]},[F,P]);return a.useEffect(()=>{const t=()=>{window.innerHeight+document.documentElement.scrollTop>=document.documentElement.offsetHeight-1e3&&$&&!T&&!L&&M()};return window.addEventListener("scroll",t),()=>window.removeEventListener("scroll",t)},[$,T,L,M]),a.useEffect(()=>{if(T||L||!$||l)return;const t=requestAnimationFrame(()=>{window.innerHeight+document.documentElement.scrollTop>=document.documentElement.offsetHeight-1e3&&M()});return()=>cancelAnimationFrame(t)},[T,L,$,M,v,l]),Y||l?e.jsx("div",{className:"py-6",children:e.jsx("div",{className:"px-4 sm:px-6 lg:px-8",children:e.jsx("div",{className:"flex items-center space-x-4",children:e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-red-600",children:"Error Loading Content"}),e.jsxs("p",{className:"text-muted-foreground mt-1",children:[Y?`Products error: ${Y.message}`:"",l?`Content error: ${l.message}`:""]})]})})})}):L||d||J?e.jsx("div",{className:"py-6",children:e.jsxs("div",{className:"px-4 sm:px-6 lg:px-8",children:[e.jsx(X,{title:"Content",description:"Your marketing content and images",icon:e.jsx(U,{})}),e.jsx("div",{className:"mx-auto",children:e.jsx(he,{columnsCountBreakPoints:{350:2,768:3,1024:4,1280:5,1536:6},children:e.jsx(pe,{gutter:"16px",children:Array.from({length:12}).map((t,n)=>{const r=[200,260,180,240,220,280,190,250,210,270,185,235];return e.jsx("div",{className:"relative overflow-hidden rounded-xl bg-white shadow-sm",children:e.jsx("div",{className:"w-full animate-pulse bg-gray-200",style:{height:`${r[n%r.length]}px`}})},n)})})})})]})}):!o&&!d?e.jsx("div",{className:"py-6",children:e.jsxs("div",{className:"px-4 sm:px-6 lg:px-8",children:[e.jsx(X,{title:"Content",description:"Your marketing content and images",icon:e.jsx(U,{})}),e.jsx(ee,{children:e.jsxs(te,{className:"flex flex-col items-center justify-center py-12",children:[e.jsx(U,{className:"h-12 w-12 text-muted-foreground mb-4"}),e.jsx("h3",{className:"text-lg font-medium mb-2",children:"Authentication Required"}),e.jsx("p",{className:"text-muted-foreground text-center mb-4",children:"Please log in to view your content."})]})})]})}):e.jsx("div",{className:"py-6",children:e.jsxs("div",{className:"px-4 sm:px-6 lg:px-8",children:[e.jsx(X,{title:"Content",description:"Your marketing content and images",icon:e.jsx(U,{}),mobileFilterButton:e.jsxs(Ce,{open:q,onOpenChange:R,children:[e.jsx(Se,{asChild:!0,children:e.jsx(B,{variant:"outline",size:"icon",children:e.jsx(Me,{className:"h-4 w-4"})})}),e.jsxs(Pe,{side:"bottom",className:"h-[80vh]",children:[e.jsxs(ke,{children:[e.jsx(Ee,{children:"Search & Filter Content"}),e.jsx(Te,{children:"Search and filter your content to find exactly what you need."})]}),e.jsxs("div",{className:"mt-6 space-y-6",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm font-medium",children:"Search"}),e.jsxs("div",{className:"relative",children:[e.jsx(Le,{className:"absolute left-2.5 top-2.5 h-4 w-4 text-neutral-text-tertiary"}),e.jsx(Fe,{type:"text",placeholder:"Search content and products...",className:"pl-8",value:i,onChange:t=>b(t.target.value)})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm font-medium",children:"Product"}),e.jsxs(oe,{value:p,onValueChange:x,children:[e.jsx(le,{children:e.jsx(ce,{placeholder:"Filter by product"})}),e.jsx(ie,{children:ae.map(t=>e.jsx(K,{value:t.value,children:t.label},t.value))})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm font-medium",children:"Sort"}),e.jsxs(oe,{value:h,onValueChange:N,children:[e.jsx(le,{children:e.jsx(ce,{placeholder:"Sort by"})}),e.jsxs(ie,{children:[e.jsx(K,{value:"newest",children:"Newest First"}),e.jsx(K,{value:"oldest",children:"Oldest First"}),e.jsx(K,{value:"name",children:"Content Name (A-Z)"}),e.jsx(K,{value:"product",children:"Product Name (A-Z)"})]})]})]}),e.jsx(B,{onClick:()=>R(!1),className:"w-full",children:"Apply Filters"})]})]})]})}),e.jsx("div",{className:"hidden md:block",children:e.jsx(ze,{searchValue:i,onSearchChange:b,searchPlaceholder:"Search content and products...",filterValue:p,onFilterChange:x,filterOptions:ae,filterLabel:"Product",sortValue:h,onSortChange:N,sortOptions:[{value:"newest",label:"Newest First"},{value:"oldest",label:"Oldest First"},{value:"name",label:"Content Name (A-Z)"},{value:"product",label:"Product Name (A-Z)"}],sortLabel:"Sort"})}),v.length===0&&u.filter(t=>t.status==="queued"||t.status==="processing"||t.status==="unknown").length===0?e.jsx(ee,{children:e.jsxs(te,{className:"flex flex-col items-center justify-center py-12",children:[e.jsx(U,{className:"h-12 w-12 text-muted-foreground mb-4"}),e.jsx("h3",{className:"text-lg font-medium mb-2",children:"No Content Generated Yet"}),e.jsx("p",{className:"text-muted-foreground text-center mb-4",children:"Create content for your products using our AI-powered content generation."}),e.jsx("div",{className:"flex justify-center",children:e.jsx($e,{href:"/snaps",children:e.jsxs(B,{variant:"outline",children:[e.jsx(Ue,{className:"h-4 w-4 mr-2"}),"Create Content"]})})})]})}):e.jsx("div",{className:"mx-auto",children:o&&Array.isArray(v)&&v.length>0&&v.every(t=>t&&typeof t=="object"&&typeof t.id=="number"&&typeof t.name=="string"&&t.contentUrls&&Array.isArray(t.contentUrls))?e.jsxs(e.Fragment,{children:[e.jsx(he,{columnsCountBreakPoints:{350:2,768:3,1024:4,1280:5,1536:6},children:e.jsxs(pe,{gutter:"16px",children:[u.filter(t=>t.status==="queued"||t.status==="processing"||t.status==="unknown").map(t=>e.jsx(_e,{execution:t},`loading-${t.jobId}`)),v.map((t,n)=>e.jsx(We,{data:t,index:n,isSelected:C.has(t.id),isSelectionMode:V,hasSelection:C.size>0,onToggleSelect:_,onLongPress:ne},t.id))]})}),T&&e.jsxs("div",{className:"flex justify-center items-center py-8",children:[e.jsx(se,{className:"h-6 w-6 animate-spin text-primary mr-2"}),e.jsx("span",{className:"text-muted-foreground",children:"Loading more content..."})]}),!$&&v.length>0&&e.jsx("div",{className:"text-center py-8",children:e.jsx("p",{className:"text-muted-foreground",children:"No more content to load"})})]}):e.jsx("div",{className:"text-center py-8",children:e.jsx("p",{className:"text-muted-foreground",children:"Unable to load content properly. Please try refreshing the page."})})}),C.size>0&&e.jsx("div",{className:"fixed bottom-24 md:bottom-6 left-1/2 -translate-x-1/2 z-50 animate-in slide-in-from-bottom-4 duration-300",children:e.jsxs("div",{className:"bg-primary text-primary-foreground rounded-full shadow-lg px-4 py-3 flex items-center gap-3",children:[e.jsxs("span",{className:"text-sm font-medium whitespace-nowrap",children:[C.size," selected"]}

1),e.jsx("div",{className:"h-4 w-px bg-primary-foreground/30"}),e.jsxs(B,{variant:"ghost",size:"sm",className:"h-8 px-3 text-primary-foreground hover:bg-primary-foreground/20",onClick:je,disabled:y,"data-testid":"button-download-selected",children:[y?e.jsx(se,{className:"h-4 w-4 animate-spin mr-2"}):e.jsx(qe,{className:"h-4 w-4 mr-2"}),"Download ZIP"]}),e.jsx(B,{variant:"ghost",size:"icon",className:"h-8 w-8 text-primary-foreground hover:bg-primary-foreground/20",onClick:j,"data-testid":"button-clear-selection",children:e.jsx(De,{className:"h-4 w-4"})})]})})]})})}const xe=s=>s.match(/\.(mp4|webm|ogg|mov|avi|mkv)$/i),Qe=s=>{const o=Math.floor(s/60),d=Math.floor(s%60);return`${o}:${d.toString().padStart(2,"0")}`},We=({data:s,index:o,isSelected:d=!1,isSelectionMode:u=!1,hasSelection:w=!1,onToggleSelect:m,onLongPress:f})=>{var T,L;const[S,i]=ge(),[b,p]=a.useState(null),[x,h]=a.useState(!1),[N,q]=a.useState(!1),[R,C]=a.useState(0),[I,V]=a.useState(0),O=2,y=a.useRef(null),A=a.useRef(!1),g=()=>{h(!0),q(!1),V(0)},z=()=>{I<O?(V(l=>l+1),C(l=>l+1)):(q(!0),h(!0))},_=l=>{l.stopPropagation(),q(!1),h(!1),V(0),C(v=>v+1)},j=(s.contentType==="canvas"&&((T=s.metadata)!=null&&T.thumbnailUrl)?s.metadata.thumbnailUrl:null)??(s.contentUrls&&s.contentUrls.length>0?s.contentUrls[0]:""),H=j&&xe(j);a.useEffect(()=>{if(j&&xe(j)){const l=document.createElement("video");l.src=j,l.preload="metadata",l.onloadedmetadata=()=>{p(Qe(l.duration))}}},[j]);const J=a.useCallback(()=>{A.current=!1,y.current=setTimeout(()=>{A.current=!0,f&&f(s.id)},500)},[s.id,f]),Y=a.useCallback(()=>{y.current&&(clearTimeout(y.current),y.current=null)},[]),F=a.useCallback(()=>{y.current&&(clearTimeout(y.current),y.current=null)},[]),P=a.useCallback(l=>{if(A.current){l.preventDefault();return}(u||w)&&m?m(s.id,l,o):s.contentType==="canvas"?i(`/content/canvas/${s.id}`):i(`/content/${s.id}`)},[u,w,m,s.id,s.contentType,o,i]),M=a.useCallback(l=>{l.stopPropagation(),l.preventDefault(),m&&m(s.id,l,o)},[s.id,o,m]),$=a.useCallback(l=>{(u||y.current)&&l.preventDefault()},[u]);return e.jsxs("div",{className:"relative w-full",onTouchStart:J,onTouchEnd:Y,onTouchMove:F,onContextMenu:$,children:[d&&e.jsx("div",{className:"absolute inset-0 rounded-xl ring-2 ring-primary ring-offset-2 pointer-events-none z-10",style:{margin:"-2px"}}),e.jsxs("div",{className:"relative w-full card content-card cursor-pointer bg-white rounded-xl overflow-hidden shadow-sm md:hover:shadow-md md:transition-shadow md:duration-300 group",onClick:P,"data-testid":`card-content-${s.id}`,children:[e.jsx("div",{className:`absolute top-3 left-3 z-20 transition-opacity duration-200 ${u?"opacity-100":"md:opacity-100 opacity-0"}`,onClick:M,children:e.jsx("div",{className:`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200 cursor-pointer ${d?"bg-primary border-primary text-primary-foreground":"bg-white/80 border-gray-300 hover:border-primary"}`,"data-testid":`checkbox-select-${s.id}`,children:d&&e.jsx(Re,{className:"w-4 h-4"})})}),H?e.jsxs("div",{className:"relative overflow-hidden",children:[!x&&e.jsx(de,{className:"w-full aspect-[4/5] animate-pulse"}),N?e.jsxs("div",{className:"w-full aspect-[4/5] flex flex-col items-center justify-center bg-gray-100 gap-2",children:[e.jsx(Ie,{className:"w-8 h-8 text-gray-400"}),e.jsx("span",{className:"text-xs text-gray-500",children:"Video unavailable"}),e.jsxs("button",{onClick:_,className:"text-xs text-primary flex items-center gap-1",children:[e.jsx(ue,{className:"w-3 h-3"})," Retry"]})]}):e.jsx("video",{src:j,className:`w-full h-auto md:transition-all md:duration-300 md:group-hover:scale-105 transition-opacity duration-300 ${x?"opacity-100":"opacity-0"}`,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,preload:"metadata",onLoadedData:g,onError:z},R),x&&!N&&b&&e.jsx("div",{className:"absolute top-3 right-3 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-md z-10 font-mono",children:b})]}):e.jsxs("div",{className:"relative overflow-hidden",children:[!x&&e.jsx(de,{className:`w-full animate-pulse ${s.contentType==="canvas"?"aspect-square":"aspect-[4/5]"}`}),N?e.jsxs("div",{className:`w-full flex flex-col items-center justify-center bg-gray-100 gap-2 ${s.contentType==="canvas"?"aspect-square":"aspect-[4/5]"}`,children:[e.jsx(U,{className:"w-8 h-8 text-gray-400"}),e.jsx("span",{className:"text-xs text-gray-500",children:"Failed to load"}),e.jsxs("button",{onClick:_,className:"text-xs text-primary flex items-center gap-1",children:[e.jsx(ue,{className:"w-3 h-3"})," Retry"]})]}):s.contentType==="canvas"?e.jsx("div",{className:"aspect-square w-full",children:e.jsx("img",{src:j,alt:s.name,className:`w-full h-full object-cover md:transition-all md:duration-300 md:group-hover:scale-105 transition-opacity duration-300 ${x?"opacity-100":"opacity-0"}`,loading:"lazy",onLoad:g,onError:z},R)}):e.jsx("img",{src:j,alt:s.name,className:`w-full h-auto md:transition-all md:duration-300 md:group-hover:scale-105 transition-opacity duration-300 ${x?"opacity-100":"opacity-0"}`,loading:"lazy",onLoad:g,onError:z},R),s.contentType==="canvas"&&e.jsxs("div",{className:"absolute top-3 right-3 z-10 flex items-center gap-1 bg-black/60 text-white text-xs px-2 py-1 rounded-md backdrop-blur-sm",children:[e.jsx(Ve,{className:"w-3 h-3"}),"Canvas"]})]}),e.jsx("div",{className:"hidden md:block absolute bottom-0 left-0 right-0 p-4 text-white opacity-0 group-hover:opacity-100 transition-all duration-500 ease-out",style:{background:"linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0) 100%)"},children:e.jsxs("div",{className:"transform translate-y-2 group-hover:translate-y-0 transition-transform duration-500 ease-out",children:[e.jsx("h4",{className:"text-lg font-medium leading-tight mb-1",children:s.name}),e.jsx("p",{className:"text-sm opacity-85 leading-relaxed",children:((L=s.product)==null?void 0:L.name)||"Unknown Product"})]})})]})]})};export{lt as default};