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>
This commit is contained in:
Arnaud
2026-07-21 23:36:53 +02:00
parent 4c3880e07f
commit c8ee743458
9 changed files with 77 additions and 10 deletions
@@ -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">