From 996584f99d4f33eddd07efb58d3b84150f4bbd35 Mon Sep 17 00:00:00 2001
From: cc <codecolorist@gmail.com>
Date: Tue, 14 Apr 2026 19:35:40 +0200
Subject: [PATCH] Add visual feedback to copy button and download button

- Replace toast notification with visual state change (green check icon)
- Add new DownloadButton component for saving XML as .plist files
---
 src/components/copy-button.tsx     | 30 +++++++++++++++++-------------
 src/components/download-button.tsx | 30 ++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 13 deletions(-)
 create mode 100644 src/components/download-button.tsx

diff --git a/src/components/copy-button.tsx b/src/components/copy-button.tsx
index f4eafa4..1e8922c 100644
--- a/src/components/copy-button.tsx
+++ b/src/components/copy-button.tsx
@@ -1,21 +1,25 @@
 "use client";
 
-import { Copy } from "lucide-react";
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
 import { Button } from "./ui/button";
-import { toast } from "sonner";
 
 export function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
-    <div>
-      <Button
-        variant="outline"
-        onClick={() => {
-          navigator.clipboard.writeText(text);
-          toast("Copied");
-        }}
-      >
-        <Copy className="w-4 h-4" />
-      </Button>
-    </div>
+    <Button
+      variant="outline"
+      onClick={handleCopy}
+      className={copied ? "text-green-600 border-green-600" : ""}
+    >
+      {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+    </Button>
   );
 }
diff --git a/src/components/download-button.tsx b/src/components/download-button.tsx
new file mode 100644
index 0000000..d15b0ae
--- /dev/null
+++ b/src/components/download-button.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Download } from "lucide-react";
+import { Button } from "./ui/button";
+
+export function DownloadButton({
+  content,
+  filename,
+}: {
+  content: string;
+  filename: string;
+}) {
+  const handleDownload = () => {
+    const blob = new Blob([content], { type: "application/xml" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Button variant="outline" onClick={handleDownload}>
+      <Download className="w-4 h-4" />
+    </Button>
+  );
+}