open-daycare/specs/01-feed-home.md

SPEC 01 — Home: feed de la guardería (plantilla feed.dc.html)

Estado: Verificada (2026-10-20) Depende de: — Fecha: 2026-10-19 Objetivo: Implementar la plantilla references/pantallas/feed.dc.html como página home (/) en Next.js, visualmente idéntica al original, sin autenticación ni base de datos.

Alcance

In:

• Página / (app/page.tsx) con: sidebar sticky de 248px (logo OpenDayCare · Sala Soles, botón "Nueva publicación", nav con Feed activo + Niños/Avisos/Mi cuenta, tarjeta de usuario "Caro Giménez" con logout), saludo ("GUARDERÍA · SALA SOLES" / "Buenas, Caro" / "12 niños · martes 17 jun"), caja "Compartí un momento…", separador "PUBLICADO HOY" y los 3 posts de la plantilla (logro, actividad con placeholder de foto, anuncio).
• Datos mock tipados en app/data/feed.ts con los 3 posts exactos de la plantilla.
• Componentes en app/components/: Sidebar.tsx, FeedHeader.tsx, ShareBox.tsx, PostCard.tsx.
• Cambio de fuentes en app/layout.tsx (Fredoka + Nunito vía next/font/google), lang="es" y metadata "OpenDayCare".
• Estilos base en app/globals.css (fondo #F6ECDF, texto #3F362E, scrollbar custom, tema claro fijo).
• Todos los links como <Link> a rutas futuras (/crear-publicacion, /ninos, /avisos, /mi-cuenta, /detalle-publicacion, /login, /foto — este último en el placeholder de foto, como foto.dc.html en la plantilla).

Out of scope (para specs futuras):

• Las páginas destino del nav y sus funcionalidades (hoy darán 404 y está bien).
• Autenticación y logout funcional.
• Base de datos y persistencia.
• Interactividad real de likes, comentarios y editar (solo visual, contadores fijos).
• Responsive móvil.
• Dark mode.
• Foto real en el post de actividad (se mantiene el placeholder dashed de la plantilla).

Modelo de datos

// app/data/feed.ts
export type PostCategory = "logro" | "actividad" | "anuncio";

export interface Post {
  id: string;
  authorName: string;      // "Mateo" | "Anuncio general"
  authorInitial: string;   // "M" (solo posts de niño)
  authorColors: { bg: string; text: string }; // p.ej. { bg: "#A9D9E8", text: "#1F7A93" }
  timeLabel: string;       // "14:20"
  publishedBy: string;     // "publicado por vos"
  category: PostCategory;  // define badge y colores vía mapa en PostCard
  audience: string;        // "familia de Mateo" | "toda la sala"
  body: string;
  photoLabel?: string;     // "pintando con témperas" → placeholder dashed
  likes: number;
  comments: number;
}

export const posts: Post[] = [
  // Los 3 posts de la plantilla: logro (3/1), actividad con foto (5/2), anuncio (8/0)
];

Convenciones: los colores van como hex exactos de la plantilla; el mapa category → colores del badge vive en PostCard.tsx.

Plan de implementación

1. Fuentes y layout — app/layout.tsx: reemplazar Geist por Fredoka y Nunito como fuentes variables con next/font/google (variables --font-fredoka / --font-nunito), lang="es", title "OpenDayCare". Test manual: npm run dev sigue compilando.
2. Estilos globales — app/globals.css: body con background:#F6ECDF, color:#3F362E, font-family: var(--font-nunito), system-ui, sans-serif; scrollbar custom (thumb #E4D6C4); eliminar el bloque prefers-color-scheme y las variables Geist. Test manual: la app ya se ve crema.
3. Mock del feed — crear app/data/feed.ts con el tipo Post y los 3 posts de la plantilla.
4. Sidebar — crear app/components/Sidebar.tsx con logo, botón "Nueva publicación" (→ /crear-publicacion), nav (Feed activo, Niños, Avisos, Mi cuenta) y usuario + logout (→ /login).
5. Componentes del feed — crear FeedHeader.tsx, ShareBox.tsx y PostCard.tsx con utilities Tailwind de valores exactos.
6. Página home — reemplazar app/page.tsx: flex con Sidebar + <main> de scroll propio, contenido centrado max-width:760px, mapeando posts. Test manual: http://localhost:3000 muestra el feed completo.
7. Fidelidad visual — comparación lado a lado con references/pantallas/feed.dc.html a ancho ≥1280px; ajustar diferencias. Captura de verificación en .playwright-mcp/.

Criterios de aceptación

• npm run dev levanta sin errores y / muestra el feed completo: sidebar + saludo + caja + separador + 3 posts. (Verificado 2026-10-20 en localhost:3001 a 1440×900; consola sin errores de compilación ni hidratación. Capturas: .playwright-mcp/verify-feed-app-1440.png, .playwright-mcp/verify-feed-app-bottom.png.)
• npm run build completa sin errores. (Next.js 16.4.2 + Turbopack: compilación, TypeScript y prerender de / OK.)
• A ancho ≥1280px el layout coincide con la plantilla: sidebar 248px sticky, main con scroll propio y contenido centrado de 760px. (Computed styles: aside 248px sticky top-0 h-screen; main h-screen overflow-y auto; contenedor max-width 760px centrado — márgenes 211px/211px a 1440px.)
• Fredoka en logo, saludo y nombres de autor; Nunito (pesos 400–800) en el resto. (Computed: Fredoka 17px/600 logo, 30px/600 h1, 16.5px/600 autores; Nunito 400 texto, 600 nav inactivo, 700 likes, 800 eyebrow/nav activo. Fuentes variables self-hosted vía next/font/google.)
• Post 1: badge LOGRO (fondo #CFEBD8, texto #3E9B6C), ♥ 3, 💬 1, link "Editar". (Computed: rgb(207,235,216) / rgb(62,155,108); acciones 3 / 1 / Editar → /crear-publicacion.)
• Post 2: badge ACTIVIDAD (fondo #C7E7F1, texto #2E89A6), placeholder dashed "Foto · pintando con témperas", ♥ 5, 💬 2. (Computed: rgb(199,231,241) / rgb(46,137,166); placeholder dashed 1.5px #DBCDBA, 200px alto, link a /foto; acciones 5 / 2.)
• Post 3: avatar megáfono (fondo #CCD8F4), badge ANUNCIO, "Para: toda la sala", ♥ 8, 💬 0. (Computed: avatar 44px rgb(204,216,244) con SVG megáfono idéntico a la plantilla; badge rgb(204,216,244) / rgb(78,114,200); acciones 8 / 0.)
• Todos los links navegan con <Link>: /crear-publicacion (botón, caja y Editar), /ninos, /avisos, /mi-cuenta, /detalle-publicacion (íconos de comentarios), /login (logout), /foto (placeholder de foto). (Hrefs del DOM verificados; next/link importado en Sidebar, ShareBox y PostCard; sin <a> planos.)
• Colores base exactos: fondo #F6ECDF, tarjetas #FFFDF9 con borde #ECE0D0, sombras y radios según plantilla. (Computed: body rgb(246,236,223); tarjetas rgb(255,253,249), borde 1px rgb(236,224,208), radio 20px, sombra rgba(120,90,60,.5) 0 4px 16px -12px; caja 18px.)
• Con el sistema en modo oscuro la página se mantiene en tema claro (sin dark mode). (Emulación prefers-color-scheme: dark en Playwright: body, aside y tarjetas mantienen sus colores claros. Captura: .playwright-mcp/verify-feed-darkmode.png.)
• Los componentes nuevos no usan atributos style; todo está en utilities Tailwind con valores arbitrarios exactos. (Grep style= en app/**/*.{tsx,css}: 0 resultados; los únicos [style] del DOM son internos de Next.js — nextjs-portal, next-route-announcer — fuera de los componentes.)

Decisiones

• Sí: Tailwind 4 con valores arbitrarios exactos (bg-[#F6ECDF], shadow-[0_4px_16px_-12px_rgba(120,90,60,.5)]…) — consistente con el proyecto y pixel-perfect.
• No: estilos inline literales ni CSS Modules — divergen de la convención del repo.
• Sí: componentes separados en app/components/ — el sidebar se reutiliza en Niños, Avisos y Mi cuenta.
• Sí: mock tipado en app/data/feed.ts — deja el terreno listo para la BD futura.
• Sí: <Link> a rutas futuras aunque hoy den 404 — la navegación queda cableada desde el día uno.
• Sí: solo desktop, réplica exacta — el móvil merece decisiones de diseño propias (otra spec).
• Sí: next/font/google para Fredoka y Nunito como fuentes variables — misma familia y pesos que el <link> de la plantilla, self-hosted y sin FOUT.
• Sí: tema claro fijo, eliminando el dark mode automático de globals.css — la plantilla no define modo oscuro.
• No: autenticación, BD, likes/comentarios/editar funcionales ni foto real — excluidos explícitamente por el usuario.

Qué no está en esta spec

• Otras páginas (Niños, Avisos, Mi cuenta, crear/editar publicación, detalle, login) — cada una irá en su propia spec.
• Autenticación y base de datos.
• Likes, comentarios y edición funcionales.
• Responsive móvil y dark mode.