c87670e90f
Some checks failed
E2E / Playwright e2e (push) Has been cancelled
Move mail, compose, contacts, and accounts off mocks onto REST + WS. Add client, auth store, IDB-backed query cache, offline queue, and sync bar; hybrid Zustand for UI-only state. Settings still local until backend has preferences API.
559 lines
24 KiB
TypeScript
559 lines
24 KiB
TypeScript
"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,
|
|
User,
|
|
Building2,
|
|
Mail,
|
|
Phone,
|
|
MapPin,
|
|
Cake,
|
|
FileText,
|
|
Plus,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
X,
|
|
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 { useContactsList } from "@/lib/contacts/use-contacts-list"
|
|
import { useCreateContact, useUpdateContact } from "@/lib/api/hooks/use-contact-mutations"
|
|
import { fullContactToApiContact } from "@/lib/api/adapters"
|
|
import { fullContactDisplayName } from "@/lib/contacts/types"
|
|
import type { FullContact } from "@/lib/contacts/types"
|
|
import { avatarColor, senderInitial } from "@/lib/sender-display"
|
|
import { useNavStore } from "@/lib/stores/nav-store"
|
|
import { cn } from "@/lib/utils"
|
|
import {
|
|
CONTACTS_MUTED_TEXT,
|
|
CONTACTS_PAGE_AVATAR_ADD_BADGE_CLASS,
|
|
CONTACTS_PAGE_AVATAR_PLACEHOLDER_LARGE_CLASS,
|
|
CONTACTS_PAGE_ICON_BTN_CLASS,
|
|
CONTACTS_PAGE_SAVE_BTN_CLASS,
|
|
CONTACTS_PANEL_ADD_TAG_BTN_CLASS,
|
|
CONTACTS_PANEL_CARD_CLASS,
|
|
CONTACTS_PANEL_FLOATING_INPUT_CLASS,
|
|
CONTACTS_PANEL_FLOATING_LABEL_CLASS,
|
|
CONTACTS_PANEL_FLOATING_TEXTAREA_CLASS,
|
|
CONTACTS_PANEL_ICON_BTN_CLASS,
|
|
CONTACTS_PANEL_LINK_TEXT_CLASS,
|
|
CONTACTS_PANEL_MUTED_ICON_CLASS,
|
|
CONTACTS_PANEL_POPOVER_ITEM_CLASS,
|
|
CONTACTS_PANEL_SELECT_TRIGGER_CLASS,
|
|
CONTACTS_PANEL_TAG_CLASS,
|
|
} from "@/lib/contacts-chrome-classes"
|
|
|
|
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<typeof contactFormSchema>
|
|
|
|
interface ContactCreatePageProps {
|
|
mode: "create" | "edit"
|
|
contactId?: string
|
|
onBack: () => void
|
|
onSaved: (id: string) => void
|
|
}
|
|
|
|
export function ContactCreatePage({ mode, contactId, onBack, onSaved }: ContactCreatePageProps) {
|
|
const { contacts } = useContactsList()
|
|
const createContactMutation = useCreateContact()
|
|
const updateContactMutation = useUpdateContact()
|
|
const labelRows = useNavStore((s) => s.labelRows)
|
|
const availableLabels = labelRows.filter((r) => r.enabled !== false)
|
|
const [starred, setStarred] = useState(false)
|
|
const [nameExpanded, setNameExpanded] = useState(false)
|
|
const [companyExpanded, setCompanyExpanded] = useState(false)
|
|
|
|
const existingContact = mode === "edit" ? contacts.find((c) => c.id === contactId) : null
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
control,
|
|
watch,
|
|
reset,
|
|
setValue,
|
|
formState: { isDirty },
|
|
} = useForm<ContactFormValues>({
|
|
resolver: zodResolver(contactFormSchema),
|
|
defaultValues: {
|
|
namePrefix: "", firstName: "", middleName: "", lastName: "", nameSuffix: "",
|
|
phoneticFirstName: "", phoneticLastName: "",
|
|
company: "", department: "", jobTitle: "",
|
|
emails: [{ value: "", label: "Domicile" }],
|
|
phones: [{ value: "", label: "Mobile" }],
|
|
addresses: [],
|
|
birthday: { day: undefined, month: undefined, year: undefined },
|
|
notes: "", labels: [],
|
|
},
|
|
})
|
|
|
|
const { fields: emailFields, append: appendEmail, remove: removeEmail } = useFieldArray({ control, name: "emails" })
|
|
const { fields: phoneFields, append: appendPhone, remove: removePhone } = useFieldArray({ control, name: "phones" })
|
|
const { fields: addressFields, append: appendAddress, remove: removeAddress } = useFieldArray({ control, name: "addresses" })
|
|
|
|
useEffect(() => {
|
|
if (existingContact) {
|
|
const hasExtendedName = !!(existingContact.namePrefix || existingContact.middleName || existingContact.nameSuffix || existingContact.phoneticFirstName || existingContact.phoneticLastName)
|
|
if (hasExtendedName) setNameExpanded(true)
|
|
if (existingContact.department) setCompanyExpanded(true)
|
|
|
|
reset({
|
|
namePrefix: existingContact.namePrefix ?? "",
|
|
firstName: existingContact.firstName,
|
|
middleName: existingContact.middleName ?? "",
|
|
lastName: existingContact.lastName,
|
|
nameSuffix: existingContact.nameSuffix ?? "",
|
|
phoneticFirstName: existingContact.phoneticFirstName ?? "",
|
|
phoneticLastName: existingContact.phoneticLastName ?? "",
|
|
company: existingContact.company ?? "",
|
|
department: existingContact.department ?? "",
|
|
jobTitle: existingContact.jobTitle ?? "",
|
|
emails: existingContact.emails.length ? existingContact.emails : [{ value: "", label: "Domicile" }],
|
|
phones: existingContact.phones.length ? existingContact.phones : [{ value: "", label: "Mobile" }],
|
|
addresses: existingContact.addresses ?? [],
|
|
birthday: existingContact.birthday ?? { day: undefined, month: undefined, year: undefined },
|
|
notes: existingContact.notes ?? "",
|
|
labels: existingContact.labels ?? [],
|
|
})
|
|
}
|
|
}, [existingContact, reset])
|
|
|
|
const firstName = watch("firstName")
|
|
const lastName = watch("lastName")
|
|
const watchedEmails = watch("emails")
|
|
const currentLabels = watch("labels") ?? []
|
|
const displayName = `${firstName ?? ""} ${lastName ?? ""}`.trim()
|
|
|
|
const canSave = isDirty || (mode === "create" && !!(firstName?.trim() || lastName?.trim() || watchedEmails?.some((e) => e.value?.trim())))
|
|
|
|
const toggleLabel = useCallback((labelId: string) => {
|
|
const next = currentLabels.includes(labelId) ? currentLabels.filter((l) => l !== labelId) : [...currentLabels, labelId]
|
|
setValue("labels", next, { shouldDirty: true })
|
|
}, [currentLabels, setValue])
|
|
|
|
function onSubmit(data: ContactFormValues) {
|
|
const payload = {
|
|
namePrefix: data.namePrefix || undefined,
|
|
firstName: data.firstName ?? "",
|
|
middleName: data.middleName || undefined,
|
|
lastName: data.lastName ?? "",
|
|
nameSuffix: data.nameSuffix || undefined,
|
|
phoneticFirstName: data.phoneticFirstName || undefined,
|
|
phoneticLastName: data.phoneticLastName || undefined,
|
|
company: data.company || undefined,
|
|
department: data.department || undefined,
|
|
jobTitle: data.jobTitle || undefined,
|
|
emails: data.emails.filter((e) => e.value),
|
|
phones: data.phones.filter((p) => p.value),
|
|
addresses: data.addresses.filter((a) => a.street || a.city || a.region || a.postalCode || a.country),
|
|
birthday: data.birthday?.day || data.birthday?.month || data.birthday?.year ? data.birthday : undefined,
|
|
notes: data.notes || undefined,
|
|
labels: data.labels?.length ? data.labels : undefined,
|
|
}
|
|
|
|
if (mode === "create") {
|
|
const tempId = crypto.randomUUID()
|
|
const fullContact: FullContact = {
|
|
id: tempId,
|
|
...payload,
|
|
firstName: payload.firstName ?? "",
|
|
lastName: payload.lastName ?? "",
|
|
emails: payload.emails ?? [],
|
|
phones: payload.phones ?? [],
|
|
createdAt: Date.now(),
|
|
updatedAt: Date.now(),
|
|
}
|
|
createContactMutation.mutate(
|
|
{ bookId: "default", contact: fullContactToApiContact(fullContact) },
|
|
{ onSuccess: (created) => onSaved(created?.uid ?? tempId) },
|
|
)
|
|
onSaved(tempId)
|
|
} else if (contactId) {
|
|
const fullContact: FullContact = {
|
|
id: contactId,
|
|
...payload,
|
|
firstName: payload.firstName ?? "",
|
|
lastName: payload.lastName ?? "",
|
|
emails: payload.emails ?? [],
|
|
phones: payload.phones ?? [],
|
|
createdAt: Date.now(),
|
|
updatedAt: Date.now(),
|
|
}
|
|
updateContactMutation.mutate({
|
|
path: contactId,
|
|
contact: fullContactToApiContact(fullContact),
|
|
})
|
|
onSaved(contactId)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="mx-auto max-w-2xl px-6 py-8">
|
|
{/* Header */}
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<Button type="button" variant="ghost" size="icon" className={CONTACTS_PAGE_ICON_BTN_CLASS} onClick={onBack}>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</Button>
|
|
<div className="flex items-center gap-2">
|
|
<Button type="button" variant="ghost" size="icon" className="h-10 w-10 rounded-full" onClick={() => setStarred((s) => !s)}>
|
|
<Star className={cn("h-5 w-5", starred ? "fill-yellow-400 text-yellow-400" : CONTACTS_PANEL_MUTED_ICON_CLASS)} />
|
|
</Button>
|
|
<button
|
|
type="submit"
|
|
disabled={!canSave}
|
|
className={CONTACTS_PAGE_SAVE_BTN_CLASS}
|
|
>
|
|
Enregistrer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Avatar */}
|
|
<div className="mb-6 flex flex-col items-center">
|
|
{displayName ? (
|
|
<div className="relative">
|
|
<div
|
|
className="flex h-28 w-28 items-center justify-center rounded-full text-4xl font-medium text-white"
|
|
style={{ backgroundColor: avatarColor(displayName) }}
|
|
>
|
|
{senderInitial(displayName)}
|
|
</div>
|
|
<div className={CONTACTS_PAGE_AVATAR_ADD_BADGE_CLASS}>
|
|
<Plus className="h-4 w-4" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="relative">
|
|
<div className={CONTACTS_PAGE_AVATAR_PLACEHOLDER_LARGE_CLASS}>
|
|
<User className="h-12 w-12" />
|
|
</div>
|
|
<div className={CONTACTS_PAGE_AVATAR_ADD_BADGE_CLASS}>
|
|
<Plus className="h-4 w-4" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Labels */}
|
|
<div className="mb-6 flex flex-wrap items-center justify-center gap-1.5">
|
|
{currentLabels.map((labelId) => {
|
|
const row = labelRows.find((r) => r.id === labelId)
|
|
return (
|
|
<span key={labelId} className={CONTACTS_PANEL_TAG_CLASS}>
|
|
{row && (
|
|
<span className={`inline-block h-2 w-2 rounded-full ${row.color}`} />
|
|
)}
|
|
{row?.label ?? labelId}
|
|
<button type="button" onClick={() => toggleLabel(labelId)} className="text-muted-foreground hover:text-foreground">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</span>
|
|
)
|
|
})}
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<button type="button" className={CONTACTS_PANEL_ADD_TAG_BTN_CLASS}>
|
|
<Plus className="h-3 w-3" /> Libellé
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-52 p-1" align="center">
|
|
<p className={cn("px-2 py-1.5 text-xs font-medium", CONTACTS_MUTED_TEXT)}>Libellés</p>
|
|
<div className="max-h-48 overflow-y-auto">
|
|
{availableLabels.map((row) => {
|
|
const active = currentLabels.includes(row.id)
|
|
return (
|
|
<button key={row.id} type="button" onClick={() => toggleLabel(row.id)} className={CONTACTS_PANEL_POPOVER_ITEM_CLASS}>
|
|
<span className={`h-2.5 w-2.5 shrink-0 rounded-full ${row.color}`} />
|
|
<span className="flex-1 truncate">{row.label}</span>
|
|
{active && <Check className="h-3.5 w-3.5 text-primary" />}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
|
|
{/* Name section */}
|
|
<FormSection icon={<User className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
{nameExpanded && <FloatingInput label="Titre (M., Mme...)" {...register("namePrefix")} />}
|
|
<div className="flex items-center gap-1">
|
|
<div className="flex-1"><FloatingInput label="Prénom" {...register("firstName")} /></div>
|
|
<Button type="button" variant="ghost" size="icon" className={cn("h-8 w-8 shrink-0 rounded-full", CONTACTS_PANEL_ICON_BTN_CLASS)} onClick={() => setNameExpanded((e) => !e)}>
|
|
{nameExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
{nameExpanded && <FloatingInput label="Deuxième prénom" {...register("middleName")} />}
|
|
<FloatingInput label="Nom" {...register("lastName")} />
|
|
{nameExpanded && (
|
|
<>
|
|
<FloatingInput label="Suffixe (Jr., Sr...)" {...register("nameSuffix")} />
|
|
<FloatingInput label="Prénom phonétique" {...register("phoneticFirstName")} />
|
|
<FloatingInput label="Nom phonétique" {...register("phoneticLastName")} />
|
|
</>
|
|
)}
|
|
</FormSection>
|
|
|
|
{/* Company section */}
|
|
<FormSection icon={<Building2 className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
<div className="flex items-center gap-1">
|
|
<div className="flex-1"><FloatingInput label="Entreprise" {...register("company")} /></div>
|
|
<Button type="button" variant="ghost" size="icon" className={cn("h-8 w-8 shrink-0 rounded-full", CONTACTS_PANEL_ICON_BTN_CLASS)} onClick={() => setCompanyExpanded((e) => !e)}>
|
|
{companyExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
{companyExpanded && <FloatingInput label="Service" {...register("department")} />}
|
|
<FloatingInput label="Fonction" {...register("jobTitle")} />
|
|
</FormSection>
|
|
|
|
{/* Email section */}
|
|
<FormSection icon={<Mail className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
{emailFields.map((field, index) => (
|
|
<div key={field.id} className="space-y-2">
|
|
<div className="flex items-center gap-1">
|
|
<div className="flex-1"><FloatingInput label="E-mail" type="email" {...register(`emails.${index}.value`)} /></div>
|
|
{emailFields.length > 1 && (
|
|
<Button type="button" variant="ghost" size="icon" className={cn("h-8 w-8 shrink-0 rounded-full", CONTACTS_PANEL_ICON_BTN_CLASS)} onClick={() => removeEmail(index)}>
|
|
<X className="h-3.5 w-3.5" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<Controller control={control} name={`emails.${index}.label`} render={({ field: f }) => (
|
|
<CompactSelect value={f.value} onValueChange={f.onChange} options={EMAIL_LABELS.map((l) => ({ value: l, label: l }))} />
|
|
)} />
|
|
</div>
|
|
))}
|
|
<AddButton onClick={() => appendEmail({ value: "", label: "Domicile" })}>Ajouter une adresse e-mail</AddButton>
|
|
</FormSection>
|
|
|
|
{/* Phone section */}
|
|
<FormSection icon={<Phone className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
{phoneFields.map((field, index) => (
|
|
<div key={field.id} className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded text-sm">🇫🇷</span>
|
|
<div className="flex-1"><FloatingInput label="Téléphone" type="tel" {...register(`phones.${index}.value`)} /></div>
|
|
{phoneFields.length > 1 && (
|
|
<Button type="button" variant="ghost" size="icon" className={cn("h-8 w-8 shrink-0 rounded-full", CONTACTS_PANEL_ICON_BTN_CLASS)} onClick={() => removePhone(index)}>
|
|
<X className="h-3.5 w-3.5" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<Controller control={control} name={`phones.${index}.label`} render={({ field: f }) => (
|
|
<CompactSelect value={f.value} onValueChange={f.onChange} options={PHONE_LABELS.map((l) => ({ value: l, label: l }))} />
|
|
)} />
|
|
</div>
|
|
))}
|
|
<AddButton onClick={() => appendPhone({ value: "", label: "Mobile" })}>Ajouter un numéro de téléphone</AddButton>
|
|
</FormSection>
|
|
|
|
{/* Address section */}
|
|
<FormSection icon={<MapPin className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
{addressFields.map((field, index) => (
|
|
<div key={field.id} className={CONTACTS_PANEL_CARD_CLASS}>
|
|
<div className="flex items-center justify-between">
|
|
<Controller control={control} name={`addresses.${index}.label`} render={({ field: f }) => (
|
|
<CompactSelect value={f.value} onValueChange={f.onChange} options={ADDRESS_LABELS.map((l) => ({ value: l, label: l }))} />
|
|
)} />
|
|
<Button type="button" variant="ghost" size="icon" className={cn("h-7 w-7 shrink-0 rounded-full", CONTACTS_PANEL_ICON_BTN_CLASS)} onClick={() => removeAddress(index)}>
|
|
<X className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
<FloatingInput label="Rue" {...register(`addresses.${index}.street`)} />
|
|
<div className="flex gap-2">
|
|
<div className="w-24"><FloatingInput label="Code postal" {...register(`addresses.${index}.postalCode`)} /></div>
|
|
<div className="flex-1"><FloatingInput label="Ville" {...register(`addresses.${index}.city`)} /></div>
|
|
</div>
|
|
<FloatingInput label="Région / Province" {...register(`addresses.${index}.region`)} />
|
|
<FloatingInput label="Pays" {...register(`addresses.${index}.country`)} />
|
|
</div>
|
|
))}
|
|
<AddButton onClick={() => appendAddress({ street: "", city: "", region: "", postalCode: "", country: "", label: "Domicile" })}>
|
|
Ajouter une adresse
|
|
</AddButton>
|
|
</FormSection>
|
|
|
|
{/* Birthday section */}
|
|
<FormSection icon={<Cake className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
<div className="flex items-stretch gap-2">
|
|
<div className="w-[72px]"><FloatingInput label="Jour" type="number" min={1} max={31} {...register("birthday.day", { valueAsNumber: true })} /></div>
|
|
<div className="flex-1">
|
|
<Controller control={control} name="birthday.month" render={({ field: f }) => (
|
|
<CompactSelect value={f.value ? String(f.value) : ""} onValueChange={(v) => f.onChange(v ? Number(v) : undefined)} options={FRENCH_MONTHS.map((name, i) => ({ value: String(i + 1), label: name }))} placeholder="Mois" />
|
|
)} />
|
|
</div>
|
|
<div className="w-24"><FloatingInput label="Année" type="number" min={1900} max={2100} {...register("birthday.year", { valueAsNumber: true })} /></div>
|
|
</div>
|
|
</FormSection>
|
|
|
|
{/* Notes section */}
|
|
<FormSection icon={<FileText className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
<FloatingTextarea label="Notes" {...register("notes")} />
|
|
</FormSection>
|
|
|
|
<div className="h-12" />
|
|
</form>
|
|
)
|
|
}
|
|
|
|
function FormSection({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex gap-4 py-3">
|
|
<div className="flex w-6 shrink-0 pt-2">{icon}</div>
|
|
<div className="flex-1 space-y-2">{children}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function AddButton({ onClick, children }: { onClick: () => void; children: React.ReactNode }) {
|
|
return (
|
|
<button type="button" onClick={onClick} className={cn("flex items-center gap-2 py-1", CONTACTS_PANEL_LINK_TEXT_CLASS, "hover:text-primary/80")}>
|
|
<Plus className="h-4 w-4" />{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
interface FloatingInputProps extends InputHTMLAttributes<HTMLInputElement> { label: string }
|
|
|
|
const FloatingInput = forwardRef<HTMLInputElement, FloatingInputProps>(
|
|
function FloatingInput({ label, className, defaultValue, ...props }, ref) {
|
|
const id = useId()
|
|
const [focused, setFocused] = useState(false)
|
|
const [filled, setFilled] = useState(() => !!defaultValue)
|
|
const innerRef = useRef<HTMLInputElement | null>(null)
|
|
|
|
useEffect(() => { if (innerRef.current && innerRef.current.value) setFilled(true) })
|
|
|
|
const setRefs = useCallback((node: HTMLInputElement | null) => {
|
|
innerRef.current = node
|
|
if (typeof ref === "function") ref(node); else if (ref) ref.current = node
|
|
if (node && node.value) setFilled(true)
|
|
}, [ref])
|
|
|
|
const floated = focused || filled
|
|
|
|
return (
|
|
<div className="relative">
|
|
<input ref={setRefs} id={id} {...props} defaultValue={defaultValue}
|
|
className={cn(CONTACTS_PANEL_FLOATING_INPUT_CLASS, className)}
|
|
onFocus={(e) => { 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) }}
|
|
/>
|
|
<label htmlFor={id} className={cn(CONTACTS_PANEL_FLOATING_LABEL_CLASS, floated ? "top-0.5 px-0.5 text-[10px] leading-tight" : "top-[11px] text-sm", focused ? "text-primary" : "text-muted-foreground")}>
|
|
{label}
|
|
</label>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
interface FloatingTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { label: string }
|
|
|
|
const FloatingTextarea = forwardRef<HTMLTextAreaElement, FloatingTextareaProps>(
|
|
function FloatingTextarea({ label, className, ...props }, ref) {
|
|
const id = useId()
|
|
const [focused, setFocused] = useState(false)
|
|
const [filled, setFilled] = useState(false)
|
|
const innerRef = useRef<HTMLTextAreaElement | null>(null)
|
|
|
|
useEffect(() => { if (innerRef.current && innerRef.current.value) setFilled(true) })
|
|
|
|
const setRefs = useCallback((node: HTMLTextAreaElement | null) => {
|
|
innerRef.current = node
|
|
if (typeof ref === "function") ref(node); else if (ref) ref.current = node
|
|
if (node && node.value) setFilled(true)
|
|
}, [ref])
|
|
|
|
const floated = focused || filled
|
|
|
|
return (
|
|
<div className="relative">
|
|
<textarea ref={setRefs} id={id} rows={3} {...props}
|
|
className={cn(CONTACTS_PANEL_FLOATING_TEXTAREA_CLASS, className)}
|
|
onFocus={(e) => { 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) }}
|
|
/>
|
|
<label htmlFor={id} className={cn(CONTACTS_PANEL_FLOATING_LABEL_CLASS, floated ? "top-1 px-0.5 text-[10px] leading-tight" : "top-2.5 text-sm", focused ? "text-primary" : "text-muted-foreground")}>
|
|
{label}
|
|
</label>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
function CompactSelect({ value, onValueChange, options, placeholder }: { value: string; onValueChange: (v: string) => void; options: { value: string; label: string }[]; placeholder?: string }) {
|
|
return (
|
|
<Select value={value} onValueChange={onValueChange}>
|
|
<SelectTrigger className={CONTACTS_PANEL_SELECT_TRIGGER_CLASS}>
|
|
<SelectValue placeholder={placeholder ?? "Choisir..."} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{options.map((opt) => <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
)
|
|
}
|