feat: add clipboard

src/routes/import-key.lazy.tsx

@@ -2,7 +2,8 @@ import { commands } from "@/commands";
 import { GoBack } from "@/components/back";
 import { Frame } from "@/components/frame";
 import { Spinner } from "@/components/spinner";
-import { Link, createLazyFileRoute } from "@tanstack/react-router";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { readText } from "@tauri-apps/plugin-clipboard-manager";
 import { message } from "@tauri-apps/plugin-dialog";
 import { useState, useTransition } from "react";
 
@@ -17,6 +18,11 @@ function Screen() {
 	const [password, setPassword] = useState("");
 	const [isPending, startTransition] = useTransition();
 
+	const pasteFromClipboard = async () => {
+		const val = await readText();
+		setKey(val);
+	};
+
 	const submit = async () => {
 		startTransition(async () => {
 			if (!key.startsWith("nsec1")) {
@@ -61,14 +67,24 @@ function Screen() {
 							>
 								Private Key
 							</label>
-							<input
-								name="key"
-								type="text"
-								placeholder="nsec or ncryptsec..."
-								value={key}
-								onChange={(e) => setKey(e.target.value)}
-								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
-							/>
+
+							<div className="relative">
+								<input
+									name="key"
+									type="text"
+									placeholder="nsec or ncryptsec..."
+									value={key}
+									onChange={(e) => setKey(e.target.value)}
+									className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
+								/>
+								<button
+									type="button"
+									onClick={() => pasteFromClipboard()}
+									className="absolute top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
+								>
+									Paste
+								</button>
+							</div>
 						</div>
 						<div className="flex flex-col gap-1">
 							<label

src/routes/nostr-connect.lazy.tsx

@@ -3,6 +3,7 @@ import { GoBack } from "@/components/back";
 import { Frame } from "@/components/frame";
 import { Spinner } from "@/components/spinner";
 import { createLazyFileRoute } from "@tanstack/react-router";
+import { readText } from "@tauri-apps/plugin-clipboard-manager";
 import { message } from "@tauri-apps/plugin-dialog";
 import { useState, useTransition } from "react";
 
@@ -16,6 +17,11 @@ function Screen() {
 	const [uri, setUri] = useState("");
 	const [isPending, startTransition] = useTransition();
 
+	const pasteFromClipboard = async () => {
+		const val = await readText();
+		setUri(val);
+	};
+
 	const submit = async () => {
 		startTransition(async () => {
 			if (!uri.startsWith("bunker://")) {
@@ -61,14 +67,23 @@ function Screen() {
 						>
 							Connection String
 						</label>
-						<input
-							name="uri"
-							type="text"
-							placeholder="bunker://..."
-							value={uri}
-							onChange={(e) => setUri(e.target.value)}
-							className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
-						/>
+						<div className="relative">
+							<input
+								name="uri"
+								type="text"
+								placeholder="bunker://..."
+								value={uri}
+								onChange={(e) => setUri(e.target.value)}
+								className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
+							/>
+							<button
+								type="button"
+								onClick={() => pasteFromClipboard()}
+								className="absolute top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
+							>
+								Paste
+							</button>
+						</div>
 					</Frame>
 					<div className="flex flex-col items-center gap-1">
 						<button
@@ -80,13 +95,14 @@ function Screen() {
 							{isPending ? <Spinner /> : "Continue"}
 						</button>
 						{isPending ? (
-							<p className="text-sm text-center text-neutral-600 dark:text-neutral-400">
+							<p className="mt-2 text-sm text-center text-neutral-600 dark:text-neutral-400">
 								Waiting confirmation...
 							</p>
-						) : null}
-						<GoBack className="mt-2 w-full text-sm text-neutral-600 dark:text-neutral-400 inline-flex items-center justify-center">
-							Back
-						</GoBack>
+						) : (
+							<GoBack className="mt-2 w-full text-sm text-neutral-600 dark:text-neutral-400 inline-flex items-center justify-center">
+								Back
+							</GoBack>
+						)}
 					</div>
 				</div>
 			</div>