"use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { ChevronLeft, ChevronRight, Clapperboard, Coffee, Copy, ThumbsDown, ThumbsUp, UserCheck, UserPlus, Heart, Link2, Loader2, MoreHorizontal, Pencil, Plus, Printer, Ruler, Search, Send, Sparkles, Store, Trash2, Undo2, Users, X } from "lucide-react"; import { getSupabaseClient } from "@/lib/supabase"; import { getCompanyContext, resolveCompanyPublicProfileId } from "@/lib/company-context"; import { Aviso } from "@/components/ui/aviso"; import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao"; import { CampoDecimal } from "@/components/ui/campo-decimal"; import MarcaDoDesign from "@/components/design/marca-do-design"; import { GaleriaIndisponivel, abrirArte, apagarArte, criarArte, duplicarArte, listarArtesDaGaleria, salvarArte, type ArteNaGaleria, type ResumoDaArte, type VinculoComOrcamento } from "@/lib/banner-editor/artes"; import { situacaoDasProvas, type ResumoDaProva } from "@/lib/banner-editor/provas"; import { CONTAGEM_VAZIA, chaveDaCasa, contagemDo, favoritar, meuEstado, resumoDoAutor, seguir, votar, type Contagem, type ResumoDoAutor } from "@/lib/banner-editor/comunidade-social"; import { CORES_NOMEADAS, OCASIOES, ocasioesDoTexto, textoDoModelo } from "@/lib/banner-editor/etiquetas"; import { TIPOS_DE_MODELO, enderecoDaMiniatura, fotosDasPaginas, miniaturaDoModelo, pedidoNeutro, pedirMiniatura, type FotoPronta, type TipoDeModelo } from "@/lib/banner-editor/miniaturas"; import { VideoQueToca } from "./video-que-toca"; import { NOMES_DOS_TIPOS, contarUso, documentoDoModelo, enviarParaComunidade, enviosDaEmpresa, modelosAprovados, retirarEnvio, tipoDaArte, type ModeloDaComunidade } from "@/lib/banner-editor/comunidade"; import { CHAVES_DAS_FONTES_DE_BASE, ICONES, garantirFontes, type DocumentoDoBanner } from "@/lib/banner-editor/documento"; import { FORMATOS_DA_ARTE, LIMITE_DO_LADO, MINIMO_DO_LADO, formatoDaChave, formatoDoTamanho, medidaDeImpressao, pxDe, type FormatoDaArte, type GrupoDoFormato } from "@/lib/banner-editor/formatos"; import { MODELOS_DO_EDITOR, RAMOS_DOS_MODELOS, type ModeloDoEditor, type RamoDoModelo } from "@/lib/banner-editor/modelos"; import { EditorDeBanner } from "@/components/pagina-inicial/editor-de-banner/editor-de-banner"; import { Miniatura } from "@/components/pagina-inicial/editor-de-banner/paineis"; /* KtaloguDesign: a tela inicial do editor de artes, no jeito do Canva. De cima para baixo: - "O que vamos criar hoje?", a busca (tamanhos, modelos e designs) e os atalhos: "Criar um design" e os grupos de tamanho abrem a janela de tamanhos (como o "Criar um design" do Canva: grupos à esquerda, cada tamanho num cartão desenhado; clicar abre o editor em branco); - "Continue criando": os designs da pessoa, os mais recentes primeiro; - "Explorar categorias de modelos": um cartão por tipo de modelo (post, carrossel, story, banner da loja, caneca) com a cara de um modelo de verdade; embaixo, SÓ os modelos do tipo escolhido, no tamanho dele, com a cor, o logo e a foto de um produto da loja. Cada modelo é de um uso (modelos.ts): nada de modelo de post encaixado numa caneca. Junto, os modelos da COMUNIDADE (artes que outros assinantes publicaram e o dono da plataforma aprovou no Owner), com o nome e o avatar de quem fez; - clicar num modelo abre a prévia (como a do Canva): quem fez, o tipo, a categoria e o tamanho; "Usar este modelo" abre a cópia no editor; - o menu de cada design tem "Publicar na comunidade" (vai para análise). */ type Aberta = { largura: number; altura: number; formato: string | null; arte: ResumoDaArte | null; modelo: string | null }; type GrupoDaJanela = GrupoDoFormato | "populares" | "personalizado"; /* Os grupos de tamanho (as bolinhas do topo e a lista da janela "Criar um design"). */ const GRUPOS_DA_JANELA: Array<{ chave: GrupoDaJanela; nome: string; cor: string; Icone: typeof Store }> = [ { chave: "populares", nome: "Populares", cor: "#7C3AED", Icone: Sparkles }, { chave: "redes", nome: "Redes sociais", cor: "#EC4899", Icone: Heart }, { chave: "loja", nome: "Loja", cor: "#F97316", Icone: Store }, { chave: "anuncios", nome: "Anúncios e vídeo", cor: "#0EA5E9", Icone: Clapperboard }, { chave: "impressao", nome: "Impressão", cor: "#10B981", Icone: Printer }, { chave: "personalizado", nome: "Tamanho personalizado", cor: "#1F2937", Icone: Ruler }, ]; const POPULARES = ["post-retrato", "story", "post", "banner-loja", "caneca", "capa-facebook", "youtube", "a4"]; /* A prévia de um modelo: da casa (montado com a cara da loja) ou da comunidade. */ type Previa = { tipo: TipoDeModelo; casa?: { modelo: ModeloDoEditor; doc: DocumentoDoBanner }; comunidade?: ModeloDaComunidade }; type Publicacao = { arte: ResumoDaArte; nome: string; descricao: string; ramo: RamoDoModelo | null; aceite: boolean; enviando: boolean; erro: string }; /* A aprovação do cliente (a prova mais nova do design), no cartão da galeria. */ const SITUACAO_DA_APROVACAO: Record = { aguardando: { rotulo: "Esperando o cliente", classe: "bg-[#F1EFF6] text-[#4B4760]" }, aprovada: { rotulo: "Aprovada pelo cliente", classe: "bg-[#DCFCE7] text-[#166534]" }, alteracao: { rotulo: "Cliente pediu alteração", classe: "bg-[#FFF7E6] text-[#8A5300]" }, }; const SITUACAO_DO_ENVIO: Record = { pendente: { rotulo: "Em análise", classe: "bg-[#FEF3C7] text-[#92400E]" }, aprovado: { rotulo: "Na comunidade", classe: "bg-[#D1FAE5] text-[#065F46]" }, recusado: { rotulo: "Recusado", classe: "bg-[#FFE4E6] text-[#9F1239]" }, }; /* O avatar de quem fez o modelo (a foto ou a inicial); o da casa é a marca da Ktalogu. */ function AvatarDoAutor({ nome, src, tamanho = 32, casa = false }: { nome: string; src?: string | null; tamanho?: number; casa?: boolean }) { if (casa) { return ( ); } if (src) { /* eslint-disable-next-line @next/next/no-img-element */ return ; } return ( {nome.trim().slice(0, 1).toUpperCase() || "?"} ); } /* A marca da rede no cartão do tamanho (os logos oficiais do editor). */ const REDE_DO_FORMATO: Record = { post: "instagram-cor", "post-retrato": "instagram-cor", story: "instagram-cor", destaque: "instagram-cor", "capa-facebook": "facebook-cor", youtube: "youtube-cor" }; const quando = new Intl.DateTimeFormat("pt-BR", { day: "2-digit", month: "short" }); const semAcento = (t: string) => t.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase(); /** A miniatura que cabe na caixa (mede a caixa e encolhe a arte até caber, centrada). */ /* O selo no canto do cartão do modelo: carrossel (com as páginas) ou reels. */ function SeloDoModelo({ modelo }: { modelo: ModeloDoEditor }) { if (modelo.feitoPara === "caneca") { return ( Caneca ); } if (modelo.feitoPara !== "carrossel" && modelo.feitoPara !== "story") return null; return ( {modelo.feitoPara === "carrossel" ? : } {modelo.feitoPara === "carrossel" ? `Carrossel · ${modelo.paginas ?? 2} páginas` : "Reels"} ); } function ArteQueCabe({ doc, folga = 0 }: { doc: DocumentoDoBanner; folga?: number }) { const caixa = useRef(null); const [medida, setMedida] = useState<{ w: number; h: number } | null>(null); useEffect(() => { const el = caixa.current; if (!el) return; const medir = () => setMedida({ w: el.clientWidth, h: el.clientHeight }); medir(); const observador = new ResizeObserver(medir); observador.observe(el); return () => observador.disconnect(); }, []); const largura = medida ? Math.max(10, Math.min(medida.w - folga * 2, ((medida.h - folga * 2) * doc.largura) / doc.altura)) : 0; return (
{largura ? (
) : null}
); } /* A arte só é montada quando chega perto da tela (o que está longe fica de fora). */ function QuandoAparecer({ children }: { children: React.ReactNode }) { const caixa = useRef(null); const [visto, setVisto] = useState(false); useEffect(() => { const el = caixa.current; if (!el || visto) return; const observador = new IntersectionObserver((itens) => itens.some((i) => i.isIntersecting) && setVisto(true), { rootMargin: "600px" }); observador.observe(el); return () => observador.disconnect(); }, [visto]); return (
{visto ? children : null}
); } /* * A foto pronta do modelo da casa; se o modelo mudou depois da foto, ele é * montado quando aparece. Com `folheia` (o cartão da galeria) e mais de uma * página, o mouse em cima vai passando as páginas, como no Canva; as outras * fotos só são pedidas na primeira vez que o mouse passa. */ function FotoDoModelo({ tipo, modelo, doc, className = "", folheia = false }: { tipo: TipoDeModelo; modelo: ModeloDoEditor; doc: DocumentoDoBanner; className?: string; folheia?: boolean }) { const foto = miniaturaDoModelo(tipo.chave, modelo.chave, doc); const fotos = foto ? fotosDasPaginas(foto) : []; const [passando, setPassando] = useState(false); const [atual, setAtual] = useState(0); /* Modelo animado: o vídeo toca sozinho (as páginas já passam nele). */ const video = foto?.video && foto.video.marca === foto.marca ? foto.video : null; const varias = folheia && fotos.length > 1 && !video; useEffect(() => { if (!passando || !varias) return; const relogio = setInterval(() => setAtual((i) => (i + 1) % fotos.length), 900); return () => clearInterval(relogio); }, [passando, varias, fotos.length]); if (foto && video) return ; if (foto) { return (
varias && setPassando(true)} onMouseLeave={() => { setPassando(false); setAtual(0); }} data-paginas-do-modelo={fotos.length} > {/* eslint-disable-next-line @next/next/no-img-element */} {modelo.nome} {passando ? fotos.slice(1).map((q, i) => ( /* eslint-disable-next-line @next/next/no-img-element */ )) : null} {varias ? ( {fotos.map((q, i) => ( ))} ) : null}
); } return (
); } /* * A prévia de um modelo com várias páginas, como a do Canva: passa sozinha a * cada 3 s (para quando a pessoa mexe), com as setas, as bolinhas, o "2 / 5" * e as miniaturas das páginas embaixo. Setas do teclado também passam. */ function GaleriaDaPrevia({ fotos, nome }: { fotos: FotoPronta[]; nome: string }) { const [atual, setAtual] = useState(0); const [parado, setParado] = useState(false); const total = fotos.length; useEffect(() => { if (parado || total < 2) return; const relogio = setInterval(() => setAtual((i) => (i + 1) % total), 3000); return () => clearInterval(relogio); }, [parado, total]); useEffect(() => { if (total < 2) return; const tecla = (e: KeyboardEvent) => { if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return; setParado(true); setAtual((i) => (i + (e.key === "ArrowRight" ? 1 : total - 1)) % total); }; window.addEventListener("keydown", tecla); return () => window.removeEventListener("keydown", tecla); }, [total]); const ir = (i: number) => { setParado(true); setAtual(((i % total) + total) % total); }; const deitada = fotos[0].largura / fotos[0].altura > 1.6; return (
setParado(true)}> {fotos.map((q, i) => ( /* eslint-disable-next-line @next/next/no-img-element */ {i 1 ? "max-h-[50vh]" : "max-h-[62vh]"} ${i === atual ? "opacity-100" : "pointer-events-none opacity-0"}`} /> ))} {total > 1 ? ( <> {atual + 1} / {total} ) : null}
{total > 1 ? (
{fotos.map((q, i) => ( ))}
) : null}
); } /* * A foto do design (tirada no servidor a cada versão). Sem foto ainda, pede * ao servidor e mostra o esboço do tamanho enquanto isso; se o servidor não * conseguir, monta a arte (só essa) quando ela aparece. Nova versão = outra * chave no cartão (o estado começa de novo). */ function FotoDoDesign({ arte }: { arte: ArteNaGaleria }) { const [src, setSrc] = useState(() => enderecoDaMiniatura(arte)); const [estado, setEstado] = useState<"carregando" | "pronta" | "tirando" | "montar">("carregando"); const [doc, setDoc] = useState(null); const semFoto = () => { if (estado === "tirando" || estado === "montar") return; setEstado("tirando"); void pedirMiniatura(arte).then((nova) => { if (nova) { setSrc(`${nova}?v=${Date.now()}`); setEstado("carregando"); return; } setEstado("montar"); void abrirArte(arte.id) .then((a) => a?.documento?.pecas && setDoc(a.documento)) .catch(() => undefined); }); }; if (estado === "montar") return doc ? : ; return (
{estado !== "pronta" ? : null} {estado !== "tirando" ? ( /* eslint-disable-next-line @next/next/no-img-element */ {arte.nome} setEstado("pronta")} onError={semFoto} data-foto-do-design className={`max-h-full max-w-full rounded-[5px] object-contain shadow-[0_1px_2px_rgba(16,12,32,0.08),0_8px_24px_-10px_rgba(16,12,32,0.28)] ${estado === "pronta" ? "" : "absolute opacity-0"}`} /> ) : null}
); } /* O retângulo no tamanho da arte, enquanto a foto não chega. */ function EsbocoDoTamanho({ largura, altura, pulsando = false }: { largura: number; altura: number; pulsando?: boolean }) { const r = largura / altura; return = 4 / 3 ? { width: "100%", aspectRatio: `${r}` } : { height: "100%", aspectRatio: `${r}` }} />; } function DesenhoDoTamanho({ largura, altura, cor = "currentColor" }: { largura: number; altura: number; cor?: string }) { const lado = 18; const f = lado / Math.max(largura, altura); return ( ); } /* O que a pessoa já fez na comunidade (votos e favoritos); `ligado` = a migration 228 está no banco. */ type EstadoSocial = { ligado: boolean; votos: Map; favoritos: Set }; const SOCIAL_VAZIO: EstadoSocial = { ligado: false, votos: new Map(), favoritos: new Set() }; const numeroCurto = new Intl.NumberFormat("pt-BR", { notation: "compact", maximumFractionDigits: 1 }); /* Gostei, não gostei e o coração (favoritos) de um modelo, com os números de todo mundo. */ function AcoesDoModelo({ chave, social, aoMudar }: { chave: string; social: EstadoSocial; aoMudar: (s: EstadoSocial) => void }) { const [numeros, setNumeros] = useState(CONTAGEM_VAZIA); const [aviso, setAviso] = useState(""); useEffect(() => { let vivo = true; void contagemDo(chave).then((c) => vivo && setNumeros(c)); return () => { vivo = false; }; }, [chave]); const voto = social.votos.get(chave) ?? 0; const salvo = social.favoritos.has(chave); const mudarVoto = async (valor: 1 | -1) => { const novo = voto === valor ? 0 : valor; const antes = { social, numeros }; const votos = new Map(social.votos); if (novo) votos.set(chave, novo); else votos.delete(chave); aoMudar({ ...social, votos }); setNumeros((n) => ({ ...n, gostei: n.gostei - (voto === 1 ? 1 : 0) + (novo === 1 ? 1 : 0), nao_gostei: n.nao_gostei - (voto === -1 ? 1 : 0) + (novo === -1 ? 1 : 0) })); try { await votar(chave, novo); } catch (erro) { aoMudar(antes.social); setNumeros(antes.numeros); setAviso(erro instanceof Error ? erro.message : "Não deu agora."); } }; const mudarFavorito = async () => { const antes = { social, numeros }; const favoritos = new Set(social.favoritos); if (salvo) favoritos.delete(chave); else favoritos.add(chave); aoMudar({ ...social, favoritos }); setNumeros((n) => ({ ...n, salvos: Math.max(0, n.salvos + (salvo ? -1 : 1)) })); try { await favoritar(chave, !salvo); } catch (erro) { aoMudar(antes.social); setNumeros(antes.numeros); setAviso(erro instanceof Error ? erro.message : "Não deu agora."); } }; const BOTAO = "flex h-10 items-center gap-1.5 rounded-full px-3.5 text-[13px] font-bold transition"; return (
{aviso ?

{aviso}

: null}
); } /* Seguir quem publica: o sino avisa dos modelos novos dela. Mostra os seguidores. */ function BotaoSeguir({ autor, grande = false, aoMudar }: { autor: string; grande?: boolean; aoMudar?: (r: ResumoDoAutor) => void }) { const [resumo, setResumo] = useState(null); const [mexendo, setMexendo] = useState(false); useEffect(() => { let vivo = true; void resumoDoAutor(autor).then((r) => { if (!vivo || !r) return; setResumo(r); aoMudar?.(r); }); return () => { vivo = false; }; /* aoMudar muda a cada desenho do pai; o que importa é o autor. */ // eslint-disable-next-line react-hooks/exhaustive-deps }, [autor]); if (!resumo) return null; const alternar = async () => { setMexendo(true); const novo = { ...resumo, sigo: !resumo.sigo, seguidores: Math.max(0, resumo.seguidores + (resumo.sigo ? -1 : 1)) }; setResumo(novo); aoMudar?.(novo); try { await seguir(autor, novo.sigo); } catch { setResumo(resumo); aoMudar?.(resumo); } finally { setMexendo(false); } }; return ( ); } /* * O perfil de quem publica na comunidade: foto, nome, loja, os números * (modelos, seguidores, curtidas, usos), o botão de seguir e todos os modelos * aprovados dela, em galeria. Clicar num modelo abre a prévia dele. */ function PerfilDoAutor({ autor, modelos, podeSeguir, aoFechar, aoAbrir }: { autor: { id: string; nome: string; avatar: string | null; loja: string | null }; modelos: ModeloDaComunidade[]; podeSeguir: boolean; aoFechar: () => void; aoAbrir: (c: ModeloDaComunidade) => void }) { const [resumo, setResumo] = useState(null); useEffect(() => { let vivo = true; void resumoDoAutor(autor.id).then((r) => vivo && r && setResumo(r)); return () => { vivo = false; }; }, [autor.id]); const numeros: Array<[string, number]> = [ ["modelos", resumo?.modelos ?? modelos.length], ["seguidores", resumo?.seguidores ?? 0], ["curtidas", resumo?.gostei ?? 0], ["usos", resumo?.usos ?? modelos.reduce((t, m) => t + (m.usos || 0), 0)], ]; return (
e.target === e.currentTarget && aoFechar()} role="dialog" aria-modal="true" aria-label={`Perfil de ${autor.nome}`} data-perfil-do-autor>

Criador da comunidade

{autor.nome}

{autor.loja && autor.loja !== autor.nome ?

{autor.loja}

: null}
{podeSeguir ? : null}
{numeros.map(([rotulo, valor]) => (

{numeroCurto.format(valor)}

{rotulo}

))}

Modelos publicados

{modelos.length ? (
{modelos.map((c) => ( ))}
) : (

Ainda não tem modelos na galeria.

)}
); } export function GaleriaDeArtes() { const [dono, setDono] = useState(null); const [artes, setArtes] = useState(null); const [indisponivel, setIndisponivel] = useState(false); const [falha, setFalha] = useState(""); const [aberta, setAberta] = useState(null); /* A janela "Criar um design" (aberta no grupo escolhido). */ const [janela, setJanela] = useState(null); const [tipo, setTipo] = useState("post"); const [livre, setLivre] = useState({ largura: 1080, altura: 1080 }); const [unidade, setUnidade] = useState<"px" | "cm">("px"); const [busca, setBusca] = useState(""); const [buscaDaJanela, setBuscaDaJanela] = useState(""); /* O ramo dos modelos (sublimação, gráfica, personalizados): "todos" mostra tudo. */ const [ramo, setRamo] = useState("todos"); const [todosOsDesigns, setTodosOsDesigns] = useState(false); const [renomeando, setRenomeando] = useState<{ id: string; nome: string } | null>(null); const [menu, setMenu] = useState(null); const [abrindo, setAbrindo] = useState(null); const [confirmacao, setConfirmacao] = useState(null); /* A comunidade: os modelos aprovados e os envios desta empresa. */ const [comunidade, setComunidade] = useState([]); const [envios, setEnvios] = useState([]); const [previa, setPrevia] = useState(null); /* O lado social: votos e favoritos da pessoa, o filtro "Seus favoritos" e o perfil de um autor aberto. */ const [social, setSocial] = useState(SOCIAL_VAZIO); const [soFavoritos, setSoFavoritos] = useState(false); /* Filtros por etiqueta (ocasião e cor): valem em todos os tipos, como a busca. */ const [ocasiao, setOcasiao] = useState(null); const [cor, setCor] = useState(null); const [perfil, setPerfil] = useState<{ id: string; nome: string; avatar: string | null; loja: string | null } | null>(null); const [usando, setUsando] = useState(false); const [publicacao, setPublicacao] = useState(null); const [recado, setRecado] = useState(""); /* O link público do design (o "Compartilhar"): copiado e mostrado num aviso. */ const [linkDaArte, setLinkDaArte] = useState<{ nome: string; link: string } | null>(null); /* As fontes dos modelos (as miniaturas usam as mesmas do editor). */ useEffect(() => garantirFontes(CHAVES_DAS_FONTES_DE_BASE), []); /* A situação da aprovação de cada design (a prova mais nova): aprovado, alteração pedida ou esperando o cliente. */ const [situacoes, setSituacoes] = useState>({}); const carregar = useCallback(async (quem: string) => { try { const lista = await listarArtesDaGaleria(quem, 200); setArtes(lista); situacaoDasProvas(lista.map((a) => a.id)) .then(setSituacoes) .catch(() => undefined); setIndisponivel(false); } catch (erro) { if (erro instanceof GaleriaIndisponivel) setIndisponivel(true); else setFalha(erro instanceof Error ? erro.message : "Não deu para abrir os seus designs."); setArtes([]); } }, []); const carregarComunidade = useCallback(async (quem: string) => { const [aprovados, daEmpresa] = await Promise.all([modelosAprovados(), enviosDaEmpresa(quem)]); setComunidade(aprovados); setEnvios(daEmpresa); }, []); useEffect(() => { (async () => { const supabase = getSupabaseClient(); const { data: { user }, } = await supabase.auth.getUser(); if (!user) return; const ctx = await getCompanyContext(supabase, user); const quem = resolveCompanyPublicProfileId(ctx, user.id); setDono(quem); void carregarComunidade(quem); void meuEstado().then(setSocial); await carregar(quem); })(); }, [carregar, carregarComunidade]); /* O link do sino (?modelo=) abre a prévia do modelo; ?autor= abre o perfil de quem publica. Uma vez só. */ const linkUsado = useRef(false); useEffect(() => { if (linkUsado.current || !comunidade.length || typeof window === "undefined") return; const busca_ = new URLSearchParams(window.location.search); const id = busca_.get("modelo"); const autor = busca_.get("autor"); if (!id && !autor) return; linkUsado.current = true; const c = id ? comunidade.find((m) => m.id === id) : null; if (c) setPrevia({ tipo: TIPOS_DE_MODELO.find((t) => t.chave === c.tipo) || TIPOS_DE_MODELO[0], comunidade: c }); const deQuem = autor ? comunidade.find((m) => m.user_id === autor) : null; if (deQuem) setPerfil({ id: deQuem.user_id, nome: deQuem.autor_nome, avatar: deQuem.autor_avatar, loja: deQuem.autor_loja }); window.history.replaceState(null, "", window.location.pathname); }, [comunidade]); /* Esc fecha a janela de tamanhos, a prévia e a publicação. */ useEffect(() => { if (!janela && !previa && !publicacao && !perfil) return; const tecla = (e: KeyboardEvent) => { if (e.key !== "Escape") return; if (perfil) { setPerfil(null); return; } setJanela(null); setPrevia(null); setPublicacao((p) => (p?.enviando ? p : null)); }; window.addEventListener("keydown", tecla); return () => window.removeEventListener("keydown", tecla); }, [janela, previa, publicacao, perfil]); const termo = semAcento(busca.trim()); const tipoAtual = TIPOS_DE_MODELO.find((t) => t.chave === tipo) || TIPOS_DE_MODELO[0]; /* A capa de cada categoria: o primeiro modelo dela, de verdade. */ const capas = useMemo(() => { return Object.fromEntries( TIPOS_DE_MODELO.map((t) => { const lista = MODELOS_DO_EDITOR.filter(t.filtro); return [t.chave, { quantos: lista.length + comunidade.filter((c) => c.tipo === t.chave).length, modelo: lista[0] ?? null, doc: lista[0] ? lista[0].montar(pedidoNeutro(t)) : null }]; }), ) as Record; }, [comunidade]); /* Os da comunidade: os do tipo escolhido (com busca, de todos), também pelo nome de quem fez. */ const daComunidade = useMemo( () => comunidade .filter((c) => { if (soFavoritos) return social.favoritos.has(c.id); /* Da comunidade não se mede a cor (só a ocasião, pelo nome e a descrição). */ if (cor) return false; const texto = textoDoModelo(`${c.nome} ${c.autor_nome} ${c.autor_loja || ""} ${NOMES_DOS_TIPOS[c.tipo]}`, c.descricao || "", null); if (ocasiao && !ocasioesDoTexto(texto).includes(ocasiao)) return false; if (!termo && !ocasiao && c.tipo !== tipoAtual.chave) return false; if (ramo !== "todos" && c.ramo !== ramo) return false; return !termo || texto.includes(termo); }) .map((c) => ({ c, tipo: TIPOS_DE_MODELO.find((t) => t.chave === c.tipo) || TIPOS_DE_MODELO[0] })), [comunidade, termo, tipoAtual, ramo, soFavoritos, social.favoritos, ocasiao, cor], ); /* A situação do envio de cada design desta empresa (o mais recente). */ const envioDaArte = useMemo(() => { const mapa = new Map(); for (const e of envios) if (e.arte_id && !mapa.has(e.arte_id)) mapa.set(e.arte_id, e); return mapa; }, [envios]); /* Os modelos: os do tipo escolhido; com busca, os de todos os tipos que batem (cada um no tamanho do tipo dele). Na galeria vão neutros (a foto pronta); a prévia monta com a cara da loja. */ /* * Todos os modelos da casa, uma vez, com as etiquetas: o texto inteiro (para * a busca achar "natal" dentro do modelo), as ocasiões e as cores da foto. */ const catalogo = useMemo( () => TIPOS_DE_MODELO.flatMap((t) => MODELOS_DO_EDITOR.filter(t.filtro).map((m) => { const doc = m.montar(pedidoNeutro(t)); const texto = textoDoModelo(m.nome, m.descricao, doc); const ocasioes = ocasioesDoTexto(texto); const cores = miniaturaDoModelo(t.chave, m.chave, doc)?.cores ?? []; const rotulos = semAcento(`${t.nome} ${m.ramo ? RAMOS_DOS_MODELOS[m.ramo] : ""} ${ocasioes.map((o) => OCASIOES.find((x) => x.chave === o)?.nome).join(" ")} ${cores.map((c) => CORES_NOMEADAS.find((x) => x.chave === c)?.nome).join(" ")}`); return { modelo: m, tipo: t, doc, busca: `${texto} ${rotulos}`, ocasioes, cores }; }), ), [], ); /* Quantos modelos cada etiqueta tem (os chips só mostram as que existem). */ const porEtiqueta = useMemo(() => { const ocasioes = new Map(); const cores = new Map(); for (const item of catalogo) { item.ocasioes.forEach((o) => ocasioes.set(o, (ocasioes.get(o) || 0) + 1)); item.cores.forEach((c) => cores.set(c, (cores.get(c) || 0) + 1)); } return { ocasioes, cores }; }, [catalogo]); const filtrando = Boolean(termo || ocasiao || cor); const modelos = useMemo( () => catalogo.filter((item) => { if (soFavoritos) return social.favoritos.has(chaveDaCasa(item.modelo.chave)); if (!filtrando && item.tipo.chave !== tipoAtual.chave) return false; if (ramo !== "todos" && item.modelo.ramo !== ramo) return false; if (ocasiao && !item.ocasioes.includes(ocasiao)) return false; if (cor && !item.cores.includes(cor)) return false; return !termo || item.busca.includes(termo); }), [catalogo, termo, tipoAtual, ramo, soFavoritos, social.favoritos, ocasiao, cor, filtrando], ); const misturado = filtrando || soFavoritos; const nomeDoFiltro = [ocasiao ? OCASIOES.find((o) => o.chave === ocasiao)?.nome : "", cor ? `em ${CORES_NOMEADAS.find((c) => c.chave === cor)?.nome.toLowerCase()}` : ""].filter(Boolean).join(" "); const designs = useMemo(() => (artes || []).filter((a) => !termo || semAcento(a.nome).includes(termo)), [artes, termo]); const designsVisiveis = todosOsDesigns || termo ? designs : designs.slice(0, 14); /* Os tamanhos da janela "Criar um design". */ const termoDaJanela = semAcento(buscaDaJanela.trim()); const tamanhosDaJanela = FORMATOS_DA_ARTE.filter((f) => termoDaJanela ? semAcento(`${f.nome} ${f.detalhe}`).includes(termoDaJanela) : janela === "populares" ? POPULARES.includes(f.chave) : f.grupo === janela, ).sort((a, b) => (janela === "populares" && !termoDaJanela ? POPULARES.indexOf(a.chave) - POPULARES.indexOf(b.chave) : 0)); const tamanhosDaBusca = termo ? FORMATOS_DA_ARTE.filter((f) => semAcento(`${f.nome} ${f.detalhe}`).includes(termo)) : []; const livreEmPx = unidade === "px" ? livre : { largura: pxDe(livre.largura * 10, 300), altura: pxDe(livre.altura * 10, 300) }; const livreValido = livreEmPx.largura >= MINIMO_DO_LADO && livreEmPx.altura >= MINIMO_DO_LADO && livreEmPx.largura <= LIMITE_DO_LADO && livreEmPx.altura <= LIMITE_DO_LADO; const criarEmBranco = (f: FormatoDaArte) => { setJanela(null); setAberta({ largura: f.largura, altura: f.altura, formato: f.chave, arte: null, modelo: "branco" }); }; const criarPersonalizado = () => { if (!livreValido) return; setJanela(null); setAberta({ largura: livreEmPx.largura, altura: livreEmPx.altura, formato: null, arte: null, modelo: "branco" }); }; const abrirModelo = (t: TipoDeModelo, chave: string) => { const f = formatoDaChave(t.formato)!; setAberta({ largura: f.largura, altura: f.altura, formato: f.chave, arte: null, modelo: chave }); }; /* "Usar este modelo": o da casa abre montado; o da comunidade vira uma cópia nos designs da empresa. */ const usarPrevia = async () => { if (!previa) return; if (previa.casa) { abrirModelo(previa.tipo, previa.casa.modelo.chave); setPrevia(null); return; } const modelo = previa.comunidade; if (!modelo || !dono) return; setUsando(true); try { const documento = await documentoDoModelo(modelo.id); if (!documento) throw new Error("Esse modelo não está mais disponível."); const id = await criarArte(dono, { nome: modelo.nome, largura: modelo.largura, altura: modelo.altura, formato: modelo.formato, documento }); void contarUso(modelo.id); const arte = await abrirArte(id); if (!arte) throw new Error("Não deu para abrir a cópia do modelo."); setPrevia(null); setAberta({ largura: arte.largura, altura: arte.altura, formato: arte.formato, arte, modelo: null }); } catch (erro) { setFalha(erro instanceof Error ? erro.message : "Não deu para usar esse modelo agora."); setPrevia(null); } finally { setUsando(false); } }; const publicar = async () => { if (!publicacao || publicacao.enviando || !dono) return; setPublicacao({ ...publicacao, enviando: true, erro: "" }); try { await enviarParaComunidade({ arteId: publicacao.arte.id, nome: publicacao.nome, descricao: publicacao.descricao, ramo: publicacao.ramo }); setPublicacao(null); setRecado("Enviado para análise! Assim que a equipe Ktalogu aprovar, o modelo entra na galeria com o seu nome."); void carregarComunidade(dono); } catch (erro) { setPublicacao((p) => (p ? { ...p, enviando: false, erro: erro instanceof Error ? erro.message : "Não deu para enviar agora." } : p)); } }; const retirar = (envio: ModeloDaComunidade) => { setMenu(null); setConfirmacao({ titulo: `Retirar "${envio.nome}" da comunidade?`, texto: envio.status === "aprovado" ? "O modelo sai da galeria das outras empresas. As cópias que elas já fizeram continuam com elas. O seu design continua aqui." : "O envio sai da fila de análise. O seu design continua aqui.", confirmar: "Retirar", tom: "perigo", aoConfirmar: async () => { setConfirmacao(null); try { await retirarEnvio(envio.id); if (dono) await carregarComunidade(dono); } catch (erro) { setFalha(erro instanceof Error ? erro.message : "Não deu para retirar."); } }, }); }; const compartilhar = async (arte: ArteNaGaleria) => { setMenu(null); try { const r = await fetch("/api/artes/link-publico", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ id: arte.id }) }); const d = (await r.json().catch(() => ({}))) as { link?: string; error?: string }; if (!r.ok || !d.link) throw new Error(d.error || "Não deu para fazer o link agora."); await navigator.clipboard?.writeText(d.link).catch(() => undefined); setLinkDaArte({ nome: arte.nome, link: d.link }); } catch (erro) { setFalha(erro instanceof Error ? erro.message : "Não deu para fazer o link agora."); } }; /* * O "Criar no KtaloguDesign" do item do orçamento (manda * ?criar=1&nome=Orçamento #12 · Caneca&orcamento=&item=): abre a * janela de tamanhos, e a arte nova já nasce com esse nome e ligada ao item * (o editor mostra "Enviar para o orçamento"). Uma vez só. */ const [nomeDaNova, setNomeDaNova] = useState(null); const [vinculoDaNova, setVinculoDaNova] = useState(null); useEffect(() => { const busca_ = new URLSearchParams(window.location.search); if (busca_.get("criar") !== "1") return; const nome = (busca_.get("nome") || "").trim().slice(0, 100); const uuid = /^[0-9a-f-]{36}$/i; const orcamento = busca_.get("orcamento") || ""; const item = busca_.get("item") || ""; setNomeDaNova(nome || null); setVinculoDaNova(uuid.test(orcamento) ? { orcamento, item: uuid.test(item) ? item : null } : null); setJanela("populares"); window.history.replaceState(null, "", window.location.pathname); }, []); /* O link do editor que o assistente devolve (?arte=) abre o design direto. Uma vez só. */ const arteDoLink = useRef(false); useEffect(() => { if (arteDoLink.current || !dono || typeof window === "undefined") return; const id = new URLSearchParams(window.location.search).get("arte"); if (!id || !/^[0-9a-f-]{36}$/i.test(id)) return; arteDoLink.current = true; window.history.replaceState(null, "", window.location.pathname); setAbrindo(id); abrirArte(id) .then((fresca) => { if (!fresca) throw new Error("Esse design não foi encontrado nesta empresa."); setAberta({ largura: fresca.largura, altura: fresca.altura, formato: fresca.formato, arte: fresca, modelo: null }); }) .catch((erro) => setFalha(erro instanceof Error ? erro.message : "Não deu para abrir esse design.")) .finally(() => setAbrindo(null)); }, [dono]); /* Abre sempre a versão do banco agora (a lista pode estar atrás da última gravação). */ const abrirDoBanco = async (arte: ArteNaGaleria) => { setAbrindo(arte.id); try { const fresca = await abrirArte(arte.id); if (!fresca) throw new Error("Esse design não foi encontrado."); setAberta({ largura: fresca.largura, altura: fresca.altura, formato: fresca.formato, arte: fresca, modelo: null }); } catch (erro) { setFalha(erro instanceof Error ? erro.message : "Não deu para abrir esse design."); } finally { setAbrindo(null); } }; /* "Publicar na comunidade": a categoria sai do documento, que vem agora (a lista não traz). */ const abrirPublicacao = async (arte: ArteNaGaleria) => { setMenu(null); try { const completa = await abrirArte(arte.id); if (!completa) throw new Error("Esse design não foi encontrado."); setPublicacao({ arte: completa, nome: arte.nome.slice(0, 80), descricao: "", ramo: null, aceite: false, enviando: false, erro: "" }); } catch (erro) { setFalha(erro instanceof Error ? erro.message : "Não deu para abrir esse design."); } }; const renomear = async () => { if (!renomeando) return; const novo = renomeando.nome.trim() || "Design sem nome"; setRenomeando(null); try { await salvarArte(renomeando.id, { nome: novo }); setArtes((lista) => (lista || []).map((a) => (a.id === renomeando.id ? { ...a, nome: novo } : a))); } catch (erro) { setFalha(erro instanceof Error ? erro.message : "Não deu para renomear."); } }; const pedirParaApagar = (arte: ArteNaGaleria) => { setMenu(null); setConfirmacao({ titulo: `Apagar "${arte.nome}"?`, texto: "O design sai daqui. Banners que já foram para a loja continuam lá.", confirmar: "Apagar design", tom: "perigo", aoConfirmar: async () => { setConfirmacao(null); try { await apagarArte(arte.id); setArtes((lista) => (lista || []).filter((a) => a.id !== arte.id)); } catch (erro) { setFalha(erro instanceof Error ? erro.message : "Não deu para apagar."); } }, }); }; const duplicar = async (arte: ArteNaGaleria) => { setMenu(null); if (!dono) return; try { const completa = await abrirArte(arte.id); if (!completa) throw new Error("Esse design não foi encontrado."); await duplicarArte(dono, completa); await carregar(dono); } catch (erro) { setFalha(erro instanceof Error ? erro.message : "Não deu para duplicar."); } }; const abrirJanela = (grupo: GrupoDaJanela) => { setBuscaDaJanela(""); setJanela(grupo); }; const proporcaoDoTipo = (t: TipoDeModelo) => { const f = formatoDaChave(t.formato)!; return f.largura / f.altura; }; const colunas = (proporcao: number) => (proporcao >= 2.4 ? 420 : proporcao >= 1.9 ? 360 : proporcao >= 0.95 ? 230 : 200); const formatoDoTipo = formatoDaChave(tipoAtual.formato)!; return (
{/* ------------------------------------------------- a pergunta */}

KtaloguDesign

O que vamos criar hoje?

{/* Os atalhos (como os do Canva): criar e os grupos de tamanho. */}
{GRUPOS_DA_JANELA.filter((g) => g.chave !== "populares").map(({ chave, nome, cor, Icone }) => ( ))}
{indisponivel ? (
Dá para criar e baixar normalmente. Eles passam a aparecer aqui assim que a galeria for ligada.
) : null} {falha ? (
setFalha("")}> {falha}
) : null} {linkDaArte ? (
setLinkDaArte(null)}> Quem abrir{" "} {linkDaArte.link} {" "} vê “{linkDaArte.nome}”, toca o vídeo e baixa em PNG, JPG, PDF ou MP4, sem precisar de conta. Editar, só aqui no KtaloguDesign.
) : null} {recado ? (
setRecado("")}> {recado}
) : null} {/* ------------------------------------------------- tamanhos que a busca achou */} {tamanhosDaBusca.length ? (

Tamanhos

{tamanhosDaBusca.map((f) => ( criarEmBranco(f)} /> ))}
) : null} {/* ------------------------------------------------- continue criando */}

{termo ? "Seus designs" : "Continue criando"} {artes?.length ? {artes.length} : null}

{artes === null ? (
Abrindo os seus designs…
) : !designs.length ? (

{busca ? "Nenhum design seu com esse nome." : "Os designs que você criar ficam aqui, guardados sozinhos a cada mudança."}

) : ( <>
{designsVisiveis.map((arte) => (
{renomeando?.id === arte.id ? ( setRenomeando({ id: arte.id, nome: e.target.value.slice(0, 120) })} onBlur={() => void renomear()} onKeyDown={(e) => { if (e.key === "Enter") void renomear(); if (e.key === "Escape") setRenomeando(null); }} className="h-7 w-full rounded-md border border-[#7C3AED] px-1.5 text-[13px] font-bold outline-none" /> ) : (

{arte.nome}

)} {situacoes[arte.id] ? ( {SITUACAO_DA_APROVACAO[situacoes[arte.id]].rotulo} ) : null}

{formatoDaChave(arte.formato)?.nome || formatoDoTamanho(arte.largura, arte.altura)?.nome || `${arte.largura} × ${arte.altura}`} · {quando.format(new Date(arte.updated_at))}

{menu === arte.id ? ( <> {envioDaArte.get(arte.id) && envioDaArte.get(arte.id)!.status !== "recusado" ? ( ) : ( )} {envioDaArte.get(arte.id)?.status === "recusado" && envioDaArte.get(arte.id)!.motivo ? (

Recusado: {envioDaArte.get(arte.id)!.motivo}

) : null}
) : null}
))}
{!termo && designs.length > 14 ? (
) : null} )} {/* ------------------------------------------------- categorias de modelos */} {!termo ? (

Explorar categorias de modelos

{TIPOS_DE_MODELO.map((t) => { const ativo = t.chave === tipoAtual.chave; const capa = capas[t.chave]; return ( ); })}
) : null} {/* ------------------------------------------------- os modelos */}

{soFavoritos ? "Seus favoritos" : nomeDoFiltro && !termo ? `Modelos ${ocasiao ? "de " : ""}${nomeDoFiltro}` : termo ? "Modelos" : `Modelos de ${tipoAtual.nome}`} {soFavoritos ? `${modelos.length + daComunidade.length} salvos` : filtrando ? `${modelos.length + daComunidade.length} ${termo ? "que batem com a busca" : "em todos os formatos"}` : `${formatoDoTipo.nome} · ${capas[tipoAtual.chave]?.quantos ?? 0} ${capas[tipoAtual.chave]?.quantos === 1 ? "modelo" : "modelos"}`}

{social.ligado ? ( ) : null} {(["todos", ...(Object.keys(RAMOS_DOS_MODELOS) as RamoDoModelo[])] as const).map((chave) => ( ))}
{/* A galeria fluida (como a do Canva): só as fotos, coladas; o nome aparece ao passar o mouse. */} {/* Ocasião e cor: um toque filtra os modelos de todos os formatos. */} {!soFavoritos ? (
{OCASIOES.filter((o) => porEtiqueta.ocasioes.get(o.chave)).map((o) => ( ))} {CORES_NOMEADAS.filter((c) => porEtiqueta.cores.get(c.chave)).map((c) => ( ) : null}
) : null} {/* Numa categoria todos têm o mesmo formato (grade justa); na busca os formatos se misturam (colunas fluidas). */}
{!misturado ? ( ) : null} {modelos.map(({ modelo, tipo: t, doc }) => ( ))} {daComunidade.map(({ c, tipo: t }) => ( ))}
{misturado && !modelos.length && !daComunidade.length ?

{soFavoritos ? "Nenhum favorito ainda. Abra um modelo e toque no coração para guardar aqui." : termo ? "Nenhum modelo com esse nome." : "Nenhum modelo com essa combinação. Tire um dos filtros."}

: null}
{/* ------------------------------------------------- criar um design */} {janela ? (
e.target === e.currentTarget && setJanela(null)} role="dialog" aria-modal="true" aria-label="Criar um design" data-janela-criar>
{/* No celular, os grupos viram fichas em cima. */}
{GRUPOS_DA_JANELA.map(({ chave, nome }) => ( ))}
{janela === "personalizado" && !termoDaJanela ? (

Tamanho personalizado

Em pixels para a tela; em centímetros, sai em 300 ppp para imprimir.

{(["px", "cm"] as const).map((u) => ( ))}
setLivre((l) => ({ ...l, largura: unidade === "px" ? Math.round(v) : v }))} casas={unidade === "px" ? 0 : 1} aria-label="Largura" className="h-11 w-32 rounded-xl border border-[#E6E3EE] bg-white px-3 text-[14px] font-semibold outline-none focus:border-[#7C3AED]" /> × setLivre((l) => ({ ...l, altura: unidade === "px" ? Math.round(v) : v }))} casas={unidade === "px" ? 0 : 1} aria-label="Altura" className="h-11 w-32 rounded-xl border border-[#E6E3EE] bg-white px-3 text-[14px] font-semibold outline-none focus:border-[#7C3AED]" /> {unidade}
{unidade === "cm" ?

Fica com {livreEmPx.largura} × {livreEmPx.altura} px.

: null} {!livreValido ?

Cada lado entre {MINIMO_DO_LADO} e {LIMITE_DO_LADO} px.

: null}
) : ( <>

{termoDaJanela ? "Tamanhos" : GRUPOS_DA_JANELA.find((g) => g.chave === janela)?.nome}

{tamanhosDaJanela.length ? (
{tamanhosDaJanela.map((f) => ( criarEmBranco(f)} /> ))}
) : (

Nenhum tamanho com esse nome. Use o tamanho personalizado.

)} )}
) : null} {/* ------------------------------------------------- a prévia do modelo (como a do Canva) */} {previa ? (
e.target === e.currentTarget && !usando && setPrevia(null)} role="dialog" aria-modal="true" aria-label="Prévia do modelo" data-previa-do-modelo>
{previa.casa && miniaturaDoModelo(previa.tipo.chave, previa.casa.modelo.chave, previa.casa.doc)?.video ? ( /* Modelo animado: o vídeo dele tocando, como vai sair. */ (() => { const g = miniaturaDoModelo(previa.tipo.chave, previa.casa!.modelo.chave, previa.casa!.doc)!; const alto = Math.min(62, (g.altura / g.largura) * 100); return ( ); })() ) : previa.casa && miniaturaDoModelo(previa.tipo.chave, previa.casa.modelo.chave, previa.casa.doc) ? ( /* As fotos prontas do modelo (as mesmas da galeria): nada de montar peça por peça antes de usar. */ ) : previa.casa ? (
) : previa.comunidade?.miniatura ? ( /* eslint-disable-next-line @next/next/no-img-element */ {previa.comunidade.nome} ) : ( Sem prévia )}

{previa.casa ? previa.casa.modelo.nome : previa.comunidade?.nome}

{previa.casa ? ( <>

por Ktalogu

Modelo oficial do KtaloguDesign

) : ( <> {social.ligado && previa.comunidade!.user_id !== dono ? : null} )}
{previa.tipo.nome} {(() => { const ramoDoModelo = previa.casa ? previa.casa.modelo.ramo : previa.comunidade?.ramo; return ramoDoModelo ? {RAMOS_DOS_MODELOS[ramoDoModelo]} : null; })()} {formatoDaChave(previa.tipo.formato)?.nome !== previa.tipo.nome ? {formatoDaChave(previa.tipo.formato)?.nome} : null} {(() => { const quantas = previa.casa ? previa.casa.modelo.paginas : previa.comunidade?.paginas; return quantas && quantas > 1 ? {quantas} páginas : null; })()}

{previa.casa ? previa.casa.modelo.descricao : previa.comunidade?.descricao || "Modelo feito por um assinante da Ktalogu."}

{previa.comunidade?.usos ?

Usado {previa.comunidade.usos} {previa.comunidade.usos === 1 ? "vez" : "vezes"}

: null} {social.ligado ? : null}

{previa.casa ? "Abre com a cor, o logo e um produto da sua loja." : "Abre uma cópia sua: o original não muda."}

) : null} {perfil ? ( c.user_id === perfil.id)} podeSeguir={social.ligado && perfil.id !== dono} aoFechar={() => setPerfil(null)} aoAbrir={(c) => { setPerfil(null); setPrevia({ tipo: TIPOS_DE_MODELO.find((t) => t.chave === c.tipo) || TIPOS_DE_MODELO[0], comunidade: c }); }} /> ) : null} {/* ------------------------------------------------- publicar na comunidade */} {publicacao ? (
{publicacao.arte.documento?.pecas ? : null}

Publicar na comunidade

A sua arte vira um modelo para as outras empresas da Ktalogu, com o seu nome e a sua foto. Antes de entrar, a equipe Ktalogu confere.

{(() => { const tipoDaPublicacao = publicacao.arte.documento ? tipoDaArte({ ...publicacao.arte.documento, largura: publicacao.arte.largura, altura: publicacao.arte.altura }) : null; if (!tipoDaPublicacao) { return

Esse tamanho ainda não tem categoria de modelos. Dá para publicar post, carrossel, story, banner da loja e caneca.

; } return ( <>

Categoria

{NOMES_DOS_TIPOS[tipoDaPublicacao]}