+ Contact introuvable
+
+ )
+ }
+
+ const displayName = fullContactDisplayName(contact)
+ const name = displayName || contact.emails[0]?.value || contact.phones[0]?.value || "?"
+ const color = avatarColor(name)
+ const initial = senderInitial(name)
+ const primaryEmail = contact.emails[0]?.value
+
+ return (
+
+ {/* Header */}
+
+
+
+ )
+}
+
+function DetailSection({
+ icon,
+ children,
+}: {
+ icon: React.ReactNode
+ children: React.ReactNode
+}) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ {/* Avatar + Name */}
+
+
+ {contact.avatarUrl ? (
+ 
+ ) : (
+
+
+ {/* Quick actions */}
+ {primaryEmail && (
+
+ {initial}
+
+ )}
+ + {name} +
+ {contact.company && ( ++ {contact.jobTitle ? `${contact.jobTitle} — ` : ""} + {contact.company} +
+ )} + {contact.labels && contact.labels.length > 0 && ( +
+ {contact.labels.map((labelId) => {
+ const row = labelRows.find((r) => r.id === labelId)
+ return (
+
+ {row && (
+
+ )}
+ {row?.label ?? labelId}
+
+ )
+ })}
+
+ )}
+
+
+
+
+
+ )}
+
+ {/* Contact details */}
+
+ {contact.emails.length > 0 && (
+
+
+ {/* Recent interactions */}
+ {recentInteractions.length > 0 && (
+
+
+ ))}
+
+ )}
+
+ {contact.phones.length > 0 && (
+ {e.value}
+{e.label}
+
+
+ ))}
+
+ )}
+
+ {contact.company && (
+ {p.value}
+{p.label}
+
+
+
+ )}
+
+ {contact.addresses && contact.addresses.length > 0 && (
+ {contact.company}
+ {contact.department && ( +{contact.department}
+ )} + {contact.jobTitle && ( +{contact.jobTitle}
+ )} +
+
+ ))}
+
+ )}
+
+ {contact.birthday && (contact.birthday.day || contact.birthday.month) && (
+ + {[addr.street, [addr.postalCode, addr.city].filter(Boolean).join(" "), addr.region, addr.country] + .filter(Boolean) + .join(", ")} +
+{addr.label}
+{formatBirthday(contact.birthday)}
+ + )} + + {contact.notes && ( +{contact.notes}
+ + )} +
+
+ )}
+
+ + Interactions récentes +
+ {recentInteractions.map((email) => ( +
+
+ ))}
+
+
+ {email.subject}
++ {email.preview} +
+{formatEmailDate(email.date)}
+
+
+ )
+}
diff --git a/components/gmail/contacts/contact-form-view.tsx b/components/gmail/contacts/contact-form-view.tsx
new file mode 100644
index 0000000..5f25707
--- /dev/null
+++ b/components/gmail/contacts/contact-form-view.tsx
@@ -0,0 +1,886 @@
+"use client"
+
+import {
+ useState,
+ useEffect,
+ useId,
+ forwardRef,
+ useCallback,
+ useRef,
+ type InputHTMLAttributes,
+} from "react"
+import { useForm, useFieldArray, Controller } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import {
+ ArrowLeft,
+ Star,
+ X,
+ User,
+ Building2,
+ Mail,
+ Phone,
+ MapPin,
+ Cake,
+ FileText,
+ Plus,
+ ChevronDown,
+ ChevronUp,
+ Check,
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+import { useContactsStore } from "@/lib/contacts/contacts-store"
+import { fullContactDisplayName } from "@/lib/contacts/types"
+import { avatarColor, senderInitial } from "@/lib/sender-display"
+import { useNavStore } from "@/lib/stores/nav-store"
+
+const FRENCH_MONTHS = [
+ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+ "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre",
+] as const
+
+const EMAIL_LABELS = ["Domicile", "Travail", "Autre"] as const
+const PHONE_LABELS = ["Mobile", "Domicile", "Travail"] as const
+const ADDRESS_LABELS = ["Domicile", "Travail", "Autre"] as const
+
+const addressSchema = z.object({
+ street: z.string().optional().default(""),
+ city: z.string().optional().default(""),
+ region: z.string().optional().default(""),
+ postalCode: z.string().optional().default(""),
+ country: z.string().optional().default(""),
+ label: z.string().default("Domicile"),
+})
+
+const contactFormSchema = z.object({
+ namePrefix: z.string().optional().default(""),
+ firstName: z.string().optional().default(""),
+ middleName: z.string().optional().default(""),
+ lastName: z.string().optional().default(""),
+ nameSuffix: z.string().optional().default(""),
+ phoneticFirstName: z.string().optional().default(""),
+ phoneticLastName: z.string().optional().default(""),
+ company: z.string().optional().default(""),
+ department: z.string().optional().default(""),
+ jobTitle: z.string().optional().default(""),
+ emails: z.array(
+ z.object({
+ value: z.string(),
+ label: z.string(),
+ }),
+ ),
+ phones: z.array(
+ z.object({
+ value: z.string(),
+ label: z.string(),
+ }),
+ ),
+ addresses: z.array(addressSchema),
+ birthday: z
+ .object({
+ day: z.any().optional(),
+ month: z.any().optional(),
+ year: z.any().optional(),
+ })
+ .optional(),
+ notes: z.string().optional().default(""),
+ labels: z.array(z.string()).optional().default([]),
+})
+
+type ContactFormValues = z.infer{icon}
+ {children}
+
+
+ )
+}
+
+function AddButton({
+ onClick,
+ children,
+}: {
+ onClick: () => void
+ children: React.ReactNode
+}) {
+ return (
+
+ )
+}
+
+/* ─── Floating label input (Material outlined style) ─────── */
+
+interface FloatingInputProps extends InputHTMLAttributes{icon}
+ {children}
+
+ {
+ setFocused(true)
+ props.onFocus?.(e)
+ }}
+ onBlur={(e) => {
+ setFocused(false)
+ setFilled(!!e.target.value)
+ props.onBlur?.(e)
+ }}
+ onChange={(e) => {
+ setFilled(!!e.target.value)
+ props.onChange?.(e)
+ }}
+ />
+
+
+ )
+ },
+)
+
+/* ─── Floating label textarea ────────────────────────────── */
+
+interface FloatingTextareaProps
+ extends React.TextareaHTMLAttributes
+