Toast component and use for copy-as-curl

src-web/hooks/useClipboardText.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { readText } from '@tauri-apps/plugin-clipboard-manager';
+
+export function useClipboardText() {
+  return useQuery({
+    queryKey: [],
+    queryFn: async () => {
+      const text = await readText();
+      console.log('READ CLIPBOARD', text);
+      return text;
+    },
+  }).data;
+}

src-web/hooks/useCopyAsCurl.tsx

@@ -1,9 +1,12 @@
 import { invoke } from '@tauri-apps/api/core';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
-import { useState } from 'react';
+import React, { useState } from 'react';
+import { useToast } from '../components/ToastContext';
+import { Icon } from '../components/core/Icon';
 
 export function useCopyAsCurl(requestId: string) {
   const [checked, setChecked] = useState<boolean>(false);
+  const toast = useToast();
   return [
     checked,
     async () => {
@@ -11,6 +14,14 @@ export function useCopyAsCurl(requestId: string) {
       await writeText(cmd);
       setChecked(true);
       setTimeout(() => setChecked(false), 800);
+      toast.show({
+        render: () => [
+          <>
+            <Icon icon="copyCheck" />
+            <span>Command copied to clipboard</span>
+          </>,
+        ],
+      });
       return cmd;
     },
   ] as const;