feat: implement comprehensive copy-to-clipboard functionality (#87)

* feat: implement comprehensive copy-to-clipboard functionality (#59)

- Add reusable copy utility functions with fallback support
- Create CopyButton, CopyTextButton, and CopyIconButton components
- Integrate Sonner toast notifications for user feedback
- Update ShareDialog to use new copy components
- Update GistViewer with improved copy functionality
- Add specialized helpers for GhostPaste content (URLs, files)
- Include comprehensive test coverage (61 tests total)
- Add demo page showcasing all copy functionality
- Support modern Clipboard API with legacy fallback
- Include retry logic and browser support detection

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <claude@ghostpaste.dev>

* fix: resolve SSR hydration errors in copy-to-clipboard demo

- Add proper typeof checks for window, navigator, and document
- Use useEffect for client-side copy support detection
- Add loading state while checking browser capabilities
- Prevent 'window is not defined' errors during server-side rendering

---------

Co-authored-by: Claude <claude@ghostpaste.dev>

Author: nullcoder

app/demo/copy-to-clipboard/page.tsx

@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Header } from "@/components/header";
 import { ErrorBoundary } from "@/components/error-boundary";
+import { Toaster } from "sonner";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -43,6 +44,7 @@ export default function RootLayout({
               <ErrorBoundary>{children}</ErrorBoundary>
             </main>
           </ErrorBoundary>
+          <Toaster />
         </ThemeProvider>
       </body>
     </html>

app/layout.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
+import { CopyIconButton } from "@/components/ui/copy-button";
 import { CodeEditor } from "@/components/ui/code-editor";
 import { Copy, Download, FileText } from "lucide-react";
 import { useTheme } from "next-themes";
@@ -12,6 +13,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { copyHelpers } from "@/lib/copy-to-clipboard";
 import type { File } from "@/types";
 
 export interface GistViewerProps {
@@ -24,12 +26,11 @@ export function GistViewer({ files, className }: GistViewerProps) {
   const [wordWrap, setWordWrap] = useState(false);
   const { resolvedTheme } = useTheme();
 
-  const handleCopyFile = async (content: string) => {
+  const handleCopyAll = async () => {
     try {
-      await navigator.clipboard.writeText(content);
-      // TODO: Show toast notification
+      await copyHelpers.copyMultipleFiles(files);
     } catch (error) {
-      console.error("Failed to copy:", error);
+      console.error("Failed to copy all files:", error);
     }
   };
 
@@ -82,15 +83,26 @@ export function GistViewer({ files, className }: GistViewerProps) {
               Word Wrap: {wordWrap ? "On" : "Off"}
             </Button>
           </div>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleDownloadAll}
-            className="text-xs"
-          >
-            <Download className="mr-1 h-3 w-3" />
-            Download All
-          </Button>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleCopyAll}
+              className="text-xs"
+            >
+              <Copy className="mr-1 h-3 w-3" />
+              Copy All
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleDownloadAll}
+              className="text-xs"
+            >
+              <Download className="mr-1 h-3 w-3" />
+              Download All
+            </Button>
+          </div>
         </div>
 
         {/* Files List - Vertical Layout */}
@@ -102,7 +114,7 @@ export function GistViewer({ files, className }: GistViewerProps) {
               theme={resolvedTheme === "dark" ? "dark" : "light"}
               showLineNumbers={showLineNumbers}
               wordWrap={wordWrap}
-              onCopy={() => handleCopyFile(file.content)}
+              onCopy={() => {}}
               onDownload={() => handleDownloadFile(file)}
             />
           ))}
@@ -126,7 +138,7 @@ function FileContent({
   theme,
   showLineNumbers,
   wordWrap,
-  onCopy,
+  onCopy: _onCopy,
   onDownload,
 }: FileContentProps) {
   return (
@@ -141,16 +153,13 @@ function FileContent({
         <div className="flex gap-1">
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
+              <CopyIconButton
+                text={file.content}
                 className="h-7 w-7"
-                onClick={onCopy}
                 aria-label={`Copy ${file.name} to clipboard`}
                 data-testid={`copy-${file.name}`}
-              >
-                <Copy className="h-3 w-3" />
-              </Button>
+                successMessage={`${file.name} copied to clipboard!`}
+              />
             </TooltipTrigger>
             <TooltipContent>Copy to clipboard</TooltipContent>
           </Tooltip>

components/gist-viewer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState } from "react";
 import { Button } from "@/components/ui/button";
+import { CopyIconButton, CopyTextButton } from "@/components/ui/copy-button";
 import {
   Dialog,
   DialogClose,
@@ -11,8 +11,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Check, Copy, Download, AlertTriangle } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { Check, Download, AlertTriangle } from "lucide-react";
+import { type CopyResult } from "@/lib/copy-to-clipboard";
 
 export interface ShareDialogProps {
   /** Whether the dialog is open */
@@ -37,45 +37,14 @@ export function ShareDialog({
   onCopy,
   onDownload,
 }: ShareDialogProps) {
-  const [copySuccess, setCopySuccess] = useState(false);
-
   // Split the URL at the fragment for visual display
   const urlParts = shareUrl.split("#");
   const baseUrl = urlParts[0];
   const fragment = urlParts[1] ? `#${urlParts[1]}` : "";
 
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(shareUrl);
-      setCopySuccess(true);
+  const handleCopyResult = (result: CopyResult) => {
+    if (result.success) {
       onCopy?.();
-
-      // Reset success state after 2 seconds
-      setTimeout(() => setCopySuccess(false), 2000);
-    } catch (error) {
-      console.error("Failed to copy URL:", error);
-      // Fallback for older browsers
-      fallbackCopy();
-    }
-  };
-
-  const fallbackCopy = () => {
-    const textArea = document.createElement("textarea");
-    textArea.value = shareUrl;
-    textArea.style.position = "absolute";
-    textArea.style.left = "-999999px";
-    document.body.appendChild(textArea);
-    textArea.select();
-
-    try {
-      document.execCommand("copy");
-      setCopySuccess(true);
-      onCopy?.();
-      setTimeout(() => setCopySuccess(false), 2000);
-    } catch (error) {
-      console.error("Fallback copy failed:", error);
-    } finally {
-      document.body.removeChild(textArea);
     }
   };
 
@@ -126,20 +95,13 @@ export function ShareDialog({
                   )}
                 </div>
               </div>
-              <Button
-                size="sm"
-                variant="outline"
-                className="absolute top-2 right-2 h-7 w-7 p-0"
-                onClick={handleCopy}
-                disabled={copySuccess}
+              <CopyIconButton
+                text={shareUrl}
+                className="absolute top-2 right-2"
+                onCopy={handleCopyResult}
+                successMessage="URL copied to clipboard!"
                 aria-label="Copy URL to clipboard"
-              >
-                {copySuccess ? (
-                  <Check className="h-3 w-3 text-green-600" />
-                ) : (
-                  <Copy className="h-3 w-3" />
-                )}
-              </Button>
+              />
             </div>
           </div>
 
@@ -174,26 +136,14 @@ export function ShareDialog({
             <Download className="mr-2 h-4 w-4" />
             Download as Text
           </Button>
-          <Button
-            onClick={handleCopy}
-            disabled={copySuccess}
-            className={cn(
-              "w-full sm:w-auto",
-              copySuccess && "bg-green-600 hover:bg-green-600"
-            )}
-          >
-            {copySuccess ? (
-              <>
-                <Check className="mr-2 h-4 w-4" />
-                Copied!
-              </>
-            ) : (
-              <>
-                <Copy className="mr-2 h-4 w-4" />
-                Copy Link
-              </>
-            )}
-          </Button>
+          <CopyTextButton
+            text={shareUrl}
+            label="Copy Link"
+            className="w-full sm:w-auto"
+            onCopy={handleCopyResult}
+            successMessage="URL copied to clipboard!"
+            variant="default"
+          />
           <DialogClose asChild>
             <Button variant="secondary" className="w-full sm:w-auto">
               Done