From 424a951605e25d3db8890cf04c264e488799c0fe Mon Sep 17 00:00:00 2001
From: Zhenya Goroh <zhenyagoroh@gmail.com>
Date: Sun, 29 Sep 2024 00:05:09 +0300
Subject: [PATCH 1/6] Added useClipboard hook

---
 src/lib/hooks.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/lib/hooks.ts

diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts
new file mode 100644
index 0000000..577519e
--- /dev/null
+++ b/src/lib/hooks.ts
@@ -0,0 +1,7 @@
+export function useClipboard(valueToCopy: string) {
+	const copyToClipboard = () => {
+		navigator.clipboard.writeText(valueToCopy);
+	};
+
+	return copyToClipboard;
+}

From d706380409cfff0d25594eec94a62e3d59f0dde1 Mon Sep 17 00:00:00 2001
From: Zhenya Goroh <zhenyagoroh@gmail.com>
Date: Sun, 29 Sep 2024 00:11:26 +0300
Subject: [PATCH 2/6] Added CopyButton component

---
 src/components/ui/copy-button.tsx | 34 +++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/ui/copy-button.tsx

diff --git a/src/components/ui/copy-button.tsx b/src/components/ui/copy-button.tsx
new file mode 100644
index 0000000..806b5d3
--- /dev/null
+++ b/src/components/ui/copy-button.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { CopyIcon } from "@radix-ui/react-icons";
+
+import { useClipboard } from "@/lib/hooks";
+
+const CopyButton = React.forwardRef<
+	React.ElementRef<typeof Button>,
+	React.ComponentPropsWithoutRef<typeof Button> & {
+		valueToCopy: string;
+	}
+>(({ className, valueToCopy, ...props }, ref) => {
+	const copyToClipboard = useClipboard(valueToCopy);
+
+	return (
+		<>
+			<Button
+				ref={ref}
+				variant={"ghost"}
+				size={"icon"}
+				className={className}
+				onClick={copyToClipboard}
+				{...props}
+			>
+				<CopyIcon className="size-4" />
+			</Button>
+		</>
+	);
+});
+
+export { CopyButton };

From bc77f2427e229a5bd03a00e3d80ced5355ebfc59 Mon Sep 17 00:00:00 2001
From: Zhenya Goroh <zhenyagoroh@gmail.com>
Date: Sun, 29 Sep 2024 00:15:11 +0300
Subject: [PATCH 3/6] Added CopyButton to the download component

---
 src/components/download.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/download.tsx b/src/components/download.tsx
index 1d83bdd..4c4000d 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -2,7 +2,6 @@
 import { useState, useEffect } from "react";
 import styled, { keyframes } from "styled-components";
 import { ny } from "@/lib/utils";
-import { Checkbox } from "./ui/checkbox";
 import { ChevronLeft, InfoIcon } from "lucide-react";
 import { Button } from "./ui/button";
 import Particles from "./ui/particles";
@@ -14,6 +13,7 @@ const BASE_URL =
 	"https://github.com/zen-browser/desktop/releases/latest/download";
 
 import SparklesText from "./ui/sparkles-text";
+import { CopyButton } from "@/components/ui/copy-button";
 const field_enter = keyframes`
   0% {
     opacity: 0;
@@ -191,6 +191,9 @@ export default function DownloadPage() {
 		}
 	};
 
+	const linuxAppimageBashScript =
+		'bash {"<"}(curl https://updates.zen-browser.app/appimage.sh)';
+
 	return (
 		<>
 			<link
@@ -240,8 +243,12 @@ export default function DownloadPage() {
 										If you're using an AppImage, you can use the automatic
 										installer, check it out{" "}
 									</p>
-									<pre className="mt-2 rounded-md bg-background p-2 text-muted-foreground">
-										bash {"<"}(curl https://updates.zen-browser.app/appimage.sh)
+									<pre className="mt-2 flex items-center rounded-md bg-background p-2 text-muted-foreground">
+										{linuxAppimageBashScript}
+										<CopyButton
+											className="ml-3"
+											valueToCopy={linuxAppimageBashScript}
+										/>
 									</pre>
 								</div>
 							)}

From 181b99f815189816ab860f5b0b0f3e4b78f660ba Mon Sep 17 00:00:00 2001
From: Zhenya Goroh <zhenyagoroh@gmail.com>
Date: Sun, 29 Sep 2024 00:26:45 +0300
Subject: [PATCH 4/6] Changed some imports

---
 src/components/download.tsx       | 2 +-
 src/components/ui/copy-button.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/download.tsx b/src/components/download.tsx
index 4c4000d..a12bf2a 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -4,6 +4,7 @@ import styled, { keyframes } from "styled-components";
 import { ny } from "@/lib/utils";
 import { ChevronLeft, InfoIcon } from "lucide-react";
 import { Button } from "./ui/button";
+import { CopyButton } from "./ui/copy-button";
 import Particles from "./ui/particles";
 import confetti from "canvas-confetti";
 import { releases, releaseTree } from "@/lib/releases";
@@ -13,7 +14,6 @@ const BASE_URL =
 	"https://github.com/zen-browser/desktop/releases/latest/download";
 
 import SparklesText from "./ui/sparkles-text";
-import { CopyButton } from "@/components/ui/copy-button";
 const field_enter = keyframes`
   0% {
     opacity: 0;
diff --git a/src/components/ui/copy-button.tsx b/src/components/ui/copy-button.tsx
index 806b5d3..f253ed2 100644
--- a/src/components/ui/copy-button.tsx
+++ b/src/components/ui/copy-button.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 
-import { Button } from "@/components/ui/button";
+import { Button } from "./button";
 import { CopyIcon } from "@radix-ui/react-icons";
 
 import { useClipboard } from "@/lib/hooks";

From 3d1b620b201627de23c97c37c3d7e193487ba48d Mon Sep 17 00:00:00 2001
From: Zhenya Goroh <zhenyagoroh@gmail.com>
Date: Sun, 29 Sep 2024 00:38:11 +0300
Subject: [PATCH 5/6] Added CheckIcon to CopyButton

---
 src/components/ui/copy-button.tsx | 33 ++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/copy-button.tsx b/src/components/ui/copy-button.tsx
index f253ed2..de395d0 100644
--- a/src/components/ui/copy-button.tsx
+++ b/src/components/ui/copy-button.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 
 import { Button } from "./button";
-import { CopyIcon } from "@radix-ui/react-icons";
+import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
 
 import { useClipboard } from "@/lib/hooks";
 
@@ -15,6 +15,29 @@ const CopyButton = React.forwardRef<
 >(({ className, valueToCopy, ...props }, ref) => {
 	const copyToClipboard = useClipboard(valueToCopy);
 
+	const [showSuccessIcon, setShowSuccessIcon] = React.useState(false);
+
+	const handleCopy = () => {
+		copyToClipboard();
+		setShowSuccessIcon(true);
+	};
+
+	React.useEffect(() => {
+		let timeout: ReturnType<typeof setTimeout> | null = null;
+
+		if (showSuccessIcon) {
+			timeout = setTimeout(() => {
+				setShowSuccessIcon(false);
+			}, 5000);
+		}
+
+		return () => {
+			if (timeout) {
+				clearTimeout(timeout);
+			}
+		};
+	}, [showSuccessIcon]);
+
 	return (
 		<>
 			<Button
@@ -22,10 +45,14 @@ const CopyButton = React.forwardRef<
 				variant={"ghost"}
 				size={"icon"}
 				className={className}
-				onClick={copyToClipboard}
+				onClick={handleCopy}
 				{...props}
 			>
-				<CopyIcon className="size-4" />
+				{showSuccessIcon ? (
+					<CheckIcon className="size-5 text-green-500" />
+				) : (
+					<CopyIcon className="size-4" />
+				)}
 			</Button>
 		</>
 	);

From 5b8d4720e4c09b3e65d342d42dbc70d3fb5b7183 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?mauro=20=F0=9F=A4=99?=
 <91018726+mauro-balades@users.noreply.github.com>
Date: Sun, 29 Sep 2024 12:18:33 -0700
Subject: [PATCH 6/6] Update download.tsx

---
 src/components/download.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/download.tsx b/src/components/download.tsx
index a12bf2a..8f352b0 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -192,7 +192,7 @@ export default function DownloadPage() {
 	};
 
 	const linuxAppimageBashScript =
-		'bash {"<"}(curl https://updates.zen-browser.app/appimage.sh)';
+		'bash <(curl https://updates.zen-browser.app/appimage.sh)';
 
 	return (
 		<>