Alert Templates

The Alert Templates UI is a frontend-only template management system accessible from the Admin Dashboard's Templates tab. It allows Malet Owners and platform administrators to design, preview, and export email and SMS alert templates using Handlebars syntax — without requiring backend CRUD infrastructure.

Architecture

┌─────────────────────────────────────────────────────┐
│         Admin Dashboard (+page.svelte)               │
│  Tab: "Templates" (lazy-loaded)                      │
│  ┌─────────────────────────────────────────────────┐ │
│  │         AlertTemplateEditor.svelte               │ │
│  │ ┌──────────┐ ┌──────────────┐ ┌───────────────┐ │ │
│  │ │ Sidebar  │ │ Editor Pane  │ │ Preview Panel │ │ │
│  │ │ (List +  │ │ (Body/Subj/  │ │ (Email iframe │ │ │
│  │ │ Filters) │ │  Variants)   │ │  or SMS phone │ │ │
│  │ └──────────┘ └──────────────┘ │  mockup)      │ │ │
│  │                               └───────────────┘ │ │
│  └─────────────────────────────────────────────────┘ │
│                      ↕                                │
│         alertTemplateStore.svelte.ts                  │
│         (localStorage persistence)                    │
└─────────────────────────────────────────────────────┘

Store: `alertTemplateStore.svelte.ts`

A Svelte 5 runes class (AlertTemplateStore) managing:

• Templates array — persisted to localStorage under mall_alert_templates
• CRUD operations — create, update, delete, duplicate
• A/B variants — up to 3 variants per template (A, B, C)
• Variable detection — auto-extracts {{variable}} patterns from body and subject
• Template compilation — client-side Handlebars-like substitution with sample data
• Zod validation — runtime schema validation via AlertTemplateSchema

Component: `AlertTemplateEditor.svelte`

Three-panel layout:

1. Sidebar — Template list with search, channel filter (All/Email/SMS), create form, export all button
2. Editor Pane — Name input, channel selector, subject line (Email only), A/B variant tabs, Handlebars body textarea, variable inspector
3. Preview Panel — Live-rendered preview with device toggle

Component: `AlertTemplatePreview.svelte`

Renders two preview modes:

• Email — Sandboxed <iframe> with browser-chrome mockup (traffic light dots, From address, subject line), Desktop/Mobile width toggle
• SMS — Phone mockup with notch, carrier bar, iMessage-style bubble, character count with multi-segment warning (>160 chars)

Data Model

AlertTemplate

interface AlertTemplate {
  id: string;                           // Auto-generated: tpl_{timestamp}_{random}
  name: string;                         // Required, min 1 char
  channel: 'EMAIL' | 'SMS';            // Delivery channel
  subject: string;                      // Email subject line (empty for SMS)
  body: string;                         // Handlebars template body
  variables: string[];                  // Auto-detected {{variable}} names
  variants: TemplateVariant[];          // A/B overrides (max 3)
  sampleData: Record<string, string>;   // Variable → sample value mapping
  createdAt: string;                    // ISO timestamp
  updatedAt: string;                    // ISO timestamp
}

TemplateVariant

interface TemplateVariant {
  key: 'A' | 'B' | 'C';   // Variant identifier
  subject: string;          // Override subject line
  body: string;             // Override body template
  isControl: boolean;       // Whether this is the control variant
}

CRUD Operations

Variable Detection

Templates use {{variable}} Handlebars syntax for dynamic content. The variable extractor scans the body and subject for {{ ... }} patterns and automatically populates the Variable Inspector panel.

The extractor excludes Handlebars control constructs:

• Block helpers: {{#if ready}}, {{/if}}, {{#each items}}
• Comments: {{! this is a comment }}
• Partials: {{> header_partial}}

Detected variables appear with editable sample value inputs. Changes to sample values immediately update the live preview.

A/B Variant Comparison

Each template supports up to 3 variants (A, B, C) accessed via pill tabs above the body editor. Each variant independently overrides the subject line and body content.

Compare Mode

Toggle the ⇄ Compare button to view all variants side-by-side in the preview panel. This enables visual comparison of variant wording, layout, and length without switching tabs.

Preview Rendering

Email Preview

SMS Preview

Admin Dashboard Integration

The Templates tab is lazy-loaded in src/routes/admin/+page.svelte:

{#if activeTab === 'templates'}
  {#await import('$lib/components/admin/AlertTemplateEditor.svelte') then module}
    <module.default />
  {/await}
{/if}

This ensures the template editor and its dependencies (Handlebars compilation, Zod schemas) are only loaded when the user navigates to the Templates tab.

Persistence

Templates are stored in localStorage under the key mall_alert_templates as a JSON array. The export format matches the AlertTemplate interface exactly, enabling:

• Manual backup via single or bulk JSON export
• Cross-environment migration via import
• Backend handoff when the alerts subgraph adds GraphQL CRUD

Future Backend Wiring

When the alerts subgraph exposes a GraphQL TemplateService:

1. Replace localStorage persistence with GraphQL mutations
2. Wire CRUD operations to CREATE_ALERT_TEMPLATE / UPDATE_ALERT_TEMPLATE mutations
3. Add server-side Handlebars compilation for production-accurate preview
4. Wire A/B variants to the backend distribution engine

File Map

Related

• Alerts Resilience — Backend alerts architecture, TCP transport, Handlebars templates, delivery pipeline
• Alerts Subgraph — Subgraph internals: preference storage, email/SMS delivery, WebSocket subscriptions
• Blog Editor UX — Companion editor in the Admin Dashboard with its own pipeline workflow
• Admin Analytics Dashboards — Analytics tabs alongside the Templates tab in the Admin Dashboard
• Invite & Notification Pipeline — Cross-subgraph notification flow using the alerts TCP service
• uMail Domain Verification — DNS setup for mallnline.com ensuring email template delivery via verified Resend sender