feat: OS Share Target for recipe URLs (v0.67.0)

Declares share_target in manifest.ts (action /recipes, GET,
title/text/url params). recipes/page.tsx extracts the shared link --
preferring the url param, falling back to the first http(s) URL
found inside text since senders vary on where they put it -- and
passes it to RecipesHeader as sharedUrl. UrlImportDialog gained
initialUrl/autoImport props so the existing import-from-URL flow
opens pre-filled and fires immediately instead of requiring the user
to paste the link back in.

Chromium/Android only -- Safari has no Share Target API at all,
same restriction already documented for the install-prompt banner.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/app/(app)/recipes/page.tsx

@@ -24,8 +24,25 @@ type SearchParams = Promise<{
   page?: string;
   batchCook?: string;
   recipeType?: string;
+  // OS Share Target params (manifest.ts's share_target) — a browser share
+  // sheet navigates here with these appended.
+  url?: string;
+  text?: string;
+  title?: string;
 }>;
 
+const URL_PATTERN = /https?:\/\/\S+/;
+
+/** Web Share Target's GET params vary by sender: some apps put the shared
+ * link in `url`, others (notably many Android apps) put it inside `text`
+ * alongside other text. Prefer `url`, fall back to extracting the first
+ * http(s) URL out of `text`. */
+function extractSharedUrl(params: { url?: string; text?: string }): string | undefined {
+  if (params.url && URL_PATTERN.test(params.url)) return params.url;
+  const match = params.text?.match(URL_PATTERN);
+  return match?.[0];
+}
+
 const SORT_MAP = {
   updated_desc: desc(recipes.updatedAt),
   updated_asc: asc(recipes.updatedAt),
@@ -43,7 +60,8 @@ export default async function RecipesPage({ searchParams }: { searchParams: Sear
   const m = getMessages((session.user as { locale?: string }).locale);
   const featurePrefs = await getFeaturePrefs(session.user.id);
 
-  const { q, sort, visibility, difficulty, tag, page: pageParam, batchCook, recipeType } = await searchParams;
+  const { q, sort, visibility, difficulty, tag, page: pageParam, batchCook, recipeType, url, text } = await searchParams;
+  const sharedUrl = extractSharedUrl({ url, text });
   const query = (q ?? "").trim().slice(0, 200);
   const sortKey: SortKey = (sort && sort in SORT_MAP ? sort : "updated_desc") as SortKey;
   const tagFilter = tag?.trim().slice(0, 50) || undefined;
@@ -140,6 +158,7 @@ export default async function RecipesPage({ searchParams }: { searchParams: Sear
         initialTag={tagFilter ?? ""}
         initialBatchCook={batchCookFilter ?? ""}
         initialRecipeType={recipeTypeFilter ?? ""}
+        sharedUrl={sharedUrl}
       />
       <RecipesEmptyState query={query} count={total} />
       <RecipesGrid key={`${query}-${sortKey}-${visibilityFilter}-${difficultyFilter}-${tagFilter}-${batchCookFilter}-${recipeTypeFilter}-${page}`} recipes={recipesWithFavorites} />

apps/web/app/manifest.ts

@@ -15,5 +15,18 @@ export default function manifest(): MetadataRoute.Manifest {
       { src: "/icon-512.svg", sizes: "512x512", type: "image/svg+xml", purpose: "any" },
       { src: "/icon-512.svg", sizes: "512x512", type: "image/svg+xml", purpose: "maskable" },
     ],
+    // Registers Epicure as a share target in the OS share sheet (Chromium
+    // on Android/desktop once installed — Safari has no equivalent API).
+    // Sharing a recipe link from another app opens /recipes with these
+    // query params, which auto-opens the URL-import dialog pre-filled.
+    share_target: {
+      action: "/recipes",
+      method: "GET",
+      params: {
+        title: "title",
+        text: "text",
+        url: "url",
+      },
+    },
   };
 }

apps/web/components/recipe/recipes-header.tsx

@@ -87,6 +87,7 @@ export function RecipesHeader({
   initialTag = "",
   initialBatchCook = "",
   initialRecipeType = "",
+  sharedUrl,
 }: {
   count: number;
   initialQuery?: string;
@@ -96,13 +97,19 @@ export function RecipesHeader({
   initialTag?: string;
   initialBatchCook?: string;
   initialRecipeType?: string;
+  /** A link shared into the installed PWA via the OS share sheet (Web Share
+   * Target, Chromium/Android only) — see manifest.ts's share_target and
+   * page.tsx's read of the `url`/`text` params it's redirected here with.
+   * Auto-opens the import dialog pre-filled instead of requiring the user
+   * to paste the link again. */
+  sharedUrl?: string;
 }) {
   const router = useRouter();
   const pathname = usePathname();
   const t = useTranslations("recipes");
   const tRecipe = useTranslations("recipe");
   const [aiOpen, setAiOpen] = useState(false);
-  const [urlOpen, setUrlOpen] = useState(false);
+  const [urlOpen, setUrlOpen] = useState(!!sharedUrl);
   const [query, setQuery] = useState(initialQuery);
   const [, startTransition] = useTransition();
 
@@ -314,7 +321,7 @@ export function RecipesHeader({
       </div>
 
       <AiGenerateDialog open={aiOpen} onOpenChange={setAiOpen} />
-      <UrlImportDialog open={urlOpen} onOpenChange={setUrlOpen} />
+      <UrlImportDialog open={urlOpen} onOpenChange={setUrlOpen} initialUrl={sharedUrl} autoImport={!!sharedUrl} />
     </>
   );
 }

apps/web/components/recipe/url-import-dialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { Link2, Loader2 } from "lucide-react";
@@ -25,15 +25,23 @@ type ImportedRecipe = {
 export function UrlImportDialog({
   open,
   onOpenChange,
+  initialUrl,
+  autoImport,
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /** Prefills (and, with autoImport, triggers) the import — used by the OS
+   * Share Target flow (apps/web/app/(app)/recipes/page.tsx) so sharing a
+   * link into the installed PWA lands here already filled in. */
+  initialUrl?: string;
+  autoImport?: boolean;
 }) {
   const t = useTranslations("recipe");
   const tCommon = useTranslations("common");
   const router = useRouter();
-  const [url, setUrl] = useState("");
+  const [url, setUrl] = useState(initialUrl ?? "");
   const [importing, setImporting] = useState(false);
+  const autoImportFired = useRef(false);
 
   async function handleImport() {
     if (!url.trim()) return;
@@ -77,6 +85,14 @@ export function UrlImportDialog({
     }
   }
 
+  useEffect(() => {
+    if (open && autoImport && initialUrl?.trim() && !autoImportFired.current) {
+      autoImportFired.current = true;
+      void handleImport();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, autoImport, initialUrl]);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-xl">

apps/web/lib/changelog.ts

@@ -1,5 +1,5 @@
 // Mirrors CHANGELOG.md at the repo root — update both together.
-export const APP_VERSION = "0.66.0";
+export const APP_VERSION = "0.67.0";
 
 export type ChangelogEntry = {
   version: string;
@@ -11,6 +11,13 @@ export type ChangelogEntry = {
 };
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.67.0",
+    date: "2026-07-21 09:30",
+    added: [
+      "Epicure now registers as an OS share target (Chromium/Android, once installed): share a recipe link from another app's share sheet and it opens straight into the URL-import flow, pre-filled and auto-imported. Safari has no equivalent API — Chromium/Android only, same restriction as the install-prompt banner.",
+    ],
+  },
   {
     version: "0.66.0",
     date: "2026-07-21 09:00",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicure/web",
-  "version": "0.66.0",
+  "version": "0.67.0",
   "private": true,
   "scripts": {
     "dev": "next dev",