feat: Add copy button to the create dialog and column layout

app/components/emails/create-dialog.tsx

@@ -4,13 +4,14 @@ import { useEffect, useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
-import { Plus, RefreshCw } from "lucide-react"
+import { Copy, Plus, RefreshCw } from "lucide-react"
 import { useToast } from "@/components/ui/use-toast"
 import { nanoid } from "nanoid"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { EXPIRY_OPTIONS } from "@/types/email"
+import { useCopy } from "@/hooks/use-copy"
 
 interface CreateDialogProps {
   onEmailCreated: () => void
@@ -28,9 +29,14 @@ export function CreateDialog({ onEmailCreated }: CreateDialogProps) {
   const [currentDomain, setCurrentDomain] = useState("")
   const [expiryTime, setExpiryTime] = useState(EXPIRY_OPTIONS[1].value.toString())
   const { toast } = useToast()
+  const { copyToClipboard } = useCopy()
 
   const generateRandomName = () => setEmailName(nanoid(8))
 
+  const copyEmailAddress = () => {
+    copyToClipboard(`${emailName}@${currentDomain}`)
+  }
+
   const createEmail = async () => {
     if (!emailName.trim()) {
       toast({
@@ -152,8 +158,21 @@ export function CreateDialog({ onEmailCreated }: CreateDialogProps) {
             </RadioGroup>
           </div>
 
-          <div className="text-sm text-gray-500">
-            完整邮箱地址将为: {emailName ? `${emailName}@${currentDomain}` : "..."}
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span className="shrink-0">完整邮箱地址将为:</span>
+            {emailName ? (
+              <div className="flex items-center gap-2 min-w-0">
+                <span className="truncate">{`${emailName}@${currentDomain}`}</span>
+                <div
+                  className="shrink-0 cursor-pointer hover:text-primary transition-colors"
+                  onClick={copyEmailAddress}
+                >
+                  <Copy className="size-4" />
+                </div>
+              </div>
+            ) : (
+              <span className="text-gray-400">...</span>
+            )}
           </div>
         </div>
         <div className="flex justify-end gap-2">