Herramientas

Un solo lugar para las herramientas del día a día del estudio:

Módulo	Ruta	Qué hace
Inicio	/	Portada con todas las herramientas y el ingreso con Google
Tarjetas	/tarjetas	Textos con su formato y su tipografía, listos para pegar
Emojis	/emojis	Emojis de Apple en PNG: buscás en español o inglés y copiás con un click
GIF	/gif	Banners animados a partir de frames (lo que antes era Programática)
Conversor	/conversor	Convertir y comprimir archivos con FreeConvert
Redacción	/redaccion	Escribir textos con formato y con los emojis y hashtags de cada cliente a un click, y copiarlos al toque
Clientes	/clientes	Cada cliente con su logo, sus colores y sus tipografías, y todo lo que tiene a su nombre
Descargas	/descargas	Bajar videos (o sus portadas) y fotos de YouTube, Instagram y Pinterest con el link, con o sin audio, a la compu o a Drive
Ads	/ads	Ver cada pieza de una pauta (post, carrusel, reel o historia) en los mockups de Instagram: feed, Reels e historias, con todo lo que tapa la app
Rest	/rest	Un recreo: el juego del dino y el buscaminas, con ranking semanal del estudio
Spotify	/spotify	El Jam del estudio: qué suena, la cola y sumar canciones, también desde la burbuja flotante en toda la app

La política de privacidad está en /privacidad. Inicio y Privacidad tienen su propia estética, editorial (negro, crema y la serif Instrument Serif): app/page.tsx, app/privacidad/page.tsx y components/site/. El mail de contacto de la política se define en lib/site.ts.

---

Cómo se usa: sidebar + barra contextual

• La píldora negra de arriba a la izquierda abre la sidebar flotante con los módulos. Ahí se navega; Esc la cierra.
• La barra flotante del centro cambia según el módulo: es desde donde se hace todo (buscar, filtrar, agregar, exportar, configurar). Al pasar de un módulo a otro se transforma en lugar de recargarse.
• Los botones son íconos; si dejás el mouse un segundo encima aparece su nombre.
• / enfoca el buscador del módulo, en cualquier momento.
• El avatar de arriba a la derecha es la cuenta: iniciar sesión con Google o cerrarla (ver "Cuentas y visitas").

Diseño

La app sigue la estética de Inicio (en la línea de tbwa.com): fondo crema, texto negro tinta, tarjetas en papel y el amarillo de marca solo como acento (acciones principales, foco y la barra invertida \). Los títulos van en Instrument Serif (font-display, se carga para toda la app en app/layout.tsx) y las etiquetas en mayúscula espaciada (.eyebrow).

• Los colores son variables en app/globals.css (--background, --card, --primary…); en Tailwind también están ink y cream para usarlos directo.
• Superficies flotantes: .floating (clara, para popovers y paneles) y .floating-ink (negra, para la píldora de módulos, la barra contextual, la cuenta y la sidebar).

La barra está en components/shell/ContextBar.tsx: cada página monta <ContextBar> con sus controles y estos se "teletransportan" a la barra del layout. Sus piezas (BarButton, BarSearch, BarSegmented…) ya vienen pensadas para fondo negro.

---

Puesta en marcha

npm install
cp .env.local.example .env.local   # y completá los valores
npm run dev

Abrí http://localhost:3000

Variables de entorno

Variable	Módulo	Obligatoria
NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY	Tarjetas, cuentas y visitas	Sí, para Tarjetas y para iniciar sesión
FREECONVERT_API_KEY	Conversor	Sí, para convertir
OPENAI_API_KEY	Emojis	No: sin ella se busca solo por palabras
EMOJI_STORAGE_BUCKET	Emojis	No (por defecto camara-focus.firebasestorage.app)
RESEND_API_KEY	Inicio → Sugerencias	No: sin ella no llega el mail, pero las sugerencias igual quedan en el tablero (FEEDBACK_TO y FEEDBACK_FROM son opcionales)
YOUTUBE_WORKER_SECRET, BLOB_READ_WRITE_TOKEN	Descargas → YouTube	Sí, para YouTube: la clave del servicio de la PC y el Blob store donde anota su dirección (ver "Descargas"). YOUTUBE_WORKER_URL es opcional: una dirección fija (en local, http://localhost:8787)
GOOGLE_OAUTH_CLIENT_ID, GOOGLE_PICKER_API_KEY	Descargas → Drive	Sí, para guardar en Drive (el client id es el mismo de Planificación)
SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET, INTEGRACIONES_SECRET	Spotify (el Jam)	Sí, para que el DJ conecte su Spotify (ver "Spotify")

Las que no empiezan con NEXT_PUBLIC_ viven solo en el servidor. En Vercel se cargan en Settings → Environment Variables.

Sugerencias y errores

Al final del Inicio hay un formulario para mandar una idea o avisar un error. Se guarda en la base (supabase/migracion-sugerencias.sql) y, con sesión del estudio, se ve debajo en el tablero: post-its amarillos (ideas) y rojos (errores), sueltos e inclinados. Cada post-it muestra el principio del texto; al tocarlo se abre entero.

This is the beginning of the README. Read the rest at the original. Read the full README ↗