letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(client): phone-edit row dilation + mobile contacts layout

Browse Source 
InlinePhoneField now lays the country picker + number on top, with Save +
Cancel buttons on a second line — the previous single-line cluster was
cramped at every viewport size and broke entirely below ~480px.

A new onEditingChange callback notifies the parent when the field enters
edit mode, so contact rows can react. ContactsEditor uses it to "dilate"
the row visually: lift out of the muted baseline with a soft primary
ring + slightly brighter surface + bumped padding. Single visual signal
replaces the need for any "now editing" label, and the dilation also
hides the noisy chip cluster (label / star / trash) that would otherwise
fight the editor for space.

Mobile improvements applied at the same time:
  - Each row stacks value editor on top, action cluster below at <sm
  - Action cluster ("Add tag" + Make-primary star + trash) uses
    justify-end on the new row so it doesn't collide with the picker
  - Trash icon stays opacity-0/group-hover on desktop but is always
    visible on touch (no hover state on touch) — sm:opacity-0 +
    sm:group-hover:opacity-100 instead of the prior unconditional fade
  - NewContactForm wraps onto multiple lines below sm (basis-full on
    the value field) so the channel picker, value, label, and buttons
    each get usable width

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
2026-05-03 16:15:07 +02:00
parent 596476280d
commit cf1c8b66db
2 changed files with 123 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/clients/contacts-editor.tsx
View File

@@ -155,6 +155,7 @@ function ContactRow({
onRemove: () => void; onRemove: () => void;
}) { }) {
const Icon = CHANNEL_ICONS[contact.channel] ?? MoreHorizontal; const Icon = CHANNEL_ICONS[contact.channel] ?? MoreHorizontal;
const [phoneEditing, setPhoneEditing] = useState(false);
async function togglePrimary() { async function togglePrimary() {
try { try {
@@ -174,17 +175,31 @@ function ContactRow({
} }
return ( return (
<div className="group flex items-center gap-2 p-2 rounded-lg border bg-muted/30 text-sm"> <div
{/* Left: channel + value */} data-editing={phoneEditing ? 'true' : undefined}
<div className="flex items-center gap-2 flex-1 min-w-0"> className={cn(
'group rounded-lg border text-sm transition-all duration-150',
// Active-edit dilation: lift the row out of the muted baseline with a
// soft primary ring + slightly brighter surface. Single visual signal
// replaces the need for any "now editing" label.
phoneEditing
? 'bg-card border-primary/30 ring-2 ring-primary/15 shadow-sm p-3 gap-3'
: 'bg-muted/30 p-2 gap-2',
// Stack value editor / action cluster on mobile; single row on sm+.
'flex flex-col sm:flex-row sm:items-center',
)}
>
{/* Top / left: channel + value */}
<div className="flex min-w-0 flex-1 items-center gap-2">
<ChannelPicker value={contact.channel} onChange={changeChannel}> <ChannelPicker value={contact.channel} onChange={changeChannel}>
<Icon className="h-3.5 w-3.5 text-muted-foreground" /> <Icon className="h-3.5 w-3.5 text-muted-foreground" />
</ChannelPicker> </ChannelPicker>
<div className="min-w-0"> <div className="min-w-0 flex-1">
{contact.channel === 'phone' || contact.channel === 'whatsapp' ? ( {contact.channel === 'phone' || contact.channel === 'whatsapp' ? (
<InlinePhoneField <InlinePhoneField
e164={contact.valueE164 ?? null} e164={contact.valueE164 ?? null}
country={contact.valueCountry ?? null} country={contact.valueCountry ?? null}
onEditingChange={setPhoneEditing}
onSave={async ({ e164, country }) => { onSave={async ({ e164, country }) => {
if (!e164) { if (!e164) {
toast.error('Phone number is required'); toast.error('Phone number is required');
@@ -208,9 +223,11 @@ function ContactRow({
</div> </div>
</div> </div>
{/* Right: tag + actions */} {/* Bottom / right: tag + actions. Hidden while the phone editor is active
<div className="flex items-center gap-2 shrink-0"> to keep focus on the form — no chips fighting for space, no noise. */}
<div className="w-28 text-xs text-muted-foreground text-right"> {!phoneEditing ? (
<div className="flex shrink-0 items-center justify-end gap-2">
<div className="w-28 text-right text-xs text-muted-foreground">
<InlineEditableField <InlineEditableField
value={ value={
contact.label && contact.label.toLowerCase() !== 'primary' ? contact.label : null contact.label && contact.label.toLowerCase() !== 'primary' ? contact.label : null
@@ -228,7 +245,7 @@ function ContactRow({
onClick={togglePrimary} onClick={togglePrimary}
title={contact.isPrimary ? 'Primary' : 'Make primary'} title={contact.isPrimary ? 'Primary' : 'Make primary'}
className={cn( className={cn(
'p-1 rounded hover:bg-background/60 transition-colors', 'rounded p-1 transition-colors hover:bg-background/60',
contact.isPrimary ? 'text-primary' : 'text-muted-foreground/50', contact.isPrimary ? 'text-primary' : 'text-muted-foreground/50',
)} )}
> >
@@ -239,11 +256,13 @@ function ContactRow({
type="button" type="button"
onClick={onRemove} onClick={onRemove}
title="Remove" title="Remove"
className="p-1 rounded text-muted-foreground/50 hover:text-destructive hover:bg-background/60 opacity-0 group-hover:opacity-100 transition-all" // Trash is opacity-0 on desktop hover-only; on touch, always show.
className="rounded p-1 text-muted-foreground/50 transition-all hover:bg-background/60 hover:text-destructive sm:opacity-0 sm:group-hover:opacity-100"
> >
<Trash2 className="h-3.5 w-3.5" /> <Trash2 className="h-3.5 w-3.5" />
</button> </button>
</div> </div>
) : null}
</div> </div>
); );
} }
@@ -330,7 +349,9 @@ function NewContactForm({
const submitDisabled = saving || (isPhoneChannel ? !phoneValue?.e164 : !value.trim()); const submitDisabled = saving || (isPhoneChannel ? !phoneValue?.e164 : !value.trim());
return ( return (
<div className="flex items-center gap-2 p-2 rounded-lg border bg-muted/30 text-sm"> // Single row on sm+; wraps onto multiple lines below 640px so the channel
// picker, value field, label, and buttons each get their own usable width.
<div className="flex flex-wrap items-center gap-2 rounded-lg border bg-muted/30 p-2 text-sm">
<Select <Select
value={channel} value={channel}
onValueChange={(next) => { onValueChange={(next) => {
@@ -353,7 +374,7 @@ function NewContactForm({
</Select> </Select>
{isPhoneChannel ? ( {isPhoneChannel ? (
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1 basis-full sm:basis-auto">
<PhoneInput <PhoneInput
value={phoneValue} value={phoneValue}
onChange={(v) => setPhoneValue(v)} onChange={(v) => setPhoneValue(v)}
@@ -365,7 +386,7 @@ function NewContactForm({
value={value} value={value}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
placeholder={channel === 'email' ? 'name@example.com' : 'value'} placeholder={channel === 'email' ? 'name@example.com' : 'value'}
className="h-7 text-sm flex-1 min-w-0" className="h-7 min-w-0 flex-1 basis-full text-sm sm:basis-auto"
autoFocus autoFocus
disabled={saving} disabled={saving}
onKeyDown={(e) => { onKeyDown={(e) => {
@@ -382,7 +403,7 @@ function NewContactForm({
value={label} value={label}
onChange={(e) => setLabel(e.target.value)} onChange={(e) => setLabel(e.target.value)}
placeholder="tag (optional)" placeholder="tag (optional)"
className="h-7 text-xs w-28" className="h-7 w-28 text-xs"
disabled={saving} disabled={saving}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@@ -393,6 +414,7 @@ function NewContactForm({
}} }}
/> />
<div className="ml-auto flex gap-2">
<Button type="button" size="sm" onClick={submit} disabled={submitDisabled}> <Button type="button" size="sm" onClick={submit} disabled={submitDisabled}>
{saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : 'Save'} {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : 'Save'}
</Button> </Button>
@@ -400,5 +422,6 @@ function NewContactForm({
Cancel Cancel
</Button> </Button>
</div> </div>
</div>
); );
} }

45
src/components/shared/inline-phone-field.tsx
View File

@@ -17,6 +17,12 @@ interface InlinePhoneFieldProps {
/** Falls back to this country if `country` isn't set. */ /** Falls back to this country if `country` isn't set. */
defaultCountry?: CountryCode; defaultCountry?: CountryCode;
onSave: (next: { e164: string | null; country: CountryCode }) => Promise<void>; onSave: (next: { e164: string | null; country: CountryCode }) => Promise<void>;
/**
* Notifies the parent when the field enters/exits edit mode. Lets the row
* dim or hide noise (tag chips, action buttons) while the user is focused
* on the editor.
*/
onEditingChange?: (editing: boolean) => void;
emptyText?: string; emptyText?: string;
disabled?: boolean; disabled?: boolean;
className?: string; className?: string;
@@ -28,12 +34,13 @@ export function InlinePhoneField({
country, country,
defaultCountry, defaultCountry,
onSave, onSave,
onEditingChange,
emptyText = '—', emptyText = '—',
disabled, disabled,
className, className,
'data-testid': testId, 'data-testid': testId,
}: InlinePhoneFieldProps) { }: InlinePhoneFieldProps) {
const [editing, setEditing] = useState(false); const [editing, setEditingRaw] = useState(false);
const [draft, setDraft] = useState<PhoneInputValue | null>(() => { const [draft, setDraft] = useState<PhoneInputValue | null>(() => {
if (!e164 && !country) return null; if (!e164 && !country) return null;
return { return {
@@ -43,6 +50,11 @@ export function InlinePhoneField({
}); });
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
function setEditing(next: boolean) {
setEditingRaw(next);
onEditingChange?.(next);
}
async function commit() { async function commit() {
const next = draft ?? { e164: null, country: defaultCountry ?? 'US' }; const next = draft ?? { e164: null, country: defaultCountry ?? 'US' };
if (next.e164 === (e164 ?? null) && next.country === (country ?? null)) { if (next.e164 === (e164 ?? null) && next.country === (country ?? null)) {
@@ -62,21 +74,15 @@ export function InlinePhoneField({
if (editing) { if (editing) {
return ( return (
<div className={cn('flex items-center gap-1', className)}> // Two clean lines: country picker + number on top, action pair below.
<div className={cn('flex w-full flex-col gap-2.5', className)}>
<PhoneInput <PhoneInput
value={draft} value={draft}
onChange={(v) => setDraft(v)} onChange={(v) => setDraft(v)}
defaultCountry={defaultCountry} defaultCountry={defaultCountry}
data-testid={testId} data-testid={testId}
/> />
<button <div className="flex items-center justify-end gap-1.5">
type="button"
onClick={() => void commit()}
disabled={saving}
className="rounded px-2 py-1 text-xs font-medium hover:bg-muted disabled:opacity-50"
>
{saving ? <Loader2 className="h-3 w-3 animate-spin" /> : 'Save'}
</button>
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
@@ -91,10 +97,27 @@ export function InlinePhoneField({
setEditing(false); setEditing(false);
}} }}
disabled={saving} disabled={saving}
className="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50" className={cn(
'inline-flex h-8 items-center rounded-md px-3 text-xs font-medium',
'text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
'disabled:opacity-50',
)}
> >
Cancel Cancel
</button> </button>
<button
type="button"
onClick={() => void commit()}
disabled={saving}
className={cn(
'inline-flex h-8 min-w-[64px] items-center justify-center rounded-md px-3',
'bg-primary text-xs font-semibold text-primary-foreground shadow-sm',
'transition-colors hover:bg-primary/90 disabled:opacity-50',
)}
>
{saving ? <Loader2 className="size-3.5 animate-spin" /> : 'Save'}
</button>
</div>
</div> </div>
); );
} }