From bb72911fa25e3a204095e74c07efbc261154ac30 Mon Sep 17 00:00:00 2001
From: Dries Augustyns <inbox@driaug.com>
Date: Fri, 1 May 2026 19:44:48 +0200
Subject: [PATCH] feat: enhance contact addition with bulk email lookup and
 subscription options

---
 apps/api/src/controllers/Contacts.ts      |  24 ++
 apps/api/src/controllers/Segments.ts      |   4 +-
 apps/api/src/services/ContactService.ts   |  17 ++
 apps/api/src/services/SegmentService.ts   |  27 +-
 apps/web/src/components/ContactPicker.tsx | 330 ++++++++++++++++------
 apps/web/src/pages/segments/[id].tsx      |  40 ++-
 apps/web/src/pages/segments/new.tsx       |  12 +-
 packages/shared/src/schemas/index.ts      |   5 +
 8 files changed, 334 insertions(+), 125 deletions(-)

diff --git a/apps/api/src/controllers/Contacts.ts b/apps/api/src/controllers/Contacts.ts
index 6e662c1..defd857 100644
--- a/apps/api/src/controllers/Contacts.ts
+++ b/apps/api/src/controllers/Contacts.ts
@@ -273,6 +273,30 @@ export class Contacts {
     });
   }
 
+  /**
+   * POST /contacts/lookup
+   * Bulk-check which emails already exist in the project (max 500)
+   */
+  @Post('lookup')
+  @Middleware([requireAuth, requireEmailVerified])
+  @CatchAsync
+  public async lookup(req: Request, res: Response, _next: NextFunction) {
+    const auth = res.locals.auth;
+    const {emails} = req.body as {emails: string[]};
+
+    if (!Array.isArray(emails) || emails.length === 0) {
+      return res.status(400).json({error: 'emails must be a non-empty array'});
+    }
+
+    if (emails.length > 500) {
+      return res.status(400).json({error: 'Maximum 500 emails per lookup'});
+    }
+
+    const result = await ContactService.lookup(auth.projectId!, emails);
+
+    return res.status(200).json(result);
+  }
+
   /**
    * POST /contacts/import
    * Import contacts from CSV file
diff --git a/apps/api/src/controllers/Segments.ts b/apps/api/src/controllers/Segments.ts
index afe37aa..4f9696e 100644
--- a/apps/api/src/controllers/Segments.ts
+++ b/apps/api/src/controllers/Segments.ts
@@ -155,7 +155,7 @@ export class Segments {
   public async addMembers(req: Request, res: Response, _next: NextFunction) {
     const auth = res.locals.auth;
     const segmentId = req.params.id;
-    const {emails} = req.body;
+    const {emails, createMissing, subscribed} = req.body as {emails: string[]; createMissing?: boolean; subscribed?: boolean};
 
     if (!segmentId) {
       return res.status(400).json({error: 'Segment ID is required'});
@@ -165,7 +165,7 @@ export class Segments {
       return res.status(400).json({error: 'emails must be a non-empty array'});
     }
 
-    const result = await SegmentService.addContacts(auth.projectId!, segmentId, emails);
+    const result = await SegmentService.addContacts(auth.projectId!, segmentId, emails, createMissing ?? false, subscribed ?? true);
 
     return res.status(200).json(result);
   }
diff --git a/apps/api/src/services/ContactService.ts b/apps/api/src/services/ContactService.ts
index 3976d29..a66fe81 100644
--- a/apps/api/src/services/ContactService.ts
+++ b/apps/api/src/services/ContactService.ts
@@ -76,6 +76,23 @@ export class ContactService {
     return contact;
   }
 
+  /**
+   * Bulk-check which emails exist in the project — single query, safe for up to 500 addresses.
+   */
+  public static async lookup(
+    projectId: string,
+    emails: string[],
+  ): Promise<{found: string[]; notFound: string[]}> {
+    const rows = await prisma.contact.findMany({
+      where: {projectId, email: {in: emails, mode: 'insensitive'}},
+      select: {email: true},
+    });
+    const foundSet = new Set(rows.map(r => r.email.toLowerCase()));
+    const found = emails.filter(e => foundSet.has(e.toLowerCase()));
+    const notFound = emails.filter(e => !foundSet.has(e.toLowerCase()));
+    return {found, notFound};
+  }
+
   /**
    * Find a contact by email (returns null if not found)
    */
diff --git a/apps/api/src/services/SegmentService.ts b/apps/api/src/services/SegmentService.ts
index 6c1a722..cc3d74f 100644
--- a/apps/api/src/services/SegmentService.ts
+++ b/apps/api/src/services/SegmentService.ts
@@ -328,7 +328,9 @@ export class SegmentService {
     projectId: string,
     segmentId: string,
     emails: string[],
-  ): Promise<{added: number; notFound: string[]}> {
+    createMissing = false,
+    subscribed = true,
+  ): Promise<{added: number; created: number; notFound: string[]}> {
     const segment = await this.get(projectId, segmentId);
 
     if (segment.type !== 'STATIC') {
@@ -336,7 +338,7 @@ export class SegmentService {
     }
 
     // Look up contacts by email (case-insensitive)
-    const contacts = await prisma.contact.findMany({
+    let contacts = await prisma.contact.findMany({
       where: {
         projectId,
         email: {in: emails, mode: 'insensitive'},
@@ -344,7 +346,24 @@ export class SegmentService {
       select: {id: true, email: true},
     });
 
-    const foundEmails = new Set(contacts.map(c => c.email.toLowerCase()));
+    let foundEmails = new Set(contacts.map(c => c.email.toLowerCase()));
+    const missing = emails.filter(e => !foundEmails.has(e.toLowerCase()));
+
+    let created = 0;
+    if (createMissing && missing.length > 0) {
+      await prisma.contact.createMany({
+        data: missing.map(email => ({projectId, email, subscribed})),
+        skipDuplicates: true,
+      });
+      created = missing.length;
+      // Re-fetch to include newly created contacts
+      contacts = await prisma.contact.findMany({
+        where: {projectId, email: {in: emails, mode: 'insensitive'}},
+        select: {id: true, email: true},
+      });
+      foundEmails = new Set(contacts.map(c => c.email.toLowerCase()));
+    }
+
     const notFound = emails.filter(e => !foundEmails.has(e.toLowerCase()));
 
     if (contacts.length > 0) {
@@ -377,7 +396,7 @@ export class SegmentService {
       await prisma.segment.update({where: {id: segmentId}, data: {memberCount}});
     }
 
-    return {added: contacts.length, notFound};
+    return {added: contacts.length, created, notFound};
   }
 
   /**
diff --git a/apps/web/src/components/ContactPicker.tsx b/apps/web/src/components/ContactPicker.tsx
index 8dfeaf0..bd30cf2 100644
--- a/apps/web/src/components/ContactPicker.tsx
+++ b/apps/web/src/components/ContactPicker.tsx
@@ -1,35 +1,61 @@
 import type {Contact} from '@plunk/db';
 import type {CursorPaginatedResponse} from '@plunk/types';
-import {Input, Popover, PopoverContent, PopoverTrigger} from '@plunk/ui';
-import {Check, ChevronsUpDown, MailCheck, MailX, Search, X} from 'lucide-react';
+import {Button, Input, Label, Popover, PopoverContent, PopoverTrigger, Switch} from '@plunk/ui';
+import {Check, ChevronsUpDown, ClipboardList, Loader2, MailCheck, MailX, Search, Sparkles, X} from 'lucide-react';
 import {useEffect, useRef, useState} from 'react';
 import useSWR from 'swr';
+import {ContactSchemas} from '@plunk/shared';
+import {network} from '../lib/network';
+
+type Mode = 'search' | 'paste';
 
 interface ContactPickerProps {
-  /** Currently selected emails */
+  /** Currently selected emails (search mode) */
   selected: string[];
-  /** Called when selection changes */
+  /** Called when search-mode selection changes */
   onChange: (emails: string[]) => void;
-  /** Emails already in the segment (shown as disabled) */
+  /**
+   * Called by paste mode to submit directly — skips the chip staging area.
+   * Receives the parsed email list and whether new contacts should be subscribed.
+   */
+  onAdd: (emails: string[], subscribed: boolean) => Promise<void>;
+  /** Emails already in the segment (shown as disabled in search mode) */
   existing?: string[];
   placeholder?: string;
 }
 
-/**
- * Searchable multi-select contact picker backed by the /contacts API.
- * Only fetches when the user types (safe for large contact lists).
- */
+const CHIP_LIMIT = 8;
+
+function parseEmails(raw: string): string[] {
+  return raw
+    .split(/[\n,;]+/)
+    .map(s => s.trim().toLowerCase())
+    .filter(s => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s));
+}
+
 export function ContactPicker({
   selected,
   onChange,
+  onAdd,
   existing = [],
   placeholder = 'Search contacts...',
 }: ContactPickerProps) {
+  const [mode, setMode] = useState<Mode>('search');
+
+  // Search mode
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  // Paste mode
+  const [pasteText, setPasteText] = useState('');
+  const [isLooking, setIsLooking] = useState(false);
+  const [preview, setPreview] = useState<{found: string[]; notFound: string[]} | null>(null);
+  const [subscribeNew, setSubscribeNew] = useState(true);
+  const [debouncedPaste, setDebouncedPaste] = useState('');
+  const pasteDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   useEffect(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => setDebouncedSearch(search), 300);
@@ -38,7 +64,26 @@ export function ContactPicker({
     };
   }, [search]);
 
-  // Only fetch when there's a search term — avoids loading all contacts on open
+  useEffect(() => {
+    if (pasteDebounceRef.current) clearTimeout(pasteDebounceRef.current);
+    pasteDebounceRef.current = setTimeout(() => setDebouncedPaste(pasteText), 400);
+    return () => {
+      if (pasteDebounceRef.current) clearTimeout(pasteDebounceRef.current);
+    };
+  }, [pasteText]);
+
+  useEffect(() => {
+    const emails = parseEmails(debouncedPaste).filter(e => !existing.includes(e));
+    if (emails.length === 0) {
+      setPreview(null);
+      return;
+    }
+    setIsLooking(true);
+    network.fetch<{found: string[]; notFound: string[]}, typeof ContactSchemas.lookup>(
+      'POST', '/contacts/lookup', {emails},
+    ).then(setPreview).finally(() => setIsLooking(false));
+  }, [debouncedPaste]);
+
   const {data, isLoading} = useSWR<CursorPaginatedResponse<Contact>>(
     open && debouncedSearch.length > 0 ? `/contacts?limit=20&search=${encodeURIComponent(debouncedSearch)}` : null,
     {revalidateOnFocus: false},
@@ -54,97 +99,196 @@ export function ContactPicker({
     }
   };
 
+  const parsedEmails = parseEmails(pasteText);
+  const newPastedEmails = parsedEmails.filter(e => !existing.includes(e));
+
+  const handlePasteSubmit = async () => {
+    if (newPastedEmails.length === 0) return;
+    await onAdd(newPastedEmails, subscribeNew);
+    setPasteText('');
+    setPreview(null);
+  };
+
+  const visibleChips = selected.slice(0, CHIP_LIMIT);
+  const overflowCount = selected.length - CHIP_LIMIT;
+
   return (
     <div className="space-y-3">
-      <Popover open={open} onOpenChange={v => { setOpen(v); if (!v) setSearch(''); }}>
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            role="combobox"
-            aria-expanded={open}
-            className="flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-500 hover:border-neutral-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors"
-          >
-            <span>{placeholder}</span>
-            <ChevronsUpDown className="h-4 w-4 opacity-40 shrink-0" />
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="p-0"
-          style={{width: 'var(--radix-popover-trigger-width)'}}
-          align="start"
+      {/* Mode toggle */}
+      <div className="flex gap-1 p-0.5 bg-neutral-100 rounded-md w-fit">
+        <button
+          type="button"
+          onClick={() => setMode('search')}
+          className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded transition-colors ${
+            mode === 'search' ? 'bg-white text-neutral-900 shadow-sm' : 'text-neutral-500 hover:text-neutral-700'
+          }`}
         >
-          {/* Search input */}
-          <div className="flex items-center border-b border-neutral-200 px-3 py-2">
-            <Search className="mr-2 h-4 w-4 shrink-0 text-neutral-400" />
-            <Input
-              placeholder="Type an email to search..."
-              value={search}
-              onChange={e => setSearch(e.target.value)}
-              className="border-0 p-0 h-8 focus-visible:ring-0 focus-visible:ring-offset-0 text-sm"
-              autoFocus
-            />
-          </div>
+          <Search className="h-3.5 w-3.5" />
+          Search
+        </button>
+        <button
+          type="button"
+          onClick={() => setMode('paste')}
+          className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded transition-colors ${
+            mode === 'paste' ? 'bg-white text-neutral-900 shadow-sm' : 'text-neutral-500 hover:text-neutral-700'
+          }`}
+        >
+          <ClipboardList className="h-3.5 w-3.5" />
+          Paste
+        </button>
+      </div>
 
-          {/* Results */}
-          <div className="max-h-[240px] overflow-y-auto p-1">
-            {debouncedSearch.length === 0 ? (
-              <p className="py-6 text-center text-sm text-neutral-400">Type to search contacts</p>
-            ) : isLoading ? (
-              <p className="py-6 text-center text-sm text-neutral-400">Searching...</p>
-            ) : contacts.length === 0 ? (
-              <p className="py-6 text-center text-sm text-neutral-400">No contacts found</p>
-            ) : (
-              contacts.map(contact => {
-                const isSelected = selected.includes(contact.email);
-                const isExisting = existing.includes(contact.email);
-
-                return (
-                  <button
-                    key={contact.id}
-                    type="button"
-                    disabled={isExisting}
-                    onClick={() => toggle(contact.email)}
-                    className="w-full flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-neutral-50 disabled:opacity-40 disabled:cursor-not-allowed text-left transition-colors"
-                  >
-                    {contact.subscribed ? (
-                      <MailCheck className="h-4 w-4 text-green-600 shrink-0" />
-                    ) : (
-                      <MailX className="h-4 w-4 text-red-500 shrink-0" />
-                    )}
-                    <span className="flex-1 truncate text-neutral-900">{contact.email}</span>
-                    {isExisting && (
-                      <span className="text-xs text-neutral-400 shrink-0">already member</span>
-                    )}
-                    {isSelected && !isExisting && (
-                      <Check className="h-4 w-4 text-neutral-900 shrink-0" />
-                    )}
-                  </button>
-                );
-              })
-            )}
-          </div>
-        </PopoverContent>
-      </Popover>
-
-      {/* Selected chips */}
-      {selected.length > 0 && (
-        <div className="flex flex-wrap gap-2">
-          {selected.map(email => (
-            <span
-              key={email}
-              className="inline-flex items-center gap-1.5 rounded-full bg-neutral-100 border border-neutral-200 pl-3 pr-1.5 py-1 text-sm text-neutral-800"
-            >
-              {email}
+      {mode === 'search' ? (
+        <>
+          <Popover open={open} onOpenChange={v => { setOpen(v); if (!v) setSearch(''); }}>
+            <PopoverTrigger asChild>
               <button
                 type="button"
-                onClick={() => onChange(selected.filter(e => e !== email))}
-                className="rounded-full p-0.5 hover:bg-neutral-300 transition-colors"
-                aria-label={`Remove ${email}`}
+                role="combobox"
+                aria-expanded={open}
+                className="flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-500 hover:border-neutral-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors"
               >
-                <X className="h-3 w-3" />
+                <span>{placeholder}</span>
+                <ChevronsUpDown className="h-4 w-4 opacity-40 shrink-0" />
               </button>
-            </span>
-          ))}
+            </PopoverTrigger>
+            <PopoverContent
+              className="p-0"
+              style={{width: 'var(--radix-popover-trigger-width)'}}
+              align="start"
+            >
+              <div className="flex items-center border-b border-neutral-200 px-3 py-2">
+                <Search className="mr-2 h-4 w-4 shrink-0 text-neutral-400" />
+                <Input
+                  placeholder="Type an email to search..."
+                  value={search}
+                  onChange={e => setSearch(e.target.value)}
+                  className="border-0 p-0 h-8 focus-visible:ring-0 focus-visible:ring-offset-0 text-sm"
+                  autoFocus
+                />
+              </div>
+              <div className="max-h-[240px] overflow-y-auto p-1">
+                {debouncedSearch.length === 0 ? (
+                  <p className="py-6 text-center text-sm text-neutral-400">Type to search contacts</p>
+                ) : isLoading ? (
+                  <p className="py-6 text-center text-sm text-neutral-400">Searching...</p>
+                ) : contacts.length === 0 ? (
+                  <p className="py-6 text-center text-sm text-neutral-400">No contacts found</p>
+                ) : (
+                  contacts.map(contact => {
+                    const isSelected = selected.includes(contact.email);
+                    const isExisting = existing.includes(contact.email);
+                    return (
+                      <button
+                        key={contact.id}
+                        type="button"
+                        disabled={isExisting}
+                        onClick={() => toggle(contact.email)}
+                        className="w-full flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-neutral-50 disabled:opacity-40 disabled:cursor-not-allowed text-left transition-colors"
+                      >
+                        {contact.subscribed ? (
+                          <MailCheck className="h-4 w-4 text-green-600 shrink-0" />
+                        ) : (
+                          <MailX className="h-4 w-4 text-red-500 shrink-0" />
+                        )}
+                        <span className="flex-1 truncate text-neutral-900">{contact.email}</span>
+                        {isExisting && <span className="text-xs text-neutral-400 shrink-0">already member</span>}
+                        {isSelected && !isExisting && <Check className="h-4 w-4 text-neutral-900 shrink-0" />}
+                      </button>
+                    );
+                  })
+                )}
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          {/* Chips */}
+          {selected.length > 0 && (
+            <div className="space-y-2">
+              <div className="flex flex-wrap gap-2">
+                {visibleChips.map(email => (
+                  <span
+                    key={email}
+                    className="inline-flex items-center gap-1.5 rounded-full bg-neutral-100 border border-neutral-200 pl-3 pr-1.5 py-1 text-sm text-neutral-800"
+                  >
+                    {email}
+                    <button
+                      type="button"
+                      onClick={() => onChange(selected.filter(e => e !== email))}
+                      className="rounded-full p-0.5 hover:bg-neutral-300 transition-colors"
+                      aria-label={`Remove ${email}`}
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </span>
+                ))}
+                {overflowCount > 0 && (
+                  <span className="inline-flex items-center rounded-full bg-neutral-100 border border-neutral-200 px-3 py-1 text-sm text-neutral-500">
+                    +{overflowCount} more
+                  </span>
+                )}
+              </div>
+              <button
+                type="button"
+                onClick={() => onChange([])}
+                className="text-xs text-neutral-400 hover:text-neutral-600 transition-colors"
+              >
+                Clear all
+              </button>
+            </div>
+          )}
+        </>
+      ) : (
+        /* Paste mode — self-contained, submits directly via onAdd */
+        <div className="space-y-3">
+          <textarea
+            value={pasteText}
+            onChange={e => setPasteText(e.target.value)}
+            placeholder={'Paste emails here, one per line or comma-separated...\n\nalice@example.com\nbob@example.com, carol@example.com'}
+            rows={6}
+            className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 resize-none font-mono"
+          />
+
+          {/* Preview panel — toggle lives here, inline with the "new contacts" row */}
+          {pasteText.trim() === '' ? (
+            <p className="text-xs text-neutral-400">Accepts newline, comma, or semicolon-separated addresses</p>
+          ) : isLooking ? (
+            <p className="flex items-center gap-1.5 text-xs text-neutral-400"><Loader2 className="h-3 w-3 animate-spin" /> Checking...</p>
+          ) : preview ? (
+            <div className="rounded-md border border-neutral-200 divide-y divide-neutral-100 text-sm overflow-hidden">
+              {preview.found.length > 0 && (
+                <div className="flex items-center gap-2 px-3 py-2.5 text-neutral-700">
+                  <MailCheck className="h-4 w-4 text-green-600 shrink-0" />
+                  <span><span className="font-medium">{preview.found.length}</span> existing contact{preview.found.length !== 1 ? 's' : ''}</span>
+                </div>
+              )}
+              {preview.notFound.length > 0 && (
+                <div className="flex items-center justify-between px-3 py-2.5">
+                  <div className="flex items-center gap-2 text-neutral-700">
+                    <Sparkles className="h-4 w-4 text-amber-500 shrink-0" />
+                    <span><span className="font-medium">{preview.notFound.length}</span> new — will be created</span>
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <Label htmlFor="subscribe-new" className="text-xs text-neutral-500 cursor-pointer">Subscribe</Label>
+                    <Switch id="subscribe-new" checked={subscribeNew} onCheckedChange={setSubscribeNew} />
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            <p className="text-xs text-neutral-400">
+              {parsedEmails.length > 0 ? 'All detected emails are already in this segment' : 'No valid emails detected'}
+            </p>
+          )}
+
+          <Button
+            type="button"
+            onClick={() => void handlePasteSubmit()}
+            disabled={newPastedEmails.length === 0 || isLooking}
+            className="w-full"
+          >
+            Add {newPastedEmails.length > 0 ? `${newPastedEmails.length} ` : ''}contact{newPastedEmails.length !== 1 ? 's' : ''}
+          </Button>
         </div>
       )}
     </div>
diff --git a/apps/web/src/pages/segments/[id].tsx b/apps/web/src/pages/segments/[id].tsx
index d35bb27..0f6f754 100644
--- a/apps/web/src/pages/segments/[id].tsx
+++ b/apps/web/src/pages/segments/[id].tsx
@@ -127,21 +127,19 @@ export default function SegmentDetailPage() {
     }
   };
 
-  const handleAddMembers = async () => {
-    if (pickedEmails.length === 0) {
-      toast.error('Select at least one contact');
-      return;
-    }
-
+  const handleAddMembers = async (emails: string[], subscribed = true) => {
     setIsAddingMembers(true);
     try {
-      const result = await network.fetch<{added: number; notFound: string[]}, typeof SegmentSchemas.members>(
+      const result = await network.fetch<{added: number; created: number; notFound: string[]}, typeof SegmentSchemas.members>(
         'POST',
         `/segments/${id}/members`,
-        {emails: pickedEmails},
+        {emails, createMissing: true, subscribed},
       );
 
-      toast.success(`Added ${result.added} contact${result.added !== 1 ? 's' : ''} to segment`);
+      const msg = result.created > 0
+        ? `Added ${result.added} contact${result.added !== 1 ? 's' : ''} (${result.created} new)`
+        : `Added ${result.added} contact${result.added !== 1 ? 's' : ''} to segment`;
+      toast.success(msg);
       setPickedEmails([]);
       void mutate();
       void mutateContacts();
@@ -318,26 +316,26 @@ export default function SegmentDetailPage() {
               <Card>
                 <CardHeader>
                   <CardTitle>Add Members</CardTitle>
-                  <CardDescription>Search and select contacts to add to this segment</CardDescription>
+                  <CardDescription>Search and select contacts, or paste a list of emails</CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <ContactPicker
                     selected={pickedEmails}
                     onChange={setPickedEmails}
+                    onAdd={handleAddMembers}
                     existing={contactsData?.data.map(c => c.email) ?? []}
                     placeholder="Search contacts to add..."
                   />
-                  <Button
-                    type="button"
-                    onClick={handleAddMembers}
-                    disabled={isAddingMembers || pickedEmails.length === 0}
-                  >
-                    {isAddingMembers
-                      ? 'Adding...'
-                      : pickedEmails.length > 0
-                        ? `Add ${pickedEmails.length} Contact${pickedEmails.length !== 1 ? 's' : ''}`
-                        : 'Add Contacts'}
-                  </Button>
+                  {pickedEmails.length > 0 && (
+                    <Button
+                      type="button"
+                      onClick={() => void handleAddMembers(pickedEmails)}
+                      disabled={isAddingMembers}
+                      className="w-full"
+                    >
+                      {isAddingMembers ? 'Adding...' : `Add ${pickedEmails.length} Contact${pickedEmails.length !== 1 ? 's' : ''}`}
+                    </Button>
+                  )}
                 </CardContent>
               </Card>
             )}
diff --git a/apps/web/src/pages/segments/new.tsx b/apps/web/src/pages/segments/new.tsx
index e1d09f9..6404e3e 100644
--- a/apps/web/src/pages/segments/new.tsx
+++ b/apps/web/src/pages/segments/new.tsx
@@ -48,14 +48,15 @@ export default function NewSegmentPage() {
       // For static segments with pre-selected contacts, add them now
       if (segmentType === 'STATIC' && selectedContacts.length > 0) {
         try {
-          const result = await network.fetch<{added: number; notFound: string[]}, typeof SegmentSchemas.members>(
+          const result = await network.fetch<{added: number; created: number; notFound: string[]}, typeof SegmentSchemas.members>(
             'POST',
             `/segments/${segment.id}/members`,
-            {emails: selectedContacts},
-          );
-          toast.success(
-            `Segment created with ${result.added} contact${result.added !== 1 ? 's' : ''}`,
+            {emails: selectedContacts, createMissing: true},
           );
+          const msg = result.created > 0
+            ? `Segment created with ${result.added} contact${result.added !== 1 ? 's' : ''} (${result.created} new)`
+            : `Segment created with ${result.added} contact${result.added !== 1 ? 's' : ''}`;
+          toast.success(msg);
         } catch {
           // Segment was created; just warn about members
           toast.warning('Segment created, but some contacts could not be added');
@@ -194,6 +195,7 @@ export default function NewSegmentPage() {
                   <ContactPicker
                     selected={selectedContacts}
                     onChange={setSelectedContacts}
+                    onAdd={async (emails, _subscribed) => setSelectedContacts(prev => [...new Set([...prev, ...emails])])}
                     placeholder="Search and select contacts..."
                   />
                 </CardContent>
diff --git a/packages/shared/src/schemas/index.ts b/packages/shared/src/schemas/index.ts
index dd03753..cec9cb8 100644
--- a/packages/shared/src/schemas/index.ts
+++ b/packages/shared/src/schemas/index.ts
@@ -84,6 +84,9 @@ export const ContactSchemas = {
   bulkAction: z.object({
     contactIds: z.array(uuid).min(1).max(1000),
   }),
+  lookup: z.object({
+    emails: z.array(z.string().email()).min(1).max(500),
+  }),
 } as const;
 
 const segmentFilterSchema = z.object({
@@ -144,6 +147,8 @@ export const SegmentSchemas = {
   }),
   members: z.object({
     emails: z.array(z.string().email()).min(1).max(500),
+    createMissing: z.boolean().optional(),
+    subscribed: z.boolean().optional(),
   }),
 };