Add 'Share with a friend' — Web Share API + clipboard fallback

Convention used: navigator.share() with a clipboard.writeText() fallback
plus a brief 'Link copied' toast. No platform-specific buttons (Twitter,
WhatsApp, etc.) — the OS share sheet covers all of those on mobile, and
the clipboard fallback covers any browser where Web Share isn't
supported.

Two surfaces:

1. Results screen, on a passed lesson — full-width "Share with a friend"
   pill below the Next-lesson / Try-again CTA. Catches the user at the
   dopamine moment. Shared text reads "I just got 80% on Backyard
   Regulars in goodbird — a field guide you can hear."
2. Species detail page header — small share icon next to the favorite
   heart. Shared text reads 'Listen: "{mnemonic}"' with a deep link to
   /species/:id, so the recipient lands on that exact bird.

URLs are derived from window.location.origin so the share works on
whatever domain the app is served from (good-bird.netlify.app today,
anything later) without code changes.

Implementation:
- src/lib/share.ts: tryShare() returns 'shared' | 'copied' | 'dismissed'
  | 'failed'. AbortError (user dismissed share sheet) is treated as a
  valid no-op rather than a failure.
- src/components/ShareButton.tsx: pill + icon variants, with an inline
  Toast component that lives 2s after a successful copy.

Author: mogglemoss

src/components/ShareButton.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { tryShare, type ShareData } from "@/lib/share";
+import { cn } from "@/lib/cn";
+
+interface Props {
+  data: ShareData;
+  /** "pill" = full-width text button (Results CTA). "icon" = round icon (page headers). */
+  variant?: "pill" | "icon";
+  className?: string;
+  label?: string;
+}
+
+export function ShareButton({ data, variant = "pill", className, label = "Share with a friend" }: Props) {
+  const [feedback, setFeedback] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!feedback) return;
+    const t = setTimeout(() => setFeedback(null), 2000);
+    return () => clearTimeout(t);
+  }, [feedback]);
+
+  const onClick = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const r = await tryShare(data);
+    if (r === "copied") setFeedback("Link copied");
+    else if (r === "failed") setFeedback("Couldn't share");
+  };
+
+  if (variant === "icon") {
+    return (
+      <div className={cn("relative", className)}>
+        <button
+          onClick={onClick}
+          aria-label="Share"
+          className="grid h-10 w-10 place-items-center rounded-full text-(--color-ink-soft) hover:bg-(--color-line) cursor-pointer"
+        >
+          <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7" />
+            <polyline points="16 6 12 2 8 6" />
+            <line x1="12" y1="2" x2="12" y2="15" />
+          </svg>
+        </button>
+        {feedback && <Toast text={feedback} placement="left" />}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "tap-target relative w-full rounded-full border-2 border-(--color-line) bg-(--color-surface) px-6 py-3 text-center font-semibold text-(--color-ink) transition-colors hover:border-(--color-moss-300)",
+        className,
+      )}
+    >
+      <span className="inline-flex items-center justify-center gap-2">
+        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7" />
+          <polyline points="16 6 12 2 8 6" />
+          <line x1="12" y1="2" x2="12" y2="15" />
+        </svg>
+        {feedback ?? label}
+      </span>
+    </button>
+  );
+}
+
+function Toast({ text, placement }: { text: string; placement: "left" | "above" }) {
+  return (
+    <span
+      role="status"
+      aria-live="polite"
+      className={cn(
+        "pointer-events-none absolute z-10 whitespace-nowrap rounded-full bg-(--color-ink) px-3 py-1 text-xs font-medium text-white shadow-(--shadow-pop)",
+        placement === "left" && "right-full top-1/2 mr-2 -translate-y-1/2",
+        placement === "above" && "bottom-full left-1/2 mb-2 -translate-x-1/2",
+      )}
+    >
+      {text}
+    </span>
+  );
+}

src/lib/share.ts

@@ -0,0 +1,35 @@
+// Web Share API + clipboard fallback. Caller doesn't care which path fires;
+// the returned result tells the UI whether to show a "Link copied" toast.
+
+export interface ShareData {
+  title: string;
+  text: string;
+  url: string;
+}
+
+export type ShareResult = "shared" | "copied" | "dismissed" | "failed";
+
+export async function tryShare(data: ShareData): Promise<ShareResult> {
+  // Native OS share sheet (iOS Safari, Android Chrome, Edge, Safari 17+,
+  // recent Chrome on desktop). Lets the user pick any installed app.
+  if (typeof navigator !== "undefined" && typeof navigator.share === "function") {
+    try {
+      await navigator.share(data);
+      return "shared";
+    } catch (e: unknown) {
+      // User dismissed the share sheet — that's a valid no-op, not an error.
+      if (e instanceof Error && e.name === "AbortError") return "dismissed";
+      // Other errors fall through to clipboard.
+    }
+  }
+  // Fallback: copy URL to clipboard so the user can paste it themselves.
+  try {
+    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(data.url);
+      return "copied";
+    }
+  } catch {
+    /* ignore */
+  }
+  return "failed";
+}

src/routes/Results.tsx

@@ -6,6 +6,7 @@ import { useGame } from "@/game/store";
 import { lessonComplete } from "@/lib/feedback";
 import { getLesson, getSpecies, getUnitForLesson, nextLesson as findNextLesson } from "@/lib/manifest";
 import { PlaySoundButton } from "@/components/PlaySoundButton";
+import { ShareButton } from "@/components/ShareButton";
 import { ACCENTS } from "@/lib/theme";
 import { cn } from "@/lib/cn";
 
@@ -143,6 +144,16 @@ export function ResultsRoute() {
             Try again
           </Link>
         )}
+
+        {snap.passed && (
+          <ShareButton
+            data={{
+              title: "goodbird",
+              text: `I just got ${accuracy}% on ${lessonTitle} in goodbird — a field guide you can hear.`,
+              url: typeof window !== "undefined" ? window.location.origin : "",
+            }}
+          />
+        )}
         <Link
           to="/"
           className="tap-target rounded-full border-2 border-(--color-line) bg-(--color-surface) px-6 py-3 text-center font-semibold text-(--color-ink) transition-colors hover:border-(--color-moss-300)"

src/routes/Species.tsx

@@ -1,6 +1,7 @@
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { allLessons, getSpecies, units } from "@/lib/manifest";
 import { AudioPlayer } from "@/components/AudioPlayer";
+import { ShareButton } from "@/components/ShareButton";
 import { useGame } from "@/game/store";
 import { ACCENTS } from "@/lib/theme";
 import { cn } from "@/lib/cn";
@@ -49,19 +50,29 @@ export function SpeciesRoute() {
             <path d="M15 6l-6 6 6 6" />
           </svg>
         </button>
-        <button
-          onClick={() => toggleFavorite(id)}
-          aria-label={isFavorite ? "Remove favorite" : "Add favorite"}
-          aria-pressed={isFavorite}
-          className={cn(
-            "grid h-10 w-10 place-items-center rounded-full transition-colors cursor-pointer",
-            isFavorite ? "text-(--color-wrong)" : "text-(--color-ink-soft) hover:bg-(--color-line)",
-          )}
-        >
-          <svg viewBox="0 0 24 24" className="h-6 w-6" fill={isFavorite ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2">
-            <path d="M12 21s-7.5-4.6-9.6-9.2C1 8.5 2.6 5 6.1 5c2 0 3.6 1.1 4.4 2.7C11.3 6.1 12.9 5 14.9 5c3.5 0 5.1 3.5 3.7 6.8C19.5 16.4 12 21 12 21z" />
-          </svg>
-        </button>
+        <div className="flex items-center gap-1">
+          <ShareButton
+            variant="icon"
+            data={{
+              title: `goodbird — ${species.commonName}`,
+              text: `Listen: "${species.mnemonic}"`,
+              url: typeof window !== "undefined" ? `${window.location.origin}/species/${species.id}` : "",
+            }}
+          />
+          <button
+            onClick={() => toggleFavorite(id)}
+            aria-label={isFavorite ? "Remove favorite" : "Add favorite"}
+            aria-pressed={isFavorite}
+            className={cn(
+              "grid h-10 w-10 place-items-center rounded-full transition-colors cursor-pointer",
+              isFavorite ? "text-(--color-wrong)" : "text-(--color-ink-soft) hover:bg-(--color-line)",
+            )}
+          >
+            <svg viewBox="0 0 24 24" className="h-6 w-6" fill={isFavorite ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2">
+              <path d="M12 21s-7.5-4.6-9.6-9.2C1 8.5 2.6 5 6.1 5c2 0 3.6 1.1 4.4 2.7C11.3 6.1 12.9 5 14.9 5c3.5 0 5.1 3.5 3.7 6.8C19.5 16.4 12 21 12 21z" />
+            </svg>
+          </button>
+        </div>
       </div>
 
       <div