infrastructure/plunk
2
0
Fork 0
Code Pull Requests Activity

Remove emojis and improve descriptions

Browse Source
This commit is contained in:
Dries Augustyns
2025-12-07 16:25:34 +01:00
parent caf10dce41
commit 16572b8f49
5 changed files with 350 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/WorkflowBuilder.tsx
+24 -10
View File
@@ -16,7 +16,21 @@ import {
} from '@xyflow/react'; } from '@xyflow/react';
import '@xyflow/react/dist/style.css'; import '@xyflow/react/dist/style.css';
import type {WorkflowStep} from '@plunk/db'; import type {WorkflowStep} from '@plunk/db';
import {Clock, GitBranch, LogOut, Mail, Plus, Settings, Trash2, UserCog, Webhook} from 'lucide-react'; import {
Clock,
GitBranch,
Hourglass,
Lightbulb,
Link,
LogOut,
Mail,
Plus,
Settings,
Timer,
Trash2,
UserCog,
Webhook
} from 'lucide-react';
import {useCallback, useEffect, useMemo, useState} from 'react'; import {useCallback, useEffect, useMemo, useState} from 'react';
import dagre from 'dagre'; import dagre from 'dagre';
import {network} from '../lib/network'; import {network} from '../lib/network';
@@ -245,7 +259,7 @@ function CustomNode({
{data.template && ( {data.template && (
<div className="mt-3 pt-3 border-t border-neutral-100"> <div className="mt-3 pt-3 border-t border-neutral-100">
<div className="flex items-center gap-2 text-xs text-neutral-600"> <div className="flex items-center gap-2 text-xs text-neutral-600">
<span className="font-medium">📧</span> <Mail className="h-3 w-3" />
<span className="truncate">{data.template.name}</span> <span className="truncate">{data.template.name}</span>
</div> </div>
</div> </div>
@@ -253,7 +267,7 @@ function CustomNode({
{data.type === 'DELAY' && data.config?.amount && ( {data.type === 'DELAY' && data.config?.amount && (
<div className="mt-3 pt-3 border-t border-neutral-100"> <div className="mt-3 pt-3 border-t border-neutral-100">
<div className="flex items-center gap-2 text-xs text-neutral-600"> <div className="flex items-center gap-2 text-xs text-neutral-600">
<span className="font-medium">⏱️</span> <Timer className="h-3 w-3" />
<span> <span>
Wait {data.config.amount} {data.config.unit} Wait {data.config.amount} {data.config.unit}
</span> </span>
@@ -264,7 +278,7 @@ function CustomNode({
<div className="mt-3 pt-3 border-t border-neutral-100"> <div className="mt-3 pt-3 border-t border-neutral-100">
<div className="text-xs text-neutral-600"> <div className="text-xs text-neutral-600">
<div className="flex items-center gap-1 mb-1"> <div className="flex items-center gap-1 mb-1">
<span className="font-medium">🔀</span> <GitBranch className="h-3 w-3" />
<span className="font-mono text-[10px] truncate"> <span className="font-mono text-[10px] truncate">
{/* Handle both legacy format {field, type} and new format (string) */} {/* Handle both legacy format {field, type} and new format (string) */}
{typeof data.config.field === 'object' && data.config.field !== null && 'field' in data.config.field {typeof data.config.field === 'object' && data.config.field !== null && 'field' in data.config.field
@@ -281,7 +295,7 @@ function CustomNode({
{data.type === 'WAIT_FOR_EVENT' && data.config?.eventName && ( {data.type === 'WAIT_FOR_EVENT' && data.config?.eventName && (
<div className="mt-3 pt-3 border-t border-neutral-100"> <div className="mt-3 pt-3 border-t border-neutral-100">
<div className="flex items-center gap-2 text-xs text-neutral-600"> <div className="flex items-center gap-2 text-xs text-neutral-600">
<span className="font-medium">⏳</span> <Hourglass className="h-3 w-3" />
<span className="truncate">{data.config.eventName}</span> <span className="truncate">{data.config.eventName}</span>
</div> </div>
</div> </div>
@@ -289,7 +303,7 @@ function CustomNode({
{data.type === 'WEBHOOK' && data.config?.url && ( {data.type === 'WEBHOOK' && data.config?.url && (
<div className="mt-3 pt-3 border-t border-neutral-100"> <div className="mt-3 pt-3 border-t border-neutral-100">
<div className="flex items-center gap-2 text-xs text-neutral-600"> <div className="flex items-center gap-2 text-xs text-neutral-600">
<span className="font-medium">🔗</span> <Link className="h-3 w-3" />
<span className="truncate text-[10px]"> <span className="truncate text-[10px]">
{data.config.method || 'POST'} {data.config.url} {data.config.method || 'POST'} {data.config.url}
</span> </span>
@@ -453,7 +467,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
target: transition.toStepId, target: transition.toStepId,
type: 'smoothstep', type: 'smoothstep',
animated: step.type === 'DELAY' || step.type === 'WAIT_FOR_EVENT', animated: step.type === 'DELAY' || step.type === 'WAIT_FOR_EVENT',
label: isConditional ? (branch === 'yes' ? '✓ Yes' : '✗ No') : undefined, label: isConditional ? (branch === 'yes' ? 'Yes' : 'No') : undefined,
labelStyle: { labelStyle: {
fill: branch === 'yes' ? '#16a34a' : branch === 'no' ? '#dc2626' : '#64748b', fill: branch === 'yes' ? '#16a34a' : branch === 'no' ? '#dc2626' : '#64748b',
fontWeight: 600, fontWeight: 600,
@@ -498,7 +512,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
target: `${step.id}-add-yes`, target: `${step.id}-add-yes`,
type: 'smoothstep', type: 'smoothstep',
animated: false, animated: false,
label: '✓ Yes', label: 'Yes',
labelStyle: {fill: '#16a34a', fontWeight: 600, fontSize: 12}, labelStyle: {fill: '#16a34a', fontWeight: 600, fontSize: 12},
labelBgStyle: {fill: '#fff', fillOpacity: 0.95}, labelBgStyle: {fill: '#fff', fillOpacity: 0.95},
labelBgPadding: [8, 4] as [number, number], labelBgPadding: [8, 4] as [number, number],
@@ -515,7 +529,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
target: `${step.id}-add-no`, target: `${step.id}-add-no`,
type: 'smoothstep', type: 'smoothstep',
animated: false, animated: false,
label: '✗ No', label: 'No',
labelStyle: {fill: '#dc2626', fontWeight: 600, fontSize: 12}, labelStyle: {fill: '#dc2626', fontWeight: 600, fontSize: 12},
labelBgStyle: {fill: '#fff', fillOpacity: 0.95}, labelBgStyle: {fill: '#fff', fillOpacity: 0.95},
labelBgPadding: [8, 4] as [number, number], labelBgPadding: [8, 4] as [number, number],
@@ -775,7 +789,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
className="bg-blue-50 border border-blue-200 px-4 py-2.5 rounded-lg shadow-lg" className="bg-blue-50 border border-blue-200 px-4 py-2.5 rounded-lg shadow-lg"
> >
<div className="flex items-center gap-2 text-sm text-blue-900"> <div className="flex items-center gap-2 text-sm text-blue-900">
<span>💡</span> <Lightbulb className="h-4 w-4" />
<span>Click the + buttons to add and connect steps!</span> <span>Click the + buttons to add and connect steps!</span>
</div> </div>
</Panel> </Panel>
apps/web/src/components/WorkflowVisualizer.tsx
+12 -11
View File
@@ -14,7 +14,7 @@ import {
} from '@xyflow/react'; } from '@xyflow/react';
import '@xyflow/react/dist/style.css'; import '@xyflow/react/dist/style.css';
import type {WorkflowStep} from '@plunk/db'; import type {WorkflowStep} from '@plunk/db';
import {Clock, GitBranch, LogOut, Mail, UserCog, Webhook} from 'lucide-react'; import {AlertTriangle, Clock, GitBranch, Hourglass, Link, LogOut, Mail, Timer, UserCog, Webhook} from 'lucide-react';
import {useEffect, useMemo} from 'react'; import {useEffect, useMemo} from 'react';
import dagre from 'dagre'; import dagre from 'dagre';
@@ -176,7 +176,7 @@ function CustomNode({
{data.template && ( {data.template && (
<div className="mt-3 pt-3 border-t border-neutral-100"> <div className="mt-3 pt-3 border-t border-neutral-100">
<div className="flex items-center gap-2 text-xs text-neutral-600"> <div className="flex items-center gap-2 text-xs text-neutral-600">
<span className="font-medium">📧</span> <Mail className="h-3 w-3" />
<span className="truncate">{data.template.name}</span> <span className="truncate">{data.template.name}</span>
</div> </div>
</div> </div>
@@ -184,7 +184,7 @@ function CustomNode({
{data.type === 'DELAY' && data.config?.amount && ( {data.type === 'DELAY' && data.config?.amount && (
<div className="mt-3 pt-3 border-t border-neutral-100"> <div className="mt-3 pt-3 border-t border-neutral-100">
<div className="flex items-center gap-2 text-xs text-neutral-600"> <div className="flex items-center gap-2 text-xs text-neutral-600">
<span className="font-medium">⏱️</span> <Timer className="h-3 w-3" />
<span> <span>
Wait {data.config.amount} {data.config.unit} Wait {data.config.amount} {data.config.unit}
</span> </span>
@@ -193,15 +193,16 @@ function CustomNode({
)} )}
{data.type === 'CONDITION' && ( {data.type === 'CONDITION' && (
<div className="mt-3 pt-3 border-t border-neutral-100"> <div className="mt-3 pt-3 border-t border-neutral-100">
<div className="text-xs text-neutral-600"> <div className="flex items-center gap-1 text-xs text-neutral-600">
<span className="font-medium">🔀</span> If/Else Branch <GitBranch className="h-3 w-3" />
<span>If/Else Branch</span>
</div> </div>
</div> </div>
)} )}
{data.type === 'WAIT_FOR_EVENT' && data.config?.eventName && ( {data.type === 'WAIT_FOR_EVENT' && data.config?.eventName && (
<div className="mt-3 pt-3 border-t border-neutral-100"> <div className="mt-3 pt-3 border-t border-neutral-100">
<div className="flex items-center gap-2 text-xs text-neutral-600"> <div className="flex items-center gap-2 text-xs text-neutral-600">
<span className="font-medium">⏳</span> <Hourglass className="h-3 w-3" />
<span className="truncate">{data.config.eventName}</span> <span className="truncate">{data.config.eventName}</span>
</div> </div>
</div> </div>
@@ -209,7 +210,7 @@ function CustomNode({
{data.type === 'WEBHOOK' && data.config?.url && ( {data.type === 'WEBHOOK' && data.config?.url && (
<div className="mt-3 pt-3 border-t border-neutral-100"> <div className="mt-3 pt-3 border-t border-neutral-100">
<div className="flex items-center gap-2 text-xs text-neutral-600"> <div className="flex items-center gap-2 text-xs text-neutral-600">
<span className="font-medium">🔗</span> <Link className="h-3 w-3" />
<span className="truncate">{data.config.method || 'POST'}</span> <span className="truncate">{data.config.method || 'POST'}</span>
</div> </div>
</div> </div>
@@ -333,7 +334,7 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
target: transition.toStepId, target: transition.toStepId,
type: 'smoothstep', type: 'smoothstep',
animated: false, animated: false,
label: isConditional ? (branch === 'yes' ? '✓ Yes' : '✗ No') : undefined, label: isConditional ? (branch === 'yes' ? 'Yes' : 'No') : undefined,
labelStyle: { labelStyle: {
fill: branch === 'yes' ? '#16a34a' : branch === 'no' ? '#dc2626' : '#64748b', fill: branch === 'yes' ? '#16a34a' : branch === 'no' ? '#dc2626' : '#64748b',
fontWeight: 600, fontWeight: 600,
@@ -376,7 +377,7 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
target: `${step.id}-yes-end`, target: `${step.id}-yes-end`,
type: 'smoothstep', type: 'smoothstep',
animated: false, animated: false,
label: '✓ Yes', label: 'Yes',
labelStyle: { labelStyle: {
fill: '#16a34a', fill: '#16a34a',
fontWeight: 600, fontWeight: 600,
@@ -409,7 +410,7 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
target: `${step.id}-no-end`, target: `${step.id}-no-end`,
type: 'smoothstep', type: 'smoothstep',
animated: false, animated: false,
label: '✗ No', label: 'No',
labelStyle: { labelStyle: {
fill: '#dc2626', fill: '#dc2626',
fontWeight: 600, fontWeight: 600,
@@ -518,7 +519,7 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
className="bg-amber-50 border border-amber-200 px-4 py-2.5 rounded-lg shadow-lg" className="bg-amber-50 border border-amber-200 px-4 py-2.5 rounded-lg shadow-lg"
> >
<div className="flex items-center gap-2 text-sm text-amber-900"> <div className="flex items-center gap-2 text-sm text-amber-900">
<span>⚠️</span> <AlertTriangle className="h-4 w-4" />
<span>No transitions found. Connect your steps to see the flow.</span> <span>No transitions found. Connect your steps to see the flow.</span>
</div> </div>
</Panel> </Panel>
apps/web/src/pages/campaigns/[id].tsx
+43 -11
View File
@@ -23,6 +23,7 @@ import {
Select, Select,
SelectContent, SelectContent,
SelectItem, SelectItem,
SelectItemWithDescription,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
StickySaveBar StickySaveBar
@@ -343,20 +344,36 @@ export default function CampaignDetailsPage() {
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1>
<Badge variant="secondary">Draft</Badge> <Badge variant="secondary">Draft</Badge>
</div> </div>
<p className="text-neutral-500 mt-1 text-sm sm:text-base">Make changes to your campaign before sending</p> <p className="text-neutral-500 mt-1 text-sm sm:text-base">
Make changes to your campaign before sending
</p>
</div> </div>
</div> </div>
<div className="flex flex-col sm:flex-row sm:items-center gap-3"> <div className="flex flex-col sm:flex-row sm:items-center gap-3">
<div className="flex-1"> <div className="flex-1">
{!hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-neutral-500">All changes saved</span>} {!hasChanges && !isSubmitting && (
{hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-amber-600">Unsaved changes</span>} <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>
<div className="flex gap-2"> <div className="flex gap-2">
<Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none"> <Button
type="button"
variant="destructive"
onClick={() => setShowDeleteDialog(true)}
className="flex-1 sm:flex-none"
>
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span className="hidden sm:inline">Delete</span> <span className="hidden sm:inline">Delete</span>
</Button> </Button>
<Button type="submit" disabled={!hasChanges || isSubmitting} variant="outline" className="flex-1 sm:flex-none"> <Button
type="submit"
disabled={!hasChanges || isSubmitting}
variant="outline"
className="flex-1 sm:flex-none"
>
<Save className="h-4 w-4" /> <Save className="h-4 w-4" />
<span className="hidden sm:inline">{isSubmitting ? 'Saving...' : 'Save'}</span> <span className="hidden sm:inline">{isSubmitting ? 'Saving...' : 'Save'}</span>
<span className="sm:hidden">Save</span> <span className="sm:hidden">Save</span>
@@ -470,9 +487,21 @@ export default function CampaignDetailsPage() {
<SelectValue placeholder="Select audience type" /> <SelectValue placeholder="Select audience type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value={CampaignAudienceType.ALL}>All Subscribed Contacts</SelectItem> <SelectItemWithDescription
<SelectItem value={CampaignAudienceType.SEGMENT}>Segment</SelectItem> value={CampaignAudienceType.ALL}
<SelectItem value={CampaignAudienceType.FILTERED}>Filtered</SelectItem> title="All Subscribed Contacts"
description="Send to everyone who hasn't unsubscribed"
/>
<SelectItemWithDescription
value={CampaignAudienceType.SEGMENT}
title="Segment"
description="Target a defined group of contacts"
/>
<SelectItemWithDescription
value={CampaignAudienceType.FILTERED}
title="Filtered"
description="Use advanced filter conditions"
/>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@@ -499,9 +528,12 @@ export default function CampaignDetailsPage() {
{segments && {segments &&
segments.length > 0 && segments.length > 0 &&
segments.map(segment => ( segments.map(segment => (
<SelectItem key={segment.id} value={segment.id}> <SelectItemWithDescription
{segment.name} ({segment.memberCount.toLocaleString()} contacts) key={segment.id}
</SelectItem> value={segment.id}
title={segment.name}
description={`${segment.memberCount.toLocaleString()} contacts`}
/>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
apps/web/src/pages/campaigns/create.tsx
+26 -9
View File
@@ -9,9 +9,9 @@ import {
Label, Label,
Select, Select,
SelectContent, SelectContent,
SelectItem, SelectItemWithDescription,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue
} from '@plunk/ui'; } from '@plunk/ui';
import type {Segment} from '@plunk/db'; import type {Segment} from '@plunk/db';
import {CampaignAudienceType} from '@plunk/db'; import {CampaignAudienceType} from '@plunk/db';
@@ -104,7 +104,9 @@ export default function CreateCampaignPage() {
</Link> </Link>
<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">Create Campaign</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Campaign</h1>
<p className="text-neutral-500 mt-1 text-sm sm:text-base">Create a new email campaign to send to your contacts</p> <p className="text-neutral-500 mt-1 text-sm sm:text-base">
Create a new email campaign to send to your contacts
</p>
</div> </div>
</div> </div>
@@ -116,7 +118,11 @@ export default function CreateCampaignPage() {
{/* Basic Information */} {/* Basic Information */}
<Card> <Card>
<CardHeader> <CardHeader>
<StepHeader stepNumber={1} title="Basic Information" description="Name and describe your campaign" /> <StepHeader
stepNumber={1}
title="Basic Information"
description="Name and describe your campaign"
/>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
@@ -219,8 +225,16 @@ export default function CreateCampaignPage() {
<SelectValue placeholder="Select audience type" /> <SelectValue placeholder="Select audience type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value={CampaignAudienceType.ALL}>All Subscribed Contacts</SelectItem> <SelectItemWithDescription
<SelectItem value={CampaignAudienceType.SEGMENT}>Specific Segment</SelectItem> value={CampaignAudienceType.ALL}
title="All Subscribed Contacts"
description="Send to everyone who hasn't unsubscribed"
/>
<SelectItemWithDescription
value={CampaignAudienceType.SEGMENT}
title="Specific Segment"
description="Target a defined group of contacts"
/>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@@ -236,9 +250,12 @@ export default function CreateCampaignPage() {
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{segments?.map(segment => ( {segments?.map(segment => (
<SelectItem key={segment.id} value={segment.id}> <SelectItemWithDescription
{segment.name} ({segment.memberCount.toLocaleString()} contacts) key={segment.id}
</SelectItem> value={segment.id}
title={segment.name}
description={`${segment.memberCount.toLocaleString()} contacts`}
/>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
apps/web/src/pages/workflows/[id].tsx
+12 -6
View File
@@ -1137,9 +1137,12 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{templatesData?.templates.map(template => ( {templatesData?.templates.map(template => (
<SelectItem key={template.id} value={template.id}> <SelectItemWithDescription
{template.name} key={template.id}
</SelectItem> value={template.id}
title={template.name}
description={`${template.type === 'TRANSACTIONAL' ? 'Transactional' : 'Marketing'} • Subject: ${template.subject}`}
/>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
@@ -1752,9 +1755,12 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{templatesData?.templates.map(template => ( {templatesData?.templates.map(template => (
<SelectItem key={template.id} value={template.id}> <SelectItemWithDescription
{template.name} key={template.id}
</SelectItem> value={template.id}
title={template.name}
description={`${template.type === 'TRANSACTIONAL' ? 'Transactional' : 'Marketing'} • Subject: ${template.subject}`}
/>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>