feat: copy/export as Markdown wherever print exists

Added a shared ExportMarkdownButton (copy to clipboard / download .md) next to every existing print button: recipe, shopping list, collection, meal plan, pantry. Each surface gets a small serializer in lib/markdown/ built from data already in scope at that page — no new queries except pantry, where items now thread through as a prop to PantryPageHeader instead of being fetched only for PantryManager. Also fixes an unrelated bug hit while verifying the collection export: RecipeCard called the client-only useTranslations() hook without "use client", so it rendered fine everywhere it happened to run inside an already-client tree but 500'd — "Couldn't find next-intl config file" — when Next tried to run it as a Server Component, which only happens on the collection detail page (its only caller). Collections with recipes in them were completely broken. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-08 22:15:48 +02:00
parent 68cbd5b4e4
commit 1677e40668
15 changed files with 296 additions and 13 deletions
@@ -0,0 +1,63 @@
+"use client";
+
+import { Copy, Download, FileDown } from "lucide-react";
+import { toast } from "sonner";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ExportMarkdownButton({
+  markdown,
+  filename,
+}: {
+  markdown: string;
+  filename: string;
+}) {
+  const t = useTranslations("common");
+
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(markdown);
+      toast.success(t("copiedToClipboard"));
+    } catch {
+      toast.error(t("copyFailed"));
+    }
+  }
+
+  function handleDownload() {
+    const blob = new Blob([markdown], { type: "text/markdown;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename.endsWith(".md") ? filename : `${filename}.md`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={
+        <Button variant="ghost" size="icon" title={t("exportMarkdown")}>
+          <FileDown className="h-4 w-4" />
+        </Button>
+      } />
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => { void handleCopy(); }}>
+          <Copy className="h-4 w-4" />
+          {t("copyMarkdown")}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={handleDownload}>
+          <Download className="h-4 w-4" />
+          {t("downloadMarkdown")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}