'use client'; /* * Vireo Next.js — Contacts app (apps/contacts). * Faithful re-expression of src/html/apps/contacts.html: toolbar (search/group/ * sort/view), grid + list views, a contact detail drawer, and an add-contact * modal with validation. Alpine axContacts() → React useState; DOM/ARIA match 1:1. */ import { useEffect, useState } from 'react'; interface Contact { id: number; name: string; role: string; company: string; initials: string; color: string; presence: string; tag: string; groupColor: string; email: string; phone: string; location: string; fav: boolean; tags: string[]; notes: string; } interface Form { name: string; role: string; company: string; email: string; phone: string; tag: string } const SEED: Contact[] = [ { id: 1, name: 'Maya Lindqvist', role: 'CFO', company: 'Northwind', initials: 'ML', color: '#34D399', presence: 'online', tag: 'Clients', groupColor: '#38BDF8', email: 'maya.l@northwind.co', phone: '+1 (415) 555-0188', location: 'San Francisco, CA', fav: true, tags: ['Decision maker', 'Finance', 'VIP'], notes: 'Primary finance contact on the Q3 retainer. Prefers morning calls (PT).' }, { id: 2, name: 'Devon Okafor', role: 'Engineering Lead', company: 'Vireo', initials: 'DO', color: '#38BDF8', presence: 'online', tag: 'Team', groupColor: '#34D399', email: 'devon@vireo.app', phone: '+1 (628) 555-0143', location: 'Remote · Lagos', fav: false, tags: ['Frontend', 'On-call'], notes: 'Owns the design-system migration. Reach via chat for anything urgent.' }, { id: 3, name: 'Tomás Herrera', role: 'Account Director', company: 'Brightline', initials: 'TH', color: '#A78BFA', presence: 'away', tag: 'Clients', groupColor: '#38BDF8', email: 'tomas@brightline.io', phone: '+34 612 55 01 77', location: 'Madrid, ES', fav: true, tags: ['Contract', 'Renewal Q3'], notes: 'Negotiating the SLA window. Follow up Friday on section 4.2.' }, { id: 4, name: 'Priya Nair', role: 'Data Analyst', company: 'Vireo', initials: 'PN', color: '#FBBF24', presence: 'away', tag: 'Team', groupColor: '#34D399', email: 'priya@vireo.app', phone: '+91 98765 43210', location: 'Bengaluru, IN', fav: false, tags: ['Analytics', 'Reporting'], notes: 'Sends the weekly digest every Monday at 8 AM.' }, { id: 5, name: 'Lena Brandt', role: 'Brand Designer', company: 'Studioform', initials: 'LB', color: '#F472B6', presence: 'offline', tag: 'Vendors', groupColor: '#FBBF24', email: 'lena@studioform.de', phone: '+49 30 5550 0199', location: 'Berlin, DE', fav: false, tags: ['Illustration', 'Contract'], notes: 'Delivering empty-state illustrations. Invoices via Receipts label.' }, { id: 6, name: 'Daniel Cho', role: 'Product Manager', company: 'Loop', initials: 'DC', color: '#FB7185', presence: 'offline', tag: 'Clients', groupColor: '#38BDF8', email: 'daniel@loop.com', phone: '+1 (212) 555-0166', location: 'New York, NY', fav: false, tags: ['Roadmap'], notes: 'Casual contact — usually catches up over lunch.' }, { id: 7, name: 'Ava Sutton', role: 'Marketing Lead', company: 'Vireo', initials: 'AS', color: '#34D399', presence: 'online', tag: 'Team', groupColor: '#34D399', email: 'ava@vireo.app', phone: '+1 (310) 555-0120', location: 'Los Angeles, CA', fav: true, tags: ['Campaigns', 'Email'], notes: 'Owns the launch campaign going live at noon.' }, { id: 8, name: 'Henry Whitlock', role: 'Procurement', company: 'Crate & Co', initials: 'HW', color: '#38BDF8', presence: 'offline', tag: 'Vendors', groupColor: '#FBBF24', email: 'henry@crateco.com', phone: '+44 20 7946 0102', location: 'London, UK', fav: false, tags: ['Hardware', 'Supplier'], notes: 'Supplies office hardware. Net-30 terms.' }, ]; const GROUPS = ['All', 'Team', 'Clients', 'Vendors', 'Favorites']; const EMPTY_FORM: Form = { name: '', role: '', company: '', email: '', phone: '', tag: 'Team' }; export function Contacts() { const [contacts, setContacts] = useState(SEED); const [view, setView] = useState<'grid' | 'list'>('grid'); const [group, setGroup] = useState('All'); const [sort, setSort] = useState('name'); const [q, setQ] = useState(''); const [detail, setDetail] = useState(null); const [addOpen, setAddOpen] = useState(false); const [form, setForm] = useState
(EMPTY_FORM); const [errors, setErrors] = useState<{ name?: string; email?: string }>({}); const filtered = (() => { let list = [...contacts]; if (group === 'Favorites') list = list.filter((c) => c.fav); else if (group !== 'All') list = list.filter((c) => c.tag === group); if (q.trim()) { const s = q.toLowerCase(); list = list.filter((c) => (c.name + c.company + c.email).toLowerCase().includes(s)); } if (sort === 'name') list.sort((a, b) => a.name.localeCompare(b.name)); if (sort === 'company') list.sort((a, b) => a.company.localeCompare(b.company)); if (sort === 'recent') list.sort((a, b) => b.id - a.id); return list; })(); const active = detail ? contacts.find((c) => c.id === detail) ?? null : null; const toggleFav = (id: number) => setContacts((p) => p.map((c) => (c.id === id ? { ...c, fav: !c.fav } : c))); const saveContact = () => { const errs: { name?: string; email?: string } = {}; if (!form.name.trim()) errs.name = 'Name is required.'; if (!form.email.trim()) errs.email = 'Email is required.'; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = 'Enter a valid email address.'; setErrors(errs); if (Object.keys(errs).length) return; const colors = ['#34D399', '#38BDF8', '#A78BFA', '#F472B6', '#FBBF24', '#FB7185']; const gc = form.tag === 'Team' ? '#34D399' : form.tag === 'Vendors' ? '#FBBF24' : '#38BDF8'; const newContact: Contact = { id: Date.now(), name: form.name, role: form.role || '—', company: form.company || '—', initials: form.name.trim().split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase(), color: colors[Math.floor(Math.random() * colors.length)], presence: 'offline', tag: form.tag, groupColor: gc, email: form.email, phone: form.phone || '—', location: '—', fav: false, tags: [form.tag], notes: 'Newly added contact.', }; setContacts((p) => [newContact, ...p]); setAddOpen(false); setForm(EMPTY_FORM); }; useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key !== 'Escape') return; setDetail(null); setAddOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); return ( <> {/* ════════════════ APP HEAD · status + actions (the app bar names the app) ════════════════ */}

{contacts.length} people across teams, clients and vendors.

setQ(e.target.value)} aria-label="Search contacts" />
{GROUPS.map((g) => ( ))}
{view === 'grid' && (
{filtered.map((c) => (
setDetail(c.id)} style={{ cursor: 'pointer', textAlign: 'center' }} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter') setDetail(c.id); }} aria-label={`Open ${c.name}`}>
{c.initials}
{c.name}
{c.role} · {c.company}
{c.tag}
e.stopPropagation()} aria-label="Email"> e.stopPropagation()} aria-label="Call">
))}
)} {view === 'list' && (
{filtered.map((c) => ( setDetail(c.id)} style={{ cursor: 'pointer' }}> ))}
Name Company Email Phone Group Actions
{c.initials}
{c.name}
{c.role}
 {c.company} e.stopPropagation()} style={{ fontFamily: 'var(--ax-font-mono)', fontSize: 'var(--ax-text-xs)' }}>{c.email} {c.phone} {c.tag}
)} {filtered.length === 0 &&

No contacts match your search.

}
{detail && active && (
setDetail(null)} style={{ position: 'fixed', inset: 0, zIndex: 50, background: 'rgba(0,0,0,.4)' }} />
)} {addOpen && (
setAddOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 50, background: 'rgba(0,0,0,.4)' }} />
{ e.preventDefault(); saveContact(); }} onClick={(e) => e.stopPropagation()} style={{ width: 'min(480px,100%)', maxHeight: '90vh', overflow: 'auto' }}>

Add contact

setForm((f) => ({ ...f, name: e.target.value }))} aria-invalid={errors.name ? 'true' : 'false'} placeholder="Jane Cooper" /> {errors.name && {errors.name}}
setForm((f) => ({ ...f, role: e.target.value }))} placeholder="Designer" />
setForm((f) => ({ ...f, company: e.target.value }))} placeholder="Acme Inc." />
setForm((f) => ({ ...f, email: e.target.value }))} aria-invalid={errors.email ? 'true' : 'false'} placeholder="jane@acme.com" /> {errors.email && {errors.email}}
setForm((f) => ({ ...f, phone: e.target.value }))} placeholder="+1 (555) 000-0000" />
)} ); } export default Contacts;