From cf1c8b66db2539d82fd9b65deaaac6a41ea5dd41 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Sun, 3 May 2026 16:15:07 +0200
Subject: [PATCH] feat(client): phone-edit row dilation + mobile contacts
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/components/clients/contacts-editor.tsx   | 121 +++++++++++--------
 src/components/shared/inline-phone-field.tsx |  79 +++++++-----
 2 files changed, 123 insertions(+), 77 deletions(-)

diff --git a/src/components/clients/contacts-editor.tsx b/src/components/clients/contacts-editor.tsx
index f6fe92f..a4b701b 100644
--- a/src/components/clients/contacts-editor.tsx
+++ b/src/components/clients/contacts-editor.tsx
@@ -155,6 +155,7 @@ function ContactRow({
   onRemove: () => void;
 }) {
   const Icon = CHANNEL_ICONS[contact.channel] ?? MoreHorizontal;
+  const [phoneEditing, setPhoneEditing] = useState(false);
 
   async function togglePrimary() {
     try {
@@ -174,17 +175,31 @@ function ContactRow({
   }
 
   return (
-    <div className="group flex items-center gap-2 p-2 rounded-lg border bg-muted/30 text-sm">
-      {/* Left: channel + value */}
-      <div className="flex items-center gap-2 flex-1 min-w-0">
+    <div
+      data-editing={phoneEditing ? 'true' : undefined}
+      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}>
           <Icon className="h-3.5 w-3.5 text-muted-foreground" />
         </ChannelPicker>
-        <div className="min-w-0">
+        <div className="min-w-0 flex-1">
           {contact.channel === 'phone' || contact.channel === 'whatsapp' ? (
             <InlinePhoneField
               e164={contact.valueE164 ?? null}
               country={contact.valueCountry ?? null}
+              onEditingChange={setPhoneEditing}
               onSave={async ({ e164, country }) => {
                 if (!e164) {
                   toast.error('Phone number is required');
@@ -208,42 +223,46 @@ function ContactRow({
         </div>
       </div>
 
-      {/* Right: tag + actions */}
-      <div className="flex items-center gap-2 shrink-0">
-        <div className="w-28 text-xs text-muted-foreground text-right">
-          <InlineEditableField
-            value={
-              contact.label && contact.label.toLowerCase() !== 'primary' ? contact.label : null
-            }
-            emptyText="Add tag"
-            placeholder="work, home…"
-            onSave={async (v) => {
-              await onUpdate({ label: v });
-            }}
-          />
+      {/* Bottom / right: tag + actions. Hidden while the phone editor is active
+          to keep focus on the form — no chips fighting for space, no noise. */}
+      {!phoneEditing ? (
+        <div className="flex shrink-0 items-center justify-end gap-2">
+          <div className="w-28 text-right text-xs text-muted-foreground">
+            <InlineEditableField
+              value={
+                contact.label && contact.label.toLowerCase() !== 'primary' ? contact.label : null
+              }
+              emptyText="Add tag"
+              placeholder="work, home…"
+              onSave={async (v) => {
+                await onUpdate({ label: v });
+              }}
+            />
+          </div>
+
+          <button
+            type="button"
+            onClick={togglePrimary}
+            title={contact.isPrimary ? 'Primary' : 'Make primary'}
+            className={cn(
+              'rounded p-1 transition-colors hover:bg-background/60',
+              contact.isPrimary ? 'text-primary' : 'text-muted-foreground/50',
+            )}
+          >
+            <Star className={cn('h-3.5 w-3.5', contact.isPrimary && 'fill-current')} />
+          </button>
+
+          <button
+            type="button"
+            onClick={onRemove}
+            title="Remove"
+            // 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" />
+          </button>
         </div>
-
-        <button
-          type="button"
-          onClick={togglePrimary}
-          title={contact.isPrimary ? 'Primary' : 'Make primary'}
-          className={cn(
-            'p-1 rounded hover:bg-background/60 transition-colors',
-            contact.isPrimary ? 'text-primary' : 'text-muted-foreground/50',
-          )}
-        >
-          <Star className={cn('h-3.5 w-3.5', contact.isPrimary && 'fill-current')} />
-        </button>
-
-        <button
-          type="button"
-          onClick={onRemove}
-          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"
-        >
-          <Trash2 className="h-3.5 w-3.5" />
-        </button>
-      </div>
+      ) : null}
     </div>
   );
 }
@@ -330,7 +349,9 @@ function NewContactForm({
   const submitDisabled = saving || (isPhoneChannel ? !phoneValue?.e164 : !value.trim());
 
   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
         value={channel}
         onValueChange={(next) => {
@@ -353,7 +374,7 @@ function NewContactForm({
       </Select>
 
       {isPhoneChannel ? (
-        <div className="flex-1 min-w-0">
+        <div className="min-w-0 flex-1 basis-full sm:basis-auto">
           <PhoneInput
             value={phoneValue}
             onChange={(v) => setPhoneValue(v)}
@@ -365,7 +386,7 @@ function NewContactForm({
           value={value}
           onChange={(e) => setValue(e.target.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
           disabled={saving}
           onKeyDown={(e) => {
@@ -382,7 +403,7 @@ function NewContactForm({
         value={label}
         onChange={(e) => setLabel(e.target.value)}
         placeholder="tag (optional)"
-        className="h-7 text-xs w-28"
+        className="h-7 w-28 text-xs"
         disabled={saving}
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
@@ -393,12 +414,14 @@ function NewContactForm({
         }}
       />
 
-      <Button type="button" size="sm" onClick={submit} disabled={submitDisabled}>
-        {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : 'Save'}
-      </Button>
-      <Button type="button" size="sm" variant="ghost" onClick={onCancel} disabled={saving}>
-        Cancel
-      </Button>
+      <div className="ml-auto flex gap-2">
+        <Button type="button" size="sm" onClick={submit} disabled={submitDisabled}>
+          {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : 'Save'}
+        </Button>
+        <Button type="button" size="sm" variant="ghost" onClick={onCancel} disabled={saving}>
+          Cancel
+        </Button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/shared/inline-phone-field.tsx b/src/components/shared/inline-phone-field.tsx
index bb808ce..a752ad5 100644
--- a/src/components/shared/inline-phone-field.tsx
+++ b/src/components/shared/inline-phone-field.tsx
@@ -17,6 +17,12 @@ interface InlinePhoneFieldProps {
   /** Falls back to this country if `country` isn't set. */
   defaultCountry?: CountryCode;
   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;
   disabled?: boolean;
   className?: string;
@@ -28,12 +34,13 @@ export function InlinePhoneField({
   country,
   defaultCountry,
   onSave,
+  onEditingChange,
   emptyText = '—',
   disabled,
   className,
   'data-testid': testId,
 }: InlinePhoneFieldProps) {
-  const [editing, setEditing] = useState(false);
+  const [editing, setEditingRaw] = useState(false);
   const [draft, setDraft] = useState<PhoneInputValue | null>(() => {
     if (!e164 && !country) return null;
     return {
@@ -43,6 +50,11 @@ export function InlinePhoneField({
   });
   const [saving, setSaving] = useState(false);
 
+  function setEditing(next: boolean) {
+    setEditingRaw(next);
+    onEditingChange?.(next);
+  }
+
   async function commit() {
     const next = draft ?? { e164: null, country: defaultCountry ?? 'US' };
     if (next.e164 === (e164 ?? null) && next.country === (country ?? null)) {
@@ -62,39 +74,50 @@ export function InlinePhoneField({
 
   if (editing) {
     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
           value={draft}
           onChange={(v) => setDraft(v)}
           defaultCountry={defaultCountry}
           data-testid={testId}
         />
-        <button
-          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
-          type="button"
-          onClick={() => {
-            setDraft(
-              e164 || country
-                ? {
-                    e164: e164 ?? null,
-                    country: (country as CountryCode | null) ?? defaultCountry ?? 'US',
-                  }
-                : null,
-            );
-            setEditing(false);
-          }}
-          disabled={saving}
-          className="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50"
-        >
-          Cancel
-        </button>
+        <div className="flex items-center justify-end gap-1.5">
+          <button
+            type="button"
+            onClick={() => {
+              setDraft(
+                e164 || country
+                  ? {
+                      e164: e164 ?? null,
+                      country: (country as CountryCode | null) ?? defaultCountry ?? 'US',
+                    }
+                  : null,
+              );
+              setEditing(false);
+            }}
+            disabled={saving}
+            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
+          </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>
     );
   }