fix(web): reliable paste on iOS Safari (Add screen + dashboard)

iOS Safari often doesn't fire a textarea's onChange for a long-press 'Paste',
so nothing populated. Capture the native onPaste event (read clipboardData
directly), make the /add paste box always-visible + controlled, and add an
explicit '📋 Paste from clipboard' button (Clipboard API on tap) as a fallback.

Author: mayur-tolexo

web/app/add/add-form.tsx

@@ -28,16 +28,31 @@ export function AddForm({ carts, initial }: { carts: CartOpt[]; initial: ParsedS
   const [busy, setBusy] = useState(false);
   const [cartBusy, setCartBusy] = useState(false);
   const [uploading, setUploading] = useState(false);
+  const [pasteText, setPasteText] = useState("");
   const [added, setAdded] = useState<CartOpt | null>(null);
   const [newCartTitle, setNewCartTitle] = useState("");
 
-  const onPaste = (raw: string) => {
+  // Apply pasted/typed text → extract link, title, price into the form.
+  const applyPasted = (raw: string) => {
+    setPasteText(raw);
     const p = parseShare({ text: raw, url: raw });
     if (p.productUrl) setOriginalUrl(p.productUrl);
     if (p.title) setTitle(p.title);
     if (p.priceText) setPriceText(p.priceText);
   };
 
+  // Explicit clipboard read — the reliable path on iOS Safari, where a
+  // textarea's onChange often doesn't fire for a long-press "Paste".
+  const pasteFromClipboard = async () => {
+    try {
+      const t = await navigator.clipboard.readText();
+      if (t.trim()) applyPasted(t);
+      else toast.error("Clipboard is empty — copy the product link first.");
+    } catch {
+      toast.error("Couldn't read the clipboard — paste into the box instead.");
+    }
+  };
+
   const onPickPhoto = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     e.target.value = ""; // allow re-picking the same file
@@ -125,17 +140,30 @@ export function AddForm({ carts, initial }: { carts: CartOpt[]; initial: ParsedS
 
   return (
     <div className="space-y-4">
-      {!originalUrl && (
-        <label className="block">
-          <span className="block text-sm font-medium mb-1">Paste a product link</span>
-          <textarea
-            rows={2}
-            onChange={(e) => onPaste(e.target.value)}
-            placeholder={'Paste the link or the whole “Check out this product…” text'}
-            className={inputCls}
-          />
-        </label>
-      )}
+      <div className="block">
+        <span className="block text-sm font-medium mb-1">Paste a product link</span>
+        <textarea
+          rows={2}
+          value={pasteText}
+          onChange={(e) => applyPasted(e.target.value)}
+          onPaste={(e) => {
+            // Capture the paste directly — iOS Safari doesn't reliably fire
+            // onChange for a long-press paste. preventDefault so we set the
+            // value ourselves (no double insert).
+            e.preventDefault();
+            applyPasted(e.clipboardData.getData("text"));
+          }}
+          placeholder={'Paste the link or the whole “Check out this product…” text'}
+          className={inputCls}
+        />
+        <button
+          type="button"
+          onClick={pasteFromClipboard}
+          className="mt-2 inline-flex items-center gap-2 rounded-full border border-ink px-4 py-2 text-sm font-medium hover:bg-paper"
+        >
+          📋 Paste from clipboard
+        </button>
+      </div>
 
       <label className="block">
         <span className="block text-sm font-medium mb-1">Cart</span>

web/components/paste-url-preview.tsx

@@ -123,6 +123,12 @@ export function PasteUrlPreview({ onResolved }: PasteUrlPreviewProps) {
             rows={2}
             value={rawInput}
             onChange={(e) => handlePaste(e.target.value)}
+            onPaste={(e) => {
+              // iOS Safari doesn't reliably fire onChange for a long-press
+              // paste — capture the clipboard data directly.
+              e.preventDefault();
+              handlePaste(e.clipboardData.getData("text"));
+            }}
             placeholder="Paste here — e.g. “Check out this product… https://www.myntra.com/…”"
             className="w-full resize-y rounded-lg border border-rule bg-cream py-3 pl-10 pr-4 text-base leading-relaxed focus:outline-none focus:ring-2 focus:ring-accent focus:border-accent"
           />