vynte-infra/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive design

Browse Source
This commit is contained in:
Dries Augustyns
2025-12-04 11:23:55 +01:00
parent 736672007b
commit 6fe3779fcb
20 changed files with 428 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/DashboardLayout.tsx
+170 -124
View File
@@ -10,11 +10,13 @@ import {
LayoutDashboard,
LogOut,
Megaphone,
Menu,
Plus,
Settings,
User,
Users,
Workflow,
X,
} from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
@@ -65,6 +67,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
const {activeProject, availableProjects, setActiveProject} = useActiveProject();
const [showProjectMenu, setShowProjectMenu] = useState(false);
const [showUserMenu, setShowUserMenu] = useState(false);
const [showMobileMenu, setShowMobileMenu] = useState(false);
const projectMenuRef = useRef<HTMLDivElement>(null);
const userMenuRef = useRef<HTMLDivElement>(null);
@@ -128,142 +131,185 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
void handleLogout();
}, [handleLogout]);
// Sidebar content (reusable for both desktop and mobile)
const SidebarContent = () => (
<>
{/* Logo */}
<div className="h-16 flex items-center gap-2 px-6 border-b border-neutral-200">
<Image src="/assets/logo.png" alt="Plunk" width={28} height={28} className="rounded" />
<h1 className="text-xl font-bold text-neutral-900">Plunk</h1>
</div>
{/* Project Switcher */}
<div className="p-4 border-b border-neutral-200">
<div className="relative" ref={projectMenuRef}>
<button
onClick={handleToggleProjectMenu}
className="w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-neutral-50 transition-colors"
>
<div className="flex items-center gap-2 flex-1 min-w-0">
<div className="h-8 w-8 rounded-lg bg-neutral-900 text-white flex items-center justify-center text-xs font-medium flex-shrink-0">
{activeProject?.name.charAt(0).toUpperCase() || 'P'}
</div>
<span className="font-medium text-neutral-900 truncate">{activeProject?.name || 'Select project'}</span>
</div>
<ChevronDown className="h-4 w-4 text-neutral-500 flex-shrink-0" />
</button>
{/* Project Dropdown */}
{showProjectMenu && (
<div className="absolute top-full left-0 right-0 mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
{availableProjects.map(project => (
<button
key={project.id}
onClick={() => {
setActiveProject(project);
setShowProjectMenu(false);
}}
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors"
>
<div className="h-6 w-6 rounded bg-neutral-900 text-white flex items-center justify-center text-xs font-medium">
{project.name.charAt(0).toUpperCase()}
</div>
<span className="text-neutral-900">{project.name}</span>
{activeProject?.id === project.id && (
<div className="ml-auto h-1.5 w-1.5 rounded-full bg-neutral-900" />
)}
</button>
))}
<div className="border-t border-neutral-200 my-1" />
<Link
href="/projects/create"
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-neutral-700"
>
<Plus className="h-4 w-4" />
<span>Create project</span>
</Link>
</div>
)}
</div>
</div>
{/* Navigation */}
<nav className="flex-1 px-3 py-4 overflow-y-auto">
{navigation.map((section, sectionIndex) => (
<div key={sectionIndex} className={sectionIndex > 0 ? 'mt-6' : ''}>
{section.title && (
<p className="px-3 mb-2 text-xs font-semibold text-neutral-500 uppercase tracking-wider">
{section.title}
</p>
)}
<div className="space-y-1">
{section.items.map(item => {
const isActive = router.pathname === item.href;
const Icon = item.icon;
return (
<Link
key={item.name}
href={item.href}
onClick={() => setShowMobileMenu(false)}
className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700 ${
isActive ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
}`}
>
<Icon className="h-5 w-5" />
{item.name}
</Link>
);
})}
</div>
</div>
))}
</nav>
{/* Settings & User Menu */}
<div className="border-t border-neutral-200 p-3 space-y-1">
<Link
href="/settings"
onClick={() => setShowMobileMenu(false)}
className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700 ${
router.pathname.startsWith('/settings') ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
}`}
>
<Settings className="h-5 w-5" />
Settings
</Link>
<div className="relative" ref={userMenuRef}>
<button
onClick={handleToggleUserMenu}
className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 transition-colors"
>
<User className="h-5 w-5" />
<span className="flex-1 text-left truncate">{user?.email}</span>
<ChevronDown className="h-4 w-4 text-neutral-500" />
</button>
{/* User Dropdown */}
{showUserMenu && (
<div className="absolute bottom-full left-0 right-0 mb-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
<button
onClick={handleLogoutClick}
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-red-600"
>
<LogOut className="h-4 w-4" />
<span>Log out</span>
</button>
</div>
)}
</div>
</div>
</>
);
return (
<div className="flex h-screen bg-neutral-50">
{/* Sidebar */}
<div className="w-64 bg-white border-r border-neutral-200 flex flex-col">
{/* Logo */}
<div className="h-16 flex items-center gap-2 px-6 border-b border-neutral-200">
<Image src="/assets/logo.png" alt="Plunk" width={28} height={28} className="rounded" />
<h1 className="text-xl font-bold text-neutral-900">Plunk</h1>
{/* Desktop Sidebar - Hidden on mobile */}
<div className="hidden lg:flex w-64 bg-white border-r border-neutral-200 flex-col">
<SidebarContent />
</div>
{/* Mobile Sidebar Overlay */}
{showMobileMenu && (
<div
className="fixed inset-0 z-40 lg:hidden"
onClick={() => setShowMobileMenu(false)}
>
<div className="absolute inset-0 bg-black/50" />
</div>
)}
{/* Project Switcher */}
<div className="p-4 border-b border-neutral-200">
<div className="relative" ref={projectMenuRef}>
<button
onClick={handleToggleProjectMenu}
className="w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-neutral-50 transition-colors"
>
<div className="flex items-center gap-2 flex-1 min-w-0">
<div className="h-8 w-8 rounded-lg bg-neutral-900 text-white flex items-center justify-center text-xs font-medium flex-shrink-0">
{activeProject?.name.charAt(0).toUpperCase() || 'P'}
</div>
<span className="font-medium text-neutral-900 truncate">{activeProject?.name || 'Select project'}</span>
</div>
<ChevronDown className="h-4 w-4 text-neutral-500 flex-shrink-0" />
</button>
{/* Project Dropdown */}
{showProjectMenu && (
<div className="absolute top-full left-0 right-0 mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
{availableProjects.map(project => (
<button
key={project.id}
onClick={() => {
setActiveProject(project);
setShowProjectMenu(false);
}}
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors"
>
<div className="h-6 w-6 rounded bg-neutral-900 text-white flex items-center justify-center text-xs font-medium">
{project.name.charAt(0).toUpperCase()}
</div>
<span className="text-neutral-900">{project.name}</span>
{activeProject?.id === project.id && (
<div className="ml-auto h-1.5 w-1.5 rounded-full bg-neutral-900" />
)}
</button>
))}
<div className="border-t border-neutral-200 my-1" />
<Link
href="/projects/create"
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-neutral-700"
>
<Plus className="h-4 w-4" />
<span>Create project</span>
</Link>
</div>
)}
</div>
</div>
{/* Navigation */}
<nav className="flex-1 px-3 py-4 overflow-y-auto">
{navigation.map((section, sectionIndex) => (
<div key={sectionIndex} className={sectionIndex > 0 ? 'mt-6' : ''}>
{section.title && (
<p className="px-3 mb-2 text-xs font-semibold text-neutral-500 uppercase tracking-wider">
{section.title}
</p>
)}
<div className="space-y-1">
{section.items.map(item => {
const isActive = router.pathname === item.href;
const Icon = item.icon;
return (
<Link
key={item.name}
href={item.href}
className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700 ${
isActive ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
}`}
>
<Icon className="h-5 w-5" />
{item.name}
</Link>
);
})}
</div>
</div>
))}
</nav>
{/* Settings & User Menu */}
<div className="border-t border-neutral-200 p-3 space-y-1">
<Link
href="/settings"
className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700 ${
router.pathname.startsWith('/settings') ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
}`}
>
<Settings className="h-5 w-5" />
Settings
</Link>
<div className="relative" ref={userMenuRef}>
<button
onClick={handleToggleUserMenu}
className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 transition-colors"
>
<User className="h-5 w-5" />
<span className="flex-1 text-left truncate">{user?.email}</span>
<ChevronDown className="h-4 w-4 text-neutral-500" />
</button>
{/* User Dropdown */}
{showUserMenu && (
<div className="absolute bottom-full left-0 right-0 mb-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
<button
onClick={handleLogoutClick}
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-red-600"
>
<LogOut className="h-4 w-4" />
<span>Log out</span>
</button>
</div>
)}
</div>
{/* Mobile Sidebar */}
<div
className={`fixed inset-y-0 left-0 z-50 w-64 bg-white transform transition-transform duration-300 ease-in-out lg:hidden ${
showMobileMenu ? 'translate-x-0' : '-translate-x-full'
}`}
>
<div className="flex flex-col h-full">
<SidebarContent />
</div>
</div>
{/* Main Content */}
<div className="flex-1 flex flex-col overflow-hidden">
{/* Header */}
{/* Mobile Header - Only visible on mobile */}
<div className="lg:hidden h-16 bg-white border-b border-neutral-200 flex items-center px-4">
<button
onClick={() => setShowMobileMenu(true)}
className="p-2 rounded-lg hover:bg-neutral-100 transition-colors"
aria-label="Open menu"
>
<Menu className="h-6 w-6 text-neutral-900" />
</button>
<div className="flex items-center gap-2 ml-4">
<Image src="/assets/logo.png" alt="Plunk" width={24} height={24} className="rounded" />
<h1 className="text-lg font-bold text-neutral-900">Plunk</h1>
</div>
</div>
{/* Page Content */}
<main className="flex-1 overflow-y-auto">
<div className="max-w-7xl mx-auto p-8">{children}</div>
<div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8">{children}</div>
</main>
</div>
</div>
apps/web/src/components/EmailEditor/EmailEditor.tsx
+7 -7
View File
@@ -396,7 +396,7 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
return (
<div className="border border-neutral-200 rounded-lg bg-white">
{/* Mode toggle */}
<div className="border-b border-neutral-200 bg-neutral-50 p-2 flex justify-between items-center">
<div className="border-b border-neutral-200 bg-neutral-50 p-2 flex flex-col sm:flex-row justify-between sm:items-center gap-2">
<div className="flex gap-1">
<Button
type="button"
@@ -404,8 +404,8 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
size="sm"
onClick={() => mode === 'html' && handleModeToggle()}
>
<Eye className="h-4 w-4 mr-2" />
Visual
<Eye className="h-4 w-4 sm:mr-2" />
<span className="hidden sm:inline">Visual</span>
</Button>
<Button
type="button"
@@ -413,11 +413,11 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
size="sm"
onClick={() => mode === 'visual' && handleModeToggle()}
>
<Code2 className="h-4 w-4 mr-2" />
HTML
<Code2 className="h-4 w-4 sm:mr-2" />
<span className="hidden sm:inline">HTML</span>
</Button>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 flex-1 sm:flex-none">
<Label htmlFor="preview-contact" className="text-xs text-neutral-600 whitespace-nowrap">
Preview as:
</Label>
@@ -425,7 +425,7 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
value={selectedContactId || 'none'}
onValueChange={val => setSelectedContactId(val === 'none' ? '' : val)}
>
<SelectTrigger id="preview-contact" className="h-8 w-[200px] text-xs">
<SelectTrigger id="preview-contact" className="h-8 w-full sm:w-[200px] text-xs">
<SelectValue placeholder="Select contact..." />
</SelectTrigger>
<SelectContent>
apps/web/src/pages/_document.tsx
+3
View File
@@ -4,6 +4,9 @@ function Document({locale}: {locale: string}) {
return (
<Html lang={locale}>
<Head>
{/* Viewport */}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
{/* Primary Meta Tags */}
<meta name="title" content="Plunk | Email Platform Dashboard" />
<meta
apps/web/src/pages/activity/index.tsx
+2 -2
View File
@@ -78,8 +78,8 @@ export default function ActivityPage() {
<div className="space-y-6">
{/* Header */}
<div>
<h1 className="text-3xl font-bold text-neutral-900">Activity</h1>
<p className="text-neutral-500 mt-2">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Activity</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Real-time overview of events, emails, and workflow executions across your project.
</p>
</div>
apps/web/src/pages/analytics/index.tsx
+5 -5
View File
@@ -211,16 +211,16 @@ export default function AnalyticsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-start justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Analytics</h1>
<p className="text-neutral-500 mt-2">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Analytics</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Comprehensive insights into your email performance, engagement metrics, and delivery statistics.
</p>
</div>
<div className="flex gap-3">
<Select value={dateRange} onValueChange={setDateRange}>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-full sm:w-[180px]">
<SelectValue placeholder="Select period" />
</SelectTrigger>
<SelectContent>
apps/web/src/pages/auth/login.tsx
+1 -1
View File
@@ -294,7 +294,7 @@ export default function Login() {
}
}}
>
<DialogContent className="max-w-md">
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Reset your password</DialogTitle>
<DialogDescription>Enter your email to receive a password reset link.</DialogDescription>
apps/web/src/pages/campaigns/[id].tsx
+34 -28
View File
@@ -331,39 +331,42 @@ export default function CampaignDetailsPage() {
<DashboardLayout>
<form onSubmit={handleSave} className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/campaigns">
<Button type="button" variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold text-neutral-900">{c.name}</h1>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 sm:gap-3">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1>
<Badge variant="secondary">Draft</Badge>
</div>
<p className="text-neutral-500 mt-1">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 className="flex items-center gap-3">
{!hasChanges && !isSubmitting && <span className="text-sm text-neutral-500">All changes saved</span>}
{hasChanges && !isSubmitting && <span className="text-sm text-amber-600">Unsaved changes</span>}
<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 gap-2">
<Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)}>
<Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none">
<Trash2 className="h-4 w-4" />
Delete
<span className="hidden sm:inline">Delete</span>
</Button>
<Button type="submit" disabled={!hasChanges || isSubmitting} variant="outline">
<Button type="submit" disabled={!hasChanges || isSubmitting} variant="outline" className="flex-1 sm:flex-none">
<Save className="h-4 w-4" />
{isSubmitting ? 'Saving...' : 'Save'}
<span className="hidden sm:inline">{isSubmitting ? 'Saving...' : 'Save'}</span>
<span className="sm:hidden">Save</span>
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button type="button">
<Button type="button" className="flex-1 sm:flex-none">
<Send className="h-4 w-4" />
Send
<ChevronDown className="h-4 w-4 ml-1" />
<span className="hidden sm:inline">Send</span>
<ChevronDown className="h-4 w-4 sm:ml-1" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
@@ -553,7 +556,7 @@ export default function CampaignDetailsPage() {
{/* Test Email Dialog */}
<Dialog open={isTestEmailDialogOpen} onOpenChange={setIsTestEmailDialogOpen}>
<DialogContent className="max-w-lg">
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Send Test Email</DialogTitle>
<DialogDescription>
@@ -604,7 +607,7 @@ export default function CampaignDetailsPage() {
{/* Schedule Dialog */}
<Dialog open={isScheduleDialogOpen} onOpenChange={setIsScheduleDialogOpen}>
<DialogContent className="max-w-lg">
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Schedule Campaign</DialogTitle>
<DialogDescription>
@@ -742,28 +745,31 @@ export default function CampaignDetailsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/campaigns">
<Button variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<div className="flex items-center gap-3 mb-2">
<h1 className="text-3xl font-bold text-neutral-900">{c.name}</h1>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 sm:gap-3 mb-2">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1>
{getStatusBadge(c.status)}
</div>
{c.description && <p className="text-neutral-500">{c.description}</p>}
{c.description && <p className="text-neutral-500 text-sm sm:text-base">{c.description}</p>}
</div>
</div>
{/* Actions */}
{(c.status === CampaignStatus.SCHEDULED || c.status === CampaignStatus.SENDING) && (
<Button variant="destructive" onClick={() => setShowCancelDialog(true)}>
<XCircle className="h-4 w-4" />
Cancel Campaign
</Button>
<div className="flex justify-end">
<Button variant="destructive" onClick={() => setShowCancelDialog(true)} className="w-full sm:w-auto">
<XCircle className="h-4 w-4" />
<span className="hidden sm:inline">Cancel Campaign</span>
<span className="sm:hidden">Cancel</span>
</Button>
</div>
)}
</div>
apps/web/src/pages/campaigns/create.tsx
+9 -11
View File
@@ -96,17 +96,15 @@ export default function CreateCampaignPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<Link href="/campaigns">
<Button variant="ghost" size="icon">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<h1 className="text-3xl font-bold text-neutral-900">Create Campaign</h1>
<p className="text-neutral-500 mt-1">Create a new email campaign to send to your contacts</p>
</div>
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/campaigns">
<Button variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div className="flex-1 min-w-0">
<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>
</div>
</div>
apps/web/src/pages/campaigns/index.tsx
+8 -7
View File
@@ -109,17 +109,18 @@ export default function CampaignsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Campaigns</h1>
<p className="text-neutral-500 mt-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Campaigns</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Send one-time email broadcasts to your contacts. {data?.total ? `${data.total} total campaigns` : ''}
</p>
</div>
<Link href="/campaigns/create">
<Button>
<Link href="/campaigns/create" className="w-full sm:w-auto">
<Button className="w-full sm:w-auto">
<Plus className="h-4 w-4" />
Create Campaign
<span className="hidden sm:inline">Create Campaign</span>
<span className="sm:hidden">Create</span>
</Button>
</Link>
</div>
apps/web/src/pages/contacts/[id].tsx
+12 -9
View File
@@ -129,18 +129,18 @@ export default function ContactDetailPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/contacts">
<Button variant="outline" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<h1 className="text-3xl font-bold text-neutral-900">{contact.email}</h1>
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{contact.email}</h1>
<p className="text-neutral-500 mt-1">
<span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
className={`inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium ${
contact.subscribed ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
}`}
>
@@ -149,10 +149,13 @@ export default function ContactDetailPage() {
</p>
</div>
</div>
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)}>
<Trash2 className="h-4 w-4" />
Delete Contact
</Button>
<div className="flex justify-end">
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)} className="w-full sm:w-auto">
<Trash2 className="h-4 w-4" />
<span className="hidden sm:inline">Delete Contact</span>
<span className="sm:hidden">Delete</span>
</Button>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
apps/web/src/pages/contacts/index.tsx
+79 -25
View File
@@ -133,23 +133,27 @@ export default function ContactsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Contacts</h1>
<p className="text-neutral-500 mt-2">
Manage your email subscribers and their data.{' '}
{totalCount > 0 ? `${totalCount.toLocaleString()} total contacts` : ''}
</p>
</div>
<div className="flex gap-2">
<Button variant="outline" onClick={() => setShowImportDialog(true)}>
<Upload className="h-4 w-4" />
Import CSV
</Button>
<Button onClick={() => setShowCreateDialog(true)}>
<Plus className="h-4 w-4" />
Add Contact
</Button>
<div className="space-y-4">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Contacts</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Manage your email subscribers and their data.{' '}
{totalCount > 0 ? `${totalCount.toLocaleString()} total contacts` : ''}
</p>
</div>
<div className="flex gap-2">
<Button variant="outline" onClick={() => setShowImportDialog(true)} className="flex-1 sm:flex-none">
<Upload className="h-4 w-4" />
<span className="hidden sm:inline">Import CSV</span>
<span className="sm:hidden">Import</span>
</Button>
<Button onClick={() => setShowCreateDialog(true)} className="flex-1 sm:flex-none">
<Plus className="h-4 w-4" />
<span className="hidden sm:inline">Add Contact</span>
<span className="sm:hidden">Add</span>
</Button>
</div>
</div>
</div>
@@ -233,7 +237,8 @@ export default function ContactsPage() {
</div>
) : (
<>
<div className="overflow-x-auto">
{/* Desktop Table View - Hidden on mobile */}
<div className="hidden md:block overflow-x-auto">
<table className="w-full">
<thead className="bg-neutral-50 border-b border-neutral-200">
<tr>
@@ -294,10 +299,53 @@ export default function ContactsPage() {
</table>
</div>
{/* Mobile Card View - Only visible on mobile */}
<div className="md:hidden space-y-3">
{contacts.map(contact => (
<div
key={contact.id}
className="border border-neutral-200 rounded-lg p-4 bg-white hover:bg-neutral-50 transition-colors"
>
<div className="flex items-start justify-between gap-3 mb-3">
<div className="flex items-center gap-2 flex-1 min-w-0">
{contact.subscribed ? (
<MailCheck className="h-4 w-4 text-green-600 flex-shrink-0" />
) : (
<MailX className="h-4 w-4 text-red-600 flex-shrink-0" />
)}
<span className="text-sm font-medium text-neutral-900 truncate">{contact.email}</span>
</div>
<span
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${
contact.subscribed ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
}`}
>
{contact.subscribed ? 'Subscribed' : 'Unsubscribed'}
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-neutral-500">
{new Date(contact.createdAt).toLocaleDateString()}
</span>
<div className="flex items-center gap-1">
<Link href={`/contacts/${contact.id}`}>
<Button variant="ghost" size="sm">
<Edit className="h-4 w-4" />
</Button>
</Link>
<Button variant="ghost" size="sm" onClick={() => promptDelete(contact.id)}>
<Trash2 className="h-4 w-4 text-red-600" />
</Button>
</div>
</div>
</div>
))}
</div>
{/* Pagination Controls */}
{(currentPage > 0 || data?.hasMore) && (
<div className="flex items-center justify-between mt-6 pt-6 border-t border-neutral-200">
<div className="text-sm text-neutral-600">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mt-6 pt-6 border-t border-neutral-200">
<div className="text-xs sm:text-sm text-neutral-600 text-center sm:text-left">
Showing <span className="font-medium text-neutral-900">{currentPage * pageSize + 1}</span> to{' '}
<span className="font-medium text-neutral-900">{currentPage * pageSize + contacts.length}</span>
{totalCount > 0 && (
@@ -307,17 +355,23 @@ export default function ContactsPage() {
</>
)}
</div>
<div className="flex gap-2">
<div className="flex gap-2 justify-center sm:justify-end">
<Button
variant="outline"
onClick={handlePreviousPage}
disabled={currentPage === 0 || isLoading}
className="flex-1 sm:flex-none"
>
<ChevronLeft className="h-4 w-4" />
Previous
<span className="hidden sm:inline">Previous</span>
</Button>
<Button variant="outline" onClick={handleNextPage} disabled={!data?.hasMore || isLoading}>
Next
<Button
variant="outline"
onClick={handleNextPage}
disabled={!data?.hasMore || isLoading}
className="flex-1 sm:flex-none"
>
<span className="hidden sm:inline">Next</span>
<ChevronRight className="h-4 w-4" />
</Button>
</div>
@@ -626,7 +680,7 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
return (
<>
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="max-w-2xl">
<DialogContent className="sm:max-w-2xl">
<DialogHeader>
<DialogTitle>Import Contacts from CSV</DialogTitle>
</DialogHeader>
apps/web/src/pages/index.tsx
+5 -5
View File
@@ -70,10 +70,10 @@ export default function Index() {
<Alert variant="warning">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Upgrade to remove Plunk branding</AlertTitle>
<AlertDescription className="flex items-center justify-between">
<span>Your emails currently include Plunk branding. Upgrade to a subscription to remove it.</span>
<AlertDescription className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<span className="text-sm">Your emails currently include Plunk branding. Upgrade to a subscription to remove it.</span>
<Link href="/settings?tab=billing">
<Button size="sm">Upgrade Now</Button>
<Button size="sm" className="w-full sm:w-auto">Upgrade Now</Button>
</Link>
</AlertDescription>
</Alert>
@@ -81,8 +81,8 @@ export default function Index() {
{/* Header */}
<div>
<h1 className="text-3xl font-bold text-neutral-900">Dashboard</h1>
<p className="text-neutral-500 mt-2">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Dashboard</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Welcome back to {activeProject?.name || 'Plunk'}. Here&apos;s what&apos;s happening with your emails.
</p>
</div>
apps/web/src/pages/segments/index.tsx
+8 -7
View File
@@ -73,17 +73,18 @@ export default function SegmentsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Segments</h1>
<p className="text-neutral-500 mt-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Segments</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Create dynamic audience groups based on contact attributes and behaviors
</p>
</div>
<Link href="/segments/new">
<Button>
<Link href="/segments/new" className="w-full sm:w-auto">
<Button className="w-full sm:w-auto">
<Plus className="h-4 w-4" />
Create Segment
<span className="hidden sm:inline">Create Segment</span>
<span className="sm:hidden">Create</span>
</Button>
</Link>
</div>
apps/web/src/pages/templates/[id].tsx
+21 -16
View File
@@ -147,29 +147,34 @@ export default function TemplateEditorPage() {
<DashboardLayout>
<form onSubmit={handleSave} className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/templates">
<Button type="button" variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<h1 className="text-3xl font-bold text-neutral-900">Edit Template</h1>
<p className="text-neutral-500 mt-1">Make changes to your email template</p>
<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 items-center gap-3">
{!hasChanges && !isSubmitting && <span className="text-sm text-neutral-500">All changes saved</span>}
{hasChanges && !isSubmitting && <span className="text-sm text-amber-600">Unsaved changes</span>}
<Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)}>
<Trash2 className="h-4 w-4" />
Delete
</Button>
<Button type="submit" disabled={!hasChanges || isSubmitting}>
<Save className="h-4 w-4" />
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
<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>
</div>
</div>
apps/web/src/pages/templates/create.tsx
+17 -12
View File
@@ -77,20 +77,25 @@ export default function CreateTemplatePage() {
<DashboardLayout>
<div className="max-w-5xl mx-auto space-y-6">
{/* Header */}
<div className="flex items-center gap-4">
<Link href="/templates">
<Button variant="ghost" size="icon">
<ArrowLeft className="h-4 w-4" />
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/templates">
<Button variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Template</h1>
<p className="text-neutral-500 mt-1 text-sm sm:text-base">Create a reusable email template for campaigns and workflows</p>
</div>
</div>
<div className="flex justify-end">
<Button onClick={handleSubmit} disabled={saving} className="w-full sm:w-auto">
<Save className="h-4 w-4" />
<span className="hidden sm:inline">{saving ? 'Creating...' : 'Create Template'}</span>
<span className="sm:hidden">{saving ? 'Creating...' : 'Create'}</span>
</Button>
</Link>
<div className="flex-1">
<h1 className="text-3xl font-bold text-neutral-900">Create Template</h1>
<p className="text-neutral-500 mt-1">Create a reusable email template for campaigns and workflows</p>
</div>
<Button onClick={handleSubmit} disabled={saving}>
<Save className="h-4 w-4" />
{saving ? 'Creating...' : 'Create Template'}
</Button>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
apps/web/src/pages/templates/index.tsx
+8 -7
View File
@@ -66,18 +66,19 @@ export default function TemplatesPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Email Templates</h1>
<p className="text-neutral-500 mt-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Email Templates</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Create and manage reusable email templates for your campaigns and workflows.{' '}
{data?.total ? `${data.total} total templates` : ''}
</p>
</div>
<Link href="/templates/create">
<Button>
<Link href="/templates/create" className="w-full sm:w-auto">
<Button className="w-full sm:w-auto">
<Plus className="h-4 w-4" />
Create Template
<span className="hidden sm:inline">Create Template</span>
<span className="sm:hidden">Create</span>
</Button>
</Link>
</div>
apps/web/src/pages/workflows/[id].tsx
+23 -21
View File
@@ -383,56 +383,58 @@ export default function WorkflowEditorPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/workflows">
<Button variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold text-neutral-900">{workflow.name}</h1>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 sm:gap-3">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{workflow.name}</h1>
<span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
className={`inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${
workflow.enabled ? 'bg-green-100 text-green-800' : 'bg-neutral-100 text-neutral-800'
}`}
>
{workflow.enabled ? (
<>
<Power className="h-3 w-3 mr-1" />
Active
<Power className="h-3 w-3 sm:mr-1" />
<span className="hidden sm:inline">Active</span>
</>
) : (
<>
<PowerOff className="h-3 w-3 mr-1" />
Disabled
<PowerOff className="h-3 w-3 sm:mr-1" />
<span className="hidden sm:inline">Disabled</span>
</>
)}
</span>
</div>
{workflow.description && <p className="text-neutral-500 mt-1">{workflow.description}</p>}
{workflow.description && <p className="text-neutral-500 mt-1 text-sm sm:text-base">{workflow.description}</p>}
</div>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={() => setShowSettingsDialog(true)}>
<div className="flex flex-wrap items-center gap-2">
<Button variant="outline" onClick={() => setShowSettingsDialog(true)} className="flex-1 sm:flex-none">
<Settings className="h-4 w-4" />
Settings
<span className="hidden sm:inline">Settings</span>
</Button>
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)}>
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none">
<Trash2 className="h-4 w-4" />
Delete
<span className="hidden sm:inline">Delete</span>
</Button>
<Button onClick={handleToggleEnabled}>
<Button onClick={handleToggleEnabled} className="flex-1 sm:flex-none">
{workflow.enabled ? (
<>
<PowerOff className="h-4 w-4" />
Disable
<span className="hidden sm:inline">Disable</span>
<span className="sm:hidden">Off</span>
</>
) : (
<>
<Power className="h-4 w-4" />
Enable
<span className="hidden sm:inline">Enable</span>
<span className="sm:hidden">On</span>
</>
)}
</Button>
@@ -1060,7 +1062,7 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Add Workflow Step</DialogTitle>
</DialogHeader>
@@ -1682,7 +1684,7 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Edit Step</DialogTitle>
<div className="flex items-center gap-2 mt-2">
apps/web/src/pages/workflows/index.tsx
+11 -10
View File
@@ -89,17 +89,18 @@ export default function WorkflowsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Workflows</h1>
<p className="text-neutral-500 mt-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Workflows</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Automate your email campaigns with powerful workflows.{' '}
{data?.total ? `${data.total} total workflows` : ''}
</p>
</div>
<Button onClick={() => setShowCreateDialog(true)}>
<Button onClick={() => setShowCreateDialog(true)} className="w-full sm:w-auto">
<Plus className="h-4 w-4" />
Create Workflow
<span className="hidden sm:inline">Create Workflow</span>
<span className="sm:hidden">Create</span>
</Button>
</div>
@@ -358,7 +359,7 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Create New Workflow</DialogTitle>
</DialogHeader>
@@ -438,11 +439,11 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
</div>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
<DialogFooter className="flex-col sm:flex-row gap-2">
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting} className="w-full sm:w-auto">
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
{isSubmitting ? 'Creating...' : 'Create Workflow'}
</Button>
</DialogFooter>
packages/ui/src/components/atoms/Dialog.tsx
+3 -3
View File
@@ -36,14 +36,14 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg',
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg max-h-[90vh] overflow-y-auto mx-4 sm:mx-0',
className,
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500">
<X className="h-4 w-4" />
<DialogPrimitive.Close className="absolute right-3 top-3 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 p-1 sm:p-0">
<X className="h-5 w-5 sm:h-4 sm:w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
packages/ui/src/components/atoms/Select.tsx
+2 -1
View File
@@ -72,6 +72,7 @@ const SelectContent = React.forwardRef<
className,
)}
position={position}
sideOffset={4}
{...props}
>
<SelectScrollUpButton />
@@ -79,7 +80,7 @@ const SelectContent = React.forwardRef<
className={cn(
'p-1',
position === 'popper' &&
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] max-w-[calc(100vw-2rem)]',
)}
>
{children}