feat(messaging-ui): Gmail-style uploading chip while an attachment uploads (0.1.2)

Picking a file now shows an immediate chip with the filename + a spinner while
the bytes upload (mail compose, mail reply, and the messenger composer), instead
of only appearing once upload finishes. Respects prefers-reduced-motion.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

packages/iios-messaging-ui/src/inbox/inbox.tsx

@@ -122,6 +122,7 @@ export function MailReader({ threadId, subject }: { threadId: string; subject: s
   const [sending, setSending] = useState(false);
   const [pending, setPending] = useState<MailAttachment | null>(null);
   const [attaching, setAttaching] = useState(false);
+  const [uploadingName, setUploadingName] = useState<string | null>(null);
   const [attachErr, setAttachErr] = useState<string | null>(null);
   const fileRef = useRef<HTMLInputElement>(null);
 
@@ -139,6 +140,7 @@ export function MailReader({ threadId, subject }: { threadId: string; subject: s
     e.target.value = '';
     if (!file) return;
     setAttaching(true);
+    setUploadingName(file.name);
     setAttachErr(null);
     try {
       setPending(await upload(file));
@@ -146,6 +148,7 @@ export function MailReader({ threadId, subject }: { threadId: string; subject: s
       setAttachErr(err instanceof Error ? err.message : String(err));
     } finally {
       setAttaching(false);
+      setUploadingName(null);
     }
   }
 
@@ -198,7 +201,11 @@ export function MailReader({ threadId, subject }: { threadId: string; subject: s
       </div>
       <form className="miu-composer" onSubmit={submit}>
         {attachErr ? <div className="miu-empty miu-error">{attachErr}</div> : null}
-        {pending ? (
+        {attaching && uploadingName ? (
+          <div className="miu-attach-pending">
+            <span className="miu-attach-chip is-uploading"><span className="miu-spinner" aria-hidden="true" /> {uploadingName} · uploading…</span>
+          </div>
+        ) : pending ? (
           <div className="miu-attach-pending">
             <span className="miu-attach-chip">📎 {pending.filename ?? 'attachment'}{pending.sizeBytes ? ` · ${fmtBytes(pending.sizeBytes)}` : ''}</span>
             <button type="button" className="miu-attach-x" onClick={() => setPending(null)} aria-label="Remove attachment">✕</button>
@@ -232,6 +239,7 @@ function ComposeModal({ onClose, onSent }: { onClose: () => void; onSent: () =>
   const [err, setErr] = useState<string | null>(null);
   const [attachments, setAttachments] = useState<MailAttachment[]>([]);
   const [attaching, setAttaching] = useState(false);
+  const [uploadingName, setUploadingName] = useState<string | null>(null);
   const fileRef = useRef<HTMLInputElement>(null);
 
   const filtered = compose.directory.filter((p) => p.name.toLowerCase().includes(q.trim().toLowerCase()));
@@ -242,6 +250,7 @@ function ComposeModal({ onClose, onSent }: { onClose: () => void; onSent: () =>
     e.target.value = '';
     if (!file || attachments.length >= 10) return;
     setAttaching(true);
+    setUploadingName(file.name);
     setErr(null);
     try {
       const ref = await compose.upload(file);
@@ -250,6 +259,7 @@ function ComposeModal({ onClose, onSent }: { onClose: () => void; onSent: () =>
       setErr(e2 instanceof Error ? e2.message : String(e2));
     } finally {
       setAttaching(false);
+      setUploadingName(null);
     }
   }
 
@@ -323,9 +333,14 @@ function ComposeModal({ onClose, onSent }: { onClose: () => void; onSent: () =>
                     <button type="button" className="miu-attach-x" onClick={() => setAttachments((prev) => prev.filter((_, j) => j !== i))} aria-label="Remove attachment">✕</button>
                   </span>
                 ))}
+                {attaching && uploadingName ? (
+                  <span className="miu-attach-pending">
+                    <span className="miu-attach-chip is-uploading"><span className="miu-spinner" aria-hidden="true" /> {uploadingName} · uploading…</span>
+                  </span>
+                ) : null}
                 <input ref={fileRef} type="file" hidden onChange={pick} aria-label="Attach file" />
                 <button type="button" className="miu-tab" onClick={() => fileRef.current?.click()} disabled={attaching || attachments.length >= 10}>
-                  {attaching ? 'Uploading…' : '📎 Attach'}
+                  📎 Attach
                 </button>
               </div>
             </div>