infrastructure/plunk
2
0
Fork 0
Code Pull Requests Activity

ui: Enhance contact details page with improved layout and loading indicators

Browse Source
This commit is contained in:
Dries Augustyns
2026-04-17 12:31:51 +02:00
parent 0803fd7bc4
commit 28fe7093f4
1 changed files with 322 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/contacts/[id].tsx
+70 -97
View File
@@ -2,17 +2,18 @@ import {
Button, Button,
Card, Card,
CardContent, CardContent,
CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle,
ConfirmDialog, ConfirmDialog,
Input, Input,
Label, Label,
Switch,
} from '@plunk/ui'; } from '@plunk/ui';
import type {Contact} from '@plunk/db'; import type {Contact} from '@plunk/db';
import {AnimatePresence, motion} from 'framer-motion'; import {AnimatePresence, motion} from 'framer-motion';
import {ArrowLeft, Check, Copy, Database, ExternalLink, Mail, Save, Settings, Trash2} from 'lucide-react'; import {ArrowLeft, Check, Copy, Database, ExternalLink, Loader2, Save, Settings, Trash2} from 'lucide-react';
import Link from 'next/link'; import Link from 'next/link';
import {NextSeo} from 'next-seo';
import {useRouter} from 'next/router'; import {useRouter} from 'next/router';
import {useEffect, useState} from 'react'; import {useEffect, useState} from 'react';
import {DashboardLayout} from '../../components/DashboardLayout'; import {DashboardLayout} from '../../components/DashboardLayout';
@@ -36,7 +37,6 @@ export default function ContactDetailPage() {
const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [copiedId, setCopiedId] = useState<string | null>(null); const [copiedId, setCopiedId] = useState<string | null>(null);
// Initialize form when contact loads
useEffect(() => { useEffect(() => {
if (contact) { if (contact) {
setEmail(contact.email); setEmail(contact.email);
@@ -75,14 +75,14 @@ export default function ContactDetailPage() {
} }
}; };
const copyToClipboard = async (url: string, label: string, id: string) => { const copyToClipboard = async (text: string, label: string, copyId: string) => {
try { try {
await navigator.clipboard.writeText(url); await navigator.clipboard.writeText(text);
setCopiedId(id); setCopiedId(copyId);
setTimeout(() => setCopiedId(null), 2000); setTimeout(() => setCopiedId(null), 2000);
toast.success(`${label} link copied to clipboard`); toast.success(`${label} copied to clipboard`);
} catch { } catch {
toast.error('Failed to copy link'); toast.error('Failed to copy');
} }
}; };
@@ -90,22 +90,7 @@ export default function ContactDetailPage() {
return ( return (
<DashboardLayout> <DashboardLayout>
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-12">
<div className="text-center"> <Loader2 className="h-8 w-8 animate-spin text-neutral-400" />
<svg
className="h-8 w-8 animate-spin mx-auto text-neutral-900"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
<p className="mt-2 text-sm text-neutral-500">Loading contact...</p>
</div>
</div> </div>
</DashboardLayout> </DashboardLayout>
); );
@@ -131,19 +116,21 @@ export default function ContactDetailPage() {
} }
return ( return (
<>
<NextSeo title={contact.email} />
<DashboardLayout> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="space-y-4"> <div className="flex items-start justify-between gap-4">
<div className="flex items-center gap-3 sm:gap-4"> <div className="flex items-center gap-3 sm:gap-4 min-w-0">
<Link href="/contacts"> <Link href="/contacts">
<Button variant="outline" size="sm"> <Button variant="outline" size="sm">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<div className="flex-1 min-w-0"> <div className="min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{contact.email}</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{contact.email}</h1>
<p className="text-neutral-500 mt-1"> <p className="mt-1">
<span <span
className={`inline-flex items-center px-2 sm: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' contact.subscribed ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
@@ -154,14 +141,11 @@ export default function ContactDetailPage() {
</p> </p>
</div> </div>
</div> </div>
<div className="flex justify-end"> <Button variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-shrink-0">
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)} className="w-full sm:w-auto">
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span className="hidden sm:inline">Delete Contact</span> <span className="hidden sm:inline">Delete Contact</span>
<span className="sm:hidden">Delete</span>
</Button> </Button>
</div> </div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Edit Form */} {/* Edit Form */}
@@ -169,12 +153,11 @@ export default function ContactDetailPage() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Contact Information</CardTitle> <CardTitle>Contact Information</CardTitle>
<CardDescription>Update contact details and subscription status</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
<div> <div>
<Label htmlFor="email">Email Address *</Label> <Label htmlFor="email">Email Address</Label>
<Input <Input
id="email" id="email"
type="email" type="email"
@@ -185,29 +168,16 @@ export default function ContactDetailPage() {
/> />
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between gap-4">
<div className="flex-1"> <div>
<Label htmlFor="subscribed" className="text-sm font-medium text-neutral-900 cursor-pointer"> <Label htmlFor="subscribed" className="font-medium cursor-pointer">
Subscribed to emails Subscribed to emails
</Label> </Label>
<p className="text-xs text-neutral-500 mt-0.5"> <p className="text-xs text-neutral-500 mt-0.5">
{subscribed ? 'Contact will receive emails' : 'Contact will not receive emails'} {subscribed ? 'Receives emails from campaigns and workflows' : 'Will not receive emails'}
</p> </p>
</div> </div>
<button <Switch id="subscribed" checked={subscribed} onCheckedChange={setSubscribed} />
type="button"
id="subscribed"
onClick={() => setSubscribed(!subscribed)}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 ${
subscribed ? 'bg-neutral-900' : 'bg-neutral-300'
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
subscribed ? 'translate-x-6' : 'translate-x-1'
}`}
/>
</button>
</div> </div>
<div> <div>
@@ -231,8 +201,7 @@ export default function ContactDetailPage() {
{/* Activity Feed */} {/* Activity Feed */}
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Activity Feed</CardTitle> <CardTitle>Activity</CardTitle>
<CardDescription>Recent activity for this contact</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ActivityFeed contactId={id as string} /> <ActivityFeed contactId={id as string} />
@@ -244,22 +213,46 @@ export default function ContactDetailPage() {
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Metadata</CardTitle> <CardTitle>Details</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<Mail className="h-5 w-5 text-neutral-500 mt-0.5" /> <Database className="h-5 w-5 text-neutral-500 mt-0.5 flex-shrink-0" />
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-neutral-900">Email</p>
<p className="text-sm text-neutral-500 break-all">{contact.email}</p>
</div>
</div>
<div className="flex items-start gap-3">
<Database className="h-5 w-5 text-neutral-500 mt-0.5" />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm font-medium text-neutral-900">Contact ID</p> <p className="text-sm font-medium text-neutral-900">Contact ID</p>
<p className="text-xs text-neutral-500 font-mono break-all">{contact.id}</p> <div className="flex items-center gap-1.5 mt-0.5">
<p className="text-xs text-neutral-500 font-mono break-all flex-1">{contact.id}</p>
<button
type="button"
onClick={() => copyToClipboard(contact.id, 'Contact ID', 'contact-id')}
className="flex-shrink-0 text-neutral-400 hover:text-neutral-700 transition-colors"
aria-label="Copy contact ID"
>
<AnimatePresence mode="wait" initial={false}>
{copiedId === 'contact-id' ? (
<motion.span
key="copied"
initial={{opacity: 0, y: 4}}
animate={{opacity: 1, y: 0}}
exit={{opacity: 0, y: -4}}
transition={{duration: 0.15}}
>
<Check className="h-3 w-3 text-green-600" />
</motion.span>
) : (
<motion.span
key="idle"
initial={{opacity: 0, y: 4}}
animate={{opacity: 1, y: 0}}
exit={{opacity: 0, y: -4}}
transition={{duration: 0.15}}
>
<Copy className="h-3 w-3" />
</motion.span>
)}
</AnimatePresence>
</button>
</div>
</div> </div>
</div> </div>
@@ -285,33 +278,10 @@ export default function ContactDetailPage() {
</CardContent> </CardContent>
</Card> </Card>
{/* Stats Card */}
<Card>
<CardHeader>
<CardTitle>Activity</CardTitle>
<CardDescription>Email engagement statistics</CardDescription>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-center justify-between">
<span className="text-sm text-neutral-600">Emails Sent</span>
<span className="text-sm font-medium text-neutral-900">0</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-neutral-600">Emails Opened</span>
<span className="text-sm font-medium text-neutral-900">0</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-neutral-600">Links Clicked</span>
<span className="text-sm font-medium text-neutral-900">0</span>
</div>
</CardContent>
</Card>
{/* Public Links Card */} {/* Public Links Card */}
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Public Links</CardTitle> <CardTitle>Public Links</CardTitle>
<CardDescription>Share these links with the contact</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<div className="space-y-2"> <div className="space-y-2">
@@ -331,7 +301,11 @@ export default function ContactDetailPage() {
size="sm" size="sm"
className="overflow-hidden" className="overflow-hidden"
onClick={() => onClick={() =>
copyToClipboard(`${window.location.origin}/subscribe/${contact.id}`, 'Subscribe', 'subscribe') copyToClipboard(
`${window.location.origin}/subscribe/${contact.id}`,
'Subscribe link',
'subscribe',
)
} }
> >
<AnimatePresence mode="wait" initial={false}> <AnimatePresence mode="wait" initial={false}>
@@ -380,7 +354,7 @@ export default function ContactDetailPage() {
onClick={() => onClick={() =>
copyToClipboard( copyToClipboard(
`${window.location.origin}/unsubscribe/${contact.id}`, `${window.location.origin}/unsubscribe/${contact.id}`,
'Unsubscribe', 'Unsubscribe link',
'unsubscribe', 'unsubscribe',
) )
} }
@@ -429,7 +403,11 @@ export default function ContactDetailPage() {
size="sm" size="sm"
className="overflow-hidden" className="overflow-hidden"
onClick={() => onClick={() =>
copyToClipboard(`${window.location.origin}/manage/${contact.id}`, 'Manage', 'manage') copyToClipboard(
`${window.location.origin}/manage/${contact.id}`,
'Manage preferences link',
'manage',
)
} }
> >
<AnimatePresence mode="wait" initial={false}> <AnimatePresence mode="wait" initial={false}>
@@ -458,12 +436,6 @@ export default function ContactDetailPage() {
</Button> </Button>
</div> </div>
</div> </div>
<div className="pt-2 border-t">
<p className="text-xs text-neutral-500">
These public links allow the contact to manage their subscription without logging in.
</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -480,5 +452,6 @@ export default function ContactDetailPage() {
variant="destructive" variant="destructive"
/> />
</DashboardLayout> </DashboardLayout>
</>
); );
} }