Página y widget /correo (UI)

Descripción

Componentes React y página Astro que conforman la UI del menú Correo (F0): vista completa del informe de buzón Zoho y widget compacto de dashboard.

Archivos:

• src/components/correo/CorreoPage.tsx (181 LOC)
• src/components/widgets/CorreoWidget.tsx (93 LOC)
• src/pages/correo/index.astro (14 LOC)

Componentes

CorreoPage.tsx

Propósito: vista detallada del informe de /correo del miembro logueado.

Estado:

• digest: último informe de D1 (null si no existe).
• loading: estado de carga desde GET /api/correo/digest.

Funciones auxiliares:

• fmtFecha(iso: string): formatea timestamp ISO 8601 a formato legible ES (ej: “mié 12 ago 11:27”).
• ItemCard({ item }): renderiza un ítem individual con estilos (urgente en rojo, enlace a Zoho).

Layout:

1. Encabezado (tools-page-header):

   • Eyebrow: “Correo”
   • Título: “Tu buzón, digerido”
   • Subtitle: fecha/hora de la última pasada.

2. Estado vacío: si no hay informe, aviso explicativo.

3. Secciones (si hay informe):

   • Actúa (nivel='actua'): ítems que requieren acción.
     • Tarjeta por ítem con remitente, asunto, “por qué importa”.
     • Badge rojo “urgente” si aplica.
     • Botón “Abrir en Zoho” (target=“_blank”).
   • Entérate (nivel='enterate'): solo informativos.
     • Mismo layout, sin urgencia esperada.

4. Estadística final: línea con conteo de ruido filtrado.

Estilos:

• Tarjetas con borde izquierdo (rojo si urgente, transparente si no).
• KPI sutil para contadores.
• Responsive: flex column, gaps consistentes.

Comportamiento:

• En localhost (dev): no realiza fetch, muestra loading=false.
• En producción: GET /api/correo/digest al montar.
• Manejo de errores: catch silencioso, digest=null.

CorreoWidget.tsx

Propósito: widget compacto para el dashboard principal (bento blue). Resume contadores y urgencias.

Estado:

• digest: último informe.
• loading: carga desde GET /api/correo/digest.

Contenido:

• KPI visual: N actúa · M entérate (en grande, Oswald bold).
• Aviso de urgencias: si hay items urgente=true, muestra en rojo X urgente(s) esperándote.
• Marca de tiempo y ruido: Última pasada: HH:mm · ruido filtrado: {count}.

Interactividad:

• Toda el área es clickable (<a href="/correo">).
• Sin decoración de link; hereda color foreground.

Comportamiento:

• Mismo localhost bypass que CorreoPage.
• Fallback a empty-state: “Sin informe aún”.

Página Astro: /correo

Archivo: src/pages/correo/index.astro

Layout: BaseLayout con título “Correo”.

Contenido: monta <CorreoPage client:load /> (React, hidratado en el cliente).

Estructura:

<BaseLayout title="Correo">
  <div class="app-body">
    <main>
      <div class="mx-auto max-w-6xl px-6 py-8">
        <CorreoPage client:load />
      </div>
    </main>
  </div>
</BaseLayout>

Integración en navegación

El menú Correo aparece en:

1. Sidebar (src/components/shell/Sidebar.tsx):

   • Entrada: { title: 'Correo', icon: 'mail', href: '/correo' }
   • Icono SVG custom (sobre abierto).

2. BottomNav (src/components/shell/BottomNav.tsx):

   • En submenu “Tareas”: { label: 'Correo', href: '/correo' }

3. Navigation (src/lib/navigation.ts):

   • Item en array principal.

4. DesktopA (src/components/variants/desktop/DesktopA.tsx):

   • Widget Correo en el grid de bento cards (glow-blue, animate-in d-5).
   • Encabezado con botón “Ver informe” → /correo.

Flujo de datos

GET /api/correo/digest (D1)
  ↓
CorreoPage / CorreoWidget
  ↓
Filtra items por nivel + urgencia
  ↓
ItemCard renderiza remitente, asunto, porque, zoho_link

Estilos y diseño

• Clases CSS: .tools-page-header, .tools-section-title, .tools-empty, .bento, .card-head.
• Variables CSS: --text-sm, --text-xs, --fg-dim, --fg-muted, --danger, --grad-blue.
• Icono Sidebar: SVG simple de sobre (<rect> + <path>).

Testing

• Build local: 2302 páginas ✅
• Prettier: pasado ✅
• E2E: pendiente (pasada real → widget).

Véase también

• [[entity—functions—endpoint—correo-digest]]
• [[feature—workspace—correo-menu-f0]]
• [[entity—migrations—table—correo-digests]]
• [[concept—workspace—ui-patterns]]
• [[concept—workspace—dashboard]]