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
+55 -47
View File
@@ -121,57 +121,35 @@ export default function TemplateEditorPage() {
return ( return (
<DashboardLayout> <DashboardLayout>
<NextSeo title={template.name} /> <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 */} {/* Header */}
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4"> <div className="flex items-center gap-3 sm:gap-4">
<Button asChild variant="ghost" size="sm"> <Button asChild variant="ghost" size="sm">
<Link href="/templates"><ArrowLeft className="h-4 w-4" /></Link> <Link href="/templates"><ArrowLeft className="h-4 w-4" /></Link>
</Button> </Button>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Edit Template</h1> <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> <p className="text-neutral-500 mt-1 text-sm sm:text-base">
</div> {isSubmitting
</div> ? 'Saving...'
<div className="flex flex-col sm:flex-row sm:items-center gap-3"> : hasChanges
<div className="flex-1"> ? <span className="text-amber-600">Unsaved changes</span>
{!hasChanges && !isSubmitting && ( : 'All changes saved'}
<span className="text-xs sm:text-sm text-neutral-500">All changes saved</span> </p>
)}
{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>
</div> </div>
</div> </div>
{/* Template Editor */} <form onSubmit={handleSave} className="space-y-6">
<div className="space-y-6"> {/* Row 1: Basic Info + Template Type */}
{/* Template Settings */} <div className="grid gap-6 md:grid-cols-2">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Template Settings</CardTitle> <CardTitle>Basic Information</CardTitle>
<CardDescription>Configure the basic settings for your template</CardDescription> <CardDescription>Name and describe your template</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div> <div className="space-y-2">
<Label htmlFor="name">Template Name *</Label> <Label htmlFor="name">Template Name <span className="text-red-500">*</span></Label>
<Input <Input
id="name" id="name"
type="text" type="text"
@@ -182,7 +160,7 @@ export default function TemplateEditorPage() {
/> />
</div> </div>
<div> <div className="space-y-2">
<Label htmlFor="description">Description</Label> <Label htmlFor="description">Description</Label>
<Input <Input
id="description" id="description"
@@ -192,12 +170,18 @@ export default function TemplateEditorPage() {
placeholder="Sent to new subscribers" placeholder="Sent to new subscribers"
/> />
</div> </div>
</CardContent>
</Card>
<div> <Card>
<Label>Type *</Label> <CardHeader>
<div className="flex flex-col gap-2 mt-2"> <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: 'MARKETING', label: 'Marketing', description: 'Subscribed contacts, includes unsubscribe link'},
{value: 'TRANSACTIONAL', label: 'Transactional', description: 'All contacts, no subscription check or footer'}, {value: 'TRANSACTIONAL', label: 'Transactional', description: 'All contacts, no subscription check or footer'},
{value: 'HEADLESS', label: 'Headless', description: 'Subscribed contacts, no Plunk footer'}, {value: 'HEADLESS', label: 'Headless', description: 'Subscribed contacts, no Plunk footer'},
] as const).map(({value, label, description}) => ( ] as const).map(({value, label, description}) => (
@@ -217,7 +201,7 @@ export default function TemplateEditorPage() {
))} ))}
</div> </div>
{editedTemplate.type === 'HEADLESS' && !detectUnsubscribeSignal(editedTemplate.body ?? '') && ( {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"> <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" /> <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> <p className="text-xs font-semibold text-amber-900">No unsubscribe link detected</p>
@@ -237,10 +221,19 @@ export default function TemplateEditorPage() {
</div> </div>
</div> </div>
)} )}
</CardContent>
</Card>
</div> </div>
<div> {/* Email Settings */}
<Label htmlFor="subject">Subject Line *</Label> <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 <Input
id="subject" id="subject"
type="text" type="text"
@@ -249,7 +242,7 @@ export default function TemplateEditorPage() {
required required
placeholder="Welcome to our platform!" 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> </div>
<EmailSettings <EmailSettings
@@ -260,7 +253,6 @@ export default function TemplateEditorPage() {
onFromNameChange={value => setEditedTemplate({...editedTemplate, fromName: value})} onFromNameChange={value => setEditedTemplate({...editedTemplate, fromName: value})}
onReplyToChange={value => setEditedTemplate({...editedTemplate, replyTo: value})} onReplyToChange={value => setEditedTemplate({...editedTemplate, replyTo: value})}
fromNamePlaceholder={activeProject?.name || 'Your Company'} fromNamePlaceholder={activeProject?.name || 'Your Company'}
layout="vertical"
/> />
</CardContent> </CardContent>
</Card> </Card>
@@ -278,8 +270,24 @@ export default function TemplateEditorPage() {
/> />
</CardContent> </CardContent>
</Card> </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> </div>
</form> </form>
</div>
{/* Sticky Save Bar */} {/* Sticky Save Bar */}
<StickySaveBar status={isSubmitting ? 'saving' : hasChanges ? 'dirty' : 'idle'} onSave={handleSave} /> <StickySaveBar status={isSubmitting ? 'saving' : hasChanges ? 'dirty' : 'idle'} onSave={handleSave} />