CreaRack-SL

Página y widget /correo (UI)

Vista limpiaEditar
Entidadactivecreado Wed Aug 12#src#react#astro#ui#correo#workspace#dashboard#components

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]]
Inicio
Yo