User Interface & Dashboard Layout
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Send Again user interface is designed as a centralized platform for managing email infrastructure, contact lists, and marketing campaigns. It follows a modular architecture where a persistent global sidebar provides navigation between functional modules such as Compose, Contacts, History, and Settings. The UI is built using React and Next.js, leveraging a "Shell" pattern to maintain consistent navigation across different application states.
The dashboard facilitates various developer and marketer workflows, including AI-assisted email composition, CSV-based contact management, and detailed campaign performance visualization. It integrates real-time feedback loops, such as live HTML previews and asynchronous send job progress tracking, to provide a responsive user experience. Sources: src/app/app/page.tsx:1126-1160, src/app/page.tsx:143-200
Core Application Shell
The main application interface is wrapped in a sidebar-driven layout that manages workspace context and primary navigation.
Global Sidebar (AppSidebar)
The AppSidebar component serves as the primary navigation hub. It includes:
- Workspace Switcher: A
FancySelectdropdown that allows users to toggle between different domains/workspaces. - Navigation Items: Links to the core modules: Compose, Contacts, History, Campaigns, and Settings.
- User Context: Displays the authenticated user's email and a sign-out mechanism.
- Footer Stats: Provides high-level metrics, such as the total count of contacts or campaigns.
Sources: src/components/ui/app-sidebar.tsx, src/app/app/page.tsx:1914-1960
Workspace Management
The UI revolves around the concept of "Workspaces," which represent unique sending identities (domains). Users can add new workspaces by entering a domain, and the interface dynamically updates to reflect the contacts, history, and settings specific to that domain. Sources: src/app/app/page.tsx:1445-1490
This diagram illustrates the hierarchical relationship between the global navigation shell and individual workspace-scoped modules.
Functional Modules
1. Compose Module
The Compose module provides a split-pane interface for creating and testing emails.
| Feature | Description |
|---|---|
| Recipient Logic | Supports manual entry, "All Contacts," or rule-based dynamic matching. |
| AI Vibe Body | Uses a prompt-based system to generate or revise HTML content using LLMs. |
| Live Preview | An iframe that renders HTML in real-time, including variable replacement (e.g., {{email}}). |
| Dry Run Toggle | Allows users to simulate sends to verify recipient counts without actual delivery. |
Sources: src/app/app/page.tsx:1964-2115, src/app/api/vibe/route.ts:80-150
2. Contacts Module
This module handles contact ingestion and field management. It features a sophisticated CSV import workflow that includes a configuration modal for mapping CSV columns to application fields. Sources: src/app/app/page.tsx:2128-2250
3. History & Performance Analytics
The History module alternates between a raw activity log and a high-level performance dashboard.
Campaign Performance Visualization
The dashboard uses a custom Sankey Diagram to visualize the lifecycle of an email campaign, from "Sent" to "Clicked." Sources: src/app/app/page.tsx:645-780
Logic for the CampaignSankeyDiagram component depicting recipient flow. Sources: src/app/app/page.tsx:684-706
4. Campaigns (Workflow Builder)
The Campaigns module (Beta) introduces a node-based workflow editor for automated email sequences. It utilizes dagre for automated graph layout and supports three node types:
- Send Node: Individual email transmissions.
- Delay Node: Time-based waits (days/hours).
- Rule Node: Conditional branching based on contact fields or historical engagement.
Sources: src/app/campaigns/page.tsx:40-100, src/app/campaigns/page.tsx:1030-1100
Settings & Infrastructure Setup
The Settings module manages domain-level configuration and SES deliverability.
Deliverability Setup Checklist
The UI provides a guided setup for domain verification through a multi-step checklist:
- AWS SES Verification: TXT record tokens.
- SPF/DMARC Configuration: Standardized DNS records.
- DKIM Setup: Three CNAME records for identity signing.
- SES Configuration Sets: For tracking events.
- Unsubscribe Page: Reachability check for the
/unsubscriberoute.
Sources: src/app/app/page.tsx:2445-2650
DNS Provider Integration
To simplify infrastructure setup, the UI includes automated DNS configuration for specific providers:
- Namecheap: Uses API User and Whitelisted IP.
- Cloudflare: Uses API Tokens and Zone IDs.
- Route 53: Uses AWS hosted zone detection.
Sources: src/app/app/page.tsx:1290-1410
Data Flow: AI Content Generation
The "AI Vibe" feature allows users to generate email content directly within the dashboard.
Sequence of operations for the AI-assisted composition feature. Sources: src/app/api/vibe/route.ts:100-160
Summary
The Send Again UI is a comprehensive management dashboard that bridges the gap between raw AWS SES infrastructure and user-friendly campaign management. By combining node-based workflow editing, AI-powered content generation, and detailed Sankey-based analytics, the interface provides a professional-grade environment for handling high-volume email operations.