infrastructure/plunk
2
0
Fork 0
Code Pull Requests Activity

feat: refactor template editing layout for improved usability and clarity

Browse Source
This commit is contained in:
Dries Augustyns
2026-05-10 09:24:21 +02:00
parent c6340a1dc7
commit aaf5ac6530
1 changed files with 136 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/templates/[id].tsx
+54 -46
View File
@@ -121,57 +121,35 @@ export default function TemplateEditorPage() {
return (
<DashboardLayout>
<NextSeo title={template.name} />
<form onSubmit={handleSave} className={`max-w-5xl mx-auto space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
<div className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
{/* Header */}
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Button asChild variant="ghost" size="sm">
<Link href="/templates"><ArrowLeft className="h-4 w-4" /></Link>
</Button>
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Edit Template</h1>
<p className="text-neutral-500 mt-1 text-sm sm:text-base">Make changes to your email template</p>
</div>
</div>
<div className="flex flex-col sm:flex-row sm:items-center gap-3">
<div className="flex-1">
{!hasChanges && !isSubmitting && (
<span className="text-xs sm:text-sm text-neutral-500">All changes saved</span>
)}
{hasChanges && !isSubmitting && (
<span className="text-xs sm:text-sm text-amber-600">Unsaved changes</span>
)}
</div>
<div className="flex items-center gap-2">
<Button
type="button"
variant="destructive"
onClick={() => setShowDeleteDialog(true)}
className="flex-1 sm:flex-none"
>
<Trash2 className="h-4 w-4" />
<span className="hidden sm:inline">Delete</span>
</Button>
<Button type="submit" disabled={!hasChanges || isSubmitting} className="flex-1 sm:flex-none">
<Save className="h-4 w-4" />
<span className="hidden sm:inline">{isSubmitting ? 'Saving...' : 'Save Changes'}</span>
<span className="sm:hidden">{isSubmitting ? 'Saving...' : 'Save'}</span>
</Button>
</div>
<p className="text-neutral-500 mt-1 text-sm sm:text-base">
{isSubmitting
? 'Saving...'
: hasChanges
? <span className="text-amber-600">Unsaved changes</span>
: 'All changes saved'}
</p>
</div>
</div>
{/* Template Editor */}
<div className="space-y-6">
{/* Template Settings */}
<form onSubmit={handleSave} className="space-y-6">
{/* Row 1: Basic Info + Template Type */}
<div className="grid gap-6 md:grid-cols-2">
<Card>
<CardHeader>
<CardTitle>Template Settings</CardTitle>
<CardDescription>Configure the basic settings for your template</CardDescription>
<CardTitle>Basic Information</CardTitle>
<CardDescription>Name and describe your template</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div>
<Label htmlFor="name">Template Name *</Label>
<div className="space-y-2">
<Label htmlFor="name">Template Name <span className="text-red-500">*</span></Label>
<Input
id="name"
type="text"
@@ -182,7 +160,7 @@ export default function TemplateEditorPage() {
/>
</div>
<div>
<div className="space-y-2">
<Label htmlFor="description">Description</Label>
<Input
id="description"
@@ -192,10 +170,16 @@ export default function TemplateEditorPage() {
placeholder="Sent to new subscribers"
/>
</div>
</CardContent>
</Card>
<div>
<Label>Type *</Label>
<div className="flex flex-col gap-2 mt-2">
<Card>
<CardHeader>
<CardTitle>Template Type</CardTitle>
<CardDescription>Choose how this template should be treated</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-2">
{([
{value: 'MARKETING', label: 'Marketing', description: 'Subscribed contacts, includes unsubscribe link'},
{value: 'TRANSACTIONAL', label: 'Transactional', description: 'All contacts, no subscription check or footer'},
@@ -217,7 +201,7 @@ export default function TemplateEditorPage() {
))}
</div>
{editedTemplate.type === 'HEADLESS' && !detectUnsubscribeSignal(editedTemplate.body ?? '') && (
<div className="mt-2 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
<div className="mt-3 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
<div className="flex items-center gap-2 border-b border-amber-200 bg-amber-100/60 px-3 py-2">
<TriangleAlert className="h-3.5 w-3.5 text-amber-600 shrink-0" />
<p className="text-xs font-semibold text-amber-900">No unsubscribe link detected</p>
@@ -237,10 +221,19 @@ export default function TemplateEditorPage() {
</div>
</div>
)}
</CardContent>
</Card>
</div>
<div>
<Label htmlFor="subject">Subject Line *</Label>
{/* Email Settings */}
<Card>
<CardHeader>
<CardTitle>Email Settings</CardTitle>
<CardDescription>Configure sender information and subject</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="subject">Subject Line <span className="text-red-500">*</span></Label>
<Input
id="subject"
type="text"
@@ -249,7 +242,7 @@ export default function TemplateEditorPage() {
required
placeholder="Welcome to our platform!"
/>
<p className="text-xs text-neutral-500 mt-1">Use {'{{variableName}}'} for dynamic content</p>
<p className="text-xs text-neutral-500">Use {'{{variableName}}'} for dynamic content</p>
</div>
<EmailSettings
@@ -260,7 +253,6 @@ export default function TemplateEditorPage() {
onFromNameChange={value => setEditedTemplate({...editedTemplate, fromName: value})}
onReplyToChange={value => setEditedTemplate({...editedTemplate, replyTo: value})}
fromNamePlaceholder={activeProject?.name || 'Your Company'}
layout="vertical"
/>
</CardContent>
</Card>
@@ -278,8 +270,24 @@ export default function TemplateEditorPage() {
/>
</CardContent>
</Card>
{/* Actions */}
<div className="flex justify-between gap-3">
<Button
type="button"
variant="destructive"
onClick={() => setShowDeleteDialog(true)}
>
<Trash2 className="h-4 w-4" />
Delete Template
</Button>
<Button type="submit" disabled={!hasChanges || isSubmitting}>
<Save className="h-4 w-4" />
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
</div>
</form>
</div>
{/* Sticky Save Bar */}
<StickySaveBar status={isSubmitting ? 'saving' : hasChanges ? 'dirty' : 'idle'} onSave={handleSave} />