Merge fix/mobile-add-ux: robust link extraction + easier add-product nav

Author: mayur-tolexo

web/app/(public)/mobile/page.tsx

@@ -19,7 +19,7 @@ const androidSteps = [
 const iosSteps = [
   { t: "Add to Home Screen", b: "Open shoplit.in in Safari → tap Share → “Add to Home Screen”. (iPhone doesn’t let apps share into shoplit — Apple limitation — so adding is by paste.)" },
   { t: "Copy the product link", b: "On the shopping app or site, tap Share → Copy (or copy the page address)." },
-  { t: "Paste into shoplit", b: "Open shoplit, go to Add a product, and paste. shoplit pulls the title from the link automatically." },
+  { t: "Paste into shoplit", b: "Open shoplit, tap the ＋ Add button, and paste the link. shoplit fills in what it can from the link — add or tweak the title." },
   { t: "Pick a cart & add", b: "Adjust the price/image if needed, choose the cart, and add." },
 ];
 

web/app/dashboard/page.tsx

@@ -94,14 +94,22 @@ export default async function DashboardPage() {
           </div>
 
           {/* HEADER ROW */}
-          <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center justify-between gap-3 mb-6">
             <h2 className="font-serif text-2xl">All carts</h2>
-            <Link
-              href="/dashboard/carts/new"
-              className="inline-flex items-center gap-2 rounded-full bg-ink text-cream px-5 py-2.5 font-medium hover:opacity-90 transition-opacity"
-            >
-              <Plus size={16} /> New cart
-            </Link>
+            <div className="flex items-center gap-2 shrink-0">
+              <Link
+                href="/add"
+                className="inline-flex items-center gap-2 rounded-full bg-ink text-cream px-5 py-2.5 font-medium hover:opacity-90 transition-opacity"
+              >
+                <Plus size={16} /> Add a product
+              </Link>
+              <Link
+                href="/dashboard/carts/new"
+                className="inline-flex items-center gap-2 rounded-full border border-ink px-4 py-2.5 font-medium hover:bg-paper transition-colors"
+              >
+                New cart
+              </Link>
+            </div>
           </div>
 
           {/* GRID */}

web/components/mobile-bottom-nav.tsx

@@ -7,7 +7,7 @@ import { toast } from "sonner";
 import { logout } from "@/lib/api-client";
 
 // Sticky bottom nav for /dashboard* on mobile only. Hidden at sm+ (the top
-// NavBar covers desktop). 3 actions: home / new cart (prominent) / sign out.
+// NavBar covers desktop). 3 actions: home / add a product (prominent) / sign out.
 export function MobileBottomNav() {
   const pathname = usePathname();
   const router = useRouter();
@@ -32,7 +32,7 @@ export function MobileBottomNav() {
     >
       <div className="flex items-stretch justify-around h-16 px-2">
         <NavItem href="/dashboard" label="Carts" icon={<Home size={20} />} active={isHome} />
-        <CenterAction href="/dashboard/carts/new" />
+        <CenterAction href="/add" />
         <NavButton label="Sign out" icon={<LogOut size={20} />} onClick={handleLogout} />
       </div>
     </nav>
@@ -88,7 +88,7 @@ function CenterAction({ href }: { href: string }) {
   return (
     <Link
       href={href}
-      aria-label="New cart"
+      aria-label="Add a product"
       className="-translate-y-3 flex items-center justify-center w-14 h-14 rounded-full bg-ink text-cream shadow-lg hover:opacity-90 transition-opacity"
     >
       <Plus size={22} />

web/components/paste-url-preview.tsx

@@ -3,6 +3,7 @@
 import { useState, useTransition } from "react";
 import { Loader2, Link2, Plus } from "lucide-react";
 import { fetchOG } from "@/lib/api-client";
+import { parseShare } from "@/lib/parse-share";
 import type { Product, Retailer } from "@/lib/types";
 import { RetailerIcon, retailerLabel } from "./retailer-icon";
 
@@ -15,6 +16,9 @@ interface PasteUrlPreviewProps {
 // (some retailers do), the fields are blank and the creator fills them in
 // manually — so adding a product never dead-ends.
 export function PasteUrlPreview({ onResolved }: PasteUrlPreviewProps) {
+  // What the creator pasted (kept intact so large "share text" stays visible).
+  const [rawInput, setRawInput] = useState("");
+  // The clean product URL extracted from it (editable in the resolved form).
   const [url, setUrl] = useState("");
   const [pending, startTransition] = useTransition();
   const [showForm, setShowForm] = useState(false);
@@ -31,6 +35,7 @@ export function PasteUrlPreview({ onResolved }: PasteUrlPreviewProps) {
   const [canonicalUrl, setCanonicalUrl] = useState("");
 
   const reset = () => {
+    setRawInput("");
     setUrl("");
     setShowForm(false);
     setAutofilled(false);
@@ -43,41 +48,37 @@ export function PasteUrlPreview({ onResolved }: PasteUrlPreviewProps) {
   };
 
   const handlePaste = (raw: string) => {
-    setUrl(raw);
-    // Accept full retailer "share text", not just a bare URL. Apps share
-    // things like "Check out this product I found on Nykaa: <name> <url>" —
-    // pull the URL out of anywhere in the text.
-    const urlMatch = raw.match(/https?:\/\/[^\s]+/);
-    if (!urlMatch) {
+    setRawInput(raw);
+    // Accept full retailer "share text", not just a bare URL — parseShare pulls
+    // out a clean http(s) link (upgrading scheme-less ones, trimming trailing
+    // punctuation) plus a best-effort title and price.
+    const parsed = parseShare({ text: raw, url: raw });
+    if (!parsed.productUrl) {
+      setUrl("");
       setShowForm(false);
       return;
     }
-    const targetUrl = urlMatch[0];
-    // The text around the URL is usually the product name. Strip a
-    // "Check out … on <retailer>:" style lead-in if present.
-    let shareTitle = raw.replace(targetUrl, "").trim();
-    const seg = shareTitle.match(/^(.*?:)\s*([\s\S]+)$/);
-    if (seg && /check out|found on|shared|recommend|buy this|loving/i.test(seg[1])) {
-      shareTitle = seg[2].trim();
-    }
-    setUrl(targetUrl); // normalize the field to just the URL
+    setUrl(parsed.productUrl);
 
     startTransition(async () => {
       try {
-        const og = await fetchOG(targetUrl);
+        const og = await fetchOG(parsed.productUrl);
         setRetailer(og.retailer);
         setCanonicalUrl(og.canonicalUrl ?? "");
         // Prefer the clean title from the share text; fall back to OG. This
         // gives a usable title even when the server fetch is blocked.
-        setTitle(shareTitle || og.title || "");
+        setTitle(parsed.title || og.title || "");
         if (og.ok) {
           setImageUrl(og.imageUrl ?? "");
-          setPriceText(og.priceText ?? "");
+          setPriceText(og.priceText || parsed.priceText || "");
+        } else {
+          setPriceText(parsed.priceText || "");
         }
-        setAutofilled(Boolean(shareTitle || (og.ok && (og.title || og.imageUrl))));
+        setAutofilled(Boolean(parsed.title || (og.ok && (og.title || og.imageUrl))));
       } catch {
-        setTitle(shareTitle);
-        setAutofilled(Boolean(shareTitle));
+        setTitle(parsed.title);
+        setPriceText(parsed.priceText || "");
+        setAutofilled(Boolean(parsed.title));
       } finally {
         setShowForm(true);
       }
@@ -103,15 +104,20 @@ export function PasteUrlPreview({ onResolved }: PasteUrlPreviewProps) {
       <label className="block">
         <span className="block text-sm font-medium mb-2">Paste a product link — or the whole &ldquo;share&rdquo; text from a shopping app</span>
         <div className="relative">
-          <Link2 size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" aria-hidden />
-          <input
-            type="url"
-            value={url}
+          <Link2 size={16} className="absolute left-3 top-4 text-muted" aria-hidden />
+          <textarea
+            rows={2}
+            value={rawInput}
             onChange={(e) => handlePaste(e.target.value)}
-            placeholder="https://www.myntra.com/…"
-            className="w-full rounded-lg border border-rule bg-cream py-4 pl-10 pr-4 text-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-accent"
+            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"
           />
         </div>
+        {url && (
+          <p className="mt-1 text-xs text-muted truncate">
+            Link detected: <span className="text-ink">{url}</span>
+          </p>
+        )}
       </label>
 
       {pending && (
@@ -172,6 +178,17 @@ export function PasteUrlPreview({ onResolved }: PasteUrlPreviewProps) {
             </div>
           </div>
 
+          <input
+            type="url"
+            value={url}
+            onChange={(e) => {
+              setUrl(e.target.value);
+              setCanonicalUrl(""); // a manual edit wins over the resolved link
+            }}
+            placeholder="Product link"
+            className="w-full rounded-md border border-rule bg-cream px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent"
+          />
+
           <input
             type="text"
             value={note}

web/lib/parse-share.test.ts

@@ -51,4 +51,27 @@ describe("parseShare", () => {
     expect(r.productUrl).toBe("");
     expect(r.title).toBe("just some text");
   });
+
+  it("trims trailing punctuation wrapped around the link", () => {
+    const r = parseShare({ text: "Buy now (https://www.flipkart.com/boat/p/itm123)." });
+    expect(r.productUrl).toBe("https://www.flipkart.com/boat/p/itm123");
+  });
+
+  it("upgrades a scheme-less url to https", () => {
+    const r = parseShare({ text: "Check this out www.nykaa.com/lakme/p/12345" });
+    expect(r.productUrl).toBe("https://www.nykaa.com/lakme/p/12345");
+  });
+
+  it("strips boilerplate even without a colon", () => {
+    const r = parseShare({
+      text: "Check out this product I found on Nykaa https://www.nykaa.com/maybelline-mascara/p/9999",
+    });
+    expect(r.productUrl).toBe("https://www.nykaa.com/maybelline-mascara/p/9999");
+    expect(r.title).toBe("maybelline mascara");
+  });
+
+  it("does not mistake a plain sentence for a url", () => {
+    const r = parseShare({ text: "loving it. so good." });
+    expect(r.productUrl).toBe("");
+  });
 });

web/lib/parse-share.ts

@@ -12,8 +12,31 @@ export interface ParsedShare {
 
 const URL_RE = /https?:\/\/[^\s"'<>]+/i;
 const URL_RE_G = /https?:\/\/[^\s"'<>]+/gi;
+// Bare (scheme-less) URL with a path — many apps share "www.nykaa.com/x/123"
+// or "nykaa.com/x/123". Requires a dotted TLD followed by a "/path" so we don't
+// match plain sentences like "loving it." A scheme is prepended on extraction.
+const BARE_URL_RE = /(?:www\.)?[a-z0-9-]+(?:\.[a-z]{2,})+\/[^\s"'<>]+/i;
+const BARE_URL_RE_G = /(?:www\.)?[a-z0-9-]+(?:\.[a-z]{2,})+\/[^\s"'<>]+/gi;
+// Punctuation a share message commonly appends right after the link, e.g.
+// "(https://…/p/123)." — must not become part of the stored URL.
+const TRAILING_PUNCT = /[)\].,;:!?'"»>]+$/;
 const PRICE_RE = /(?:₹|rs\.?|inr)\s?[\d,]+(?:\.\d{1,2})?/i;
 
+// Pull the first usable product URL out of the given sources, preferring a real
+// http(s) link, then a scheme-less one (which we upgrade to https). Trailing
+// share-message punctuation is trimmed off either way.
+function extractUrl(...sources: string[]): string {
+  for (const s of sources) {
+    const m = s.match(URL_RE)?.[0];
+    if (m) return m.replace(TRAILING_PUNCT, "");
+  }
+  for (const s of sources) {
+    const m = s.match(BARE_URL_RE)?.[0];
+    if (m) return "https://" + m.replace(TRAILING_PUNCT, "");
+  }
+  return "";
+}
+
 // Boilerplate that retailer apps prepend to shared text.
 const BOILERPLATE: RegExp[] = [
   /check out this product i found on[^:]*:?/i,
@@ -49,15 +72,15 @@ export function parseShare(input: SharedInput): ParsedShare {
   const text = (input.text ?? "").trim();
   const url = (input.url ?? "").trim();
 
-  // 1. Product URL: explicit url param first, else first URL in text.
-  let productUrl = url.match(URL_RE)?.[0] ?? "";
-  if (!productUrl) productUrl = text.match(URL_RE)?.[0] ?? "";
+  // 1. Product URL: explicit url param first, else from the text — preferring a
+  // real http(s) link, then a scheme-less one, with trailing punctuation trimmed.
+  const productUrl = extractUrl(url, text);
 
   // 2. Title: title param (unless it's a URL) → text minus URLs/boilerplate → slug.
   let title = (input.title ?? "").trim();
   if (URL_RE.test(title) && title.match(URL_RE)?.[0] === title) title = "";
   if (!title) {
-    let t = text.replace(URL_RE_G, " ");
+    let t = text.replace(URL_RE_G, " ").replace(BARE_URL_RE_G, " ");
     t = t.replace(PRICE_RE, " ");
     for (const re of BOILERPLATE) t = t.replace(re, " ");
     title = t.replace(/\s+/g, " ").trim();