smtp-edc

SMTP-EDC Wails UI Conversion Plan

Executive Summary

This document outlines the technical plan for converting SMTP-EDC from a CLI-only tool to a cross-platform desktop application using the Wails framework. The conversion will maintain all existing functionality while providing an intuitive graphical user interface.

Current State Analysis

Existing Architecture

• Core Engine: Go-based SMTP client with comprehensive features
• Interface: Command-line only
• Dependencies: Pure Go with minimal external dependencies
• Platforms: Cross-platform (Windows, macOS, Linux)

Key Components

1. Authentication System (internal/auth/)
   • PLAIN, LOGIN, CRAM-MD5, OAuth2 support
   • Rate limiting and security features
2. Message Handling (internal/message/)
   • Template system
   • Attachment support
   • MIME handling
   • Validation
3. SMTP Client (internal/client/)
   • Protocol implementation
   • TLS/STARTTLS support
   • Debug/verbose modes
4. Configuration (internal/config/)
   • YAML-based configuration
   • Command-line argument parsing
5. Security (internal/security/)
   • Credential management
   • TLS configuration
   • Logging

Wails Conversion Strategy

Phase 1: Foundation Setup (Week 1)

1. Initialize Wails Project
   • Create new Wails v2 project structure
   • Choose frontend framework (React with TypeScript recommended)
   • Set up build configuration
2. Restructure Existing Code
   • Move existing Go code to Wails app structure
   • Create Wails context-aware service layer
   • Implement Wails bindings for core functionality
3. Define API Contract
   • Create service interfaces for Wails bindings
   • Define data structures for frontend communication
   • Implement error handling patterns

Phase 2: Core UI Development (Weeks 2-3)

1. Main Application Shell
   • Navigation structure
   • Theme implementation (using specified colors)
   • Responsive layout system
2. Connection Configuration Panel
   • Server settings (host, port, security)
   • Authentication configuration
   • Connection testing capabilities
3. Message Composition Interface
   • Rich text editor for email body
   • Template selection and management
   • Attachment handling with drag-and-drop

Phase 3: Advanced Features (Week 4)

1. Testing and Debug Interface
   • Real-time SMTP transaction display
   • Log viewer with filtering
   • Connection diagnostic tools
2. Configuration Management
   • Settings panels
   • Profile management
   • Import/export functionality
3. Results and Analytics
   • Test result visualization
   • Performance metrics
   • History tracking

Phase 4: Polish and Integration (Week 5)

1. User Experience Refinements
   • Keyboard shortcuts
   • Context menus
   • Status indicators
2. Error Handling and Validation
   • Form validation
   • Error message system
   • Recovery mechanisms
3. Documentation and Help
   • In-app help system
   • Tooltips and guidance
   • Tutorial flow

Technical Architecture

Frontend Architecture

frontend/
├── src/
│   ├── components/
│   │   ├── Connection/
│   │   ├── Message/
│   │   ├── Testing/
│   │   └── Settings/
│   ├── services/
│   │   ├── api.ts          # Wails bindings
│   │   ├── validation.ts   # Client-side validation
│   │   └── storage.ts      # Local storage management
│   ├── types/
│   │   ├── smtp.ts         # Type definitions
│   │   └── ui.ts           # UI-specific types
│   └── styles/
│       ├── theme.css       # Color scheme implementation
│       └── components.css  # Component styles

Backend Integration

app/
├── app.go              # Main Wails application
├── services/
│   ├── smtp_service.go     # SMTP operations wrapper
│   ├── config_service.go   # Configuration management
│   ├── template_service.go # Template operations
│   └── auth_service.go     # Authentication handling
└── models/
    ├── smtp_models.go      # Data transfer objects
    └── ui_models.go        # UI-specific models

Design System

Color Palette

• Primary: #FFFFFF (backgrounds, main text)
• Secondary: #253238 (navigation, headers, borders)
• Accent: #FF7C1A (buttons, highlights, active states)

Typography

• Headers: Inter/System UI, weights 600-700
• Body: Inter/System UI, weights 400-500
• Code: JetBrains Mono/Monaco for logs and debugging

Component Library

1. Forms and Inputs
   • Text inputs with validation
   • Dropdowns and selects
   • Toggle switches
   • File upload areas
2. Data Display
   • Tables with sorting/filtering
   • Code blocks with syntax highlighting
   • Progress indicators
   • Status badges
3. Navigation
   • Sidebar navigation
   • Tab components
   • Breadcrumbs
   • Context menus

Development Workflow

Setup Phase

1. Install Wails v2
2. Create new project with React/TypeScript template
3. Set up development environment
4. Configure build scripts

Migration Strategy

1. Service Layer First: Create Wails-compatible service wrappers
2. Core Features: Implement basic SMTP testing functionality
3. Advanced Features: Add debugging, templates, etc.
4. Polish: UI/UX improvements and testing

Quality Assurance

1. Unit Testing: Go backend services
2. Integration Testing: Wails binding functionality
3. E2E Testing: Full application workflows
4. Cross-Platform Testing: Windows, macOS, Linux

Key Challenges and Solutions

Challenge 1: CLI to GUI Paradigm Shift

Solution: Maintain CLI functionality as a backend service, expose through Wails bindings

Challenge 2: Real-time SMTP Transaction Display

Solution: Implement WebSocket-like communication through Wails events

Challenge 3: File Management (Templates, Attachments)

Solution: Use Wails file system APIs with secure file handling

Challenge 4: Configuration Migration

Solution: Automatic detection and migration of existing YAML configs

Success Metrics

Functional Requirements

• All CLI features available in GUI
• Cross-platform compatibility maintained
• Performance equivalent to CLI version
• Backward compatibility with existing configs

User Experience Requirements

• Intuitive navigation and workflow
• Responsive design for different screen sizes
• Consistent behavior across platforms
• Comprehensive error handling and feedback

Technical Requirements

• Bundle size under 100MB
• Startup time under 3 seconds
• Memory usage under 200MB baseline
• Secure credential handling

Timeline

Total Duration: 5 weeks

• Week 1: Foundation and architecture setup
• Week 2: Core UI components and basic functionality
• Week 3: Advanced features and testing interface
• Week 4: Configuration management and polish
• Week 5: Testing, documentation, and release preparation

Risk Mitigation

Technical Risks

1. Wails Learning Curve: Allocate extra time for framework familiarization
2. Performance Issues: Profile early and often
3. Cross-Platform Compatibility: Test on all platforms throughout development

Project Risks

1. Scope Creep: Maintain strict feature parity with CLI version initially
2. Timeline Pressure: Prioritize core functionality over nice-to-have features
3. User Adoption: Maintain CLI version alongside GUI for gradual migration

Next Steps

1. Immediate Actions
   • Set up Wails development environment
   • Create project structure
   • Design mockups for key screens
2. Week 1 Deliverables
   • Working Wails application shell
   • Basic SMTP service integration
   • Initial UI components
3. Validation Points
   • End of Week 1: Technical architecture validation
   • End of Week 3: Feature completeness review
   • End of Week 5: User acceptance testing

This plan provides a structured approach to converting SMTP-EDC to a modern desktop application while maintaining its robust functionality and adding significant user experience improvements.

This site is open source. Improve this page.